ここからは 「おみくじアプリをさらに進化させる 7 日プラン」 を説明します。
前回の 7 日間で「HTML × JavaScript × CSS の基礎」と「画面に結果を表示するアプリ」が完成しました。
次の 7 日では、アプリを もっと使いやすく、もっと見た目よく、もっとアプリらしく 進化させます。
Day 1: 名前入力フォームを追加して「あなた専用のおみくじ」にする
名前を入力できるフォームを作る
前回は prompt を使いましたが、今回は画面に入力欄を置きます。
HTML に次のような入力欄を追加します。
<input id="username" type="text" placeholder="あなたの名前">
ボタンを押したときに、この入力欄の値を JavaScript で取得します。
const name = document.getElementById("username").value;
重要ポイントの深掘り
value は「入力された文字」を取り出すためのプロパティです。
これを覚えると、フォームを使ったアプリが作れるようになります。
Day 2: ラッキーアイテムを追加する
配列を使ってアイテムをランダムに選ぶ
おみくじ結果に加えて「今日のラッキーアイテム」も表示します。
const items = ["ハンカチ", "コーヒー", "青いペン", "スマホスタンド", "イヤホン"];
const item = items[Math.floor(Math.random() * items.length)];
結果表示を次のように変更します。
result.textContent = name + " さんの運勢は「" + fortune + "」。ラッキーアイテムは「" + item + "」です！";
重要ポイントの深掘り
配列を増やすだけで、アプリの内容を簡単に拡張できます。
「データを増やすだけで機能が増える」感覚をつかむのが今日の目的です。
Day 3: CSS でカード風デザインにする
結果表示を「カード」っぽくする
CSS に次を追加します。
#result {
background: #fff;
padding: 20px;
border-radius: 10px;
width: 300px;
margin: 20px auto;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
これだけで、アプリが一気に「プロっぽい」見た目になります。
重要ポイントの深掘り
box-shadow は「影」をつけるプロパティで、
アプリの UI を一気に洗練させる魔法のような効果があります。
Day 4: 結果をフェードイン表示する（アニメーション）
CSS のアニメーションを追加する
CSS に次を追加します。
.fade {
animation: fadeIn 0.6s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
JavaScript の結果表示部分を次のように変更します。
result.classList.remove("fade");
void result.offsetWidth; // アニメーションをリセットするためのテクニック
result.classList.add("fade");
重要ポイントの深掘り
classList.add() を使うと、
JavaScript から CSS のアニメーションを自由にコントロールできます。
Day 5: 結果を「色」で変える（大吉は金色など）
運勢ごとに色を変える
JavaScript に次を追加します。
if (fortune === "大吉") {
result.style.color = "gold";
} else if (fortune === "中吉") {
result.style.color = "green";
} else if (fortune === "小吉") {
result.style.color = "blue";
} else if (fortune === "末吉") {
result.style.color = "gray";
} else {
result.style.color = "red";
}
重要ポイントの深掘り
style.color のように、
JavaScript から CSS を直接変更できるようになると、
「動きのある UI」が作れるようになります。
Day 6: 結果を「カード画像」に載せる（画像付き UI）
背景画像を使ったカードにする
CSS に次を追加します。
#result {
background-image: url("https://example.com/card-bg.png");
background-size: cover;
color: white;
}
※ 画像 URL は自由に差し替えてください。
重要ポイントの深掘り
background-image を使うと、
アプリの雰囲気を一気に変えられます。
画像を変えるだけでテーマを変えられるのが強みです。
Day 7: 完成版をまとめて「アプリとして公開できる形」にする
完成版の構成を整理する
最終日は、コードを次の 3 つに分けます。
HTML（画面の構造）
CSS（見た目）
JavaScript（動き）
これを別ファイルに分けることで、
「本物の Web アプリの構造」に近づきます。
重要ポイントの深掘り
ファイル分割はプロの開発でも必須です。
この段階で慣れておくと、今後の学習が一気に楽になります。
