「プログラミングを学びたいけれど、何を作ったらいいかわからない」
そんな悩みを持つ初心者におすすめなのが、シンプルな仕組みで動く 小さなWebアプリ です。
今回は、100日間アプリ開発チャレンジ（#100DaysOfCode / #100日チャレンジ）の Day03 として、JavaScriptで作る「ランダム名言メーカー（Quote Maker）」をご紹介します。
ボタンを押すと名言がランダムに表示されるだけの、とても簡単なアプリですが、ここには 配列操作 や 乱数処理、そして イベント処理 など、JavaScriptの基礎が詰まっています。学習の一歩目に最適な題材です。
完成アプリの紹介
Day03で制作した「ランダム名言メーカー」は以下のような動きをします。
- ボタンをクリックすると、名言が1つランダムに表示される
- 名言は毎回異なり、楽しみながら学習できる
- PCでもスマホでもブラウザで動作する
👉 実際に遊んでみる
Day03 — Quote Maker 公開ページ
表示内容は「配列」に格納された名言からランダムに選ばれる仕組みです。
スクリーンショットを記事内に入れておくと、完成イメージがさらに伝わりやすくなります。
開発の流れ
このアプリは、以下の3ステップで構築できます。
1. HTMLで基本の枠を作る
名言を表示する領域と、クリックするボタンを用意します。
例：
<h1>ランダム名言メーカー</h1>
<div id="quote">ここに名言が表示されます</div>
<button id="btn">新しい名言を表示</button>
とてもシンプルですが、id属性 を設定しておくことで、後ほどJavaScriptから操作できるようになります。
2. CSSで見やすくデザイン
背景色を少し工夫したり、ボタンを大きくしたりするだけで、見やすくモチベーションの上がるUIになります。
レスポンシブデザインを意識すれば、スマホでも読みやすい表示が可能です。
3. JavaScriptでランダム処理を実装
名言を複数用意して配列に格納し、ボタンを押したらランダムに選ばれた1つを表示します。
サンプルコード：
const quotes = [
"継続は力なり",
"失敗は成功のもと",
"思い立ったが吉日",
"行動こそが未来を作る"
];
const btn = document.getElementById("btn");
const quoteEl = document.getElementById("quote");
btn.addEventListener("click", () => {
const randomIndex = Math.floor(Math.random() * quotes.length);
quoteEl.textContent = quotes[randomIndex];
});
Math.random()で 0〜1 の乱数を生成- 配列の長さをかけ算してランダムなインデックスを取得
textContentに代入して表示
この仕組みだけで、シンプルな名言アプリが完成します。
学習ポイント
このアプリを作ると、以下のような基礎を自然に学べます。
- 配列の使い方
複数のデータ（名言）をまとめて管理する仕組み。 - 乱数生成の基本
Math.random()とMath.floor()の組み合わせはゲーム開発や抽選機能に必須です。 - イベント処理
addEventListenerを使って「クリックしたときに実行する処理」を学べます。 - 関数化の習慣
ランダム表示の処理を関数としてまとめておくと、コードが整理され再利用性が高まります。
公開方法（GitHub Pages）
アプリが完成したら、GitHub Pagesを使って公開できます。
手順は以下の通りです。
- GitHubで新しいリポジトリを作成
index.htmlをアップロード- 「Settings → Pages」で公開を有効化
- 表示されたURLにアクセスして確認
これだけで、あなたの作ったアプリを誰でも触れる形でシェアできます。
SNSやブログと連動すれば、自分の成長を発信しながらモチベーションを高められます。
まとめ
- JavaScript初心者でも、短時間で作れるシンプルなアプリ
- 配列・乱数・イベント処理など基礎を自然に学べる
- GitHub Pagesで公開すれば、成果を世界に共有できる
このように「小さなアプリ」を作ることが、プログラミング学習の継続につながります。
次回予告
Day04では「ToDo管理アプリ」を作成します。
より実用性が高く、タスク管理に役立つアプリです。
プログラミング初心者にとって「自分の生活で使えるアプリ」を作ることは、学習のモチベーション維持に直結します。次回もぜひお楽しみに！
