読者です 読者をやめる 読者になる 読者になる

知行合一

とか言ってみる

【Ruby on Rails】はじめてのrails

ひたすらメモ。
勉強元
http://prog-8.com/rails/study/


  • `rails new アプリケーション名` でRailsアプリケーションを作成できる
  • `rails server` でサーバを用意する
  • `rails generate controller home top`でコントローラとそれに対応したビューのファイルを自動生成してくれる
  • アプリケーション作成時にたくさんファイルができるが基本的には`app` フォルダを中心に編集
  • ページを表示するには`コントローラ`と`ビュー`の2つのファイルが必要。コントローラにはURL(リクエスト)に応じて処理をするための「アクション」を書く。ビューにはブラウザに表示するHTMLを書く。
  • クライアントからのリクエストに対してコントローラの1つのアクションに送信され、そこで処理が行われる。アクションは対応するビューを探しブラウザにビューの内容を送信する。
  • コントローラは
 def top
 end

end

のようにリクエストに対応するアクションが書かれていている。

  • 上記だと`~~/home/top`にページが表示される。
  • ページを表示するためには「ルーティング」の設定も必要。ルーティングとは「リクエストに応じてどのコントローラのどのアクションで処理するか」を決める仕組み
  • ルーティングの設定は`config/routes.rb`で行う。「get 'URL' => 'コントローラ名#アクション名'」で指定したURLが、ユーザーの入力したURLと一致した場合、指定のコントローラにリクエストが送信される。
  • アクションは「ファイル名を手掛かりにビューを探す」のでビューのフォルダ名とファイル名はそれぞれコントローラ名とアクション名に対応させる必要がある。

「ビューのフォルダ名 = コントローラ名」
「ビューのファイル名 = アクション名」
って感じかな...

ex. aboutページを作るときーーーーー

  • ルーティングの設定 (routes.rb)
Rails.application.routes.draw do
  get '/top' => 'home#top'
  get '/about' => 'home#about'  
end
  • アクションの作成 (home_controller.rb)
class HomeController < ApplicationController
  def top
  end

  def about
end
  
end
  • ビューの生成

app/views/home/にabout.html.erbを生成。
中身を適当にHTMLで何か書く

ーーーーーーーーーー

  • stylesheetsは「app/assets/stylesheets」フォルダにある。
  • rails generate contrllerした時点でcssファイルが自動生成されている
  • HTML内にRubyを書くには`<% %>`か `<%= %>`で囲う。
  • `<%= %>`だとブラウザに表示されるが=をつけないと表示されない
  • アクションの中で「@変数名」として変数を定義すると、ビューでその変数を使えるようになる
  • リンク生成は`link_toヘルパー`を使う

「<%= link_to "表示するテキスト", "URL" %>」というように一つ目の引数に「表示するテキスト」、二つ目の引数に 「URL」を指定する

  • ルーティングで設定した各URLには「名前付きルート」が割り振られる。rake routesで確認出来る(一番左のやつに`_path`をつけたもの)。
  • リンクの送信先のURLなどは名前付きルートを使って指定する
  • rootパスに対応するルーティングは「root 'コントローラ名#アクション名'」で名前付きルートは「root_path」になる。

ex.

get '/top' => 'home#top'

root => 'home#top'
  • ビューの共通部分は(header, footerなど)は「application.html.erb」にHTMLを書くと適用できる。
  • 「application.html.erb」のタグの中では、`stylesheet_link_tag` と `javascript_include_tag `というヘルパーを使って、`application.css` と ` application.js` を読み込んでいる。
  • app/assets/javascripts/application.js, app/assets/stylesheets/application.cssというディレクトリ構造。

application.cssはstylesheets内の全てのcssを読み込んでいるので、結果的にはどのcssに書き込んでも適用される。jsも同様。