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

1
© 2012-2022 BASE, Inc.
#vuefes_rejectcon2022
Reject Conference - Vue Fes Japan Online 2022
2022/11/02（水）
Vue + TypeScript で
0 → 1 サービス開発
千葉リリィ（@chiba_rry）

View Slide

2
© 2012-2022 BASE, Inc.
● Twitter: @chiba_rry
● GitHub: ryamakuchi
● BASE Frontend Engineer
自己紹介
最近バ美肉しました。
アバターは「薄荷ちゃん」
です！
BASE には2021年に入社して
カート開発（React）や
TikTok 商品連携・広告 App の
開発（Vue）を行ってきまし
た。
最近はフロントエンドだけで
なくてバックエンド（PHP）も
書いてます。

View Slide

3
© 2012-2022 BASE, Inc.
Vue + TypeScript でサービスを
0 から開発するときにどのような
技術選定をしていくと良さそうか
React とか〇〇だとこうだけど、
Vue を使う場合はどんな感じ？🤔
トークの目的

View Slide

4
© 2012-2022 BASE, Inc.
Vue + TypeScript
● あるとうれしい型補完（書きやすい）
● 引数・返り値一目瞭然（読みやすい）
● 型安全で安心開発
総じて TypeScript を使った開発は DX が良い
2022年、TypeScript を
使った開発があたりまえに
なってきた

View Slide

5
© 2012-2022 BASE, Inc.
Vue + TypeScript
Vue と TypeScript の「相性問題」は Composition API や
Volar を使うことによってほぼ解消されている
props・emit の型補完が効く
template 内の型補完もほぼ効く
JSX ではないため slot の型補完
はないがそこまで困らない
emit の引数はコンポーネントをまたいだ場合の template の
型補完は効かない、そこだけ注意

View Slide

6
© 2012-2022 BASE, Inc.
Vue + TypeScript で
開発する場合、ほかには
どういった技術を使うのが
良さそうでしょうか？

View Slide

7
© 2012-2022 BASE, Inc.
新しいビルドツール Vite の登場
Vite の開発体験が良い！使いたい！
● Vite（というか esbuild）は HMR がとても速い
● 2022年からサービス開発するなら Vite 使うと楽
Frontend Weekly LT（社内勉強会）で「Vite」について
LT しました - BASEプロダクトチームブログ
↑以前 Vite について調べた LT をしたので興味がある方はみてね

View Slide

8
© 2012-2022 BASE, Inc.
Nuxt3（RC）
（まだ RC だけど）やっぱり Nuxt 使いたい
● SSR/SSG さまざまなユースケースに対応できる
● Nuxt3 だと Vue3 と Vite が使える！
● そろそろ RC 外れることを信じてこの発表では一足先に
Nuxt3 を使うことにしました
（RC 外れるまでプロダクションでの利用は自己責任）

View Slide

9
© 2012-2022 BASE, Inc.
● Vue3 + TypeScript
● Nuxt3
● Vite
● …
ここからの選択は要件次第で
選択肢が変わってくる

View Slide

10
© 2012-2022 BASE, Inc.
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

View Slide

11
© 2012-2022 BASE, Inc.
● SSR
○ AWS
○ GCP
○ Azure
○ Vercel edge functions
● CSR(SPA) or SSG
○ Vercel
○ Netlify
選択肢によって変わるデプロイ先
今回は SSR のため Vercel edge functions を選びましたが、
こちらも要件次第ではたくさんの選択肢も
参考： Deployment · Nuxt
それぞれのサービスで
お値段・機能などが変わるため、
どれを使うかは正直作るもの次第
なところがとても大きいです。
また連携する他 API や
サービスによっても変わるため、
フロントエンドというより
インフラに関わるお話です。

View Slide

12
© 2012-2022 BASE, Inc.
ディレクトリ構成など

View Slide

13
© 2012-2022 BASE, Inc.
ディレクトリ構成
● assets/
● components/
● composables/（合成関数置き場）
● content/（Nuxt Content の MD 置き場）
● layouts/
● middleware/
● pages/
● plugins/
● public/
● server/
Nuxt のディレクトリ構成に沿ってこんな感じに
参考： Nuxt Directory Structure
Nuxt2 → Nuxt3 で
いくつかサポートされる
ディレクトリが増えています
init したばかりだとディレクトリ
が一つもないので自分で作る
必要があります

View Slide

14
© 2012-2022 BASE, Inc.
● 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つのディレクトリでコンポーネントの責務を分ける

View Slide

15
© 2012-2022 BASE, Inc.
● Presentational コンポーネント
○ 「表示」に責任を持つコンポーネント
■ props / emit をバケツリレーするだけ
● Functional コンポーネント
○ API 通信や emit された値を保持したりなど
「機能」に責任を持つコンポーネント
○ XxxContaner.vue が一般的な命名
○ スタイルはほぼ持たない（コンポーネント間の余白くらい）
Tips: コンポーネント設計 💡
Presentational・Functional なコンポーネントを使い分ける
このようにコンポーネントの責務を分けて設計するとコードの見通しが良く
なります。

View Slide

