Windows10のPCでRuby on Railsの環境構築

この記事ではWindows10のPCでのRuby on Railsの環境構築について説明しています。

##まずは環境構築のための準備

以下の記事を参考にさせていただきました。

https://prog-8.com/docs/rails-env-win

この記事に追加して、Git、Node、Yarnのインストールについても書いています。

すでにRubyがインストールされている前提で進めていきます。
今回はruby 2.7.2がインストールされています。

```terminal
ruby -v
```

![rails-qiita.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/355279e6-40da-e335-7c43-dc2bb9037a4f.jpeg)

#SQLite3のインストール

SQLite3とはデータベースをしようするアプリケーションのひとつです。
次のリンクからアクセスしてください。

https://sqlite.org/download.html

「Precompiled Binaries for Windows」のところを見てください。
ご自身のWindowsの32bit・64bitに合わせてダウンロードをします。

![rails-qiita.002.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/5c9c50a0-8c63-94f0-4271-e530110d56cb.jpeg)

ダウンロードしたフォルダの中にある、「sqlite3.dll」というファイルを「C:¥Ruby26-x64¥bin」へコピーします。
ドラッグ&ドロップでもコピーペーストでもどちらでも大丈夫です。

![rails-qiita.003.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/516da8a5-28c9-4f7e-ad02-23b02f49c6f9.jpeg)

続いて、次のファイルもダウンロードします。

![rails-qiita.004.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/fed8c1b8-4976-b379-f3af-ba0f4c693627.jpeg)

このダウンロードしたフォルダの中にある「sqlite3.exe」というファイルも「C:¥Ruby26-x64¥bin」へコピーします。

![rails-qiita.005.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/49ab7469-1d92-b00a-b527-3469d62e58fc.jpeg)

「C:¥Ruby26-x64¥bin」のなかにSQLiteのファイルが2つコピーできました。これでSQLIteのインストールは完了です。

#Ruby on Railsのインストール

次に、いよいよRuby on Railsのインストールです。
Railsはgemなので、Powershellより「gem install」でインストールしていきます。

また今回インストールするバージョンは6.1.3なので次のようにコマンドを入力してください。

```terminal
gem install rails -v "6.1.3"
```

![rails-qiita.006.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/6193c7f8-be50-457f-a8b5-f0fdf074f06e.jpeg)

インストールが完了したか確認してみます。
次のようにコマンドを入力してみてください。

```terminal
rails -v
```
![rails-qiita.007.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/b4440fb8-4fab-3beb-3541-6571d6b458a6.jpeg)

いかがでしょうか？
これでRailsのインストールは完了です。

続いて、Railsアプリの開発を管理したり、動作させたりするために必要なアプリケーションをインストールしていきます。


#Gitのインストール

Gitは、プログラムソースなどの変更履歴を管理するバージョン管理ソフトです。

次のリンクからダウンロードしてください。

https://git-scm.com/download/

あとは写真の通り、基本的には変更を加えず「Next」で進めていただければインストールできます。

![rails-qiita.008.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/6c75d73e-eb9c-06c4-6f45-e5aa8ad1d5b4.jpeg)
![rails-qiita.009.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/48955b4e-ca11-5b4a-8333-d2874fd507b9.jpeg)
![rails-qiita.010.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/2ce67247-61ab-1261-5252-b3aa855ba584.jpeg)
![rails-qiita.011.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/65175149-0d9d-fd54-6c3c-8e9da64d57bb.jpeg)
![rails-qiita.012.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/7f7a16ba-1c63-e36f-8181-b81256364375.jpeg)
![rails-qiita.013.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/b499f21d-6ec6-d64f-d998-57f07b140637.jpeg)
![rails-qiita.014.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/3feba8b6-1e27-e006-759e-0173e7913b80.jpeg)
![rails-qiita.015.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/2f0e4eca-09e4-0b2f-8b24-bc951a466216.jpeg)
![rails-qiita.016.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/0e806f16-ed4a-f118-4fc1-42ab6abeffde.jpeg)
![rails-qiita.017.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/5e2950ce-d5c6-0849-48fb-fc2b5f7c96f1.jpeg)
![rails-qiita.018.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/42e4e2a4-5d0d-c1a2-ad59-b5b19d479503.jpeg)
![rails-qiita.019.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/e85f4aa7-d377-bdb0-161f-3c86b6f04c16.jpeg)
![rails-qiita.020.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/0b067778-a750-0fac-6b28-1669dbf0fa33.jpeg)
![rails-qiita.021.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/c6dfd73e-3e51-80cd-b4eb-95d75e0496a6.jpeg)
![rails-qiita.022.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/64ff2adb-fa9c-e3d3-72d5-a9e13b88d1c5.jpeg)
![rails-qiita.023.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/ace15f0d-5c59-6933-e599-09f9bdf25fd4.jpeg)

