Ruby【初心者向け】& 自身のメモ用 チュートリアル形式で

この記事を書いた目的

まず、初心に帰ろうと思いました。現在私は大学3年生で状況が状況なので1日中家にいます。そこで家でただ過ごしていても時間の無駄なので今まで学んだことを一度整理しようと思いました。その一つがこの記事です。書く内容としてはrailsの基礎となる部分の解説&実際に手を動かしてアプリケーションを作成するという単純なことです。まだ何もアプリケーションを作成したことがない方向けに記述しています。何かを作成したことがある方には簡単すぎることだと思います。

※環境構築はできている前提とします。できていない場合は他の記事を参考に頑張ってみて下さい。検索すればたくさん見つかるはずです。環境はAWSのCloud9を使用しています。

フォルダを作成してサーバーを起動する

まずはフォルダを作成しましょう。名前はなんでもいいです。ターミナルで打ち込んでください。今回はsampleという名前のフォルダを作成しました。

mkdir sample

次にディレクトリを今作成したフォルダに移動します。sampleの部分は自分で作成したフォルダ名に変換してください。

cd sample

ディレクトリを移動できたらアプリを作成していきましょう。アプリケーションを作成するコマンドは以下の通りです。

rails バージョン new アプリケーション名
rails _5.2.4.1_ sample_app  //私はこれにしました。
gem list rails  //バージョンがわからない場合はこちらのコマンドを叩いて確認してみてください。

ここでバージョンを調べてもよくわからなった人はこちらの記事を参考にしてみて下さい。わかりやすいです。

無事に作成できたらディレクトリを変更しましょう。sample_appの部分が自身でつけたアプリケーション名です。

cd sample_app

ディレクトリを変更できたらサーバーを立ち上げてみましょう。bundle installについてはこちらの記事がわかりやすかったです。

bundle install
rails s     //サーバーの起動。

無地に表示されましたね。

#コントローラーとモデルの作成
ここではコントローラーとモデルを作成していきます。そもそもコントローラーとモデルとは何ぞやという方はこちらの記事がわかりやすかったので参考にしてみて下さい。。

1行目：todosという名のコントローラーを作成して同時にindex,show,edit,newというviewページを作成した。
2行目：todoという名のモデルを作成しtitle,bodyというカラムを作成した。

rails g controller todos index show edit new
rails g model todo title body

データベースを保存しましょう。以下のコマンドを打ちこんでください。

rails db:migrate

フォルダを確認して作成できているのが確認できると思います。

ルーティングの設定

次はルーティングを設定していきます。indexページに飛ばしたいので以下のようにルーティングを設定します。get'todos/index'を削除してroot to:'todos#index'に変更しましょう。またresourcesを用いてルーティングを書き換えましょう。そしてサーバーを再起動して確認してみて下さい。

route.rb

Rails.application.routes.draw do
  get 'todos/index'  →　root to:'todos#index'　に変更
  resources :todos
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

以下のような画像が表示されていると思います。

#Viewとコントローラーの設定
まずはnewページを作成します。こちらのページの役割はフォームを用いてインスタンスを作成することです。コントローラーを作成したときに同時にページは作成できているのでnewページに飛ばすリンクをindexページに追加します。リンクの書き方は以下の通りです。

<%= link_to '文字列',ファイルへのパス%>

index.html.erb

<h1>Todos#index</h1>
<p>Find me in app/views/todos/index.html.erb</p>

<%= link_to 'new', new_todo_path %>

リンクをクリックしていただくときちんととべるようになっていると思います。ここからnewアクションに役割を与えてあげましょう。コントローラーに新しくnewアクションを追加します。そして以下の用に書きましょう。また、createアクションも同時に編集しましょう。private以下の記述はストロングパラメーターと言ってデータが安全かどうかを検証しています。気になった方はググってみて下さい。たくさんヒットすると思います。

todos_controller.rb

class TodosController < ApplicationController
  def index
  end

  def show
  end

  def edit
  end

  def new
    @todo = Todo.new
    # Todoモデルのインスタンスを作成する記述
    # 変数名 = モデル名.new
  end
  
  def create
        @todo = Todo.new(todo_params)
        
       #値が正しく保存された場合はindexページに遷移する。
       if @todo.save
        redirect_to todos_path

        #値が保存できなかった場合はnewページに遷移する。
        else
        redirect_to new_todo_path
       end
  end
  
  private

  def todo_params
      params.require(:todo).permit(:title,:body)
  end
  
end

