- Day 43：DOM操作演習（前半）
- ランダムカラーアプリの全体像をイメージする
- カラーコードの基本をざっくり理解する
- HTMLでランダムカラーアプリの土台を作る
- JavaScriptでDOM要素を取得する
- ランダムな数値を作る仕組みを理解する
- RGB値から16進数カラーコードを作る
- ランダムカラーコードを生成する関数を作る
- 背景色を変更し、カラーコードを表示する
- ボタンにイベントを設定する
- 完成コード（コメント付きランダムカラーアプリ）
- 少しだけ発展させるアイデア
- セキュリティ・ユーザー体験の視点からの補足
- Day 43 前半 練習用テンプレート
- Day 43 前半のまとめ
- Day 43：DOM操作演習（後半）
- ランダムカラーアプリの“使い勝手”を考える
- HTMLを“完成形”に近づける
- JavaScriptでDOM要素を整理する
- ランダムカラー生成の関数を再確認する
- 背景色と文字色をセットで変更する
- ランダムカラーを適用する中心関数を作る
- カラーコードをクリックでコピーできるようにする
- ボタンにイベントを設定し、初期状態も整える
- 完成コード（コメント付き・発展版ランダムカラーアプリ）
- 少しだけ発展させるアイデア
- セキュリティ・ユーザー体験の視点からのまとめ
- Day 43 後半のまとめ
Day 43：DOM操作演習（前半）
「ランダムカラーアプリで“見た目を変えるDOM操作”を体験する」
Day 43前半では、ランダムカラーアプリを作成していきます。 このアプリはとてもシンプルですが、
- ランダムカラー生成
- 背景色の変更
- カラーコード表示
という、Webフロントエンドでよく使う要素が詰まっています。
この演習を通して、
「JavaScriptで値を作り、それをDOMのスタイルやテキストに反映する」
という流れを、自然に書けるようになることを目指します。
ランダムカラーアプリの全体像をイメージする
どんなUIのアプリを作るか
今回作るランダムカラーアプリは、次のような構成にします。
- 「色を変える」ボタン
- 背景色が変わるエリア（画面全体でもOK）
- 現在のカラーコード（例：
#a3f2c1）を表示するテキスト
イメージとしては、
ボタンを押すたびに背景色がランダムに変わり、 その色のコードが画面に表示される
というシンプルなアプリです。
カラーコードの基本をざっくり理解する
RGBと16進数カラーコード
Webの色指定にはいくつかの方法がありますが、 今回は 16進数カラーコード（例：#ff0000） を使います。
#RRGGBBという形式で、RR：赤（Red）GG：緑（Green）BB：青（Blue）
- それぞれ 0〜255 の値を、16進数で表現します。
例えば、
- 赤：
#ff0000 - 緑：
#00ff00 - 青：
#0000ff
というような形です。
ランダムカラーアプリでは、
- 0〜255のランダムな数値を3つ（R・G・B）作る
- それを16進数に変換して
#RRGGBB形式の文字列にする - その文字列を
background-colorに設定する
という流れで色を変えていきます。
HTMLでランダムカラーアプリの土台を作る
ボタン・カラー表示・背景エリアを用意する
まずは、アプリのUIとなるHTMLを用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 43 前半：ランダムカラーアプリ</title>
<style>
/* ▼ 画面全体の基本スタイル */
body {
font-family: sans-serif;
text-align: center;
margin: 0;
padding: 40px;
transition: background-color 0.3s ease; /* 背景色の変化をなめらかにします */
}
/* ▼ カラーコード表示を少し目立たせる */
#colorCode {
font-size: 1.5rem;
font-weight: bold;
margin-top: 20px;
}
/* ▼ ボタンのスタイル（見やすくするため） */
#changeColorButton {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<h1>ランダムカラーアプリ</h1>
<!-- ▼ 色を変えるボタン -->
<button id="changeColorButton">ランダムな色に変更</button>
<!-- ▼ 現在のカラーコード表示エリア -->
<p id="colorCode">現在のカラーコード：#ffffff</p>
<script>
// ここにJavaScriptを書いていきます
</script>
</body>
</html>
ここでのポイントは、
- ボタンに
id="changeColorButton"を付けて、JavaScriptから取得しやすくしていること - カラーコード表示用に
<p id="colorCode">を用意していること bodyのbackground-colorを変えることで、画面全体の色を変えられるようにしていること
です。
JavaScriptでDOM要素を取得する
ボタンとカラーコード表示要素を変数にまとめる
次に、JavaScriptで必要なDOM要素を取得します。
// ▼ 「ランダムな色に変更」ボタン
const changeColorButtonElement = document.getElementById('changeColorButton');
// ▼ カラーコード表示用の要素
const colorCodeElement = document.getElementById('colorCode');
この2つが、 ランダムカラーアプリの中心となる要素です。
ランダムな数値を作る仕組みを理解する
Math.random() で 0〜1 のランダムな数値を作る
JavaScriptでは、Math.random() を使ってランダムな数値を作れます。
const randomValue = Math.random(); // 0以上1未満のランダムな数値
例えば、
0.12340.98760.5432
のような値が返ってきます。
0〜255のランダムな整数を作る
カラーコードのRGB値は 0〜255 の整数なので、 Math.random() を使って 0〜255 の整数を作ります。
// ▼ 0〜255のランダムな整数を作る関数
function getRandomInt0to255() {
// Math.random() は 0以上1未満なので、255を掛けて 0〜255未満にします
const random = Math.random() * 256;
// 小数点以下を切り捨てて整数にします
return Math.floor(random);
}
ここでのポイントは、
Math.random() * 256で 0〜256未満の値を作り、Math.floor()で小数点以下を切り捨てて 0〜255 の整数にしていること
です。
RGB値から16進数カラーコードを作る
10進数 → 16進数への変換
JavaScriptでは、数値の toString(16) を使うと、 その数値を16進数の文字列に変換できます。
const r = 255;
const g = 128;
const b = 0;
const rHex = r.toString(16); // "ff"
const gHex = g.toString(16); // "80"
const bHex = b.toString(16); // "0"
ただし、 0 のような値は "0" になり、 2桁ではなく1桁になってしまいます。
そこで、 必ず2桁になるようにゼロ埋めする処理 が必要になります。
2桁にゼロ埋めする関数を作る
// ▼ 0〜255の数値を2桁の16進数文字列に変換する関数
function toHex2Digits(number) {
const hex = number.toString(16); // 16進数文字列に変換
// 1桁の場合は先頭に0を付けて2桁にします
return hex.padStart(2, '0');
}
ここでのポイントは、
padStart(2, '0')を使って、 文字列の長さが2になるまで先頭に'0'を追加していること- これにより、
0→"00",15→"0f"のように、 常に2桁の16進数文字列になること
です。
ランダムカラーコードを生成する関数を作る
RGB値をランダムに作って、#RRGGBB を返す
ここまでの要素を組み合わせて、 ランダムなカラーコードを生成する関数を作ります。
// ▼ ランダムなカラーコード（#RRGGBB形式）を生成する関数
function generateRandomColorCode() {
// 0〜255のランダムな整数を3つ作ります（R・G・B）
const r = getRandomInt0to255();
const g = getRandomInt0to255();
const b = getRandomInt0to255();
// それぞれを2桁の16進数文字列に変換します
const rHex = toHex2Digits(r);
const gHex = toHex2Digits(g);
const bHex = toHex2Digits(b);
// #RRGGBB 形式の文字列を作って返します
const colorCode = `#${rHex}${gHex}${bHex}`;
return colorCode;
}
この関数は、
- ランダムなRGB値を作り
- それを16進数に変換し
#RRGGBB形式のカラーコード文字列を返す
という役割を持っています。
背景色を変更し、カラーコードを表示する
changeColor() 関数で「色変更＋表示」をまとめる
ランダムカラーアプリの中心となる処理を、 changeColor() という関数にまとめます。
// ▼ 背景色をランダムに変更し、カラーコードを表示する関数
function changeColor() {
// ランダムなカラーコードを生成します
const colorCode = generateRandomColorCode();
// ▼ 背景色を変更します（bodyの背景色を変える）
document.body.style.backgroundColor = colorCode;
// ▼ カラーコードを画面に表示します
colorCodeElement.textContent = `現在のカラーコード：${colorCode}`;
}
ここでの重要ポイントは、
document.body.style.backgroundColorにカラーコードを代入していること- カラーコードを
textContentで表示していることtextContentを使うことで、 ユーザーに見せる文字列を安全にテキストとして扱えます。
です。
ボタンにイベントを設定する
clickイベントで changeColor() を呼び出す
最後に、 「ランダムな色に変更」ボタンがクリックされたときに changeColor() を呼び出すようにします。
// ▼ ボタンがクリックされたときに色を変更します
changeColorButtonElement.addEventListener('click', function () {
changeColor();
});
これで、
- ユーザーがボタンを押すたびに
- ランダムなカラーコードが生成され
- 背景色が変わり
- カラーコードが表示される
という流れが完成します。
完成コード（コメント付きランダムカラーアプリ）
ここまでの内容を1つにまとめた完成コードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 43 前半：ランダムカラーアプリ</title>
<style>
body {
font-family: sans-serif;
text-align: center;
margin: 0;
padding: 40px;
transition: background-color 0.3s ease; /* 背景色の変化をなめらかにします */
}
#colorCode {
font-size: 1.5rem;
font-weight: bold;
margin-top: 20px;
}
#changeColorButton {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<h1>ランダムカラーアプリ</h1>
<!-- ▼ 色を変えるボタン -->
<button id="changeColorButton">ランダムな色に変更</button>
<!-- ▼ 現在のカラーコード表示エリア -->
<p id="colorCode">現在のカラーコード：#ffffff</p>
<script>
// ▼ DOM要素の取得
const changeColorButtonElement = document.getElementById('changeColorButton');
const colorCodeElement = document.getElementById('colorCode');
// ▼ 0〜255のランダムな整数を作る関数
function getRandomInt0to255() {
const random = Math.random() * 256; // 0以上256未満の数値
return Math.floor(random); // 小数点以下を切り捨てて0〜255の整数にします
}
// ▼ 0〜255の数値を2桁の16進数文字列に変換する関数
function toHex2Digits(number) {
const hex = number.toString(16); // 16進数文字列に変換します
return hex.padStart(2, '0'); // 2桁になるように先頭に0を付けます
}
// ▼ ランダムなカラーコード（#RRGGBB形式）を生成する関数
function generateRandomColorCode() {
const r = getRandomInt0to255(); // 赤の値（0〜255）
const g = getRandomInt0to255(); // 緑の値（0〜255）
const b = getRandomInt0to255(); // 青の値（0〜255）
const rHex = toHex2Digits(r); // 赤を2桁の16進数に
const gHex = toHex2Digits(g); // 緑を2桁の16進数に
const bHex = toHex2Digits(b); // 青を2桁の16進数に
const colorCode = `#${rHex}${gHex}${bHex}`; // #RRGGBB形式の文字列を作成
return colorCode;
}
// ▼ 背景色をランダムに変更し、カラーコードを表示する関数
function changeColor() {
const colorCode = generateRandomColorCode();
// 背景色を変更します
document.body.style.backgroundColor = colorCode;
// カラーコードを画面に表示します
colorCodeElement.textContent = `現在のカラーコード：${colorCode}`;
}
// ▼ ボタンがクリックされたときに色を変更します
changeColorButtonElement.addEventListener('click', function () {
changeColor();
});
// ▼ 初期状態でも一度ランダムな色にしてみたい場合は、以下を有効にします
// changeColor();
</script>
</body>
</html>
少しだけ発展させるアイデア
ランダムカラーアプリをもう少し楽しくするために、 次のような発展も考えられます。
- カラーコードをクリックするとクリップボードにコピーする
- RGB値（例：
rgb(123, 45, 67)）も一緒に表示する - テキストの色（文字色）も背景に合わせて見やすい色に切り替える
例えば、 背景がとても暗い色になったときは文字色を白に、 とても明るい色になったときは文字色を黒にする、 といった工夫もできます。
セキュリティ・ユーザー体験の視点からの補足
- カラーコードの表示には
textContentを使うことで、 ユーザーに見せる文字列を安全に扱うことができます。 - ランダムな値を扱うときでも、 「どの範囲の値が出るか」をきちんと決めておくことが大切です。
- 今回は 0〜255 の範囲に限定しています。
- 背景色の変化に
transitionを使うことで、 ユーザーにとって「急に変わった」ではなく「ふわっと変わった」感覚になり、 見た目の体験が良くなります。
Day 43 前半 練習用テンプレート
最後に、今日の内容をそのまま試せる練習用テンプレートを紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 43 前半：ランダムカラー 練習テンプレート</title>
<style>
body {
font-family: sans-serif;
text-align: center;
margin: 0;
padding: 40px;
transition: background-color 0.3s ease;
}
#colorCode {
font-size: 1.5rem;
font-weight: bold;
margin-top: 20px;
}
#changeColorButton {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<h1>ランダムカラー 練習</h1>
<button id="changeColorButton">色を変える</button>
<p id="colorCode">現在のカラーコード：#ffffff</p>
<script>
console.log('--- ランダムカラー 練習開始 ---');
const changeColorButtonElement = document.getElementById('changeColorButton');
const colorCodeElement = document.getElementById('colorCode');
function getRandomInt0to255() {
return Math.floor(Math.random() * 256);
}
function toHex2Digits(number) {
return number.toString(16).padStart(2, '0');
}
function generateRandomColorCode() {
const r = getRandomInt0to255();
const g = getRandomInt0to255();
const b = getRandomInt0to255();
const rHex = toHex2Digits(r);
const gHex = toHex2Digits(g);
const bHex = toHex2Digits(b);
return `#${rHex}${gHex}${bHex}`;
}
function changeColor() {
const colorCode = generateRandomColorCode();
document.body.style.backgroundColor = colorCode;
colorCodeElement.textContent = `現在のカラーコード：${colorCode}`;
console.log('現在のカラーコード:', colorCode);
}
changeColorButtonElement.addEventListener('click', changeColor);
console.log('--- ランダムカラー 練習テンプレートの準備が完了しました ---');
</script>
</body>
</html>
Day 43 前半のまとめ
Day 43前半では、
- ランダムカラーアプリを通して、 「ランダムな値を生成してDOMのスタイルに反映する」流れを体験したこと。
Math.random()とtoString(16)、padStart()を組み合わせて、#RRGGBB形式のカラーコードを生成したこと。- 背景色の変更とカラーコード表示を、
changeColor()関数にまとめて整理したこと。 - セキュリティとユーザー体験の両方を意識しながら、 見た目を変えるDOM操作の感覚を育てたこと。
を整理しました。
このランダムカラーアプリは、 デザインツールやテーマ切り替え機能などにも応用できる、 楽しくて実用的な練習素材になっています。
Day 43：DOM操作演習（後半）
「ランダムカラーアプリを“使えるツール”に育てて、DOM＋ロジック設計を深める」
Day 43後半では、前半で作成したランダムカラーアプリをさらに発展させて、 「実際に使ってみたくなる小さなツール」 に育てていきます。
テーマは同じく、
- ランダムカラー生成
- 背景変更
- カラーコード表示
ですが、後半では次のようなポイントを意識して深掘りします。
- カラーコードをコピーできるようにする
- テキストの色を背景に合わせて見やすくする
- 関数を整理して「読みやすい構造」にする
「動くサンプル」から、 「使いやすくて拡張しやすいアプリ」 へと一歩進めていきます。
ランダムカラーアプリの“使い勝手”を考える
どんな機能があると、ユーザーは嬉しいか
前半で作ったアプリは、
- ボタンを押すと背景色がランダムに変わる
- 現在のカラーコードが表示される
というシンプルなものでした。
後半では、次のような機能を追加していきます。
- カラーコードをクリックするとクリップボードにコピーできる
- 背景色に応じて文字色（テキストカラー）を自動で切り替える
- 暗い背景なら文字を白に
- 明るい背景なら文字を黒に
こうすることで、 「デザインの色を試すときに便利なツール」に近づいていきます。
HTMLを“完成形”に近づける
コピー用のヒントとコンテナを追加する
まずは、前半のHTMLに少しだけ要素を追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 43 後半：ランダムカラーアプリ</title>
<style>
body {
font-family: sans-serif;
text-align: center;
margin: 0;
padding: 40px;
transition: background-color 0.3s ease;
}
/* ▼ アプリ全体を囲むコンテナ */
#appContainer {
max-width: 480px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.2);
}
#colorCode {
font-size: 1.6rem;
font-weight: bold;
margin-top: 20px;
cursor: pointer; /* クリックできることを示します */
}
#changeColorButton {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
margin-top: 10px;
}
/* ▼ コピー完了メッセージ用 */
#copyMessage {
margin-top: 10px;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div id="appContainer">
<h1>ランダムカラーアプリ（後半）</h1>
<!-- ▼ 色を変えるボタン -->
<button id="changeColorButton">ランダムな色に変更</button>
<!-- ▼ 現在のカラーコード表示エリア（クリックでコピー） -->
<p id="colorCode">現在のカラーコード：#ffffff</p>
<!-- ▼ コピー完了メッセージ表示エリア -->
<p id="copyMessage"></p>
</div>
<script>
// ここにJavaScriptを書いていきます
</script>
</body>
</html>
ここでのポイントは、
- アプリ全体を
#appContainerで囲んで、見た目を少し整えていること - カラーコード表示に
cursor: pointer;を付けて、 「クリックできる」ことを視覚的に伝えていること - コピー完了メッセージ用の
<p id="copyMessage">を用意していること
です。
JavaScriptでDOM要素を整理する
必要な要素を変数にまとめる
// ▼ 「ランダムな色に変更」ボタン
const changeColorButtonElement = document.getElementById('changeColorButton');
// ▼ カラーコード表示用の要素（クリックでコピー）
const colorCodeElement = document.getElementById('colorCode');
// ▼ コピー完了メッセージ表示用の要素
const copyMessageElement = document.getElementById('copyMessage');
// ▼ アプリコンテナ（文字色の調整に使います）
const appContainerElement = document.getElementById('appContainer');
この4つが、 後半のランダムカラーアプリの中心となる要素です。
ランダムカラー生成の関数を再確認する
0〜255のランダム整数と16進数変換
前半で作った関数を、後半でもそのまま使います。
// ▼ 0〜255のランダムな整数を作る関数
function getRandomInt0to255() {
const random = Math.random() * 256; // 0以上256未満
return Math.floor(random); // 0〜255の整数にします
}
// ▼ 0〜255の数値を2桁の16進数文字列に変換する関数
function toHex2Digits(number) {
const hex = number.toString(16); // 16進数文字列に変換
return hex.padStart(2, '0'); // 2桁になるように先頭に0を付けます
}
// ▼ ランダムなカラーコード（#RRGGBB形式）を生成する関数
function generateRandomColorCode() {
const r = getRandomInt0to255();
const g = getRandomInt0to255();
const b = getRandomInt0to255();
const rHex = toHex2Digits(r);
const gHex = toHex2Digits(g);
const bHex = toHex2Digits(b);
const colorCode = `#${rHex}${gHex}${bHex}`;
return {
code: colorCode,
r,
g,
b
};
}
ここで、 前半との違いは 戻り値をオブジェクトにしている ことです。
code：#RRGGBB形式のカラーコードr, g, b：それぞれのRGB値（0〜255）
これにより、 後で「明るさを計算して文字色を決める」ときに、 RGB値を再利用できます。
背景色と文字色をセットで変更する
明るさを計算して文字色を決める
背景色がとても暗いときに黒い文字だと読みにくく、 逆にとても明るいときに白い文字だと読みにくくなります。
そこで、 RGB値から「明るさ」をざっくり計算して、 文字色を白か黒に切り替えます。
// ▼ RGB値から明るさをざっくり計算する関数
function calculateBrightness(r, g, b) {
// 人間の目の感度に近い重み付け（簡易版）
// 0に近いほど暗く、255に近いほど明るいイメージです
return 0.299 * r + 0.587 * g + 0.114 * b;
}
// ▼ 背景色と文字色を変更し、カラーコードを表示する関数
function applyColor(colorInfo) {
const { code, r, g, b } = colorInfo;
// 背景色を変更します
document.body.style.backgroundColor = code;
// カラーコードを表示します
colorCodeElement.textContent = `現在のカラーコード：${code}`;
// 明るさを計算します
const brightness = calculateBrightness(r, g, b);
// 明るさに応じて文字色を切り替えます
if (brightness < 128) {
// 背景が暗め → 文字を白に
document.body.style.color = '#ffffff';
appContainerElement.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
} else {
// 背景が明るめ → 文字を黒に
document.body.style.color = '#000000';
appContainerElement.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
}
}
ここでの重要ポイントは、
- RGB値から明るさを計算していること
- 明るさのしきい値（ここでは128）で「暗い／明るい」をざっくり判定していること
- 背景色だけでなく、文字色とコンテナの背景もセットで変えていること
です。
ランダムカラーを適用する中心関数を作る
changeColor() で「生成 → 適用 → コピー表示リセット」をまとめる
ランダムカラーアプリの中心となる処理を、 changeColor() という関数にまとめます。
function changeColor() {
// ▼ ランダムなカラーコードとRGB値を生成します
const colorInfo = generateRandomColorCode();
// ▼ 背景色・文字色・カラーコード表示をまとめて適用します
applyColor(colorInfo);
// ▼ コピー完了メッセージをリセットします
copyMessageElement.textContent = '';
}
これで、
- ボタンを押すたびに
- ランダムな色が生成され
- 背景色・文字色・コンテナ背景・カラーコード表示が 一括で更新される
という流れが完成します。
カラーコードをクリックでコピーできるようにする
Clipboard APIでテキストをコピーする
ブラウザには、 クリップボードにテキストをコピーするためのAPIがあります。
// ▼ カラーコードをクリップボードにコピーする関数
function copyColorCodeToClipboard() {
// 現在表示されているテキストからカラーコード部分を取り出します
const text = colorCodeElement.textContent; // 例：「現在のカラーコード：#a1b2c3」
// 「：」以降を取り出してカラーコードだけにします
const parts = text.split('：');
const code = parts[1]?.trim(); // 例：「#a1b2c3」
if (!code) {
copyMessageElement.textContent = 'コピーできるカラーコードがありません。';
return;
}
// Clipboard APIを使ってコピーします
navigator.clipboard.writeText(code)
.then(() => {
// コピー成功時のメッセージ
copyMessageElement.textContent = `カラーコード ${code} をコピーしました。`;
})
.catch(() => {
// コピー失敗時のメッセージ
copyMessageElement.textContent = 'コピーに失敗しました。ブラウザの設定を確認してください。';
});
}
ここでの重要ポイントは、
navigator.clipboard.writeText()を使ってテキストをコピーしていること- 成功時と失敗時でメッセージを分けていること
- カラーコード部分だけを取り出すために、
textContentを分割していること
です。
カラーコード表示要素にクリックイベントを設定する
// ▼ カラーコードをクリックしたときにコピーします
colorCodeElement.addEventListener('click', function () {
copyColorCodeToClipboard();
});
これで、
- ユーザーがカラーコード表示部分をクリックすると
- そのカラーコードがクリップボードにコピーされ
- 下に「コピーしました」というメッセージが表示される
という、 ちょっと嬉しい機能が完成します。
ボタンにイベントを設定し、初期状態も整える
「ランダムな色に変更」ボタンのイベント
// ▼ ボタンがクリックされたときに色を変更します
changeColorButtonElement.addEventListener('click', function () {
changeColor();
});
初期状態でも一度ランダムな色を適用する
ページを開いた瞬間から、 ランダムな色が表示されていると楽しいので、 初期化時に一度 changeColor() を呼び出します。
// ▼ ページ読み込み直後に一度ランダムな色を適用します
changeColor();
完成コード（コメント付き・発展版ランダムカラーアプリ）
ここまでの内容を1つにまとめた完成コードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 43 後半：ランダムカラーアプリ</title>
<style>
body {
font-family: sans-serif;
text-align: center;
margin: 0;
padding: 40px;
transition: background-color 0.3s ease;
}
#appContainer {
max-width: 480px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.2);
}
#colorCode {
font-size: 1.6rem;
font-weight: bold;
margin-top: 20px;
cursor: pointer; /* クリックできることを示します */
}
#changeColorButton {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
margin-top: 10px;
}
#copyMessage {
margin-top: 10px;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div id="appContainer">
<h1>ランダムカラーアプリ（後半）</h1>
<button id="changeColorButton">ランダムな色に変更</button>
<p id="colorCode">現在のカラーコード：#ffffff</p>
<p id="copyMessage"></p>
</div>
<script>
// ▼ DOM要素の取得
const changeColorButtonElement = document.getElementById('changeColorButton');
const colorCodeElement = document.getElementById('colorCode');
const copyMessageElement = document.getElementById('copyMessage');
const appContainerElement = document.getElementById('appContainer');
// ▼ 0〜255のランダムな整数を作る関数
function getRandomInt0to255() {
const random = Math.random() * 256;
return Math.floor(random);
}
// ▼ 0〜255の数値を2桁の16進数文字列に変換する関数
function toHex2Digits(number) {
const hex = number.toString(16);
return hex.padStart(2, '0');
}
// ▼ ランダムなカラーコードとRGB値を生成する関数
function generateRandomColorCode() {
const r = getRandomInt0to255();
const g = getRandomInt0to255();
const b = getRandomInt0to255();
const rHex = toHex2Digits(r);
const gHex = toHex2Digits(g);
const bHex = toHex2Digits(b);
const code = `#${rHex}${gHex}${bHex}`;
return { code, r, g, b };
}
// ▼ RGB値から明るさをざっくり計算する関数
function calculateBrightness(r, g, b) {
return 0.299 * r + 0.587 * g + 0.114 * b;
}
// ▼ 背景色・文字色・カラーコード表示をまとめて適用する関数
function applyColor(colorInfo) {
const { code, r, g, b } = colorInfo;
// 背景色を変更します
document.body.style.backgroundColor = code;
// カラーコードを表示します
colorCodeElement.textContent = `現在のカラーコード：${code}`;
// 明るさを計算して文字色を切り替えます
const brightness = calculateBrightness(r, g, b);
if (brightness < 128) {
// 背景が暗め → 文字を白に
document.body.style.color = '#ffffff';
appContainerElement.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
} else {
// 背景が明るめ → 文字を黒に
document.body.style.color = '#000000';
appContainerElement.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
}
}
// ▼ ランダムな色を生成して適用し、コピー表示をリセットする関数
function changeColor() {
const colorInfo = generateRandomColorCode();
applyColor(colorInfo);
copyMessageElement.textContent = '';
}
// ▼ カラーコードをクリップボードにコピーする関数
function copyColorCodeToClipboard() {
const text = colorCodeElement.textContent; // 例：「現在のカラーコード：#a1b2c3」
const parts = text.split('：');
const code = parts[1]?.trim();
if (!code) {
copyMessageElement.textContent = 'コピーできるカラーコードがありません。';
return;
}
navigator.clipboard.writeText(code)
.then(() => {
copyMessageElement.textContent = `カラーコード ${code} をコピーしました。`;
})
.catch(() => {
copyMessageElement.textContent = 'コピーに失敗しました。ブラウザの設定を確認してください。';
});
}
// ▼ ボタンがクリックされたときに色を変更します
changeColorButtonElement.addEventListener('click', () => {
changeColor();
});
// ▼ カラーコードをクリックしたときにコピーします
colorCodeElement.addEventListener('click', () => {
copyColorCodeToClipboard();
});
// ▼ ページ読み込み直後に一度ランダムな色を適用します
changeColor();
</script>
</body>
</html>
少しだけ発展させるアイデア
ランダムカラーアプリをさらに楽しくするなら、次のような発展も考えられます。
- 「お気に入りカラー」を保存して一覧表示する
- カラーコードをクリックすると、その色のプレビューを小さなボックスで表示する
- HSL（色相・彩度・輝度）形式でも表示して、デザイン寄りの調整に使えるようにする
こうした拡張は、 すべて「DOM操作＋イベント＋ロジック」の組み合わせで実現できます。
セキュリティ・ユーザー体験の視点からのまとめ
- カラーコードやメッセージの表示には
textContentを使うことで、 ユーザーに見せる文字列を安全に扱うことができます。 - Clipboard APIは便利ですが、ブラウザや環境によっては制限があるため、 失敗時のメッセージを用意しておくことが大切です。
- 背景色に応じて文字色を切り替えることで、 「見やすさ」というユーザー体験の質が大きく向上します。
Day 43 後半のまとめ
Day 43後半では、
- ランダムカラーアプリに「コピー機能」と「文字色の自動切り替え」を追加し、 実用的な小さなツールに近づけたこと。
- RGB値から明るさを計算し、背景に応じて文字色を変えるロジックを体験したこと。
- 関数を役割ごとに分けて、 「生成」「適用」「コピー」という構造でコードを整理したこと。
を整理しました。
このランダムカラーアプリは、 テーマカラー選定やデザインの試行に使える、 ちょっとした「クリエイティブツール」としても活用できます。