Ruby on Railsを使った自作webアプリその１

まだまだ改善の余地がありますが、一応動く形になったので作ったアプリを紹介しようと思います。今回作ったのは、やることリストのようなものです。

ダッシュボード画面

このアプリのメイン画面になります。一目見てタスクの名前、内容、数と進行度、優先度がわかるようにしています。「最近のタスク欄」は優先度順で上から表示し、完了したタスクは表示されないようにしています。

サイドバーは押すとそれぞれのページに飛べるようなっています。画面左上のハンバーガーボタン（横三本線）を押すとサイドバーが閉じたり開いたりします。

ヘッダーの日付は現在の日付を表示させています。

タスク管理画面

この画面ではタスクの追加と削除、編集ができるようになっています。

全何件あるのか、未着手、進行中、完了それぞれ分けて表示させるボタンも追加して分かりやすくしました。

新規作成ボタンを押すことでこの画面が表示され、新規タスクを作成することができます。優先度は低、中、高の三つです。開始日と期限はカレンダーマークを押すことでカレンダーから日付を選択することができます。

ノート画面

メモとか自由にテキストを書けるページです。保存を押すことで書いた内容を保存でき、最終更新日時が右下に表示されます。

技術的課題

モーダルの開閉制御、キーボード操作（Esc/Tab）、タスク削除時の確認ポップアップ画面の実装がRubyだけではできず、JavaScriptが必要でした。Rubyしか学んでいなかったというところと、まずは動く形にすることを最優先事項としていたためCursorのAIと協力して実装しました。

1. モーダルの開閉制御
   新規タスクボタンを押した瞬間に、同じページ上でモーダルを開閉しています。これはサーバーに再アクセスせず、その場で要素の表示状態を切り替える必要があるため、ブラウザで動くJavaScriptで実装する必要がありました。
2. キーボード操作
   モーダルを開いている間は、Escキーで閉じる・Tabキーでモーダル内にフォーカスを循環させる制御を入れています。キーボード入力はブラウザ側のイベントとして発生するので、リアルタイムに反応する処理はJavaScriptが必要でした。
3. 削除前の確認ダイアログ
   削除ボタンを押した時に確認ダイアログを表示し、キャンセルされたらフォーム送信を止めています。ユーザー操作の直前確認と送信中止はクライアント側で完結する処理なので、JavaScriptが必要でした。

今後の改善案

全ページの画面右側の三分の一が空白で使えていないので有効活用したい。
ログインページの実装

作ってみての感想や学んだこと

自分のアイデアが動く形になったことはとても嬉しかったし楽しかったです。一旦形にすることが目標だったので見た目や機能をざっくりと設計し、AIと一緒に作ってみたのですが、プロンプトをしっかり書かないとちゃんと動いてくれないので難しかったです。

改善を重ねて使いやすくなっていったり、見た目が良くなっていったりすることが１番楽しいと感じている部分です。

今後コードを書くのはAI主体になっていくと思うので、AIの使い方であったり、ワークフローのどの部分を人間が担当して、どの部分をAIに任せるのかしっかり役割分担することが大事だと分かりました。