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
820
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
250
Other Decks in Programming
See All in Programming
XP, Testing and ninja testing
m_seki
3
210
PicoRuby on Rails
makicamel
2
110
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
180
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
140
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
48
31k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.6k
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
童醫院敏捷轉型的實踐經驗
cclai999
0
200
技術同人誌をMCP Serverにしてみた
74th
1
440
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Code Reviewing Like a Champion
maltzj
524
40k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Rails Girls Zürich Keynote
gr2m
94
14k
For a Future-Friendly Web
brad_frost
179
9.8k
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