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

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

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

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

JavaScript

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

Q&A

解決済

4回答

2546閲覧

JavaScriptのAutomatic Semicolon Insertion(ASI)は重い?

jakelizzI

総合スコア29

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

JavaScript

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

0グッド

1クリップ

投稿2018/03/08 10:00

編集2018/03/08 10:40

概要

宗教戦争ではあるかと思いますが...

JavaScriptのES6を用いて何か作ってみようと思ったのですが、セミコロンレスにするかどうかで少し議論が活発になった中で疑問に思ったことがあるので質問させていただきます。

賛成派

  • JavaScript Standard Styleではセミコロンレス
  • 書き忘れることがなくなる(書き忘れても動くのであれば、最初から書かないほうが書いてあったりなかったりなくて見やすくなる)

反対派

  • セミコロンあるほうが見慣れてる
  • ASIを理解していないのに使うのはどうか?
  • ASIが動くから重い
  • 下記のようなコードの場合、動かなくなる。即時実行関数のカッコが関数の引数と勘違いされてしまうため

JavaScript

1const a = 1 2const b = 2 3const c = a + b 4 5(function() { 6 var x, y, z 7})()

個人的意見

私は賛成派です。(グループ内に私一人しかいませんでしたがw)
なので、上記の賛成派の意見は私の意見です

疑問

  • 即時実行関数について
    そもそも即時実行関数は、変数のグローバル汚染を避けるために使用するものかと思いますが、ES6であればモジュールとして分けれますし、constletが増えたのでもう使う必要性はないのでは?

  • ASIが重いについて
    正直細かく理解しているわけではないのですが、、、、そんなに重いものなのでしょうか?

編集

ご指摘いただいたので、議論を募るような表現を削除し、純粋に自分が疑問に思ったことを質問にしました。
teratailの使用方法について正しく理解しておらず申し訳ございませんでした。

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

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

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

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

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

defghi1977

2018/03/08 10:35

teratailは議論をする場ではありません. が, 要するにあなたは「セミコロンレスのスタイルによる具体的な危険性について」知りたいわけですから, 本来その旨での質問とすべきでしょう. 単なる体裁ではないかと言われればそれまでですが.
jakelizzI

2018/03/08 10:41

疑問に思ったことを素直に質問するように修正させていただきました。ご指摘ありがとうございます。
guest

回答4

0

正直どちらでもいいはなしですが
物理的な1行に複数行をいれない担保があるならセミコロンレスでも
いいんじゃないですかね?
ただエディタのインデントの仕様で私はセミコロン付ける派です。

極端な例であまり実用性はないので無視できますが

javascript

1var i=1 2<0 3console.log(i) 4 5var j=1 61<0 7console.log(j)

的な処理があると嫌だなとは思いますけどね

投稿2018/03/08 11:17

yambejp

総合スコア114572

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

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

jakelizzI

2018/03/09 01:16

ご回答ありがとうございます。 <0の部分と1<0の部分は何のために存在しているのでしょうか? セミコロンをつければ同じ意味になるのでしょうか? 不勉強で申し訳ございません。
miyabi-sun

2018/03/09 01:59

実行すれば分かりますが、 上の方は不等号演算子が1にかかってくるのでiにはfalseが代入されます。 下の方は「1 < 0」の演算結果のflaseになる式が宙ぶらりんになるのでjには1が代入されます。
jakelizzI

2018/03/09 02:09

なるほど、1<0の評価の意味は特にないということなんですね。 そのような状態を作ることはおそらく無いと思いますが、知識として知れてよかったです! ありがとうございます。
guest

0

ベストアンサー

ちなみに、この質問で何かを決めようとか、こうじゃなきゃダメだ的な主張をするつもりはありません。

Teratailのガイドラインで、漠然と票を募る質問は推奨しませんと明記されています。
https://teratail.com/help/avoid-asking

従ってプロジェクトの決定に従って下さいとしか言えませんが、
色々と残ってる話に関して肉付けしていきます。


賛成派の意見

  • Elixir + Phoenixでプロジェクトを作った時、同梱のJSファイルがセミコロンレス
  • {}を省略するアロー関数を利用する際、セミコロン打つとエラーになるケースがある

JavaScript

