【Vue.js】RGBをデータバインディングさせて簡易カラーストックツールを作ってみた

09 Apr

さてさて、だいぶご無沙汰更新となってしまいましたが、皆様いかがお過ごしでしょうか…？

雪も溶けだいぶ春な感じになり、ようやく車いすでも活動しやすくなってきたこの辺りで、記事を更新しようと思います…！

タイトルの通り、今回もVue.jsのサンプルを作って遊んでみたのでコードを交えながら紹介していきます。

また、実際のサンプルを見ながら記事を読んだ方が分かりやすいかと思いますので、以下ボタンよりご確認ください！

サンプルを確認する

コンテンツ一覧

HTML側の記述について

今回は以下の要素を設けることにしました。

RGBそれぞれのレンジ入力欄（スライダー：最大値は255とする）
レンジ入力欄の値によって色変化するdiv（プレビュー的な）
「ストックする」ボタン
ストックされたカラー一覧
カラーが1つもストックされていない場合のメッセージ

それぞれの記述について、解説します。

RGBそれぞれのレンジ入力欄

<div class="color-form">
  <div class="color-form__item">
    <input type="range" name="r" id="r" max="255" v-model="r">
    <span v-bind:style="{background: 'rgb('+r+', 0, 0)'}">R</span>
  </div>
  <div class="color-form__item">
    <input type="range" name="g" id="g" max="255" v-model="g">
    <span v-bind:style="{background: 'rgb(0, '+g+', 0)'}">G</span>
  </div>
  <div class="color-form__item">
    <input type="range" name="b" id="b" max="255" v-model="b">
    <span v-bind:style="{background: 'rgb(0, 0, '+b+')'}">B</span>
  </div>
</div>

RGBそれぞれの文字部分にも背景色を設定しており、スライダーの値によって変化するようにしてます。

レンジ入力欄の値によって色変化するdiv

<div class="color__item" v-bind:style="{background: 'rgb('+r+', '+g+', '+b+')'}"></div>

CSSのrgb指定に使う値をデータバインディングさせ、描画させています。

「ストックする」ボタン

<a href="javascript:void(0);" class="color__stock" v-on:click="stockColor">
  ストックする
</a>

stockColorという関数をVue.js側で定義しており、ボタンクリックで実行させるようにしてます。

ストックされたカラー一覧

<ul class="color-list">
  <li class="color-list__item" v-for="( color, index ) in colors">
    <div class="color-list__color" v-bind:style="{background: color}"></div>
    <p class="color-list__code">
      {{ color }}
    </p>
    <a href="javascript:void(0);" class="color-list__delete" v-on:click="deleteColor( index )"></a>
  </li>
</ul>

「ストックする」ボタンにより、その値が配列に追加されるようになってますので、ループさせてます。
また、それぞれのli内にはその色を削除できるボタンも設けてます。

カラーが1つもストックされていない場合のメッセージ

<p v-if="!active">
  まだカラーはストックされておりません。
</p>

activeという値のtrue/falseによる条件分岐が適用されてます。

コンテンツ一覧へ戻る

Vue.js側の記述について

全コードは次のようになります。

new Vue( {
  el: "#test",
  data: {
    r: 0,
    g: 0,
    b: 0,
    colors: [],
    active: false
  },
  methods: {
    stockColor: function(){
      this.active = true;
      this.colors.unshift( 'rgb('+this.r+', '+this.g+', '+this.b+')' );
    },
    deleteColor: function( index ){
      this.colors.splice( index, 1 );
      if( this.colors.length == 0 ){
        this.active = false;
      }
    }
  }
} )

それでは、細かく分けて解説していきます。

定義したデータについて

data: {
  r: 0,
  g: 0,
  b: 0,
  colors: [],
  active: false
},

まずはRGBそれぞれの値ですね。colorsは色一覧を描画するための配列になります。
activeについてですが、こちらはカラーが1つ以上ストックされているか判定させるための真偽値になります。
カラーが1つもストックされていない場合「まだカラーはストックされておりません。」というpタグを出しておくために使います。

メソッド（関数）について

methods: {
  stockColor: function(){
    this.active = true;
    this.colors.unshift( 'rgb('+this.r+', '+this.g+', '+this.b+')' );
  },
  deleteColor: function( index ){
    this.colors.splice( index, 1 );
    if( this.colors.length == 0 ){
      this.active = false;
    }
  }
}

定義する関数については「ストックする」ボタンにより実行されるstockColorと、カラー一覧それぞれに設けられている「削除」ボタンにより実行されるdeleteColorの2つになります。

関数の処理内容については、次のようになります。

stockColor

active変数をtrueにする（1つもストックされていない場合に表示されるメッセージが消える）
colors配列の先頭にデータを追加

deleteColor

colors配列から該当するデータを削除する
colors配列が空になった場合、active変数をfalseにする（1つもストックされていない場合に表示されるメッセージが表示される）