RUNTEQ勉強会レポート vol.5 現役エンジニアによる お試しカリキュラム の倒し方
みなさんこんにちは、RUNTEQです。
RUNTEQでは毎週、講師陣による勉強会が開かれています。テーマは主に「初学者のつまずきやすいポイント」です。
今週は、講師のだいそんによるRUNTEQのお試し学習カリキュラムの「課題1タスクのCRUD機能の実装」のライブコーディングが実施されました。
コードを実装する際に現役エンジニアが何に着目し、どのように考えているかを学習しました。
19時30分から約1時間、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/