学習 / イベント /

RUNTEQ勉強会レポート vol.5　現役エンジニアによるお試しカリキュラムの倒し方

2020/08/04

みなさんこんにちは、RUNTEQです。

RUNTEQでは毎週、講師陣による勉強会が開かれています。テーマは主に「初学者のつまずきやすいポイント」です。

今週は、講師のだいそんによるRUNTEQのお試し学習カリキュラムの「課題１タスクのCRUD機能の実装」のライブコーディングが実施されました。

コードを実装する際に現役エンジニアが何に着目し、どのように考えているかを学習しました。

19時30分から約１時間、ZOOMにて開催された模様の一部を、イベントレポートという形で紹介したいと思います。

あくまでも私のやり方ですが、現役のエンジニアが何に着目して、どんな順番で実装しているかを知ることはきっと役立つはずです

1. 要件を把握し、アプリを起動して画面を確認する

まず要件を確認します。今回の要件はタスク管理アプリのタスクのCRUD機能を実装することです。要件を確認し終えたら、アプリを起動してブラウザで現在のアプリの挙動を確かめます。

タスクの一覧表示機能を作ってください
一覧には自分が作ったタスクのみを表示してください
タスクの新規作成機能を実装してください
タスクの編集機能を実装してください
タスクの削除機能を実装してください
削除ボタンを押した際に「削除しますか？」という確認ダイアログを出してください
タスクの詳細表示機能は不要です　　…etc

※詳しくはこちらからお試しカリキュラムに挑戦してみましょう！

2. テーブル・モデルを作成する

タスクを保存するテーブルが必要なためtasksテーブルを作成します。tasksテーブルには、タスクの内容を保存するcontentカラムと、どのユーザーのタスクかを表すためにユーザーのidを保存するuser_idのカラムが必要です。また、タスクの内容がNULLで保存されないように、NOT NULL制約をつけます。

下記のコードでモデルを作成します。

bin/rails g model task content:text user:references

同時に作成されたマイグレーションファイルにcontentカラムにNOT NULL制約をつけるコードを記載し、マイグレートを実行します。

bin/rails db:migrate

3. rails consoleでタスクを保存できるか試す

ビューやコントローラーの実装の前に、まずrails consoleでタスクを保存できるかを確認します。

bin/rails c

Task.create(content: "hoge", user_id: User.first.id)

タスクが正常にデータベースに保存できることを確認します。

コンソールで確かめることは重要です！確認せずにビューやコントローラーなどのRailsの実装に取り組み、後でエラーになったときに、どれが原因なのかがわからなくなってしまいます

4. ルーティングを設定する

単純なCRUD機能の実装なのでresourcesを使用します。

この表は英単語のように覚えてしまいましょう。とても大切です！

5. 一覧機能を実装する

一覧機能を実装して、コンソールで作成したタスクが表示されるかを確認します。まずはコントローラーを作成します。

bin/rails g controller tasks

一覧には自分が作ったタスクのみを表示してください と要件にあるので、ユーザーモデルとタスクモデルとのアソシエーションを追加します。またcontent属性は必須項目なのでバリデーションをかけます。

# user.rb
has_many :posts, dependent: :destroy
validates :content, presence: true

ユーザーとタスクの関連づけにより、コントローラーで一覧機能を実装することができます。

# tasks_controller.rb
def index
  @tasks = current_user.tasks
end

この@tasksをビューに渡して中身を表示させれば要件を満たすことができます。課題にはあらかじめビューファイルが用意されているので、ダウンロードしてviews/tasks/index.html.erbとなるようにファイルを保存します。

一覧画面へのアクセスはルーティングで定義した通り/tasksです。ブラウザでURLを打ち込むと、コンソールで保存したタスクが表示されます。一覧画面は実装完了です。

6. 画面からタスクを投稿できるようにする

コンソールからではなく画面からタスクを投稿できるように、ビューファイルを作成する必要があります。

しかしnew.html.erb作ってform_with使用してタスク入力画面を作成する前に、form_withの引数にタスクモデルのインスタンスを渡すためのnewアクションを作る必要があります。

# tasks_controller.rb
def new
  @task = Task.new
end

new.html.erbに空のタスクモデルのインスタンスを渡せるようになりました。

画面のレイアウト部分はindex.html.erbを参考にして、中身の部分をform_withで実装する方針にします。

# new.html.erb
<%= form_with model: @task, local: true do |f| %>
  <%= f.label :content %>
  <%= f.text_field :content, class: 'form-control' %>
  <%= f.submit class: 'btn btn-primary' %>
<% end %>

タスク新規作成画面を表示させる/tasks/newをブラウザに入力して画面を確認します。

現在のままでは、入力画面からパラメーターをサーバー側で受け取り、データベースに保存する処理のコードを書いていないので、登録ボタンを押してもタスクが登録されることはありません。

createアクションを実装します。フラッシュメッセージやリダイレクト先はまずは適当にしておきます。

# tasks_controller.rb

def create
  @task = current_user.tasks.build(task_params)
  if @task.save
    redirect_to tasks_path, success: '成功'
  else
    flash.now['danger'] = '失敗'
    render :new
  end
end
  
private

def task_params
  params.require(:task).permit(:content)
end

タスク新規作成画面で登録ができるか試してみます。適切にタスクが保存できることを確認できます。

まずは保存ができるかを確認しましょう。確認ができてからフラッシュメッセージやリダイレクト先を要件に従って実装しましょう！

勉強会はこの後、編集と削除機能を実装する方法が解説されました。

最後にひと言

CRUD機能の実装は何度も繰り返し学習して、身体で覚えるくらいになりましょう！

RUNTEQに入っていろんな勉強会に参加しよう

RUNTEQでは、ただカリキュラムを進めるだけではなく、さまざまなテーマで勉強会を実施しています。勉強会に参加することには多くのメリットがあります。

・カリキュラムで学習した知識が深まる

・講師や受講生と顔を合わせることで、モチベーションの維持ができる

・講師の共有画面で実際の挙動をその場で確認できる

・講師による関連情報の紹介

また、勉強会はほぼすべて録画されているので、都合が合わず勉強会に参加することができなくても大丈夫です。時間のあるときにゆっくり学習をすることができます。

RUNTEQにご興味のある方は、下記リンクより、お気軽に説明会へご参加ください。 https://runteq.jp/

RUNTEQ勉強会レポート vol.5 現役エンジニアによる お試しカリキュラム の倒し方