Ruby on Rails の環境構築 for Windows10 ～ RubyMine + WSL

# はじめに
Windows10 における Ruby on Rails 開発環境の構築記事です。

RubyMine + WSL で環境構築する際、様々な記事を参考にさせていただいたのですが、
RubyMine の設定や日本語化、またアプリケーションの作成とブラウザでの確認方法まで
全てまとまっている記事ってなかったなぁと思い、記事作成に至りました。

参考になれば幸いです。

## 目次
- [ツールの紹介](#ツールの紹介)
 - [WSL とは](#wsl-とは)
 - [RubyMine とは](#rubymine-とは)
- [WSL の準備](#wsl-の準備)
 - [WSL の有効化](#wsl-の有効化)
 - [WSL のインストール](#wsl-のインストール)
 - [WSL の起動](#wsl-の起動)
 - [各種パッケージのアップデートおよびインストール](#各種パッケージのアップデートおよびインストール)
- [RubyMine の準備](#rubymine-の準備)
 - [RubyMine のインストール](#rubymine-のインストール)
 - [初回起動時の設定](#初回起動時の設定)
 - [WSL（リモート）の Ruby を読み込ませる](#wslリモートの-ruby-を読み込ませる)
 - [日本語化](#日本語化)
- [プロジェクトの作成および実行](#プロジェクトの作成および実行)
 - [プロジェクトの作成](#プロジェクトの作成)
 - [プロジェクトの実行～ブラウザでの確認](#プロジェクトの実行ブラウザでの確認)
 - [プロジェクトの編集](#プロジェクトの編集)
- [参考文献](#参考文献)

# ツールの紹介
## WSL とは
正式名称は「Windows Subsystem for Linux」。
Windows10 で Linux プログラムを利用可能にするアプリケーションです。

詳しく知りたい方はぜひ調べてみてください（当記事最下部にも参考文献を掲載していますので、ぜひ御覧ください）。

### 注意
WSL は、『Windows10 **Fall Creators Update**』以降のバージョンでのみ利用することが可能です。
「Fall Creators Update」とは、2017年秋（Fall)に Windows10 向けに提供開始された大型アップデートです。
このアップデートを導入していないと、WSL を利用することが出来ません。

### Fall Creator Update の適応状態（Windows10 のバージョン）確認方法
1. Windowsキーを押し、設定ボタンを押下する
2. 《システム》を押下する
3. 《バージョン情報》を押下する
4. 「Windows の仕様」の「バージョン」項目の数値を確認：**1709以上であればOK**

![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/2d4db23a-947e-06c2-1a58-d2289799d3c9.png)
![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/7d207c4f-08d3-3b87-7c91-c127a0710a77.png)
![3.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/9c5fd307-4f81-6ae4-40ec-64274588e8b8.png)


※アップデートの方法（Fall Creator Update の適応方法）に関しては、申し訳ございませんが本記事では触れません。
　次の記事を参考にしてみてください。
　[Windows 10 Fall Creators Updateの手順を確認してみた](https://www.pc-koubou.jp/blog/windows10fallcreators.php)

## RubyMine とは
JetBrains が提供している基本有償のIDE（統合開発環境）です。
色々と調べてみましたが、**Ruby開発のIDEの中で最も評価が高い**ように思います。

[公式ページ](https://www.jetbrains.com/ruby/)

初めの一ヶ月は無償試用出来ます。
またオープンソース開発ならば無料での利用申請が可能です。


# WSL の準備
## WSL の有効化
コントロールパネルから操作します。
![4.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/ab07248a-a5b6-3e2c-5a7b-004fcb2f4b36.png)
![5.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/2d939bc3-5254-12ba-59cd-c1a0945d3206.png)
![6.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/e28bedb8-4817-27e0-0b65-32b9664732ef.png)

## WSL のインストール
Microsoft Store からインストールします。
![7.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/7524ab8b-ef09-1053-6a99-531285cc0e16.png)
![8.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/ebf5f5ef-c1b2-760d-daea-fad9699663c6.png)
![9.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/c7d455e1-dae9-de50-0e9e-ba103cc0fb82.png)

## WSL の起動
![10.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/ae85846e-0be1-0ed1-4c5b-fda27bcaa205.png)

ターミナルが起動します。
初回起動時にはユーザ名とパスワードの設定を求められますので、入力してください。

## 各種パッケージのアップデートおよびインストール

### 初期設定
```bash:初期設定
# パッケージ情報の更新
sudo apt update
# パッケージの更新
sudo apt upgrade

# 各種開発ツールパッケージのインストール
sudo apt install -y build-essential
sudo apt-get install -y libssl-dev libreadline-dev zlib1g-dev libsqlite3-dev
```

### rbenv

まずは、Ruby の複数バージョン管理を簡単にしてくれる rbenv を導入します。

```bash:rbenvの導入
#gitからインストール（clone）する
git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build

#環境設定：PATHに設定する
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
#環境設定：.bash_profile に追加
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

#環境設定を反映する
source ~/.bash_profile
```

```bash:rbenv導入確認
rbenv --version
# → rbenv のバージョンが表示されればOK
```
### Ruby

rbenv を利用して Ruby をインストールします。

```bash:Ruby導入
# インストールできるものリストを表示
rbenv install --list
# バージョンを指定してインストール（最新の安定版とかを選べばいいと思う）
rbenv install 2.5.1
# 確認
rbenv versions
# 利用するバージョンの設定
rbenv global 2.5.1
```

WSL 側の準備は以上です。



# RubyMine の準備
## RubyMine のインストール

[JetBrainsの公式ダウンロードページ](https://www.jetbrains.com/ruby/download/#section=windows)

![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/16b88f9c-c7bf-823b-1ea0-8fb8d633007e.png)

ダウンロードしたインストーラを実行してください。

※インストールには結構時間がかかります。


## 初回起動時の設定

※**各種設定の選択は Skip することも可能です。**

![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/b4efb05e-1c7b-0333-9503-517f4f2347b2.png)

![3.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/bfe80523-e05e-130b-1832-973af5c78b2c.png)

![4.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/edbfb365-fcde-840e-523d-837089be676e.png)

![5.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/e8fe4867-1169-cece-7498-3cd2105c1139.png)

![6.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/4a776e49-75ee-279f-98be-37cfb62f93d8.png)
※ライセンスを購入する場合は「Buy RubyMine」を、すでにアカウントを持っている場合は「Activate」を選択してください。

この後、MaterialThemaなどをインストールした場合には追加の設定画面が表示されます。
設定を終えると、以下の画面が表示されます。

![7.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/9c4f9456-e7f1-315b-e664-51cef4c7716e.png)


## WSL（リモート）の Ruby を読み込ませる

RubyMine の設定から、WSL にインストール済みの Ruby を指定します。

以下の手順で設定を行います。

![8.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/39f6d108-f28d-52db-4431-6e99cbe10003.png)

![9.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/36bf1deb-dad1-935a-cf03-0567cec50cf0.png)

![10.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/e76415e1-21c4-7003-6c8b-0ec61ed68f8f.png)

![11.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/ce99ba10-61a4-4bb8-b5b6-991f03f977db.png)

![12.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/b6f8235b-cb97-3a44-2f96-210638d69ce0.png)



### ③のパス確認方法

1. WSL 上で ``` which ruby ``` と入力する
![13.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/98bffba6-a98f-abf9-a227-acf893da349f.png)


2. WSL 上で ``` ruby -v ``` と入力する
![14.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/9e7d517f-dca2-718a-793b-0b84ff666581.png)


3. ```which ruby```で出力されたパスのうち、【shims】という文字列を【versions/？？/bin】に置き換える
4. 【versions/？？/bin】の？？を、```ruby -v```で出力されたルビーのバージョン（上記の例だと 2.5.1 ）で置き換える

↓↓↓

結果：```/root/.rbenv/versions/2.5.1/bin/ruby```

![15.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/3ab20e5d-4811-66d6-e56a-adebc829c8e2.png)

![16.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/0611c7f0-2153-c9e1-ccc0-c242ea383e99.png)

![17.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/d44d9c98-0bd1-1826-c432-051e956ac452.png)

最後に「OK」ボタンを押して設定を終了すれば、完了。


## 日本語化

RubyMine はデフォルトでは全て英語表記です。
日本語化したい場合には、以下の手順で日本語化プラグインのセットアップを行います。

[Pleiades - 日本語化プラグイン](http://mergedoc.osdn.jp/#pleiades.html#PLUGIN)

![19.PNG](https://qiita-image-store.s3.amazonaws.com/0/166456/4e8d1c05-a5fd-3e3b-d464-11e79b19b8a5.png)

ダウンロードされたZIPを解凍して、中の【Setup.exe】を実行してください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/dc02e627-b336-b105-f37f-45bc6b33e7ce.png)

フォルダ参照のダイアログが表示されるので、RubyMineの実行ファイル（rubymine64.exe）を選択してください。
※私の環境では、デフォルトのインストールで【C:\Program Files\JetBrains\RubyMine 2018.2\bin】に配置されていました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/e3437b7a-0772-6f05-6d76-945acae275f2.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/765af004-3c70-d9d7-44fc-f3cd5bb03e74.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/45d4fa5d-4bdb-801c-8443-412fc0bfcc82.png)


以上でセットアップは終了です。
RubyMine を起動し、次のように日本語化されていれば正常にセットアップが完了しています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/e759b9b2-02fe-f1a0-836e-7d33c30d3b3f.png)


# プロジェクトの作成および実行

WSL 側からプロジェクトを作成し、実行します。
ブラウザでの確認はローカル側で可能です。

## プロジェクトの作成（2018/8/5 更新）

※更新内容：
　Ubuntuからコマンドを打ち込んでプロジェクト作成する方式を削除し、RubyMineから作成する方式に変更。

RubyMineを起動し、新規プロジェクトを作成します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/7f3ed665-9c56-562a-7aaa-c5ac59e8af5f.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/402240fa-0671-a7a6-e062-9f4d172445ea.png)

以上で新規のプロジェクトが作成されます。


## プロジェクトの実行～ブラウザでの確認

### プロジェクトの実行

RubyMine にて先程のプロジェクトを開き、以下のように選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/7a0e4dbb-0b0a-a9be-ff87-58468e5a6d39.png)

ターミナルが起動して、問題なければ完了と表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/0de2d56a-bc53-5708-8287-19abdd91b22b.png)



### ブラウザでの確認

ブラウザのアドレス欄に、**```localhost:3000```** と入力します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/64c4d11f-18d2-11ad-be3a-a9293863e261.png)

このようにサンプルの実行結果が表示されていれば成功です。


# 参考文献
## WSL に関して
- [Windows Subsystem for Linuxとは？ そのインストールと使い方](https://www.buildinsider.net/enterprise/wsl/01)
- [Windows Subsystem for Linuxをインストールしてみよう！](https://qiita.com/Aruneko/items/c79810b0b015bebf30bb)
- [Windows Subsystem for Linuxのファイルシステムを知る](http://ascii.jp/elem/000/001/250/1250797/)

## RubyMine に関して
- [WindowsにおけるRuby/Rails開発 2017 Winter](https://qiita.com/takeyuweb/items/ce3db31bd00ce8326a03)
- [RubyMineでremoteのrbenvで使っているgemを読みこませる](https://qiita.com/nabeen/items/ad9fb4def376c3133a7c)
- [リモートインタープリタとしてのWSLの使用](https://pleiades.io/help/ruby/using-wsl-as-a-remote-interpreter.html)

## 全般
- [Windows Subsystem for Linux + VcXsrv + RubyMine でWindowsでも快適なRails開発環境を作ろう](https://qiita.com/fukuramikake/items/283b817c16725af79a28)
- [RailsをWindows Subsystem for Linuxで動かしてみる](https://qiita.com/stkdev/items/96f507f46276c4e782c0)

## その他
- [Windows 10 Fall Creators Updateの手順を確認してみた](https://www.pc-koubou.jp/blog/windows10fallcreators.php)
- [「apt-get」はもう古い？新しい「apt」コマンドを使ったUbuntuのパッケージ管理](https://linuxfan.info/package-management-ubuntu)
- [JetBrains製品の日本語化マニュアル](https://www.willbrains.jp/page/4)
- [Bundlerの使い方](https://qiita.com/oshou/items/6283c2315dc7dd244aef)