React + Rails初心者の歩み 〜初級編：環境構築〜

はじめに

今回取り組む前に、色々見よう見まねのコピペでタスク管理アプリとかを作っていたんです。
でもサーフィンして出てくる情報って、当然ですけどそれぞれバージョン違ったり書き方が違ったりしています。
そこで踊らされてめちゃくちゃ時間食ったりしていて、「やっぱりまずはちゃんと自分で書けるようにならんと話にならんなぁ。」と痛感しました。AI然り。
なので一から進めていきます。

環境導入

当時、特にバージョンは躓いたので、とにかく最新新鮮最強！
ということで当時最新？だったバージョン入れました。
Node 10.9.2
Rails 8.0.2
Vite 6.3.4
React 19.1.0

Rails、Reactのプロジェクト作成

まずはプロジェクトの作成。

React

ViteでReactを導入する際、色々と組み合わせ？を選択できるのですが今回は、
javascriptを選択。

npm create vite frontend --template react

Viteで導入すると、「node_modules」が自動で作成されません。
なので、以下を実行。

npm install

起動の合言葉は、

npm run dev

ひゅぅ！めんどくせー！
npm startで慣れてたんで手数が多く感じちゃいます。

Rails

APIモードで作成するには「--api」をつけるだけ。

rails new backend --api

RailsをAPIモードで作成した場合、フロントエンドとバックエンドを異なるオリジン（ドメイン・ポート）で動作させることが多いようです。
Webのセキュリティ機構で、スクリプトが読み込まれたオリジン（スキーム・ドメイン・ポート）以外のサーバーと勝手に通信できないという制限がされています。
そのため、CORSを設定し通信が安全に許可されるようにします。
By：GPTえもん

CORSが必要になる典型的なケース

・Rails API（例: http://localhost:3000）
・React フロントエンド（例: http://localhost:5173）

このように異なるオリジン間でリクエストを送ると、
ブラウザの同一オリジンポリシーにより、リクエストがブロックされる可能性があります。
By：GPTえもん

まじでAI様様です。

要は自分の子供が全然知らんおっさんとやりとりしていたら、
「そのやり取りほんとに安全？大丈夫？話聞こか？」となるので、
ちゃんと「この人安全ですよー」と教えてあげる必要がある。
ってことですかね。

君優しいやん。

CORSの設定

rack-cors

まず、フロントエンドとバックエンドのやりとりを許可するための設定をしていきます。
Gemfileに「rack-cors」がコメントアウトされているので、
コメントアウトを解除します。

gem 'rack-cors'

その後、ターミナルで以下を実行

bundle install

すると、「config/initializers/cors.rb」が自動生成されるので、
そのファイルを編集します。

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "localhost:3000",'複数可'

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

パスワードのハッシュ化

続いてなんらかのアプリを作成するならほぼ必須な、
パスワードを安全に扱うために「パスワードのハッシュ化」を行います。
Gemfileにコメントアウトされていたのでコメントアウトを解除。
なければ追加。

gem "bcrypt", "~> 3.1.7"

その後、またターミナルで以下を実行

bundle install

最後にターミナルで以下を実行し、空のデータベースを作成して終わり！

rails db:create

まとめ

作業量は少ないので、「おいおいこんなもんかよ！」とか思ってましたが、
こうやって書き記して1つ1つ解説してみると全然理解できていなかったし、
ほんとに勉強になります。

とはいえ、おいおいこんなもんかよ！な量なので、
問題集初心者編の1問目もやっちゃいます。
それはまた別の記事で。さよなら。