Vue + TypeScript で 0 → 1サービス開発

Reject Conference - Vue Fes Japan Online 2022 での発表資料です。
https://vuejs-meetup.connpass.com/event/259621/

2022年に新規サービスを開発するときに考える技術選定について発表します。 フロントエンドは TypeScript で開発するのが主流になってきていますが、Vue を採用した場合ほかにはどういった技術を使うのが良さそうでしょうか？

## スライド内のリンク

Frontend Weekly LT（社内勉強会）で「Vite」について LT しました
https://devblog.thebase.in/entry/2021/07/29/113335

New Nuxt 3 Feature: Incremental Static Generation | Vue Mastery
https://www.vuemastery.com/blog/new-nuxt-3-feature-incremental-static-generation/

Deployment · Nuxt
https://v3.nuxtjs.org/getting-started/deployment/

Nuxt Directory Structure
https://v3.nuxtjs.org/guide/directory-structure/nuxt/

Tailwind考 - uhyo/blog
https://blog.uhy.ooo/entry/2022-10-01/tailwind/

VeeValidate 4 の Composition API
https://vee-validate.logaretm.com/v4/guide/composition-api/validation/

Vuelidate 2
https://vuelidate-next.netlify.app/

https://twitter.com/VueDose/status/1463169464451706897

OpenAPI Generator で API Client と型を自動生成した話
https://devblog.thebase.in/entry/2022/03/28/130016

Transcript

