Web上で色が作成できるカラーミキサーコンポーネント [Vue.js, JavaScript]

Vue.jsを使用してWeb(ブラウザー)上で色の作成ができるカラーミキサーコンポーネントを作成します。
カラーミキサーコンポーネントはRGB形式とHSL形式に対応させます。

プロジェクトの作成

プロジェクトはVueCLIで作成します。コマンドプロンプトを開いてプロジェクトを作成するフォルダー(ディレクトリ)に移動します。
以下のコマンドはあらかじめVue CLI がグローバルインストールされている(「npm uninstall -g vue-cli」コマンドが実行されている)ことを前提とします。

グローバルインストロールではなくローカルにインストールしている場合は、コマンドの頭に「npx」を付けて

を実行してください。

上記の例では「color-mixer-project」という名前のプロジェクトを作成しています。

プロジェクトの設定

vue createコマンドを実行すると、デフォルトインストールするか、手動インストールするかを訊かれますので「Manually select features」を選択してEnterキーを押します。

VueCLI カラーミキサープロジェクト プリセット選択

「Manually select features」を選択すると必要なプラグインの選択をします。ここでは「CSS Pre-processors」を追加で選択してEnterキーを押します。

VueCLI カラーミキサープロジェクト プラグイン選択

「CSS Pre-processors」の選択では「Sass/SCSS (with dart-sass)」を選択してEnterキーを押します。

VueCLI カラーミキサープロジェクト CSSプリプロセッサー選択

後はすべてEnterキーを押してインストールを進めます。

VueCLI カラーミキサープロジェクト 作成完了

上記の画面が表示されればプロジェクトのインストールは完了です。

コンポーネントの作成

コンポーネントを作成します。
プロジェクトを作成したフォルダー(ここでは「color-mixer-project」)の「src\components」に単一ファイルコンポーネントを作成します。
既に「HelloWorld.vue」というファイルがあるので、コピーして作成してもいいでしょう。

ここではRGB形式用のコンポーネントの「RgbColorMixer.vue」とHSL形式用のコンポーネントの「HslColorMixer.vue」の2つを作成します。

RgbColorMixer.vue

RgbColorMixerコンポーネントは、赤、緑、青の3色を指定するスライダーと、3色を合成して色を作成した結果をカラーコードと一緒に表示します。
ソースコードは以下のようになります。単一ファイルコンポーネントなので、ファイルにHTML、スクリプト、スタイルのすべてが記述されていますが、わかりやすいように分けて記載します。

HTML テンプレート部分

HTMLのテンプレート部分のソースコードです。

class属性に指定しているスタイルの「title」や「slider is-fullwidth is-danger」の部分はBulma(BulmaExtensionsを含む)を使用しています。
Bulmaはnpmでインストールできます。

インストールしたBulmaのスタイルはスクリプトでimportします。

Vue.js スクリプト部分

スクリプト部分のソースコードです。ここではTypeScript等のaltJSは使用せずにJavaScriptでコーディングしています。

SCSS スタイル部分

スタイル部分のソースコードです。CSSはSCSS形式のSassを使用しています。

HslColorMixer.vue

以下のソースコードはHSL形式で色を作成するHslColorMixerコンポーネントのものになります。
HslColorMixerコンポーネントもRgbColorMixerコンポーネントと同様に、スライダーで選択した条件によって色を作成します。
HSL形式では、赤、緑、青の3色の替わりに「色相」「彩度」「輝度」を指定します。

HTML テンプレート部分

Vue.js スクリプト部分

HSL色空間で作成した色をtoRgbColorCodeメソッドでRGBに変換して、カラーコードを生成して表示しています。

SCSS スタイル部分

コンポーネントを利用するアプリケーション

srcフォルダーの直下にある「App.vue」ファイルを変更します。
HelloWorldコンポーネントを使用している箇所を、RgbColorMixerコンポーネントとHslColorMixerコンポーネントに置き換えます。
以下ソースコードになります。

HTML テンプレート部分

Vue.js スクリプト部分

SCSS スタイル部分

プロジェクトの実行

ブラウザーのアドレスに「http://localhost:8080/」と入力してプロジェクトを実行します。

カラーミキサー実行結果

ブラウザーにRGBとHSLのカラーミキサーコンポーネントが表示されました。

スライダーを動かして色を作成してみます。

カラーミキサー実行結果 色選択

RGB形式、HSL形式ともに、スライダーで選択した条件に応じて色を作成することができました。

Vue.js 入門 Tips 一覧