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
510
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
210
Other Decks in Programming
See All in Programming
Amazon Bedrock Multi Agentsを試してきた
tm2
1
240
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
200
盆栽転じて家具となる / Bonsai and Furnitures
aereal
0
2.2k
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
230
動作確認やテストで漏れがちな観点3選
starfish719
5
880
定理証明プラットフォーム lapisla.net
abap34
1
670
Terraform で作る Amazon ECS の CI/CD パイプライン
hiyanger
0
110
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.2k
Alba: Why, How and What's So Interesting
okuramasafumi
0
240
最近のVS Codeで気になるニュース 2025/01
74th
1
240
Immutable ActiveRecord
megane42
0
120
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
360
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
520
The Invisible Side of Design
smashingmag
299
50k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Building an army of robots
kneath
302
45k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Designing Experiences People Love
moore
139
23k
Faster Mobile Websites
deanohume
305
30k
Code Reviewing Like a Champion
maltzj
521
39k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Building Adaptive Systems
keathley
39
2.4k
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