これから作っていく簡単なWebアプリの作成メモ（自分の備忘）です。
自分用なのであまり凝りすぎないように書いていきたい。
今回やったこと
前回作ったスケジュールの編集機能の修正点について
前回記事にて、一覧画面からテーブルの一行をクリックすることで、そのスケジュールの編集画面に遷移できるようにする変更をした。しかし、この時は眠くて画面遷移の動作確認を「一覧画面」⇒「編集画面」（⇒既設linkにて「一覧画面」）と、一度しか実施しなかった。
今日、改めて触ってみると、ページリロード後の「一覧画面」⇒「編集画面」⇒「一覧画面」は移動できるが、その後もう一度同じ動きで（或いはテーブルにある別のスケジュール行で）編集画面に遷移しようとしても、何も起こらなかった（！？）。
上記一覧画面からスケジュールをクリックして...
赤枠のリンクをクリックすることで一覧画面に戻って...
戻ってきた一覧画面からもう一度同じ遷移をしようとしても、何も起きない！？
なぜうまくいかないのか、だいぶ考えてしまいました。。。
そして出した結論が、
「もしかして、JQuery側でレンダリングしてる処理が最初（一覧画面の一番はじめの表示時）しか動いてない？？」
です。
ではなぜ、そのような現象が起こってしまうのか。
いろいろとWeb記事を見回って、やっとこれだというものを発見（以下記事です）。
【Rails】turbolinksやAjaxの影響でjQueryが正常に動作しないとき
turbolinksがページ遷移時の動作を軽くしてくれていますが、これによってJQueryのイベント発火のタイミングが少し考慮しなければいけなくなり、その部分にまるで気が付いていなかったので、今回のようなダメな実装例が出来上がってしまったということです。
反省しつつ、前回書いたJQueryの処理を上記記事の通りに修正。
jQuery(document).on('turbolinks:load', function() {
$(".clickable-row").css("cursor","pointer").on('click', function() {
location.href = $(this).data("href");
});
});
turbolinksを使う際には、このあたりの考慮をしないといけなかったんですね。
無知故致し方なし...。
スケジュールの編集に対する画面遷移の変更
修正をしていて思ったこと。
「一覧からクリックしていきなり編集画面になるの、なんか変では？」
最初に作った時にはまるで気が付かなかったけど、一般的には以下のようになっていることが多い。
一覧画面⇔詳細表示画面⇔編集画面
ようやくそのことに気が付いたので、これも修正する。
まずは一覧画面からテーブルの行をクリックしたときの遷移先を詳細表示画面にする。
（略）
<tbody>
<% @schedules.each do |lst| %>
<tr class="clickable-row" data-href="<%= schedule_path lst.id %>">
（略）
さらに、詳細表示画面から編集画面へのリンクを用意する。
（略）
<div class="row_line">
<%= link_to '編集', edit_schedule_path(@schedules.id), class: 'btn primary-btn' %>
</div>
動作も確認できた。
スケジュールの削除
スケジュールを編集できても、削除できないと不便（というか最低限出来ないと困る）。
なので、スケジュールを削除できるようにします。
以下の記事は参考に読んだ。
[Rails]deleteメソッドとdestroyメソッドの違いについて！！[初心者]
まずはコントローラーの手入れから。
（略）
def destroy
@schedules = Schedule.find(params[:id])
destroyed_title = @schedules.title
@schedules.destroy
redirect_to schedules_url, notice: "予定『#{destroyed_title}』を削除しました。"
end
（略）
※これまで、しれっとdestroyアクションのことをdeleteって書いてしまっていたことに気が付いて、これも修正（Userコントローラーのほうもアクション名を修正した）。
次に、詳細表示画面に削除ボタンを配置する。
（略）
<div class="row_line">
<%= link_to '編集', edit_schedule_path(@schedules.id), class: 'btn primary-btn' %>
<%= link_to '削除', schedule_path(@schedules.id), method: :delete, class: 'btn btn-danger' %>
</div>
できた。
動作も確認できたのでOK。
今後やるべきこと
まだまだ最低限使えるものへの道のりは長い...。
-
ユーザーでのログインの仕組みづくり
- ユーザーの新規登録
- ユーザーの編集
- ユーザーの詳細表示
- ユーザーの削除
-
見た目の改善
- Bootstrapの有効化
- レスポンシブデザインへの対応
- データ削除時に「本当に削除しますか」の確認の実装
- 各種バリデーションの実装
今回はここまで。
記述ミスもまだまだあるので、見つけ次第修正したい。
あと、最低限必要なものが揃ったら、リファクタリングも時間を割いておきたい（願望）。