ReactとRailsを組み合わせてアプリを動かす方法が全然わからんかった時の話

プログラミングを学習し始めて3ヶ月と10日くらいの人です。
初心者が何をわからないのか、記録的な意味で書きます。

これまではRailsで一通りMVCを用いたアプリ開発レッスンと、Reactを用いたマークアップやら非同期処理についてのカリキュラムを触りました。

で、ずっと地味に疑問に思っていたことがあります。

疑問だったこと

Reactはフロントエンドを構築するJavaScriptのライブラリだから、create-react-appで作ったアプリではDBに対してCRUDの操作をすることができないのでは？
つまり、Reactはあくまでもページを描画するためのものであって、データを生成したり保存したり読み出したり消したり、できないよね？と思っていました。

そして実際、その考え方自体は正しかったと言えそうです。

ミニアプリ開発でAPIを学ぶ

APIって、「TwitterAPI」とかでたまに聞く言葉ではありました。
実際、現職（非IT）でもAPIという言葉を聞くことはあって、
それは「他社のサービスに対して適切なリクエストを送ることで、その会社が用意したUIを使わずにサービスを利用できる」
といった意味合いで使っています。

つまり、僕の中ではAPIというのは「ある会社が、外部に向けて利用可能にするもの」というイメージでした。
なので、自分のアプリ同士で連携するAPIという認識ではなかったのです。

今回、Zennでミニアプリを作るコースに課金して、小さなSPA（シングルページアプリケーション）を作ってみました。

やってみたのは以下の教材です。

Rails+React（SPA）TODOアプリチュートリアル【0から学ぶ】

取り組んだことの概要

ざっくりいうと、やったことは以下。

1. rails new アプリ名 --api　を使って、APIモードでRails Appを作る

2. create-react-appを使って、フロントエンドを作るReact Appを作る

   1. このとき、ToDoの名前や「完了」のパラメータを持てるようにDB設計を書く

   2. APIモードなので、Viewは使わない

3. デフォルトではlocalhost:3000で起動してしまうので、APIの方を3010のポートにする（3001とかでもいいのかな？）

4. フロントだけで、ダミーデータを用いてToDoリストを作る。追加機能や削除機能を作っていく。

5. サーバーサイドで、データのCRUDができるように記述する

6. サーバーサイドからparamsを渡せるように、axiosライブラリでgetメソッドを使う

7. サーバーサイドとフロントエンドのAppを両方起動して、フロントエンドから操作する

本当にざっくり。
でも、結構本当に最小限のアプリの作り方を教えてもらえるので、生成AIやらググるなりをして機能を追加していくことができそうです。

まとめ

APIについてなにも知らない初学者が、手元でサーバー2つ立ち上げてアプリを動かした話でした。
おそらく、数日もすると「そんなん常識やでぇ」みたいな頭になるので、今のうちに書いておくことにしました。

ひとまず、これからミニアプリをいじくり回していろいろリッチにしたいなぁと思っています。

簡単ですが、今日はここまで。
最後までお読みいただきありがとうございました。