これからReactをやるならTypeScriptとKotlinどちらがいいか、戦わせて決めました。 独断と偏見によります。

1. Kotlin/JS VS TypeScript
〜これからReactやるならどっちがお得？〜

2. 目次
● 自己紹介
● バトル
● 結果

3. 自己紹介
飯島彩輝
twitter：@saekisaekisaek
blog：エンジニアの便利手帳/3jigen.net

4. Kotlin/JS VS TypeScript

5. これからReactやるならどっちがお得か

6. JavaScriptと比べたメリット

7. Kotlin
● 型がある
● 簡潔に書ける
● null safetyである

8. TypeScript
● 型がある
● 簡潔に書ける
● null safetyである（--strictNullChecks）

9. ルール
環境構築 IDE JSライブラリ Build時間 成果物サイズ 人気度 汎用性
Kotlin
TS
Kotlin:0
TypeScript:0

10. 環境構築

11. 環境構築:どっちも
● 0からやるとめんどくさい

12. 環境構築:どっちも
● Reactならワンコマンドでできる

13. 環境構築:TypeScript

14. 環境構築:Kotlin/JS

15. 環境構築:TypeScript
● 情報が多い

16. 環境構築:TypeScript
● 情報が少ない

17. 環境構築:Kotlin/JS
● Jestがサポートされていない（まだ）

18. 環境構築
TypeScriptの方が安心

19. 途中経過
環境構築 IDE JSライブラリ Build時間 成果物サイズ 人気度 汎用性
Kotlin
TS ⭕
Kotlin:０
TypeScript:１

20. IDE

21. TypeScript
● VSCodeがデフォルトで対応
● ブレークポイント置ける
● WebStormも使える（有料）

22. Kotlin
● IntelliJ
● ブレークポイントを置けるのは有料版のみ

23. IDE：どっちも
・Chrome上でのデバッガーは動く

24. IDE
どっちでもいい

25. 途中経過
環境構築 IDE JSライブラリ Build時間 成果物サイズ 人気度 汎用性
Kotlin ⭕
TS ⭕ ⭕
Kotlin:１
TypeScript:２

26. JSライブラリの利用

27. TypeScript
● 型定義ファイル（.d.ts）を読み込むことで型付きで
利用可能
● TypeSearchから探せる
https://microsoft.github.io/TypeSearch/

28. TypeScript
して

29. Kotlin
● 型定義ファイル（.kt）を読み込むことで型付きで利
用可能
● ts2ktでTypeScriptの型定義ファイルをktに変換
できる（いまいちらしい）
https://github.com/Kotlin/ts2kt

30. JSライブラリ
今はまだTypeScript

31. 途中経過
環境構築 IDE JSライブラリ Build時間 成果物サイズ 人気度 汎用性
Kotlin ⭕
TS ⭕ ⭕ ⭕
Kotlin:１
TypeScript:３

32. Buildにかかる時間

33. Buildにかかる時間
TypeScriptの方が短い（体感）

34. Buildにかかる時間
けど気にするほどではない

35. 途中経過
環境構築 IDE JSライブラリ Build時間 成果物サイズ 人気度 汎用性
Kotlin ⭕ ⭕
TS ⭕ ⭕ ⭕ ⭕
Kotlin:２
TypeScript:４

36. 成果物のサイズ

37. 成果物のサイズ
TypeScript圧勝
（Kotlinは最低でも1.5MB）

38. 途中経過
環境構築 IDE JSライブラリ Build時間 成果物サイズ 人気度 汎用性
Kotlin ⭕ ⭕
TS ⭕ ⭕ ⭕ ⭕ ⭕
Kotlin:２
TypeScript:５

39. 人気度

40. 人気度
検索数は互角
参考
：https://trends.google.co.jp/trends/explore?geo=JP&q=%2Fm%2F0_lcr
x4,%2Fm%2F0n50hxv

41. 人気度
GitHubへの貢献度
ではKotlinが優勢
参考
：https://blog.github.com/2018-11-15-state-of-the-octoverse-top-program
ming-languages/

42. 人気度
Kotlin優勢

43. 途中経過
環境構築 IDE JSライブラリ Build時間 成果物サイズ 人気度 汎用性
Kotlin ⭕ ⭕ ⭕
TS ⭕ ⭕ ⭕ ⭕ ⭕
Kotlin:３
TypeScript:５

44. 汎用性

45. 汎用性
Android iOS Webフロント サーバー デスクトップ
Kotlin ⭕ △
KotlinNative
or
MOE
⭕ ⭕ ⭕
TornadoFX
TS △
ReactNative
△
ReactNative
⭕ ⭕
Node.js
⭕
Electron

46. 汎用性
Kotlin優勢とした

47. 結果
環境構築 IDE JSライブラリ Build時間 成果物サイズ 人気度 汎用性
Kotlin ⭕ ⭕ ⭕ ⭕
TS ⭕ ⭕ ⭕ ⭕ ⭕
Kotlin:４
TypeScript:５

48. Kotlin/JSだけのメリット

49. Kotlin/JS
流行った時ドヤれる

50. 結果
環境構築 IDE JSライブラリ Build時間 成果物サイズ 人気度 汎用性
Kotlin ⭕ ⭕ ⭕
TS ⭕ ⭕ ⭕ ⭕ ⭕
Kotlin:４＋１ドヤ
TypeScript:５

51. Kotlin/JS
Kotlinで書ける

52. 結果
環境構築 IDE JSライブラリ Build時間 成果物サイズ 人気度 汎用性
Kotlin ⭕ ⭕ ⭕
TS ⭕ ⭕ ⭕ ⭕ ⭕
Kotlin:４＋１ドヤ＋１Kotlin
TypeScript:５

53. 結果
Kotlin/JSの勝利

54. 結果
Kotlin/JSを使おう！

55. 宣伝
DroidKaigi 2019 の2日目（2/8）にTDDの話
をするのでよかったら来てください！！
https://droidkaigi.jp/2019/timetable/69576/

56. 終わり
＜ありがとうございました！