どうも！LSSです！！
この記事は、JavaScript初学者向けの記事となります。
先日の記事、
は、CSSを用いた枠線（囲み枠）のコードを生成するツールでした。
そのツール自体のコードはJavaScriptで書いていましたが、今回はそのコードの公開です。
ついでに、その中で冗長的（無駄）と思われた部分があったのが気になっていたのですが、簡略化に成功したので覚え書き。
なお、スクリプト自体は
で解説した方法と同じ作り方で作成しています。
しましま枠線メーカー コード
<p>サンプル</p>
<div id="gamen"></div>
<p> </p>
<p><input id="col1" type="color" value="#000000" /> <input id="col2" type="color" value="#75ff7a" /></p>
<p>角度:<input id="rg1" style="width: calc(100% - 50px);" max="180" min="0" type="range" value="135" /></p>
<p>太さ:<input id="rg2" style="width: calc(100% - 50px);" max="50" min="1" type="range" value="10" /></p>
<p>シマ:<input id="rg3" style="width: calc(100% - 50px);" max="10" min="1" type="range" value="2" /></p>
<p> </p>
<p>コード</p>
<div id="cdtxt" style="background-color: #eeeeee; padding: 0.6em; border-radius: 5px;"></div>
<p>
<script>
col1.addEventListener('input',chgpp,false);
col2.addEventListener('input',chgpp,false);
rg1.addEventListener('input',chgpp,false);
rg2.addEventListener('input',chgpp,false);
rg3.addEventListener('input',chgpp,false);
chgpp();
function chgpp(e){
txt='<div style="border: '+rg2.value+'px solid; border-image: repeating-linear-gradient('+rg1.value+'deg,'+col1.value+','+col2.value+','+col1.value+' '+rg3.value+'%) '+rg2.value+'; padding: 5px;">こんな感じのシマシマ模様の枠になります。<br/>お気に入りの色・角度を見つけてください^^</div>';
gamen.innerHTML=txt;
cdtxt.innerHTML=txt.replace(/</g,'<').replace(/>/g,'>');
}
</script>
</p>
冗長と思った部分
コード
col1.addEventListener('input',chgpp,false);
col2.addEventListener('input',chgpp,false);
rg1.addEventListener('input',chgpp,false);
rg2.addEventListener('input',chgpp,false);
rg3.addEventListener('input',chgpp,false);
この箇所ですね。
この５行、５つの入力パーツに対してそれぞれ「変更が加えられたら、chgpp関数を実行する」というイベントリスナーを仕掛けている部分ですが、見て分かる通り
「文頭数文字が違うだけであとは全く同じものを並べている」
んですね^^;
こういうのこそ、配列でなんとかしたいところです。
…別解として、入力パーツをHTMLの方でDIVタグなどでひとまとめにして…という手も考えられますが、ここでは配列にこだわってみます。
さらに、イベントリスナーを一度仕掛けるだけの話なので、なんなら配列を変数に代入する事なく使う事はできないか？とも。
１行で出来ました^^
[col1,col2,rg1,rg2,rg3].forEach(ele=>ele.addEventListener('input',chgpp,false));
↑ 件の５行をこんな形に置き換えても、ちゃんと動作します^^
（eleは任意の変数名、chgppは任意の関数名、「col1,col2,rg1,rg2,rg3」はHTML要素につけた任意のIDです。）
[配列の列挙].処理;
という形で、配列の即時利用が出来るんですね。
この方法でも、IDをそのまま書く事で、HTMLの要素を配列として捕らえる事ができるようです。
HTML要素に対してJavaScriptから操作する場合、自分は
ID名.処理;
のような書き方を好み、それでも動作していますが、世の多くの解説サイトでは
document.getElementByID('ID名').処理;
という書き方で説明されています。
そちらの書き方に合わせた方法で書くと、以下のようになります。
['col1','col2','rg1','rg2','rg3'].forEach(ele=>document.getElementById(ele).addEventListener('input',chgpp,false));
あとがき
繰り返し処理ととっても相性のいい配列ですが、変数に代入しなくても、
[配列の列挙].処理;
で扱えるんですね^^
今回は、
[配列の列挙].forEach(変数=>変数を使った繰り返し行われる処理);
という形で書く事で、１行で複数回繰り返す処理を記述する事ができました^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
