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
540
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
220
Other Decks in Programming
See All in Programming
ARA Ansible for the teams
kksat
0
150
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Rails アプリ地図考 Flush Cut
makicamel
1
110
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Visualization
eitanlees
146
15k
GraphQLとの向き合い方2022年版
quramy
44
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Documentation Writing (for coders)
carmenintech
67
4.6k
We Have a Design System, Now What?
morganepeng
51
7.4k
A Tale of Four Properties
chriscoyier
158
23k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Code Review Best Practice
trishagee
66
17k
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