Nuxtにおける設計

Transcript

1. Nuxtにおける設計 Composition APIの影響
2. プロフィール • 25歳 • 男性 • シニア・エンジニア ◦ フロントエンド ◦ 株式会社エヌエルプラス • 開発案件の初期から関わって設計から入ることが多い ◦ ファッション通販サイトのコミュニティサービス ◦ 医療関係の B to B to C サービス
3. 現代のフロントエンドには設計が必要なんだ • フロントエンドは年々リッチになってきている。 ◦ ブラウザの性能が向上した。 ◦ アプリケーションのような UIのWebサービスを提供する企業が増加し、エンドユーザーもお客さんも そういったWebサービスを使っている。 • フロントエンドでサービスを統合することも増えている。 ◦ Firebaseの各種サービスをフロントエンドから使う。 ◦ チャットシステムをフロントエンドから使う。 ◦ ヘッドレスCMSをフロントエンドから使う。 ◦ WebRTC関係のソリューションをフロントエンドから使う。
4. Nuxtにおける設計とCompositionAPIの影響 • Option API から Composition API • Nuxt とディレクトリ構造の考え方 • Composition API の設計への影響
5. ついに Nuxt3 が来た • Vue3 ベースの Nuxt3 がようやくパブリックベータになった！ • ビルドツールとして Vite が標準になった他、ようやく Nuxt で Composition API が 正式に使えるようになる🎉
6. Option API から Composition API に変わる • 言い換えれば ◦ Option API: Vue のオブジェクトを拡張することで機能を実現する方法 ◦ Composition API: Vue オブジェクトに対する DI によって機能を実現する方法 • 現状よく使われている vue class decorator により近い Class API を提供する方法 も考えられたらしい ◦ stage2 proposal の Decorator を使う必要があり不確実らしい ◦ TSXサポートに課題が出てくるらしい ◦ rfcs/0013-composition-api.md at master · vuejs/rfcs · GitHub ◦ tc39/proposals: Tracking ECMAScript Proposals
7. template で使う変数や関数を setup() を通じて注入する
8. • テスタブル ◦ 純粋な TypeScript のコードを注入するので、注入するコードの単体テストが書きやすい • リユーザブル ◦ 純粋な TypeScript のコードを注入するので、使い回しやすい • TypeScript サポート ◦ 外部ライブラリに頼らない TypeScript サポートを実現 Composition API の特徴
9. Nuxtを使ったフロントエンドのディレクトリ構造（抜粋） • layouts/ Nuxt の標準 layouts/default.vue は pages/ 以下のページコンポーネントにデフォルトで適用される。 • components/ Nuxt の標準 • pages/ Nuxt の標準 pages/ 以下のディレクトリ構造に従って Vue Router のルーティングが生成される。 • services/ View を責務とするコンポーネント群を、 API スキーマやロジックの変更の影響から隔離するためのサービス層。 ◦ api/ それぞれの API 関係の関数、共通処理等 ◦ dataTransfer/ API スキーマからコンポーネントの要求するデータ型への変換 ◦ linkBuilder/ ID 等からリンクを生成するコード ◦ logic/ サービスロジック等 • errors/ フロントエンドのエラー処理 • validations/ バリデーションのルールとエラー • @types/ 型を置く • typeGuards/ 型ガードを置く
10. 考え方 • layouts/ pages/ components/ 以下に直接書かれるロジックを最小限にする。これ らは View に関心を持っている。 • components/ 以下のディレクトリ構造はコンポーネントの役割に基づいたものにす る。 ◦ atomic design 等に基づく粒度等の情報はドキュメント等に記載する。 • 上記以外のディレクトリは横断的関心事に基づいていることが多い。 ◦ コンポーネント内で起こるエラーのエラー処理 ◦ フォーム関係のコンポーネントのバリデーション ◦ API呼び出しとそれに関する共通処理
11. Composition API の設計への影響 • components/ 等 Vue のコンポーネントを記述するディレクトリでテストが書きやす い。 ◦ component/Hoge/Fuga.vue ◦ component/Hoge/FugaSetup.ts ◦ component/Hoge/FugaSetup.spec.ts ◦ というような形で単体テストが書ける • Vue のコンポーネントからロジックを剥がしやすい ◦ setupを書いている.tsファイルから切り出すだけ • 既存の方針を強化するように働いている
12. まとめ • Vue3 ベースの Nuxt3 がようやくリリース間近になったことで、 Nuxt にも Composition API の波が来た • これまでの Nuxt では、 Vue のコンポーネントを書く場所とそれ以外を分けて考え、 横断的関心事を関数として切り出して特定のディレクトリにまとめる方法を取ってき た • Composition API はそういった方針を強化すると考えられる