1. 背景
IT未経験ですが、通勤時間とお昼休みだけでWebアプリを1週間で公開しました。
AIの力を借りれば、誰でも個人開発ができる時代になったことを実感した経験をまとめます。
背景として、最近、全力で仕事に取り組んでいるはずなのに「今日、自分は何をしていたっけ？」と一日を振り返れないことが増えてきました。
そこで、時間の使い方を見直したいと思い、ポモドーロテクニックというものを試してみました。
ただ、ポモドーロテクニックのための既存のWebツールには次のような不満がありました。
- タブを切り替えるとタイマーが遅延してしまう
- 残り時間を確認するために、毎回タブにアクセスする必要がある
- 時間の自由設定やシンプルなUIなど全て兼ね備えたものがない
こうしたモヤモヤが積み重なり、「それなら自分で作ってみよう」と決意しました。
本業はITとは無縁なので、こうした開発は未経験でしたが、AIにサポートしてもらいながら通勤時間やお昼休みを使って、フロントエンドのみで約1週間で公開までたどり着きました。
本記事では、このWebアプリを「思いつき → 実装 → デプロイ → 公開」まで持っていった手順を、これから個人開発を始めたい方向けにまとめます。
ポモドーロテクニックとは
ポモドーロテクニックは、「25分集中 + 5分休憩」を1セットとして繰り返す時間管理の方法です。人の集中力はおよそ30分程度で落ち始めると言われており、そうした脳の特性に合わせて区切る作業法です。集中力向上、疲労感低下といった効果が報告されています。
（効果の根拠や実践結果については、別の記事で改めてまとめる予定です。）
2. 実装
2-1. 開発の全体方針
挫折する前に動くものを作り切るため、以下の方針で進めました。
- フロントエンドのみで完結
- AIに大部分を書いてもらう（自分は仕様決定とデバッグに集中）
- 段階的に機能追加（いきなり全機能を実装せず、MVP→改善のサイクル）
使用したAI：Perplexity.ai
使用技術：HTML、CSS、JavaScript（フレームワークなし）
2-2. AIへの指示の出し方
自身で書いて進めると1週間では絶対に完成しないことからコーディングはAIにお任せしました。しかし全てをAIに任せて進めると後々意図と異なる部分を動かせなくなると思い、下記のように進めました。
- 解説も合わせて出力させる
- 最小限の機能を段階的に追加する
- 機能追加の度に理解度チェック問題を出題させる
1. 解説も合わせて出力させる
コードを作成してもらう際に、下記を併記していました。
【学習スタイル】
JavaScript初学者です（Pythonは経験あり）
コードブロックごとに「なぜこう書くのか」「どう動くのか」を初心者でも理解できるよう解説してください。
専門用語は初出時に解説してください
学習しながらなのでその分時間はかかりましたが、とっかかりがあることで質問と修正をしながら進めることができました。
2. 最小限の機能を段階的に追加する
最初から全機能を実装せず、最小限の構造に機能を1つ1つ足すことで進めていきました。
下記のように追加機能をリストアップして1つずつ別のスレッドで実装していきました。
追加機能
1：タブ切り替え遅延解消
2：時間カスタマイズ機能
3：統計機能
4：通知機能
5：to doリスト
やり取りしながら実装するとスレッドが非常に長くなるので、1機能につき1スレッドで完結させました。スレッドを変える際は必要な情報を保持するため、状況をまとめて出力することを依頼しました。
3. 機能追加の度に理解度チェック問題を出題させる
不要だったかもしれませんが、各機能追加の度に理解度チェック問題を出題させました。
後半はもうなんとなくの理解で次に進みたい気持ちになっていたので、こうしたチェック問題を出させることで問題がないか確認しながら進めることができました。
2-3. デバッグ
開発中、何度も予期しない動作に遭遇しました。
コードを見ても分からなければ、問題の特定方針をAIに提示させてステップバイステップで解決していきました。
AIの立てる方針で解決できなかった際は普通にGoogle検索しました。AIも普通に間違ったことを主張してくるので、完全に信じてはいけないことを実感しました。
2-4. AIとの協働で意識したこと
より経験豊富な方が既に言われていることと思いますが、以下を意識して進めました。
- AIは「パートナー」として使う：丸投げせず、決定権を渡さない
- AIの行動はマイクロマネジメントする：方針決定前にAIが先走るとややこしいので、「許可を出してからコードを出力するように」など、事前に指示を出す必要がありました。
- 小さい一歩を積み重ねる：AIの作業は速すぎるので、やっていることを把握できるよう少しずつ進めました
- コードを理解する：理解せずとも動いてしまうだけに、自戒しながら進めました
初心者だからこそ、1つずつ確実に進めることを意識しました。
3. デプロイ
3-1. デプロイ先の選定
実装が完了したら、次は公開です。
今回は以下の理由で Cloudflare Pages を選びました。
- 無料で使える
- 高速なCDNが標準で利用可能
- GitHubとの連携が簡単（pushするだけで自動デプロイ）
- 独自ドメインの設定も可能
ドメインはお名前.com で独自ドメインを取得しました。
3-2. デプロイの全体の流れ
デプロイは以下の3ステップで進めました。
- GitHubにコードをpush
- Cloudflare PagesでGitHubリポジトリと連携
- お名前.comで取得したドメインをCloudflareに設定
実際には、実装よりもここのステップで難航しました。
知識が足りないことがダイレクトに影響しましたが、勉強しながら進めることで、無事に公開できました。
3-3. ステップ1：GitHubへのpush
GitHubアカウントを作成し、作成したコードをアップロードしました。
3-4. ステップ2：Cloudflare Pagesでデプロイ
【手順の概要】
- Cloudflareにアカウント作成（無料）
- 「Pages」→「プロジェクトを作成」を選択
- GitHubアカウントと連携
- デプロイしたいリポジトリを選択
- ビルド設定
- デプロイ実行
この時、ビルド設定がうまくいかず悩みました。
（4のリポジトリを選択の際に、下のPagesを選ぶ必要があることに気づけず、1日悩みました。今回のような静的ページの場合はPagesを選ばなければエラーになるようです）
デプロイに成功した数分後には初めて自分のウェブアプリがインターネットに公開され、なんだか少し感動しました。
3-5. ステップ3：独自ドメインの設定
独自ドメインがあるとSEOの面で利点があると聞き、独自ドメインを取得しました。
ドメインは日本語サポートが手厚く、初年度無料のお名前.comで取得しました。
ここで、手順がよく分からない上に「DNS」「ネームサーバー」「Aレコード」「プロキシ化」など、初めて聞く用語が大量に出てきて困惑しました。
- Cloudflare側には使用したいドメインの情報を打ち込む必要があり、
- お名前.comにはCloudflareのネームサーバー情報を打ち込む必要がある。
必要なのはそれだけでしたが、混乱の中、それを理解するのに時間がかかりました。
しかしこれで、晴れてデプロイが完了しました。
4. 完成品
実際に公開したポモドーロタイマーはこちらです。
URL： https://pomodoro.elegantools.com/
主な機能
実装した機能は以下の通りです。
- 作業・短休憩・長休憩：3通りのタイマー
- 通知：タイマー終了時に通知でお知らせ
- 残り時間のタブ表示：タブ名に残り時間を表示
- 時間設定のカスタマイズ：作業時間・休憩時間を自由に設定可能
- 設定の自動保存：次回アクセス時も前回の設定を復元
- タイマー復元機能：ブラウザを閉じてもタイマー継続
- ToDoリスト：タスクの追加・削除・完了管理
- 記録：1日の作業回数、時間を表示
なお、バックグラウンドでも正確にカウントダウンできるよう、時刻情報から時間経過を算出することとしました。
技術スタック
シンプルに以下の技術のみで構成しました。
- HTML5：構造
- CSS3：デザイン（レスポンシブ対応）
- JavaScript（Vanilla）：ロジック実装
- Web API：Page Visibility API、Notification API、LocalStorage
- ホスティング：Cloudflare Pages
- ドメイン：お名前.com
フレームワークやライブラリは一切使っていないため、軽量で高速に動作します。
5. まとめ
Web開発未経験の状態から約1週間で、ポモドーロタイマーWebアプリを公開することができました。
【開発期間の内訳】
- 実装：4日
- デプロイ・ドメイン設定：3日
非常にシンプルなWebアプリではありますが、AIの進歩による開発の民主化を実感しました。
まだまだ分からないことだらけですが、勉強しながら価値あるサービスを作っていければと思います。
質問やフィードバックがあれば、X（@elegantools）でご一報いただけると嬉しいです！
また、ポモドーロテクニックに興味があれば、下記ウェブサイトもぜひ試してみてください！