ウェブサイト作成用備忘録・１１号：「とりあえず動けばヨシ！」からの卒業…コード短縮編【コピペでプレビュー】

自主学習としてＷｅｂページを作成する中で、最初は「とりあえず狙い通りの挙動で動いているからヨシ！」という精神でコーディングに励んできましたが、そろそろ少しでもキレイでまとまったコードを書きたいと思うようになってきた今日この頃ですが…

今回は自分なりにコードの短縮化を行ったサンプルを紹介していきます。

（ ↓ コピペでプレビューが可能です。）

```
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>

* {
margin: 0;
}

.svg_campus_position {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.svg_outer_campus {
padding: 100% 0 0 0;
height: 0;
position: relative;
}

.svg_inner_campus {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}

#sample {
fill: black;
}

use {
opacity: 1;
transition: all 1s ease 0s;
}

.off {
opacity: 0;
}

#click {
    cursor: pointer;
}

#click.lock {
    cursor: none;
    pointer-events: none;
}

</style>
</head>
<body>
<div class="svg_campus_position" style="width: 100%;">
<div class="svg_outer_campus">
<!-- 発火エリア -->
<div class="svg_inner_campus" id="click" style="z-index: 2;"></div>
<!-- 発火エリア -->
<svg class="svg_inner_campus" width="500" height="500" viewBox="0 0 500 500">
<!-- サンプルピース -->
<defs>
<rect id="sample" x="0" y="0" width="99" height="99">
</defs>
<!-- サンプルピース -->
<!-- 1段目 -->
<use id="used1" x="0" y="0" xlink:href="#sample"></use>
<use id="used2" x="100" y="0" xlink:href="#sample"></use>
<use id="used3" x="200" y="0" xlink:href="#sample"></use>
<use id="used4" x="300" y="0" xlink:href="#sample"></use>
<use id="used5" x="400" y="0" xlink:href="#sample"></use>
<!-- 1段目 -->
<!-- 2段目 -->
<use id="used6" x="0" y="100" xlink:href="#sample"></use>
<use id="used7" x="100" y="100" xlink:href="#sample"></use>
<use id="used8" x="200" y="100" xlink:href="#sample"></use>
<use id="used9" x="300" y="100" xlink:href="#sample"></use>
<use id="used10" x="400" y="100" xlink:href="#sample"></use>
<!-- 2段目 -->
<!-- 3段目 -->
<use id="used11" x="0" y="200" xlink:href="#sample"></use>
<use id="used12" x="100" y="200" xlink:href="#sample"></use>
<use id="used13" x="200" y="200" xlink:href="#sample"></use>
<use id="used14" x="300" y="200" xlink:href="#sample"></use>
<use id="used15" x="400" y="200" xlink:href="#sample"></use>
<!-- 3段目 -->
<!-- 4段目 -->
<use id="used16" x="0" y="300" xlink:href="#sample"></use>
<use id="used17" x="100" y="300" xlink:href="#sample"></use>
<use id="used18" x="200" y="300" xlink:href="#sample"></use>
<use id="used19" x="300" y="300" xlink:href="#sample"></use>
<use id="used20" x="400" y="300" xlink:href="#sample"></use>
<!-- 4段目 -->
<!-- 5段目 -->
<use id="used21" x="0" y="400" xlink:href="#sample"></use>
<use id="used22" x="100" y="400" xlink:href="#sample"></use>
<use id="used23" x="200" y="400" xlink:href="#sample"></use>
<use id="used24" x="300" y="400" xlink:href="#sample"></use>
<use id="used25" x="400" y="400" xlink:href="#sample"></use>
<!-- 5段目 -->
</svg>
</div>
</div>
</body>
<script type="text/javascript">

jQuery(document).ready(function(){

$("#click").click(function(){
$("#click").addClass("lock");

setTimeout(function(){    
$("#used1").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used2").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used3").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used4").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used5").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used6").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used7").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used8").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used9").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used10").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used11").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used12").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used13").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used14").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used15").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used16").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used17").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used18").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used19").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used20").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used21").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used22").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used23").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used24").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used25").toggleClass("off");
},Math.round(Math.random()*500));

setTimeout(function(){ 
$("#click").removeClass("lock");
},600); 

});

});

</script>
</html>
```

上記のページは画面全体に２５個の四角形を表示し、画面中のどこでもクリックすることで、それぞれの四角形が０．５秒の範囲でランダムにオンオフするという内容です。

それぞれの四角形を同時にオンオフする場合は

```
$("#used1,#used2,#used3,#used4,#used5,...").toggleClass("off");
```
この書き方でも良いのですが…（この書き方がそもそもダメな可能性については目を瞑ってください）

今回はそれぞれの要素をランダムにオンオフさせたいので、それぞれの要素にsetTimeoutを使用した結果…

