目次
はじめに
本記事ではVScode上でOpenAIのAIコーディングエージェントである「Codex」を用いて自らはコードを一切書かずにポモドーロタイマーのwebアプリケーションを作成する様子を書いていきます。
AIを使い、初心者がどこまで作れるのか見ていただければ幸いです。
アプリケーションを作ろうと思った理由
このアプリケーションをなぜ作ろうと思ったのかというと、一番の理由としては他のポモドーロタイマーには柔軟性が欠けていると感じたからです。
YouTube、web上でのポモドーロタイマーは広告があったり時間をセットできなかったり、デザインが好みではなかったり
自分の理想とするものからは、ほど遠い場合がほとんどでした。
そこで今回はWebアプリケーションの作り方の知識がほとんどない私がAIを駆使して作っていこうと思い立ったわけです。
準備
こちらのサイトからinstallを押すとVSCodeを開くか聞かれるので、VSCodeで開くをクリックします。
・Codex – OpenAI’s coding agent
拡張機能のダウンロードが終わると左側にOpenAIのアイコンが現れるはずです
Codexに指示をしてみる
今回はフロントエンドだけのWebアプリを作成するので、.js .css .htmlの拡張子を付けたファイルを作って1つのフォルダにまとめます。
ここからいよいよcodexに指示をしていきます。
AIに伝わりやすいように箇条書きで欲しい機能やデザイン、UIなどを伝えていきます。
ちゃんとしたプロンプトを書けば、この時点でも十分運用可能なものが出来上がるのではないでしょうか。
AIに指示をしていくうえで気を付けたことは自分の思っていることをすべて言語化することです。
当然ながらAIは人間の心を読み取ってくれるわけではないので、
「指示した内容とはあってるけど、思っていたものとは違う...」
ということがよく起こります。
なので私はAIコーディングにおいてはプログラミング知識だけではなく言語化能力も重要だと思っています。
ここからは更に理想のものに近づけていくためにUIや機能を微調整していきます。
これが一番時間がかかる作業でした。
全体の8割はこの作業に費やしたと思います。
完成するまでにcodexが思うように動かず、辟易することもありました。
例えば、
自分「設定画面で閉じるを押しても反応しないから修正して。」
codex「修正しました。これでバッチリ動くはずです！」
自分「まだ動かないよー😭」
ということが永遠に続いたり、
時にはなぜか文字化けして画面がすごいことになったり。
UIの微調整をするために
「◯◯を左に10px動かして」
と指示しても動かなかったり表示されなくなったりなりました。
多少コーディングの知識があれば「これはcss側の問題だな」と原因を特定出来るかもしれませんが、
自分の場合それが全くないため、
「js,html,cssの全てを参照して原因を考えて。」
などと指示して、力技で解決しました。
これを利用してもなかなか原因が分からないこともあり問題解決にかなりの時間をかけてしまうこともありました。
この経験から、
「AIエージェントを利用するために、ある程度知識が必要だ」と言うことが身に染みて感じました。
完成
これが実際に完成した画面です。
機能紹介
ここからは機能紹介となります。
いろいろな機能があるので主要なものを3つ紹介していきます
1つ目 ポモドーロタイマー
真ん中にあるボタンでスタート、ストップできます。
また、左右のボタンでスキップや戻ることもできます。(休憩時間になり、ストップしてご飯を食べた後再開する際に便利)
秒数だけではなく円の残量でも視覚的に残り時間を確認することが出来ます。
右上にある歯車マークから諸々の時間を設定することが出来ます。
作業時間や休憩時間だけではなく、長めの休憩時間や1日、1週間の目標も設定することが出来ます。
2つ目 ToDoリスト
右側にある📝マークから今日のToDoリストを開くことが出来ます。
ToDoは編集と削除ができて、チェックマークを付けることで完了することが出来ます。
完了したToDoリストは翌日になると自動的に削除されます。
また、次の日になってもタスクが完了されていない場合はタスク名が赤色になるのでそのタスクを優先的に行うことが出来ます。
3つ目 直近１週間の目標時間
右上のグラフのマークを押すと直近１週間どれだけ勉強したのか＆目標達成率を見ることが出来ます。
実際に作ってみて
今回はフロントエンド知識0の私がポモドーロタイマーを作っていきました。
思うようにいかずそこそこ時間がかかってしまいましたが、それでもかけた時間に対しては高いクオリティーのWebアプリを作ることが出来ました。
知識がない人でもこのように簡単にアプリを作成することが出来るので、「恐ろしい時代になったものだな。」と感じました。
書かせたコードの行数を数えてみたところ
jsが1106行
cssが715行
htmlが177行
で合計1998行でした。
そこまで膨大なコードを書かせていたのかと自分でも少し驚きました。
今回AIを使用してみてAIの利点や不便な点を知ることが出来ました。
うまく使いこなせるように勉強していきたいです。
また何か作りたくなったら、AIと一緒に挑戦してみようと思います。