前のパートに戻る 完了して次のパートへ  

  1-4 Vue.js コードの説明

本パートでは Vue CLI で作成されたコードの説明を簡単に行います。

事前準備


まずはターミナルで下記のコマンドを実行してください。

$ npm run serve

実行したら http://localhost:8080/ をブラウザで開いておいてください。

main.js


まずは PITMARK_HOME/app/pitmark/src/main.js を見てください。これは Vue.js の処理の基点、エントリポイントになる部分です。

ここでのポイントは App と #app です。App はレンダリングするコンポーネントのことです。#app はレンダリングをどの要素にマウントするかを表しています。それでは #app から見てみます。

#app について


#app の正体は PITMARK_HOME/app/pitmark/public/index.html にあります。

14 行目に id が app の div 要素があります。つまり #app とは id が app である要素 を意味します。これは JavaScript では定番の表現です。この要素が Vue.js が適用される要素となります。そのため、基本的には Vue.js は #app の外側には干渉しません(干渉するようなコードを書くこともできます)。ですので、このファイルに行った変更はアプリケーション全体に影響があります。

App について


App の正体は PITMARK_HOME/app/pitmark/src/App.vue にあります。

router-link は vue-router が提供しているコンポーネントで、SPA での画面遷移を行うための a タグ(つまりリンク)を出力します。vue-router を使用しているときはリンクには router-link を使うと覚えておいてください。

router-view は vue-router がコントロールするコンポーネント表示場所となります。vue-router は開発者が現在の URL から定義したルーティング定義に従って router-view の箇所に該当するコンポーネントを展開します。

vue-router のルーティング定義


vue-router のルーティングの定義は PITMARK_HOME/app/pitmark/src/router.js に定義されています。

トップページの URL は http://localhost:8080/ です。これはルートと呼ばれるパスで / で表現されます。ですので path が / になっているところを確認してください。component: Home と定義されています。

また Home はどこから来ているかというと 3 行目に定義されており ./views/Home.vue に定義されています。

Home コンポーネント


次は PITMARK_HOME/app/pitmark/src/views/Home.vue を見てみましょう。

ここでのポイントは HelloWorld です。10 行目で PITMARK_HOME/app/pitmark/src/components/HelloWorld.vue から HelloWorld コンポーネントをインポートします。15 行目でコンポーネントとして HelloWorld を使用する設定を行い、4 行目で実際に HelloWorld を使用しています。その際にパラメータとして Welcome to Your Vue.js App という文字列を渡しています。

さて次は PITMARK_HOME/app/pitmark/src/components/HelloWorld.vue を見てみましょう。

HelloWorld コンポーネント


このコンポーネントは少し長いのでここに記載しませんが、ポイントは 100-102 行目の props で msg: String を定義しているところです。これはこのコンポーネントのパラメータとして文字列を受け取るということを定義しており、実際に受け取った文字列を 3 行目で使用しています。

ここでここまでみてきたコンポーネントの関係性を図に表しています。

About コンポーネント


トップページの上部の About というリンクをクリックしてください。

すると下図のような画面になります。


この状態のコンポーネントの関係性は下図のようになっています。

vue-router は http://localhost:8080/about という URL からパスが /about と判断します。router.js に定義されているルーティングから該当する物を探します。今回は外とする About コンポーネントが router-view に展開されたのです。

このことから下記のルールでコンポーネントを配置しましょう。

  • PITMARK_HOME/app/pitmark/src/views には vue-router が扱う一番外側のページ全体のコンポーネントを配置する。
  • PITMARK_HOME/app/pitmark/src/components にはページの内部で使用する部品となるコンポーネントを配置する。

規模が大きいシステムではもっと詳細なルールが必要になったりしますが、現時点ではこの認識で OK です。

本パートで学んだこと


本パートでは以下のことを新たに学習しました。最後の確認にお使いください。

  • 初期作成されたファイルと Vue.js の関係

以上で今回のパートは終了です。

お疲れ様でした。

議論

0 質問

このコースの評価は?