コントローラーが編集できたら次はviewを編集しましょう。今回は以下のようにフォームを設置してインスタンスを作成できるようなviewに設定しました。

new.html.erb

<h1>Todos#new</h1>
<p>Find me in app/views/todos/new.html.erb</p>

<%= form_for(@todo) do |f| %>
 
    <p>title</p>
    <%= f.text_field :title %>
 
    <p>body</p>
    <%= f.text_area :body %>
    <br>
    <%= f.submit 'create todo' %>
    <!--ここでcreateアクションが呼ばれる-->
 
<% end %>

インスタンスを作成しても表示しなければ意味がありません。表示するためにはまずコントローラーを編集します。以下のように編集しましょう。これでデータをすべて取得することができます。

todo_controller.rb

def index
   @todos = Todo.all  
end

先ほどと同様にviewを編集しましょう。今回はtalbeタグを用いて表現しました。同時にeditページとshowページへのリンクも作成しましょう。

index.html.erb

<h1>Todos#index</h1>
<p>Find me in app/views/todos/index.html.erb</p>

<%= link_to 'new', new_todo_path %>

<table>
        
    <thead>
        <th>Title</th>
        <th>Body</th>
    </thead>
        
    <tbody>
        <% @todos.each do |todo| %>
            <tr>
                <td><%= todo.title %></td>
                <td><%= todo.body %></td>
                <td><%= link_to 'Show', todo_path(todo) %></td>
                <td><%= link_to 'Edit', edit_todo_path(todo) %></td>
            </tr>
        <% end %>
    </tbody>
        
</table>

次はshowページを編集していきます。これは投稿したインスタンスの詳細をみるためのページです。まずはコントローラーを編集します。これは特定のデータを取得するための記述です。

todo_controller.rb

def show
    @todo = Todo.find(params[:id])
end

次にviewを編集します。表示させていのはtitleとbodyなので以下のように記述します。

show.html.erb

<h1>Todos#show</h1>
<p>Find me in app/views/todos/show.html.erb</p>


<b>Title :</b>
<p><%= @todo.title %></p>
<!--titleを表示-->

<b>Body :</b>
<p><%= @todo.body %></p>
<!--bodyを表示-->

<%= link_to "edit", edit_todo_path(@todo) %> 
|
<%= link_to "back", todos_path %>

次はeditページを作成していきましょう。こちらは作成したインスタンスを編集するためのページです。そのためまずはインスタンスのidを取得します。そしてその後、updateアクションでインスタンスの更新をします。updateアクションのときもストロングパラメータを引数として渡してあげるのを忘れないでください。

todo_controller.rb

def edit
    @todo = Todo.find(params[:id])
end


def update
      todo = Todo.find(params[:id])
      todo.update(todo_params)
      redirect_to todos_path
end

次はviewを編集します。インスタンスを編集するのでフォームを設置します。そして値は現在保存されている値を渡してあげます。

edit.html.erb

<h1>Todos#edit</h1>
<p>Find me in app/views/todos/edit.html.erb</p>


<h1>Editing Todo</h1>
<%= form_for(@todo) do |f| %>
    <p>Title</p>
    <%= f.text_field :title %>
    <p>Body</p>
    <%= f.text_area :body %>
    <br>
    <%= f.submit 'update todo' %>    
<% end %>

<%=link_to 'show', todo_path(@todo.id) %>
    |
<%= link_to 'back', todos_path %>

最後に追加する機能はdestroyアクションです。これは作成したインスタンスを消去する機能です。アクションは以下のように書きます。消去するインスタンスのidを取得してそのインスタンスを消去する操作をします。

todo_controller.rb

def destroy
        todo = Todo.find(params[:id])
        todo.destroy
        redirect_to todos_path
end

viewに消去する記述を追加しましょう。method: :deleteが抜けていると消去がうまくいかない場合があるのでこちらは記述しましょう。

index.html.erb

<% @todos.each do |todo| %>
            <tr>
                <td><%= todo.title %></td>
                <td><%= todo.body %></td>
                <td><%= link_to 'Show', todo_path(todo) %></td>
                <td><%= link_to 'Edit', edit_todo_path(todo) %></td>
//この行を追加   <td><%= link_to 'Destroy', todo, method: :delete, data: { confirm: 'Are you sure?' } %></td> 
            </tr>
        <% end %>

#完成！

長かったですがこれで基本的な作業は一通りできるようになっていると思います。お疲れさまでした。実はこれらはscaffoldという機能を使用すればコマンド一つで作成することができます。気になったら調べてみて下さい。では、よいエンジニアライフを～(^^)/