【使って覚えるVue.js入門】第1回:Vue.jsを使うメリットと基本的な環境構築

使って覚えるVue.js 第1回:Vue.jsを使うメリットと基本的な環境構築

更新日:

はじめに

こちらはVue.jsを使いながら覚えていく【使って覚えるVue.js入門】です。
第1回目となる今回は、Vue.jsを使うメリットや開発環境を整えるための手順を紹介していきます!

Vue.jsはこれから【確実に】流行っていくフレームワークなので、ぜひ今のうちにマスターしておきましょう!!

Vue.jsを扱うことが出来れば、プロジェクトによっては重宝されると思います。
また、未経験での転職でも圧倒的に有利になれると思います!

Vue.jsとは

Vue.jsとは、JavaScriptのフレームワークの1つです。
フレームワークは、JavaScriptをもっと効率的に開発しやすくするためのものになります。

有名どころで言うとjQueryやReact.jsがありますね!

今まではjQueryを使えば十分でした。
しかし、最近はSPA(Single Page Application)など、フロントエンド主体のウェブアプリが増えていきました
そうなると、jQueryの課題点が浮上してきます。(この辺は後ほど解説します!)

この課題点を解決するために生まれたのが「Vue.js」「Angular.js」「React.js」なのです!!

Vue.jsを使うメリット

Vue.jsのメリットを簡単にまとめました!

  • 初期導入が簡単:JSファイル1つを読み込ませるだけで導入可能!
  • DOM操作の自動化:HTML要素とJSの値を自動的に関連付けることが出来ます!
  • 学習コストが少ない:JavaScriptをある程度知っていれば、すぐに習得できます!

今回は初期導入について解説していきますね!!

2つ目の「DOM操作の自動化」は今のところ意味が分からないと思います。
学習を進めるごとに分かってくるはずなので、今は「へぇー、そうなんだー(棒)」で大丈夫です!!

Vue.jsの環境を構築しよう!

では実際に環境を構築していきましょう!
Vue.jsを使うためには大きく分けて3つの方法があります。

  • ライブラリをダウンロードして読み込ませる
  • CDNでライブラリを読み込ませる
  • NPMインストールで読み込ませる

初めのうちは2つ目の「CDNでライブラリを読み込ませる」で問題ないです!!

ライブラリをダウンロード

まずはライブラリをダウンロードして、ダウンロードしたVue.jsをhtmlで読み込ませる方法です。

<script src="”./js/lib/vue.js”"></script>

この方法を使うメリットはオフラインでも使うことが出来る点ですね!

もし、開発途中でオフラインになるタイミングがあるならダウンロードした方がいいですね!
出先でWiFiが無いとかかな?

CDNでライブラリを直接読み込む

次にCDNでライブラリを読み込む方法です。

CDNとはライブラリの提供元のURLから読み込む方法です。
そうすることで、自身のサービスのサーバー負荷を減らしたり、常に最新バージョンにアップデートすることが出来ます。
※バージョンを固定することも可能

学習用にVue.jsを使用する場合は、このCDNが簡単でオススメです!
「作って覚えるVue.js」ではこのCDNを使っていきます。

読み込み方は2種類あります。
※ES Modules用の読み込みを含めると3つですが、ここでは割愛します。

常に最新バージョンを使う読み込み

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

常に最新バージョンを使うことが出来る記述です。
学習用もしくは、ちょっとしたテストをする場合はこの方法を使いましょう!

バージョンを固定して使う読み込み

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

バージョンをこちら側が指定する方法です。
本格的にプロジェクトを開始する際は、これを使用します。

ライブラリがバージョンアップされたことによって不具合が起きることはよくあったりします。
古い記述が排除されたり、記述の意味が変わったりすることが原因ですね。

これを回避するためにバージョンを固定する必要があります。
特に理由がない場合は、プロジェクト開始時の最新バージョンで固定してあげればいいですね!!

ちなみに最新バージョンはVue.jsの公式サイトから確認することが出来ます。

NPMインストールで読み込む

最後にNPMインストールで読み込む方法です。
大規模のプロジェクトを立ち上げる予定の場合はNPMでのインストールを推奨しています。
NPMを使用していない方や分からない方はスルーしてOKです!

# オプションは必要に応じて付けてください。
$ npm install vue

NPMを使ってインストールすることも出来ます。
ここでインストールされるのは最新の安定版になります。

webpackなどと組み合わせる際にはNPMを使うと便利ですね!

今後使っていくindex.htmlを用意しよう!

さて、最後に今後使っていくHTMLファイルを用意しておきましょう!

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>はじめてのVue.js</title>

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

Copyright© カノトのアトリエ , 2019 All Rights Reserved Powered by STINGER.