プロになるためのReact勉強法!!〜TypeScript編〜

フリーランスエンジニアの雄貴です!

前回React入門編として記事をまとめました!状態管理がReactの基礎でしたね!

今回はTypeScriptについてお話ししようと思います!

あわせて読みたい
プロになるためのReact勉強法!!〜入門編〜 フリーランスエンジニアの雄貴です! JavaScriptフレームワークのなかで圧倒的にシェア率の高いReact! しかし挫折率の高いフレームワークですので、現役フロントエンド...
目次

JavaScriptの欠点

データには「文字列」や「数字」など「型」があります。

本来、メソッドの引数などは型を定義してその型以外のものは渡せないようにすべきですが、動的型付言語は型チェックを実施しないのでどんな型でも引数として渡せてしまいます。

const data = 'Hello World!' 

const data2 = 10 

function method(data) {
  // 引数dataには「文字列」がくることもあるし、「数字」がくることも、「真偽値」がくることもある
  return data + 1
}

method(data)

method(data2)

JavaScriptは動的型付言語に区分されます。

「型チェックしないほうが煩わしくないからいいじゃないか!」と思われますが、これは不具合の温床になる可能性が高いのです。。

予期せぬ不具合の原因に。。

Ajaxによる非同期通信でサーバーからデータを取得する例を用いて考えてみましょう。

例えば家計簿アプリで今日の支出金額を登録する処理を実施するとしましょう。

サーバーへは「支出金額」として「数字」の型のデータを渡す必要があります。

JavaScriptでは型を動的に変化させているので、「数字」以外の型もサーバーに渡してしまう可能性があります。

もし金額を「数字」ではなく「文字列」として渡してしまうとどうなるでしょう?

DBのテーブルにはそれぞれカラムが設定されており、その型に合わない物を登録しようとする場合エラーになります。

最悪の場合はシステムエラーとなり、大きな損害につながる可能性もあります。

大規模になればなるほど収集がつかなくなる

「そんなものバリデーションさえ設定しておけば防げるじゃないか?」

そう思われるかもしれません。当然バリデーションは必ず実装すべきです。

しかし、以下のような場合はどうでしょう?

  • コンポーネントのProps
  • 関数やメソッドの引数

これらにもそれぞれバリデーションを実施すべきでしょうか?

そんなことをするとコードが冗長になり可読性が悪くなりますし、何より中規模以上のシステムだと膨大な量のソースコードになってしまいます。

テストなどで品質を担保しても、ありうるケース全て網羅することは不可能であり、このような型を定義しないことで起きる不具合はJavaScriptのみならず動的型付言語の欠点であるといえます。

TypeScriptとは?

上記のようなJavaScriptの欠点を補う形で登場したのがTypeScriptです!

TypeScriptは静的型付言語に区分され、動的型付言語と異なり、変数や引数などには明示的に型を定義する必要があります

(TypeScriptは型推論という便利な機能があるので、手動で型を定義しなくても大丈夫な場面もありますが、基本は明示的に型定義します。)

JavaScriptに型の概念がついた言語という認識で大丈夫です。

また、TypeScriptは実行時はJavaScriptとして動作します。

よって実行前にTypeScriptからJavaScriptへビルドする必要があるんですね。

このビルドする際に、型がおかしい箇所があればエラーとなりJavaScriptへビルドすることができません。

開発段階でおかしい部分を検知して防ぐことができるんですね。

TypeScript導入のメリット

不具合を事前に防ぐ

先ほど述べた通りTypeScriptの記述で不具合がある場合JavaScriptへビルドすることができず、実行することができません。

よって不具合がある場合は安易にリリースできないようになっています。

つまり以下のような場面において型に関する不具合の発生を事前に防いでくれます。

  • 非同期処理のリクエストパラメータ
  • コンポーネントのProps
  • 関数やメソッドの引数

TypeScriptを導入することによって、型に関する不具合をバリデーションなどの実装で防がなくて済むのでソースコードの量も少なくて済みます。

中規模以上のシステムにおいて導入は必須ですね!

設計書になる

TypeScriptのメリットの1つとして、設計書にもなります。

コンポーネントのPropsにどんな値でどんな型を渡すべきか?がソースコードに記載されるようになるので、後ほど修正や機能追加をする場合でも既存システムの仕様を把握することができ、デグレ発生を防ぐ役割もあります。

スタートアップやベンチャー企業など、速度優先で開発を実施している場合はドキュメントを作成する時間もあまりないので、TypeScriptを導入するメリットはかなりありますね!

TypeScriptの需要について

