Lesson 2

Vue を動かしてみよう

Lesson 2 Chapter 1
Vue のインストール（CDN）

このレッスンでは、実際に Vue を使用して基本的な動きを確認していきます。

ソースコードエディタ（VSCode）について

このレッスンでは「Visual Studio Code」という Microsoft 社が開発しているテキストエディタを使用します。
既にインストールしている場合は、「作業フォルダと HTML ファイルを準備する」へ進んでください。

VSCode のインストール

まだ、インストールしていない場合は、次のリンクをクリックしてインストールを開始しましょう。

https://code.visualstudio.com/

① インストーラーのダウンロード

リンクをクリックすると、次のような画面が表示されると思います。
画面の左側にダウンロードボタン（赤枠の Download for Windows ボタン）があります。
これは、現在使用している PC 環境に合わせたインストーラーとなりますので、ここをクリックしてダウンロードを開始します。

vue_2-1.png

「VSCodeUserSetup-x64-1.74.0.exe」というようなファイルがダウンロードされたかと思います（x64-1.74.0 の部分は環境や時期によって異なります）。
ファイルをダブルクリックしてインストールを開始します。

② インストール

インストーラーが起動すると「使用許諾契約書の同意」画面が表示されます。
問題なければ「同意する」を選択して「次へ」ボタンを押してください。

vue_2-4.png

次に「インストール先の指定」画面が表示されます。
基本はデフォルトのままで問題ないと思います。そのまま「次へ」をクリックします。

vue_2-5.png

次の「スタートメニューフォルダーの指定」についても、デフォルトで問題ないと思いますので、そのまま「次へ」をクリックします。

vue_2-6.png

ここで「追加タスクの選択」画面となります。
基本はデフォルトのままで構いません。必要あれば「デスクトップ上にアイコンを作成する」も選択しても良いでしょう。

vue_2-7.png

以下の画面が表示されたら「インストール」をクリックします。

vue_2-8.png

次の画面が表示されたらインストール完了です。
「Visual Studio Code を実行する」にチェックを入れたまま「完了」ボタンをクリックします。

vue_2-9.png

③ VSCode の起動

VSCode を起動して、次のように表示されれば OK です。

vue_2-10.png

作業フォルダと HTML ファイルを準備する

VSCode が起動できたら「作業フォルダ」を作成します。
作業フォルダはどこに作成しても構いません。

① 作業フォルダの作成

1 例として C ドライブ直下に「vue_lesson」という名前のフォルダを作成します。
ディレクトリは「C:\vue_lesson」となります。

vue_2-11.png

② VSCode で作業フォルダを開く

VSCode の「File」タブから「Open Folder」を選択して、先ほど作成した「vue_lesson」フォルダを選択します。

vue_2-12.png

フォルダの選択後に、次のように「フォルダ内のファイルの作成者を信頼して良いか？」との確認画面が出てきましたら、青いボタンを押して承認します。

vue_2-13.png

③ サブフォルダと HTML ファイルを作成する

vue_lesson フォルダを開いたら、画面左側の「VUE_LESSON」の部分（赤枠部分）にマウスを合わせます。
すると、その右側に 4 つのアイコンが出てきますので、左から 2 つ目のアイコン（青枠部分）をクリックしてください。

vue_2-14.png

フォルダ名が入力できるようになりますので「Lesson2」と入力します。

vue_2-15.png

フォルダが作成されたら、① フォルダ名「Lesson2」を選択した状態のまま、② 4 つのアイコンのうち一番左のアイコンをクリックします。
すると、ファイル名が入力できるようになりますので、③「index.html」と入力します。

vue_2-16.png

以上で、HTML ファイルの作成が完了しました。

④ HTML のデフォルトテンプレートを呼び出す

index.html ファイルを選択すると、コードを入力できるようになります。
ここで「!」を入力して、そのまま「tab キー」を押してください。

vue_2-17.png

次のように、HTML の基本のテンプレートが表示されれば成功です。

