【はじめに】

フレームワークとは

よくある問題に対するイディオム、方法をまとめたもの。
本格的なアプリを開発していると、似た問題によく遭遇する。
それを毎回解決していくのは大変&面倒！（前もやったのに、、！）
→よくある問題解決をあらかじめ用意しておいてくれる「フレームワーク」！
ただし、フレームワークの導入がいつでも正なわけではない。小さいアプリならわざわざフレームワークを学ぶ方が悪
主な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!!

細かい書き方はここには明記しないが、
監視すべきプロパティ、変更後のプロパティの値、変更前のプロパティの値、プロパティ変更時に実行すべき値がセットできる。