【触れて覚えるVueJS超入門】Vue.JSをインストールして実際にテキストを出力してみる【第1回】

第1回目は、「VueJSのインストール」と「テキストの動的出力」をやっていきます。

前半では、VueJSのインストール方法を紹介します。
3つのインストール方法をザックリと紹介していきますね。
インストール方法は今は重要ではないので、なんとなく理解するくらいで大丈夫です!

後半では、実際にVueJSを導入して動かしてみます
プログラミングでは、基本中の基本。テキストの動的出力をやっていきます!

第1回の目標

  • VueJSのインストール方法の種類を把握する
  • CDNを使ってVueを書いてみる
  • ブラウザ上にテキストを表示させてみる

必要な知識

この記事を進めるために必要な知識です。

  • HTML/CSSの基礎知識
    ※ページを1ページ作れるくらいで大丈夫!
  • npm scriptの基礎知識(可能であれば!)

今回は必要ないですが、【触れて覚えるVueJS超入門】シリーズを進めるためには以下の知識も必要になります!

  • javascriptの基礎知識
    ※ES6の知識も必要になります(import, アロー関数など)
  • Linuxコマンドの基礎知識
    ※cdコマンドとか使えればOK
  • npm scriptの基礎知識
    ※npm run が使えればOK

どれも基礎知識レベルなので、別に身構えなくても大丈夫です!
分からない方は、なんとな~く勉強しておくといいですね!!

VueJSをインストールする様々な方法【前半戦】

まずは、VueJSをインストール方法を把握するところから始めましょう!

前半戦は、紹介なのでいきなり後半に飛んでもOKです!

VueJSをインストールする方法はいくつかあります。
下の3つは、頻出だったりするので知っておくといいですね!

  • CDNを使って script タグで VueJS をインストール(実務では使わない)
  • npm インストールを使って VueJS をインストール
  • vue cli を使って VueJS をインストール

触れて覚えるVueJS超入門では、とりあえず「CDNを使う方法」を使っていきます!
※触れて覚えるVueJS超入門シリーズの後半では「vue cli」も使いますね。

では、1つずつ解説していきます。

CDNを使って script タグで VueJS をインストール(実務では使わない)

まずは、CDN を使う方法。
CDN というのは、ザックリいうと、自分のサーバー以外からライブラリを読み込ませる方法です。

ページ読み込み時に起きるサーバーの負荷を軽くする特徴があったりします。
もっと詳しく知りたいなら、下のページがオススメです。
CDN の 仕組み (CDNはどんな技術で何が出来るのか)

さて、この CDN ですが VueJS でもキッチリと用意されています。
VueJS公式ドキュメント(CDN)

読み込む方法は、script タグを使えばOKです。

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

これをHTMLに記述すれば、最新のVueJSを使うことが出来ます。
もし、バージョンを指定したくなったら次のように記述してください。

<!-- バージョン&#91; 2.6.11 &#93; 使いたい場合 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

ちなみに、CDNを使ってインストールする方法は、実際のプロジェクトでは使わないです。

ちょっと、練習でVueJS使ってみようかな?
VueJSで汎用コンポーネント作ってみるか~

こんな感じで、VueJSの練習やサンプルを実装するときにCDNを使います。

VueJSを使ってプロジェクトを立ち上げたい場合は、以降の「npm インストールを使う方法」と「vue cli を使ってインストールする方法」を使うといいですよ!

npm インストールを使って VueJS をインストール

次は、npm を使って VueJS をインストールする方法を紹介します!
この方法は、既に実装されているプロジェクトに対してVueJSを実装する時に使うことが多いですね。

このサイトの、ここの部分をVueJSで実装したい!!

みたいな感じです。

この方法は、webpackなども自分で用意するので難易度は高めですね。

ちなみに、npm は Node.js に付属してくるパッケージ管理ツールになります。
もし、分からないよ!という場合は下のサイトで説明しているので参考にしてみてください!
※触れて覚えるVueJS超入門の序盤では npm は使わないので今はスルーでもOKです!

