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

**[Rails 5.2 で簡単なWikiサイトを作る](https://qiita.com/fukmaru/items/625845471df2110cc718) - Part3**

[Rails 5.2 Active Record マイグレーションでコンテントデータベースを作る](https://qiita.com/fukmaru/items/cca06609157d2223af6f)の続きです。

# 環境

- `Rails 5.2.2`
- `ruby 2.5.1p57`
- `psql (PostgreSQL) 10.4`

# 前提条件

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

- ruby のインストールは、[こちら](https://qiita.com/Alex_mht_code/items/d2db2eba17830e36a5f1)の記事がわかりやすかったです。
- Ruby on Rails のインストールは、[こちら](https://qiita.com/yoshiokatsuneo@github/items/d75d4fef9e75afb65126#rails%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)の記事がわかりやすかったです。

## CSSフレームワークは、bulmaを利用してます。
bulmaを導入する方法は[こちら](https://qiita.com/fukmaru/items/cd9c1c9c8658ac4a0a89#_reference-cab064a3295de148dcde)!

# はじめに

[git commit log](https://github.com/fukmaru/wiki/commit/f97a22a870942010f619294a10f0c7fbb27e3cdb)

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

```bash
$ 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
```

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

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

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

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

```bash
$ 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` から読み込むようにします。 

```js:./frontend/components/content/content.js
import "./content.css"
```

```js:./frontend/components/contents/contents.js
import "./contents.css"
import "components/content/content"
```

```js:./frontend/packs/application.js
import "init";
import "components/page/page";
+ import "components/contents/contents"
```

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

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

```rb: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` に代入しておきます。

```rb:./app/controllers/contents_controller.rb
class ContentsController < ApplicationController
  def index
+     @contents = Content.all
  end
end
```

# ルーティングの設定

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

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

# Viewの設定

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

```erb:./app/views/contents/index.html.erb
<%= c("page") do %>
  <%= c("contents", contents: @contents) %>
<% end %>
```

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

```erb:./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を作る

```erb:./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のテーブル](https://bulma.io/documentation/elements/table/)!

こんな感じのページになりました。
<img width="941" alt="スクリーンショット 2019-04-29 11.58.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263973/42f0bb8c-691e-175b-e59a-f8623df10bc0.png">


# テストデータを作る

[faker gem](https://github.com/stympy/faker)を使って、ダミーデータを作りましょう。

```rb:Gemfile
group :development do
...
  gem 'faker'
end
```

```bash
bundle install
```

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

```bash
rails c
```

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

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

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

## 画面を確認してみます。

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

<img width="941" alt="スクリーンショット 2019-04-29 12.03.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/263973/a1ef3501-f79a-bf62-5c2d-699a217a09eb.png">


# 最後に

[git commit log](https://github.com/fukmaru/wiki/commit/f97a22a870942010f619294a10f0c7fbb27e3cdb)

# Wikiサービス作りました

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

# [NEXT!](https://qiita.com/fukmaru/items/9f59511463dded5e0ec1)

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