折角ゴールデンウィークなので、日頃は中々勉強できていない事柄を勉強しようと思います。
私は仕事でWebアプリケーションを作ったことがないのですが、世の中の流れを見るとWebアプリケーションを作れないままで大丈夫なのか、少し不安があります。
そこで、Reactを概要だけでも勉強することにしました。
ただ、アウトプットなしで勉強すると知識として定着しなさそうですし、何より勉強をサボってしまいそうなので、Qiitaで記事を書きながら勉強することにしました。(この記事を書くことで、自分自身がサボれないようにしています笑)
現在の私のレベル
- Reactのコンポーネント・フックという言葉だけ見聞きした程度で、何のことかさっぱりわかっていない
- Material-UIというUIライブラリ？をGoogleが出していて、それを使えば綺麗なUIが作りやすいと聞いたことがある。
- C#, Pythonを主に仕事で使っている
- Webアプリケーションを作ったことがない
5日間のカリキュラム
こだわり
GWは他にやることもあるので、毎日 1時間 x 5日間 をReactの勉強に当てることにします。
カリキュラムの中で以下の2点はこだわることにしました。
- GitHubの1つのリポジトリをいじって学ぶ
経験上、本やWebサイトを読んだり、簡単なサンプルコードを書くだけでは、プログラミング言語を使いこなせるようになったことがありません。そこそこ複雑なコードを苦しみながら解読し、動かしていく中で、知らないうちに使いこなせるようになってきたと思います。そこで、Reactで作られたWebアプリケーションのリポジトリを一部編集して、動かしながら勉強しようと思います。
また、既存のリポジトリでそれなりにスター数があるものは、日頃Reactを使っている人が書いたコードである可能性が高いと思われます。編集する過程で、生きたコードから学びを得ようと思います。 - テストを実施する
近年、テストコードを書く重要性は益々高くなってきていると思います。少し調べると、ReactではStorybookというツールを使用してテストするようなので、StoryBookを使用したテストを実施します。
この２件の制約のもと、ChatGPTにベースとなるカリキュラムを作ってもらいました。
入力したプロンプト
Reactを習得したいと思っています。5日間で習得したいのですが、毎日のカリキュラムを作ってください。ただし、4日目は"既存のリポジトリを編集する"、5日目のカリキュラムは"storybookを使ったテストを実施する"にしたいです。カリキュラムの内容
ChatGPTの提案から一部変更しましたが、以下がカリキュラムとなります。
1日目: 基本的な概念と環境設定
目標: Reactの基本的な概念を理解し、開発環境をセットアップする。
内容:
- Reactとは何か？コンポーネントベースのアプローチについて学ぶ。
- Node.jsとnpmのインストール。
- 新しいプロジェクトを始める。
2日目: コンポーネントとステート管理
目標: コンポーネントの作成とステート管理の方法を学ぶ。
内容:
- JSXとプロップスの基本を学ぶ。
- クラスコンポーネントと関数コンポーネントの違いを理解する。
- ステートの使用方法を学ぶ。
- イベントハンドリングを学ぶ。
3日目: フックとルーティング
目標: React Hooksの使用方法とアプリケーション内のルーティングを実装する。
内容:
- フックについて学ぶ。
- useState、useEffectを使ってみる。
4日目: 既存のリポジトリを編集
目標: 学んだスキルを応用する。
内容:
- GitHubから既存のReactプロジェクトをクローンする。
- コード変更を行う。
5日目: Storybookを使用したテスト
目標: Storybookを使用してReactコンポーネントの視覚的なテストを行う。
内容:
- Storybookの基本設定とインストール方法を学ぶ。
- 既存のコンポーネントに対してStoryを作成し、異なるプロップスでのビジュアルをテストする。
最後に
本取り組みを通して、https://qiita.com/asato4931/items/98598e108d8bdc27a0f7 で作られているような、おしゃれなHPやブログを作ることを目標にしていきます。
React上級者の方へ
もし、Reactを日頃から使われている方がこの記事を読んでおられたら、アドバイスのコメントなどを頂けると非常に助かります。
React初級者の方へ
私と同じような動機で勉強を始められる方が読んでおられたら、一緒に頑張りましょう！