Nagashima Laboratory

カラーピッカー（JavaScript）

JavaScriptでカラーピッカー（色を選ぶ機能）作りをしながら、定数や関数の使い方を確認します。

キーワード：定数, 関数, イベント, DOM

作成例（完成イメージ）

下記の順番で進めます。作り始める前にこれから何をしようとしているのかを把握しておきます。

  1. HTMLとCSSでボタンの作成をする
  2. フォームの値を取得して、コンソールに表示させる
  3. カラーコードが画面に表示されるようにする
  4. 「定数」を使ってコードを見やすくする
  5. テキストや色が変わるタイミングを設定する（イベント）
  6. 処理に名前をつける（関数）
  7. 背景色を変更する機能を追加する

【準備】フォルダ：javascript_color

①JavaScriptを書くための準備で作成したフォルダ（空のHTML、CSS、JavaScriptが入っている）を準備します。GitHubからもダウンロードできます。

②フォルダの名前を「javascript_color」に変更します

フォームの値を取得する

①HTMLとCSSファイルを編集します

▼index.html

  <header>
    <h1>Color Picker</h1>
  </header>
  <main>
    <div>
      <p id="bodyText">カラーコード</p>
      <input id="myColor" type="color">
    </div>
  </main>

▼style.css

body {
  text-align: center;
  background: #000;
  color: #FFF;
}

div {
  background: #FFF;
  color: #000;
  padding: 3rem;
  border-radius: 1rem;
  width: 300px;
  margin: 0 auto;
}

【補足】IDやClass名の付け方

ID名やClass名の命名にはよく使われる規則があります。一つの書類内では統一することが望ましいです。

camelCase（キャメルケース）：小文字から初めて、続く単語は大文字にします。JavaScriptの関数名などに使われます。

PascalCase（パスカルケース）：冒頭と、続く単語の先頭を大文字にします。

chain-case（チェインケース）：ハイフンでつなぎます。HTML・CSSのID・class名などに使われます。

snake_case（スネークケース）：アンダースコアでつなぎます。Pythonなどに使われます。

③カラーピッカーで選んだ色をコンソールに表示されるコードを書きます

▼script.js

console.log(document.getElementById('myColor').value);

document.getElementById('ID名')

HTMLファイル内の中から指定したID名の要素を取得しています

.valueを付けることで「値」を取得しています。

④動作を確認します。コンソールにカラーコードが表示されていれば、値の取得は成功しています。現時点では、カラーピッカーで他の色を選んでも、自動的にはコンソールの情報は変更されません（まだ指示をしていないため）。

テキストを変更する

HTML上のテキストを書き換えて、カラーコードが画面に表示されるようにします。

①まずは文字の書き換えを行うコードを確認します。

▼script.js

console.log(document.getElementById('myColor').value);
document.getElementById('bodyText').textContent = '文字の置き換え';

②コンソールに表示させていた、カラーコードが、画面上のテキストと置き換わるように変更します。

▼script.js

document.getElementById('bodyText').textContent = document.getElementById('myColor').value;

画面上にカラーコードを表示できるようになったので、console.logの方は 不要になります。コメントアウト（//）して非表示にしておきます。

定数を使う

定数とは「箱」のようなもので、文字列、数値、式などを入れておくことができます。定数を使うことで、同じコードを何度も書かずに使い回したり、コードをより見やすく整理できます。

①定数の宣言をする（定数を決めること）

▼script.js（冒頭に書きます）

//定数の宣言
const color = document.getElementById('myColor');
const text = document.getElementById('bodyText');

constの後ろに書かれているのが、定数の名前（箱につけるラベルのようなもの）です。ここでは、カラーピッカーを color、カラーピッカーの上に書かれているテキストを、text という名前にしています。

②「テキストの変更」のときに書いたコードを書き換える

▼script.js

document.getElementById('bodyText').textContent = document.getElementById('myColor').value;

↓

text.textContent = color.value;

【補足】変数と定数

constで宣言する「定数」は中身を入れ替えられない（=再代入できない）性質があります。似たようなものにletで宣言する「変数」があり、こちらは中身の入れ替えが可能（=再代入できる）です。

イベントの設定（動作のきっかけを作る）

addEventListener()を使って、動作を引き起こすためのきっかけを設定します。きっかけにあたるものを「イベント」と言います。

これからしたいことは「カラーピッカーで色が選択されたら、カラーコードを表示する」ことです。

▼script.js

// カラーピッカーで色が選択されたら、changeColorを動作させる
color.addEventListener('input', changeColor);
  • 何が：カラーピッカー（const color で定義した color を使います）
  • どうなったら：色が選択されたら（inputされたら）
  • どうする：背景色を変える（changeColor という動作をさせる）

まだchangeColorの動作を定義していないので、この段階ではエラーになります。

関数を作る（処理に名前をつける）

▼script.js

function changeColor(){
// カラーコードを表示
  text.textContent = color.value;
}

// カラーピッカーで色が選択されたらchangeColorを動作させる
color.addEventListener('input', changeColor);

背景色を変更する機能を追加する

同じ関数の中に、背景色を変更する処理も追加します

▼script.js

function changeColor(){
// カラーコードを表示
  text.textContent = color.value;
// 背景色を変更
  document.body.style.backgroundColor = color.value;
}

参考書籍・リンク