Ruby on Rails Webアプリケーションフレームワークを使った、はじめてのWebアプリケーションを作ってみます。
Railsをインストールする
まずはRuby on Railsをインストールします。 以下Ruby on RailsをRails(レイルズ)と略して表記します。
RubyはGemと呼ばれるパッケージ管理システムが存在して、ライブラリと呼ばれるプログラムの部品で便利な機能をひとまとめにしたものを簡単にインストールすることができます。
Railsについても、このgemを用いてインストールします。
gemをインストールするには以下のコマンドを用います。 ライブラリ名のところは差し替える必要があります。
$ gem install ライブラリ名
Railsをインストールするには以下のコマンドを実行してください。
$ gem install rails -v 8.0.2
-v 8.0.2はRailsのバージョンを指定しています。
Railsは日々改善されており、様々なバージョンが存在します。
バージョンによって機能が異なるため、違うバージョンをインストールすると同じコードでも動かないことがあります。
そのため今回はバージョンを指定してインストールします。
それが-v 8.0.2の部分です。
RailsのWebアプリケーションのひな形を作る
Railsのインストールが完了したら、Railsを使って まずはターミナルを起動して以下のコマンドを入力して実行します。 Railsアプリケーションのひな形を作るコマンド(rails new)です。
$ rails _8.0.2_ new sample_app
そうするとsample_appというディレクトリが作成されます。
このディレクトリをVSCodeなどのテキストエディタで開きましょう。
大量のディレクトリとファイルが作成されていますね。
これがRailsアプリケーションのひな形になります。
私たちはこれから、このファイルを編集したり、ファイルを追加したりすることでWebアプリケーションを作成していきます。
ひな形を作成したらGitバージョン管理ツールでコミットをしておきましょう。
ターミナルを開いて以下のコマンドを実行して、git addとcommitをしておきます。
$ git add .
$ git commit "first commit"
Rails以外のフレームワークにおいても、rails newのようなひな形を作成するコマンドが存在することがあります。
その場合は、何も修正しない状態でgit commitしておくことをお勧めします。
Railsアプリケーションを起動する(サーバーを起動する)
ひな形が作成出来たらRailsアプリケーションを起動します。
ターミナルを開いて、まずはpwd(現在位置)がsample_appになるようにしてください。
$ cd sample_app
$ basename `pwd` # sample_appのみ出力されればOK
sample_appディレクトリがpwdの状態で以下のコマンドを入力してRailsアプリケーションを起動します。
$ rails server
このコマンドには省略形が用意されています。 以下のコマンドでも同様にRailsアプリケーションのサーバーを起動することができます。
$ rails s
そうすると以下のような出力がでれば起動に成功です。
rails server
=> Booting Puma
=> Rails 8.0.2 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 6.6.0 ("Return to Forever")
* Ruby version: ruby 3.3.2 (2024-05-30 revision e5a195edf6) [x86_64-linux]
* Min threads: 3
* Max threads: 3
* Environment: development
* PID: 77398
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop
ブラウザにアクセスしてみる
サーバーを起動した状態でブラウザを開いて http://localhost:3000 にアクセスしてみましょう。
localhostとは自分のパソコンを指すホスト名です。 3000はポートでRailsの開発時のサーバーのポートはデフォルトで3000番が使用されます。
以下のような画面が表示されれば成功です。
サーバーを停止してみる
ターミナルに戻ってctrl + cを押します(ctrlキーを押しながらcキーを押す)。 ctrl + cでサーバーを停止することができます。
この状態でブラウザを開いて http://localhost:3000 にアクセスすると以下のような画面が表示されます。
サーバーが停止している、起動していないのでこのサイトにアクセスできませんと表示されます。
今後、サーバーを一度停止して、再度起動する再起動が必要になりますので、サーバーを停止するコマンドを覚えておいてください！
また、サーバーを起動していないとRailsアプリケーションは動作しません。
サーバーの起動忘れ、もしくはサーバーがうまく起動していない場合は上記のようなこのサイトにアクセスできませんという表示がされます。
その場合はサーバーが正常に起動されているか、ターミナルの出力を確認してみてください。
はじめてのページを作る
Railsのサーバーの起動方法、停止方法がわかったら最初のページを作りましょう。 以下のコマンドをターミナルで実行します。
$ rails g controller home index
このコマンドはジェネレータと呼ばれるもので、コードのテンプレートを自動生成することができます。
rails gは省略形で上記コマンドはrails generate controller home indexでも実行することができます。
rails gの後に入力するのはcontrollerなので、controllerを作成するためのコマンドです。
色々疑問に思うかもしれませんが、詳細は後ほど解説するので、まずはこのコマンドを実行して最初のページを作ってみましょう。
実行すると以下のような出力がされて、さまざまなファイルが新規作成、一部のファイルについてはコードが追加されます。
rails g controller home index
create app/controllers/home_controller.rb
route get "home/index"
invoke erb
create app/views/home
create app/views/home/index.html.erb
invoke test_unit
create test/controllers/home_controller_test.rb
invoke helper
create app/helpers/home_helper.rb
invoke test_unit
この状態でrails sでサーバーを起動しましょう。
$ rails s
サーバーが起動出来たら http://localhost:3000/home/index にアクセスします。
以下のような画面が表示されれば成功です。
コマンドをひとつターミナルで実行するだけで、ページを作成することができました。
簡単なおみくじアプリケーションを作ってみる
あたらしく作成したページの表示を修正して、簡単なおみくじアプリケーションを作ってみましょう。
ブラウザで画面を再読み込み(リロード)するごとに、 - 大吉 - 中吉 - 小吉 - 吉 がランダムで表示されるようにします。
VSCodeなどのコードエディタを開いて、app/views/home/index.html.erbを編集します。
<p>おはようございます</p> <p>今日の運勢は<%= ["大吉", "中吉", "小吉", "吉"] %>です。</p>
http://localhost:3000/home/indexにアクセスしてみます。
以下のように表示されれば成功です！
ブラウザの左上の再読み込みボタンを押すか、ctrl + rを押して画面を再読み込みしましょう。
一度ではなく、何回か実行してみます。
今回の運勢はに続く、文字がランダムに切り替わることが確認できるはずです。
Webアプリの基本の動作について学ぶ
ここまでで簡単なWebアプリを作ってみました。
どのような仕組みで動作しているのか、学んでいきましょう。
ブラウザからhttp://localhost:3000にアクセスすると、Railsのサーバーにリクエスト(要求)されます。
リクエストをうけとったRailsサーバーはHTMLを生成し、 レスポンス(反応)としてHTMLをブラウザに返します。
HTMLとは、文字の情報です。
ブラウザはRailsサーバーから返されてきた文字情報であるHTMLを解釈して、皆さんが見ているような見やすい形に変換して表示してくれます。
どのようなHTMLが返ってくるか、確認してみましょう。
Chromeの画面上で右クリックをして「検証」を選択します。
そうするとChrome Developerツールが開きます。
タブが複数ありますが、Elementsを選択し、▶をクリックしてheadとbodyを展開します。
展開されるとHTMLの全体像を見ることができます。
このHTMLがRailsのサーバーからレスポンスとして返されてきています。 ブラウザはこのHTMLを解釈して、皆さんが見やすいように表示してくれています。
Railsの基本的な処理の流れについて学ぶ
ここまででRailsとブラウザの関係について学びました。
ここからはRailsがどのようにリクエストを処理して、HTMLを返しているのかRailsの基本的な処理の流れについて学びましょう。
ルーティングとHTTPの基本
ブラウザからリクエストが来たら、Railsはまずルーティング
