Railsオリジナルアプリケーションを作りたい!11

公開日:2019-04-15
最終更新:2019-04-15

100DaysOfCode 42/100

記事(Article)の作成

待ちに待った記事投稿機能を作っていきます。

モデルをgenerate

はじめはモデルの作成です。
必要なものは後から追加していくとして、最低限記事に必要な要素である

  • タイトル(title、String型)
  • 本文(content、Text型)

の2つを持ったArticleモデルを作っていきます。

また、記事はユーザーと1:多の関係を持っているので、user:referencesを指定してrails generateします。

バリデーション

続いてバリデーションです。
バリデーション作成はテスト駆動開発が非常にやりやすいですね。

タイトルはString型を使っているので、文字数を254文字以下に設定することにしました。

  test "記事が有効か" do  

    assert @article.valid?  
  end  

  test "記事がユーザーIDを持っているか" do  
    @article.user_id = nil  
    assert_not @article.valid?  
  end  

  test "タイトルが存在しないものを弾くか" do  
    @article.title = "   "  
    assert_not @article.valid?  
  end  

  test "タイトルが255文字以上のものを弾くか" do  
    @article.title = "a" * 255  
    assert_not @article.valid?  
  end  

  test "本文が存在しないものを弾くか" do  
    @article.content = "   "  
    assert_not @article.valid?  
  end  
validates :user_id, presence: true  
validates :title, presence: true, length: {maximum: 254}  
validates :content, presence: true  

こんな感じで設定してみました。

ユーザーページに記事一覧を表示する

細かい設定が終わったら、次はユーザーが投稿した記事の一覧を表示させてみます。
Rails Tutorial 13章の内容を参考に進めていきます。

データベースにはFakerによるダミーデータを登録しています。

見た目は悪いですが、すんなり実装できました。
問題はここからです。

記事ページを表示する

TutorialのMicropostには、単独でページとして表示するようなビューはありません。
しかし、今回作成するのは記事なので、本文(content)を見られるようにビューを作る必要があります。

そこでUserモデルとUsersコントローラを参考に、

  • Articlesコントローラにshowアクションを追加
  • showアクションのルーティング
  • 対応するビュー/articles/show.html.erbの作成

を行いました。
ここまで一気に作ったので、さっそく記事を見てみましょう!

なんと一発で成功です!

:titleに相当する「Upside Down Pineapple Cake」と、
:contentに相当する怪文書が表示されています。
この不気味な文章は、FakerのLorem Ipsum機能がなぜか無理やり日本語化されてしまった(i18nの影響?)ものです。

こちらもCSSを手直しする必要がありますね。

見た目をよりよくする

ここまで想像よりもスムーズに作業を進めることができたので、見た目を修正していきます。
Sassの編集にも少し慣れてきたので、どこを直せばうまくいくかコツがつかめてきた気がします。

投稿記事は以前Adobe XDで作成したプロトタイプを参考に作りました。

記事画面も軽く整えました。
プロトタイプを作っていないので、先にレイアウトを考えてからHTML/CSSにマークアップしていきたいと思います。

終わりに

今回はTutorialの応用となる内容でした。思っていたよりもスムーズに進めることができて嬉しいです。
Articleモデルの作成からコントローラ、ビューの編集まで一通りこなすことができたので、
学習の成果が出てきている気がします。この調子で頑張ります!

ちなみに、今回の記事を書く前後で読んだこちらの記事が非常にわかりやすく参考になりました。

次回はテストを書いたり、記事投稿機能などを実装する予定です。

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@tammcの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする