プログラミング入門ナビ by Proglus（プログラス）

プログラミング学習初心者のための情報メディア

本ページにプロモーションが含まれる場合があります

You are here: Home / Archives for プログラミング入門ナビ編集部

プログラミング入門ナビ編集部

Vue.jsの読み込み方法について

By

この記事ではVue.jsの読み込みについて学習します。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」を、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開中です。

Vue.jsを使ってプログラムを書くには、Vue.jsのファイルを読み込む必要があります。

Vue.jsを読み込む方法

Vue.jsを読み込む方法ですが、主に、次の方法があります。

  • ◯ CDN（Content Delivery Network経由 ）
  • 直接組み込み（ファイルをダウンロードして配置）
  • NPM（パッケージ管理ソフトの利用）

この記事では原則CDNを使った読み込みを行います。無料で利用できます。

動画で学習する

CDNについて

CDNというのはContent Delivery Network の略です。
ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。

Vue.jsで利用するのはjsdelivrというCDNですが、東京と大阪にもエッジロケーション、つまり、配信サーバがあるので高速です。

Network map | jsDelivr

基本的には、何かしらの理由がある時以外は、CDNを使うのがおすすめです。

読み込み方ですが。
Vue.jsの公式サイトで、「インストール」 などのキワードで検索すると、
インストールのページが開けます。

見出しCDN, のところに、vue.jsをCDNから読み込むための、コードが記載されているのでコピーします。

HTML入力欄の末尾にコピーしまします。
実際のHTMLの場合は、bodyの終了タグの直前に配置します。

これでVue.jsを読み込むことができました。

Vue.jsのバージョンについて

この数字を変更することで,読み込むvue.jsのバージョンを変更することができます。

このコースのサンプルコードは、vue.js バージョン2.5.16で動作確認を行っています。

2.5.xというバージョンで、かつ、2.5.16以上であれば基本的には動作すると考えられます。

しかしながら、2.5.16以外のバージョンですと、動作が動画と異なる可能性もあるため、学習中には、バージョン2.5.16を明示的に指定することをおすすめします。

実際に本番環境で一般ユーザーに公開する場合も、バージョンを固定するのが安全です。
Vue.jsのバージョンを上げるときには、必ず、ステージング環境など開発用の環境で、新しいVue.jsのバージョンでアプリケーションの動作検証をしてから、本番環境に公開するようにしてください。

おわりに

このレクチャーでは、Vue.jsをCDNを使った読み込む方法について学習しました。
オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」では、Vue.jsを動画を使って学習します。
Vue.jsを使ったWeb開発に興味はあるけれど、まだ触れていない方におすすめです。
動画教材を使うことで、独学するよりも効率的に学べます。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶはじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。 4.3 (3687 ratings)122 lectures, 5 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

JSFiddleの画面の概要について説明

By

この記事では、jsFiddleの画面の概要について、学習します。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」を、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開中です。

jsFiddleのサイトをWebブラウザで開く

Webブラウザでjsfiddle.netを開いてください。
Webブラウザは、本質的ではない部分でトラブルが発生しないために、Google Chromeを使うことをおすすめしています。

動画で学ぶ

初期操作

JSFiddleを開いたら、
Closeを押して、作業領域を広くします。

いまは、黒い画面、Darkテーマになっているのですが、
動画で皆さんが見やすいように、明るいテーマに変更をしておきます。
Settings > Dark テーマ をOFFにしします。
テーマは、各自の好みで構いません。

HTML 入力欄について

このHTMLと記載がある入力欄には、Vue.jsのテンプレート記述します。

もう少し補足すると、
ここには、HTMLのbodyタグの要素の内容を記述します。
HTMLタグとか、ヘッダーなどは、JSfiddleが、自動的に生成するので書く必要はありません、

<!-- この部分を記述する -->

JavaScript入力欄

JavaScriptの欄には、JavaScriptを記載します。
jsファイルの読み込みに相当する記述は、JSFiddleが自動的に裏側で記述してくれます。

CSS入力欄

