色変数の命名補助

※この記事はQiitaから移植しました。

*

ちょっとしたことですが

カラーコード用の変数の命名に迷う

現在開発に携わっているプロダクトでは、カラーコードを格納する用の変数がこんな感じで定義されています。

variables.tsx

export const clrWhite = '#ffffff'
export const clrBlack = '#393939'
export const clrGray = '#ACACAC'
export const clrLightGray = '#FAFAFA'
export const clrDarkGray = '#DDDDDD'
export const clrBlue = '#468BE8'
export const clrLightBlue = '#0CD7D7'
export const clrOrange = '#FCA316'

//以下ずっと続く

扱う色が増えてくると名前が枯渇しがちです。できれば名前を考える手間を省きたいところです。

やったこと

https://github.com/meodai/color-names
↑のAPIをコールするシェルスクリプトを作成してnpm scriptで使えるようにしました。

手順

jqコマンドのインストール

https://stedolan.github.io/jq/download/

brew install jq

確認

$ jq --version
jq-1.6

shellを書く

簡単なのでいいと思います。(というか簡単なのしか書けない)
引数で#なしのhexカラーコードを受け取り https://api.color.pizza/v1/hexValueWithout# にリクエストを送って色名の部分だけ出力するという内容になっています。

colorname.sh

#!/bin/sh
RES=$(curl -sX GET "https://api.color.pizza/v1/$1")
echo $RES | jq ".colors[0].name"

package.jsonのscriptsにコマンド追加

package.json

  "scripts": {
    "colorname": "bash ./colorname.sh"
  }

使い方

たとえば #f5564c の色名が欲しい場合

$ npm run colorname f5564c

とすると

"Pumping Spice"

と返ってきます。なのでclrPumpingSpiceみたいな変数名にすればいいというわけです。

デメリット

変数名から色が推測しにくいです。
これは変数の命名としてはかなり致命的です。しかしカラーコードを変数に格納する一番の理由は、そもそもカラーコードをハードコーディングすることを防ぐことだと思っています。
なので色変数に関しては、わかりやすさは二の次でいいのではないかと考えています。