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

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

ただいまの
回答率

90.51%

  • JavaScript

    16421questions

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

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

解決済

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 328

2001Y

score 57

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";
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

+7

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

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

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

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

参考サイト

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/24 20:52

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

    キャンセル

checkベストアンサー

+3

 カンマ演算子 (Comma Operator)

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

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

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

具体的には、

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

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

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

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


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

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

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

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

 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 さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/24 20:48

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

    キャンセル

  • 2018/07/25 12:39

    親記事に追記しました。

    キャンセル

  • 2018/08/03 19:58

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

    キャンセル

+1

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/24 20:50

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

    キャンセル

-1

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

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

イメージ説明

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-3

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/24 20:49

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

    キャンセル

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16421questions

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