FullStackEngineer 2022年2月12日更新

見た目を開発する。

Index

一週間のカリキュラム 1週間で、Ruby 〜 Ruby on Railsまでを学ぶ

シリーズの4日目、見た目の調整をしていきます。

4日目


見た目のデザイン

一通り機能を追加してきましたので、今回からは見た目を触っていきます。 前回やれなかったページング部分をまずは実装して、デザインに移りたいと思います。

  • 1 ページングの追加
  • 2 見た目のデザイン変更の為にSCSSを追加
  • 3 jsを利用する。

1 ページングの追加

gem 'kaminari'

  bundleインストールとコンフィグを設定

$ bundle install

$ bin/rails g kaminari:config

app/controllers/articles_controller.rb


def index if params[:category_id] then @articles = Article.where(category_id: params[:category_id]) elsif params[:search_word] then @articles = Article.where("title LIKE ?", "%#{params[:search_word]}%") else @articles = Article.all end # これ追加 @articles = @articles.page(params[:page]).per(2) #記事が少ない場合 per(2)などでページング状態にあるか確認 end

ページングの内容を変えたい場合はここを適宜、コメントアウト config/initializers/kaminari_config.rb

# frozen_string_literal: true

Kaminari.configure do |config|
  # config.default_per_page = 25
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.max_pages = nil
  # config.params_on_first_page = false
end

config変更した場合はサーバーを再起動してください。

2 見た目のデザイン変更の為にSCSSを追加

Railsに限らず、デザイン装飾方法は色々あります。 自身でスタイリングしても良いですし、CSSフレームワークを利用するのも良いでしょう。

今回は、他のフロントでも利用するwebpackを使います。

2-1 SCSSの記載と変換

app/assets/stylesheets/application.css こちらにCSSを書けばスタイリングができますが、cssをそのまま使わず、SCSSで記載できるようにしましょう。

gemパッケージを追加

gem sass-rails
$ bundle install

app/assets/stylesheets/article.scss

例としてh1の色を変えたり・・・・


body { h1 { color: #fff000; } }

Railsによって、特にインポート統合などせずにSCSSファイルを追加した分、反映されます。

2-2 bootstrap を利用する。

スタイリングをさらに楽にする為にbootstrapを入れる事もできます。

gem 'bootstrap-sass'
gem "jquery-rails"

bundle installを忘れずに

bootstrapを利用できるようにimportしておきます。

app/assets/stylesheets/application.css ↓ファイル名をscssに変更 app/assets/stylesheets/application.scss

で、こちらを追加しましょう。

@import "bootstrap-sprockets";
@import "bootstrap";

また、この時点ではstylesheetsにあるscss,css系のファイルを全て読み込みますので @importスタイルで進めたい場合は app/assets/stylesheets/application.scssの中の一部を削除しましょう。 ↓これ

 *= require_tree .
 *= require_self

jqueryとsprocketsが必要ですので下記を追加しておきます。 app/javascript/application.js

//= require jquery
//= require bootstrap-sprockets

このGemでインストールされるbootstrapは2022年の時点では3.4のようです。 下記のドキュメントを参考にレイアウトを進めましょう。

Bootstrap 3.4 ドキュメント

これで、一通り、スタイリングできる環境が整いました。 次の3の部分はjsを利用できる環境の確認、構築になりますので、一旦飛ばしても問題ありません。

3 jsを利用する。

※スタイリングのみであれば、ここは一旦とばしても問題ありません。

3-1 stimulusを利用する。

初期の段階でstimulusが使えるようになっています。 stimulusはHtmlタグに data-**** などの要素を加えてjsからコントロールをするフレームワークになります。

初期の段階でHello world! を表示するjsが仕込んであるので app/javascript/controllers/index.js

テンプレートのどこかに

<div data-controller="hello"></div>

と設定してみましょう。 Hello・・・と表示されると思います。

VueやReactを利用しないのであれば、このままstimulusはコード記述量の意味でも そのまま利用しても良いかもしません。

3-2 別手段、webpackのインストールとjsパックの確認

Railsでもwebpackを便利に利用できます。

※nodeが入ってる前提。 yarnをインストール

$ brew install yarn

webpackerを追加し

gem 'webpacker'

インストール

$ bin/rails webpacker:install

適当なテストjsを作り app/javascript/packs/article.js

console.log("test");

テンプレートに追加、先程のファイル名がインポート指定する名前です。 app/views/layouts/application.html.erb

<%= javascript_pack_tag "article" %>

webpackサーバーを起動、(rails serverと別に起動します。)

$ bin/webpack-dev-server

これでjsがパックされます。

3-3 補足

reails-webpackに合わせて、その他、フロントフレームワークを利用する方法

補足

今回は取り扱いませんが、bootstrap5を使って開発を進める場合は下記をご確認ください。

最新記事一覧

続きを見る

関連コンテンツ

カテゴリー一覧

TOP フルスタックエンジニアを目指すに方々へ 2022年2月27日 Railsで、ドキュメントを書く,ログ管理をする