Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
subpath importsで始めるモック生活
Search
10tera
November 13, 2024
Programming
0
970
subpath importsで始めるモック生活
TSKaigi Kansai 2024の発表資料です
https://kansai.tskaigi.org/
10tera
November 13, 2024
Tweet
Share
More Decks by 10tera
See All by 10tera
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
270
Other Decks in Programming
See All in Programming
Introduce Hono CLI
yusukebe
6
3k
品質ワークショップをやってみた
nealle
0
590
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
120
XP, Testing and ninja testing ZOZ5
m_seki
3
790
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
350
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
610
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
520
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
AkarengaLT vol.38
hashimoto_kei
1
110
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
15k
Being A Developer After 40
akosma
91
590k
Docker and Python
trallard
46
3.6k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Balancing Empowerment & Direction
lara
5
700
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
For a Future-Friendly Web
brad_frost
180
10k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Transcript
subpath importsで始めるモック生活 TSKaigi Kansai 2024
皆さんはもっと手軽にモックしたいと 思ったことはありませんか? ありますよね?? 2
今回の目的「手軽なモック生活」 • TypeScript環境で型安全に使える ◦ 楽なモック生活というよりは、モック生活の必須条件 • 簡単に導入できる ◦ 設定が簡単 ◦
モックライブラリを使わない(mswなど) 3
結論 subpath importsを使えば、手軽に TypeScript環境に モックを導入できます (今日の内容、これでほぼ終わりです) 4
お品書き • 自己紹介 • subpath importsとは? • 基本的な使い方 • Reactとsubpath
imports with Vite • Storybookとsubpath imports 5
自己紹介 10tera(谷村 悠斗) • 所属:YUMEMI Inc. フロントエンドエンジニア • X:@10tera1 6
subpath importsとは? • Node.jsの機能 • 条件(conditions)に応じてimportするパスを変更できる • TypeScript v5.4以上でサポートされている •
Vite,Webpackなどの各種バンドラーでもサポート 7
やりたいこと ※バックエンドを想定 8
subpath importsの使い方( tsconfig) 特に設定の必要なし! 一応compilerOptions.customConditionsというのがあるが、自分の環境では 何も設定しなくても動いた(間違っていたらすいません🙏) 9
subpath importsの使い方( package.json) マッピングの定義をする • 先頭は#にする • *を使ったパターンマッチング も使用可能 •
デフォルトのimport先を指定 する 10
subpath importsの使い方(実行オプション) Nodeの実行オプション--conditionsを 使ってimport先を切り替える 11
subpath importsの使い方( importする側) #をつけてimportするだけ • TSサポートされているので、 import文はエラーにならない &型定義への参照も動く • (コード補完もしてくれたら
もっと嬉しいなぁ👀) 12
えたったこれだけ? (あくまで主観) 13
使い方を踏まえて • 設定が手軽(主観) • tsconfigを特にいじらなくても動いてくれる • 条件を増やせば、複数のモック環境を構築できる • モックしたいけど、ライブラリを入れるまでもないときにおすす め
14
Reactでsubpath imports with Vite • 実行オプションの代わりにvite configのresolve.conditionsに 条件を指定するだけ 15
Storybook(v8.1)とsubpath imports • フロントエンド開発で用いら れるStorybook上でのモック にも、subpath importsを導 入できる • Storybook内部でViteの設
定がされているため、起動 するだけでOK 16
まとめ • 今までのコードを見てもらったらわかるように、 とにかく手軽! • subpath importを使うとTypeScript環境に型安全にモック環 境を手軽に構築できる • Storybookもsubpath
importsをサポートしているため、相性が 良い ◦ 個人的にはモックがよく必要になるStorybookとの組み合 わせがかなりおすすめ 17
終わり! 18