今回はRuby on railsを使ってTodoアプリを作っていきます！！！

完成品が↑

railsの学習のために作ります！

1.プロジェクトを作ろう！

コンソールを起動して、

$ rails new #app名

これでプロジェクトを作ります！
次にcdでプロジェクトに移動しましょう

一旦作成したファイルの方にいってgemfileというものがあると思うのでそれを編集します！
ここをいじってBootstrap等を導入するワケですね！

# gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap', '~> 4.1.1'　#この1行だけ追加
# Use ActiveStorage variant

このように記載すればOKです！

ではコンソールに戻りましょう
※ここまででsqliteについてエラーが発生した人がいる場合
ridk exec pacman -S mingw-w64-x86_64-sqlite3
こちらのコマンドを一度うってください

そして全て完了したらコンソールにて

bundle install

こちらのコマンドをうちます
( bundlerというgemを使って、Gemfileに従ってgemをインストールするためのコマンドです！)

ここまで完了したら

rails s

でサーバーを起動してみましょう！

こういうのが出たら成功です！
成功を確認できたら、ブラウザを開いて
localhost:3000を入力してください！

このような画面が出てきたら無事、railsアプリの作成準備が整いました！！
(サーバーを終了させたい場合はCtrl+cでyを入力して終了できます)

2.データベースを構築しよう！

RailsはModelを使ってデータベースを操作します
id、created_at、updated_atの3つのカラムがデフォルトで作成されます。
今回はstring型のcontentというカラムを追加したいと思います。
Model名は頭文字が大文字で、単数形でなくてはなりません。
ではコンソールに戻って

$ rails g model Task content:string
$ rails db:migrate

を実行してください！
これで(migurate)データベースにテーブルが作成されます。
このようにTaskというテーブルを作成すると
tasksというように複数形のテーブルができます

以上でデータベースの構築は終わりました！

3.Controllerを使ってみよう！

controllerはMVCを構成するコンポーネントの1つです。
MVCとは
Model：データベースを取り扱う
View：画面表示を取り扱う
Controller：ModelとViewと連携する
といったようなものです。

では今回はタスクの一覧を表示するアクションcontrollerを作っていきましょう！

$ rails generate controller Tasks index

これでタスク一覧を表示するトップページのtasks_controllerを作ります！
作成されたControllerに、登録されている全てのタスクを取得する処理を記述します。

defindex@tasks=Task.allend

Task.allでtasksテーブルの全てのレコードを取得します！

4.ルーティングを設定しよう！

URLに対するリクエストを受けた時にcontrollerのどのアクションを実行するか、を設定します。
resources :{Controller名}で複数のルーティングが一気に設定できるようになります！
これでlocalhostに入った際にindexアクションが動くようになっています

Rails.application.routes.drawdoroot'tasks#index'resources:tasksend

設定されているルーティングはrails routesで確認しよう！

5.Viewを作ろう！

Controller内のアクション（タスク一覧表示する）が実行されると、対応するViewファイルが呼び出されます！
今回の場合は対応するViewファイルはindex.html.erbです！

<div class="mx-auto" style="width: 200px;">
<h1>Task list</h1>
</div>
<h2><%= link_to 'Creat new Todo', new_task_path ,class: 'btn btn-info'%></h2>
<table class="table">
  <thead>
    <tr>
    <th>タスク</th>
    <th>編集</th>
    <th>削除</th>
    </tr>
  </thead>
  <tbody>

  <% @tasks.each do |task| %>
    <tr>
      <td><%= task.title %></td>
    </tr>
  <% end %>
  </tbody>
</table>

Bootstrapを使ってテーブルとかを綺麗に表示するようにしてるよ
<% @tasks.each do |task| %>
にて格納されているタスクを表示するようにしています！

https://hackerthemes.com/bootstrap-cheatsheet/#input-group-append
↑もっとBootstrap使いたい方向けにチートシート紹介しときます↑

6.タスクを追加するための準備！

タスク追加画面を表示するためのnewアクションを作ります！

defnew@task=Task.newend

これを追記します！
リクエストがあった時にフォームを表示するために@task = Task.newでTaskのオブジェクトを作成しています！

