【初心者向け】Ruby on Rails学習① 〜MVC構造とページの追加・編集〜

HTMLやCSSの基礎を押さえたところで、早速「Ruby on Rails」の学習を進めていきましょう！今回は、コードを書くというよりも、「Ruby on Rails」がどのような構成でできているのか理解いただき、こうやって進めていくんだ！というイメージを掴んでいただくことを主にしております。もちろん、最後の部分で少しコードを書いて操作していただきますので、VS codeの設定が終わっていない方、Ruby on Railsの環境構築が終わっていない方、HTMLやCSSが全く分からない方は以下記事を一読いただき設定は済ませてください！

VS codeの設定が終わっていない方はこちら

【初心者向け】VS code（Visual Studio Code）のインストール・設定方法

Ruby on Railsの環境構築が終わっていない方はこちら

【初心者向け】Ruby on Rails 6 インストール方法（環境構築）

HTMLやCSSが全く分からない方はこちら

【初心者向け】HTMLの基礎学習～Ruby on Railsスキルセット～

目次

Ruby on Railsの全体構成と『MVC』の考え方

Ruby on Railsの全体構成から説明していきましょう。ダウンロードしたファイルを見てみると以下のようなディレクトリ構成になっていると思います。さっぱりわかりませんよね？問題ありません。「RubyonRailsは秒速でアプリ開発できるように、ある程度ひな形を作ってくれているのです。めんどくさい設定は既に済ませてくれており、設定済みのファイルをダウンロードしたら、以下のような構成になっている。」と理解してくれればOKです。

Ruby on Railsの全体構成

よく使うフォルダについて、簡単にご紹介してここでは終了します。覚える必要はないのでさら読みでOKです。

app

このフォルダはよく使います。中を見てみると、「assets」、「controllers」、「models」、「views」などわけわからないフォルダがたくさん入ってます。それぞれのフォルダ内に入っているファイルを編集・追加することで、アプリが出来上がっていきます。ここでは、app内のファイルを編集することで、データベースやHTML、CSSの設定を行う。とだけ覚えておきましょう。一番よく使うことになります。

Ruby on Railsの構成（app）
config

configフォルダは、configration（設定）を意味するように、各種設定を入れるフォルダになっています。

Ruby on Railsの構成（config）
test

testフォルダには、プログラムのバグがないかテストを行うコードを保存します。

Ruby on Railsの構成（test）

他にも様々フォルダがありますが、メインで使うのはこのくらいです。改めてですが、Ruby on Railsに様々フォルダがありますが、「秒速で開発できるように、めんどくさい設定は済ませてくれているんだな～」と感謝して、Rails全体構成の紹介は終了します。

次は少しお堅い話ですが、重要な考え方を説明するので、しばしお付き合いください。

MVC（Model, View, Controller）の考え方

Railsフォルダ全体構成のところで、様々フォルダがあるとご紹介しましたが、その構成はしっかり考えられて設計されています。（プロのエンジニアが開発しているので当たり前ですよね、、、）

その設計で用いられている考え方を「MVC（Model, View, Controller）」と呼びます。

Wikipediaによると、

Model-View-Controller (MVC、モデル・ビュー・コントローラ) はUIを持つソフトウェアに適用されるソフトウェアアーキテクチャの一種である。

MVCはソフトウェアを処理/Model・表示/View・入力伝達/Controllerの3要素に分割し、ソフトウェア内部データをユーザーが直接参照・編集する情報から分離する。プレゼンテーション（View・Controller）とドメイン（Model）を分離しまたユーザー入力（Controller）と表示（View）も分離することでソフトウェアの保守性・開発生産性を向上させる。

Model View Controller

と記述があります。よくわかりませんね。Webサイトでユーザー登録する場合を例に、説明していきます。

Webサイトでユーザー登録する場合

ユーザーがWebサイトで登録するとき、以下のような流れになると思います。

①ユーザーがWebサイトを見る
②ユーザーがWebサイト上に名前を入力して「送信」ボタンを押す
③データベースに入力した名前データが保存される

この動きを実現させる際、MVCが大活躍します！

Webサイトでユーザー登録する場合（MVC説明）
①ユーザーがWebサイトを見る（View）

ユーザーが見るWebサイトを用意してあげないといけません。名前を入力するフォームや「送信」ボタンなどを配置してあげないといけません。これら設定はHTMLやCSSで作っていきます。

