TypeScriptの思想

【※女性限定/オフライン】TypeScriptなんでもLT会 : https://joshi-ts.connpass.com/event/361783/
にてLT

Transcript

1. TypeScript の思想 mae616 2025/07/28 TS.joshi
2. 自己紹介 X(Twitter): @mae616_ mae616(まえ) • フリーランス準備中(休職中) • SE(Java) 6年 Webバックエンドエンジニア(PHP, AWS, ディレクション) 1.5年 Webフロントエンドの講師 兼 開発(JS, React, Next.js, Svelte) 1年 • 運営: • ゆるっと もくもく会 for Women • お題でプログラミング: おだいで.dev 開発で遊ぼう！ • ゆるゆる適当にやってます٩( ᐛ )و
3. 目次 • 疑問 • そもそもJavaScriptと • TypeScriptにすることで、 どういう利点があるのか • TypeScirptの恩恵とは • まとめ
4. どうにもこうにもTypeScriptの思想がピンとこないので、 ちょっと調べてみました。 良かったら、みんなで雑談しましょう٩( ᐛ )وｲｪｲ ※ 一応、ChatGPTとGeminiで言ってることが合ってるかダブルチェックしてます が、間違ってたらごめんなさい٩( ᐛ )وﾃﾍ ※ オライリーの「初めてのTypeScript 」を参考にしています
5. 疑問
6. TypeScriptはよく「ガードレール」 ＝「型を持った」JavaScript と言われます。
7. これがいまいちよくわからない...
8. 「動的型付けでなく、静的型付けにすることで 安全に拡張性が高く利用できる」 のはなんとなくわかるが ...なんとなくピンとこない なんとなくなんかそれだけで言語が成り立って るように感じがしない
9. そもそもJavaScriptとは
10. とにかく簡単、すぐ動く、 異常なくらい柔軟な言語
11. <JavaScriptの欠点> 柔軟すぎて、大規模に向かない
12. TypeScriptにすることで、 どういう利点があるのか
13. <規律> • 実行時にクラッシュするものを実行前に教えてくれる • ぶっちゃけそもそも関数でないものを実行を阻止してくれたりする 正直、このレベルで教えてくれる
14. ただ、ちょっと疑問が 今って、JavaScript書くときそんなにストレスがない気がする
15. 実は
16. VSCodeは、JavaScriptを書くときにも TypeScriptの型エンジン（tsserver）を内部的に使ってる + AIでのコード支援 この恩恵で、今、JavaScriptの開発体験がよくなってる
17. TypeScirptがないときはどんな感じだったか
18. 2000年頃は本当にこんな感じだった。 これ関数だっけ、プロパティだっけ？ あれ、これ再代入していいんだけ？ 状態 それらを実行してエラーを確認する <2000年頃〜2010年代初期のJavaScript開発> * 型がない（何でもあり） * 補完がない（プロパティかメソッドか不明） * 警告がない（再代入も勝手にできる） 実行してから気づく
19. じゃあ、JavaScriptの開発体験がよくなってるなら JavaScriptでもいいのか？
20. TypeScriptの恩恵とは ここからChatGPT貼り付けのやっつけになります٩( ᐛ )وﾃﾍ
21. TypeScriptを使うことで得られるものは「補完」だけではない。 設計を“言語化”できる → interfaceや型を使って、データ構造や関数の契約を明確にできる。 書いた瞬間にエラーを検知できる → 補完や警告ではなく、「意図と違うこと」を明示的に検出できる。 チームや中長期開発に強い → 誰が読んでも「構造」がわかり、属人性が減る。 変更に強いコードが書ける → 型によって依存関係や影響範囲が見える。安心してリファクタできる。 JavaScriptは「とりあえず書ける」 TypeScriptは「未来になっても読める」
22. 「構造化」とは バラバラの情報や処理を、わかりやすく整理して、 意味や関係が見える形にすること ！ 例えるなら… 構造化されてない状態 「何がどこにあるかよくわからない引き出し」→ 探すのが面倒、間違えて取り出しがち、しまうのも迷う 構造化された状態 「靴下はここ、スプーンはここ」ってラベル付きで仕切られた引き出し → 誰が見てもすぐわかる！あとから増やしても安心！ 構造化されていないイメージ図 構造化されているイメージ図
23. TypeScriptでの「構造化」とは？ JavaScriptはなんでも入る袋だけど、 TypeScriptでは“この袋にはこういうものだけを入れてね”って決められるにゃ！ たとえば： これはつまり： このオブジェクトには「id」「name」「createdAt」があるよ！ それぞれどんな型かも明示されてるよ！ createdAt は変更できないよ！ これが 「構造が明示されている状態」 にゃ
24. なぜ構造化が大事なの？ チーム全員が同じ理解でコードを書ける 変更や拡張がしやすい（影響範囲が見える！） 実行前にミスを防げる（「このプロパティ無いにゃ！」って教えてくれる）
25. ちなみに
26. <外部ライブラリの型がわからなくて any も禁止されてるのが地獄な理由> • TypeScriptは「型による構造化」を前提として設計された言語。 • でも、外部ライブラリの型がなかったり、古かったり、曖昧だったりすると、 「型に守られた開発」は一気に破綻する。 そんな中で anyも禁止されていると… 型のないライブラリを使っても「anyで逃げる」ことが許されない。 結果、型を自作するか、ts-ignoreでごまかすか、開発が止まる。 型の力を活かせないまま、型の厳しさだけが残る。 TypeScriptの「理想」だけを要求して、 TypeScriptの「実態のサポート」が追いついてないと地獄になる。
27. 解決の鍵は “構造と現実のバランス感覚” にゃ！ TypeScriptは「構造を守る道具」なのに、 「構造が無い状態で厳密さだけ求められる」と、ただの鎖になるにゃ。
28. まとめ
29. • JavaScriptは、今とても快適。 → だけど、それは TypeScriptの力を裏で借りているから。 • TypeScriptを使う理由は、 「型があるから」ではなく、 「構造を明示して、設計と意図を共有できる」から。 • だからこそ、JavaScriptと同じ書き方ではなく、 「TypeScriptの構造化の力を活かす」書き方が大事。 • でも型がないライブラリや、any禁止の環境では その構造化の力が裏目に出てしまうこともある。
30. • 大事なのは、 「安全性」と「柔軟さ」のバランスをとって、 型と仲良く付き合っていくことにゃ！ 最後に、にゃんこ(ChatGPT)の一言： JavaScriptは書けるようになる言語、 TypeScriptは伝え合えるようになる言語にゃ。
31. ご清聴ありがとうございました٩( ᐛ )و