1[1, 2, 3].map(it => 2 it * 2; // セミコロンを打つとエラーになる例の一つ 3)

即時実行関数はもう使う必要性はないのでは?

そうですね、
BabelやBrowserifyのおかげでグローバルスコープ上でなにかをするという事は殆どなくなりましたので、即時実行関数は不要ですね。
探せば見つかるかも知れませんが、私はこの半年間ES2015でコードを書いてきて即時実行関数が欲しいと感じたケースはただの1度も遭遇しませんでした。

ASIが重いについて

そもそもBabelかませば自動的に補われるんで別に…って感じですね。
いくら重いといっても、コンパイル時にさらっと舐める程度なのでlog(n)みたいな計算量をへらす方が明らかに重要ですし、あまり気にする必要はないかと思います。

投稿2018/03/08 10:35

miyabi-sun

総合スコア21158

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

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

jakelizzI

2018/03/08 10:45

ご回答ありがとうございます。また、議論を巣劇ではないとのご指摘、ありがとうございます。修正させていただきました。 > 即時実行関数について 自分は、まだがっつりES6で記述したことは無かったので「必要性はないだろうけど、、、、」程度の認識だったので非常に参考になりました。 > ASIが重いについて 確かにBabelかませればセミコロンレスかどうかは関係ないですよね。。。 ご回答ありがとうございました。
miyabi-sun

2018/03/08 10:53

b 因みに私の今のプロジェクトは私一人のプロジェクトなので、実験も兼ねてセミコロンレスでやってます。 まぁ普通に動きますしプロジェクト運用にも耐えますし、Coffee系のAltJSをメインで触っていたので概ね好感触に感じてます。 なのでセミコロンレス賛成派視点での意見を多少多く入れています。
jakelizzI

2018/03/08 10:58

なるほど、ありがとうございます。Coffeeという選択肢もありますね。
guest

0

Webに限るかもしれない話ですが、
コードを圧縮して一行化しないといけない場合があり、
(しないと、PageSpeed Insightsで減点される)
その場合は、
セミコロンないと動かないので、
私は、つける派です。

javascript

1var aaa = 0 2let bbb = "ほげほげ" 3 4// ↓圧縮 5var aaa=0let bbb="ほげほげ" 6 7// 当然エラー(圧縮サービスで圧縮すると、だいたい自動的にセミコロンつきます)

swiftとかのコンパイルありきのASIの言語だったら、別にいらないと思いますけどね。

投稿2018/03/09 01:33

miyabi_takatsuk

総合スコア9528

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

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

maisumakun

2018/03/09 01:51

一行化なんてことは、手作業でやるものでもない気はします(UglifyJSなどツールを使えば、セミコロンの有無にかかわらず自動で可能ですし)。
miyabi_takatsuk

2018/03/09 02:07 編集

maisumakunさん> おっしゃる通りですね・・・。 うちの会社では、htmlの圧縮にGulpでオリジナルプラグイン使ってて、 セミコロンレスのスクリプトが含まれていても、セミコロン付加処理までできていなかったので、 その処理も含められるよう、挑戦してみます。
jakelizzI

2018/03/09 02:11

ご回答ありがとうございます。 minfyを独自で実装しているとは驚きです.... そのようなプロジェクトではセミコロン必須にしなければいけませんね...
guest

0

ASIが重い

JavaScriptのパースはファイル読み込み時の1度だけですし、有意な差が出るようなシチュエーションは考えられません。そこまで気にするぐらいなら容量削減のためにUglifyするでしょうし、その出力結果はセミコロンどころか式をコンマでつなぐものになることすらあります。

即時実行関数のカッコ

カッコ以外に、行頭に来て前の行と繋がりうるものとして、「角括弧」「単項のプラス・マイナス演算子」もあります。

どちらにしても、JavaScriptは「前の行と次の行をつなぐ方を優先する」だけど「特定の箇所では自動挿入が入る」という、中途半端なルールになっているので、どちらのスタイルを取るにしても、ASIの挙動を把握しておかないと失敗する箇所はあります

  • セミコロンの有無にかかわらず…returnなどの直後の改行はセミコロン自動挿入となる
  • セミコロンなしの場合…行頭の丸かっこ、角括弧、プラス、マイナス

こうしてみてみれば、把握の必要があるイレギュラーが少ないのはセミコロンありの方、ともいえます。

投稿2018/03/08 10:17

編集2018/03/08 10:45
maisumakun

総合スコア145121

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

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

jakelizzI

2018/03/08 10:53

ご回答ありがとうございます。 即時実行関数を使用する必要がなければ行頭の丸かっこを書く場合はあるのでしょうか? また、行頭に演算子や角カッコを使用するパターンはあるのかな?と疑問に思います。 構文として記述できたとしても、一般的にそのような記述は行われないと思いますし、コーディング規約として許容しないといった選択肢があるのかな?と個人的には思っています。 ただ、確かにイレギュラーが少なく、なじみのある記述方法はセミコロンありの方なので、セミコロンありの方が無難に導入できる気がします。 貴重なご意見ありがとうございます。
maisumakun

2018/05/02 02:06

いま書いていたコードで、「三項演算子で選んだオブジェクトに対してメソッドを呼び出す」なんてことをやろうとして、行頭カッコでトラブルとなってしまいました。 もっとも、三項演算子の結果を一時変数に受ければ済むわけではありますが。
jakelizzI

2018/05/02 03:04

なるほど、三項演算子を用いてオブジェクトのメソッド呼び出そうとした場合は想定にありませんでした。 新しい情報ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問