JavaScript で RGB カラーを配列に変換する

はじめに

この実験では、JavaScriptを使ってrgb()カラー文字列を数値の配列に変換する方法を探ります。この実験では、文字列をから色の値を抽出して配列に変換するために必要な手順を案内します。このスキルは、特にグラフィックスとデザインの作業を行う際のWeb開発に役立ちます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28657{{"RGB を配列に変換する"}} javascript/data_types -.-> lab-28657{{"RGB を配列に変換する"}} javascript/arith_ops -.-> lab-28657{{"RGB を配列に変換する"}} javascript/comp_ops -.-> lab-28657{{"RGB を配列に変換する"}} javascript/higher_funcs -.-> lab-28657{{"RGB を配列に変換する"}} end

RGB 文字列を配列に変換する

rgb() カラー文字列を値の配列に変換するには、次の手順に従います。

ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。
String.prototype.match() を使用して、数値を含む 3 つの文字列を配列で取得します。
Array.prototype.map() を Number と組み合わせて使用して、それらを数値の配列に変換します。

次のコードを使用できます。

const toRGBArray = (rgbStr) => rgbStr.match(/\d+/g).map(Number);

関数をテストするには、引数として rgb() カラー文字列を指定して関数を呼び出します。例えば、次のようにします。

toRGBArray("rgb(255, 12, 0)"); // [255, 12, 0]

まとめ

おめでとうございます！RGB を配列に変換する実験を完了しました。技術力を向上させるために、LabEx でさらに実験を行って練習してください。