プロになるためのReact勉強法！！〜TypeScript編〜 2020 12/21 IT プログラミング学習 2020年12月21日2022年1月5日 URLをコピーしました！ フリーランスエンジニアの雄貴です！ 前回React入門編として記事をまとめました！状態管理がReactの基礎でしたね！ 今回はTypeScriptについてお話ししようと思います！ あわせて読みたい プロになるためのReact勉強法！！〜入門編〜 フリーランスエンジニアの雄貴です！ JavaScriptフレームワークのなかで圧倒的にシェア率の高いReact! しかし挫折率の高いフレームワークですので、現役フロントエンド... Youtubeではエンジニアの単価が上がる情報発信しています！ 毎週木曜日の21時から、ライブ配信やってますので、気軽にお越しください😁 </noscript><iframe width="560" height="315" data-src="https://www.youtube.com/embed/mG1EKhbU3LM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="lazyload" > 目次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のシェアが近年急速な勢いで上がってきており現在４位にまで上り詰めています。 背景としては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 JavaScriptエンジニアのためのハンズオンで学ぶTypeScript徹底入門 2024年最新版 受講生の約6割が次に学びたいと高注目のTypeScript。Goに並ぶ人気、フロントエンド開発やバックエンド開発、そしてインフラ構築の全てで活用されるTypeScriptの費用対効果... アウトプット こちらの記事にて、Reactで作成したTodoリストをJavaScriptからTypeScriptに書き直してみましょう！ あわせて読みたい プロになるためのReact勉強法！！〜入門編〜 フリーランスエンジニアの雄貴です！ JavaScriptフレームワークのなかで圧倒的にシェア率の高いReact! しかし挫折率の高いフレームワークですので、現役フロントエンド... 1からTypeScriptで作り直してもらっても大丈夫です！ ただ一点注意点があり、それは以下になります。 “strict”: trueにすること！ TypeScriptをどこまで厳密に記述するか？は「tsconfig.json」というファイルで定義できます。 その際に「”strict”: true」で実施するようにしてください。 この設定をしないと型定義を実施しなくてもエラーにならないなど、TypeScript本来のメリットを殺した記述ができてしまいます。 これだとTypeScriptを導入するメリットがあまりないので、必ず上記設定をしてアウトプットするようにしてくださいね！ 最後に 今回はTypeScriptの勉強法について解説いたしました！ 近年日本の市場でもTypeScriptを導入している案件が急増しています。 モダンフロントの分野でTypeScriptを扱えることはデファクトスタンダードになってきていますので、今のうちから扱えるようにキャッチアップしていきましょう！ Youtubeではエンジニアの単価が上がる情報発信しています！ 毎週木曜日の21時から、ライブ配信やってますので、気軽にお越しください😁 </noscript><iframe width="560" height="315" data-src="https://www.youtube.com/embed/mG1EKhbU3LM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="lazyload" > ーーーーーーーーーーーーーーーーーーーー 僕は月商にして120万円を稼いでいますが、 エンジニアで月100万以上稼いでいるというと、 怪しいですよね。 お前は元々仕事できた、才能やセンスがあったんだろ？ともよく言われます。 ですが僕は最初からプログラミングが得意だったわけでもなければ、 仕事が得意だったわけでも 交渉や戦略も得意だったわけではありません。 そんな僕でも自信を得ることができて エンジニアとして月100万以上頂ける程 実力をつけることができました。 経済的にも精神的にも豊かになってます。 結局正しい方向で努力するだけなんですよね。 誰だって稼げますし。 正しい方向で学べば誰でも自信を持って エンジニアとして稼ぐことができる 僕雄貴がポンコツエンジニアから、月120万を稼げるようになった過程を下記の記事では公開しています。 >未経験から月商120万になれた雄貴の行動理念 ーーーーーーーーーーーーーーーーーーーー 【下記画像をクリックして、エンジニアのロードマップをGET！！】 >>詳細が気になる方はこちらをクリック<< IT プログラミング学習 よかったらシェアしてね！ URLをコピーしました！ URLをコピーしました！ プロになるためのReact勉強法！！〜入門編〜 2020年の振り返りと2021年の抱負 この記事を書いた人 雄貴 フリーランスエンジニア 【エンジニアの単価が上がる情報を発信中】 27歳未経験からIT業界へ→経験2年半で月商80万達成 React案件で初回契約月105万を実現 この著者の記事一覧へ 関連記事 未経験エンジニアが1年半で年収1000万円を達成するキャリアプラン 2024年2月18日 一生懸命やってるけど、成果が出ない人が見落としがちなポイント 2024年1月15日 伸び悩んでるならまず学ぼう。世の中知ってるだけで一瞬で解決できる問題が多すぎる 2024年1月4日 今年こそは変わりたい人へ～見違えるくらい変わる目標達成のために重要なこと～ 2024年1月2日 独学でエンジニアとして稼げる人の特徴。自力でできる人とできない人の差はなんなのか？ 2023年12月30日 【成功者インタビュー②】4ヶ月で月収40万円アップさせたエンジニア。〜ブラック企業から抜け出せなかったエンジニアが、経験３年でなぜ月収100万円を超えられたのか？〜 2023年12月30日 【成功者インタビュー①】月収105万円達成したエンジニア 〜月収20万円のオペレーターが0から2年半で月100万越えになぜなれたのか？〜 2023年12月22日 2日で単価が20万上がる人と、数年やっても5万円しか上がらない人の違い 2023年10月6日 コメント コメントする コメントをキャンセルコメント ※ 名前 ※ メール ※ サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。 Δ
コメント