100日チャレンジ3日目の成果｜名言メーカー開発で学ぶランダム処理と表示制御

「プログラミングを学びたいけれど、何を作ったらいいかわからない」
そんな悩みを持つ初心者におすすめなのが、シンプルな仕組みで動く 小さなWebアプリ です。

今回は、100日間アプリ開発チャレンジ（#100DaysOfCode / #100日チャレンジ）の Day03 として、JavaScriptで作る「ランダム名言メーカー（Quote Maker）」をご紹介します。

ボタンを押すと名言がランダムに表示されるだけの、とても簡単なアプリですが、ここには 配列操作 や 乱数処理、そして イベント処理 など、JavaScriptの基礎が詰まっています。学習の一歩目に最適な題材です。

完成アプリの紹介
開発の流れ
学習ポイント
公開方法（GitHub Pages）
まとめ
次回予告

完成アプリの紹介

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];
});