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のみ出力されればOKsample_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 optionsPuma 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]:3000Use 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>今日の運勢は<%= ["大吉", "中吉", "小吉", "吉"].sample %>です。</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はまずルーティングと呼ばれる処理を行います。
ルーティングとは、リクエストされたURLに対して、どのコントローラーのどのアクションを実行するかを決定する処理です。
ブラウザで検索バーにhttp://localhost:3000/home/indexと入力してエンターキーを押すと、Railsのサーバーにリクエストが送られます。
この場合、HTTPリクエストはGETメソッドになります。
Railsではconfig/routes.rbというファイルでルーティングの設定を行います。
Rails.application.routes.draw do get "home/index"endget "home/index"は、HTTPのGETメソッドで/home/indexというURLにリクエストが来た場合に、HomeControllerのindexアクションを実行することを意味しています。
こちらは次のように書き換えることもできます。
Rails.application.routes.draw do get "home/index", to: "home#index"endto: "home#index"は、HomeControllerのindexアクションを実行することを明示的に指定しています。
controller名#アクション名の形式で指定します。
Controllerとアクション
ルーティングでHomeControllerのindexアクションが実行されることが決まったら、次にRailsはHomeControllerというコントローラーを探します。
コントローラーは、アプリケーションのリクエストを処理する役割を持つクラスです。
コントローラーはapp/controllersディレクトリに配置されます。
Railsは次のような命名規約があります。
Controllerのファイル名はsnake_case(全部小文字で単語をアンダースコアで区切る)で命名します。
ControllerのクラスはCamelCase(単語の先頭を大文字にする)で命名します。
決まりごとが多いので、最初は戸惑うかもしれませんが、Railsの命名規約に従うことで、
実際に書くコードの量を減らすことができます。
これがRailsの特徴のひとつである「設定より規約」(Convention over Configuration)です。
Viewとテンプレート
コントローラーのアクションが実行されると、次にRailsはビューを探します。
ビューは、ユーザーに表示するHTMLを生成する役割を持つテンプレートファイルです。
ビューはapp/viewsディレクトリに配置されます。
ビューファイルはsnake_caseで命名され、拡張子は.html.erbにします。
ビューファイルのディレクトリ、ファイル名も命名規約があります。
HomeControllerのindexアクションに対応するビューファイルはapp/views/home/index.html.erbになります。
app/views/コントローラ名/アクション名.html.erbというパスになります。
この命名規約でRailsは自動的にビューを探してくれます。
まとめ
ここまでで、Railsを使った簡単なWebアプリケーションの作成手順と処理の流れについて学びました。
次の図のようにRoutingでリクエストを受け取り、Controllerのアクションを実行し、ViewをレンダリングしてHTMLを生成し、ブラウザにレスポンスとして返すという流れです。
これがRailsの基本的な処理の流れです。
