現在EY-OfficeのReact教育では、JavaScriptの改良版であるTypeScriptを使っています。TypeScriptを使う事でタイプミス等から起きる間違いをVSCodeでコードを書く時点で検出でき、教育でのつまずきを減らせています。
教育だけではなく実際の開発プロジェクトでもTypeScriptはJavaScriptに比べ生産性が上がり、型があることでコードの可読性も上がりメンテナンスの向上も期待できます。
型を知らない若者
ある開発経験が数年のエンジニアにReactの教育を行った際に、型がピント来ないと言われました。彼はオンライン教育でRuby on Railsを学び、スタートアップ企業で数年間Ruby on Railsを使って開発を経験してから、フロントエンドも学ぼうとReact(JavaScript)の勉強を始めたそうです。
今までに学んだ（使った）プログラム言語はRubyとJavaScriptです。どちらも動的型付け言語で、コードに型宣言を書きません。
10年くらい前のエンジニアは、SIer等に就職しJavaやC#などの型宣言を書く静的型付き言語学を学んで（使って）から。スタートアップ企業に転職しRubyやJavaScript、PHP等の動的型付け言語を学んで（使って）来ました。以前は型宣言を体験しているエンジニアが多かったのです。
しかし最近のエンジニアを型（型宣言）を経験していないのです！
型とは何なのか
ところで型とは何なんでしょうか？
JavaScriptやRubyもデータには型がありコードを書く際には意識しています、しかしコードの中に型を書く型宣言がないので忘れがちです。
効率を考えCPUに合わせる
CPUの演算命令は整数と実数（浮動小数点）では異なり性能も違います。C言語やC++、Rustで作るような性能を考えなければいけないプログラムの世界では、CPUを効率的に使える型を選ぶ必要があります。
しかしJavaScript(TypeScript)やRubyのような性能より生産性を重視する言語ではCPUに合わせる型はほぼ関係ないかもしれません。
型とは設計
JavaScriptで関数function judgment(x, y)を作るときに考える事は
- 機能
- 関数名
- どのような引数が必要か、戻り値をどうするか
- 引数名
ですが、型のある言語TypeScriptではfunction judgment(x: number, y: number): stringのように
「5. 引数の型、戻り値の型」が追加されます。しかし、これは「3. どのような引数が必要か、戻り値をどうするか」で考えた結果です。
さらにここで、x, yが2次元の座標なら type Point2D = {x: number, y: number}という型を定義し、 function judgment(p: Point2D): string のような定義の方が良いかと思います。
戻り値の文字列が実は、'IN', 'OUT', 'BORDER'という判定結果ならtype Postion = 'IN' | 'OUT' | 'BORDER'型を定義し、 function judgment(p: Point2D): Postion のような定義の方がさらに良いかと思います。
このように型は設計の結果なのです。
適切な型を定義する事でif (judgment(p1) === '0UT')のようなタイプミス（O と 0）をTypeScriptが検出できるようになり、プログラムの品質が上がります。
型を教える
型は良いものですが、上の例に書いたように明確な型を書くには、それなりの学習と経験が必要になりReact教育の中で深く教えるのは無理です。標準のReact教育コースでは必要な最低限にしぼっています。
- プリミティブ型（number, string, boolean, null…）
- 配列型、関数型
- any型 ： 何でもありのanyはJavaScriptからの移行時に便利ですが、いつかちゃんとした型に置き換えないと禍根を残します
- オブジェクトの型 ： JavaScriptではオブジェクトが多用されるので、オブジェクトを正しく型宣言する事で、安全で可読性の高いコードを書くことができるるようになります
- null安全 ： TypeScriptでは
string|nullのようにユニオン型を使うとnull安全なコードが書きやすくなるので説明しています - ジェネリクス ： 初心者がジェネリクスを完璧に書ける必要はないと思います。ただし、ジェネリクスが何なのか、簡単なジェネリクスが読めるように説明しています
まだ、型に付いての教育は試行錯誤の部分もあり、受講者の反応をみながら改良しています。
