Ruby on Railsでアプリケーション作成の準備をしよう

はじめに

リンクをコピーしました

この記事では「Ruby on Rails」でアプリケーションを作成する準備について説明します。 記事を読みながら実際に手を動かして、Cloud9にアプリケーションを準備していきましょう！

• 「Ruby on Rails」でCloud9にアプリケーションの基本セットアップを完了する
• アプリケーションのデフォルトページをWebブラウザで表示する
• 可視化ツールを導入し、Webブラウザでデータベースのデータ操作を可能にする

• AWS Cloud9の導入
• ターミナル操作に関する基礎知識（Cloud9のターミナルの使い方 を完了していれば十分です）

「Ruby on Rails」でアプリケーションを作成する準備をして、以下のデフォルトページをWebブラウザで表示するところまで行います。

Railsアプリケーションのデフォルトページ

またデータを可視化できるツールの導入も行います。導入後は、データベースのデータをWebブラウザから操作できるようになります。

phpMyAdminのログイン後の画面

1.Railsアプリケーションの作成準備

リンクをコピーしました

Railsでアプリケーションを作成するには、まず雛形となる多数のフォルダやファイルを用意する必要があります。これらはrails newというコマンドを利用することで自動的に生成することができます。

rails new コマンドの使い方

リンクをコピーしました

rails newコマンドは、以下のようにターミナルでrails newの後に半角スペースを１つあけてアプリケーション名を指定します。

1
rails new アプリケーション名

上記を実行すると、カレントディレクトリ配下にRailsアプリケーションの土台となるフォルダやファイルを自動で生成してくれるので、開発効率が大幅にアップします。

他にもオプションを利用することで、「Railsのバージョン」や「データベース」などを指定して雛形を作成することができます。

1
rails _バージョン_ new アプリケーション名 # このコマンドは実行しないでください

1
rails new アプリケーション名 -d データベース名 # このコマンドは実行しないでください

今回は雛形を作成する際に「Railsのバージョン」と「データベース」のどちらも指定するので、以下のようにターミナルに入力します。

1
rails _バージョン_ new アプリケーション名 -d データベース名 # このコマンドは実行しないでください

rails newコマンドを実行する

リンクをコピーしました

それでは実際にCloud9のIDEを開き、rails newコマンドでRailsアプリケーションの雛形を作成してみましょう。

まずはCloud9のターミナルを開いて、カレントディレクトリが「environment」であることを確認しましょう。

Cloud9のターミナル（※画像は最大化してます。）

もしカレントディレクトリの表記が~/environmentではない方がいれば、以下のコマンドを必ず実行しておきましょう。

1
cd ~/environment

Rubyのバージョンが「2.7.5」であることを確認するため、以下のようにターミナルでruby -vを実行しましょう。

1
ruby -v

Cloud9のターミナル（rubyのバージョンが2.7.5）

もし表示されたRubyのバージョンが2.7.5ではない場合、Rubyのインストールやデフォルト設定がうまくいっていない可能性があります。その場合、「Rubyを用意しよう」の記事を再確認してください。

Railsアプリケーションの雛形を作成する際にRailsのバージョンを6.1.3.1、アプリケーション名をemployee_management、データベースをMariaDB※1に指定します。

以下のコマンドをターミナルで実行しましょう。
※1. -d mysqlと指定していますが、互換性の高いMySQLのコマンドを利用してMariaDBに接続します。

1
rails _6.1.3.1_ new employee_management -d mysql

以下のように少し時間がかかるので待ちましょう。

Cloud9のターミナル（Railsアプリケーションの雛形を生成中）

ターミナルにプロンプトが表示されたら、雛形の自動生成は完了です。

Cloud9のターミナル（Railsアプリケーションの雛形生成を完了）

自動生成されたものを確認する

リンクをコピーしました

rails newコマンドが無事に完了すると、カレントディレクトリ配下にrails newコマンドで指定したアプリケーション名のフォルダが作成されます。

今回は~/environmentでアプリケーション名をemployee_managementに指定してrails newコマンドを実行しました。

Cloud9のターミナル（アプリケーション名の確認）

そのため、以下のようにカレントディレクトリのenvironment（pikawaka）配下にemployee_managementのフォルダが作成されていることが確認できます。

employee_managementのフォルダの中身は、以下のようなディレクトリ構造となっています。

このディレクトリ構造は多くのRailsアプリケーションに共通しているので、他の開発者のコードでも挙動を一定程度予想することが容易になり、チーム内で効率的なコミュニケーション、品質を安定させることができます。

たくさんのフォルダやファイルが存在しますが、主に利用する基本的なものを挙げます。

2.指定バージョンのGemを準備

リンクをコピーしました

Gemとは、Ruby言語用の外部ライブラリのことです。

今回はGemの依存関係に起因するエラーを防ぐため、デフォルトのGemのバージョンではなく、特定の固定されたバージョンのGemをアプリケーションにインストールします。Gemのインストールでは、Gemfileとbundle installコマンドを使用します。

Gemのインストール方法

リンクをコピーしました

Gemをインストールするには、まずGemfileにGemを記述し、次にbundle installコマンドを実行します。これにより、記述したGemをインストールできます。

Gemfileには、以下のようにgemの後に半角スペースを１つ開け、Gemの名前をダブルクォーテーション（"）またはシングルクォーテーション（'）で囲んで記述します。

1
gem 'Gem名' # 説明用

Gemのバージョンを指定する場合は、以下のように記述します。

1
gem 'Gem名', 'バージョン' # 説明用

そして、ターミナルでbundle installコマンドを実行することで、Gemfileに記載されたGemをBundlerを通してインストールすることができます。

1
bundle install # このコマンドは実行しないでください

Gemをインストールする

リンクをコピーしました

それでは実際に手を動かし、デフォルトではない固定バージョンのGemをアプリケーションにインストールしてみましょう。

まずは、「employee_management」直下にある「Gemfile」をダブルクリックして、テキストエディタを開いてください。

Cloud9のメニューバー

以下の動画に示されているように、右側のテキストエディタで「Gemfile」が開かれていれば、完了となります。

Cloud9のテキストエディタ（Gemfileを開く）

次に、Gemfileの内容をデフォルトではなく、カリキュラムで使用する固定バージョンのGemに全て置き換えます。

デフォルトでのGemfileの内容を全て削除し、以下の内容にコピー&ペーストしてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.7.5'

gem 'rails', '~> 6.1.3', '>= 6.1.3.1'
gem 'mysql2', '0.5.3'
gem 'puma', '5.5.2'
gem 'sass-rails', '6.0.0'
gem 'webpacker', '5.4.3'
gem 'turbolinks', '5.2.1'
gem 'jbuilder', '2.11.5'
gem 'bootsnap', '1.10.1', require: false
gem 'net-http'

group :development, :test do
  gem 'byebug', '11.1.3'
end

group :development do
  gem 'web-console', '4.2.0'
  gem 'rack-mini-profiler', '2.3.3'
  gem 'listen', '3.7.1'
  gem 'spring', '3.1.1'
end

group :test do
  gem 'capybara', '3.36.0'
  gem 'selenium-webdriver', '4.1.0'
  gem 'webdrivers', '5.0.0'
end

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

動画に示されているように内容を置き換えられたら、完了です。

Cloud9のテキストエディタ（固定バージョンのGemに置き換える）

カレントディレクトリをemployee_managementに変更します。
まずはターミナルでlsコマンド（ファイルやディレクトリの一覧表示）を実行しましょう。

1
ls

「environment」の直下にある「employee_management」が画像のように表示されます。

Cloud9のターミナル（ファイルやディレクトリの一覧表示）

次にcdコマンド（カレントディレクトリの変更）を使用して、employee_managementに移動します。以下のコマンドをターミナルで実行しましょう。

1
cd employee_management

画像と同じようにemployee_managementに変更されているはずです。

Cloud9のターミナル（カレントディレクトリを変更）

pwdコマンド（カレントディレクトリの絶対パスを表示）でも確かめてみましょう。
以下のコマンドをターミナルで実行しましょう。

1
pwd

絶対パスが画像のように表示されていれば、カレントディレクトリの変更完了です。

Cloud9のターミナル（カレントディレクトリのフルパスを表示）

最後にGemfileに記述した固定バージョンのGemをbundle installコマンドでインストールしましょう。

カレントディレクトリが「employee_management」になっていることを確認し、ターミナルで以下のコマンドを実行しましょう。

1
bundle install

Cloud9のターミナル（bundle installを実行）

以下のように「Bundle complete!」 というメッセージが表示され、その後にプロンプトが現れたら、Gemのインストールが完了したことを意味します。

Cloud9のターミナル（Gemのインストールが完了）

カレントディレクトリが「employee_management」になっていることを確認し、ターミナルで以下のコマンドを実行しましょう。

1
yarn add @babel/plugin-proposal-private-property-in-object @babel/plugin-proposal-private-methods  @babel/plugin-proposal-class-properties

3.データベースの準備

リンクをコピーしました

Webアプリケーションを作るためには、データの保存先としてデータベースが必要です。

データベースとは、システムやユーザーが扱うデータを１つの場所に集めたものです。データベースでは、アプリケーションで作成されたデータを保存・蓄積し、必要なデータをすぐに取り出せるように整理しています。

Twitterのツイートでは、データベースに保存されたツイートが必要に応じて取り出され、HTMLの部品として取り扱われています。

Railsでのデータベース作成方法

リンクをコピーしました

Ruby on Railsでデータベースを作成するには、database.ymlとrails db:createコマンドを使用します。

database.ymlは、Railsアプリケーションで非常に重要な役割を果たすファイルです。このファイルは、Railsアプリケーションがデータベースとやりとりをする際の接続設定（例えば、使用するデータベースの種類など）が記されています。

以下はdatabase.ymlの一般的なデフォルトの設定です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
default: &default
  adapter: sqlite3
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000

development:
  <<: *default
  database: db/development.sqlite3

test:
  <<: *default
  database: db/test.sqlite3

production:
  <<: *default
  database: db/production.sqlite3

database.ymlは、rails newコマンドを実行して新しいRailsアプリケーションを作成する際、configディレクトリ内に自動的に生成されます。データベースを指定せずコマンドを実行すると、上記のようにSQLiteがデフォルトで使用される設定になります。

rails newコマンド実行時にデータベースを指定すると、database.ymlはそのデータベースをデフォルトで使用する設定で自動的に生成されます。

1
rails new アプリケーション名 -d データベース名 # このコマンドは実行しないでください

Railsでデータベースを作成するには、ターミナルでrails db:createコマンドを実行します。このコマンドを実行すると、database.ymlの設定に従ってデータベースが作成されます。

1
rails db:create # このコマンドは実行しないでください

Railsでデータベースを作成する

リンクをコピーしました

それでは実際に手を動かし、 Railsでデータベースを作成してみましょう。

まず、rails newコマンド実行時にconfigディレクトリ直下に自動生成されたdatabase.ymlをテキストエディタで開きましょう。

database.ymlを開くと、以下の内容が記載されています。

• adapter: 使用するデータベースエンジン
• database: データベースの名前
• username: データベースに接続する際のユーザー名
• password: データベースに接続する際のパスワード

rails newコマンドでアプリケーションを作成する際、データベースを以下のように指定しました。その結果、database.ymlではSQLiteではなくMariaDBがデフォルトで使用される設定になります。
※1. -d mysqlと指定していますが、互換性の高いMySQLのコマンドを利用してMariaDBに接続します。

1
rails _6.1.3.1_ new employee_management -d mysql # このコマンドは実行しないでください

環境構築時にMariaDBのrootユーザーのパスワードを設定していない場合、database.ymlのpassword欄は空欄のままでもMariaDBに接続可能です。基礎カリキュラムでは、開発環境のデータベースを使用するため、特にパスワード設定は行いません。

Ruby on Railsでは、アプリケーション開発を支援するため、開発環境、テスト環境、および本番環境の3つの環境が、それぞれ特定の用途に最適化されて用意されています。

• 開発環境: アプリケーション開発を行う主要な環境
• テスト環境: アプリケーションのテストを実施する環境
• 本番環境: リリースされるアプリケーションをユーザーに提供する環境

database.ymlでは、各環境に対してデータベースの設定が個別にデフォルトで定義されています。また、データベースの名前も環境ごとに異なります。

次に12行目のdefault: &defaultを確認します。

default: &defaultでは、すべての環境で共通する設定を記述します。<<: *defaultを用いて、他の環境の設定でこれを呼び出し、利用することができます。

database.ymlはデフォルトのまま特に変更せず、データベースを作成します。

カレントディレクトリが~/environment/employee_managementであることを確認し、以下のコマンドをターミナルで実行してください。カレントディレクトリの変更は、cd ~/environment/employee_managementを実行することで行えます。

1
rails db:create

コマンドを実行すると、以下の画像のようにemployee_management_developmentという名前の開発環境用データベースとemployee_management_testという名前のテスト環境用データベースが作成されます。

phpMyAdminでデータを可視化する

リンクをコピーしました

phpMyAdminとは、Webブラウザ上でMariaDBの操作や管理を行えるソフトウェアです。

MariaDBを操作するには、ターミナルを開いてコマンドを打ち込む必要がありましたが、phpMyAdmin導入後は、Webブラウザ上で簡単に操作することができます。

phpMyAdminの導入・設定

リンクをコピーしました

それでは、実際に手を動かしてみましょう。phpMyAdminを導入し、Webブラウザからデータベースを操作できるように設定していきます。

publicディレクトリは、Webブラウザから直接アクセス可能なファイルを格納する場所として使用されます。

まず、カレントディレクトリをpublicに変更しましょう。
ターミナルで以下のコマンドを実行します。

1
cd ~/environment/employee_management/public

もし画像と同様の表記がされているなら、カレントディレクトリをpublicに変更できています。それでは、次に進みましょう。

まず、コマンドで公式サイトからphpMyAdminをダウンロードします。

コマンドの実行に進む前に、カレントディレクトリがpublicであることを確認してください。確認ができましたら、ターミナルで以下のコマンドを実行してください。

1
wget https://files.phpmyadmin.net/phpMyAdmin/5.1.1/phpMyAdmin-5.1.1-all-languages.zip 

コマンドを実行すると、publicディレクトリ直下にphpMyAdmin-5.1.1-all-languages.zipがダウンロードされることが、以下の画像のように確認できます。

次に、phpMyAdmin-5.1.1-all-languages.zipをunzipコマンドで解凍します。

コマンドの実行に進む前に、カレントディレクトリがpublicであることを確認してください。確認ができましたら、ターミナルで以下のコマンドを実行してください。

1
unzip phpMyAdmin-5.1.1-all-languages.zip

コマンドを実行した後、解凍されたphpMyAdmin-5.1.1-all-languagesが以下のようにpublicディレクトリ内にあることを確認してみましょう。

最後にphpMyAdmin-5.1.1-all-languages.zipは不要ですので、rmコマンドを使用して削除します。

コマンドの実行に進む前に、カレントディレクトリがpublicであることを確認してください。確認ができましたら、ターミナルで以下のコマンドを実行してください。

1
rm phpMyAdmin-5.1.1-all-languages.zip

phpMyAdminの設定ファイル名はconfig.inc.phpですが、ダウンロードしたファイルには含まれていないため、作成が必要です。

phpMyAdmin-5.1.1-all-languagesディレクトリ内のconfig.sample.inc.phpをコピーし、phpMyAdminの設定ファイルを作成します。

まず、カレントディレクトリをphpMyAdmin-5.1.1-all-languagesに変更しましょう。ターミナルで以下のコマンドを実行します。

1
cd ~/environment/employee_management/public/phpMyAdmin-5.1.1-all-languages

次にconfig.sample.inc.phpをコピーし、config.inc.phpを作成しましょう。
ターミナルで以下のコマンドを実行します。

1
cp config.sample.inc.php config.inc.php

実行すると、phpMyAdmin-5.1.1-all-languagesディレクトリ直下にconfig.inc.phpが作成されることが、以下の画像のように確認できます。

最後にconfig.inc.phpの設定を変更しましょう。
config.inc.phpをダブルクリックし、テキストエディタで開きます。

config.inc.phpの32行目の$cfg['Servers'][$i]['AllowNoPassword'] = false;を、以下の画像に示されているようにfalseをtrueに変更してください。

1
$cfg['Servers'][$i]['AllowNoPassword'] = true;

phpMyAdminの起動手順

リンクをコピーしました

それでは、phpMyAdminの起動手順を確認しましょう。以下の手順を踏むことで、phpMyAdminを用いてデータベース管理が可能になります。

なお、MariaDBサーバーは自動起動を設定済みですので、特別な操作は必要ありません。
もし手順の途中で問題が発生した場合、各ステップを再確認し、正しい実行が行われているかチェックしてください。

まず、Cloud9でターミナルを開きましょう。

カレントディレクトリをphpMyAdmin-5.1.1-all-languagesに変更しましょう。
ターミナルで以下のコマンドを実行します。

1
cd ~/environment/employee_management/public/phpMyAdmin-5.1.1-all-languages

Cloud9では、簡単にphpMyAdminを動かすために、PHPが持っているシンプルなウェブサーバーを使います。

コマンドの実行に進む前に、カレントディレクトリがphpMyAdmin-5.1.1-all-languagesであることを確認してください。確認ができましたら、ターミナルで以下のコマンドを実行してください。

1
php -S 127.0.0.1:8081

Press Ctrl-C to quit.まで表示されたら起動完了です。

サーバーを起動したターミナルではログが出力され続けます。その間、他のコマンドを実行することができないので、以下のように別タブで新しいターミナルを開いておきましょう。

IDE上部にある「Preview」>「Preview Running Application」をクリックしてください。

次のようにプレビューウィンドウが表示されます。

以下の画像の通り、Browserの右側にあるマークをクリックしてください。

Webブラウザの別タブでプレビューが開きますので、URLの末尾に:8081を追記し、Enterキーまたはreturnキーを押して検索してください。

このログイン画面は頻繁に使用するため、ブックマークしておくと便利です。

それでは、phpMyAdminにログインしましょう。ユーザー名の欄に「root」と半角英字で入力し、実行ボタンをクリックしてください。

ログインに成功すると、次のような画面が表示されます。

rails db:createコマンドで、既に開発環境とテスト環境のデータベースを作成していましたね。

これらのデータベースが存在するか確認してみましょう。
画面上部の「データベース」という部分をクリックしてください。

すると、データベース一覧が表示されます。

コマンドで作成した「employee_management_development」と「employee_management_test」というデータベースがリストにありますね。

また、画面上部の「データベース」以外にも、サイドバーの「employee」>「management」からも確認が可能です。

phpMyAdminのエラー対処方法

リンクをコピーしました

上記のエラーが表示された場合、以下の項目を確認してください。

• MariaDBが起動中であることを確認してください。
• データベースが作成されていることを確認してください。
• phpMyAdminの設定ファイルが作成されていることを確認してください。
• PHPビルトインウェブサーバーが起動中であることを確認してください。

MariaDBの起動状態の確認方法

リンクをコピーしました

MariaDBの状態から確認します。
ターミナルで以下のコマンドを実行してください。

1
sudo systemctl status mariadb

画像の通りに表示されれば、MariaDBが正常に起動しています。MariaDBが原因ではないため、次に進みましょう。

もし起動していない場合は、こちらの手順に従ってMariaDBを起動し、その後の自動設定も必ず実施してください。

データベースが作成されているかを確認

リンクをコピーしました

カレントディレクトリが~/environment/employee_managementであることを確認し、以下のコマンドをターミナルで実行してください。

1
rails db:create

上記を実行した際、すでに作成済みの場合は、already existsと表示されます。データベースが原因ではないので、次に進みましょう。

以下の画像のようにデータベースが作成されている場合、データベース作成段階での不具合が原因でした。

phpMyAdminの設定ファイルを確認する

リンクをコピーしました

phpMyAdmin-5.1.1-all-languagesディレクトリ直下にconfig.inc.phpというファイルが存在するかを確認してください。