vue_2-18.png

HTML の基本のテンプレートは次のようになりますので、うまく自動作成できなければこれをコピペしても OK です。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Vue のインストール方法

Vue をインストールする 4 つの方法

Vue をインストールする方法は、4 つあります（公式 - インストール）。
このレッスンでは「CDN を使用」で Vue を起動します。
なお、カリキュラムの中盤以降は「ビルドツール を使用」で Vue を扱うことになります。

No 方法 説明
1 CDN を使用 Web 経由で Vue の定義ファイル（JavaScript）を読み込む
2 直接組み込み 上記 CDN で使用する Vue の定義ファイルをローカルにダウンロードする
3 num を使用 npm で Vue のみダウンロードする（大規模開発用）
4 ビルドツール を使用 Vite または Vue CLI で Vue プロジェクトを作成する

CDN とは

CDN とは「Content Delivery Network」のことで、簡単に言うとネットワーク上に用意されたファイルを参照する方法です。
インターネットに接続されていれば、HTML内に指定の記述をするだけで簡単に使用を開始することができます。

CDN で Vue をインストールする

次のリンク先に、CDN で Vue を使用する方法が示されています。 https://v3.ja.vuejs.org/guide/installation.html#cdn

vue_2-21.png

説明では、以下のコードを HTML に記載するだけで、Vue が使用できるとされています。 

<script src="https://unpkg.com/vue@next"></script>

なお、vue@next の部分は、常に最新版の Vue を使用することを意味します。
ここでは、次のように特定のバージョン（vue@3.2.36）を指定するようにします（実際に記述するのは次のチャプターで行います）。 

<script src="https://unpkg.com/vue@3.2.36"></script>

これで、Vue を扱う準備が整いました。
次のチャプターでは、実際にコードを記載していきます。

Lesson 2 Chapter 2
Vue で Hello world を表示する

Vue の公式コードを動かしてみる

まず、お試しとして、Vue 公式にあるコードをそのまま記載して動作確認をしてみましょう。

Vue 公式の基本コードを確認する

次の URL を開いてみましょう。
https://v3.ja.vuejs.org/guide/introduction.html#宣言的レンダリング
開くと、以下の画面が表示されます。これは、ごく基本的な Vue の形式となります。

vue_2-22.png

Lesson 1 で学んだ「MVVM」パターンに当てはめつつ、コードの意味を簡単に説明します。 なお、ここには Model に該当する部分はなく、View と ViewModel のみが存在しています。

① View（上側 3 行分のコード）

<div id="counter">
  Counter: {{ counter }}
</div>

上側 3 行分のコードが View に該当し、画面表示の HTML を記述する部分となります。
1 行目の div タグで id="counter" と指定しています。これを目印として、② の ViewModel と紐づけを行うことになります。
2 行目の {{ counter }} の部分は、② の ViewModel から値を受け取る部分となります。 counter という変数を {{}} で囲むことで、値として認識されます。

② ViewModel（下側 9 行分のコード）

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')

下側 9 行分のコードは ViewModel に該当し、画面表示のロジック部分が JavaScript で記載されています。
2 行目の data() の return 内で定義したプロパティ（変数）は、① の View 側で使用することが可能となります。 つまり、ここで定義している counter が、① の {{ counter }} に表示されることになります。
末尾の Vue.createApp(Counter) は、const Counter = { 省略 } で定義した内容を、Vue で使用できる形式に変換しています。この createApp 関数で生成されるものを「アプリケーションインスタンス」と呼んでいます（詳細は改めて解説します）。
最後の mount('#counter') で、生成したアプリケーションインスタンスを、① の DOM 要素である id="counter" に紐づけています。 この紐づけを「マウント」と呼んでいます。

DOM とは

DOM（Document Object Model）とは HTML などで記述されたものを、JavaScript などから取り扱えるようにした仕組み（取決め）のことを言います。

Vue 公式の基本コードを記述（移植）する

