Rails 5.2 + Bulmaでリストページを作る

Rails 5.2 で簡単なWikiサイトを作る - Part3

Rails 5.2 Active Record マイグレーションでコンテントデータベースを作るの続きです。

環境

• Rails 5.2.2
• ruby 2.5.1p57
• psql (PostgreSQL) 10.4

前提条件

本記事では、Rails、ruby、PGのインストールの内容を含みません。

• ruby のインストールは、こちらの記事がわかりやすかったです。
• Ruby on Rails のインストールは、こちらの記事がわかりやすかったです。

CSSフレームワークは、bulmaを利用してます。

bulmaを導入する方法はこちら!

はじめに

git commit log

ルーティングと、Controller、Viewのファイルを作ります

$ rails g controller contents index --skip-test-framework --skip-assets --skip-helper
      create  app/controllers/contents_controller.rb
       route  get 'contents/index'
      invoke  erb
      create    app/views/contents
      create    app/views/contents/index.html.erb
      invoke  assets
      invoke    js
      invoke    css

skipオプションに関しては、こんな感じです。

option	説明
--skip-test-framework	テストの作成をスキップ
--skip-assets	assetsの作成をスキップ
--skip-helper	helperの作成をスキップ

コンポーネントも作成します。

リスト表示コンポーネント作成

$ mkdir -p frontend/components/contents
$ touch frontend/components/contents/{contents.css,contents.js,_contents.html.erb}

$ mkdir -p frontend/components/content
$ touch frontend/components/content/{content.css,content.js,_content.html.erb}

import もしておきましょう。 contents.js から、 content.js を利用するため、contents.js のみを、application.js から読み込むようにします。

./frontend/components/content/content.js

import "./content.css"

./frontend/components/contents/contents.js

import "./contents.css"
import "components/content/content"

./frontend/packs/application.js

import "init";
import "components/page/page";
+ import "components/contents/contents"

app/controllers/*.rb -> views/*.erb -> components/*/*.erb の順にViewファイルを読み込んでいきます。

reder("", locals: {}) で指定することが多くなるので、helperで呼び出しやすくしてあげる。

app/helpers/application_helper.rb

module ApplicationHelper
+  def component(component_name, locals = {}, &block)
+    name = component_name.split("_").first
+    render("components/#{name}/#{component_name}", locals, &block)
+  end

+  alias :c :component
end

Controllerの設定

contents テーブル内の全てのデータを取り出して、 @contents に代入しておきます。

./app/controllers/contents_controller.rb

class ContentsController < ApplicationController
  def index
+     @contents = Content.all
  end
end

ルーティングの設定

/routes/index のパスを作っておきます。

Rails.application.routes.draw do
+   get 'contents/index'
  ...
end

Viewの設定

Viewでコンポーネントを使ったレンダリングを行う

./app/views/contents/index.html.erb

<%= c("page") do %>
  <%= c("contents", contents: @contents) %>
<% end %>

ContentリストのHTMLを組み立てる

./frontend/components/contents/_contents.html.erb

<div class="contents js-contents">
  <table class="contents--table js-contents--table table is-fullwidth">
    <thead>
    <tr>
      <th><abbr title="Id">#</abbr></th>
      <th><addr title="Title">Title</addr></th>
      <th><addr title="Body">Body</addr></th>
      <th><addr title="IsPublished">Published?</addr></th>
    </tr>
    </thead>
    <tbody>
    <% contents.each do |content| %>
      <%= c("content", content: content) %>
    <% end %>
    </tbody>
  </table>
</div>

List内のRowを作る

./frontend/components/content/_content.html.erb

<tr class="content content--row">
  <th><%= content.id %></th>
  <td><%= content.title %></td>
  <td><%= content.body %></td>
  <td><%= content.is_published %></td>
</tr>

bulmaのテーブル!

こんな感じのページになりました。

テストデータを作る

faker gemを使って、ダミーデータを作りましょう。

Gemfile

group :development do
...
  gem 'faker'
end

bundle install

console経由で、ダミーデータを追加していきます。

rails c

100.times do
  Content.create(
    title: Faker::DragonBall.character, # 適当な文字列
    body: Faker::Lorem.sentence, # 適当な文章
    is_published: Faker::Boolean.boolean # 適当にtrue/false
  )
end

irb(main):008:0> Content.count
   (3.5ms)  SELECT COUNT(*) FROM "contents"
=> 100

100個のダミーデータを作ります。確かnullも混ぜれた気がしますが、調べて出てこなかった・・・

画面を確認してみます。

こんな感じになってます。

最後に

git commit log

Wikiサービス作りました

(小さく告知させてください)
簡単なWiki検索を、社内コミュニケーションチャネルから検索できるツールで、「Poii.io」と言います。

NEXT!

モーダル形式で作成と、変更ができるようにして、削除もできるようにします。