Vue.jsでカラーコードからRGB値にサクッと変換する方法

【Quick HEX to RGB】ってこんなサイト

カラーコードを入力するとその場で RGB 値に変換されます。

Enter キーか「Add」ボタンクリックで下のリストに追加されます。色を比較したい時やたくさんのカラーコードを変換したい時に便利。

値はクリックするとコピーできます。

ぜひ実際に使って動作を確認してみてくださいね：Quick HEX to RGB

制作手順

Quick HEX to RGBではリストに追加したり、コピーできる機能がありますが、この記事ではカラーコードを RGB 値に変換するまでの流れを説明します（すべて紹介しようと思ったら長くなったので…）。CSS についてはかなりはしょります w

Vue.js の基礎については、過去記事「Web デザイナーのための Vue.js 事始め」も読んでみてくださいね。

1. ファイルの準備

まずは必要なファイルを作成しましょう。今回作成するのは以下の 3 つのファイルです：

1. index.html
2. app.js
3. style.css

index.html にはベースとなるテキスト入力欄と、RGB 値が表示される予定の部分を作っておきます。

<section id="app">
  <span class="hash">#</span>
  <input type="text" placeholder="00bbdd" />
  <div class="new-color">
    <p class="copy-value">rgb(0, 187, 221)</p>
  </div>
</section>

Vue.jsと app.js は body の閉じタグの直前に記述して読み込むようにします。

・・・（省略）・・・
<!-- JS -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="app.js"></script>
</body>
</html>

CSS でそれなりにスタイルを整えて、ひとまずこのように表示させておきます。

2. カラーコードを RGB 値に変換

それでは Vue.js の登場です。入力フォームに入力した内容を取得できるようにします。「app」という ID のついた範囲で動作するよう指定し、入力フォームでは「newColor」の値を取得します。

new Vue({
  el: "#app",
  data: {
    newColor: "",
  },
});

index.html では作成しておいた input タグに v-model="newColor" を追加すれば OK。

<input v-model="newColor" type="text" placeholder="00bbdd" />

試しに index.html に {{newColor}} と記述すると、その箇所に入力した文字が表示されるようになります。

うまく反映されています！

続いて、取得したカラーコードを RGB 値に変換します。

new Vue({
  el: "#app",
  data: {
    newColor: "",
  },
  computed: {
    // Getting hex code and convert to RGB value
    rgbValue: function () {
      // Get each letter of hex code
      const hexValue = this.newColor.split("");
      let r, g, b;
      // 3 digit hex code (repeat same letter to make it as 6 digits)
      if (this.newColor.length === 3) {
        r = parseInt(hexValue[0].toString() + hexValue[0].toString(), 16);
        g = parseInt(hexValue[1].toString() + hexValue[1].toString(), 16);
        b = parseInt(hexValue[2].toString() + hexValue[2].toString(), 16);
        // 6 digt hex code
      } else if (this.newColor.length === 6) {
        r = parseInt(hexValue[0].toString() + hexValue[1].toString(), 16);
        g = parseInt(hexValue[2].toString() + hexValue[3].toString(), 16);
        b = parseInt(hexValue[4].toString() + hexValue[5].toString(), 16);
      }
      return r + ", " + g + ", " + b;
    },
  },
});

算出プロパティを使って計算式を書いています。まず this.newColor.split(''); で取得したカラーコードを 1 文字ずつ分解します。例えば「00bbdd」というカラーコードを入力されたら 0、0、b、b、d、d、の 6 文字に分解されます。こうすることでカラーコードが 3 桁の場合と 6 桁の場合で計算しやすくなります。

