TypeScriptが「初心者向けではない」と感じる背景
ReactとTypeScriptをセットで使う開発スタイルが、今の現場ではデフォルトになっています。
JavaScriptではありません。
しかし私は「ビギナーにとってTypeScriptはハードルが高い」と感じることがあります。
理由は次に紹介する2つです。
【理由１】TypeScriptのメリットが体感しにくい
TypeScriptが使われるのは、当然なんらかのメリットがあるからです。
そして「TypeScript メリット」と調べると、こんなことが書かれています。
- アプリが堅牢になる
- 開発スピードが上がる
- エラーが減る
しかしこういうメリットは、実はビギナーには一番実感しにくいものです。
私もかつてそうでしたが、初心者のうちから「バグがないように」「エラーがないように」と意識している人はほとんどいません。
「とにかくアプリを完成させたい！」「とにかく動かしたい！」がゴールになります。
そして実際、それでいいのです。
ビギナーの優先事項は、完成させること、ひとつの教材を終えること、「ここまで自力でできた！」という達成感と「もっと知りたい！」という向上心を得ることです。
しかしTypeScriptを使っても、アプリの見た目は変わりません。
動くスピードが速くなるわけでもありません。
その一方で、書くコードの量は増え、エラーも多く発生します。
目に見えるメリットが実感しにくいのです。
【理由２】「型」はHTML・CSS開発では出てこない概念
TypeScriptは「静的型付け言語」や「型のついたJavaScript」と紹介されます。
しかし、これだけを聞いて意味をつかめる初心者はいません。
「型」という概念が、HTML・CSS開発ではまったく出てこないからです。
JavaScriptを少し使ったことがあっても、「型」を意識する機会はほとんどありません。
この「型」は、JavaやC言語など他の言語でも登場するプログラミングの基本コンセプトです。
これを意識した開発スタイルが、今のReactの潮流になっています。
TypeScriptの導入が進んでいるのは、そのためなのです。
型について少し見てみましょう（読み飛ばしてもOKです）。
たとえばJavaScriptでは、次のように書けます。
// JavaScriptの場合
let data = "Hello";
data = 123; // エラーなし
TypeScriptで同じように書くと、エラーが出ます。
// TypeScriptの場合
let data: string = "Hello";
data = 123; // エラー: string型にnumber型は代入不可
TypeScriptでは型を合致させる必要があります。
この例でエラーを消すには、たとえば次のように書けます。
let data: string = "Hello";
data = "123"; // ""を使うことで「123」はstring型に
ビギナーがTypeScriptをスムーズに学ぶ方法
商業用アプリはチームで開発するのが一般的です。
そしてTypeScriptは、このような複数の開発者が関わるチーム開発や、コード量が多い中〜大規模アプリでメリットを発揮します。
TypeScriptがReact開発現場のデフォルトになっているのは、そのためなのです。
では、大規模・チーム開発で真価を発揮するTypeScriptを、ビギナーがひとりで学ぶにはどうすればいいのでしょうか。
答えは「慣れること」です。
コード量が少ない簡単なアプリからTypeScriptを使い始めて、少しずつ慣らしていくことです。
そして徐々に規模の大きなアプリでも使っていきましょう。
なお、React自体の学習で詰まるポイントと乗り越え方については、記事の参考もしてみてください。