IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

Hacker News クローンアプリを作ってみる 【その1】

はじめに

ここでは、以下の動画を参考にして Hacker News クローンアプリを作ってみることにする。この記事では、リンクの CRUD 機能を作成していく。なお、ソースコードGitHub で公開されている。

 

作ってみる

ざっくりとアプリを作成する。

  • rails new hacker_news_clone
  • cd hacker_news_clone

 

Link モデルを作成する。

  • bin/rails g model Link title:string url:string
  • bin/rails db:migrate

 

Links コントローラを作成する。

  • bin/rails g controller Links

f:id:matt-note:20190303152504p:plain

 

config/routes.rb を編集して、ルーティングの設定を行う。

f:id:matt-note:20190303152555p:plain

 

ビューファイルを作成する。

  • touch app/views/links/index.html.erb

 

サーバーを起動して、アクセスしてみる。

f:id:matt-note:20190303152417p:plain

 

リンクの投稿用ページを作成する。

コントローラを編集する。

f:id:matt-note:20190303152819p:plain

 

対応するビューを作成する。

  • touch app/views/links/new.html.erb

f:id:matt-note:20190303153217p:plain

 

simple_form を使う。【参考:GitHub

  • echo "" >> Gemfile
  • echo "gem 'simple_form'" >> Gemfile
  • bundle

 

simple_form のジェネレーターを使う。

  • bin/rails generate simple_form:install --bootstrap

 

bootstrap を使う。【参考:GitHub

  • echo "gem 'bootstrap'" >> Gemfile
  • echo "gem 'jquery-rails'" >> Gemfile
  • bundle

 

SCSS ファイルを使う。

  • mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
  • echo "@import 'bootstrap';" > app/assets/stylesheets/application.scss

 

app/assets/javascript/application.js を編集する。

f:id:matt-note:20190303170739p:plain

 

フォームを作成する。

コントローラで、ビューで使う値を設定しておく。

f:id:matt-note:20190303172236p:plain

 

app/views/links/new.html.erb を編集してフォームを作成する。

f:id:matt-note:20190303172301p:plain

 

ざっくりとフォーム部分だけ作成できた。

f:id:matt-note:20190303172338p:plain

 

フォーム投稿時の処理を設定する。ここで使う create アクションでは主に、①フォームの値を検証して、データを受け取って、②DBにデータを投入して、③リダイレクトするという処理を記述する。

f:id:matt-note:20190303173639p:plain

 

リダイレクトで使う index アクションを編集する。index アクションでは、Link のデータを DB からすべて取り出すことにする。

f:id:matt-note:20190303173834p:plain

 

ビューでは、このデータをすべて表示してみる。登録したデータは、link.title のようにして表示させることができる。

f:id:matt-note:20190303173920p:plain

 

サーバーを再起動して、データを投稿してみる。

f:id:matt-note:20190303174630p:plain

f:id:matt-note:20190303174713p:plain

-> フォームからリンクを投稿して、データベースにデータを投入して、データベースからデータを取り出して、ビューでデータを表示できるようになった。

 

表示するデータの並べ替えを行う。ここでは、新しく作成された投稿を上に表示する設定にしてみる。

f:id:matt-note:20190303180156p:plain

f:id:matt-note:20190303180224p:plain

-> created_at 列の値によって、降順にデータを並び替えることができた。

 

投稿データに対する個別のリンクを作成する。

index.html.erb で link_to メソッドを使う。

f:id:matt-note:20190304140226p:plain

 

個別のリンクを動作させるため、コントローラの show アクションを作成する。

f:id:matt-note:20190304140739p:plain

 

show.html.erb を作成する。

  • touch app/views/links/show.html.erb

f:id:matt-note:20190304140951p:plain

f:id:matt-note:20190304141032p:plain

-> 個別リンクで動作するページを作成できた。

 

登録したデータを変更する機能を作成する。

コントローラで edit アクションと update アクションを作成する。

これらのアクションでは主に、①変更したいデータをDBから探す、②投稿データを検証して、DBの値を変更する、③最後にリダイレクトする、という処理を行う。

f:id:matt-note:20190304142149p:plain

 

登録データの変更用フォームを作成する。

  • touch app/views/links/edit.html.erb

f:id:matt-note:20190304142600p:plain

f:id:matt-note:20190304142644p:plain

-> 登録したデータの変更機能を作成することができた。

 

リンクを削除する機能を作成する。

コントローラに destroy アクションを作成する。ここでは、①削除したいデータをDBから探して、②データを削除して、③メッセージを付けてリダイレクトする、という処理を行う。

f:id:matt-note:20190304145623p:plain

 

show.html.erb でリンクを作成する。

f:id:matt-note:20190304145813p:plain

 

application.html.erb では、メッセージを表示させることにする。

f:id:matt-note:20190304153734p:plain

f:id:matt-note:20190304153952p:plain

-> 登録したデータを削除する機能を作成することができた。

 

ここまでで、投稿したリンクについての CRUD 機能を作成することができた。

 

続き