【はじめに】
フレームワークとは
-
よくある問題に対するイディオム、方法をまとめたもの。
本格的なアプリを開発していると、似た問題によく遭遇する。
それを毎回解決していくのは大変&面倒！（前もやったのに、、！）
→よくある問題解決をあらかじめ用意しておいてくれる「フレームワーク」！ -
ただし、フレームワークの導入がいつでも正なわけではない。小さいアプリならわざわざフレームワークを学ぶ方が悪
-
主なJSのフレームワークは３つ
| Name | about | description |
|---|---|---|
| Angular | Googleを中心に開発されてるフルスタックフレームワーク | 学習コスト高め・比較的難しい・途中からの導入は厄介。最初からちゃんと設計されてこそ力を発揮する |
| React | Facebookが開発したフレームワークで、ビュー（見た目）相当の機能を提供 | 比較的気軽に導入できる・後からの導入もしやすい |
| Vue.js | ビューに特化したシンプルなフレームワーク | 比較的気軽に導入できる・後からの導入もしやすい。 |
Vueの特徴
-
React と比べても特に学習コストが低い
-
アプリの成長に合わせての機能追加がしやすい（コンポーネント 作成・ルーティング機能..)
-
コンポーネント指向
....コンポーネントとは、ビュー（見た目）、ロジック、スタイルなどから成るUI部品のこと。Vueでは、部品化されたコンポーネントを組み合わせることで１つのページを構成していく。＝コンポーネント思考。組み合わせてり、入れ子にしたり。。。
-
ライブラリが豊富
-
簡単に言うなら「UIを宣言的に記述するためのライブラリ」
-
あるデータをもとにページを作成。そのデータが変化した際に、UIを再構築して画面に反映させる。これがVueの基本機能。
Vueが支持されるわけ
- 様々な言語に対応したドキュメント
- より良い機能の提供、メンテナンスがされ続ける
昔は小ー中規模向きとされ、問題がいくつかあったが、アップデートされ、大規模アプリでも幅広くカバーされるようになった。
2020年にはGitHubスター数がReact, Angularをしのぐほどになっている。日本ではLineと言った大手からhey, STUDIOなど中規模以上のアプリにも使われている。
【Vueの基本】
核となるのはvueクラス
Vue.js を起動させるにはVueクラスをインスタンス化する
new Vue({...})
アプリで利用するデータはオブジェクトで用意しておく。テンプレートからこれを参照する、という役割が基本。
Vue.jsを理解するための３つの柱
(1)ディレクティブ
まずVueのtemplateを構成するのは、まずこの２点。
- {{...}} Mastachek構文 与えられた値を組み込む
- v-...属性 ディレクティブ v-ifなどの様々な機能
ディレクティブを使って機能をつけたり、データを埋め込んだりする
(2)算出プロパティ
<div id="app">
<p>{{ email.split('@').toLowercase() }}</p>
</div>
//computed.js
new.Vue([
el: '#app'
data: {
email: 'Y_SUZUKI@gmail.com'
}
])
わかりづらい、テンプレートはシンプルであるべき
↓ここで
<div id="app">
<p>{{ localEmail }}</p>
</div>
//computed.js
new.Vue([
el: '#app'
data: {
email: 'Y_SUZUKI@gmail.com'
},
computed{
localEmail():{
return this.email.split('@').toLowercase()
}
])
算出プロパティとは、既存のプロパティを算出した結果を取得できるゲッターのこと。
プロパティ：関数名.... の形で書く
ちなみに👀...
算出プロパティvsメソッド
- 算出プロパティは引数を持てない
- 引数がいるならメソッド
- 算出プロパティは取得に使う
- 算出；既存データの「加工を伴う取得」。
- メソッド；取得・操作・更新が可能。算出でできることはできる
- 引数を伴わない単純な加工や演算は、算出プロパティを使ったほうがコードの意図が明確になって良い
- 算出プロパティはキャッシュされる
- 算出；depsが更新されるまで更新されない
- メソッド；常に実行される
(3)ライフサイクル
Vueのインスタンス；
生成→要素にマウントされる→データの変更に応じてビューを更新→破棄
- created...まだマウント前。文書ツリーへのアクセスはmounted後
リアクティブデータ
リアクティブデータとは、
Vueクラスのdataオプションに登録されたデータのこと。
データオブジェクトの変化を検知して、ページに自動反映させることから、リアクティブ（＝反映できる）と呼ばれる。
ここで、Vueアプリを開発する上で陥りがちな罠について見ていく！
(1)リアクティブシステムの制約
開発者は、リアクティブシステムの内部的な挙動を基本意識する必要はない。
が、Javascript の機能上の制約より、Vueは追加や消去を検知できないため、そこは気をつけなくてはいけない。
そこで、解決策は
- 全てのプロパティを最初に準備する
- 最初に値が決まっていない場合でも、最低限、空値でプロパティを用意しておく（アプリで利用するデータを一望できるという意味でも良い）
- プロパティ追加をVue.jsに通知する
- Vue.setなどのメソッドを使って追加＋追加を通知する
(2)ビューの非同期更新を理解する
リアクティブシステムによるページの（ビュー）の更新は、非同期！
Vueではデータの変更を検知しても、これをすぐにページ（ビュー）に反映するわけではない。
連動して発生する全ての変更をためた上で、最終的な結果をビューに反映させる。
→余計な描写を防いでいる
→ページに表示されたものを関数内で使う場合などは注意！
(3)ウォッチャーによる明示的な監視
更新のタイミングを手動で制御したい時がある。
例えば、入力値がどんどん更新されるときに、都度リストを取得するのが無駄な時がある。
→入力の切れ目にだけ処理を実行させたい、とする。
そこでwatcher!!
細かい書き方はここには明記しないが、
監視すべきプロパティ、変更後のプロパティの値、変更前のプロパティの値、プロパティ変更時に実行すべき値がセットできる。