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

【10日間でポートフォリオ作成に挑戦】2日目:アクセス制限〜コメントのCRUD機能

概要

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

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

【10日間でポートフォリオ作成に挑戦】1日目:要件定義〜記事投稿のCRUD

今日一日の作業内容

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

非ログイン時のアクセス制限

非ログイン状態でも記事の投稿などが出来ると問題ですので、下記のコードをapplication_controllerに記述して、全てのアクションで、未ログインの場合は、ログイン画面に遷移する様にしています。

controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :authenticate_user!
end

しかし、それだと使い勝手が悪い為、投稿内容の閲覧(一覧・詳細)は、強制遷移から除外しています。

controllers/posts_controller.rb
class PostsController < ApplicationController
  before_action :authenticate_user!, :except=>[:index, :show]

seedファイルでの初期データの生成

ブラウザ上で動きを直接テストする際に、都度データを作成するのは非常に手間なので、seedファイルから初期データを投入出来る様にしました。

db/seed.rb
if Rails.env.development?
  # User
  User.create! do |user|
    user.id = 1
    user.name = '田中太郎'
    user.email = 'user_1@sink.sendgrid.net'
    user.password  = "password"
  end

  # Post
  (1..100).each do |idx|
    Post.create! do |post|
      post.user_id = 1
      post.title = "タイトルですよ#{idx}"
      post.description = "詳細ですよ#{idx}"
    end
  end

  # PostComment
  (1..100).each do |idx|
    (1..10).each do |ids|
      PostComment.create! do |comment|
        comment.user_id = 1
        comment.post_id = idx
        comment.content = "コメントですよ#{ids}"
      end
    end
  end
end

直接データを生成・削除して、データベースの内容が変わった場合にも、bin/setupコマンドを実行すれば、データベースを再構築して初期データを投入し直してくれます。

Materializeの導入

前回のタスクでCSSフレームワークに「Bootstrap」を利用すると書いていましたが、まだ「Bootstrap」は実践経験がなく、リファレンスを見ても結構なボリュームでしたので、予定を変更して、以前使用した事があるMaterializeを導入する事にしました。

Materialize

コメントのCRUD機能

そして、コメントのCRUD機能を実装しました。
こちらのコードも典型的なCRUDの処理などで省きます。

9ff230f68047ddcdcbcd9344d7c8df7b.gif

Materializeを導入したものの、フロントまで力を入れる余力が無かったので、こちらもとりあえずサーバーサイドだけ実装を行いました。

今日の失敗

renderを活用してない

この一覧表示機能についてなのですが、当初はeachで処理していました。

Screen Shot 2019-04-28 at 16.30.39.png

views/posts/index.html.haml
- @posts.each do |post|
  .div
    = post.title
    = post.description
    = link_to t('common.button.show'), post_path(post)
    = link_to t('common.button.delete'), post_path(post), method: :delete, data: { confirm: t('common.message.confirm_delete') }

しかしrenderを使えば下記の様に実装することも可能です。

views/posts/index.html.haml
= render @posts
views/posts/_post.html.haml
.post
  = post.title
  = post.description
  = link_to t('common.button.show'), post_path(post)
  = link_to t('common.button.delete'), post_path(post), method: :delete, data: { confirm: t('common.message.confirm_delete') }

こちらの方がパフォーマンスも優位性が高い為、一覧機能に関しては、この方法で実装するのが良いと考えています。

アソシエーションの組み忘れ

モデルのアソシエーションを組むのを忘れていて、エラーに遭遇する事が何度かありました。

ActiveModel::UnknownAttributeError: unknown attribute 'content' for Post.

アソシエーションについては、モデル生成と一緒に行うことを習慣化させて、この辺りの凡ミスを防いで行きたいと考えています。

フロントサイド実装の時間を見込んでいなかった

今の現場はフロントとサーバーサイドがはっきり分かれているので、そのノリでフロント実装の工数を見積もって無かった💦
それでも必須要件は終わるだろう・・・たぶん・・・

明日の予定

フロントの分でスケジュールが大幅に変更になる見通し。
下記の実装は終えたいところ。

  • 記事一覧のページネーション(kaminari)
  • 画像のアップロード機能(Shrine)
  • CKEditorによる記事の編集機能

CKEditorまで導入出来たら、一気にテストを書いていく。

※追記:三日目の記事を投稿しました
【10日間でポートフォリオ作成に挑戦】3日目:ページネーション~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