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
870
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
260
Other Decks in Programming
See All in Programming
iOS開発スターターキットの作り方
akidon0000
0
210
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
370
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
710
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
1.3k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
220
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
710
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
270
効率的な開発手段として VRTを活用する
ishkawa
1
180
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
TypeScriptでDXを上げろ! Hono編
yusukebe
3
880
コーディングエージェント概観(2025/07)
itsuki_t88
0
440
Featured
See All Featured
Bash Introduction
62gerente
613
210k
For a Future-Friendly Web
brad_frost
179
9.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Documentation Writing (for coders)
carmenintech
72
4.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Adopting Sorbet at Scale
ufuk
77
9.5k
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