Javascriptでいちいち変数に入れる

ボタンを押すと画像が表示非表示で切り替えれれるプログラムについて質問です。

以下のコードなのですが、

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="utf-8">
6  <title>JavaScript</title>
7  <style>
8    .hide{ display:none;} 
9　　.show{ display:block; }
10  </style>
11</head>
12<body>
13  <p>ボタンを押すと画像が表示/非表示されるプログラム</p>
14  <p><button id='button'>クリック</button></p>
15  <img src='画像のパス' alt='' id='img' class='hide'>
16  <script>
17    var button = document.getElementById('button'); 
18    var img = document.getElementById('img');
19
20    function toggle(){
21      img.classList.toggle("hide");
22    }
23    button.onclick = function(){ 
24      toggle();
25    };
26  </script>
27</body>
28</html>

この中の
var button = document.getElementById('button');
var img = document.getElementById('img');

ってなくても動くと思うんですが、これをいちいち要素を取得して変数に入れてる理由が何かあるのであれば教えていただけますか？

行動規範の内容に同意します

回答4件

ベストアンサー

主に次の二つの効果が得られます.

コードの可読性の向上
DOMツリーの検索コストの削減

何れも一度しかその検索結果を使わないのであれば不要な作業ですが, 後者はイベント処理を定義する際に発生しうるDOM検索に関わるコストを省けるためよく使うテクニックです.

NOTE:
プログラムには

論理的な正しさ
実用上のメリット

の二つの観点が必要です. あなたの質問は「論理的な正しさ」の観点からの質問であり, この観点のみで答えるなら「YES」です. しかし, 「実用上のメリット」を考えると, 変数を使うことに様々な合理性があるため答えは「YES」にも「NO」にもなり得るのです.

投稿2018/04/10 01:32

編集2018/04/10 01:41

defghi1977

総合スコア4756

on_off_on

2018/04/10 02:02

非常にわかりやすい説明ありがとうございます。もちろん可読性や検索コストについても意識はいっていたのですが、二つの観点の説明はとてもしっくりきました。

行動規範の内容に同意します

どうオブジェクトへの参照・変更をするとき
毎回getElementByIdすると冗長ですので
変数で受けたほうが再利用性が高くなります。

また、変数名の命名方法をある程度工夫すれば
そのソースが具体的になにをどのように処理しているか
視認性がたかくなります。

ただし、今回のソースに関しては必ずしも変数に受ける必要はないかもしれません

投稿2018/04/10 01:31

yambejp

総合スコア114769

このコードなら特に意味はないです。もしかしたら効率悪いかもしれません。
ただ、同じエレメントを何度も参照するのであれば、document.getElementById()で探してくるコストがかかるので、直接記述するよりも変数に入れておいた方が効率がよくなるかもしれません。

投稿2018/04/10 01:30

Lhankor_Mhy

総合スコア36074

動けばそれでいいというわけではありません。
複数箇所で同エレメントを扱う場合にその都度書いていては可読性も生産性も良くないです。
また、いずれにしても関数を実行していることになるので相応のコストがかかります（メモリの無駄使いと表現しても良いでしょうか）
今回の例に限らず変数の存在意義はおおよそそのためにあります。

変数で受けておけば、その後何回も使うことになった場合に柔軟に対応できるわけです。
もちろん本当に1回しか使わないのであればそれでも良いかもしれませんが、
テスト・検証プログラムのようなミニマム構成で行うことがあるくらいで、基本は変数で受けておき、その後の拡張を意識した作りにしておくべきと思いますよ。

投稿2018/04/10 01:34