ここから本文です

JavaScriptの書き方、変数とか。 ジャバスクリプトを先日から勉強し始めました...

アバター

ID非公開さん

2017/2/712:02:45

JavaScriptの書き方、変数とか。

ジャバスクリプトを先日から勉強し始めました。
そこでちょっとつまづきまして。

例えば、
var hoge = document.getElementById("test");
hoge.innerHTML = "test要素を変更したよ";
とかって場合に、
document.getElementById("test").innerHTML = "test要素を変更したよ";
って書いても結果は同じ?ですよね?

なんか、一度hogeに代入すると、ややこしく感じます。
これって、主に、ジャバスクリプトに慣れてないからですか?
なれると分割した方が見易いんでしょうか?

閲覧数:
47
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

sii********さん

2017/2/713:47:10

> document.getElementById("test").innerHTML = "test要素を変更したよ";
って書いても結果は同じ?ですよね?

仰るとおり、同じです。

一時的に取得した要素を変数に入れる意味はいくつかありまして、例えば同じ要素に対して複数の処理を行う場合、

document.getElementById("test").innerHTML = "test要素を変更したよ";
document.getElementById("test").style.top = "200px";
document.getElementById("test").style.left = "150px";
document.getElementById("test").style.right = "80px";
document.getElementById("test").style.bottom = "100px";
document.getElementById("test").style.backgroundColor = "#fcc";

このように並べて書くのは効率が良くありません。

この場合の効率というのは、単純に見やすい見づらいということもそうですが、加えて、これだとgetElementByIdという関数を何回も実行することになるので、

var test = document.getElementById("test");
test.style.top = "200px";
test.style.left = "150px";
test.style.right = "80px";
test.style.bottom = "100px";
test.style.backgroundColor = "#fcc";

関数の実行は一度だけにして、その結果を使い回したほうが速度の面でもメリットがあります。何回も使うものは変数に入れておくのが良いでしょう。

------------

それから、getElementByIdの場合は要素を1つだけ返すものなのでいいのですが、メソッドには複数の要素をまとめて返すものがあります。

例えば、getElementsByClassNameメソッドは、指定したclassを持つ要素をすべてまとめて返すメソッドです。

var hoge = document.getElementsByClassName("hoge");
for(var i = 0; i < hoge.length; i++) { //←繰り返し回数で利用
hoge[i].innerHTML = i + "番目の.hoge"; //←実際の処理で利用
}

ループの条件と実際の処理とでメソッドの結果を使いますので、これは変数に入れておかないと非常に効率が悪いです。

------------

一方で、変数を作る場合、名付け方や使い方によって、かえって混乱を招くこともあります。

変数名はほとんど自由ですし、JavaScriptは型付けが緩く、中に入れるものにも制限が無いので、思わぬものが入っていたりもします。

闇雲に使い過ぎると、後で読み返したとき書き手でさえ何の変数だったかわからなくなることもしばしばです。

なので、開発の規模が大きくなるほど、変数の使い方や変数に関するコメントの入れ方(JSDocなど)などなどにも注意が必要となります。

Google JavaScript スタイルガイド - 日本語訳 - トップページ
https://www38.atwiki.jp/aias-jsstyleguide2/pages/1.html

お作法的なものではGoogleのものが非常に有名ですので、一度目を通してみてください。

  • アバター

    質問者

    ID非公開さん

    2017/2/714:42:15

    ありがとうございます!
    今使ってるテキストには、
    変数に入れるのが当たり前ですから、
    そういう風に分けて書いてます、
    みたいなノリで、
    特に説明がなかったので、
    ちょっとモヤモヤしてました。

    再生速度?を配慮しての事だったんですね!

  • その他の返信(1件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この回答は投票によってベストアンサーに選ばれました!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる