構築環境情報
Win64 エディタ：VScodeRubyをインストールする
まずは、以下サイトから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
記載内容に誤り等ありましたら、コメントいただけると幸いです。