ウェブサイトを作る2　Ruby on Rails

f:id:hiroakies4463:20190110194257j:plain

どうもhiroakiです。

今回はRubyのウェブフレームワークであるRuby on Railsを用いてウェブサイトを作っていきたいと思います。progateを参考に作ってみます。よろしくお願いします。

▼前回までの記事はこちらに載せています。

hiroakies.hatenablog.com

lesson2

開発に入る前に基礎的なことを押さえましょう。Railsでは、MCVという考え方を理解することが重要です。

Model　モデル

モデルは、データを操ります。コントローラーからの命令に従って、データベースから必要な情報を取り出してコントローラーに情報を返したり、コントローラーの命令に従って、データベースに情報を書き込んだり、書き換えたりします。

Controller　コントローラ

コントローラーは、司令塔です。コントローラーの命令に従って、モデルとビューが働きます。

View　ビュー

ビューは、デザインとユーザーインターフェースを操ります。コントローラーから渡されたデータを使って、どういうページを表示するか定義します。見た目だけではなく、入力フォームなどのユーザーが触れる部分を正しく機能するように設置するのもビューの仕事です。　

router　ルーター

MCVとは別に、ルーターという重要な機能があります。webはクライアントからのリクエストに、サーバーがレスポンスすることで成立しますが、ルーターはhttpリクエストを読み取って、処理を振り分けコントローラに渡します。

以上、ブラウザでページが表示されるまでに、ルーター→コントローラ→ビューの流れで処理が行われることを押さえましょう。

参考記事：

rails-study.net

www.yuta-u.com

lesson3

次にlesson1で作ったtweet_appにトップページを作っていきます。

cd tweet_app
rails generate controller home top

1.まず、tweet_appディレクトリへ移動してください。

2.次に「rails generate（gと省略できます。生成するの意） controller home（コントローラー名） top（アクション名）」のコマンドを実行します。※同名のコントローラがすでにある場合は、このコマンドを使えません。

どうでしょう。新しいWebページが作られましたか？

「localhost:3000/home/top」のURLでアクセスしてみましょう。

次に、viewsフォルダに「homeフォルダ」と「top.html.erb」ファイルが作成されたのを確認しましょう。このtop.html.erbがトップページとしてふさわしくなるよう装飾しましょう。コードは好きなように、書いてください。何でもいいですよ。

ちなみに、拡張子erbは「Embedded Ruby（埋め込みRuby）」の略です。HTMLコードの中にRubyのコードを組み込むことができます。

<-! top.html.erb -->
<h1>自分の気持ちを正直に</h1>
<p>～書き込もう～</p>

コントローラ

「rails g controller home top」を実行すると「home_controller.rb」というコントローラファイルが作られ、下のように「topメソッド」が追加されます。このコントローラ内のメソッドを「アクション」といいます。

#home_controller.rb
class HomeController < ApplicationController
#topメソッド=アクション
  def top
  end
end

このアクションは、コントローラ名(home_controller)と同名のフォルダ(home)から、アクション名(top)と同名のファイル(top.html.erb)を探してきて、ブラウザに返します。

ルーター

ルーターは「config/routes.rb」に定義されます。実際に中身を開いて確認してみましょう。

ルーターは、送信されたURLをみて、httpリクエストをgetで受け取り、「どのコントローラのどのアクション」で処理するか決めます。「get "URL" => "コントローラー名#アクション名"」という形になっています。
例えば、ブラウザから「localhost:3000/home/top」というURLが送信されたら、ルーターがURLを読み解き、homeコントローラーのtopアクションで処理されるよう働いてくれます。

次に、このルーターを書き換え、トップページを表示するためのURLを変更してみましょう。

#route.rb
Rails.application.routes.draw do
get "top" => "home#top"
end

上記のように書き換えると、「localhost:3000/top」でトップページにアクセスできるようになります。

ちなみに下のようにすると、「localhost:3000/」でトップページにアクセスできるようになります。

#route.rb
Rails.application.routes.draw do
get "/" => "home#top"
end

lesson4

次に、サービス紹介ページ(aboutページ)を作っていきます。

先ほどのlessonを復習しながら、①ルーティングの設定②homeコントローラーの変更③ビューの作成を行いましょう。

①ルーティングの設定

#route.rb
Rails.application.routes.draw do
get "top" => "home#top"
get "about" => "home#about"
end

②homeコントローラーにアクションを追加

#home_controller.rb
class HomeController < ApplicationController
def top
end
def about
end
end

③ページビュー(about.html.erb)を作成

<-! about.html.erb -->
<div class="about-main">
<h2>TweetAppとは</h2>
<p>SNSサービスです。近況やつぶやきを投稿し、他のユーザーと楽しくコミュニケーションしましょう。</p>
</div>

lesson5

装飾

CSSファイルは「app/assets/stylesheets」に入っています。「rails generate controller home ...」コマンドで「home.scss」が自動生成されます。
「scss」はCSSを拡張したものでSassと呼ばれるものです。CSSをより効率的に書くことができるので、気になる人は下記事を参考にしてみてください。

hiroakies.hatenablog.com

では、自分なりに、トップページとサービス紹介ページのCSSを「home.scss」に記述しましょう。CSSについて忘れた人は、下記を参考に。

hiroakies.hatenablog.com