Ruby on Rails5とは
Web アプリケーション開発のための「フレームワーク」
開発のための準備
コマンド:命令や指令のこと
このコマンドを実行することで、入力したアプリケーション名と同名のフォルダが作成され、
その中に開発に必要なフォルダやファイルが用意される。
【書き方例】
$ rails new tweet_app :アプリケーション名
開発中のアプリケーションをブラウザで表示するためには、サーバーというものを起動する必要がある。
【書き方】
$ rails server
- ↑上記のコマンドを実行するだけでOK
- サーバーを起動した後、ブラウザで「localhost:3000」というURLにアクセスすると、初期画面が表示される
TOPページを作る
トップページを作成するには、「rails generate controller home top」というコマンドをターミナルで実行する。
このコマンドを実行すると、新しいWebページが自動で作られ、
「localhost:3000/home/top」というURLにアクセスできるようになる
【注意】
rails generate controller home top :コントローラ名 :アクション名
- 「rails generate controller コントローラ名 アクション名」を実行することで、コントローラと、それに対応したファイルが自動で用意されるが、同じ名前のコントローラがすでにある場合は、そのコマンドは使うことはできない。
- リスト
ページを作成する
Railsでページを表示するには、下記の3つのファイルが必要
- ビュー(view)
- コントローラ(controller)
- ルーティング(routing)
ビュー view
ビューとは、ページの「見た目」を作るためのHTMLファイルのこと。
ビューファイルは、先ほどの「rails generate controller home top」を実行すると、
viewsフォルダの中に「homeフォルダ」と「top.html.erb」というファイルが作成される。
コントローラ controller
ページを表示するとき、Railsの中ではコントローラを経由してビューをブラウザに表示している。
コントローラフォルダの中身:「rails generate controller home top」を実行したとき、
「home_controller.rb」というコントローラのファイルが作成され、ファイルの中に「topメソッド」が追加される。
【コントローラ内のメソッド例】
class HomeController < Application Controller
def top
end
end
- のような、コントローラ内のメソッドをアクションと言う。
アクションについて
コントローラ内のアクションは、ブラウザに表示するビュー(HTMLファイル)を
ビューフォルダから探す役割を持っている。
アクションは、コントローラと同じ名前のビューフォルダから、アクションと同じ名前のHTMLファイルを探してブラウザに表示している。
ルーティング routing
ブラウザとコントローラを繋ぐ役割を担うのがルーティング。
ページが表示されるまでに、ルーティング→コントローラ→ビューという順で処理が行われている。
送信されたURLに対して「どのコントローラの、どのアクション」で処理するかを決める「対応表」のこと。
ルーティングのファイル
【書き方】
Rails application routes.draw do
get “home/top” => “home#top”
end
- :URL
- ・ :コントローラ名#アクション名
- 上記の例の場合、ブラウザから「localhost:3000/home/top」というURLが
送信されたときに、homeコントローラーのtopアクションで処理されるようになる - エラーの原因:ルーティング(対応表)に書かれていないURLにはアクセスできない
ルーティングを変える
ルーティングを書き換えることで、トップページのURLを変更できる
新しいページを追加する
新しいページを追加するには、コマンドで自動生成されていた、ルーティング、コントローラ (アクション)、ビューを自分で用意する必要がある
ルーティング・アクションを追加する
【書き方例】
<ルーティング>
Rails application routes.draw do
get “home/top” => “home#about“ 対応するルーティングアクションを追加する
end
<コントローラ>
class HomeController < Application Controller
def top
end
def about
end
end
- すでに作られているルーティングとコントローラのファイルにコードを書き足すことで、ルーティングとアクションを追加できる。
ビューを追加する
レイアウトを整える
CSSファイルは「app/assets/stylesheets」フォルダに入っている。
「rails generate controller home …」コマンドを実行したときに、
CSSファイル(home.scss)も自動生成される。
Railsでは、「stylesheets」フォルダの中に保存されているCSSファイルに
コードを書けば、すべてのビューにCSSが適用される。
画像を表示する
画像は、「public」フォルダに配置しておくと、
「<img src=”/画像名” >」や「background-image: url(“/画像名“);」のように、画像名を指定するだけで、
簡単に画像を表示することができる。
URLを変更する
「localhost:3000」でトップページが表示されるようにする。
【書き方】
<ルーティング>
【変更前】
Rails application routes.draw do
get “home/top” => “home#top” URLを「/」へ変更
end
【変更後】
Rails application routes.draw do
get “/” => “home#top”
end
リンクを作る
【書き方例】
《ビューファイル》
<a helf=”/“>Tweet app</a>
<a helf=”about”>Tweet appとは</a>
《ルーティング》
Rails application routes.draw do
get “/” => “home#top”
end
- hrefの中身をルーティングのURL部分と同じにすることで、簡単にリンク先を指定することができる。
- リスト
コメント