それでは、先に VSCode で作成した HTML のテンプレートに、上記のコードをそのまま、移植していきましょう。 記述する箇所は、<body></body> タグの中となります。
Vue の CDN <script src="https://unpkg.com/vue@3.2.36"></script> を <body> タグの最初に記載して、続いて HTML と JavaScript を記載します。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://unpkg.com/vue@3.2.36"></script>

  <div id="counter">
    Counter: {{ counter }}
  </div>

  <script>
    const Counter = {
      data() {
        return {
          counter: 0
        }
      }
    }

    Vue.createApp(Counter).mount('#counter')
  </script>
</body>
</html>

ViewModel（アプリケーションインスタンス）は JavaScript で書かれているため <script> タグで囲んで記載する必要があります。

実際の画面では、次の赤枠部分がコードを追加した部分になります。

vue_2-23.png

コードを記載したら、保存をしましょう。
次のように「File」タブから「Save」を選択すれば保存できます。なお、「ctrl + s」でもセーブできます。

vue_2-24.png

記述したコードの動作確認をする

それでは、ブラウザで確認してみましょう。
「index.html」ファイルを右クリックして「Copy Path」を選択します。すると、ファイルのパスがコピーされます。

vue_2-25.png

これをそのまま、ブラウザの URL 欄に貼り付けて表示します。
次のような画面が表示されれば OK です。

vue_2-26.png

アプリケーションインスタンスの data() 内で定義したプロパティ（変数） counter の値 0 が、画面上に表示されたことが確認できました。

文字列 Hello World を表示する

先ほどは、counter というプロパティを使用して、数値 0 を画面上に表示しました。
ここでは、message というプロパティを作成して、文字列 Hello World! を表示するようにコードを書いていきます。

VSCode のフォルダ lesson2 の中に、新しく hello-world.html というファイルを作成してください。
併せて、HTML の基本のテンプレートも用意します（「!」を入力して「tab キー」）。

vue_2-27.png

そして、<body> タグの中に次のように記載します。

hello-world.html
<body>
  <script src="https://unpkg.com/vue@3.2.36"></script>

  <div id="app">{{ message }}</div>

  <script>
    Vue.createApp({
      data() {
        return {
          message: 'Hello World!'
        }
      }
    }).mount('#app')
  </script>
</body>
全てのコードを表示

hello-world.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://unpkg.com/vue@3.2.36"></script>

  <div id="app">{{ message }}</div>

  <script>
    Vue.createApp({
      data() {
        return {
          message: 'Hello World!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

書き換えるのは <body> タグの中のみです。
全体のコードを確認されたい方は、上記青字の「全てのコードを表示」をクリックしてください。

① message プロパティ

data() 内に message というプロパティを作成して、HTML 側で {{ message }} という形で表示するようにしています。 counter の時と同じ構造ですね。

② createApp 関数の記載

先に試した例では、Vue.createApp 関数には、Counter というオブジェクトを代入していましたが、ここでは、指定する内容すべてを createApp 関数内に記述しています。
どちらの書き方でも実行内容に変わりはありませんが、このように関数内に全ての指定を書く場合も多いため、慣れておいてください。

③ マウントする DOM 要素の指定

ここでは、id="app" というように app という名前で id 名を指定しています。
アプリケーションインスタンスをマウントする部分は .mount('#app') というように、id が app の要素をターゲットとするようにしています。

コードが書けたら、実行して確認してみましょう。
先ほどと同じように、hello-world.html ファイルを右クリックし、「Copy Path」を選択してパスをコピーします（ブラウザの「新しいタブ」などにドラッグアンドドロップでも表示できます）。
ブラウザの URL 欄に貼り付けて、以下のように表示されれば OK です。

vue_2-28.png

本レッスンは以上です。
ここでは、「JavaScript 側で表示したい値を指定して、HTML 側でその値を受け取り表示する」という Vue の基本的な構造を学びました。
次のレッスンからは、もう少し内容を掘り下げて学習していきます。