はじめに
こちらは エーピーコミュニケーションズ Advent Calendar 2024 の 20 日目の記事となります。
動けばそれで良い
それはそれはとても甘美な響きです。
ミニマムスタートを考えた場合、制作までの費用も工数もできる限り抑えたいものですよね。
前回の記事に引き続き生成系AIを利用したWebアプリ開発の記事になります。
今回の記事は前回よりも更に何も考えず全てをAIに任せて作ってみようと思います。
結論
ノーコードでの開発は可能、エンジニアの未来は如何に
実際にこの記事で作成できたタスク管理アプリを公開しますので、試してみてください。
https://tbyghxxaaepovipclhw7pi1ebladgicc.vercel.app/
今年一杯は公開するものとし、2025年に入り次第状況を見て削除予定。
仕様の検討(をしてもらう)
所要時間5分程度
みんなの大好きChatGPT先生にお願いします。
細かい部分はいまひとつに感じることも多いのですが、得られる結果がそこそこで十分な場合や、汎用的な作業では最も安定してこなしてくれると感じています。
簡単なWebアプリを開発したいため、仕様を検討してください。
テスト用のためフロントエンドのみで動作することを考えており、ログイン機能などバックエンドに依存する複雑化する機能は不要です。
業務上のメンバータスク管理として利用できる簡易的なタスク管理アプリで良いです。
タスクがいつまでに誰がやるか明確化されており、タスクの完了状況が分かれば良いです。
得られた仕様が以下の通り。
想定よりも詳細に考えてもらえたため、不要な箇所は削除して利用します。(使用技術以降は次のAIに考えてもらいたいため)
# 簡易タスク管理アプリ仕様書
## **アプリ概要**
業務上のメンバータスク管理を目的としたシンプルなWebアプリケーション。フロントエンドのみで動作し、ブラウザ上で利用可能。タスクの期限、担当者、完了状況が分かる機能を提供。
---
## **基本機能**
### 1. **タスクの登録**
- **項目**:
- タスクタイトル（必須、テキスト入力）
- 担当者（選択式）
- 期限（日付選択形式）
- ステータス（未完了/完了、デフォルトは未完了）
---
### 2. **タスクの表示**
- 一覧表示形式（テーブル形式）。
- 表示内容:
- タスクタイトル
- 担当者
- 期限
- ステータス（トグルボタンで変更可能）
- 編集・削除ボタン
- **フィルタ機能**:
- 担当者別
- ステータス別（未完了/完了）
- 期限順（昇順/降順）
---
### 3. **タスクの編集**
- 登録済みタスクの編集（タイトル、担当者、期限、ステータスの変更）。
---
### 4. **タスクの削除**
- 不要になったタスクを削除。
---
### 5. **状態の保存**
- **ローカルストレージ**を使用してデータを永続化。
- アプリをリロードしてもタスク情報が保持される。
---
## **UIデザイン概要**
### **1. メイン画面**
- **上部**: フィルタ・検索エリア
- 担当者選択ドロップダウン
- ステータスフィルタ（未完了/完了）
- 検索バー（タイトル検索）
- **中央**: タスク一覧（テーブル形式）
- タスクタイトル
- 担当者
- 期限
- ステータス（トグルボタン）
- 編集・削除ボタン
---
### **2. タスク登録画面（モーダル形式）**
- **項目**:
- タスクタイトル（テキスト入力）
- 担当者（選択式ドロップダウン）
- 期限（カレンダー形式）
- ステータス（未完了がデフォルト）
- **使用方法**:
- 新規タスク登録時、または既存タスク編集時に利用。
---
## **使用技術**
- **HTML/CSS**: レスポンシブデザイン対応。
- **JavaScript**: 動的なタスク管理機能の実装。
- **ローカルストレージ**: データの永続化。
- **UIライブラリ（任意）**: BootstrapやMaterial UIでデザインを効率化。
---
## **実装の流れ**
1. **画面構造の作成**
- HTMLで基本的なUIを構築。
- CSSでスタイルを整える。
2. **タスク管理ロジックの作成**
- JavaScriptで以下を実装:
- タスクの追加
- 一覧表示
- 編集・削除機能
- ステータス変更機能
- ローカルストレージを利用したデータの保存。
3. **動的UIの構築**
- フィルタリング、検索、担当者選択機能を追加。
4. **テスト**
- 主要ブラウザ（Chrome、Firefox、Edge）で動作確認。
---
## **追加機能案（余裕があれば）**
- チームメンバーの管理（担当者の追加/削除）。
- ガントチャートの簡易表示（期限の視覚化）。
- CSV形式でのタスクデータのインポート/エクスポート。
---
## **作成目安**
- 基本機能の実装: 約2~3日
- UI調整とテスト: 1~2日
- 必要に応じて追加機能を検討。
アプリ開発(をしてもらう)
所要時間10分程度
最近激推しのv0先生に開発をお願いします。
最近知ったサービスなのですが、ほぼ完動状態のものをノーコードで作成できる優れもの。
そのまま利用するもよし、テンプレート的に利用するもよし、非常に開発の工数を抑えることができます。
仕様をそのまま入力して実行します。
プレビュー画面(アプリの動作画面)でエラー画面の表示になりましたが、画面左下のFix withボタンを押してみます。
エラーを修正し、画面を表示してくれました。
もうすごい、たったの2,3分で頭の中で描いていたものができています。
動作確認・アプリ修正(をしてもらう)
細かい動作の確認をしてみますが、気を利かせて担当者を初期値として用意されていました。
テスト用と指示したために用意してくれたと思うのですが、これでは実際に利用はできません。
ユーザーの作成や削除などができなかったため、機能の追加をお願いしました。
新規担当者の作成ボタンが表示されます。
担当者の作成としての動作は申し分なかったのですが、更新・削除が動作しません。
ここに関しては作成機能の実装をお願いしたため、純粋に指示のミスでした。
更新・削除機能も実装したい旨を伝えると、担当者管理ボタンとして修正されました。
実際に操作してみると、作成・更新・削除全て問題なく動作します。
田中さんを削除、佐藤さんを伊藤さんに更新、松下さんを追加してみました。
肝心のタスク管理機能としても問題なく動作しているようです。
デプロイ(をしてもらう)
所要時間5分程度
右上のデプロイボタンを押すとプロジェクトへの所属を求められます。
新規プロジェクトを作成します。
デプロイボタンを押します。
しばらく待つとデプロイされたURLが表示されます。
ドメインの設定なども可能なようですが、今回利用したフリープランでは利用できませんでした。
デプロイされたページへとアクセスしてみると、想定通りの操作ができます。
ノーコードで非常に爆速です。20分程度でアプリ開発ができてしまいます。
おわりに
開発環境をNext.jsとすることが可能であれば、非常に有用なテンプレートとしての動作環境を作成することができます。
現実的に考えた場合は、実際の動作環境への移植の手間などはありますが、完全な動作状態で稼働させることができます。
ノーコードでここまでできるとは素晴らしい時代ですね。
月並みな感想ですが、エンジニアとしてはこの進化が嬉しい反面、適切な付き合い方を模索する必要があると感じました。