Vue.js v3 learning

前提

• 概要レベルで理解を深める
• optionsAPIを選択

Vue.js v3の特徴

基本

1. アプリケーションの作成
   • VueアプリケーションのインスタンスはCreateApp関数で作成する
2. テンプレート構文
   • インスタンスのデータとレンダリングされるDOMをバインドする
     参考：レンダリングの仕組み
   • テンプレートをコンパイルし最適化されたjavascriptのコードにする
   • レンダー関数を使えば、生のjavascriptを記述できる
     ただし、コンパイル時の最適化はテンプレートより劣化する
   • インスタンスのデータとレンダリングされるDOMをバインドする
3. リアクティビティーの基礎
   • data()でコンポーネントの状態を定義し、リアクティブに(リアルタイムにUI反映)する
   • methods内でthisを使うと、常にコンポーネントのインスタンスを参照できる
   • テンプレートの中では、methodsはイベントリスナーとして使用できる
   • DOMの更新は同期を保証しない、nectTick関数を使うとDOM更新が完了するのを待ってくれる
4. 算出プロパティ
   • テンプレート内に式を書けるが複雑になるため算出プロパティ(computed:)にgetter関数を作る
   • methods:は毎回計算を行うが、computed:はプロパティの変化を検知した時だけ再計算を行う（キャッシュを持つ）
   • 逆にキャッシュを持ちたくない場合はmethodsを使う(例：APIからデータ取得、時間に依存する処理、単純な計算、UIをトリガーにした計算)
   • computed: fullName: get() set(newValue)というプログラムの場合、fullNameを参照するとgetが呼ばれて、fullNameに値を代入するとsetを呼ぶ
   • get(),set()を明示せずに定義すると、getterのみを持つ（読み取り専用の）計算プロパティになる
   • getter関数は計算のみを行、副作用がないように努める（NO:他のステートを変更、非同期リクエストの実行、DOMの変更）
5. クラスとスタイルのバインディング
   • t-bind:class(省略記法 :class)を使うと、データの値の真値によってキーのCSSクラスを読み込める
   • 条件が増えると冗長なコードになるため、オブジェクト構文を適宜活用する。 以下にサンプルコードを記載する

      //isActiveがtrueの場合activeClassを適用、errorClassは常に適用される
      <div :class="[{ [activeClass]: isActive }, errorClass]"></div>

   • ⚡️TODO:コンポーネンでの使用は、コンポーネントの基礎の後に追記
   • :styleでCSSのスタイルが記載できる。命名規則はキャメルケースを推奨
   • シンプルなテンプレートにするため、:styleに複数書かずに、スタイルオブジェクトを作成しバインドすると良い
   • styleディレクティブは通常のstyle属性と共存できる
   • ベンダープレフィックスを使うCSSプロパティを:styleで指定すると、プレフィックスを探して追加する
6. 条件付きレンダリング
   • v-if 式が真を返す場合のみレンダリングする
   • v-else v-ifのelseブロック
   • v-else-if elseのifブロック。複数回連結できる
   • <template>にv-if 多くの要素を切り替えたい場合に使用する
   • v-show 条件によって要素を表示する。常にレンダリングされDOMに残る。elseは使えない。
   • v-if vs v-show 実行時に条件が変わることが殆どない場合-> v-if 頻繁に何かを切り替える場合-> v-show
   • 同じ要素にv-ifとv-forがある場合、v-ifを先に評価する。暗黙的な優先順位のため非推奨
7. イベントハンドリング
   • v-onディレクティブ DOMイベントの発火時にJavaScriptを実行する。
     インラインハンドラー、メソッドハンドラーが存在する。
     • インラインハンドラー イベント発火時に実行する（javascriptのonclick属性に似たもの）
     • メソッドハンドラー コンポーネントで定義されたメソッドを示す（プロパティ名orパス）
   • foo(), count++ -> インラインハンドラーと認識　foo, foo.bar, foo['bar'] -> メソッドハンドラーとして認識
   • イベント修飾子 イベントの挙動を制御する、修飾子はドットによって示す
     • @click.stop クリックイベントの伝搬を停止
     • @submit.prevent サブミットイベントでページをリロードしない
     • @click.self event.targetが自身の時だけハンドラーを呼び出す（子要素は無視する）
     • @click.capture イベントリスナーを加えるキャプチャーモード
     • @click.once クリックイベントは最大で１度だけ呼ばれる
     • @scroll.passive onScroll（デフォルトのスクロールイベント） の完了を待たずに即座に実行する
   • キー修飾子 特定のキーのキーボードイベントを呼ぶ時に使う、v-on または @で修飾子を使える
     • @keyup.enter keyがEnterの時だけ呼ばれる
     • @keyup.page-down $event.keyがPageDownと同じ場合ハンドラーが呼ばれる
       ※KeyboardEvent.keyの有効なキーをケバブケースに変換すると直接修飾子として使用できる
     • その他エイリアス .tab , .delete , .esc , .space , .up , .down , .left , .right
   • システムの修飾子 マウスやキーボードのイベントを発火させる時に使う
     • .ctrl , .alt , .shift , .meta
   • マウスボタン修飾子 マウスボタンが発生したイベントを制御する
     • .left , .right , .middle
