memo_app

(2)Ruby on Railsでメモアプリを作成

masahide

エストニアにKoronCoron OÜ設立|親子向けノーコード教育事業展開、Webアプリケーション受託、デザイン修正などを展開 朝活コミュニティの運営もしているので、興味のある方はTwitterのDMにて承ります。

スポンサーリンク

今回はモデルの作成とフォームの作成を行い、実際にデータベースに情報を保存できるようにします。

モデルの作成

$ rails g model post

migrateファイルやmodel/post.rbが作成されました。db/migrate/~~_create_posts.rbはデータベースの設計図のようなもので、このファイルの中身を弄ってmigrateコマンドを入力することにより、データベースが定着します。

db/migrate/20200623234501_create_posts.rb

class CreatePosts < ActiveRecord::Migration[5.2]
 def change
   create_table :posts do |t|
     t.text :content
     t.timestamps
   end
 end
end

postsテーブルにcontentカラムを追加します。

$ rails db:migrate

create_tableとでればOKです。

migrateファイル確認方法

migrateをしたけどカラム名が間違っていた!型の指定が違った!なんて時はすぐに削除したりするのはNGです。schema.rbというファイルの中身とデータベースの情報に差異が生まれ、エラーが出てしまうからです。

$ rails db:rollback
$ rails db:migrate:status

上記の2つのコマンドをターミナルで入力すると、Statusがdownになっていることが確認できると思います。これはrails db:migrate前に戻したよという意味なので、migrateファイルを修正して、もう一度migrateしなおせばOKです。

  • $ rails db:migrate ・・・migrateファイルを定着させる
  • $ rails db:rollback ・・・定着を解除する
  • $ rails db:migrate:status migrate状態の確認

テーブルにデータを保存する

テーブルにデータを入れる方法はいろいろあります。

  • Sequel Proに直接入力
  • コンソールから挿入
  • seed.rbに記入して流し込む

しかし今回はcontentカラムだけなのでテストデータを流さずに、フォーム作ってそこから一つづつ挿入して行きます。

投稿ページの作成

app/views/memo/new.html.haml

<h1>投稿ページ</h1>
 <%= form_tag('/posts', method: :post) do %> 
 <input type="text" name="content"> 
 <input type="submit" value="投稿する">
<% end %>
<%= link_to 'トップページ', '/' %>

投稿ページにアクセスするとフォームと投稿ボタンができていると思います。しかし今のままでは、投稿してもデータを定着させる記述がないためエラーが出てしまいます。

投稿を保存する設定(createアクション)

app/controllers/memo_controller.rb

class MemoController < ApplicationController

  def index
  end

  def new
  end

  def create
    Post.create(post_params)
    redirect_to root_path
  end

  private
    def post_params
   params.permit(:content)
  end

end

createアクションで投稿を定着させます。(post_params)というメソッドをprivate以下に書くことにより、他のアクションでも使い回しが利くようになり便利です。redirect_toという記述がありますが、こちらは保存した後にどこに遷移するかを指定できます。今回はトップページに戻りたいので、root_pathとしています。

config/routes.rb

Rails.application.routes.draw do
 root to: "memo#index"
 resources :memo, only: [:new, :create]
end

resourcesにcreateを追加します。

app/controllers/memo_controller

class MemoController < ApplicationController

  def index
    @posts = Post.all
  end

  def new
  end

  def create
    Post.create(post_params)
    redirect_to root_path
  end

  private
    def post_params
   params.permit(:content)
  end

end

トップページでpostテーブル情報が呼べるように@postsに代入します。
@posts :代入先
Post.all :Postテーブル情報を全て取得

app/views/memo/index.html.erb

<h1>Memo app</h1>
 <% @posts.each do |post| %>
 <ul>
     <li>
       <%= post.content %>
     </li>
 </ul>
<% end %>
<%= link_to '新規投稿', '/memo/new' %>

postテーブルに保存されている内容を全て取り出して表示します。縦並びに表示したいので、<ul><li>で囲んでいます。こちらはの表示方法はお好みで大丈夫です。

これで一通りの投稿機能の実装が終わりました。次回は編集機能を追加したいと思います。

ここまで読んでいただきありがとうございます。間違いがあれば指摘していただけると助かります。

スポンサーリンク

  • この記事を書いた人

masahide

エストニアにKoronCoron OÜ設立|親子向けノーコード教育事業展開、Webアプリケーション受託、デザイン修正などを展開 朝活コミュニティの運営もしているので、興味のある方はTwitterのDMにて承ります。

-memo_app
-, , , ,

© 2024 まさブログ Powered by AFFINGER5