次に、タスク追加画面のviewファイルを作成します。

<%= form_for(@task) do |f| %>
  <div><%= f.text_field :title %></div>
  <div><input type="submit" value="追加" class="btn btn-success"></div>
<% end %>
<%= link_to '戻る', tasks_path %

今回はform_forを使っていますがこの説明は長くなるので下記のリンクを参考にしてください！
form_forを使って「フォーム作成→データをテーブルに保存」を実装しています。
https://qiita.com/jumpyoshim/items/ee5af466ef7959567174

7.タスク追加処理を作っていこう！

/tasksにPOSTリクエストがあった時、タスクの追加処理を行うaddアクションを作成します。

defadd@task=Task.add(task_params)redirect_totasks_pathendprivatedefparamsparams.require(:task).permit(:title)end

POSTで送信された物をデータベースに登録し、その後redirect_to tasks_pathを使ってタスク一覧画面に遷移するようにしています！

またpraivateの部分ですが、Taskモデルのtitleを渡された場合のみ追加処理が実行されるようになっています。

以上で追加処理の部分は完成です！

8.タスクを編集する機能を作ろう！

/tasks/{id}/editにGETリクエストがあった時、タスク編集を表示するeditアクションと
編集した後のデータベースを更新するアクションを一緒に作っときましょう！

defedit@task=Task.find(params[:id])enddefupdate@task=Task.find(params[:id])@task.update(task_params)redirect_totasks_urlend

-edit-
リクエスト部分の数値をparams[:id]で取り出しています。

-update-
タスク編集画面から送信された内容を受け取り、データベースを更新します！
findで主キーに対応するレコードを取り出します。

続いて、タスク編集画面のviewファイルを作成します。

<h1>タスク編集</h1>
<%= form_for(@task) do |f| %>
  <div><%= f.label :title %></div>
  <div><%= f.text_field :title %></div>
  <div><input type="submit" value="編集" class="btn btn-success"></div>
<% end %>
<%= link_to '戻る', tasks_path %>

これで編集機能は終了です！

9.タスクの削除機能を作ろう！

/tasks/{id}にDELETEリクエストがあった時
idに対応するレコードをデータベースから削除するdestroyアクションを追加します。

defdestroy@task=Task.find(params[:id])@task.destroyredirect_totasks_urlend

ではこれまで編集機能、削除機能を作ってきたのでそれをタスク一覧画面に追加しよう！

<tr>
      <td><%= task.title %></td>
      <td><%= link_to '編集', edit_task_path(task) ,class: 'btn btn-success' %></td>
      <td><%= link_to '削除', task_path(task), method: :delete, class: 'btn btn-danger' %></td>
    </tr>

classはBootstrapを使っていい感じのボタンにするため設置

destroyアクションを実行するには、DELETEメソッドのリクエストを送らないとダメなので引数にmethod: deleteを指定しています！

以上で投稿、編集、削除の機能は完成です！！！

10.空の投稿や文字数制限の機能をつけよう！

空の投稿やあまりに多い文字数は色々邪魔だと思うのでこちらを規制しましょう！！

validates:title,presence: true,length: {maximum: 50}

上記のように何か入力内容に規制をしたいとなった場合
validatesを使って titleに入力される内容に規制をかけます
presenceで空白禁止にして、length:{maximum:30}で30文字までしか入力できないようにしました！

<h1>Task add</h1>
<% if @task.errors.any? %>
  <div class="alert alert-warning">
    <ul>
      <% @task.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

を追加して、空白や文字数超えた時にはエラーを表示するように追記しましょう！
これの詳しい説明は
https://qiita.com/ryuuuuuuuuuu/items/1a1e53d062bff774d88a
を参考に！

11.最後に

今回todoアプリを作って、railsでアプリを作る流れは掴めたかと思います。
けど実際にもっと複雑なWebアプリを作るってなるとまだまだ途方にくれそうなのでまずはこういう物を作ったりしてみて
もっと基礎等が掴めてきたら応用に活かせたらいいなと思いました！
https://github.com/t4k3p0n/todo-rails
↑githubです