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

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

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

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

Q&A

解決済

4回答

2342閲覧

Javascriptのローカル変数宣言位置

tatsuyan

総合スコア14

JavaScript

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

0グッド

1クリップ

投稿2020/11/19 09:28

表題の件に関して質問があります。

Javascriptは他の言語と違い変数の巻き上げが起こるため、
ES6からはletで変数宣言するようにした方がいいですが、
(letも一応ありますが)

letで宣言していれば、
使用するメソッド近辺で定義するのが管理する上ではいいのでしょうか?

それともvarと変わらず、
関数の先頭で全ての変数宣言を済ませるのがメンテナンスしやすいのでしょうか?
と言うか、混乱しない書き方でしょうか?

一応、jsの変数宣言位置に関してコーディングルールを調べたのですが、
特に見当たらず、変数を先頭で定義するもしくは使用するメソッド直前で定義する、
それぞれのコーディングルールをご教授頂けますとありがたいです。

よろしくお願い致します。

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

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

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

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

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

hentaiman

2020/11/19 14:24

疑問点の全てに対して人それぞれなので正解は無いのですが、他の人がどう書いてるのか知りたいんですか? それなりにビッグネームな人がどう書いてるのか知りたいのなら、有名なjsライブラリとか、react使うならreactのサンプルなどを見て書き方を調査するのが良いと思います それとも何かアドバイスが欲しいですか?もしそうなら自作のコードをを載せてみましょう
tatsuyan

2020/11/20 12:32

>>hentaiman 回答頂きありがとうございます。 なるほど、有名なjsライブラリを使うという発想はありませんでした。 特に具体的なコードがあってのそれに対処する書き方と言うよりかは、 他の会社の方はどのように書いているのかを参考にしたいと思い、質問させて頂きました。
hentaiman

2020/11/20 12:36

いや、使うのではなくソースを読むんです まずはそれを参考にしてコーディングルール決めるのも良いでしょう 慣れてきたら時代に合わせ自分たちの技術力に合わせてルールを変えればいいんです ただし有する技術よりも少し上のレベル(ちょっと難しいかも?というレベル)でルール決めましょう
tatsuyan

2020/11/20 12:40

>>hentaiman すみません、使う = 利用する = 読むと言う日本語のあやとして書きました汗 そうですね、あまりライブラリの中のルールを意識したことがなかったので、 時間があるときに見たりして自分のコーディングルールをもっと堅牢なものにしてみたいと思います。
guest

回答4

0

ベストアンサー

ローカル変数の宣言はブロックの最初にすべきか、必要になるところですべきかという話は古の昔からあったりします。

