Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

rry
November 02, 2022

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

rry

November 02, 2022
Tweet

More Decks by rry

Other Decks in Programming

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)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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 や
    サービスによっても変わるため、
    フロントエンドというより
    インフラに関わるお話です。

    View Slide

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

    View Slide

  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 したばかりだとディレクトリ
    が一つもないので自分で作る
    必要があります

    View Slide

  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つのディレクトリでコンポーネントの責務を分ける

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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 でコンポーネントカタログを作る

    View Slide

  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 ライブラリを選定する

    View Slide

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

    View Slide

  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 で独自コンポーネントを使うような
    ライブラリだと引き剥がしづらいので要注意。

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. 25
    © 2012-2022 BASE, Inc.
    #vuefes_rejectcon2022
    API 通信と
    OpenAPI を使った
    スキーマ管理について

    View Slide

  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

    View Slide

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

    View Slide

  28. 28
    © 2012-2022 BASE, Inc.
    #vuefes_rejectcon2022
    テスト

    View Slide

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

    View Slide

  30. 30
    © 2012-2022 BASE, Inc.
    #vuefes_rejectcon2022
    開発体験向上

    View Slide

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

    View Slide

  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 を使うと良さそう
    です。

    View Slide

  33. 33
    © 2012-2022 BASE, Inc.
    #vuefes_rejectcon2022
    以上、ここら辺が揃うと
    良い開発ができそうです
    󰠁 🚀 ✨

    View Slide

  34. 34
    © 2012-2022 BASE, Inc.
    #vuefes_rejectcon2022
    まとめ
    Vue + TypeScript で良い開発体験は
    十分に得ることができる

    React などの他ライブラリと同じような
    構成でモダンな開発ができる

    Vite、Pinia、Volar など Vue をとりまく
    エコシステムも常に進化し続けている

    View Slide

  35. 35
    © 2012-2022 BASE, Inc.
    #vuefes_rejectcon2022
    流行り廃りの流れがはやい
    フロントエンドにおいて
    コミュニティ中心の情報発信は
    とてもありがたい 🙏
    これら技術のキャッチアップ

    View Slide

  36. 36
    © 2012-2022 BASE, Inc.
    #vuefes_rejectcon2022
    ご静聴ありがとうございました!
    Vue + TypeScript で 0 → 1 サービス開発

    View Slide