React入門から１ヶ月でWebアプリを作った2024年Reactロードマップ
１ヶ月修行してMT4の履歴を可視化するアプリを作りました。
作ったアプリ
トップページ
トレード履歴ページ
１ヶ月で狂気的に勉強して（100時間くらい）なんとか形になりました。
今思うと遠回りした部分もあったので最短コースでReactでWebアプリを作るロードマップを考えた。
ゴールはWebアプリの開発で、エンジニアになるための勉強のためじゃなくて、Webアプリで稼ぎたい人向けです。
時短のためあらゆるものを駆使してWebアプリを作るけど、あらゆるものを使わないとアプリ完成まで死ぬほど時間かかるのでPaaSやSaaS、BaaSは絶対必要です。
1.デザインはコンポーネントライブラリを使う
デザインは時間があればあるだけ使う部分なので最初に抑えておきます。
デザインはコンポーネントライブラリを使います。
色々調べたんだけど、2024年はTailwindCSSでスタイルをするのでTailwindCSS系のライブラリから好きなのを探してください。
俺はShadcn/UIを使ってます。
2.React公式の三目並べをやる
デザインを決めたらReact公式チュートリアルの三目並べをやります。
三目並べで、コンポーネントの呼び出し方を覚えます。
3.ReactのフレームワークのDocsを全て読みながら、並行してTodoアプリ、クイズアプリを作る
Reactフレームワークを選んでください。
NextJsもしくはRemixがおすすめです。どちらも少しやってみて個人的にNextは機能が肥大しているので覚えるのに時間がかかると判断してRemixに途中で変更しました。あとビルドに時間かかるので、Remixにしました。
Remixは公式チュートリアルが雑なのでやっても理解しにくいです。RemixのDocsを片っ端から読んでいって知らない単語をすべて調べました。
ある程度Docs読んだらTodoアプリ作るといいです。
データの作成（Create）、読み出し（Read）、更新（Update）、削除（Delete）の練習でTodoアプリを作ります。
ここでデータベースの選定をするんですが色々調べた結果、俺的にSUPABASEがおすすめです。
Todoアプリをデータベースと連携させながら作るとデータの読み書きの遅延などを考える必要が出てくるのでTodoアプリだけで2個は作るといいです。
4.好きなアプリ作る
あとはレイアウトを考えたり、操作しやすいようなUIUXを考えながらアプリ作ります。
やらなかったこと
Figmaなどのデザインツール
ログイン機能の自作
データベースの構築
PrismaなどのORM
意識したこと
可能な限りChatGPT、v0を使ってAIでコードを生成しました。
デザインはたたき台としてv0で生成する
データベースのテーブルなどSQLはChatGPTに任せる
この記事が気に入ったらサポートをしてみませんか？