8. フォーム入力バインディング
   • v-modelでは、イベントリスナー・値のバインディングを単純化して書くことができる。（静的な値）
     • 手動例:@input="event => text = event.target.value"
       ※入力フィールド変更時に@inputで発火し入力された値（event.target.value）をtextに代入する
     • 自動例:<input v-model="text">
   • 以下に自動バインディングをサポートしている
     • input v-model テキスト
     • textarea v-model 複数行テキスト
     • input type="checkbox" チェックボックス(単一と複数どちらも可)
     • input type="radio" ラジオボタン
     • select v-model="selected" セレクト(iOSユーザーのためにdisabledオプションの設定推奨)
   • v-bindでは、動的にバインドできる。文字列以外にもリテラル値もサポートしている。
   • .lazy デフォルトではinputイベントの後に入力とデータを同期する。 この修飾子を使うとchangeイベントの後に同期する
   • .number ユーザーの入力を自動で数値として型変換する
   • .trim ユーザーの入力から自動で空白を取り除く
9. テキストウォッチャー
   • watchオプションを使うと、プロパティが変化されるたびに関数を実行できる
   • watchオプションの中でhandler関数とimmediate:trueオプションを設定するとすぐに実行できる
     ※デフォルトでは遅延して実行される
   • ウォッチャーのコールバックは毎回実行されるが、once:trueオプションを使用すると１度目だけ実行する
10. テンプレート参照
    • ref DOM要素や子コンポーネントに直接参照できる特殊な属性
    • $refs.input でアクセスできる。ただしマウントされた後のみ（マウント前はundefined）
    • v-forの中でrefを使用すると要素の配列を取得できるが順序は保証されないため注意
    • ref属性は:refで関数にバインドできる
    • ⚡️TODO コンポーネントでの参照はコンポーネントの基礎の後に記載

NEXT CAPTURE：

• コンポーネントの基礎
• ライフサイクルフック

Q&A

• HTMLパーサーとは？
  →HTMLを解析してブラウザが理解できるDOMツリーに変換する仕組みのこと
• パースするとは？
  →データを解析して、プログラムが扱いやすい形に変換すること
• バインドするとは？
  →データをHTML要素に結びつけること
• レンダリングとは？
  →データの変化を画面に反映する処理のこと
• レンダー関数とは？
  →JavaScriptのrender関数、DOMを直接生成しコンポーネントの描画を制御すること
• JSXとは？
  →JavaScriptXML、JavaScriptの中でHTMLのような記述を可能にする構文のこと
• thisとは？
  →今のオブジェクトのこと
• getter関数とは？
  →オブジェクトのプロパティの値を取得するための関数のこと
• vueのキャッシュとは？
  →vueが過去の計算結果を保存し、不要な再計算を防ぐ仕組みのこと
• ステートとは？
  →Vueインスタンスが持つデータの状態のこと。data()に定義されている変数・リアクティブなデータのこと
• 真値とは？
  →JavaScriptでは、falsyの定義値(false,0,-0,0n,"",null,undefined,NaN)を除くすべての値がtruthy(真っぽい)になる
• オブジェクトのキーをクォート（’）で囲うのと囲わない違いは？
  →キーに英数字以外の文字が含まれる場合、クォートで囲う というJavaScriptの構文ルール
• キャメルケースとは？
  →大文字で単語をつなぎ、間にスペースや記号を含まない命名規則のこと。例：helloWorld, getUserDate
• ケバブケースとは？
  →単語の間をハイフンで区切る、すべて小文字で統一する命名規則のこと。例：hello-world,get-user-date
• ディレクティブとは？
  →HTMLタグに特別な機能を付与する属性。v-(v-bind,v-if など)から始まる接頭辞を持っており、DOMを操作できる
• ベンダープレフィックスとは？
  →各ブラウザが独自にCSSの新機能を実装する際に使用する接頭辞（プレフィックス）のこと。新しいプロパティを試験的に提供する。(chrome,edge,safari -> -webkit-xxx, mozila -> -moz-xxx)
• イテレーター構文とは？
  →vue.jsでは主にv-forディレクティブを使って配列やオブジェクトを繰り返し処理するための構文のこと
• イベントの伝搬とは？
  →ある要素で発生したイベントが親要素や小要素にも影響を与える仕組みのこと
• コールバックとは？
  →　特定のイベントや処理が完了した際に呼ばれる関数のこと