JavaScriptの欄には、CSSを記載します。
CSSファイルの読み込みに相当する記述は、JSFiddleが自動的に裏側で記述してくれます。

出力欄

この部分には、
書いたコードの出力が表示されます。

RUNボタン押すと、書いたコードが描画されます。

デベロッパーツールで、HTMLを確認してみましょう。
iframeで、開発者が書いたWebページを表示していることが分かります。

おわりに

もう少し詳しい使い方や、便利な使い方については、あとのレクチャーで随時紹介していきます。

実際に使ってみたほうがイメージしてが着くと思いますので、つぎのレクチャーから、実際にはコードを書いてきましょう。

この記事では、このレクチャーでは、JSFiddleの画面について概要を学習しました。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶはじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。 4.3 (3687 ratings)122 lectures, 5 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Vue.jsの基本的な使い方 イントロダクション

By

注目度抜群のJavaScriptフレームワーク「Vue.js」入門オンラインコース『「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」』 Vuejsの基本的な使い方のセクションのイントロダクションです。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」を、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開中です。

Vue.jsを動画で学ぶ

説明

このセクションでは、Vue.jsの基本的な使い方について、速習を行います。

機能の詳細については、あとのセクションで個別に説明します。
まずは、細かいことよりも、Vue.jsの全体像についてコードを書いて習得することを目的としています。

学習環境としては、JavaScriptの学習に便利なWebサービス jsFiddleを利用します。
無料で使えて、ユーザー登録も必須ではありません。

jsFiddleを使わないで、テキストエディタを使って開発する方法についても、補足説明いたします。

このセクションの学習カリキュラム

  1. イントロダクション
  2. JSFiddle 画面説明
  3. Vue.jsの読み込み
  4. Vue.jsの開発バージョンと本番バージョン
  5. Vueインスタンスの作成
  6. ルートのテンプレートを作成
  7. データバインディングとは
  8. Vue.js入門 テキストのデータバインディング
  9. dataオプションにオブジェクトや配列要素を設定
  10. jsFiddle 便利な設定
  11. jsFiddle ソースコードの保存
  12. エラーを自力で解決する方法
  13. ディレクティブとは
  14. 属性のデータバインディング v-bind
  15. 条件分岐 v-if
  16. 条件分岐 v-show
  17. 繰り返しの描画 v-for
  18. オブジェクトの繰り返し描画 v-for
  19. イベントの基本 v-on
  20. 双方向データバインディング v-model
  21. コンポーネント
  22. トランジション
  23. 演習：Vue.jsの基本的な使い方のまとめ①
  24. 演習：Vue.jsの基本的な使い方のまとめ②
  25. 補足：テキストエディタを使った開発
  26. consoleからObj操作

おわりに

Vue.jsのコードは書いていて、とても楽しいです。

この楽しさは理屈では説明が難しいので、まずはコードを書いて体感してください。

詳細は無料プレビュー動画を30分用意しましたので、ぜひご覧ください！

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶはじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。 4.3 (3687 ratings)122 lectures, 5 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

【JavaScript】変数の宣言var, const, let の違いについて

By

変数の宣言var, const, let の違いについて、プログラミング入門者向けに説明いたします。

主に、「動作の違い」、「利用できるJavaScriptのバージョンの違い」2点が挙げられます。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

① 動作の違い

var ・・・「再宣言」も「再代入」も可能

例)

var num = 10; // OK
num = 11; // OK
var num = 12; // OK

let・・・ 「再宣言」が不可

例)

let num = 10; // OK
num = 11; // OK
let num = 12; // NG

const ・・・ 「再宣言」も「再代入」も不可

例)

const num = 10; // OK
num = 11; // NG
const num = 12; // NG

②利用できるJavaScriptのバージョンの違い

  • var・・・すべてのJavaScriptバージョンで利用できる。

  • let, const ・・・ES2015以降で利用できる。インタネットエクスプローラーなど、対応していないブラウザがあるため、公開時にES5のコードに変換するなど配慮が必要になる場合がある。

おわりに

この記事では、変数の宣言var, const, let の違いについて、プログラミング入門者向けに説明しました。

