Vue.jsサンプルコード(10)スライダーで入力したカラーコードを動的に表示する

10. スライダーで入力したカラーコードを動的に表示する

  • 3つのスライダーでHSLの値を変更すると、色と数値が動的に変更されます。

サンプル


 var vm = new Vue({
   el: "#app",
   data: {
     h: 163,
     s: 84,
     l: 77,
   },
   computed: {
     c: function() {
       return `hsl(${this.h}, ${this.s}%, ${this.l}%)`
     },
   },
 });

以下はHTML部分の要点のみを抜粋したものです。

<input class="form-control" v-model="c" :style="{backgroundColor: c}" />

          <input type="range" min="0" max="360" v-model.number="h" />
          <input type="range" min="0" max="100" v-model.number="s" />
          <input type="range" min="0" max="100" v-model.number="l" />

おまけ: サンプルコード07はコードポイントによってlengthの結果が正しくならないことがある

サンプルコード07のHTMLに以下のコードがありますが、文字によってlengthの結果が期待どおりにならないことがあります。

    <div class='panel-footer'>あと {{140 - b.length}} 文字
    </div>
'a'.length   // => 1
'あ'.length  // => 1
'正'.length  // => 1
'𠮷'.length  // => 2

上の例では「𠮷」(0x20BB7)で2が返ります。

これはVue.jsの問題ではなく、JavaScriptの問題です。alphanumericや簡単な漢字・ひらがな・カタカナ(コードポイントがUTF-16の16ビットに収まる場合)のうちはよいのですが、U+10000を超えるとlengthが1つのコードポイントを2とカウントします。

さしあたっての回避法として、BPSアプリチームのyoshiさんが見つけてくれた方法をご紹介します。詳しくは別記事にしたいと思います。

[...'𠮷'].length // => 1

このあたりの闇深い部分については以下が大変参考になります。

参考: JavaScript における文字コードと「文字数」の数え方


Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の半分ほど、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れてそれぞれ一部を翻訳。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