Go to Qiita Advent Calendar 2024 Top
LoginSignup

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 1 year has passed since last update.

@portfoliokns3

Windows10でRuby・Railsのための開発環境を構築する手順

Posted at

手順

  1. VSCODEをインストールする
  2. 拡張機能をVSCodeにインストールする
  3. WSL上でUbuntuをインストールする
  4. Ubuntu上で環境を構築する

Visual Studio Codeをインストール

以下のサイトから、Visual Studio Codeをインストールします。
https://code.visualstudio.com/
私の場合は、Windows10の64ビットを使用しているので、画像の赤枠の箇所からインストーラーをダウンロードしています。
image.png

  1. ダウンロードしたインストーラーを起動し、インストールを行っていきます。
    image.png
  2. 使用許諾契約書を読み、同意するにチェックを入れ、セットアップの準備を開始します。
    image.png
  3. インストール先の指定を設定します。基本的にはデフォルトの設定で問題ありませんが、もし指定先を変更したい場合は、参照から指定先を変更してください。なおインストールする場合、ディスクに空き容量が必要となります。
    image.png
  4. スタートメニューを設定します。基本的にはデフォルトの設定で問題ありません。
    image.png
  5. 追加タスクを選択します。基本的にはデフォルトの設定で問題ありませんが、私は「デスクトップ上にアイコンを作成する」にチェックを入れています。
    image.png
  6. 設定した内容を確認し、インストールを開始します。
    image.png
  7. インストールが完了するまで、しばらく待ちます。
    image.png
  8. インストールが完了したら、完了ボタンを押し、Visual Studio Codeを実行してください。
    image.png
  9. Visual Studio Codeが起動したら、インストールが完了となります。
    image.png

拡張機能のインストール

  • 日本語のパッケージをインストール
    左のアイコンメニューにある四角のアイコンをクリックし、日本語パッケージをインストールします。検索で[japanese]と検索すれば、パッケージが見つかります。
    image.png
    インストールすると、言語を変更するために再起動を求められますので、再起動してください。
    image.png
    再起動後、日本語が適応されていれば、拡張機能の導入が完了となります。
    image.png

  • Rubyのパッケージをインストール
    [Ruby]と検索し、Rubyをインストールします。
    image.png

  • 全角スペースのチェックパッケージをインストール
    [zenkaku]と検索し、zenkakuをインストールします。
    image.png

  • コードスペルチェックのパッケージをインストールします。
    [code spell]と検索し、Code Spell Chekcerをインストールします
    image.png

  • インデントレインボーのパッケージをインストールします。
    [indent-rainbow]と検索し、indent-rainbowをインストールします。
    image.png

  • endwiseをインストールします。
    [endwise]と検索し、endwiseをインストールします。
    image.png

  • その他
    他にも便利な拡張機能をインストールすれば、開発効率が上がるので、必要に応じてインストールしてください。
    例.
    Auto Rename Tag
    erb
    Rainbow End など

WSL上からUbuntuをインストール

WSLとは、"Windows Subsystem for Linux" の略で、WindowsからLinuxを利用するためのツールになります。

１. PowerShellを起動します。
image.png
※私のPowerShellはプロパティを変更しているため、画面が緑になっています。デフォルトでは濃い青色になります。
image.png

２. WSLを最新の状態にします。

wsl --update

image.png

３. WSLの状態を確認します。

wsl --status

image.png
WSLの状態を確認すると、「WSL2は、現在のマシン構成ではサポートされていません」という注意事項が表示されている場合、対応が必要になります。この注意事項が解決されていないと、この後の環境構築に失敗します。私はこのメッセージを無視して、先に進めたことが原因で、Ubuntuをアンインストールするなど、面倒な手続きを踏むことになってしまいました。

主に、以下の対応が必要となります。

  • BIOSで仮想化を有効化する ※BIOSの設定は最新の注意を払って、操作してください。
  • Windowsの機能で、仮想マシン プラットフォームを有効化する

【仮想化が有効化されているかどうかの確認】
タスクマネージャーを開き、パフォーマンスタブから仮想化の項目を確認してください。有効となっていない場合、BIOS設定から設定を見直してください。BIOSでの設定方法は、PCのメーカーによって異なるため、ここでは記載していません。
image.png
【仮想マシン プラットフォームの有効化】
Windowsの機能から、"仮想マシン プラットフォーム"にチェックを入れて、適応してください。
image.png