C99(1999年にリリースされたCの仕様)より前の古いC言語ではローカル変数の宣言はブロックの一番最初にまとめて行う必要がありました。C99のリリースから20年以上たった現在において、メジャーなCコンパイラはすべてC99以上に対応していますが、未だに「ローカル変数の宣言はブロックの一番最初」と教える人がいるそうです、**なぜかC言語以外の言語(JavaとかC#とか)においても!**逆に、古いC言語を知らずに、JavaやC#等から学んだ人地達は、ローカル変数を必要になるところから始める傾向にあります。特に、最初の代入が宣言を兼ねる(つまりローカル変数の宣言文という独立した物がない)PythonやRubyから始めた人にその傾向が強いです。

それぞれの主張、利点・欠点等は今は時間がないので省略しますが、JavaScriptでは見受けられなかったものの、他言語ではローカル変数の位置について明記したコーディングスタイルガイドも存在するようですので、それらを参考にしてみてください。

最後に結論だけべると、「それぞれの関数(メソッド)が十分短ければ、ローカル変数の位置はどちらであってもあまり変わらないのでは?」というのが私としては一番納得できた主張です。


なお、私はCoffeeScript派なので、この議論に参加する資格は有しておりません。

投稿2020/11/19 22:19

raccy

総合スコア21735

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

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

tatsuyan

2020/11/20 12:53 編集

>>raccy ご回答頂きありがとうございます。 それぞれの言語の特性から先頭か都度か宣言する位置のルールがそこまで決まっていないのですね。 他言語のコーディングスタイルを参考にすると言うのは考えになかったので、 変数の宣言位置や他の見識を広げる意味ではいいですね。 そもそも関数の長さを短くするよう努めれば、 確かにそこまで気をつける必要はあまりないかもしれませんね。
guest

0

それぞれのコーディングルールをご教授頂けますとありがたいです。

チームでやるなら、チームごとに変わってくるので、
みんなで規定を決めることが多いです。

例えば、私のチームでは、

jQueryで定義する場合は、少しでも処理速度を速くするために、 jQueryでのDOM取得変数は、先頭に定義し、 呼び出す時は極力定義変数から呼び出し、使用する

というルールが存在します。

というわけで、
ぶっちゃけ、
現場や案件別に存在すると言っても過言ではありません。
なので、今下手に探して、変な癖になるよりは、
今は書きまくって、言語の性質を理解する方がいいんじゃないかな?
と思います。

ASIを使うかどうかは、宗教戦争レベルで分かれる

ただし、JavaScriptには少々厄介な仕様があるため、
それによって、ある種こだわり主義主張が強く、
厳密に規則化している現場もあります。

ASI(Automatic Semicolon Insertion)は、
セミコロンが無ければ、コンピュータ側が解釈できないような、構文に、
必要なセミコロンを自動で補完する仕様です。

JavaScriptはもともとセミコロンの記述が必要な言語ですが、
多数の構文ファイルを、入り乱れて読み込むことが可能なため、
例えば、自身のコードでしっかりと書いていても、
読み込んでいるライブラリで、書き忘れがあり、なんて時はエラーが起きて、
そこで処理が止まってしまいます。
そのような記述忘れを補完し、コンパイラ側が自動でセミコロンを入れて解釈させる、
という仕様が、ASIになります。

これの存在により、
セミコロンを入れるべきではない派と、セミコロンは入れるべきだ派で真っ二つに割れています。

特に、入れない派は、入れないがために逆に起きる不都合を回避するために、
記述規則を厳密に定める傾向が強い、と個人的には感じます。

JavaScript ASI や、
JavaScript セミコロンなんて調べると、様々な、主義主張が記載されている記事が散見されるので、興味があれば調べてみるとよいでしょう。

ちなみに、私は、セミコロンは絶対入れる派です。
どうせ仕様として必要なんだったら、自分で把握して理解して入れるべきだと思うからです。
ただし、先述しましたが、宗教戦争の域を出ず、どちらも正解不正解はありません。

余談の方が長くなってしまいましたが、以上です。

投稿2020/11/19 16:31

miyabi_takatsuk

総合スコア9528

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

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

tatsuyan

2020/11/20 12:59

>>miyabi_takatsuk ご回答頂きありがとうございます。 そうですね、先頭で宣言する方だけしか使っていなかったので、 もう片方の都度宣言すると言うやり方を取り入れて現場や会社に合わせた柔軟なコーディングができるようにした方が断然いいですね。 Jsは癖があるから、対立するルールがあるのですね。 参考になります。
guest

0

スコープ内で使う変数を確定できる設計なら、宣言はなるべく前方でしておいたほうが
管理しやすいでしょうね
ただjsのゆるさになれていると、どうしても使うときに宣言するくせが抜けないですけどね

投稿2020/11/19 09:33

yambejp

総合スコア114968

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

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

tatsuyan

2020/11/20 13:01

>>yambejp ご回答頂きありがとうございます。 前方で宣言すると言うやり方しか知らないので、 そちらの方が管理しやすいかなと思っています。 ただ、あくまでこれはもう片方を試していないからと言う経験の低さからなので、 都度宣言するというやり方も実践して見ようかと思います。
guest

0

次のような場合を考えてみましょう。

for (let i = 0; i < 10; i++) { console.log(i); } console.log(i);

この場合、i の寿命は for 文の中に限られるため、最後の console.log(i); は失敗します。
var の寿命は「関数内」なので失敗しませんが、let の寿命は「ブロック内」になるためです。

要するに、var は関数の先頭で定義しても必要な時に定義してもさほど変わりませんが、const let の場合には変わってくるということです。

このことにより、i がループ変数ということが明確になるので、私は先頭ではなくその都度宣言する派です。

関数の先頭で変数を宣言するのは C 言語の古い書き方の名残であり、そこに可読性が落ちるというデメリットがあったために新しい書き方が生まれました。また、let の寿命は var とは違い関数からブロックへと変更されました。その意味を考えると、チームで決まりがある場合、また既存のコードにその決まりがある場合には尊重すべきだと思いますが、そうでない場合、関数の先頭で宣言することを強制してわざわざスコープを広げるのはいかがなものかと思います。

投稿2020/11/19 22:41

編集2020/11/19 23:12
Zuishin

総合スコア28662

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

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

maisumakun

2020/11/19 23:27 編集

厳密なことを言い出すと、for()の丸括弧内でletを使って宣言したiのスコープは「ループ1回分」だけです。ループ1回毎に別々のiが生成されて、値だけは前のループから次のループへコピーされる、という仕組みです。 (そのおかげで、letで書いたループカウンタは、ループ内で仕掛けた非同期処理からでも正しい値を取れます。全体で1つの変数となるvarの場合、非同期処理から呼ばれたときにはループを抜けきった後の値になる、という事故がよくありました)
Zuishin

2020/11/19 23:34 編集

確かにそうですね。let ではなく const で宣言しても動くのが不思議でした。 追記 間違えました。const で宣言しても動くのは for ではありませんでした。
tatsuyan

2020/11/20 12:47

>> Zuishin 元々はC言語の名残なのですね。 巻き上がりがあるから気をつけないとバグが発生しやすいと本やネットにあったので、 強制しなければいけないと思い込んでいました。 スコープがいたずらに広がる、可読性が落ちると言うデメリットを強制しないようにするには 都度使用直前で変数宣言すると言うのが有効な訳なのですね。
tatsuyan

2020/11/20 12:48

>>maisumakun ご回答頂きありがとうございます。 そこまで詳しい処理の中身は知らなかったので、参考になります。
maisumakun

2020/11/20 12:51

> let ではなく const で宣言しても動くのが不思議でした。 for-inやfor-ofはconstで書くことがありますね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問