Vue.jsの導入方法【インストール不要 コピペだけでOK】

Vue.jsプログラミング備忘録
https://jp.vuejs.org/からの画像
スポンサーリンク

どうも、ちゃんカマでございます。

もしかしてVue.jsの導入方法についてお調べですか?
Vue.jsの導入に、面倒なインストールは不要ですよ。

私は点数計算を行うWebアプリを制作する過程で、Vue.jsを導入して使用しました。
Vue.jsは面倒なインストール作業は不要で、コードのコピペだけで導入することが出来ました。

そこで今回はVue.jsの導入方法について解説します。

ちなみに私が作ったアプリはこんな感じです。(↓GIF動画参照)

点数計算アプリの動作の様子
点数計算アプリの動作の様子

「+」や「ー」のボタンを押すと数字がカウントされて、その合計や条件に応じた加算点を自動で計算する、というアプリです。
Vue.jsを使用して制作しています。

この記事ではこんな疑問や悩みにお答えします
  • Vue.jsの導入方法を知りたい
  • 時間無いから、コピペするだけで直ぐにVue.jsが使えるようになるコードが欲しい
この記事の内容
  • Vue.jsの導入方法
  • 実際にそのままコピペ出来るコードも記載してます

Vue.jsの導入方法【そのままコピペで使えるコードを記載】

まずは、HTMLファイルの「index.html」とJavaScriptファイルの「main.js」を作成します。

後は、下記のコードをindex.htmlにコピペすれば、Vue.jsを使ってプログラミングが出来るようになります。

そのままコピペで使えるコードを以下に記載します。
「解説とか不要」、「とりあえずコードが欲しい」という方はどうぞ使ってください。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>

	<!-- Vue.js(本番用) -->
	<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> -->

	<!-- Vue.js(開発用) -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

	<!-- Main.js -->
	<script src="main.js"></script>

</body>
</html>

これだけで、Vue.jsの導入は完了です。
では、上記のコードの内容について解説してみます。

Vue.jsとは?

Vue.jsとは、プログラミング言語のJavaScriptのフレームワークの1つです。
JavaScript本体ではコードが長くなってしまうような場合でも、フレームワークを使って書くと短くシンプルに書けたりするんですね。

Vue.js
Vue.js - The Progressive JavaScript Framework

Vue.jsは面倒なインストールは不要、コピペするだけ

導入・・・と聞くと、面倒なインストール作業を想像される方もおられるかもしれませんが、ご心配なく。
Vue.jsのファイルをダウンロードする方法もあるようですが、CDNから読み込んで使う方法がカンタンです。

「CDNって何?」と思った方もいるかもしれませんが、要するにコードをコピペするだけでVue.jsを導入出来るということですね。
もう少し詳しく解説すると、ダウンロードは自分自身のパソコンにVue.jsのファイルを保存して使うのに対して、CDNではCDNというWebサイトからファイルを都度読み込んで使う方法になります。

そのCDNからVue.jsを読み込んでいるのが、以下のコードになります。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue.jsは<head></head>タグ内で読み込む

Vue.jsの読み込みは、index.htmlの<head></head>タグ内で行います。
要するに、Vue.jsをCDNから読み込むコードを<head></head>タグ内に書きます。

これは、画面のちらつきを抑えるための処置です。
Vue.jsを使ったWebサイトでは、計算などの処理が行われてから、その後に画面に処理内容が表示されるまでにタイムラグがあります。
そのタイムラグの影響で、たまに画面がちらつくことがあるんですね。

Vue.jsを<head></head>タグ内で読み込むことで、このちらつきを多少抑えることが出来ます。

Vue.jsには開発用と本番用の2つがある

<!-- Vue.js(開発用) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- Vue.js(本番用) -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> -->

上記のように、Vue.jsは開発用(開発バージョン)と本番用(本番バージョン)の2つがあります。
どうして開発用と本番用の2つが存在するのかについては、Vue.jsの公式リファレンスに下記のように記載がありました。

・開発バージョン、便利なコンソールの警告が含まれています
・本番バージョン、サイズと速度のために最適化されています
・本番環境では、新しいバージョンによる意図しない不具合を避けるため、特定のバージョン番号とビルド番号にリンクすることをお勧めします

Vue.js公式リファレンスより抜粋

要するに、開発用では間違ったコーディングを教えてくれるけど、本番用は教えてくれないということみたいです。
また、Vue.jsが更新された時に不具合が起きないように、本番用はきちんとバージョンを指定してください、ということみたいですね。

とりあえず制作中は開発用のコードで、実際にWebに公開する時は本番用のコードに書き換えればOK、という理解で問題無いかと。

上記のコードのように、あらかじめ本番用のコードを入れておいてコメントアウトしておくと、後で便利かと思います。

おわりに

Vue.jsの導入方法について解説してみました。
Vue.jsはJavaScriptのコードをスッキリと書けたり、いろいろと便利な機能が備わっています。
それをコードのコピペだけで、導入して使えるようになるなんて感動モノですね。

今回の記事が皆さんの参考になれば幸いです。
以上、ちゃんカマでした。

コメント

タイトルとURLをコピーしました