上記対応をすることで、注意事項が表示されなくなり、WSLが扱えるようになります。
image.png

４. Ubuntuをインストールします。

wsl --install Ubuntu

インストールすると、ユーザーIDとパスワードの入力が求められます。
image.png
IDとパスワードを入力し、次に進みます。※IDとパスワードは忘れないように管理する必要があります。
image.png
ユーザーID、パスワードを入力することで、Ubuntuを使用することができるようになります。
image.png

Ubuntu上から各種環境を構築

Ubuntuを起動します。
Windows上で、"Ubuntu"と検索するとアプリケーションが選択できます。
image.png

image.png

環境を構築のツールをインストール

環境を構築するため、以下のコマンドを実行し、Linux上で使用するツールをインストールしていきます。

sudo apt update && sudo apt upgrade

image.png
"Y"を選択します。
image.png

sudo apt install -y autoconf bison patch build-essential rustc libssl-dev libyaml-dev libreadline-dev zlib1g-dev libgmp-dev libncurses5-dev libffi-dev libgdbm6 libgdbm-dev libdb-dev uuid-dev make

image.png

Homebrewをインストール

Homebrewとは、macOS用のパッケージ管理システムになります。

以下のコマンドを一つずつ、実行していきます。※実行完了まで長時間かかる可能性があります。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"' >> ~/.profile
eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"
brew install gcc ruby-build

正しくインストールができたかを確認します。

brew -v

image.png

rbenvをインストール

rbenvとは、Rubyのバージョン管理ツールになります。

以下のコマンドを一つずつ、実行していきます。※実行完了まで長時間かかる可能性があります。

brew install rbenv
echo 'eval "$(rbenv init -)"' >> ~/.profile
eval "$(rbenv init -)"

image.png

Rubyをインストール

以下のコマンドを一つずつ、実行していきます。※実行完了まで長時間かかる可能性があります。

rbenv install 2.6.5
rbenv global 2.6.5

正しくインストールができたかを確認します。

ruby -v

image.png

Railsをインストール

以下のコマンドを一つずつ、実行していきます。※実行完了まで長時間かかる可能性があります。

gem install nokogiri --version=1.13.10

image.png

gem install rails --version=6.0.0

image.png

gem install bundler --version=2.1.4

image.png

Node.jsとyarnをインストール

以下のコマンドを一つずつ、実行していきます。※実行完了まで長時間かかる可能性があります。

brew install node@14 yarn
echo 'export PATH="/home/linuxbrew/.linuxbrew/opt/node@14/bin:$PATH"' >> ~/.profile
source ~/.profile

image.png
正しくインストールができたかを確認します。

node -v

MySQLをインストール

以下のコマンドを一つずつ、実行していきます。※実行完了まで長時間かかる可能性があります。

brew install mysql@5.7
echo 'export PATH="/home/linuxbrew/.linuxbrew/opt/mysql@5.7/bin:$PATH"' >> ~/.profile
sudo nano /etc/wsl.conf

以下を書き込む。

[boot]
systemd=true

image.png

以下のコマンドで再起動し、状態を確認します。

wsl.exe -t Ubuntu
brew services start mysql@5.7
mysql.server status

image.png

注意事項

  • この記事では、環境構築に関しての記事を記載しています。使用しているPCのメーカーや設定によって、正しく構築できない場合があるかもしれません。

この記事は誰向けの記事か？

  • Windows環境でRubyやRuby on Railsを使用したい人

環境

  • OS：Windows10
  • メーカー：DELL
  • システムの種類：64ビットオペレーティングシステム

本記事における注意事項

  • 本記事は、備忘録としてまとめたものになります。
  • 他の方の参考になる可能性も踏まえて、一般公開も行なっております。
  • また記載内容はすべて、正しい内容が記載されているとは限りません。
  • 誤った内容を見つけた場合は、ご指摘をお願いいたします。
  • この記事の内容を実施するにあたり、一部、ChatGPTを活用しております。
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?