Slide 1
Slide 1 text
“良い” TypeScriptを
TS Kaigi 2025
マインドセット
書くための
Slide 2
Slide 2 text
Keisuke Yamashita
SNS accounts
Frontend Developer at Wix
X: ＠kei_english_ca
Youtube: ＠kei_NA
Background
● 高卒フリーターで
カナダへ渡航
● 現地でエンジニアのキ
ャリアをスタート
● カナダ、アメリカで
3社を経て現在はWix
にてフロントエンドの
エンジニア
● TS歴は6年ほど
Slide 3
Slide 3 text
The Type System
The Mindset
03
The Soundness
02
Slide 4
Slide 4 text
Question: 何が表示される
でしょう？
1. “TS Kaigi”
2. “JS Kaigi”
3. Error: Cannot
assign to 'name'
because it is a
read-only
property.
Slide 5
Slide 5 text
Question: 何が表示される
でしょう？
1. “TS Kaigi”
2. “JS Kaigi”
3. Error: Cannot
assign to 'name'
because it is a
read-only
property.
Slide 6
Slide 6 text
“TypeScript’s type system is
structurally typed:
meaning any value that happens to
satisfy a type is allowed to be used
as a value of that type. “
”TypeScriptの型システムは
構造的型付けです。
つまり、ある値がその型の
構造を満たしていれば、そ
の型の値として使用するこ
とが許されます。”
Josh
Goldberg
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
WHY?
Slide 11
Slide 11 text
大元の言語が
JavaScript
だから
Slide 12
Slide 12 text
静的
(static)
動的
(dynamic)
Java JavaScript
実行時に型が決定される
実行前に型が決定される
Slide 13
Slide 13 text
静的
(static)
動的
(dynamic)
Java JavaScript
実行時に型が決定される
実行前に型が決定される
Type Script
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
動的言語であるJavaScriptとの親和性
を高めるために、構造的型システムを
採用している
Slide 17
Slide 17 text
これ、JavaScriptで表現するの
難しすぎる
Slide 18
Slide 18 text
TypeScriptとは;
構造的型システムを採用した、
半静的言語
Slide 19
Slide 19 text
“TypeScript is structurally typed by design.
It’s what makes it useful in the wild west of JavaScript.”
“TypeScript が構造的型システムを採用
しているのは、意図的な設計です。
それこそが、JavaScript という
“西部開拓時代”のような自由すぎる世界
で、実用的に使える理由なのです。”
Anders
Hejlsberg
Slide 20
Slide 20 text
The Soundness
The Mindset
03
Slide 21
Slide 21 text
【Sound】/saʊnd/
●音
●音楽
●パーソナルコンピュータにおいて
スピーカから音を出力するためのデータ
（サウンドファイル）およびその音
Slide 22
Slide 22 text
【Sound】/saʊnd/
●音
●音楽
●パーソナルコンピュータにおいて
スピーカから音を出力するためのデータ
（サウンドファイル）およびその音
●健全なさま
●健全性 (soundness) - 数理論理学の用語
Slide 23
Slide 23 text
論証の中の健全性
全ての人間は死ぬ。
ソクラテスは人間である。
従って、ソクラテスは死ぬ。
Slide 24
Slide 24 text
コードの中の健全性
実行前のコード(型)が
実行中にも同じ状態であるという様。
“実行時とコンパイル前は同じ型である”
Slide 25
Slide 25 text
実行時とコンパイル前は同じ型である。
Slide 26
Slide 26 text
実行時とコンパイル前は同じ型である。
tsKaigiはstringとして宣言された。
従って、tsKaigiはstringである。
Slide 27
Slide 27 text
実行時とコンパイル前は同じ型である。
jsKaigiはstringとして宣言された。
従って、jsKaigiはstringである。
Slide 28
Slide 28 text
実行時とコンパイル前は同じ型である。
jsKaigiはstringとして宣言された。
従って、jsKaigiはstringである。
Slide 29
Slide 29 text
【Usability】/jùːzəbíləṭi/
●実用性
●使い勝手
●「つかえる」「有用である」という特性
Slide 30
Slide 30 text
コードの中の実用性
Soundnessと引き換えに
コードの実行自体を優先している様。
Slide 31
Slide 31 text
Usability(実用性)を優先 Soundness(健全性)を優先
Slide 32
Slide 32 text
構造的型システムが意味すること
TypeScriptはSoundnessに対して
コントロールを持つことができる言語
Slide 33
Slide 33 text
The Mindset
Slide 34
Slide 34 text
”良い”TypeScriptを
書くためのマインドセット
Slide 35
Slide 35 text
”良い”TypeScriptを
書くためのマインドセット
SoundnessとUsabilityの
トレードオフを”意識的”に行うこと
Slide 36
Slide 36 text
Usability(実用性)を優先 Soundness(健全性)を優先
Slide 37
Slide 37 text
Usability(実用性)を優先 Soundness(健全性)を優先
● サーバー側でスキーマ
and/or テストが担保されている
● チームメンバーはサーバー側のコ
ードにすぐアクセスできる
● このプロジェクトはPoC
● プロダクト自体がインターナル向
け
● …etc.
Slide 38
Slide 38 text
Usability(実用性)を優先
● BackendとFrontendがしっかり
分かれている
● APIがサードパーティー制
● 会社(チーム)の規模が大きく、誰
がコードを触るかわからない
● プロダクトが大きく、どこから
依存されているか追うのが不可能
● …etc.
Soundness(健全性)を優先
Slide 39
Slide 39 text
”良い”TypeScriptを
書くためのマインドセット
ソフトウェア開発において
トレードオフはどの段階でも起こる
Slide 40
Slide 40 text
ありがとうございました。