Help us understand the problem. What is going on with this article?

【10日間でポートフォリオ作成に挑戦】3日目:ページネーション~CKEditorの導入

概要

今回は、2019年のGW期間(10日間)を全て費やして取り組むポートフォリオの製作過程を取りまとめた内容を投稿させて頂きます。(投稿は毎日行う予定)

全体通した取り組みの詳細については、前回までの記事をご参照ください。

【10日間でポートフォリオ作成に挑戦】1日目:要件定義〜記事投稿のCRUD
【10日間でポートフォリオ作成に挑戦】2日目:アクセス制限〜コメントのCRUD機能

今日一日の作業内容

ここからは、今日1日で取り組んだ作業内容をご説明します。

ER図の修正

前回作成したER図ですが、かなり見辛いのと、userとpostの中間テーブルが1対多の方向が誤って逆になっていた為、修正を行いました。

↓変更前
Screen Shot 2019-04-27 at 11.57.34.png

↓変更後
Screen Shot 2019-04-29 at 18.54.30.png

個人開発かつ、そこまで規模大きく無い為、別に綺麗する必要は無かったかもしれませんが、こちらの方が気持ち良いので、モチベーション的にやって良かったと思ってます!!

ページネーションの実装

続いて記事一覧のページネーションを実装します。
実装にはgemのkaminariを利用しています。

gem 'kaminari'

kaminariでは、下記の様にコードを一部変更するだけで、ページネーションを実装することが可能です。

↓変更前

controllers/pots_controller.rb
def index
  @posts = Post.all
end
views/posts/index.html.haml
= render @posts

↓変更後

controllers/pots_controller.rb
PER = 10

def index
  @posts = Post.page(params[:page]).per(PER)
end
views/posts/index.html.haml
= render @posts
= paginate @posts

5c753eeedbdf182b66791aa982cdaabb.gif

Materializeのデフォルト設定で、レイアウトがお洒落になっていますが、これでページネーションのサーバーサイドは完成です。

CKEditorの導入

続いてCKEditorを導入します。

CKEditorとは、WYSIWYGエディタと呼ばれるユーザーにリッチな編集フォームを提供するツールです。
CKEditor 5

↓はてなブログとかのこんなの
Screen Shot 2019-04-29 at 20.33.35.png

今回は記事の詳細をリッチに編集できる様にすべく導入しました。

導入には、フロントサイドのパッケージマネージャーであるyarnを利用しています。

yarn init
yarn add ckeditor

今日の失敗

ここからは今日の失敗を紹介します。

テストコードを事前に書いておけば良かった

CKEditorを導入すると、それまでの動作が大きく変化して修正が面倒になると考え、CKEditorでの記事作成/編集機能が完成するまでは、テストコードは書かないと行こうと考えていました。

しかし、実際に実装を行って見ると、機能を追加する度にブラウザでチェックする手間が発生し、また、どの機能が動作不全に陥っているか直ぐに特定出来ず、そこで時間を割かれてしまいました。

また、CKEditorの導入で動作が変わると言っても、根幹の部分は変わらないので、少しの修正だけで済んだと思われるので、テストを書かなかったのは、タイムロスだったと感じています。

せめて単体テスト・統合テストのどちらかだけでも、事前に書いておけば良かったと考えています。

現在の職場ではテストコードを必ず書く運用になっていますが、改めてテストコードの有用性を実感しました。

データベースの構成をER図の通りにすべきだった

ER図にある通り、記事の詳細については、Postテーブルと分けて管理する構成にしています。

Screen Shot 2019-04-29 at 18.54.30.png

しかし、実際に分けるのは、CKEditorを導入してからで良いと考えて、記事のCRUDを実装する際には、同じPostテーブル上で管理していました。

これが、後々の修正を面倒にしてしまいました。
例えば下記のコードです。

views/posts/_post.html.haml
= post.title
= post.description

descriptionを別テーブルに分けると、この部分の修正が必要になります。
また、viewファイルにdescriptionの情報を渡すために、コントローラーの修正も必要です。

そもそも、分けた状態で記事のCRUDを実装する事も出来たので、二度手間な判断をしてしまったと反省しています。

この一件で、下記の一文を思い出しました。

早くできるからと手を抜いてコードを書くと、機能追加やコードのリファクタリングが難しくなります。

プログラマが知るべき97のこと(分別のある行動)にも
以下の様に書かれています。

今後は拙速に走り過ぎず、先を見越した実装を行って行きたいと考えています。

明日の予定

かなり無茶な計画を立ててしまったと、今になって思い出したので、工数の見積もりを修正して行きたいと思います。

とりあえず下記を目標とする。

  • 画像のアップロード機能(Shrine)
  • CKEditorによる記事の編集機能
  • 記事の検索機能(ransack)

そしてテストコードを早く書こう・・・テストが無いと駄目だ・・・やってられん・・・テスト・・・

※追記:四日目の記事を投稿しました
【10日間でポートフォリオ作成に挑戦】4日目:テーブル分割〜CKEditorのフォームへの反映

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away