JSってどこまでまとめていいの？

Question

let a = document.createElement("a");
let div = document.createElement("div");
let strong = document.createElement("strong");

▲ を ▼ にまとめるのはいいと出てきました。特に高速化するわけではないそうですが、文字数が減るため若干の高速化には繋がると思ったのですが。

let a = document.createElement("a"),
    div = document.createElement("div"),
    strong = document.createElement("strong"),
    p = document.createElement("p");

.

p = document.createElement("p");
a.href = json[i].link;
a.target = "_blank";

▲ のようなものを ▼ にするのは正しいのでしょうか。教えてください！

p = document.createElement("p"),
a.href = json[i].link,
a.target = "_blank";

Answer 1

文字数が減るため若干の高速化には繋がると思ったのですが。

jQueryは最低でも100kb程のファイルサイズがあるので、ざっと10万文字使っていますが、ダウンロード時間を除外すればロードして使用可能になるまで0.1秒程度のものでしょう。
それに文字数が減れば速くなるというものでもありません。

質問文に上がっている上下比較のコードはコンパイラからすればほぼ等価ですから、
結局やっている事は同じなのでパフォーマンスは殆どよくなる事はないでしょう。
100万の計算量を10万に減らすみたいなアルゴリズムの変更で悩むならともかく、そんな箇所で悩むのは完全に時間の無駄です。

こういったちょっとしたチューニングを自動的にやってくれるツールもありますからね。
軽く紹介しますので調べてみてはいかが？

参考サイト

• JavaScriptコードを圧縮・最適化・難読化する「Closure Compiler」のJavaScript版をGoogleが公開。Node.jsもしくはWebブラウザ上で実行可能
• node.jsのいろいろなモジュール26 – UglifyJSでjsファイルの最適化

Comments

[2001Y]

ありがとうございます。
JSを学びたてで少し気になってしまったので、質問させていただきました。
わざわざ、参考サイトまで教えていただき感謝です。
確かに、どうでもいいところに時間を食っていてもしょうがないので、教えていただいたツールの方も使ってみたいと思います。

Answer 2

カンマ演算子 (Comma Operator)

p = document.createElement("p"),
a.href = json[i].link,
a.target = "_blank";

カンマ演算子の性質を踏まえるなら、利用する価値があります。

• 「最後の式」を評価値とする
• 一つの「文」である

具体的には、

• アロー関数の略式文法でbodyを一つの式文 a, b, c にする
• 代入文の右辺に持っていき、一つの文にする

など。
一つの文しか求められない場所で使うのがポイントです。

カンマ演算子は誤解されやすい

よくある誤解は var 文、let 宣言内のカンマを「カンマ演算子」と誤認するパターンで、それはカンマ演算子ではありません。

---

• カンマ演算子 - JavaScript | MDN

単一の式でなければならない位置で複数の式を記述したい場合に、カンマ演算子を使うことができます。この演算子が最も良く使われるのは、for ループで複数のパラメータを与えたい時です。

これは条件付きで正しいですが、

for (var i = 0, j = 9; i <= 9; i++, j--)
  document.writeln("a[" + i + "][" + j + "] = " + a[i][j]);

このコードを例示するなら、誤りです。
var から始まる記述は「式」ではありません。

• 13.7.4 The for Statement - ECMAScript® 2018 Language Specification

let 宣言

理解力がなく理解しきれていないのですが、「カンマ演算子」は let var などではなく、感までまとめて指定できる。let a = 1, b = 2 , c = 3; は良くなく、forループなどで使う場合のみ使う。ということでしょうか。

質問の前段部分に言及しているつもりはありませんでした。
let宣言はECMAScriptによって、文法(Syntax)が定義されています。
http://www.ecma-international.org/ecma-262/9.0/#sec-let-and-const-declarations

**Syntax**
  LexicalDeclaration[In, Yield, Await]:
    LetOrConstBindingList[?In, ?Yield, ?Await];

  LetOrConst:
    let
    const

  BindingList[In, Yield, Await]:
    LexicalBinding[?In, ?Yield, ?Await]
    BindingList[?In, ?Yield, ?Await],LexicalBinding[?In, ?Yield, ?Await]

  LexicalBinding[In, Yield, Await]:
    BindingIdentifier[?Yield, ?Await]Initializer[?In, ?Yield, ?Await]opt
    BindingPattern[?Yield, ?Await]Initializer[?In, ?Yield, ?Await]

上記によれば、BindingList によって、カンマが定義されており、カンマ演算子(Comma Operator)が入る余地はありません。
一方、Initializer を追いかけると、Expression (式)を経由し、カンマ演算子(Comma Operator)にも行き着きます。
http://www.ecma-international.org/ecma-262/9.0/#sec-comma-operator

従って、下記コードではカンマ演算子が使われていません(let宣言の文法範囲内)が、

let a = 1, b = 2;

下記コードではカンマ演算子が使われています。

let a = (1,2,3);

文法を読むのは、慣れが必要なので、無理せず、少しずつ読み進めることをお勧めします。
下記3つの要素に分類すると、多少は読みやすくなると思います。

• 宣言 (Declaration)
• 文 (Statement)
• 式 (Expression)

下記リンク先が比較的よくまとまっていますが、「関数宣言(文)」と書かれており、宣言と文の違いが明確化されていないようです。
https://asciidwango.github.io/js-primer/basic/statement-expression/

Re: 2001Y さん

Comments

[2001Y]

ありがとうございます。遅れてしまい申し訳ありません。
理解力がなく理解しきれていないのですが、「カンマ演算子」は let var などではなく、感までまとめて指定できる。let a = 1, b = 2 , c = 3; は良くなく、forループなどで使う場合のみ使う。ということでしょうか。
教えていただければ幸いです。

[think49]

親記事に追記しました。

[2001Y]

お返事しそびれていて申し訳ありません。
宣言・文・式についての基礎も教えてくださりありがとうございます。
これからもどうぞよろしくお願いいたします。

Answer 3

JSはゴルフコンペ、厳しいんだよなぁ。やるばら他の言語の方がいいね。

Comments

[2001Y]

ありがとうございます。
ただ、JSで今まで書いている中で、整理しようと思ってところなので、JSに限らせていただきます。

Answer 4

高速化を考えるならば、かなり大きな処理単位で考えないと実用的ではないです。

むしろ、微々たる違いならば可読性の方が大事です。極論、インタプリタ言語ですから理屈上、変数名を短くすれば高速化できるかもしれません。が、いうまでもなく、こんな高速化ならしないほうがマシです。

Comments

[2001Y]

なるほど、確かにその通りですね。
きちんとした現場などでは、可読性は大切だと思うのですが、個人的に気になったことなので質問させていただきました。
理解してない者がすることではないと言われればその通りかもしれませんが...

Answer 5

p = document.createElement("p"),
a.href = json[i].link,
a.target = "_blank";

いくら何でも、文法違反になるものを、正しいですかというのは…