\ プログラミング学習奮闘記録 /

Progate学習メモ Ruby on Rails5【SNSを作る①】

目次

Ruby on Rails5とは

Web アプリケーション開発のための「フレームワーク

開発のための準備

STEP
「rails new アプリケーション名」というコマンドをターミナルで実行する

コマンド:命令や指令のこと

このコマンドを実行することで、入力したアプリケーション名と同名のフォルダが作成され、

その中に開発に必要なフォルダやファイルが用意される。

【書き方例】

$ rails new tweet_app     :アプリケーション名

STEP
サーバーを立ち上げる

開発中のアプリケーションをブラウザで表示するためには、サーバーというものを起動する必要がある。

【書き方】

$ 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

  • すでに作られているルーティングとコントローラのファイルにコードを書き足すことで、ルーティングとアクションを追加できる。

ビューを追加する

STEP
ファイルを作成したいフォルダの上で右クリック
STEP
メニューから「新規ファイル」を追加
STEP
ファイル名を入力

レイアウトを整える

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部分と同じにすることで、簡単にリンク先を指定することができる。
  • リスト
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次