はじめに

前回の記事でRailsプロジェクトを作成してサーバーを立ち上げるところまでいきました。

今回は前回の続きからで、Webページに「Hello World」を表示させるところまでやっていきます。

アプリを立ち上げてWeb上に自分が作成したページを表示させることができるので、達成感がありますよ！

それでは前回の続きからやっていきましょう！

MVCモデルについて

まずはRailsの全体的な仕組みについて説明します。
この構造についての理解があれば今からの実装のイメージがつかみやすくなります。

作成したRailsプロジェクトの中身を見てみると、appディレクトリの中にmodelやcontroller、viewといったディレクトリがあると思います。

これらはMVC(Model View Controller)というアーキテクチャパターンに則った構造になっており、RailsはこのMVCを採用していることがわかります。

ではこのMVCとはどういったものなのでしょうか。以下の図をご覧ください。

図1 MVC概念図

図2 Rails処理の流れ

図にある通り、はじめはブラウザからWebサーバーにリクエストを送信します。

その後は、Railsのリクエストを処理する役割を担っているControllerに渡されます。RouterというのはリクエストのURL情報を元に対応するControllerに処理を割り当てる役割をしています。

Controllerは場合によってはすぐに対応するViewを生成してHTMLをブラウザに返します。動的なサイトである場合は、modelを通してDB(データベース)とやりとりを行い、データを持ってきます。

モデルを呼び出してデータを持ってきた後は、Controllerはビューを作成し、HTMLとしてブラウザに返します。

はじめは処理の流れを理解しにくいと思います。
ですがコードを書いていくうちに少しずつ把握できるようになるので、今は大まかな流れを理解するだけで良いかと思います。

コントローラ、ルーティングの中身を書いていく

それでは「Hello World」と書かれたWebページを表示させるための処理を作成していきましょう！

①Applicationコントローラにhelloというアクションを作成する。
まずは下記のようにapplication_controller.rbを開いて中身を編集します。

app/controllers/application_controller.rb
class ApplicationController < ActionController::Base protect_from_forgery with: :exception end

今回はhelloという名前のアクションを作成しています。アクションの定義の仕方は

def action_name
# 処理の内容
end

というように書きます。

今回作成したアクションと見比べてみてください。

def hello
render html: "hello, world!"
end


処理の中身はhtml形式で”hello, world”という文字列が書かれたページを返す、というアクションになっています。
※本来はビューファイルを作成してページを返すのが常套手段ですが、今回はわかりやすくするため簡単なやり方にしています。

②ルーティングを書く
次にルーティングを書き、リクエストとアクションを結びつけましょう！
ルーティングはブラウザとコントローラの間で、ブラウザからのリクエストを受け取り、対応するコントローラに振り分ける役割を持っています。

前回「http://localhost:3000/」にアクセスした時は、下図のようなページが表示されたかと思います。

図3 Railsのデフォルトページ

このデフォルトページを、hello, worldを表示するページに差し替えます。

ルートURL(https://localhost:3000/のこと)にアクセスした場合のルーティングを変更しましょう。
例えば http://www.example.com/ というURLの末尾は「/」になっているため、Railsのルーティングで指定する際は「/」で簡単に表記することが多いです。

現在のroutes.rbファイルは下記のようになっているかと思います。修正後のコードを参考に編集しましょう。
※ちなみに「#」は、コードの中に書くコメントになります。「#」以降の文字はコードとして認識されないので、メモ書きにように使用されています。「コメントアウトする」とも言われます。

修正前のconfig/routes.rb
Rails.application.routes.draw do
# For details on the DSL available within this file,
# see http://railsguides.jp/routing.html
end


修正後のconfig/routes.rb
Rails.application.routes.draw do
root 'application#hello'
end


これで「 http://localhost:3000/ 」にアクセスしたら以下のように表示されると思います！

図4 ルートURLにログインした時の図

これでWeb上にhello, world表示させるプログラムの完成です！

ここまで到達された方おめでとうございます！そしてお疲れ様でした！

さいごに

今回はrailsが採用しているMVC構造を理解した上で、少しRailsの中身をいじりWeb上に自分の作成したページを表示させることができました。

Railsを使った開発を少しだけ楽しめたでしょうか？

このように全体像を掴んで、小さくて簡単な動作から実装していくと流れがつかめてきて楽しく学習できていけると思います！

また今後も、RailsやWebアプリケーションについて書いていければと思います。

読んでいただきありがとうございました！

それではまた。

記事作成 : A・M