「プログラミングを学び始めたけど、何を作ればいいのか分からない」
「まずはシンプルなWebアプリを自分で作ってみたい」
そんな初心者の方におすすめなのが、集中タイマーアプリ（Focus Timer） です。
今回は、JavaScriptを使って「25分集中＋休憩」をサポートするタイマーを作成し、GitHub Pagesで公開する方法を紹介します。
今回作るアプリの概要
アプリ名：Mini Focus Timer
- スタートボタンを押すと25分のカウントダウンが始まる
- 0になったらアラートで通知
- 休憩タイマーに切り替えて使える
- GitHub Pagesで公開して、誰でもアクセス可能
👉 実際に作ったアプリはこちらから試せます：
Day01 — Mini Focus Timer
開発に必要な準備
- 知識：HTML / CSS / JavaScriptの基礎（初心者OK）
- ツール：PCとWebブラウザ（Google Chrome推奨）
- 公開環境：GitHub Pages（無料で利用可能）
複雑な環境構築は不要で、ブラウザだけで動作確認できるのがポイントです。
実装ステップ（概要）
1. HTMLで基本構造を作る
タイマーを表示する領域と、スタートボタンを配置します。
<h1>Focus Timer</h1>
<div id="timer">25:00</div>
<button id="start">スタート</button>
2. CSSでデザインを整える
見やすくするために、背景色やフォントを設定します。
#timer {
font-size: 48px;
text-align: center;
}
3. JavaScriptでカウントダウンを実装
setInterval()を使って1秒ごとに時間を減らし、0になったらアラートを出します。
let time = 25 * 60;
setInterval(() => {
time--;
// 残り時間を表示する処理
}, 1000);
👉 ここではイメージのみ掲載しました。完成コードの全文と詳しい解説はnoteで公開予定です。
GitHub Pagesで公開する方法
アプリを作ったら、GitHubを使って公開しましょう。
- GitHubに新しいリポジトリを作成
index.htmlをアップロード- 「Settings → Pages」で公開設定をオンにする
- 公開URLにアクセスして動作確認
これで、誰でもアクセスできる「自分のWebアプリ」が完成します。
学びのポイント
- 小さなアプリを作ることで理解が深まる
→ 単なる本や教材よりも実践的 - 公開できるとモチベーションが上がる
→ SNSやブログでシェア可能 - 次のステップにつながる
→ ToDoアプリやゲーム制作に応用できる
まとめ
- JavaScript初心者でも、シンプルなタイマーアプリはすぐに作れる
- GitHub Pagesを使えば無料で公開できる
- 小さな成功体験を積み重ねることで、自信とスキルが身につく
👉 今回は概要のみを紹介しました。
コード全文や詳細な解説はnoteで公開中です。
ぜひ次のステップとして、noteで学びを深めてみてください！
