この記事では、Vue.jsの開発バージョンと本番バージョンについて学習します。
オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」を、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開中です。
目次
動画を使って学習する
開発バージョンと本番バージョンの違い
開発バージョン・・・開発中に使う
- 警告出力とデバッグモード ◯
- スピード ： ✕
本番バージョン・・・本番環境で使う
- 警告出力とデバッグモード ✕
- スピード ： ◯
Vue.jsには、applicationの開発者が開発中に使うバージョンと、本環境で使うバージョンのファイルが用意されています。
開発バージョンは、警告出力とデバッグモードがある代わりに、スピードは遅いです。
それに対して、本番バージョンは、
警告出力とデバッグモードがない代わりに、スピードは速いです。
用途によって使い分けます。
Vue.jsの読み込み方法
開発バージョンはこの記述で読み込むことができます。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
これを、本番バージョンに切り替えるには
vue.js となっているところを、 vue.min.js にします。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
とします。
minは、Minify(ファイル圧縮）の意味です。
vue.jsのファイルのファイルを確認
vue.jsのファイルは、javascriptのファイルなので、URLをブラウザ指定すれば、内容を確認することがきます。
これが、開発バージョンです。
https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
オープンソースなので、ソースコードを読むこともできます。
本番バージョンですが、.minを追加した、このURLで確認できます。
https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js
スピードを優先するために、minifyされた、つまりファイル圧縮をして、最適化された小さなファイルとなっています。
変数名が、短縮形になっているなど、人間がソースコードを読むのは、かなり困難です。
まとめ
開発中は開発バージョン、本番環境では本番バージョンを使うようにしてください。
このコースの学習では、基本的には、開発バージョンを利用します。
このレクチャーでは、Vue.jsの開発バージョンと本番バージョンついて学習しました。
オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」では、Vue.jsを動画を使って学習します。
Vue.jsを使ったWeb開発に興味はあるけれど、まだ触れていない方におすすめです。
動画教材を使うことで、独学するよりも効率的に学べます。
動画で学ぶプログラミング入門
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する