こちらは「Githubの言語別レポジトリ数ランキング」です。

引用:https://octoverse.github.com/

これを見るとTypeScriptのシェアが近年急速な勢いで上がってきており現在4位にまで上り詰めています。

背景としてはJavaScriptの圧倒的なシェア率による物であり、JavaScriptの欠点を補った言語なので今後ドンドン需要は上がってくるでしょう。

そもそもJavaScriptはWEBフロントのみならず、Node.jsを用いたサーバーサイドの開発や、ReactNativeを用いたモバイルアプリ開発など広範囲で活用できる言語です。

TypeScriptは誰しもが習得すべき言語ですね!

JavaScriptフレームワークとの相性

TypeScriptはJavaScriptフレームワークごとに相性があります。

具体的にはコンポーネントのHTML部分に型を定義できるか?や、ReduxやVuexなどのストアに型定義できるか?などです。

Angular, React, Vueなどのフレームワークは開発効率をあげている分、ネイティブJavaScriptの記述から離れた記述形式になっているので、完全にTypeScriptの記述で全て記載できるとは言い切れません。

ただその中でもReactとTypeScriptの相性が現状では1番良いです。

Reactを書いてみてお気づきかと思いますが、ネイティブのJavaScriptの記述方法からあまり大きく変わっていません。

AngularやVue.jsはディレクティブ構文と呼ばれるフレームワーク独自の記述方式を用いているなど、ネイティ記述形式からの少し離れていますので、完全にTypeScriptの記述で記載できない部分も多々あります。

またフロントエンドでは、テストツールにJest, Cypress, デザイン関連のツールにStorybookなどさまざまなライブラリやツールがありますが、公式チュートリアルではReactを用いて記述しているところばかりです。

学習面や使い勝手においてもReactが現状最適ですので、TypeScriptを学ぶ際はまずReactからはじめるのがいいですね!

オススメ教材

それではTypeScriptのオススメ教材を紹介いたします。

この教材を用いてインプットしていきましょう!

【Udemy】【はむ式】ハンズオンで学ぶTypeScript – JavaScript エンジニアのためのTypeScript徹底入門

TypeScriptをJavaScriptの記述を元にハンズオンで解説している教材です。

ありがたいのが動画内でJavaScriptの機能に関する解説もしてくれている点です。

JavaScriptに詳しくなくてもはじめられるし、良い復習にもなるので魅力的です。

また動画の最後にReactとTypeScriptを用いた解説動画が用意されています。

JSフレームワークであるReactを用いた内容を学べるのでオススメです!

Udemy
ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門 受講生の約6割が次に学びたいと高注目のTypeScript。Goに並ぶ人気、フロントエンド(React/Vue/Angular)やバックエンド(AWS CDKでPythonと並び採用)での存在感は、まさに非...

アウトプット

こちらの記事にて、Reactで作成したTodoリストをJavaScriptからTypeScriptに書き直してみましょう!

あわせて読みたい
プロになるためのReact勉強法!!〜入門編〜 フリーランスエンジニアの雄貴です! JavaScriptフレームワークのなかで圧倒的にシェア率の高いReact! しかし挫折率の高いフレームワークですので、現役フロントエンド...

1からTypeScriptで作り直してもらっても大丈夫です!

ただ一点注意点があり、それは以下になります。

“strict”: trueにすること!

TypeScriptをどこまで厳密に記述するか?は「tsconfig.json」というファイルで定義できます。

その際に「”strict”: true」で実施するようにしてください。

この設定をしないと型定義を実施しなくてもエラーにならないなど、TypeScript本来のメリットを殺した記述ができてしまいます。

これだとTypeScriptを導入するメリットがあまりないので、必ず上記設定をしてアウトプットするようにしてくださいね!

最後に

今回はTypeScriptの勉強法について解説いたしました!

近年日本の市場でもTypeScriptを導入している案件が急増しています。

モダンフロントの分野でTypeScriptを扱えることはデファクトスタンダードになってきていますので、今のうちから扱えるようにキャッチアップしていきましょう!

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

実践TypeScript BFFとNext.js&Nuxt.jsの型定義 [ 吉井 健文 ]
価格:3795円(税込、送料無料) (2021/5/12時点)



よかったらシェアしてね!

この記事を書いた人

雄貴のアバター 雄貴 フリーランスエンジニア

【エンジニアの単価が上がる情報を発信中】
27歳未経験からIT業界へ→経験2年半で月商80万達成
React案件で初回契約月105万を実現

エンジニアの心の相談室を毎週木曜実施中

コメント

コメントする

目次
閉じる