完全に自分用の備忘録。
インターンが始まって最初は軽い課題をこなしている最中なんだけど、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を変えたい!」となったときにぱっと見で座標の部分がわかるし、新しいオブジェクトの追加や削除も簡単にできるんじゃないだろうか。これでプルリクや。