(dev)juginon-blog

勉強したこと、趣味のこと。

【JavaScript】冗長なタグ記述を綺麗に書く

完全に自分用の備忘録。

 

インターンが始まって最初は軽い課題をこなしている最中なんだけど、JavaScript力なさすぎて萎えてる。しかもSlack見る限り自分が一番進み遅くて萎える。

 

やりたいこと

ボタンを押されたとき、JavaScript内でHTMLのコードを書きたい。

改善前のやりかた


    function buttonPressed(){
      target = document.getElementById("embedded");
      target.innerHTML ='~position="0 1 -8" radius="2" color="#EF2D5E" shadow="">~ rotation="0 45 0" position="-1 -0.5 -4.5" color="#4CC3D9" shadow="">~ color="#FFC65D" radius=".5" height="3" position="1.25 0.5 -4.5" shadow="">~ color="#099" width="5" height="5" rotation="-90 0 0" position="0 -1 -6" shadow="">';
	  }
	

バカ長い。(これはタグのとこ消してるからもっと長い)

開発するとき、基本的にコードは「いつでも簡単に変えられること」が求められる。「どこどこのpositionを直したい!」と思ったときに、innerHTMLにしていると代入しているところ全部をみなきゃいけない。これは可読性を落としバグを生む原因になる。悔い改めて。

 

改善後のやり方

 


    function buttonPressed(){
  //info = a-sceneの要素ノードオブジェクト
  const info = document.getElementById('embedded');
  //新しくa-sphereタグの要素ノードを作成
  const sphere = document.createElement('a-sphere');
  //新しくa-boxタグの要素ノードを作成
  const box = document.createElement('a-box');
  //setAttributeでsphereに新しい属性を追加する
  //positionは座標,radiusは径,colorは色
  sphere.setAttribute("position","0 0 -8");
  sphere.setAttribute("radius","2");
  sphere.setAttribute("color","#2da7df");
  //最後に完成したa-sphereタグをa-sceneのなかに入れる
   box.setAttribute("position","-2 -1 -5");
  box.setAttribute("color","coral");
  info.appendChild(sphere);
  info.appendChild(box);
}

だいぶ見やすくなった。

  • document.createElementとは

砕いて言うとHTMLのタグの部分の代わり。上記のコードではまずa-sphereタグを作って、setAttributeでタグの属性を追加する(position,radius,color)そんで最後にidから呼び出してきてたオブジェクトにappendChildしてやればさっきのクソ汚いコードと同じ動作が実現可能となる。

これなら「sphereのpositionを変えたい!」となったときにぱっと見で座標の部分がわかるし、新しいオブジェクトの追加や削除も簡単にできるんじゃないだろうか。これでプルリクや。