Vue 3から始める、Vue.js
- カテゴリー
- JavaScript
- Vue.js
2020年9月にバージョンアップしたVue 3を複数回にわたって取り上げます。初心者から上級者までVue.jsがわかるシリーズです。
最終回 こんなときどうする？ ピンポイントで効く便利な機能
シリーズ最終回ではこれまで説明できなかった便利な機能をピンポイントで紹介します。また、連載開始から1年経った現在のVue.jsについても触れます。
第19回 コンポジション関数を用いたアプリケーション開発の実践
シリーズ内で使用したデモを題材に、より実践を意識したコンポジション関数とコンポーネントを組み合わせた構成で、順を追って再実装していきます。機能拡張にあわせた実装構成の変化にも注目してください。
第18回 refとreactiveの異なるデータ構造とその使い分け 後編
後編では状態データの生成におけるrefとreactiveの使い分けを、可読性や保守性に与える影響と併せて解説します。また、浅いリアクティブでオブジェクトを保持するshallowRefとshallowReactiveについても触れます。
第17回 refとreactiveの異なるデータ構造とその使い分け 前編
Composition APIのうち、リアクティブデータを生成するrefとreactiveの違いについて解説します。最終的には2つのAPIの使い分けの一助になることを目指していますが、前編では、そのデータ構造の違いに基づく影響を考えます。
第16回 Composition APIの基本と新たな実装構成
Vue 3のメイン機能であるComposition APIについて解説します。まずは、基本的な利用方法と新たな実装構成を理解し、その導入によりOptions APIでは不可能であった何が可能になるのかを考えてみましょう。
第15回 スロットによるコンテンツの挿入とProviderコンポーネント
親コンポーネントが管理するコンテンツを、子コンポーネントの特定の場所へ差し込めるスロットについて解説します。これまでのデータの受け渡しだけでは処理しきれないケースを例に、活用場面を考えてみましょう。
第14回 provide/injectによるコンポーネント間のデータ連携
provideとinjectを利用したデータ連携について解説します。適切にデータの制御を行わないと、不要な依存関係を生み出してしまうので、注意が必要です。
第13回 保守性に配慮したコンポーネント開発の実践
例示のためのシンプルなコードでは気づきにくい、実装のポイントを解説します。親子のコンポーネント間のデータフローを壊れにくく保ちながら、保守性の高いコードを目指します。
第12回 props/emitsで実現する単方向データフローによるコンポーネント実装
親コンポーネントと子コンポーネント間のデータフローの要となるpropsとemitsの連携を解説します。
第11回 標準技術でシンプルに実現するコンポーネント指向開発
コンポーネントの分割方法について解説します。コンポーネント分割は使い所を誤るとかえって実装が煩雑にもなりえます。留意すべきポイントも挙げました。
第10回 件数制限のあるWeb APIとの連携とwatchオプション
大量のデータのやり取りが必要になると、すべてのデータをクライアント側に保持するというのは、現実的な実装ではありません。そのようなときの実装方法を解説します。
第9回 Web APIの連携とライフサイクルフック
これまでは初期データをアプリ内で保存してきたのですが、実際のWebアプリでは、Web APIを使ってデータを取得、更新することが一般的です。タイミングよく通信を処理するためのライフサイクルフックについて解説します。
第8回 タスク編集機能によるVue活用方法の復習
これまで解説してきたVueの知識を活用し、タスク編集機能を実装します。復習を兼ねて実装方法を考えてみましょう。
第7回 DOM要素の生成タイミングとref属性による参照
Vueが用意していないDOMネイティブの機能を使う場合、DOMの参照が必要です。その際、DOMの描画が終わった時点での参照が必須となります。そのような場面での実装の定石を学びます。
第6回 条件付きレンダリングと修飾子によるイベントハンドリング
v-show、v-ifディレクティブによる条件付き描画や、修飾子を用いたイベントハンドリングの効率的な実装を解説します。
第5回 算出プロパティによるパフォーマンスに配慮したデータの取得
リアクティブなデータの取り回しができるVue.jsは不要な処理が行われないよう配慮が必要です。Vue.jsを使うなら初めから意識しておかねばならないポイントを押さえます。
第4回 v-modelによる効率的なフォームの実装
v-modelディレクティブを使って、双方向のデータバインドを実装します。また、readonly APIで、特定の値を読み出し専用にし、データ書き換えが行われれないようにする処理についても解説します。
第3回 リアクティブなデータ表示
UIの操作に応答してデータ表示が変わるコンポーネントへと実装を進めます。使用するプロパティや、イベントハンドラの定義を解説します。
第2回 Vueの導入手順とアプリケーション構築の基礎
Vue.jsでできることの特徴を把握するために簡単なコンポーネントを実装してみます。データ定義、データバインディング、ディレクティブなど基本的な概念がわかります。
第1回 Vue 3はどう変わったか
2020年9月にバージョンアップしたVue 3を複数回にわたって取り上げます。第1回目はVue 3の概要を紹介します。