質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

11回答

4914閲覧

変数にする目的はなんでしょうか?

tomoyuki123

総合スコア273

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

3クリップ

投稿2017/08/31 07:16

何の言語でもいいんですが、(1)みたいな場合は不要な変数なので(2)のようにしてくださいっていつも言ってます。

ただこれが納得できない人がいて、明示的に名前をつけた方が可読性が高くなるって言ってます。
確かに明示的に名前をつけないと読みづらい場合はあると思って色々調べたり考えたりしていたら変数にする目的がわからなくなってしまいました。

(1)

javascript

1var string = "string"; 2setString(string);

(2)

javascript

1setString("string");

変数にする目的ってなんでしょうか?

jean925👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答11

0

ベストアンサー

複数箇所に同じ文字列を書くような場合、全部リテラルで書いたら全部修正しないといけないのに対して、変数に入れておけばそれが1箇所で済みます。

なお、Uglifierなどを使うと、本当に1箇所しか使われていない場合、(1)も(2)のように書き換えて圧縮しますので、効率面のことは考えなくて構いません。

投稿2017/08/31 07:19

maisumakun

総合スコア145183

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

momon-ga

2017/08/31 09:23

(1)の問題は、可読性がまったくあがっていないというところなのですよ。 ダサい変数名を見ると、気持ちがなえてコーディングの効率が(ry
tomoyuki123

2017/09/07 01:45

皆様ありがとうございました。 正直まだ自分の中で消化しきれてないのですが勉強になりました。
guest

0

文字列ならまだあとから見ても理解できそうですが、これが数値ならばどうでしょうか。

プログラム中に出てくるベタ打ちのデータは、俗にマジックナンバーと呼ばれ、あとから読む人(自分含む)に混乱を招く諸悪の根源となります。

面倒臭がらずに、データひとつひとつに名前をつけてあげましょう。

投稿2017/08/31 07:27

tukuroku

総合スコア234

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

2回以上参照される時に参照をキャッシュする

JavaScript

1/** 2 * bad 3 */ 4document.getElementById('sample').value = 1; 5document.getElementById('sample').classList.add('foo'); 6 7/** 8 * good 9 */ 10var element = document.getElementById('sample'); 11element.value = 1; 12element.classList.add('foo');

スコープチェーンを辿る回数を少なくする

スコープが深ければ深いほど、スコープチェーンによる参照負荷が高くなります。

JavaScript

1/** 2 * bad 3 */ 4(function () { 5 (function () { 6 (function () { 7 var element = document.getElementById('sample'); 8 }()); 9 }()); 10}()); 11 12/** 13 * good 14 */ 15(function () { 16 (function () { 17 (function () { 18 var element = document.getElementById('sample'); 19 }(document)); 20 }(document)); 21}(document));

テスト結果をキャッシュする

JavaScript

1/** 2 * bad 3 */ 4function addEvent (type, element, listener, useCapture) { 5 if (typeof element.addEventListener === 'function') { 6 return element.addEventListener(type, listener, useCapture); 7 } 8 9 if (typeof element.attachEvent === 'object' || typeof element.attachEvent === 'function') { 10 return element.attachEvent('on' + type, listener); 11 } 12} 13 14/** 15 * good 16 */ 17var addEvent = (function () { 18 if (typeof addEventListener === 'function') { 19 return function addEvent (element, type, listener, useCapture) { 20 return element.addEventListener(type, listener, useCapture); 21 }; 22 } 23 24 if (typeof attachEvent === 'object' || typeof attachEvent === 'function') { 25 return function addEvent (element, type, handler) { 26 return element.attachEvent('on' + type, handler); 27 }; 28 } 29}()); 30 31/** 32 * very good! 33 */ 34var addEvent = (function () { 35 if (typeof addEventListener === 'function') { 36 return Function.prototype.call.bind(addEventListener); 37 } 38 39 if (typeof attachEvent === 'object' || typeof attachEvent === 'function') { 40 return Function.prototype.call.bind(attachEvent); 41 } 42}());

変数に分かりやすい名前をつける

「変数に分かりやすい名前をつけよう」と良くいわれますが、分かりやすくする為に変数に格納するのは本末転倒だと私は思います。

JavaScript

1var string = "string"; 2setString(string);

変数 string には String 型の値が入っている事が変数名「string」から分かります。
しかしながら、"string" でも String 型である事が明らかなので、変数名を付ける意味がありません。

setString() に指定する第一引数の中身を明らかにする為に変数名を付けているとしたら、それは setString() の仕様を理解していないことに原因があります。

「分からないものに名前を付ける」
それは一つの工夫ですが、分かっている人からすれば煩わしく感じるものです。

HTML

1<table id="sample"> 2 <tbody> 3 <tr><td><input type="text" value="Hello,World!"></td></tr> 4 </tbody> 5</table> 6<script> 7'use strict'; 8console.log(document.getElementById('sample').tBodies[0].rows[0].cells[0].firstChild.value); // "Hello,World!" 9</script>

このコードを「分かりやすくする為に」変数に格納してみましょう。

JavaScript

1var table = document.getElementById('sample'), 2 tbody = table.tBodies[0], 3 tr = table.rows[0], 4 td = tr.cells[0], 5 input = td.firstChild, 6 value = input.value; 7 8console.log(value); // "Hello,World!"

このコードが分かりやすいと感じる人は getElementById, tBodies, rows の意味を理解していない人です。
意味が理解できなくても、tbody, tr 等の変数名からそれが何を表しているのかを「何となく」理解できるので、読みやすく感じます。

逆にコードの意味を理解できる人には読みにくく感じます。
変数宣言を6回もしており、代入からオブジェクトの中身を追っていくので、前述の1行のコードよりもコードの意味を読み解くのに時間がかかります。

行き過ぎた変数宣言は、可読性を損なうこともあります。
無駄に変数宣言をしてしまう人がいるのなら、関数やプロパティが持つ意味を読み解いて教える事も必要なのかもしれません。

Re: tomoyuki123 さん

投稿2017/08/31 12:40

think49

総合スコア18162

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

そもそも文字列にせよなんにせよ、値そのままのリテラルを書くのはお勧めしない、というのはあります。
その値がどういう意味を持っているのかという情報がないわけですから。

また、多言語対応を行うとなると、文字列リテラルを書くのは事実上封印されます(多言語リソースのIDを指定することになるため)。

投稿2017/08/31 07:57

tacsheaven

総合スコア13703

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2017/08/31 12:59

> そもそも文字列にせよなんにせよ、値そのままのリテラルを書くのはお勧めしない 関数が期待する引数の性質に依存する問題のように思います。 例えば、addEventListener の第一引数に文字列リテラルを指定する事には違和感がありません。
guest

0

目的1
同じ値をあちこちで使う場合、変数にしておいた方が便利です。
但し、変更されることのない値で、言語的に可能ならconst定義にするべき。

目的2
その値の使用目的が明確になる。
例えばファイルオープン処理で、昨日と本日のファイルがあるとする。

fileopen("file20170830.dat")
fileopen("file20170831.dat")

とするよりは、

yesterday_file = "file20170830.dat"
today_file = "file20170831.dat"
fileopen(yesterday_file)
fileopen(today_file)

と書いた方が処理内容が明確になります。

例外
但し、全ての処理で必要かというそうではないと思います。
例えば上記のファイルオープン処理で言えば、紛らわしくないファイルを対象とするなら直に書いてもいいかと。
fileopen("log.dat")
fileopen("message.dat")
プロジェクトの規模にもよりますが…。
大きなプロジェクトならやはり一か所で管理したいので、どこかでconstで定義したいですね。

投稿2017/08/31 07:54

ttyp03

総合スコア16998

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

momon-ga

2017/08/31 09:03

目的2の場合、ファイルハンドラに名前をつけるので、ファイル名はリテラルにしちゃうかなぁ
guest

0

ここまで様々な意見を拝見していると、問題のポイントは、質問者の提示された情報だけで断定する規則ではなく、もう少しバックグラウンドを明確にし、それに合わせた説明や規則として定義する必要があるということではないでしょうか。

例がいけていないので、そもそもの言いたいことが伝わらないのでは例示する内容の考慮が必要ですし、質問された時に適切に回答できないし、この場合はこうで、この場合は、、、という回答では説明された側がすっきりと理解できず、規則としても条件が明確でないと実相寺に迷ってしまうことが容易に想像されます。

一番大きな影響を与える要因は、メンテナンスコストをどのように考慮するかだと私は思いますが、これはどのようなプログラミング言語で、どのようなツールを利用するかに大きな影響を受けるものです(例えばリファクタリングが容易なのか否かなどもその一つです)。これらを排して一般的なことを伝えようとするのか否かでもその考え方が異なるかと思います。

だらだらと書いてしまいましたが、当初の質問「変数にする目的ってなんでしょうか?」ですが、メンテナンスコストを削減するための一つの方策となるのですが、そのサンプルからメンテナンスコストが削減されるように見えないところが一番問題になっているのではというのがこの回答の趣旨となります。
逆に、この場合に変数を導入するか否か疑問をわざと提示させ、その次に想定される問題を提示して話を広げるきっかけにするという目的があるのであれば、わざと問題があるサンプルを提示することもテクニックとしてはもちろんあると思いますが。

(補足)そもそもスマートに機能を実現するためには変数自体必要不可欠な役割も持っているため、それは理解した上での話です。

投稿2017/09/01 03:46

t_obara

総合スコア5488

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

同じリテラルを複数箇所で使う場合、あるいは、将来的に複数箇所になる可能性の大きい場合は自明なので、「まず間違いなく一度しか使わないリテラルを変数にする意味はあるか?」という問題だと思います。

変数にするデメリットとしては、
・値が変更されるかもと思いながらプログラムを読まないといけない(これは定数定義のある言語の場合、変数でなく定数にすることで回避できます)
・他の箇所で使うかもしれないので変数名と値のペアを頭に入れながらプログラムを読まないといけない。こういうのがたくさんあると大変(これは軽微でしょう。IDEを使う場合そもそも覚えないかも)

変数にするメリットは、
・意味のある名前を付けることが可能

と、長短あるのですが、十分に意味のある名前を付けることで、デメリットは軽減されるあるいは解消されるため、十分に意味のある名前を付ける前提で、変数ないし定数にする方が良いと思います。
ただ、
・同じようだが少し違うリテラルに混同されない違いの分かる十分に説明的な名前を付けるのが難しい
という問題もあります。

#常日頃考えていることじゃなくていま考えて書いたので、穴があったらごめんなさい

投稿2017/08/31 12:00

otn

総合スコア84505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

1回しか参照しない変数を変数として宣言するかしないか
ということですよね。

(1)がいいと言う人 (2)がいいと言う人がいて対立してると。

私は
(3) どっちでもいいから好きに書いたらいいじゃん
です。

(1)も(2)も主張したい気持ちは分かります。
自分の中の絶対的なルールがあって、プログラミングはこうあるべきだっていう意識高い人になっちゃってるんです。
若い人に多いかな。

プロジェクトを回す側になると
「どっちでもいいから、そんな暇あったらどんどん仕事こなしてくれよ、テスト回してくれよ」 って思う。

全体を回して、それでも暇があったらどちらが優れてるか話し合うのもいいかもね。
飲み屋でバトったらええねん。
でも好みの問題だから、答えなんてないよ。

投稿2017/08/31 08:41

Tak1016

総合スコア1408

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ただこれが納得できない人がいて、

ということは、組織で仕事をしているのだと思いますが、そうであれば組織内で話し合ってルールを決めて、それに従うということになるのではないですか。

個人で仕事をしていて、保守にも他人が関与することがないということであれば、質問者さんの個人的な好みで決めればいいのでは?

今回の例の (1) と (2) でどっちらが良いか他人の意見を聞きたいということであれば、自分は、変数 string をどこか別の場所で使うのでなければ (2) にすると思います。

でも、(1) と (2) の例はあまりに単純で、この例なら大多数の人は (2) で十分と思うかもしれませんが、例えば、

var dateTime = new Date(2017, 1, 1, 12, 15, 45); var dateObject = { DateTime: dateTime }; var dateJson = JSON.stringify(dateObject);

var dateJson = JSON.stringify( { DateTime: new Date(2017, 1, 1, 12, 15, 45) } );

でどちらが読みやすいかと言うと、いろいろ意見が分かれるところではないかと思います。

投稿2017/08/31 07:36

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

momon-ga

2017/08/31 12:42 編集

例にクオリティーを求めてはいけないと思いますが、 この例だと、前者のほうの命名がいけてないので、前者でコーディングされるくらいなら、 私の場合、後者でやってくれとなります。< 変数スコープも無駄に広がるし あと、「変数 string をどこか別の場所で使うのでなければ (2) にすると思います」 この考えがとても大事で、 逆説的にいうと、ここでしか使わないからリテラルにする。っていうのもあります。
guest

0

単純に変数名を正しく命名すれば可読性は上がると思います。
たとえば今回
var string = "string"
setString(string);

という記述のプログラムでしたが、

var userName = "takko"
setString(userName)

とするのであれば、userNameを受け取ってsetする処理なんだなと見ただけでわかります。

②で試すとつまり
serString("takko")という記述になりますが、
takko=UserNameであるという根拠がここではありませんから、
何をsetしているのか不明確だと思います。

一回変数に格納することでその代入した値が何のデータであるかがわかるようになるが変数のメリットだと思います。

ただ、投稿者さんの言うように、
変数に意味のない var stringという値を持たせるのであれば、
これは②のほうが良いと思います。

投稿2017/09/07 00:12

King_of_Flies

総合スコア382

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

(1) と (2) とでどちらがよいか、というのは、そのコードが時間的、空間的にどれくらい広がりをもつのか、によって変わってくると思います。つまり、使い捨てのコードで自分しか使わないものなのか、オープンソースとして公開して不特定多数の人が読んだりいじったりするものなのか、複数の組織・人がひきついで長いこと使っていくことが想定されるものなのか、などです。

私の場合、他人が読む可能性があるものは、たいてい (1) のように一時変数 (定数) に入れます。1 ヶ月後の私自身も「他人」だと考えているので、まあ、ほとんどのコードは (1) のように書きます。

定数をちょっと書き替える、とかも (1) のほうが書き換えるべき場所を特定しやすいです。ひとまとまりの定数があるとしたら、一箇所にまとめて書いたほうがわかりやすいですよね。
あと、将来的に定数の値を外部 (設定ファイルやデータベースなど) から取得するように変更するのも楽かな、とか。

(1) のデメリットはあまり思いつきません。効率面は maisumakun さんがおっしゃているように、速度がシビアな場合はどんな言語だとしても最適化したコードが実行されますが、そのときにはどちらも同じコードに落し込まれますし。

投稿2017/08/31 08:53

unau

総合スコア2468

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問