小さなアプリを作りながら学べる、TypeScript x Reactの開発の基礎

今日、フロントエンドの開発では、多くのプロジェクトがTypeScriptとReactを採用しています。2022年では、フロントエンド界隈でReactが最も人気があったという調査結果が出ています。
https://tsh.io/state-of-frontend/#which-of-the-following-libraries-would-you-like-to-learn-in-the-future

また、「昨年TypeScriptを使用しましたか」という質問に対し、 84.1% の人が「使用した」と答えました。
https://tsh.io/state-of-frontend/#over-last-year-have-you-used-typescript

Reactだけでも学習が難しいのに、そこにTypeScriptの書き方まで入ってくると、どの部分がReactの構文で、どの部分がTypeScriptの構文なのか、初学者には見分けがつきません。筆者も昔そうでした。

この教材では、検索ボックスから画像の一覧を取得するだけの簡単なアプリケーションを作ります。

そのアプリケーション開発を通して、Reactが近年どのように書き方が変わってきたのか（クラスコンポーネントから関数コンポーネント・Hooksを使った書き換え）、Reactの基本的な書き方を学びます。

最後に、アプリケーションにTypeScriptを導入し、TypeScriptの基本的な構文、TypeScriptを導入するとどのように開発が便利になるのか学びます。

この教材を1周すれば、どこまでがReactでどこからがTypeScriptなのかを理解することができ、今後の学習を加速させてくれることでしょう。

学習内容

• Reactに関する知識

  • クラスコンポーネントを使った書き方
  • 関数コンポーネントを使った書き方
  • import/exportについて
  • axiosを使った通信
  • Unsplash API の使い方
  • react-bootstrapの使い方
  • Reactフックの使い方

• TypeScriptに関する知識

  • どうして型があると良いのか
  • NULL安全の体験
  • 基本の型
  • Reactフックへの型の付け方
  • リテラル型
  • オプショナルな型の書き方

作成物のイメージ

本教材の対象者

• Reactチュートリアルがわからなかった方
• ReactのアプリにTypeScriptを導入したいが、書き方がわからない方
• これからReactとTypeScriptを学ぶ方

受講における必要条件

• HTML/CSSの基礎文法
• JavaScriptの基礎文法

学ばないこと

• HTML/CSS
• JavaScript

本教材の対応バージョン

• node v18.8.0
• npx v8.18.0
• bootstrap 4.0.0-beta
• react 18.2.0

本教材で質問対応可能なOSや環境

• Mac OS
• Chrome バージョン: 109.0.5414.87