JavaScriptへのダイビング:Hex2RGBカラーコンバーターの作成方法

UnsplashのFotis Fotopoulosによる写真

この記事では、16進数とRGBの間でカラーコードを変換するWebアプリを作成します。

ここでデモとソースコードを見つけることができます。

プロジェクト構造:

プロジェクトの構造は非常に単純です。

  1. index.html:アプリの構造が含まれています。
  2. style.css:ページをスタイルします。
  3. app.js:プロジェクトの実行に必要なすべてのコードが含まれています。

アイデア:

このアプリに実行してほしいことは次のとおりです。

  1. 16進数のテキストフィールドに何かが入力されるたびに、アプリは色が有効かどうかを確認する必要があります。その場合は、RGBに変換し、背景として設定してから、RGBテキストフィールドにRGB値を設定します。その逆も同様です。
  2. 短い16進カラーコードがテキストフィールドに入力されている場合、テキストフィールドがフォーカスを失った(ユーザーがテキスト領域の外側をクリックした)ときに展開します。
  3. 16進入力に「#」記号を自動的に追加します。

さぁ、始めよう!

index.html

それぞれ「hex」と「rgb」のIDを持つ2つのテキストフィールドを作成しました。それぞれに加えて、エラー用のsvgアイコンがあり、デフォルトでは非表示のクラスがあります。

style.css

マークアップを少し見やすくするための基本的なレイアウトを次に示します。ここでは、.hiddenと.darkの2つのクラスを定義しています。前者はエラーSVGアイコンを非表示/表示するために使用され、後者は背景色に基づいてテキストの色を変更するために使用されます。デフォルトでは、テキストを暗い色に設定しています(明るい背景用)。

app.js

ここが魔法の部分です。コードをチャンクに分解します。

まず、IDが「hex」および「rgb」の入力をターゲットとする変数を定義しています。次に、入力Hex / RGBが有効かどうかをチェックする関数があります。基本的な正規表現のセットアップを使用し、ブール値を返します。あなたが彼らに脅かされたら、このRegexTutorialを試してみることをお勧めします。

ここでは、modifyHexという解析関数を作成しました。この関数は、入力16進数が4文字かどうかをチェックします。つまり、「#」が含まれており、省略形(#333など)であり、「#」を空の文字に置き換えます。次に、長さが3であるかどうかを確認し、6文字に拡張します(たとえば、#123 =#112233)。

現在、hexをrgbに、またはその逆に変換できる2つの関数を定義しています。 hexToRgbの詳細な手順は次のとおりです(このコードは、プロセスがどのように機能しているかを説明するために拡張されています)。

  1. 結果を保存する空の配列を定義します。
  2. 「#」記号が存在する場合はそれを置き換え、長さが6に等しくない場合(つまり、簡略版)、上記のmodifyHex関数を呼び出して展開します。
  3. 非常に基本的な方法で、hexからrgbは、16進コード(16進数)をrgbコード(10進数)に変換することで機能します。 16進コードの2文字ごとは、RGBカラーコードの値を表します。たとえば、#aabbccの場合、赤は(10から基数まで)、緑は(10から基数)、青は(10から基数)です。そのため、この関数では、16進値をスライスし、parseIntを使用して10進数に変換し、定義済みの配列に格納します。
  4. 最後に、出力文字列を返します。

rgbToHex関数の場合(これは短いロジックで記述されています):

  1. かっこ内の部分を抽出するために正規表現を直接使用しています。つまり、rgb(123,21,24)は123,21,24を返します。
  2. 次に、マップ関数を使用して新しい配列を返します。この配列は、数値を基数16に変換し、値を埋め込みます。

この部分について説明します。括弧内の部分を照合するために正規表現を使用すると、「文字列」タイプのデータが返されます。これをベース16に変換するには、パラメーターが「16」のtoStringメソッドを使用する必要があります。

現在、toStringメソッドは数値データ型のみに適用されるため、parseIntを使用して最初に配列のすべての要素を数値に変換し、次にtoString(16)を使用して16進形式に変換し、最後にパディングを追加して正確に2にします文字が長い。 16進数に変換したい「14」のようなものがある場合は、パディングが必要です。「e」が返されます。ただし、16進カラーコードは各パーツに2文字必要なので、パディングが必要であり、「0e」になります。

注:padStartはES8の機能であり、すべてのブラウザーでサポートされているわけではありません。このチュートリアルを簡単にするために、ES5にはトランスコンパイルしていません。

3.最後に、結合して大文字に変換することにより、結果の配列を返します。

この関数は、入力された入力タイプが間違っている場合に備えて、入力の右側に小さなエラーマークを追加するために使用されます。

入力の内容(hex.valueおよびrgb.value)をそれぞれのチェック関数で実行し、返されたブール値を使用して.hiddenクラスを追加/削除します。

ここで、背景色を取得して、暗いか明るいかを判別する関数を定義しています(このコードはStackOverflowから取得しました)。個々の色の値に計算された数値を乗算し、「黒」または「白」を返します。次に、別の関数を使用して、.darkクラスを追加/削除してテキストの色を変更します。

イベントリスナーの追加:

最後に、イベントリスナーを追加して、上記のすべての機能を使用します。

最初に、keyupイベントを16進入力に追加しています。このイベントは、キーが放されるたびにトリガーされます。この関数の機能は次のとおりです。

  1. 入力コードが有効かどうかを確認し、短縮形の場合は展開します。
  2. ボディの背景色を入力値に設定しています。
  3. 色が明るいか暗いかを確認し、それに応じてテキストの色を変更しています。
  4. 最後に、変換関数を呼び出し、変換された色をRGB入力に入れています。

使用したもう1つのイベントリスナーはblurです。入力が「フォーカス」を失うたびに、または素人用語で、入力要素の外側をクリック/タップするたびに、ぼかしがトリガーされます。そのため、入力ヘックスを変更することをお勧めします!

そのため、16進数の色が有効かどうかを確認し、短い場合は展開し、最後に存在しない場合は「#」を追加します。インデックス0と1に「#」が含まれているかどうかを確認していることに注意してください。これは、関数が「#」を2回追加しないようにするためです。

ここで、同じキーアップイベントリスナーをrgb入力に追加します。これも、hexイベントリスナーと同じ一連の手順に従います。

最後に、ドキュメント全体にイベントリスナーキーアップを追加します。つまり、2つの入力要素のいずれかに対してトリガーされます。その中で、errorMark関数を呼び出しています。これは、エラーが発生した場合にエラーアイコンを追加するか、すべてが有効な場合に削除します。

app.jsの最終的なコードは次のとおりです。

結論

そこにある!コードが完璧ではなく、リファクタリングできることは知っていますが、これはほんの始まりに過ぎません。このコードを改善したい場合は、githubリポジトリでPRを開いてください。

ハッピーコーディング!