便利なパッケージ管理ツール!npmとは【初心者向け】

npm 使ってインストールする場合は、ターミナルで以下のコマンドを実行します。

$ npm install --save vue

インストールが完了するとJS側でimportを使ってVueJSを使うことが出来ます。

// JS側でVueJSをインポートする
import Vue from 'vue';

vue cli を使って VueJS をインストール

最後に、vue cli でインストールする方法を紹介します。
vue cli は初めからVueJSを使って実装する場合に使います。

こちらでも npm を使ってインストールします。
vue cli を使うときはvueではなく、@vue/cliをインストールします。

$ npm install -g @vue/cli

@vue/cliをインストールすることでnpx vueコマンドを使うことが出来るようになります。
このコマンドを使ってvueプロジェクトを立ち上げます。

npx vue create projectName

projectNameの部分は好きな名前でOKです。

コマンドを実行すると、質問形式で設定を聞かれます。
特にこだわりがなければ、Enter連打で大丈夫です。

こんな感じで聞かれるハズ!

質問に答えた後、インストールが実行されます。
しばらく待つと、無事にインストール完了です!

CDNを使ってVueJSを始めてみよう!【後半戦】

前半戦お疲れ様でした!!
ここらで、お茶休憩でもどうぞ (´ω`)

インストールの方法はなんとなく概要が掴めればOKです!

後半戦は、とりあえずVueJSでテキストを出力するところまでやっていきましょう。

まずはHTMLとVueを準備する

最初は演習をするためのファイルを作成していきます。
フォルダは好きなところに作ってOK!

前半でも言ったとおり、この演習では CDN を使って VueJS を読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>

  <div id="app">ここに好きな文字を入れてみよう!</div>

  <!-- Vue.jsの読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</body>
</html>

作成したHTMLファイルをブラウザで確認してみましょう!

こんな感じでテキストが表示されていれば問題ないですね!

VueJSで初めてのテキストを表示させる

それでは、お待ちかねのVueJSでテキストを動的に出力させてみましょう!

VueJSを記述するためのJSファイルを新しく作ります。
作ったら空のままで大丈夫なのでHTMLに読み込ませましょう!
※ここでは「index.js」とします。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>

  <div id="app">ここに好きな文字を入れてみよう!</div>

  <!-- Vue.jsの読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- Vueを記述したJSファイル -->
  <script src="./index.js"></script>

</body>
</html>

ここで注意したいのが、JSファイルをVueJSの読み込みよりも後にすることです。
VueJSを読み込む前にVueJSの記述をやっても「そのfunctionは定義されていません!!」とブラウザに怒られます^q^

今度はJSファイルに以下のコードを書いていきます。
これがVueJSの超最小限の記述になります。

new Vue({
  el: '#app',
  data() {
    return {
      message: 'ここに好きな文字を入れてみよう!(更新後)'
    }
  },
});

VueJSではこれに加えて、HTML側も修正する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>

  <!-- ここの部分を修正 -->
  <div id="app">{{ message }}</div>

  <!-- Vue.jsの読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- Vueを記述したJSファイル -->
  <script src="./index.js"></script>

</body>
</html>

HTMLのテキスト部分を{{ }}にします。
この波括弧 {} の中に先ほどJSファイルで定義したkey値messageを入れてあげます。
{{ message }}の部分に定義した文字列が出力されます。

コードの詳細については、【第2回】で解説していきますね!

さて、準備が出来ました!!
ブラウザをリロードしてみましょう!

こんな感じにテキストが更新されていれば完璧です!

もし、上手くいかない場合はデベロッパーツールのエラーコンソールを見てみましょう!
きっとエラーにヒントが隠されているはず!

例えば、読み込み順が違ったりスペルミスがあったりするとエラーが出るので再度、確認してみましょう!