LoginSignup
0
0

More than 5 years have passed since last update.

rails、君に決めた!!~8[wip]

Posted at

一連の記事の目次
rails、君に決めた!!~目次

View

基本の理解

テンプレートエンジン(ERB,Haml,Slim)

変数を埋め込んだり条件分岐を記述して、動的にページを生成する雛形のこと

格テンプレートエンジンの特徴

  • ERB(Embedded Ruby)

  • Haml

  • Slim

結局どれを使う?

今回はSlimを利用する

Gemfile

gem 'slim-rails'

を追記し、bundle installしておく

部分テンプレートで共通化

Djangoで言う所のBase.htmlみたいなもの。複数の画面で共通している部分を共通化、再利用できるようにする仕組みを部分テンプレート、またはパーシャルと呼ぶ。

部分テンプレートは_comment.html.slimのように、アンダースコアで始まるファイル名にする

部分テンプレートを呼び出す場合はapp/views/articles/index.html.slim

= render partial: 'comment', locals: { comment: @comment}

partialオプション
部分テンプレートを指定する。ファイル名にはアンダースコアがつかないことに注意
localsオプション
部分テンプレート内に変数を渡すことができる。{部分テンプレート内で参照する変数名:渡す変数}のハッシュ形式で指定。

部分テンプレートの注意点

  • パフォーマンスの劣化 少し遅くなる、くらいは覚えておいた方がいいかも
  • インスタンス変数を参照しない 部分テンプレート内では@から始まるインスタンス変数を参照しないようにする。 部分テンプレートの再利用性が低下してしまう、らしい。よくわからない。。

部分テンプレートの置き場

レイアウト

コントローラ単位でのレイアウト設定

管理者用画面、エラー画面などは一般ユーザ用画面と異なるレイアウトにしたいよね?ってとき。
app/views/layouts/books.html.slimファイルを追加し、
app/controllers/books_controller.rb

class BooksController < ApplicationController
  layout 'books'

  def index

  end
end

上記のようにコントローラ内でlayoutを宣言することでレイアウトファイルを切り替えられる。

content_for

格viewは、layoutの= yieldに挿入されるけど、titleとか変えたい場合どうすればいいの?を解決してくれる。

作ってみる

slimをデフォルトにする

rails generateなどのコマンドで生成されるデフォルトのテンプレートエンジンをslimに設定する。
config/application.rb

module RailsApp
  class Application < Rails::Application
    # デフォルトのテンプレートエンジンの追加設定
    config.generators.template_engin = :slim
  end
end

既存のERBファイルをSlimにするため、html2slimというgemを使う。

gem install html2slim

本には

gem install erb2slim

と書いてあるが、インストールしてもcommand not foundとなるだけだった。誤植?

app/views以下のerbファイルを変換

# -dを付けるとslimに変換した後にerbを削除する
erb2slim app/views app/views -d

ビューの作成

bin/rails g controller users index show

以前にも同じコマンドを実行しているのでコンフリクトするが、上書きしてしまう。

app/controllers/users_controller.rb
app/views/users/index.html.slim
app/views/users/show.html.slim
などが生成される。

config/routes.rbを編集
resourcesメソッドを使う形にする(以前変更したのと同じ)

Rails.application.routes.draw do
  # get 'users/index'
  # get 'users/show'
  resources :users, only: [:index, :show]
end

ビューの命名規則

layoutの作成

部分テンプレートの作成

CSS/JavaScriptの読み込み

flash

ヘルパー

ビューヘルパー

フォームヘルパー

オリジナルのヘルパー

Ajax処理

スマホ用レイアウト

多言語化対応

パフォーマンスチューニング

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0