アプリ制作の大まかな流れ(Rails)
アプリケーションの生成
$ rails new アプリケーション名 -オプション名 # オプションを付けてアプリケーションを作成
→DBはMysqlにする
Gemの追加
・Gemfileに追加したいGemを記述
gem 'Gem名' # Gemの追加
・コマンド:bundle install
$ bundle install # Gemをインストール
DBの作成
・rake db:create
$ rake db:create # データベースの作成
→database.ymlに基づいて生成
ルーティングの設定
・routes.rbに記述
Rails.application.routes.draw do root 'tweets#index' #ルートパスの指定 get '/tweets' => 'tweets#index' #通常のルーティング指定。httpメソッド「get」を指定している
get 'tweets/new' => 'tweets#new' #ツイート投稿画面
post 'tweets' => 'tweets#create' #ツイート投稿機能
end
→「localhost:3000」や「pictweet.me」のように、パスを付けないホスト名だけのURLのことをルートパスと言う
コントローラの作成
・rails g controller コントローラ名
$ rails g controller コントローラ名 # コントローラを作成
$ rails g controller tweets --no-helper --no-assets
例:rails g controller tweets
→オプション: --no-helper --no-assets とかでhelper, assetsファイルが生成されない
→rails d controller コントローラ名 でコントローラを作成した際に自動的に作られた関連ファイルも同時に削除される
アクションを記述
・コントローラファイルにアクション(インスタンスメソッド)を記述
class TweetsController < ApplicationController def index end end
ビューの作成
・直に追加(@views→コントローラ名→アクション名.html.erb)
例:views→tweets→index.html.erb
コントローラのメソッドひとつにつき、ひとつ存在
・レイアウトファイル
→レイアウトファイルはビューファイルが読み込まれる前に読み込まれる。つまり、このファイルに各ビューの共通部分を定義しておくと、同じコードを省略できる
@views→layouts→application.html.erb
<!DOCTYPE html> <html> <head> <title>PicTweet</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <%= yield %> #<=ここに各ビューファイルが入る </body> </html>
→レイアウトファイル(application.html.erb)内の <%= yield %> に各ビューファイル(例:index.html.erb)が入る
テストサーバー起動
・rails sコマンドして、http://localhost:3000にアクセス
モデルの作成
・rails g model モデルクラス名(すべて小文字)
$ rails g model tweet # Tweetモデルを作成
種類 | 概要 | 名前例 |
---|---|---|
モデルクラス名 | 先頭は大文字、単数形 | Tweet |
モデルクラスのファイル名 | 先頭は小文字、単数形 | tweet.rb |
テーブル名 | 先頭は小文字、複数形 | tweets |
→rails d model モデルクラス名 でモデルを作成した際に自動的に作られた関連ファイルも同時に削除される
・migrationファイルが作られる(@db/migrate)
→マイグレーションファイル…テーブルの設計図
・changeメソッドで、作成するカラムを指定することができる
db/migrate/2014XXXXXXXXXXXX_create_tweets.rb
class CreateTweets < ActiveRecord::Migration def change create_table :tweets do |t| t.string :name t.text :text t.text :image t.timestamps end end end
・テーブル作成を実行
$ rake db:migrate # マイグレーションファイルの実行
→rake db:rollback でやり直し。migrationファイルは残るが直前のマイグレートを取り消す
スキーマファイル
・schema_migrationsとはデータベースの変更履歴
*****************データを表示する********************
アクションにインスタンス変数を設定
・コントローラのアクションで定義したインスタンス変数はそのアクションに対応したビューでのみ呼び出せる
class TweetsController < ApplicationController def index @tweet = Tweet.find(3) end end
対応したビューで表示
app/views/tweets/index.html.erb
<div class="contents row" > <p><%= @tweet.text %></p> </div>
複数のデータをビュー
app/views/tweets/index.html.erb
<div class="contents row" > <% @tweets.each do |tweet| %> <p><%= tweet.text %></p> <% end %> </div>
*****************レイアウトを変更する********************
ヘルパーメソッド
・simple_format
①改行は<br/>を付与
②文字列を<p>で括る
・form_tag(フォームを出現させるメソッド)
・link_to(aタグを出現させるメソッド)
・stylesheet_link_tag
<head> <title>Pictweet</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head>
→application.cssを読み込む
・require_tree
app/assets/stylesheets/application.css
/* ## 中略 ## * *= require_tree . *= require_self */
→引数として与えられたディレクトリ以下のcssファイルをアルファベット順に全て読み込む。「.」はカレントディレクトリ。
*****************機能の実装********************
1.ユーザーがフォームに入力した情報は、どのようにRails側に送られるのか?
→name属性の属性値をキーとして、paramsというハッシュに格納される
2.Rails側ではどのように情報を受取り、テーブルにレコードとして保存するのか?
→params[:キー名]として扱う テーブルにレコードを保存する
・フォームに入力した情報をコントローラで取得
→paramsというハッシュ(?)に入ってる。キーはinputタグのname属性の属性値
params[:name] =>"abe" params[:text] =>"hello"
<div class="contents row"> <%= form_tag('/tweets', method: :post) do %> <h3> 投稿する </h3> <input placeholder="Nickname" type="text" name="name"> <input placeholder="Image Url" type="text" name="image"> <textarea cols="30" name="text" placeholder="text" rows="10"></textarea> <input type="submit" value="SENT"> <% end %> </div>
・レコードを新規作成するアクションを定義
app/controlers/tweets_controller.rb
def create Tweet.create(name: params[:name], image: params[:image], text: params[:text]) end
↓
・ストロングパラメーターを設定
app/controlers/tweets_controller.rb
def create Tweet.create(tweet_params) end private def tweet_params params.permit(:name, :image, :text) end
ビューファイルの設定
・views>tweetsにビューファイル(create.html.erb)を作成
→アクション名に即した名前をファイル名にする
*****************デバッグ********************
pry-railsはRails向けに開発されたデバッグツール(Gem)