【『React』×『TypeScrip』入門　】家計簿アプリ作成でReactとTypeScriptの開発方法を学ぼう

Description

ReactにTypeScriptを導入する事はもはや必須になってきました。

この講座は、『初めてReactとTypeScriptで開発をする人』へ向けた講座です。

またReactとTypeScriptで作りたいアプリが思いつかない人もおすすめです。

家計簿アプリを作りながら、ReactとTypeScriptを合わせた開発法を学ぶことができます。

Reactでよく使われる関数コンポーネントに焦点を当てて開発していきます。

クラスコンポーネントは今回扱いませんが、現在のReact開発では関数コンポーネントがメインだと思います。

またバックエンドにはFireBaseのfireStoreを利用しており、フルスタック開発の手法も学ぶことができます。

家計簿アプリを作って楽しみながらReact × TypeScriptの開発方法を学びましょう

■具体的には以下の機能を作ります。

・家計簿への「登録」「削除」「編集」機能（バックエンドにはFireStoreを利用）

・カレンダー機能（FullCalendarを利用）

・金額集計機能

・グラフ表示（カテゴリごとの合計金額を表示した円グラフ＆日別の収支の割合を表示した棒グラフ）

・レスポンシブ対応

■使用技術
・FirebaseのFirestore（データベースとして利用）
・MUI（デザイン作成）

・FullCalendar（カレンダー作成）

・ReactHookForm（フォーム作成）

・Zod（フォームのバリデーションチェックに利用）

・react-chartjs-2(グラフ作成)

・DateFNS（日付操作ライブラリ）

The piggy bank in the thumbnail was designed using assets from Freepik

What You Will Learn!

• TypeScriptとReactを連携した開発方法
• ReactとTypeScriptでどうやって開発するの？が解決します。
• 関数コンポーネントでのTypeScriptの利用法
• バックエンドにFirebaseを利用したフルスタック開発方法
• MUIを使ったリッチかつレスポンシブに対応したデザイン作成方法
• 状態管理とグローバルステートの管理にContextAPIとカスタムフックを活用する方法
• React Hook FormとZodを利用したフォーム管理方法
• FullCalendarを利用したカレンダー機能の作成方法
• react-chartjs-2を利用したグラフ作成方法
• date-fnsを利用した日付操作方法

Who Should Attend!

• 初めてReactとTypeScriptを合わせた開発をする人
• 何となくTypeScriptを学んだけど、Reactでどう生かせばよいかわからない人
• バックエンドにFireStoreを利用したフルスタックなアプリを作りたい人
• Reactの開発からステップアップしたい人
• リッチな家計簿アプリを作りたい人
• MUI、React Hook Form、Zod、FullCalendar、date-fnsの使い方を知りたい人

TAKE THIS COURSE