【輪読会資料】基礎から学ぶVue.js CHAPTER1 Vue.jsとフレームワークの基礎知識 読書メモ
以下の記事は2019/1/31 コワーキングスペース秋葉原Weeybleで行われる輪読会
[秋葉原] 基礎から学ぶVue.js輪読会 #初回 ch1 フレームワークの基礎知識(初心者歓迎！) のための読書メモとなります。
以下の書籍の CHAPTER1 Vue.jsとフレームワークの基礎知識 のメモです。
- 作者: mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
目次
- CHAPTER 1 Vue.jsとフレームワークの基礎知識
- 01 Vue.jsについて
- 02 Vue.jsのキーコンセプト
- 03 豊富なリソースを活用しよう
- 04 Vue.jsのインストール
- 05 Vue.jsの基本機能
- 06 オプションの構成を見てみよう
- まとめ
はじめに
書籍の為のがっつりしたサイトがあります！必見！！なんて手厚いサポート体制なんでしょう！
基礎から学ぶ Vue.js
書籍内のコードはまずここを参考にすると良いでしょう
基礎から学ぶ Vue.js コード&動作メモ
CHAPTER 1 Vue.jsとフレームワークの基礎知識
01 Vue.jsについて
Laravelのフロントエンドで採用されて今人気！色々アツい！
jQuery的な手軽さがあり、学習コストが低い
日本語ドキュメントが充実
フレームワークとの相性が良い
02 Vue.jsのキーコンセプト
データ駆動のしくみ
× DOMが存在してそれを読み込んで操作
○ 最初にデータが存在、そのデータに適したDOMを構築する
テンプレートを使う
<div v-if="show">Hello Vue.js</div>
v-ifは仮想DOMをつくるテンプレートの記法
<body> <div id="app"></div><!-- ここに配置できる --> </body>
#app配置する要素とアプリケーションを紐づけることをmountと呼ぶ
データバインディング
データと描画を同期させる仕組み
生JSだと色々面倒だし管理も大変だけどVue.jsなら簡単
DOMの更新はフレームワークに任せよう
それを解決するのがデータでバインディング型のライブライリ、やフレームワーク
Vue.jsもデータでバインディングの多くの機能を持つHTMLを扱う感覚で機能を使用できる
v- からはじまるディレクティブ
htmlの属性にv-if,v-bind,key,等で始まるやつをディレクティブといい、データディバイングを行うために使われる。
<div key="id"></div><!-- 1 --> <div v-bind:key="id"></div><!-- 2 -->
1,は単純に[id]という文字列を表す
2,はv-で始まるディレクティブJSの変数idで、正確にはアプリに登録されたidというプロパティになる
例外はあるがひとまず、v-で始まってなければ単なる文字列と考えて良い
コンポーネント指向の画面構成
1ファイルの中に例えば部品であるheader,main,footer毎のファイルを作る。その個別のファイル毎にHTML,CSS,JS を書いて管理する。
1ファイルの中にHTML,CSS,JS を書いて管理することもある。
さらに従来のcssの使い方としてポピュラーな方法である、共有コードを別ファイルまとめて書くこともできる。
コンポーネントが増えても大丈夫
コンポーネントはVue.jsのもっとも強力な機能
コンポーネントのネスト化、構造化が容易
複雑な構造化が必要な場合は以下の拡張機能等を導入するとよい
静的サイトジェネレート機能のあるVue.jsの拡張フレームワーク
- Nuxt.js (Weeybleさんで輪読会やるらしいです)
- VuePress
03 豊富なリソースを活用しよう
jQueryやBootstlapを使わずとも、Vue.jsに最適化されたコンポ―ネントUIがWebにたくさんあるらしい
Vue.jsと相性のいいライブラリ
代表的なコンポーネント
04 Vue.jsのインストール
- この本の6章まではスタンドアローン版の「Vue.js」ファイルを使う
- 開発モードで使う(非minファイルという)
- 本番環境では「vue.min.js」に置き換えた最適化ファイルを使う
ダウンロード版もありますが、手っ取り早くCDN(コンテンツデリバリーネットワーク htmlのheadタグ内にscriptとして読み込む1行を書く）の方が良いと思います。
ダウンロードの場合
Vue.js
GET STANDARD > インストール（左メニュー） > 開発バージョン（ボタン）
CDNの場合 下記いずれかを使用htmlのheadに記述する。
学習では当然開発バージョン
<!-- 開発バージョン、便利なコンソールの警告が含まれています --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 本番バージョン、サイズと速度のために最適化されています --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
学習用のひな形ファイルを作る index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <!-- この#appの内側に色々なサンプルを書き込んでいく --> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="main.js"></script> </body> </html>
main.js
var app = new Vue({ el: '#app' })
これで適当なフォルダに保存したhtmlファイルをブラウザで開き、開発用コンソールを立ち上げる
chromeなら ctrl + shift + I
body { /* ひとまず適当に書いて反映を確認してみる */ color: blue; }
さらにブラウザがchromeならこのような開発用の拡張機能をインストールすると便利そう
（但しlocalサーバー環境で無いと起動しない様です）
Vue.js devtools
05 Vue.jsの基本機能
htmlがわかる人なら簡単に扱えるそうです。
index.html 抜粋
<div id="app"> <p>{{ message }}</p><!-- ここに一行追加 --> </div>
main.js
var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
これでブラウザの画面にはHello Vue.js!が出力される
開発タブの Consoleに以下を入力すると…
console.log(app.message);
Hello Vue.js!と出力される
繰り返しの描画
一覧要素はdataオプションに登録され、そこに入れる配列やオブジェクトからv-forディレクティブで描画できる。
index.html
<ol> <li v-for="item in list">{{ item }}</li> </ol>
main.js
var app = new Vue({ el: '#app', data: { list: ['りんご', 'ばなな', 'いちご'] } })
開発用コンソールにapp.list.push('おれんじ')と入力すると、要素が追加できる。
1.りんご 2.ばなな 3.いちご 4.おれんじ
イベントの利用
クリックや選択要素が変わった際などのDOMイベントはv-onディレクティブを使う。
詳細はCHAPTER3
クリックするとhandleClickメソッドが呼ばれる例
index.html
<button v-on:click="handleClick">Click</button>
main.js
var app = new Vue({ el: '#app', methods: { handleClick: function (event) { alert(event.target) // [object HTMLButtonElement] } } })
ボタンが表示されクリックでalertがポップアップされるようになる
フォーム入力との同期
v-modelディレクティブを使用する
入力や選択で即時DOMに変更が反映される
詳細はCHAPTER3
index.html
<p>{{ message }}</p> <input v-model="message">
main.js
var app = new Vue({ el: '#app', data: { message: '初期メッセージ' } })
フォームに入力した内容を編集するとmessage 部分に即反映されるのが確認できる
条件分岐
v-ifディレクティブを使用
詳細はCHAPTER2
index.html
<button v-on:click="show=!show">切り替え</button> <p v-if="show">Hello Vue.js!</p>
main.js
var app = new Vue({ el: '#app', data: { show: true } })
showプロパティがtrueの際だけ<p>要素を出力する
コンソールにapp.show=false,app.show=trueと入力することでも表示の切り替えが出来る
トランジション&アニメーション
組み込みコンポーネントの<transition>タグを使うと、CSSトランジションやアニメーションが使える
詳細はCHAPTER6
index.html
<button v-on:click="show=!show">切り替え</button> <transition> <p v-if="show">Hello Vue.js!</p> </transition>
main.js
var app = new Vue({ el: '#app', data: { show: true } })
main.css
.v-enter-active, .v-leave-active { transition: opacity 1s; } /* opacity:0から1へのフェードイン＆フェードアウト */ .v-enter, .v-leave-to { opacity: 0; }
ボタンを押す際にフェードアウト、フェードインでの表示切替アニメーション効果が適用される。
06 オプションの構成を見てみよう
基本的なオプションの構成
だいたいこんな感じらしいです。
var app = new Vue({ // mountする要素 el: '#app', // アプリケーションを紐づける要素のセレクタ // アプリケーションで使用するデータ data: { show: true } // `data`はアプリで使用するデータ、配列、オブジェクトが登録可能 // 算出プロパティ computed: { computedMessage: function () { return this.message + '!' } } // `computed`関数によって算出されたデータ ここで処理した結果を返せる // ライフサイクルフック created: function () { // created はすぐ実施される処理、他にも予約語がある。 // 行いたい処理 }, // あらかじめ登録した処理を自動呼出しする`フック`と呼ばれる割り込み処理 // アプリケーションで使用するメソッド methods: { myMethod: function () { // 行いたい処理 } } // 処理の分割、細かな実装等で使う })
created - ライフサイクルフック
あらかじめ登録した処理を自動呼出しするフックと呼ばれる割り込み処理が予約語でいくつかある。
ライフサイクルフック各種
| メソッド | タイミング |
|---|---|
| beforeCreate | インスタンスが初期化されリアクティブの初期化がされる前 |
| created | インスタンスが初期化されリアクティブの初期化がされる後 |
| beforeMount | インスタンスがマウントされる前 |
| mounted | インスタンスがマウントされる後 |
| beforeUpdate | データが更新され、DOMに適用される前 |
| updated | データが更新され、DOMに適用される後 |
| beforeDestroy | Vueインスタンスが吐きされる前 |
| destroyed | Vueインスタンスが吐きされる後 |
| errorCaptured | 任意の子孫コンポーネントからエラーが補足されたとき |
実施されるタイミングのダイアグラムは以下のリンク先を参照すると良いでしょう。
（書籍P48には日本語での同様の図がある）
Vue.jsのライフサイクルダイアグラム図
コラム要約
ちなみに、1行目にある new Vue() を実行するのは基本的に、操作したい全ての部品を包含している要素に対して１つだけ new Vue() を行う。
そこにコンポ―ネントとしてのUI部品を追加してゆくらしい
まとめ
- Vue.jsではDOM構造の本体はJavaScriptのデータ
- ディレクティブの値はJavaScriptの式になっている
- HTMLコーディングの為にコンポーネントを使っても良い
- 必要なデータやメソッドはオプションに定義してゆく
- new Vue()は１つ作りコンポーネントでUIを構築する