このように、ユーザーが見るWebサイトの表示を作成する要素を「View（ビュー）」といいます。

実際にユーザーの方が見る部分になりますので、Webアプリでは非常に大切な部分になります。

②ユーザーがWebサイト上に名前を入力して「送信」ボタンを押す（Controller）

ユーザーが名前を入力して、「送信」ボタンを押したらデータを保存してあげないといけません。また、その動きは事前にプログラムを書いて制御しないといけません。

このように、ユーザーの動きに合わせてWebアプリの動きを設定する要素を「Controller（コントローラー）」といいます。

③データベースに入力した名前データが保存される（Model）

Controllerから「データを保存しろ！」と命令が来たらデータベースへデータを保存しなくてはいけません。どのデータベースへ？保存形式は文字？数字？間違って「送信」ボタンが押された押された時を考慮して、空っぽのデータが送られてきたらエラーを返す？など、データ保存関連の設定をしてあげなくてはいけません。

これら、データ保存やその手続きを設定する要素を「Model（モデル）」といいます。

MVCがRuby on Railsの設計思想

このようにModel、View、Controllerがそれぞれ機能して、１つのWebアプリが出来上がります。MVCがそれぞれどんな役割なのか、簡単でいいので頭に入れておくといいとでしょう。Ruby on Railsを触っていれば少しずつわかってくると思うので、焦らずいきましょう。

ちなみに、MVCモデルの考え方は、Ruby以外の言語のWebアプリでも使われています。（JavaやPHPなど）今回、Ruby on Railsを触ったときに、MVCを理解できていると他の言語やフレームワークを触ったときにすんなり理解できるようになると思います。

１回で理解できましたか？少し難しかったでしょうか？

RailsのView（ビュー）を操作してみる

説明だけされてもよく分からないでしょうから、実際に操作してみましょう。

VS Codeを使って、ローカルにダウンロードしたRuby on Railsのフォルダを開きましょう。私は、株式投資の分析ツールを作ろうと、「stock」というアプリ名になっていますが、こちらは皆さんお好きな名前でアプリを開発してください。

まずRailsアプリが保存されているディレクトリへ移動して、ローカルサーバーが立ち上がることを確認してください。

cd .../"アプリ名"
rails s
rails s 画面

もし立ち上がらない方は、こちらの記事を参考にして環境を整えてください。

【初心者向け】Ruby on Rails 6 インストール方法（環境構築） 
rails s

が成功した方は、http://localhost:3000/ のページへアクセスしてください。以下のような表示になっているでしょうか？

Ruby on Rails表示画面

このページを編集して、私たちがデザインしたページに変更しましょう！先ほど例を挙げたページを試しに作ってみましょう。（以下目標デザイン）

ユーザー登録（目標ページ）

【実践】Ruby on Railsアプリにページを追加し、編集する方法

目標とするページが決まったところで、早速ページを追加してみましょう。新しいページを追加するステップは以下の通りです。


① Controller（コントローラー）の設定を行う
② ルーティングの設定を行う
③ View（ビュー）の設定を行う

① Controller（コントローラー）の設定を行う

まず初めにControllerの設定を行いましょう。ターミナルで「ctr + c」を入力して、一旦起動しているローカルサーバーを止めます。

では、以下コマンドを入力して、ユーザー情報の設定・管理を行う「User Controller」を作成しましょう。

rails generate controller Users

以下のような表示になりました。いかがでしょうか？

rails generate controller Usersの結果

また、「app > controllers」フォルダ内に「users_controllers.rb」というファイルが出来上がっています。ここにコードを入力していきます。ファイルはrubyで記述されているため、初心者の方は少し難しいかもしれませんが、ここはコピペで乗り越えOKです。どのように新しいページが追加されるか、知っていただくことが今回の主テーマです。

users_controllers.rbにコード記入

以下コードを書いてみましょう。

class UsersController < ApplicationController
    def home 
    end
end

参考程度にお伝えすると、def はruby で「メソッドを定義するために使われるもの」です。詳しくしたい方は、こちらのページなどをご覧ください。（参考：【Ruby入門】defについてまとめてみました）ただ、もう一度言いますが、ここでは理解不要です。

これにて、Controllerの設定は終了です。次のステップへ進みましょう。

② ルーティングの設定を行う

「ルーティング」という聞きなれないワードが出てきました。これはよく使うワードですので、覚えておきましょう。またお堅い話になりますが、少しだけお付き合いください。

