なぜフロントエンドエンジニアはTypeScriptを学ぶべきなのか
はじめに
個人的な話ですが、ReactとNext.jsを実務で使って約1年が経ちました。そこで今後は、まだ実務で扱っていないTypeScriptを中心に記事を書いていこうと思います。
今回は「なぜTypeScriptを学ぶのか」「なぜTypeScriptを使うと開発効率が上がるのか」を整理していきます。
この記事の対象者
・TypeScriptを学び始めた人
・フロントエンドエンジニアを目指していて、何から学べばいいかわからない人
・なぜTypeScriptを使うと開発効率が上がるのかわからない人
フロントエンドエンジニアがTypeScriptを学んだほうがいい理由
需要があるから
まずは需要です。
米国のIEEE Spectrumの調査によると、TypeScriptは2024年時点で大きく注目されており、Jobsランキングでは昨年の11位から4位に急上昇しています。今後も需要が増すことは間違いないでしょう。
実際に国内メガベンチャーの求人を確認しても、フロントエンドエンジニアにおける必須・歓迎スキルのほとんどにTypeScriptが記載されていました。DMM、楽天、LINEヤフーなど有名企業では、経験が求められるケースが多いです。
開発効率が上がるから
需要に加え、開発効率の向上もTypeScriptを学ぶ理由です。主なポイントは以下の3つです。
コンパイルで構文エラーを検出できる
TypeScriptはコンパイル（JavaScriptへの変換）が必須です。ブラウザはJavaScriptしか解釈できないため、必ず変換されます。
この過程で構文エラーを自動的に検出してくれるため、JavaScriptでよくある「実行して初めて気づくエラー」を未然に防げます。
コンパイルで型エラーを検出できる
もう一つの大きなメリットが型エラーの検出です。
function repeatHello(count: number): string {
return "hello".repeat(count);
}
// ↓ここで型エラーが発生
console.log(repeatHello("wow"));
このコードでは、引数countがnumber型で定義されているのにstringを渡しているため、コンパイル時点でエラーになります。
一見「型エラーが増えると面倒では？」と思いがちですが、実行前にバグを潰せるため、最終的には品質が上がり、手戻りも減るので効率的です。
ドキュメントとして機能する
型を定義すると「どんな値を渡せるか」「どんな値が返るか」が明確になり、そのままドキュメント代わりになります。
大規模プロジェクトほど、コードを理解するコストは大きくなりますが、型定義があることで可読性が格段に上がります。記述は多少手間ですが、長期的には必ずプラスになる投資です。
感想
個人でTypeScript＋Next.jsを使ったときは、型定義やコンパイルエラーの多さにわずらわしさを感じ、正直メリットよりデメリットのほうが目立っていました。
しかし改めて調べてみると、プロジェクト規模や開発メンバーが増えるほどTypeScriptの恩恵は大きくなると実感しました。
現在の担当案件では、Next.jsを使った大規模開発をしていますが、TypeScriptは導入されていません。
確かにNext.js自体がBabelで構文エラーを検出してくれるため一見十分に思えます。ですが、型チェックやドキュメント化の恩恵を得られていれば、もっと効率的に開発できたのではないかと感じています。
また、TypeScriptは思っていた以上に需要が高く、ますます学ぶ意欲がわいてきました。今は書籍を読んでインプット重視の段階ですが、将来TypeScriptを使う場面が突然来ても戸惑わないように、今のうちから継続して学習に取り組んでおきたいと思います。
Discussion