【Ruby on Rails】簡単にWindows10とVScodeで環境構築する方法 | Webエンジニア「いっしー」のブログ

動画で解説を見る

1 開発環境
2 Ruby on Railsの環境構築をするまでの手順
3 Ruby on Railsの環境構築でエラーが発生した場合
- 3.1 tzinfo-dataというエラーの対処方法
4 おわりに

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10

Ruby on Railsの環境構築をするまでの手順

Ruby on Railsの環境構築を構築するまでの手順について解説していきます。

Rubyのインストール

Ruby on Railsで開発するためには、まずRubyをインストールする必要があります。

今回はRubyInstallerと呼ばれるツールを使用してインストールを行いますので、以下のURLからRubyInstallerをダウンロードしてインストールしてください。

RubyInstaller：https://rubyinstaller.org/downloads/

今回は「WITH DEVKIT」の「Ruby+Devkit 3.2.2-1 (x86)」をインストールしていますが、お使いのOSに合わせて選択してください。

ダウンロードしたファイルを開くとインストール画面が表示されます。

画面下のチェックボックスが初期状態では下の「I decline the License」になっていますので、上の「I accept the License」を選択して、右下の「Next」ボタンをクリックしてください。

次に上記のような画面が表示されたら、そのままの状態で右下の「Install」ボタンをクリックしてください。

さらに、「Next」をクリックすると、インストールがはじまります。

最後に、「Finish」をクリックするとインストールは完了です。

次に上記のような画面が自動的に表示されますが、半角の「1,3」を入力して、「Enter」キーを押してください。

しばらくすると、上記のような画面が表示されますが、この画像の状態で「Enter」キーを押せばコマンドプロントは自動的に閉じられるかと思います。

Rubyが正しくインストールされたかを確認するためにコマンドプロントを開いて以下のコマンドを実行してください。

ruby -v

ruby -v

表示が「ruby 3.2.2 (2023-03-30 revision e51014f9c0) [i386-mingw32]」など、インストールしたバージョンが表示されれば正しくインストールされているかの確認は完了です。

SQLite3のインストール

Ruby on Railsで開発するためには、まずSQLite3をインストールする必要があります。

公式サイトのダウンロードページにアクセスしてください。

SQLite3ダウンロードページ：https://sqlite.org/download.html

お使いのOSに合わせてダウンロードするファイルを選択してダウンロードしてください。

Windows10の場合は「Precompiled Binaries for Windows」にある「sqlite-dll-win32-x86-3430200.zip」か「sqlite-dll-win64-x64-3430200.zip」のどちらかを、使用しているOSに合わせて選択してダウンロードしてください。

ダウンロードしたフォルダの中にある、「sqlite3.dll」というファイルを「C:¥Rubyxx」の中の「bin」でフォルダへへコピーします。

次に「sqlite-tools-win32-x86-3430200.zip」を選択してダウンロードしてください。

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

これでsqlite3のインストールは完了です。

RubyGemsの更新

Rubyとsqlite3をインストールしたら、RubyGems（Rubyのパッケージ管理ツール）を最新バージョンに更新します。

コマンドプロントを開いて以下のコマンドを実行してください。

gem update --system

1	gem update --system

これでRubyのパッケージ管理ツールを最新状態にすることができます。

Ruby on Railsのインストール

最後にRuby on Railsをインストールしていきます。

コマンドプロントを開いて以下のコマンドを実行してください。

gem install rails

1	gem install rails

上記のコマンドで最新場バージョンのRuby on Railsをインストールすることができますが、バージョンを指定することもできます。

gem install rails -v 7.0.4

1	gem install rails -v 7.0.4

インストールしたいバージョンに合わせて変更してください。

Railsアプリケーションの新規作成

次にRailsアプリケーションを新規作成していきます。

Visual Studio Code(VSCode)などエディターを開いて下記のコマンドを実行してください。

rails new myapp

1	rails new myapp

するとmyappというフォルダ内に様々なフォルダとファイルが自動的に作成されてRailsアプリケーションを作成することができます。

Railsアプリケーションを起動

最後にRailsアプリケーションを起動します。

Visual Studio Code(VSCode)などエディターを開いて下記のコマンドを実行してフォルダを移動ください。