続いて、入力されたカラーコードが 3 桁だったら（ if (this.newColor.length === 3) ）、1 文字目を 2 回繰り返して変換（R 値）、2 文字目を 2 回繰り返して変換（G 値）…という計算をします。また、入力されたカラーコードが 6 桁だったら（ else if (this.newColor.length === 6 ）、1 文字目と 2 文字目を組み合わせて変換（R 値）、3 文字目と 4 文字目を組み合わせて変換（G 値）…と繰り返して RGB 値を出します。

最後に return r + ', ' + g + ', ' + b; で値を出力できるようにします。

index.html の方には表示させたい箇所に rgb({{rgbValue}}) と書けば計算された RGB 値が表示されます！

<div class="new-color">
  <p class="copy-value">rgb({{rgbValue}})</p>
</div>

カラーコードから RGB 値を出すだけならこれだけで OK！ですが、もう少し機能を足したいので続きます！

3. カラーサンプルを表示

このままではどんな色かわかりづらいので、色のサンプルを表示させます。JavaScript を書き足す必要はありません。取得したカラーコードをそのままインライン CSS で背景色として指定するだけです。

HTML に「color-sample」というクラスのついた div を用意しました。その div に対して :style="{background: '#' + newColor}" で背景色に設定します。

<div class="new-color">
  <div class="color-sample" :style="{background: '#' + newColor}"></div>
  <p class="copy-value">rgb({{rgbValue}})</p>
</div>

あとは CSS でそれっぽく装飾すれば OK。

.color-sample {
  width: 60px;
  height: 40px;
  border-radius: 0.4rem;
  display: inline-block;
  margin-right: 20px;
}

カラーサンプルがあるとより使いやすくなったかなと思います！

4. 正しいカラーコード以外は — と表示

このままではカラーコードとして使えない文字列が入っていると計算できず「NaN」（= Not a Number）が表示されます。これではちょっと不格好なので、不正なカラーコードだと「—」と表示されるよう追記していきましょう。考え方としては以下の順序で実装していくことになります：

1. 正しいカラーコードの条件を用意
2. 入力されたカラーコードが正しい値か判定する
3. 間違っていれば「—」と表示

ということで、まずは「正しいカラーコード」を用意します。これは正規表現という書き方で表していきます。カラーコードは A〜F のアルファベット（大文字・小文字）と 0〜9 の数値で成り立っているので、正規表現で書くと /^([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/ と表されます。うぎゃ！記号だらけ！簡単に翻訳すれば「A〜F のアルファベット（大文字＆小文字）と 0〜9 の数値の 6 桁または 3 桁」と書かれています。

これを data プロパティー内に定義しておきます。

new Vue({
  el: "#app",
  data: {
    newColor: "",
    validColor: /^([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/,
  },
  computed: {
    // ・・・省略・・・
  },
});

続いて、入力されたコードが定義した正しいカラーコードなのかを検証します。算出プロパティー内に、 if (this.validColor.test(this.newColor) !== true) で判定する条件分岐を記述しましょう。

new Vue({
  el: '#app',
  data: {
    newColor: '',
    validColor: /^([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
  },
  computed: {
    //  ・・・省略・・・
      if (this.validColor.test(this.newColor) !== true) {
        // この部分追加
      }
      return r + ', ' + g + ', ' + b;
    }
  }
});

最後にその if 文の中に r = g = b = '---'; で「—」と表示させるよう書きます。ここでは変数 r にも g にも b にも同じように「—」が入るよーという指定をしています。

// If color code is not valid, show '---'
if (this.validColor.test(this.newColor) !== true) {
  r = g = b = "---";
}

「www」と入力すると「—」が表示されますが、正しいカラーコードでは RGB 値が表示されました！

5. 入力前は RGB 値・カラーサンプルを非表示にする

カラーコードを入力する前も「rgb(—, —, —)」が表示されているので、ここはフォームに何も入力されていなければ非表示にします。ここも JavaScript を書く必要はありません。RGB 値とカラーサンプルを囲っている div に v-if="newColor != ''" と書けば OK！これは、「もし（ v-if ）入力フォームの値が（ newColor ）空っぽじゃなかったらだったら（!= ''）、この div を表示するよー」という指定をしています。

<div class="new-color" v-if="newColor != ''">
  <div class="color-sample" :style="{background: '#' + newColor}"></div>
  <p class="copy-value">rgb({{rgbValue}})</p>
</div>

完成！

入力したカラーコードを Enter で確定したり、ページ推移もないのでサクッと確認する時に便利です。

Vue.js はまだまだ勉強中なので、もっと良い書き方があるのかもしれませんが、いじってると楽しいですねー！みなさんもぜひ「Quick HEX to RGB」を使ってみてくださいね！