もしconfig.inc.phpというファイルが存在していない場合は、こちらの手順に従って導入や設定を見直してください。

PHPビルトインウェブサーバーの起動方法

リンクをコピーしました

カレントディレクトリがphpMyAdmin-5.1.1-all-languagesであることを確認してください。確認ができましたら、ターミナルで以下のコマンドを実行してください。

1
php -S 127.0.0.1:8081

Press Ctrl-C to quit.まで表示されたら起動完了です。

4.Railsのサーバーを立ち上げる

リンクをコピーしました

最後に、Ruby on Railsの開発サーバーを起動し、Webブラウザでデフォルトページを表示させます。rails serverコマンドを利用することで、開発サーバーを起動できます。

Railsアプリケーションのデフォルトページ

rails server コマンドの使い方

リンクをコピーしました

rails serverコマンドは、Railsアプリケーションの開発環境を起動するためのコマンドです。このコマンドを実行すると、Webアプリケーションサーバーが内部的に起動し、Webブラウザを通じてRailsアプリケーションの動作や画面を確認することができます。

コマンドの使い方は、ターミナルでRailsアプリケーションのルートディレクトリに移動した後、rails server または rails s と入力して実行します。

1
2
3
4
5
rails server
# 上記のコマンドは、Railsアプリケーションのサーバーを起動します。

# 短縮形として、以下のコマンドでも同じ操作を実行できます。
rails s

通常、サーバーを起動後、Webブラウザで http://localhost:3000 にアクセスすると、Railsアプリケーションのデフォルトページが表示されます。しかし、Cloud9を利用する場合は手順が少し異なります。

Cloud9のIDEには「Preview」というオプションが存在します。この機能を利用することで、起動したRailsアプリケーションをブラウザで直接確認することができます。

具体的には、Previewのメニューから「Preview Running Application」を選択すると、新しいタブでアプリケーションが開きます。

Rails 6以降、セキュリティの向上を目的としてアクセス制限が導入されました。Cloud9のような外部の環境からアクセスする際、この制限によりアクセスが制約されることがあるため、config.hosts.clearという設定を追加する必要があります。

この設定については、実際に操作しながら詳しく確認します。

rails serverコマンドを実行する

リンクをコピーしました

それでは実際にrails serverコマンドを実行し、Webブラウザを通じてRailsアプリケーションのデフォルトページを確認してみましょう。

Railsでは、それぞれの環境ごとに専用の設定ファイルが用意されています。開発環境の設定ファイルは、config/environmentsディレクトリ内のdevelopment.rbです。

まず、development.rbをテキストエディタで開きましょう。

Cloud9の環境でWebブラウザからRailsアプリケーションにアクセスするため、次にdevelopment.rbにconfig.hosts.clearを追記しましょう。

1
config.hosts.clear

上記の設定により、Cloud9のようなクラウド上の開発環境からでもRailsアプリケーションにアクセスすることが可能となります。

まず、ターミナルで以下のコマンドを実行し、employee_managementというRailsアプリケーションのルートディレクトリに移動しましょう。

1
cd ~/environment/employee_management

次に、ターミナルでrails serverまたはrails sを実行しましょう。

1
rails s

「Use Ctrl-C to stop」まで表示されたら、起動が完了しています。

最後に、WebブラウザでRailsアプリケーションのデフォルトページを表示してみましょう。

IDEの上部に「Preview」>「Preview Running Application」がありますので、それをクリックしてください。

次に、プレビューウィンドウが表示されますので、Browserの右側にあるマークをクリックしてみましょう。

その後、以下の画像と同様の画面が表示されれば、アプリケーションへのアクセスは正常に行われています。

この記事のまとめ

リンクをコピーしました

本記事では、Railsアプリケーションの基本的なセットアップに必要な手順を学びました。まず、「rails new」コマンドで新しいアプリケーションを作成し、特定のバージョンのGemをインストールしましたね。その後、データベースを作成し、phpMyAdminツールを使って作成したデータベースを確認する方法を学びました。最後に「rails server」コマンドでRailsアプリケーションの開発環境を起動し、Webブラウザを通じてアプリケーションの動作を確認する手法を把握しました。