ギークなエンジニアを目指す男

基幹系SIerが機械学習系の知識を蓄えようとするブログ

MENU

ドットインストールで作るブログアプリその4(RubyonRails)

例のごとくドットインストールのRails5の動画を元に学んでいきます!
本日は14章からの部分です。

前回記事はこちら taxa-program.hatenablog.com

記事追加リンクの作成

下記ファイルにAdd Newのリンクを作成します。
rails_lessons/myblog/app/views/posts/index.html.erb

<h2>
  <%= link_to 'Add New', new_post_path, class: 'header-menu' %>
  My Posts
</h2>

さらに、cssにheader-menuの属性を定義します。
rails_lessons/myblog/app/assets/stylesheets/application.css

.header-menu {
  font-size: 12px;
  font-weight: normal;
  float: right;
}

リンクに対するアクションの作成

newアクションとcreateアクションを定義します。
ここでなぜnewとcreateなのかというと、ルーティングに定義されているからです。
ここでもう一度ルーティングを確認してみます。

   Prefix Verb   URI Pattern               Controller#Action
    posts GET    /posts(.:format)          posts#index
          POST   /posts(.:format)          posts#create
 new_post GET    /posts/new(.:format)      posts#new
edit_post GET    /posts/:id/edit(.:format) posts#edit
     post GET    /posts/:id(.:format)      posts#show
          PATCH  /posts/:id(.:format)      posts#update
          PUT    /posts/:id(.:format)      posts#update
          DELETE /posts/:id(.:format)      posts#destroy
     root GET    /                         posts#index

3行目と4行目に当たる部分です。
ではアクションを定義していきます。

rails_lessons/myblog/app/controllers/posts_controller.rb

  def new

  end

  def create
    # 送信されたデータをそのまま表示できる
    # render plain: params[:post].inspect

    # save
    # railsでは登録されるデータの整合性をとるため、strong Parametersを設定する必要がある
    # @post = Post.new(params[:post])

    # strong Parameters → titleとbodyがあるハッシュではないといけませんよ、という意味
    # @post = Post.new(params.require(:post).permit(:title, :body))

    # 上記の部分はprivateメソッドにまとめることができる
    @post = Post.new(post_params)
    @post.save

    # redirect
    redirect_to posts_path

  end

  private
    def post_params
      params.require(:post).permit(:title, :body)
    end

コメントにも記載していますが、strongParametersの部分はprivateメソッドにまとめています。

ちなみに下記の様に記述すると、作成ボタン押下後の値がそのまま画面に表示されます。
デバッグなどで使えそうですね。

  def create
    # 送信されたデータをそのまま表示できる
    render plain: params[:post].inspect
  end

アクションに対するビューの作成

ここではnewに対するビューの作成を行います。
(createはデータを保存するだけなので、ビューは不要です)
アクションに対して画面遷移などする場合は、ビューが必要だったのを覚えているでしょうか。

rails_lessons/myblog/app/views/posts/new.html.erb

<h2>Add New Post</h2>
<%= form_for :post, url: posts_path do |f| %>
<!-- タイトルcolumnに対応するフィールド -->
<p>
    <%= f.text_field :title, placeholder: 'enter title' %>
</p>
<!-- ボディcolumnに対応するフィールド -->
<p>
    <%= f.text_area :body, placeholder: 'enter body text' %>
</p>
<p>
    <%= f.submit %>
</p>
<% end %>

ここではform_forヘルパーを使用していますが
form_tagヘルパーも存在します。
両者の違いは覚えておきましょう。

form_for: 任意のmodelに基づいたformを作るときに使う
form_tag: modelに基づかないformを作るときに使う

つまり、あるuserモデルに基づいたuserを作成するときはform_forを使い、 そうではなく、検索窓のような何のモデルにも基づかないformを作りたいときはform_tagを使うのが原則です。

同様にcssも編集して、見栄えをよくします。
rails_lessons/myblog/app/assets/stylesheets/application.css

input[type="text"], textarea {
  box-sizing: border-box;
  width: 400px;
  padding: 5px;
}

textarea {
  height: 160px;
}

ここまでで、新規登録の処理が行えたと思います。
ちなみに画面はこんな感じです。
記事一覧(TOP画面) f:id:taxa_program:20171125224848p:plain

新規登録画面 f:id:taxa_program:20171125224907p:plain

次回はバリデーションのチェック処理などについて
実装していきたいと思います。