ページを追加するとき、そのページのURLを決めないといけません。例えば、GoogleのURLは、「https://www.google.com/」であり、このURLにアクセスするとおなじみの検索画面が表示されます。

https://www.google.com/

このように、「このURLにアクセスしたら、このページを表示させる」という設定をルーティングといいます。
（※厳密には少し違っているのですが、今回は詳細な説明を割愛します。Controllerの部分で詳しくご説明します！）

今回は、「http://localhost:3000/」にアクセスしたら、目標のページが表示されるように設定しましょう。

「config」フォルダ内の「routes.rb」ファイルを開きましょう。

ルーティング設定

また、こちらもコピペでＯＫですので、以下コードを書いてください。

Rails.application.routes.draw do
  root to: 'users#home'
end

今回のコード説明にあたり、また新しいワードが出ます。その名も「ルートパス」です。ルートパスは、そのWebサイトのトップページを意味します。Amazonのページでいうと、「https://www.amazon.co.jp/」がルートページで、その他製品紹介ページは、「ルートURL＋相対パス」といった構造になっています。

なぜ「ルートパス」をご紹介したかというと、今回は「http://localhost:3000/」がルートパスであり、ルートパスに作成したページを表示させたいから、わざわざ説明しました。（ややこしくなってきましたね、、）

ルートパスが少しわかったところで、上記のコードの意味を説明すると（root to: ‘user#home’）、「ルートパス（root）にusersコントローラーのhomeメソッドを紐づける」という記述になります。先ほど①のところで、

 def home 
 end

とコードを書きましたが、このメソッドとルートパスが紐づきました。このようにルーティング設定することで、ControllerとURLを紐づけることができます。

③ View（ビュー）の設定を行う

Controller、ルーティングの設定が完了したら、最後にViewの設定です。「app > views > users」フォルダ内に新しく「home.html.erb」というファイルを作成しましょう。HTMLの登場です！

作成した「home.html.erb」ファイルに以下HTMLコードを書いてみましょう。

<div>
    <h1>ユーザー登録</h1>
    <div>
        <label for="name">名前</label>
        <input id="name" type="text"/>
        <button>送信</button>
    </div>    
</div>

そして再度、

rails s

コマンドを入力して、「http://localhost:3000/」へアクセスしてみましょう。

ルートページの確認

表示が変わって、あなたが入力したページが表示されましたね！おめでとうございます。見た目がイケていないので、CSSで少し編集しましょう。

まず、「home.html.erb」のコードを少し修正してClass（クラス）属性を追加しましょう。

<div class="overall">
    <h1>ユーザー登録</h1>
    <div class="form">
        <label for="name">名前</label>
        <input id="name" type="text"/>
        <button>送信</button>
    </div>    
</div>

次に、「app > assets > stylesheets」フォルダ内の「users.scss」ファイルを開いて、CSSコードを書きます。CSSのコードは基本的に「app > assets > stylesheets」フォルダ内のファイルに記述します。以下のコードを追加してください。コピペでOKです。

body{
    margin: 0;
}
.overall{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: #F2F2F2;
}
h1{
    margin-left: 20px;
}
.form{
    margin-left: 20px;

    label{
        display: block;
    }
    input{
        display: block;
        margin-bottom: 30px;
    }
    button{
        background: #0070C0;
        color: #fff;
        font-size: 15px;
    }
}

そうするといかがでしょうか。以下のように目標としていたページが出来上がっていませんか？？

ルートページの確認（デザイン有）

デザインに不満があれば、適宜CSSをいじってみてください！

【まとめ】Ruby on Railsでページ追加方法

改めてですが、Ruby on Railsでページを追加する際には、以下の方法で

① Controller（コントローラー）の設定を行う
② ルーティングの設定を行う
③ View（ビュー）の設定を行う

この手順で行えば、ページが追加できます。お時間があれば、復習がてらもう1ページ追加してみてください。

まとめ

今回は、Ruby on Railsのファイル全体構成、MVC（Model、View、Controller）の役割、そしてページ追加方法についてご説明しました。まだ始めたばかりでよくわからないことだらけかもしれませんが、折れないでください。

以下記事にもまとめたように、「プログラミング学習はいつかブレイクスルーが来ます。」それまでじっくりと勉強していきましょう。

ブレイクスルーは必ず来る

コメント

タイトルとURLをコピーしました