便利ツール色関連の解説をしたり、記事を書く時に、カラーコードのRGB値をダーッと一覧で見たい!という機会がちょこちょこありまして。RGB」というツールを作りました。Vue.jsを使ってみたので、制作方法をかいつまんで紹介します。RGB】ってこんなサイトカラーコードを入力するとその場でRGB値に変換されます。キーか「Add」ボタンクリックで下のリストに追加されます。色を比較したい時やたくさんのカラーコードを変換したい時に便利。値はクリックするとコピーできます。RGBではリストに追加したり、コピーできる機能がありますが、この記事ではカラーコードをRGB値に変換するまでの流れを説明します(すべて紹介しようと思ったら長くなったので...)。CSSについてはかなりはしょりますwVue.jsの基礎については、過去記事「WebデザイナーのためのVue.js事始め」も読んでみてくださいね。ファイルの準備まずは必要なファイルを作成しましょう。今回作成するのは以下の3つのファイルです:index.htmlapp.jsstyle.cssindex.htmlにはベースとなるテキスト入力欄と、RGB値が表示される予定の部分を作っておきます。閉じタグの直前に記述して読み込むようにします。src="app.js"></script></body></html>CSSでそれなりにスタイルを整えて、ひとまずこのように表示させておきます。カラーコードをRGB値に変換それではVue.jsの登場です。入力フォームに入力した内容を取得できるようにします。「app」というIDのついた範囲で動作するよう指定し、入力フォームでは「newColor」の値を取得します。記述すると、その箇所に入力した文字が表示されるようになります。うまく反映されています!続いて、取得したカラーコードをRGB値に変換します。}});算出プロパティを使って計算式を書いています。取得したカラーコードを1文字ずつ分解します。0、0、b、b、d、d、の6文字に分解されます。することでカラーコードが3桁の場合と6桁の場合で計算しやすくなります。)、1文字目を2回繰り返して変換(R値)、2文字目を2回繰り返して変換(G値)...という計算をします。)、1文字目と2文字目を組み合わせて変換(R値)、3文字目と4文字目を組み合わせて変換(G値)...と繰り返してRGB値を出します。値を出力できるようにします。カラーサンプルを表示このままではどんな色かわかりづらいので、色のサンプルを表示させます。JavaScriptを書き足す必要はありません。取得したカラーコードをそのままインラインCSSで背景色として指定するだけです。