SPAの構築にも最適なVue.jsとは?

SPAの構築にも最適なVue.jsとは?

ヘッダー部分・フッター部分・検索部分など「テンプレート(HTML)・スタイル(CSS)・ロジック(JS)」をコンポーネントとしてそれぞれひとまとめにし、ひとつの「.vue」ファイルとして管理し、構築できるVue.js。

Vue.jsは「ディレクティブ」と呼ばれる記述をテンプレート側に行い、そこからjs内に書かれたロジックを実行していく流れで構成されています。

最近主流になりつつある、必要なファイルを予め読み込み、URLが変わってもページ遷移を発生させず、必要な部分だけを書き換えていくSPAにも、適したフレームワークになっていることが、描かれています。

ありがとうございました!

目次

本のまとめ

▼読んだ本は?

■速習Vue.js 速習シリーズ

▼Angular・React・Vue.jsのちがいは?

■Angular
└Googleを中心に開発された、フレームワーク
└中規模以上の、本格的なフロントエンド開発にぴったり
└導入のハードルや学習コストは高い

■React
└Facebookにより開発された、フレームワーク
└ライブラリの組み合わせによって、規模に応じた柔軟な構成にできる

■Vue.js
└ビュー(見た目)に特化した、シンプルなフレームワーク
└小規模な開発にぴったり

▼Vue.jsの利用方法は?

■CDNからライブラリを読み込む

▼Vue.jsでの「Hello World」の表示方法は?

■HTML側

■JS側

▼ディレクティブとは?

■ディレクティブ(指令)を意味する
■Vue.jsに対して、何らかの指示を渡すための仕組み
■「v-○○○=””」の形で記述
・HTML側

・JS側

▼データ内のHTMLをそのまま読み込むには?

■「v-html」ディレクティブを利用する
・HTML側

・JS側

▼属性値の操作には?

■「v-bind」ディレクティブを利用する
・HTML側

・JS側

▼算出プロパティとは?

■演算やメソッドの呼び出しを行うプロパティ
■「computed」を利用
・HTML側

・JS側

▼「computed」「methods」の使いわけは?

■computed
└初回のみ算出結果を返す
■methods
└特定のイベントをトリガーにして、繰り返し処理が行われる

・HTML側

・JS側

▼イベントハンドラーの使い方は?

■「v-on」ディレクティブを利用する

・HTML側

・JS側

▼ボタンクリック時に、イベントオブジェクトを出力するには?

■「v-on」ディレクティブを利用する

・HTML側

・JS側

▼双方向データバインドとは?

■「dataオブジェクト⇔テンプレート間」の双方向でデータバインドを行うこと
■「v-model」ディレクティブを利用する
■フォーム等の入力があるときに、使われる

▼テキストボックスの入力値を反映するには?

■フォーム内の「テキストボックス」に入力した情報が、リアルタイムでそのまま反映される
・HTML側

・JS側

▼ラジオボタンの入力値を反映するには?

■フォーム内の「ラジオボタン」で選択した内容が、リアルタイムでそのまま反映される

・HTML側

・JS側

▼チェックボックスの入力値を反映するには?

■フォーム内の「チェックボックス」で選択した内容が、リアルタイムでそのまま反映される
■「v-model」ディレクティブを利用する

・HTML側

・JS側

▼条件分岐を行うには?

■「v-if」「v-else」「v-else-if」ディレクティブを利用する

・HTML側

・JS側

▼表示・非表示だけを切り替えるには?

■「v-show」ディレクティブを利用する

・HTML側

・JS側

▼繰り返しで配列から値を取得して、表示するには?

■「v-for」ディレクティブを利用する

・HTML側

・JS側

▼繰り返しで数値を表示するには?

■「v-for」ディレクティブを利用する

・HTML側

・JS側

▼{{}}による画面のちらつきを防ぐには?

■「v-cloak」ディレクティブを利用する

・HTML側

・JS側

・CSS側

▼コンポーネントとは?

■「ヘッダー」「フッター」「検索部分」などの形で、1つのページをパーツごとに分解すること
■「Vue.component」メソッドにより定義する
■HTMLタグとバッティングしないよう、複数の単語の組み合わせで命名する

・HTML側

・JS側

▼コンポーネントのローカル登録とは?

■特定の「Vueインスタンス」内部でしか、コンポーネントを利用できない形とすること
■「components」パラメータを利用する

・HTML側

・JS側

▼コンポーネントへのパラメーターの引き渡しは?

■「props」を利用する

・HTML側

・JS側

▼クリックすると値が増加するコンポーネントは?

■「props」を利用する

・HTML側

・JS側

▼パラメーターがなかった場合の要素を指定するには?

■「slot」を利用する

・HTML側

・JS側

▼プラグインを利用するには?

■プラグインは、Vue.jsに対して、ディレクティブやメソッドを追加できる仕組み
■CDN経由で読み込み、「Vue.use」で登録して利用する

・HTML側

・JS側

▼単一ファイルコンポーネントとは?

■コンポーネントを構成する「テンプレート(HTML)・スタイル(CSS)・ロジック(JS)」をひとつの「.vue」ファイルにまとめたもの
■コンポーネントの見通しがよくなるため、中規模以上のアプリ制作ではよく見かける形に

▼ルーティングとは?

■リクエストURLに応じて、処理の受け渡し先となるコンポーネントを決定すること
■SPAを作成するときに、必須の仕組み
■ルーティングにより、URLの結果をページの決められた領域に反映する

▼SPA(Single Page Application)とは?

■単一のページで構成されるアプリ
■初回アクセスでページ全体を取得
■その後のページ切り替えはブラウザではなく、基本的にJavaScriptで行う

▼ルーティングを定義するには?

■templateに「
」を定義する
■jsに「path・name・component」の振り分けをそれぞれ定義する

・vue側

・JS側

関連する記事