Next.jsで学ぶReact講座(完全初心者向け・30日)演習問題・課題 | 第5章:仕上げ – 振り返り

React Next.js
スポンサーリンク

この課題のねらい

ここは「学びをちゃんと自分のものにする」ための仕上げです。
コードを書くことでもう一段うまくなりますが、振り返って言葉にすることでしか伸びない力もあります。

自分が「何ができるようになったのか」を言語化する
「次にどこへ向かいたいか」をざっくりでもいいから描いてみる

この2つをやると、ただの「入門講座を終えた人」から、「自分の軸を持って進める人」に変わっていきます。


必須課題① できるようになったことを5つ書く

なぜ「5つ」なのか

1つや2つだと、「まあこれくらいかな」で終わってしまいます。
5つ書こうとすると、自分が思っている以上にいろいろできるようになっていることに気づきやすいんです。

ポイントは、「すごいこと」じゃなくていいということ。
むしろ、「一見小さく見えるけど、自分にとっては前に進んだこと」を拾ってほしい。

例:Next.js × React 入門を終えた人の「できるようになったこと」

たとえば、こんな感じで書けます。

1. ページとルーティングの基本が分かった

app ディレクトリに page.tsx を置くと、それが1ページになる」という Next.js の基本ルールが分かり、
/about/posts/[id] のようなパスとファイル構成を、自分で設計して作れるようになった。

2. コンポーネントとpropsで画面を分割できるようになった

画面を「ヘッダー」「一覧」「フォーム」などのコンポーネントに分けて、
親から子へ props を渡しながら、役割ごとにコードを整理できるようになった。

3. useStateとuseEffectで状態と副作用を扱えるようになった

useState でフォーム入力や TODO の配列などの状態を管理し、
useEffect で初回表示時のデータ取得や、state 変更に応じた処理を実装できるようになった。

4. fetchでAPIからデータを取り、ローディング・エラー表示まで書けるようになった

fetch を使って外部 API からデータを取得し、
isLoadingerror の state を使って、「読み込み中」「失敗」「成功」の3パターンを画面に表現できるようになった。

5. TypeScriptでpropsやstateに型をつけられるようになった

コンポーネントの props に typeinterface で型を定義し、
useState<T> のように state にも型をつけて、「この値には何が入るのか」をコードで表現できるようになった。

こんなふうに、「技術名+自分ができること」をセットで書いていくと、
自分の成長がかなり具体的に見えてきます。

自分で書くときのコツ

いきなり5つ思いつかなくても大丈夫です。
次のような切り口で思い出してみてください。

画面まわりでできるようになったこと
データ取得まわりでできるようになったこと
フォーム・入力まわりでできるようになったこと
TypeScript でできるようになったこと
デバッグや設計でできるようになったこと

それぞれから1つずつ拾っていくと、自然と5つに届きます。


挑戦課題 次に作りたいアプリ案を考える

「次の一歩」を自分で決める

ここまで来たあなたは、もう「チュートリアルの中だけの人」ではありません。
せっかくなら、この勢いのまま「自分のためのアプリ」を一つ決めてしまいましょう。

大事なのは、完璧なアイデアじゃなくていいということです。
むしろ、「今の自分でもギリギリ作れそうで、ちょっとだけ背伸びになるもの」がちょうどいい。

例:次に作るアプリ案の書き方

たとえば、こんな感じで文章にしてみます。

次に作りたいのは、「日々の気分と一言メモを記録するムードトラッカーアプリ」。
毎日、気分(5段階)と一言コメントを登録できて、カレンダー形式か一覧で振り返れるようにしたい。
将来的には、「この1週間の平均気分」や「よく出てくる単語」なども簡単に見られるようにしたい。

もう一つ別の例だと、

「学習したチュートリアルや記事をストックしておく学習リンク集アプリ」を作りたい。
タイトル・URL・カテゴリ・メモを登録しておいて、カテゴリごとにフィルタして見られるようにする。
余裕があれば、検索機能や「お気に入り」フラグもつけたい。

こんなふうに、

どんな人が
どんな場面で
何のために使うアプリか

を一言で書いてみると、ゴールがかなりクリアになります。

「今の自分の技術」でどう組めそうかをざっくり考える

次に、そのアプリを「今の自分の技術」でどう組めそうかをイメージしてみてください。

ページ構成はどうするか(トップ+詳細? 一覧だけ?)
必要な state は何か(配列? フォーム入力? フィルタ条件?)
API を使うか、まずはローカル state だけでやるか

ここまで考えられたら、もうそれは立派な「次のプロジェクトの設計の入り口」です。


まとめ:振り返りでつかんでほしいこと

この課題で一番大事なのは、「自分の成長と次の一歩を、自分の言葉で持つこと」です。

できるようになったことを5つ書くことで、「あ、自分ここまで来たんだ」とちゃんと認識する。
次に作りたいアプリ案を考えることで、「この学びをどこに繋げるか」を自分で決める。

タイトルとURLをコピーしました