```
setTimeout(function(){    
$("#used1").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used2").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used3").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used4").toggleClass("off");
},Math.round(Math.random()*500));
setTimeout(function(){    
$("#used5").toggleClass("off");
},Math.round(Math.random()*500));

以下略…
```

上記の様に仕上がりました。
これでも一応動くので、最初はきちんと動いた時の喜びが大きく気にならなかったのですが…

いつまでもこのままだと流石に良くないと思い始めたので、今回はこの部分を自分なりにキレイにしてみました。

見てすぐにわかる問題点としては、似たような内容のコードを大量に繰り返して記述している部分ですが、
この部分をfor関数に置き替える事で…

```
let used = 1;
for (let i = 0; i <= 24; i++){    
let used_n = String(used);
let used_i = "used" + used_n;
setTimeout(function(){    
$("#" + used_i).toggleClass("off");
},Math.round(Math.random()*500));
used++;
}
```
こんなに短くなっちゃうんですね！
（ちなみに、上記の乱数を取得する部分を変更する事で左上から順番に操作するような仕様への変更が必要になった場合でも簡単に修正出来ると思います。）

同一の繰り返し処理ならfor関数を利用する事で大幅な短縮が可能だという事を身をもって体感した学習でした。

修正版プレビュー

```
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>

* {
margin: 0;
}

.svg_campus_position {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.svg_outer_campus {
padding: 100% 0 0 0;
height: 0;
position: relative;
}

.svg_inner_campus {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}

#sample {
fill: black;
}

use {
opacity: 1;
transition: all 1s ease 0s;
}

.off {
opacity: 0;
}

#click {
    cursor: pointer;
}

#click.lock {
    cursor: none;
    pointer-events: none;
}

</style>
</head>
<body>
<div class="svg_campus_position" style="width: 100%;">
<div class="svg_outer_campus">
<!-- 発火エリア -->
<div class="svg_inner_campus" id="click" style="z-index: 2;"></div>
<!-- 発火エリア -->
<svg class="svg_inner_campus" width="500" height="500" viewBox="0 0 500 500">
<!-- サンプルピース -->
<defs>
<rect id="sample" x="0" y="0" width="99" height="99">
</defs>
<!-- サンプルピース -->
<!-- 1段目 -->
<use id="used1" x="0" y="0" xlink:href="#sample"></use>
<use id="used2" x="100" y="0" xlink:href="#sample"></use>
<use id="used3" x="200" y="0" xlink:href="#sample"></use>
<use id="used4" x="300" y="0" xlink:href="#sample"></use>
<use id="used5" x="400" y="0" xlink:href="#sample"></use>
<!-- 1段目 -->
<!-- 2段目 -->
<use id="used6" x="0" y="100" xlink:href="#sample"></use>
<use id="used7" x="100" y="100" xlink:href="#sample"></use>
<use id="used8" x="200" y="100" xlink:href="#sample"></use>
<use id="used9" x="300" y="100" xlink:href="#sample"></use>
<use id="used10" x="400" y="100" xlink:href="#sample"></use>
<!-- 2段目 -->
<!-- 3段目 -->
<use id="used11" x="0" y="200" xlink:href="#sample"></use>
<use id="used12" x="100" y="200" xlink:href="#sample"></use>
<use id="used13" x="200" y="200" xlink:href="#sample"></use>
<use id="used14" x="300" y="200" xlink:href="#sample"></use>
<use id="used15" x="400" y="200" xlink:href="#sample"></use>
<!-- 3段目 -->
<!-- 4段目 -->
<use id="used16" x="0" y="300" xlink:href="#sample"></use>
<use id="used17" x="100" y="300" xlink:href="#sample"></use>
<use id="used18" x="200" y="300" xlink:href="#sample"></use>
<use id="used19" x="300" y="300" xlink:href="#sample"></use>
<use id="used20" x="400" y="300" xlink:href="#sample"></use>
<!-- 4段目 -->
<!-- 5段目 -->
<use id="used21" x="0" y="400" xlink:href="#sample"></use>
<use id="used22" x="100" y="400" xlink:href="#sample"></use>
<use id="used23" x="200" y="400" xlink:href="#sample"></use>
<use id="used24" x="300" y="400" xlink:href="#sample"></use>
<use id="used25" x="400" y="400" xlink:href="#sample"></use>
<!-- 5段目 -->
</svg>
</div>
</div>
</body>
<script type="text/javascript">

jQuery(document).ready(function(){

$("#click").click(function(){
$("#click").addClass("lock");

let used = 1;
for (let i = 0; i <= 24; i++){    
let used_n = String(used);
let used_i = "used" + used_n;
setTimeout(function(){    
$("#" + used_i).toggleClass("off");
},Math.round(Math.random()*500));
used++;
}

setTimeout(function(){ 
$("#click").removeClass("lock");
},600); 

});

});

</script>
</html>
```