cd myapp

cd myapp

次に下記のコマンドを実行してRailsアプリケーションのサーバーを起動してください。

rails server

1	rails server

以下の表示が出ていればサーバーの起動は成功です。

=> Booting Puma
=> Rails 7.0.4 application starting in development
=> Run `bin/rails server --help` for more startup options
*** SIGUSR2 not implemented, signal based restart unavailable!
*** SIGUSR1 not implemented, signal based restart unavailable!
*** SIGHUP not implemented, signal based logs reopening unavailable!
Puma starting in single mode...
* Puma version: 5.6.5 (ruby 3.1.2-p20) ("Birdie's Version")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 24732
* Listening on http://[::1]:3000
* Listening on http://127.0.0.1:3000
Use Ctrl-C to stop

=> Booting Puma

=> Rails 7.0.4 application starting in development

=> Run `bin/rails server --help` for more startup options

*** SIGUSR2 not implemented, signal based restart unavailable!

*** SIGUSR1 not implemented, signal based restart unavailable!

*** SIGHUP not implemented, signal based logs reopening unavailable!

Puma starting in single mode...

* Puma version: 5.6.5 (ruby 3.1.2-p20) ("Birdie's Version")

* Min threads: 5

* Max threads: 5

* Environment: development

* PID: 24732

* Listening on http://[::1]:3000

* Listening on http://127.0.0.1:3000

Use Ctrl-C to stop

ブラウザで「http://127.0.0.1:3000」か「http://localhost:3000」にアクセスしてください。

上記のようにRailsアプリケーションの初期画面が表示されればRuby on Railsの環境構築は完了です。

Ruby on Railsの環境構築でエラーが発生した場合

Ruby on Railsの環境構築でエラーが発生した場合の対処法を解説します。

新規アプリケーションの作成した後、Railsアプリケーションサーバーを立ち上げる際に以下のエラーが出た場合の対処法を解説します。

tzinfo-dataというエラーの対処方法

新規アプリケーションの作成した後、Railsアプリケーションのサーバーを起動した場合に下記のエラーメッセージが表示される場合があります。

C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/tzinfo-2.0.5/lib/tzinfo/data_source.rb:159:in `rescue in create_default_data_source': tzinfo-data is not present. Please add gem 'tzinfo-data' to your Gemfile and run bundle install (TZInfo::DataSourceNotFound)

1	C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/tzinfo-2.0.5/lib/tzinfo/data_source.rb:159:in `rescue in create_default_data_source': tzinfo-data is not present. Please add gem 'tzinfo-data' to your Gemfile and run bundle install (TZInfo::DataSourceNotFound)

上記のエラーはGitHubのtzinfo-dataの作者のコメントに解決方法が記載されています。
https://github.com/tzinfo/tzinfo-data/issues/12#issuecomment-279554001

上記を解説されているQiitaの記事に解決方法は4つありますが、私のOSはWindows10なため、以下を実行してエラーを解消しています。
https://qiita.com/tatama/items/3f0f5e42cb5f75b53817

▼変更前▼

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.1.2"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.4"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use sqlite3 as the database for Active Record
gem "sqlite3", "~> 1.4"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
# gem "redis", "~> 4.0"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Sass to process CSS
# gem "sassc-rails"

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem

gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]

▼変更後▼

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.1.2"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.4"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use sqlite3 as the database for Active Record
gem "sqlite3", "~> 1.4"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
# gem "redis", "~> 4.0"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data"

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Sass to process CSS
# gem "sassc-rails"

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem

gem "tzinfo-data"

gemファイルの変更後に下記のコマンドを打ち、再度バンドルをインストールします。

bundle install

1	bundle install

正常にバンドルがインストールされましたら、以下のコマンドを打ちrailsサーバーを立ち上げます。

rails server

1	rails server

トップ画面の表示が出れば新規アプリケーションの作成は完了です。

おわりに

Ruby on Railsの環境構築について解説してきましたが、いかがだったでしょうか。

Ruby on RailsはWebアプリケーション開発のための人気のあるオープンソースのフレームワークで様々なWebアプリケーション開発で利用されているため、プログラミング初心者にもおすすめのフレームワークです。

是非、Ruby on Railsで楽しく開発をしていきましょう。