【Windows】ゼロからReact+RailsAPI環境を爆速で構築する！！！！

<h2>構築環境情報</h2>
Win64
エディタ：VScode

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

RubyInstaller
https://rubyinstaller.org/downloads/

```terminal:Rubyバージョンを確認する
ruby -v
ruby 2.7.2p137
```

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

```terminal:Railsをダウンロード
gem install rails -v 6.0.3
```

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

```terminal:Railsのバージョンを確認する
rails -v
Rails 6.0.3
```
<h2>Node.jsをインストールする</h2>
Node.jsをインストールします。
以下のダウンロードページから自分の環境にあったものをダウンロードして、インストールしてください。(筆者はWindowsの64bitを選択しました)

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

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

```terminal:Nodeバージョンを確認
node -v
v12.18.3
```

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


```terminal:ターミナル
npm install -g yarn
```

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

```terminal:yarnバージョンを確認
yarn -v
1.22.4
```

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

```terminal:プロジェクトを作成する
rails new プロジェクト名 --api
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/73817053-4ef6-d26a-a4d5-2a8bfa8903e8.png)

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

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

```terminal:現在地までのPathを確認する
 pwd
C:\Users\ユーザー名\Railsプロジェクト名
```

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

```terminal: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というプロジェクト名で実行しています。

```terminal:ターミナル
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!
```

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

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

```terminal:Reactプロジェクトに移動
cd react-frontend
```

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

```terminal:プロジェクトを起動
npm start
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/9ed918e8-db23-4690-ee24-ac8883f077c8.png)


<h2>Git導入する</h2>
Gitの導入はこちらに書いたので、こちらでご参考ください。

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

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

<h2>参考</h2>
プロゲート
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