初心者からのReact学習ロードマップ【中】作りながら学ぶ！おすすめアプリと便利ツールまとめ

初心者からのReact学習ロードマップ【中】作りながら学ぶ！おすすめアプリと便利ツールまとめ

はじめに

この記事の目的

この記事は、初心者がReactを使って「実際に作りながら学ぶ」ことを目的としています。上編で学習した基礎を使って、アウトプット中心の学習に入っていきましょう。

上編のおさらい

• Reactは実務採用率No.1の技術
• エラーはChatGPTに頼る
• 学習期間は3ヶ月でOK

まずはこのレベルを目指そう

副業レベルのReactとは？

実務で求められる最低限のスキルは以下です。

• ボタンやフォームが作れる
• 複数ページが作れる（画面遷移）
• 外部APIからデータを取得して表示できる
• コンポーネント分割ができる

作りながら学べるおすすめアプリ例

アプリ	学べること
カウントアプリ	useState
ToDoアプリ	フォーム・リスト表示・状態管理
天気アプリ	API通信（fetch）
掲示板アプリ	画面遷移・状態管理・データの追加/削除
ポートフォリオサイト	Webページの構成・プロフィール表示

開発を爆速にする便利ツール & ライブラリ

Tailwind CSS

UIを簡単に綺麗に作れるCSSフレームワーク

React Icons

アイコンを簡単に使えるライブラリ

React Router

画面遷移（ページ切り替え）を実現

DaisyUI / Shadcn UI

UIコンポーネントが揃っているライブラリ

Vercel

アプリを無料でWeb公開できるサービス

開発の進め方のコツ

ChatGPTを最大活用

• わからないことはすぐ聞く
• エラー解決も質問OK

エラーに詰まったときの調べ方

• エラー文 + React で検索
• StackOverflowやQiitaを見る

GitHubでコード管理

• 無料で使えるソースコード管理サービス
• バージョン管理やバックアップにも便利

これができたら次のステップへ

• 自作アプリをVercelで公開
• 知人やSNSで作品をシェア
• ポートフォリオサイトにまとめる
• 案件応募の準備を始める

次回予告（下編）

• コーポレートサイトを作ってみよう
• 実案件を想定した制作ポイント
• 案件応募・実績作りの具体例