【ビギナー向け】TypeScriptを難しく感じる理由と、その解決法

React現場ではTypeScriptが当たり前

実際の開発現場では、ReactとTypeScriptを使うことがデフォルトになっています。

JavaScriptではありません。

しかし、これまで私が教えてきたビギナーの方々を見ていて、「TypeScriptを初心者が使うのはハードルが高い」と感じます。

次の2つの理由からです。

【理由１】 メリットがわかりにくい

JavaScriptではなくTypeScriptが使われるのは、当然なんらかのメリットがあるからです。

そこでネット記事などに目を通すと、「TypeScriptのメリット」として、次のようなことが書かれています。

• アプリが堅牢になる

• 開発スピードが上がる

• エラーが減る

etc.

ビギナー向けを謳（うた）う記事を見ても、このようなことばかり書いてあります。

しかしこういうメリットは、実はビギナーには一番理解しにくいものです。

私自身もかつてそうでしたが、ビギナーのうちから「バグがないように」や「エラーがないように」といったことを意識している人はほとんどいません。

初心者のうちは、「とにかくアプリが完成すればOK」、「とにかくアプリが動けばOK」という地点がゴール地点になります。

そして実際それでいいのです。

ビギナーにとって優先事項は、まずはとにかく完成させること・終えること、そして「ここまで自力でできた！」という達成感と、「もっと知りたい！」という向上心を得ることです。

しかしTypeScriptを使っても、アプリの見た目が良くなるわけでもなければ、アプリの動くスピードが速くなるわけでもありません。

その一方で、書くコードの量は増え、エラーの発生も多くなるため、開発に時間がかかるようになります。

目に見えるようなメリットがわかりづらいのです。

【理由２】「型」の概念に馴染みがない

TypeScriptは、「静的型付け言語」や「型（かた）のついたJavaScript」とよく紹介されます。

しかし、これだけを聞いて意味をつかめる初心者はほとんどいません。

これは「型」という概念が、HTML／CSS開発ではまったく出てこないものだからです。

またJavaScript（or jQuery）を使ったことが多少はあっても、「型」を意識する機会がほとんどないことも理由としてあります。

実はこの「型」は、JavaやC言語など他の言語でも出てくるプログラミングの基本コンセプトで、これを意識して開発していくことが今のReact開発の潮流になっています。

そのため、JavaScriptの「型」をより意識してコードを書けるTypeScriptの導入が進んでいるのです。

型について少し見てみましょう。

たとえばJavaScriptでは、次のように書けます。

// JavaScriptの場合

let data = "Hello";
data = 123;        // エラーなし

TypeScriptで同じように書くと、エラーが出ます。

// TypeScriptの場合

let data: string = "Hello";
data = 123;        // エラー: string型にnumber型は代入不可

TypeScriptでは型を合致させる必要があり、この例でエラーを消すには、たとえば次のように書けます（他にも方法はあります）。

let data: string = "Hello";
data = "123";       // ""を使うことでnumber型をstring型に変換

TypeScriptを楽に学ぶコツ

TypeScriptは、コード量が多い中〜大規模アプリ、さらに複数の開発者が関わるチーム開発時にメリットを発揮します。

商業用のアプリはチームで開発するのが一般的なので、TypeScriptが実際のReact開発現場ではデフォルトとなっているのです。

大規模アプリやチーム開発で真価を発揮するTypeScriptを、ビギナーが勉強するにはどうすればいいのでしょうか？

「慣れること」です。

コード量が少ない簡単なアプリでTypeScriptを使って、慣れていくことです。

そして徐々に、より規模の大きなアプリでもTypeScriptを使っていきましょう。

下記教本は、この「小規模アプリでTypeScript + Reactに慣れる」という点に重点をおいてあるので、参考にしてください。

はじめてつくるReactアプリ with TypeScript

【発売から4年以上読まれ続けているReact × TypeScript入門書の決定版。2025年3月改訂版発売。HTMLとCSSだけで読める本。】

1280円 → 240円

Amazonのページに移動する

▼【無料フロントエンド・ガイド】は下記ページで受け取れます。

https://monotein.com/present-for-readers