1. 1 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 Reject Conference - Vue Fes Japan Online 2022 2022/11/02（水） Vue + TypeScript で 0 → 1 サービス開発 千葉 リリィ（@chiba_rry）
2. 2 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 • Twitter: @chiba_rry • GitHub: ryamakuchi • BASE Frontend Engineer 自己紹介 最近バ美肉しました。 アバターは「薄荷ちゃん」 です！ BASE には2021年に入社して カート開発（React）や TikTok 商品連携・広告 App の 開発（Vue）を行ってきまし た。 最近はフロントエンドだけで なくてバックエンド（PHP）も 書いてます。
3. 3 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 Vue + TypeScript でサービスを 0 から開発するときにどのような 技術選定をしていくと良さそうか React とか〇〇だとこうだけど、 Vue を使う場合はどんな感じ？🤔 トークの目的
4. 4 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 Vue + TypeScript • あるとうれしい型補完（書きやすい） • 引数・返り値一目瞭然（読みやすい） • 型安全で安心開発 総じて TypeScript を使った開発は DX が良い 2022年、TypeScript を 使った開発があたりまえに なってきた
5. 5 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 Vue + TypeScript Vue と TypeScript の「相性問題」は Composition API や Volar を使うことによってほぼ解消されている props・emit の型補完が効く template 内の型補完もほぼ効く JSX ではないため slot の型補完 はないがそこまで困らない emit の引数はコンポーネントをまたいだ場合の template の 型補完は効かない、そこだけ注意
6. 6 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 Vue + TypeScript で 開発する場合、ほかには どういった技術を使うのが 良さそうでしょうか？
7. 7 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 新しいビルドツール Vite の登場 Vite の開発体験が良い！使いたい！ • Vite（というか esbuild）は HMR がとても速い • 2022年からサービス開発するなら Vite 使うと楽 Frontend Weekly LT（社内勉強会）で「Vite」について LT しました - BASEプロダクトチームブログ ↑以前 Vite について調べた LT をしたので興味がある方はみてね
8. 8 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 Nuxt3（RC） （まだ RC だけど）やっぱり Nuxt 使いたい • SSR/SSG さまざまなユースケースに対応できる • Nuxt3 だと Vue3 と Vite が使える！ • そろそろ RC 外れることを信じてこの発表では一足先に Nuxt3 を使うことにしました （RC 外れるまでプロダクションでの利用は自己責任）
9. 9 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 • Vue3 + TypeScript • Nuxt3 • Vite • … ここからの選択は要件次第で 選択肢が変わってくる
10. 10 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 CSR(SPA) | SSR | SSG | ISG • Client-side Only Rendering（SPA）: ◦ SEO やページキャッシュの必要がない管理画面とかだったら SPA で十分 • Server Side Rendering（SSR）: ◦ Nuxt3 のメインは SSR。init するとデフォルトがこれになっている • Static Site Generation（SSG）: ◦ ブログやメディアサイトなど更新が頻繁ではないものは SSG も良い • Incremental Static Generation（ISG）: ◦ SSG と SSR のハイブリッドのような ISG も今後機能として出てきそう ◦ まだ公式ドキュメントには登場していない（2022/10/28 時点） 今回は SSR を選びましたが、要件次第では他の選択肢も 参考： New Nuxt 3 Feature: Incremental Static Generation | Vue Mastery
11. 11 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 • SSR ◦ AWS ◦ GCP ◦ Azure ◦ Vercel edge functions • CSR(SPA) or SSG ◦ Vercel ◦ Netlify 選択肢によって変わるデプロイ先 今回は SSR のため Vercel edge functions を選びましたが、 こちらも要件次第ではたくさんの選択肢も 参考： Deployment · Nuxt それぞれのサービスで お値段・機能などが変わるため、 どれを使うかは正直作るもの次第 なところがとても大きいです。 また連携する他 API や サービスによっても変わるため、 フロントエンドというより インフラに関わるお話です。
12. 12 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 ディレクトリ構成など
13. 13 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 ディレクトリ構成 • assets/ • components/ • composables/（合成関数置き場） • content/（Nuxt Content の MD 置き場） • layouts/ • middleware/ • pages/ • plugins/ • public/ • server/ Nuxt のディレクトリ構成に沿ってこんな感じに 参考： Nuxt Directory Structure Nuxt2 → Nuxt3 で いくつかサポートされる ディレクトリが増えています init したばかりだとディレクトリ が一つもないので自分で作る 必要があります
14. 14 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 • components/ ◦ ui/（UI コンポーネント） ▪ button.vue とか input-text.vue とか ▪ ゆくゆくは UI ライブラリ package として 切り出せるような単位と考える ◦ common/（共通コンポーネント） ▪ item-select.vue とか user-card.vue とか ◦ domain/（各画面の共通していないコンポーネント） ▪ URL path と同じディレクトリ構造にする ▪ items/list-container.vue とか ▪ settings/account/password-update.vue とか components のディレクトリ構成 推しの構成。3つのディレクトリでコンポーネントの責務を分ける
15. 15 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 • Presentational コンポーネント ◦ 「表示」に責任を持つコンポーネント ▪ props / emit をバケツリレーするだけ • Functional コンポーネント ◦ API 通信や emit された値を保持したりなど 「機能」に責任を持つコンポーネント ◦ XxxContaner.vue が一般的な命名 ◦ スタイルはほぼ持たない（コンポーネント間の余白くらい） Tips: コンポーネント設計 💡 Presentational・Functional なコンポーネントを使い分ける このようにコンポーネントの責務を分けて設計するとコードの見通しが良く なります。
16. 16 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 デザインシステムと UI フレームワーク
17. 17 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 逆に「見た目」にこだわりがないのなら既存のイケてる UI ライブラリを使って楽することもできます。 どの UI ライブラリが良いかについては好みやほしい UI が 用意されているかなどがあるため作りたい UI に沿って 選定していきましょう。 デザインシステム作るか作らないか 「見た目」にこだわるなら デザインシステム作ろう
18. 18 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 まだ nuxt/storybook は Nuxt3 に対応していないため、 storybook/vue3 と @storybook/builder-vite を使って 構築する。 推しの Storybook アドオン： • @storybook/addon-essentials ◦ いろいろ入ってるパック、これさえあればとりあえず大丈夫 • @storybook/addon-a11y ◦ a11y のチェックアドオン、WCAG に対応しているかわかる • @storybook/addon-interactions ◦ インタラクションとテストのビジュアルデバッグが 可能になる • @storybook/addon-links ◦ Story 間を移動するリンクを作成できる デザインシステムを作る場合 Storybook でコンポーネントカタログを作る
19. 19 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 デザインシステムを作らない場合 • 既存の UI ライブラリにある機能でまかなえる場合 ◦ Vue3 で使える UI ライブラリは今どれくらいあるか... 🤔 ▪ パッと調べたところ Ant Design Vue、BalmUI、 Element+、Oruga、PrimeVue、Vant、View UI Plus が Vue3 対応している ▪ これらの中で機能を満たしてビジュアルが合うものを探す • 既存の UI ライブラリにある機能でまかなえない場合 ◦ Tailwind CSS、Windi CSS、Tachyons などの Pure CSS UI ライブラリを使って最低限見た目を整えて自作する • Tailwind 系はデザインシステムを作る上で使ってもヨシ ◦ デザインの逸脱を防ぐ目的で使うと効果的な UI ライブラリ ◦ 参考： Tailwind考 - uhyo/blog UI ライブラリを選定する
20. 20 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 フォームバリデーション ライブラリ
21. 21 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 • VeeValidate 4 の Composition API ◦ From コンポーネントを使うやり方と Composition API 対応 の2種類あるが、Composition API 対応のほうは良さそう。 • VeeValidate は 3 → 4 の破壊的変更がえげつなかったのが 若干気がかり。次のバージョンアップの時は後方互換性が 保たれているといいな... • Vuelidate 2 ◦ 関数だけ template に渡す形のライブラリ。使いやすい。 フォームバリデーションライブラリ どれを使うかはお好みだが、 引き剥がしやすくなっているライブラリだと尚良し。 template で独自コンポーネントを使うような ライブラリだと引き剥がしづらいので要注意。
22. 22 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 状態管理
23. 23 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 • 親子関係のないコンポーネントをまたいだデータのやりとりを したい場合は Pinia のような状態管理ライブラリを使う • Provide/Inject を使ってもコンポーネントをまたいだ データのやり取りができるが、型推論が効かない （コンポーネントをまたぐと any になる）ため Pinia を使ったほうが良い Vuex と似ているが、TypeScript の型推論が サポートされて Composition API スタイルの API を提供するのが Pinia 状態管理は Pinia 一択
24. 24 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 Vue2 の頃は Vuex が主流だったが、 今は公式が Pinia を推している 状態管理は Pinia 一択 https://twitter.com/VueDose/status/1463169464451706897
25. 25 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 API 通信と OpenAPI を使った スキーマ管理について
26. 26 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 OpenAPI Generator を使って API Client と型を自動生成したもの を使うと、API Client と型を自分で定義する必要がなくなります。 別リポジトリで OpenAPI を管理し、 API Client と型を生成して packages として配信 メインのリポジトリでは packages を import して使います。 詳しい使い方はこちらの記事をどうぞ↓ OpenAPI Generator で API Client と型を自動生成した話 スキーマ駆動開発で楽する API Client & Type Project OpenAPI
27. 27 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 • 良かった点 🙆 ◦ API Client と型を手動で作成しなくて良くなった！ ◦ 既存のスキーマとの乖離が減って管理がしやすくなった • 悪かった点 🙅 ◦ OpenAPI Generator で生成されるコードが難しい... ▪ Enum の型変換がいまいちだった • Enum じゃなくて Union Type で生成されてほしいよね ▪ 生成されてほしいコードが生成されなかったり • そもそも OpenAPI で正しく定義しないと正しい API Client は生成されない スキーマ駆動開発で楽する API Client と型を自動生成してみてどうだったか？🤔
28. 28 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 テスト
29. 29 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 テスティングライブラリ • Integration・Unit テスト ◦ Vitest や Testing Library Vue を使うと良い • Visual Regression Test・End To End ◦ VRT は Chromatic を使うと良い ▪ これらについては後から入れるでも大丈夫 フロントエンドにもテストがあると デグレ防止や仕様がテストから 読み取れて分かりやすくなるため、 初期の段階からテスティングライブ ラリは入れておいたほうが開発がし やすいと考えています。 テストがあることで安心して 機能追加・修正ができます。
30. 30 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 開発体験向上
31. 31 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 Linter・Formatter 入れないと後で後悔するもの No.1 • eslint & prettier ◦ yarn add -D eslint prettier @nuxtjs/eslint-config-typescript eslint-config-prettier eslint-plugin-nuxt eslint-plugin-vuejs-accessibility • stylelint ◦ yarn add -D stylelint @nuxtjs/stylelint-module stylelint-config-prettier はじめは「開発人数も多くないし良いや...」と後回しに しがちな Linter 系ですが、これこそ一番最初に 入れておくと便利なツールです。 特に Prettier での自動 Fix はとても開発体験の良いものです。 リポジトリ作ってからまずはじめに設定しておくと、自動 Fix で 差分が出て困ることがなくなるので初期の導入をおすすめします。
32. 32 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 Volar VSCode を使っている人は Volar を入れると捗る！ Vue2 の頃は Vetur が主流だった が、今は公式が Volar を推している https://twitter.com/VueDose/status/1463169464451706897 余談ですが、Volar は Vue3 に限らず Vue2 でも使えま す。 Vetur の開発はもう既に止まって いるので Volar を使うと良さそう です。
33. 33 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 以上、ここら辺が揃うと 良い開発ができそうです 󰠁 🚀 ✨
34. 34 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 まとめ Vue + TypeScript で良い開発体験は 十分に得ることができる １ React などの他ライブラリと同じような 構成でモダンな開発ができる ２ Vite、Pinia、Volar など Vue をとりまく エコシステムも常に進化し続けている ３
35. 35 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 流行り廃りの流れがはやい フロントエンドにおいて コミュニティ中心の情報発信は とてもありがたい 🙏 これら技術のキャッチアップ
36. 36 © 2012-2022 BASE, Inc. #vuefes_rejectcon2022 ご静聴ありがとうございました！ Vue + TypeScript で 0 → 1 サービス開発