NOTE 036 / 2019年
既存の画面に Vue を足す
サーバー側のテンプレートに、後から Vue を組み込むときの整理です。
既存の画面をすべて作り直すのではなく、一部分だけを Vue に置き換える進め方があります。検索欄や一覧の並び替えなど、状態を持つ部分から始めると、変更の範囲を小さく保てます。
サーバー側のテンプレートと Vue の両方が画面を作るため、値の受け渡しを明確にします。HTML の属性から初期値を渡し、その後の更新は Vue に任せる。境界を決めておくと、どちらが正しい状態なのかで迷いません。
押さえたい点
- 01状態を持つ部分から置き換える
- 02初期値の受け渡しを決める
- 03更新の担当を片方に寄せる
参考資料
外部サイトが開きます。内容は各サイトの管理下にあります。
- CakePHP ドキュメント 外部サイトbook.cakephp.org
- CakePHP 4 ガイド 外部サイトbook.cakephp.org
- Vue.js ガイド 外部サイトvuejs.org
- Vite ガイド 外部サイトvitejs.dev
- TypeScript ドキュメント 外部サイトtypescriptlang.org
- Vue.js API 外部サイトvuejs.org
- Vue のリアクティブ基礎 外部サイトvuejs.org
- Vue コンポーネント基礎 外部サイトvuejs.org
- Vue Transition 外部サイトvuejs.org
- MDN Web Docs 外部サイトdeveloper.mozilla.org
- web.dev 外部サイトweb.dev
- W3C WAI 外部サイトw3.org
- GitHub Docs 外部サイトdocs.github.com