subpath importsで始めるモック生活

TSKaigi Kansai 2024の発表資料です
https://kansai.tskaigi.org/

Transcript

1. subpath importsで始めるモック生活 　　TSKaigi Kansai 2024
2. 皆さんはもっと手軽にモックしたいと 思ったことはありませんか？ ありますよね？？ 2
3. 今回の目的「手軽なモック生活」 • TypeScript環境で型安全に使える ◦ 楽なモック生活というよりは、モック生活の必須条件 • 簡単に導入できる ◦ 設定が簡単 ◦ モックライブラリを使わない（mswなど） 3
4. 結論 subpath importsを使えば、手軽に TypeScript環境に モックを導入できます （今日の内容、これでほぼ終わりです） 4
5. お品書き • 自己紹介 • subpath importsとは？ • 基本的な使い方 • Reactとsubpath imports with Vite • Storybookとsubpath imports 5
6. 自己紹介 10tera（谷村 悠斗） • 所属：YUMEMI Inc. フロントエンドエンジニア • X：@10tera1 6
7. subpath importsとは？ • Node.jsの機能 • 条件(conditions)に応じてimportするパスを変更できる • TypeScript v5.4以上でサポートされている • Vite,Webpackなどの各種バンドラーでもサポート 7
8. やりたいこと ※バックエンドを想定 8
9. subpath importsの使い方（ tsconfig） 特に設定の必要なし！ 一応compilerOptions.customConditionsというのがあるが、自分の環境では 何も設定しなくても動いた（間違っていたらすいません🙏） 9
10. subpath importsの使い方（ package.json） マッピングの定義をする • 先頭は#にする • *を使ったパターンマッチング も使用可能 • デフォルトのimport先を指定 する 10
11. subpath importsの使い方（実行オプション） Nodeの実行オプション--conditionsを 使ってimport先を切り替える 11
12. subpath importsの使い方（ importする側） #をつけてimportするだけ • TSサポートされているので、 import文はエラーにならない &型定義への参照も動く • （コード補完もしてくれたら もっと嬉しいなぁ👀） 12
13. えたったこれだけ？ （あくまで主観） 13
14. 使い方を踏まえて • 設定が手軽（主観） • tsconfigを特にいじらなくても動いてくれる • 条件を増やせば、複数のモック環境を構築できる • モックしたいけど、ライブラリを入れるまでもないときにおすす め 14
15. Reactでsubpath imports with Vite • 実行オプションの代わりにvite configのresolve.conditionsに 条件を指定するだけ 15
16. Storybook(v8.1)とsubpath imports • フロントエンド開発で用いら れるStorybook上でのモック にも、subpath importsを導 入できる • Storybook内部でViteの設 定がされているため、起動 するだけでOK 16
17. まとめ • 今までのコードを見てもらったらわかるように、 とにかく手軽！ • subpath importを使うとTypeScript環境に型安全にモック環 境を手軽に構築できる • Storybookもsubpath importsをサポートしているため、相性が 良い ◦ 個人的にはモックがよく必要になるStorybookとの組み合 わせがかなりおすすめ 17
18. 終わり！ 18