【『React』×『TypeScrip』入門 】家計簿アプリ作成でReactとTypeScriptの開発方法を学ぼう
『初めてReact と TypeScriptで開発する初心者必見！』バックエンドにはFireBaseのFireStoreを導入してフルスタックで開発しよう
Ratings 4.41 / 5.00
What You Will Learn!
- TypeScriptとReactを連携した開発方法
- ReactとTypeScriptでどうやって開発するの？が解決します。
- 関数コンポーネントでのTypeScriptの利用法
- バックエンドにFirebaseを利用したフルスタック開発方法
- MUIを使ったリッチかつレスポンシブに対応したデザイン作成方法
- 状態管理とグローバルステートの管理にContextAPIとカスタムフックを活用する方法
- React Hook FormとZodを利用したフォーム管理方法
- FullCalendarを利用したカレンダー機能の作成方法
- react-chartjs-2を利用したグラフ作成方法
- date-fnsを利用した日付操作方法
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
Who Should Attend!
- 初めてReactとTypeScriptを合わせた開発をする人
- 何となくTypeScriptを学んだけど、Reactでどう生かせばよいかわからない人
- バックエンドにFireStoreを利用したフルスタックなアプリを作りたい人
- Reactの開発からステップアップしたい人
- リッチな家計簿アプリを作りたい人
- MUI、React Hook Form、Zod、FullCalendar、date-fnsの使い方を知りたい人