この記事では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ですが、東京と大阪にもエッジロケーション、つまり、配信サーバがあるので高速です。
基本的には、何かしらの理由がある時以外は、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開発に興味はあるけれど、まだ触れていない方におすすめです。
動画教材を使うことで、独学するよりも効率的に学べます。
動画で学ぶプログラミング入門
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する