最後にFinishを押して終了です。

#Nodeのインストール

こちらのリンクからダウンロードをしてください。

https://nodejs.org/ja/download/

Nodeも「Next」を推し進めていけばインストールが完了します。


![rails-qiita.024.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/2050dd7c-77fc-d6dc-3427-82ca0753811e.jpeg)
![rails-qiita.025.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/4277b7bc-413b-2436-4965-da6c2a2a20cb.jpeg)
![rails-qiita.026.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/f4d9a0f7-b239-6d8a-164c-c3f1bb183ac3.jpeg)
![rails-qiita.027.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/1f2cba47-d7d4-6089-b8e5-0c04a135751a.jpeg)
![rails-qiita.028.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/d456d784-b2a9-963f-18c6-03b61b232387.jpeg)
![rails-qiita.029.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/2f995125-61b6-9407-ca38-95576d2aea23.jpeg)
![rails-qiita.030.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/3ad5640c-2a1f-c232-a240-2a47ae45b414.jpeg)
![rails-qiita.031.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/9a8fb263-fdb9-2240-3e8d-dda1757f5d4b.jpeg)

![rails-qiita.032.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/431bc9bf-3c2e-ef8c-b2db-61bfd4133b52.jpeg)

最後にコマンドプロンプトが立ち上がり、「何かキーを押してください」と出てきました。
何かキーを押して続行すれば、完了します。

![rails-qiita.033.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/8d7a8362-e0ff-f347-c6d8-d051bd913ba6.jpeg)


#Yarnのインストール

最後にYarnをインストールします。
YarnはPowershellより以下のコマンドを入力し、インストールをしてください。

```terminal
npm install --global yarn
```

![rails-qiita.034.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/7f1a4373-7940-e0dd-dbce-1dbbdb214f76.jpeg)
![rails-qiita.035.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/b9e68fc6-32f1-386c-eb0d-eb9e7fd2a61a.jpeg)

セットアップの画面が立ち上がりますので、「Next」推し進めてください。

![rails-qiita.036.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/f4bfd8e0-382c-af03-e22a-2d4aa4361a0b.jpeg)
![rails-qiita.037.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/b6eca2c3-d21c-6bf8-4cdd-3dd1c2dfcc11.jpeg)
![rails-qiita.038.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/faec74ca-8dfb-29e3-5246-7b7165aa4379.jpeg)


![rails-qiita.039.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/11c0456e-33c8-5276-a3a6-ef0daa79e1fb.jpeg)
![rails-qiita.040.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/69950f95-969e-8084-aa2e-c675f9ef32cd.jpeg)


#インストールしたものを確認

お疲れ様でした！
ここまでインストールしたものを確認しみます。

```terminal
ruby -v
#Rubyのバージョン確認
rails -v
#Railsのバージョン確認
git --version
#Gitのバージョン確認
node -v
#Nodeのバージョン確認
yarn --version
#Yarnのバージョン確認
```

![rails-qiita.041.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/8b71eef5-73af-662f-3767-ae43027bd237.jpeg)

#Railsアプリケーションを作成してみる

それではアプリケーションを作成してみましょう。
任意のフォルダに移動してください。
私の場合は「Documents」のなかに「rails-project」というフォルダを作りました。
Powershellで「rails-project」まで移動しています。

「rails-project」の中で次のコマンドを実行します。

```terminal
rails new sample-app
```

このコマンドのsample-appというのは、これから作るアプリの名前になります。

コマンドを実行すると下の写真のように、「rails-project」フォルダの中に「sample-app」というフォルダができました。
この「sample-app」というフォルダ群がアプリケーションを構成しています。

![rails-qiita.042.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/55fa81b1-8acf-4eb6-2335-f2c0a9686ba1.jpeg)

それでは最後にアプリケーションサーバーを立ち上げ、ブラウザからアクセスしてみましょう！

「sample-app」に移動します。

```terminal
cd sample-app
```

アプリのフォルダに移動したところで次のコマンドを実行します。

```teriminal
rails s
```

ちなみに「s」というのはserverの略で、serverを立ち上げるという意味です。

![rails-qiita.043.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/253ce209-acee-8380-e850-c85229584809.jpeg)

Webブラウザに移動して、「http://localhost:3000」にアクセスしてみてください。
次のような画面が表示されれば、Railsアプリの起動に成功です！

![rails-qiita.044.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553021/d9267758-ffb8-f1f1-412d-703bd2ed3ed7.jpeg)