構築環境情報

Win64 エディタ：VScode

Rubyをインストールする

まずは、以下サイトからRubyInstrallerをダウンロードしてRubyをインストールします

RubyInstaller
https://rubyinstaller.org/downloads/

Rubyバージョンを確認する

ruby -v
ruby 2.7.2p137

Railsをインストールする

Railsをインストールしていきます。コマンドプロンプトを開き、以下のコマンドを叩き込んでください。今回は6.0.3バージョンをインストールします。(ちなみに、バージョンを指定しないとエラーになります)

Railsをダウンロード

gem install rails -v 6.0.3

その後、きちんとダウンロードできたかどうかを以下コマンドで確認します。
バージョンが確認できるのであれば正常にダウンロードできています。

Railsのバージョンを確認する

rails -v
Rails 6.0.3

Node.jsをインストールする

Node.jsをインストールします。以下のダウンロードページから自分の環境にあったものをダウンロードして、インストールしてください。(筆者はWindowsの64bitを選択しました)

Nodeインストールページ
https://nodejs.org/ja/download/

次にNodeを正常にインストールできたかを確認します。
バージョンが確認できればOKです。

Nodeバージョンを確認

node -v
v12.18.3

yarnをインストールする

yarnを以下コマンドでインストールしていきます。

ターミナル

npm install -g yarn

以下コマンドで、yarnが正常にダウンロードされたかを確認します。
yarnのバージョンが確認できればOKです。

yarnバージョンを確認

yarn -v
1.22.4

Railsプロジェクト生成

RailsのAPIモードでプロジェクトを以下コマンドで作成します。

プロジェクトを作成する

rails new プロジェクト名 --api

Railsプロジェクトの動作確認する

Railsのプロジェクトが正常に起動するかを確認します。以下コマンドでRailsサーバーを起動して、http://localhost:3000 にアクセスし「Yay！Your're on Rails!」の画面が出ればOKです。

Reactをインストール

Reactをインストールしていきます。まずは、ディレクトリミスをすると大変面倒なので、まずコマンドを打つディレクトリを確認しておきます。現在、自分がいるディレクトリ(カレントディレクトリ)のパスを確認します。

先ほどRails newで作ったプロジェクト名が表示されていればOKです。

現在地までのPathを確認する

 pwd
C:\Users\ユーザー名\Railsプロジェクト名

また、以下コマンドで直下にあるファイルを確認します。
Rails newで作ったRailsのファイル構成が表示されていればOKです。

lsコマンドでカレントディレクトリ直下ファイルを確認

ls

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2021/04/24     21:18                app
d-----        2021/04/24     21:19                bin
d-----        2021/04/24     21:18                config
d-----        2021/04/24     21:34                db
d-----        2021/04/24     21:18                lib
d-----        2021/04/24     21:29                log
d-----        2021/04/24     21:18                public
d-----        2021/04/24     21:18                storage
d-----        2021/04/24     21:18                test
d-----        2021/04/24     21:30                tmp
d-----        2021/04/24     21:18                vendor
-a----        2021/04/24     21:18            750 .gitignore
-a----        2021/04/24     21:18             11 .ruby-version
-a----        2021/04/24     21:18            130 config.ru
-a----        2021/04/24     21:18           1212 Gemfile
-a----        2021/04/24     21:19           3736 Gemfile.lock
-a----        2021/04/24     21:18            227 Rakefile
-a----        2021/04/24     21:18            374 README.md

カレントディレクトリを確認したので、以下コマンドでReactプロジェクトを作成します。
ここではreact-frontendというプロジェクト名で実行しています。

ターミナル

npx create-react-app react-frontend
npx: 67個のパッケージを20.735秒でインストールしました。

Creating a new React app in C:\Users\プロジェクト名\react-frontend

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

#中略

Success! Created react-frontend at C:\Users\プロジェクト名\react-frontend
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd frontend
  yarn start

Happy hacking!

Reactプロジェクトの動作確認する

Reactのプロジェクトを生成できたので、その動作確認を簡単に行います。

まず、先ほど作ったReactプロジェクトで、下記コマンドへ移動します。

Reactプロジェクトに移動

cd react-frontend

移動したら、npm startでプロジェクトを起動し、http://localhost:3000/にアクセスし、「Edit src/App,js and sace to reload」の画面が出ればOKです。

プロジェクトを起動

npm start

Git導入する

Gitの導入はこちらに書いたので、こちらでご参考ください。

ざっくりGitの設定をする
https://qiita.com/GalaxyNeko/items/3000fed4220baaa582e6

記載内容に誤り等ありましたら、コメントいただけると幸いです。

参考

プロゲート https://prog-8.com/docs/rails-env-win Yarn を導入しよう（Windows） https://qiita.com/kurararara/items/21c70c4adfd3bb323412 Railsチュートリアル https://railstutorial.jp/chapters/beginning?version=6.0#cha-beginning RailsとReactでUberEats風SPAアプリケーションをつくってみよう！ https://www.techpit.jp/courses/138/curriculums/141/sections/1044/parts/4130