Udemyでオンライン講座を公開中！

オンライン講座「Web開発入門完全攻略コース」では、JavaScriptの使い方を始めとした、プログラミング入門について動画を使って学習できます。
無料プレビューを1時間分用意しています。ぜひご確認ください！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

MySQL 5.7 for Windowsのアンインストール方法について解説

By

MySQL 5.7 for Windowsのアンインストール方法について説明します。

単純に「アプリケーションの追加と削除」から削除するだけだと、再インストール時にトラブルが発生して対処が困難となりますので、注意してください。

この記事は、オンライン講座「はじめてのSQL・データ分析入門 – データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース」のサポート記事です。

注意事項

  • データベースのデータはすべて削除されます。必要に応じてバックアップを取ってください。
  • 検証環境にはWindows10を利用しています。Windows7, 8では、OSのUIなど違うところがある可能性があります。

大まかな流れ

  1. サービスを停止
  2. 管理者権限でコマンドプロンプトを実行
  3. MySQLアプリケーションの削除
  4. プログラムの追加と削除 を使って関連ファイル削除
  5. Program Files内のMySQLフォルダを削除
  6. ProgramData内のMySQLフォルダを削除
  7. PCの再起動

サービスを停止

サービス　アプリを起動

「管理ツール」 > 「サービス」 を起動。

MySQL57 停止

MySQL57を右クリック

停止

停止済み

MySQL57の状態が、「実行中」ではなく、 空白になっていればOKです。

管理者権限でコマンドプロンプトを実行

右クリック、管理者で実行

MySQLの削除

cdコマンドを使って、MySQLフォルダ内のbinフォルダに移動

C:\Users\yourusename>cd "C:\Program Files\MySQL\MySQL Server 5.7\bin"

入力したら、エンターキーを押す。

MySQL57を削除

C:\Program Files\MySQL\MySQL Server 5.7\bin>mysqld --remove MySQL57

入力したら、エンターキーを押す。

MySQLアプリケーションの削除

“Service successfully removed.”と表示されればOKです。

プログラムの追加と削除 を使って関連ファイル削除

ログラムの追加と削除 を起動

MySQL Server 5.7　をアンインストール

「MySQL」のキーワードで検索

MySQL Server 5.7　 アンインストール

MySQL関連のものを削除

同様に、 「MySQL 〇〇〇〇◯」 は、全てアンインストールする

すべてなくなればOK

Program Files内のMySQLフォルダを削除

パスは、

C:\Program Files\MySQL\MySQL Server 5.7

ProgramData内のMySQLフォルダを削除

パスは、

C:\ProgramData\MySQL\MySQL Server 5.7

ProgramDataフォルダは隠しフォルダ

ProgramDataフォルダが表示されていない方は、Windowsの設定を確認してください。

PCの再起動

念の為となりますが、PCを再起動します。

おわりに

この記事では、MySQL 5.7 for Windowsのアンインストール方法について学習しました。

UdemyでSQL入門講座を公開中

世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）にて、SQL初心者向けのオンライン講座を公開中です。

ベストセラーコースにも選ばれたことがある人気のコースです。
ぜひ、ご利用ください。

「はじめてのSQL・データ分析入門 – データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース」

エクセル作業からのステップアップ！データベースのデータを取得し、効果的にレポーティングしたいビジネスパーソンにおすすめ。データベースを操作する言語SQLを短期間で身につけビジネスの現場で使うための実践型カリキュラム。MySQL使用。

Bestseller はじめてのSQL ・データ分析入門 -データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コースはじめてのSQL ・データ分析入門 -データベースのデータをビジネスパーソンが現場で活用するためのSQL初心者向コース中村 祐太 Yuta Nakamura, Proglus （プログラス）MySQL 使用。エクセル作業からのステップアップ！データベースのデータを取得し、効果的にレポーティングしたいビジネスパーソンにおすすめ！データベースを操作する言語SQLを短期間で身につけビジネスの現場で使うための実践型カリキュラム。 4.4 (6986 ratings)144 lectures, 7 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する