16
© 2012-2022 BASE, Inc.
デザインシステムと
UI フレームワーク

View Slide

17
© 2012-2022 BASE, Inc.
逆に「見た目」にこだわりがないのなら既存のイケてる
UI ライブラリを使って楽することもできます。
どの UI ライブラリが良いかについては好みやほしい UI が
用意されているかなどがあるため作りたい UI に沿って
選定していきましょう。
デザインシステム作るか作らないか
「見た目」にこだわるなら
デザインシステム作ろう

View Slide

18
© 2012-2022 BASE, Inc.
まだ 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 でコンポーネントカタログを作る

View Slide

19
© 2012-2022 BASE, Inc.
デザインシステムを作らない場合
● 既存の 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 ライブラリを選定する

View Slide

20
© 2012-2022 BASE, Inc.
フォームバリデーション
ライブラリ

View Slide

21
© 2012-2022 BASE, Inc.
● VeeValidate 4 の Composition API
○ From コンポーネントを使うやり方と Composition API 対応
の2種類あるが、Composition API 対応のほうは良さそう。
● VeeValidate は 3 → 4 の破壊的変更がえげつなかったのが
若干気がかり。次のバージョンアップの時は後方互換性が
保たれているといいな...
● Vuelidate 2
○ 関数だけ template に渡す形のライブラリ。使いやすい。
フォームバリデーションライブラリ
どれを使うかはお好みだが、
引き剥がしやすくなっているライブラリだと尚良し。
template で独自コンポーネントを使うような
ライブラリだと引き剥がしづらいので要注意。

View Slide

22
© 2012-2022 BASE, Inc.
状態管理

View Slide

23
© 2012-2022 BASE, Inc.
● 親子関係のないコンポーネントをまたいだデータのやりとりを
したい場合は Pinia のような状態管理ライブラリを使う
● Provide/Inject を使ってもコンポーネントをまたいだ
データのやり取りができるが、型推論が効かない
（コンポーネントをまたぐと any になる）ため
Pinia を使ったほうが良い
Vuex と似ているが、TypeScript の型推論が
サポートされて Composition API スタイルの
API を提供するのが Pinia
状態管理は Pinia 一択

View Slide

24
© 2012-2022 BASE, Inc.
Vue2 の頃は Vuex が主流だったが、
今は公式が Pinia を推している
状態管理は Pinia 一択
https://twitter.com/VueDose/status/1463169464451706897

View Slide

26
© 2012-2022 BASE, Inc.
OpenAPI Generator を使って API Client と型を自動生成したもの
を使うと、API Client と型を自分で定義する必要がなくなります。
別リポジトリで OpenAPI を管理し、
API Client と型を生成して packages として配信
メインのリポジトリでは packages を import して使います。
詳しい使い方はこちらの記事をどうぞ↓
OpenAPI Generator で API Client と型を自動生成した話
スキーマ駆動開発で楽する
API Client & Type Project
OpenAPI

View Slide

27
© 2012-2022 BASE, Inc.
● 良かった点 🙆
○ API Client と型を手動で作成しなくて良くなった！
○ 既存のスキーマとの乖離が減って管理がしやすくなった
● 悪かった点 🙅
○ OpenAPI Generator で生成されるコードが難しい...
■ Enum の型変換がいまいちだった
● Enum じゃなくて Union Type で生成されてほしいよね
■ 生成されてほしいコードが生成されなかったり
● そもそも OpenAPI で正しく定義しないと正しい API
Client は生成されない
スキーマ駆動開発で楽する
API Client と型を自動生成してみてどうだったか？🤔

View Slide

29
© 2012-2022 BASE, Inc.
テスティングライブラリ
● Integration・Unit テスト
○ Vitest や Testing Library Vue を使うと良い
● Visual Regression Test・End To End
○ VRT は Chromatic を使うと良い
■ これらについては後から入れるでも大丈夫
フロントエンドにもテストがあると
デグレ防止や仕様がテストから
読み取れて分かりやすくなるため、
初期の段階からテスティングライブ
ラリは入れておいたほうが開発がし
やすいと考えています。
テストがあることで安心して
機能追加・修正ができます。

View Slide

31
© 2012-2022 BASE, Inc.
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 で
差分が出て困ることがなくなるので初期の導入をおすすめします。

View Slide

32
© 2012-2022 BASE, Inc.
Volar
VSCode を使っている人は
Volar を入れると捗る！
Vue2 の頃は Vetur が主流だった
が、今は公式が Volar を推している
https://twitter.com/VueDose/status/1463169464451706897
余談ですが、Volar は
Vue3 に限らず Vue2 でも使えま
す。
Vetur の開発はもう既に止まって
いるので Volar を使うと良さそう
です。

View Slide

34
© 2012-2022 BASE, Inc.
まとめ
Vue + TypeScript で良い開発体験は
十分に得ることができる
１
React などの他ライブラリと同じような
構成でモダンな開発ができる
２
Vite、Pinia、Volar など Vue をとりまく
エコシステムも常に進化し続けている
３

View Slide

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

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

rry

More Decks by rry

Other Decks in Programming

Featured

Transcript