+ JavaScript の質問用スレッド vol.134 +

1Name_Not_Found2018/06/04(月) 16:22:58.13ID:aMAv4I5k
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください

■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。

■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)

■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
 1レスに収まらないならコード投稿サイトを利用してください。
 http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/

■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける=荒らしです

2Name_Not_Found2018/06/07(木) 21:27:53.72ID:???
>>1
乙です

3Name_Not_Found2018/06/07(木) 21:28:55.62ID:???
MySQLとMongDBならどっち?
このスレできく理由も勝手にエスパーして考慮に入れてお願いします。

4Name_Not_Found2018/06/07(木) 21:58:02.88ID:???
そんな聞き方する奴にrdbは合わないに決まってるのでmongo。

5Name_Not_Found2018/06/07(木) 23:15:04.02ID:???
うめ

6Name_Not_Found2018/06/08(金) 00:59:57.44ID:???
>>4
「そんな」ききかたではありません!
回答者の経験と発想を最大限尊重した
自由意思にゆだねた回答を求めるとてもリスペクトフルな質問法です!!

7Name_Not_Found2018/06/08(金) 01:24:05.63ID:???
テンプレ滅茶苦茶になった挙げ句ついにほぼカットされたか

8Name_Not_Found2018/06/08(金) 06:39:51.84ID:???
とりあえず巻き上げに関して正しておく
宣言された変数が属するスコープ内全域に浸透するのは当たり前
JSの巻き上げとは、宣言ではなく初期化の話
varならundefinedで、関数宣言なら関数値で初期化されることを巻き上げと言う

勿論アロー関数は巻き上げされたりはしない
ただアロー関数には変数宣言文中に定義することで
その変数名の名前がつくという特殊挙動がある

9Name_Not_Found2018/06/08(金) 07:02:20.40ID:G7whztLr
>>6
レスを最大限分析された的確な答えだと気づくべき

10Name_Not_Found2018/06/08(金) 08:09:56.78ID:???
>>4
あのさー、お前がね、いちいち用語の定義をする必要はないんだわ
世間一般に知られたことは、世間一般的な用語の定義があるんだから
それを引用して書けばいいだけ


https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var
> この動作は、変数の宣言が関数やグローバルのコードの先頭に移動したように見えるため、
> "巻き上げ (hoisting)" と呼ばれます。

変数の "宣言" が移動する。それが巻き上げ

11102018/06/08(金) 08:10:27.64ID:???
>>4じゃなくて>>8宛ね

12Name_Not_Found2018/06/08(金) 08:25:10.85ID:???
宣言とundefinedによる初期化は別々なのか?

var testvar; console.log(testvar); とだけ書くとundefinedが出力される

・元から先頭にあるのだから巻き上げは行われない、宣言が常にundefinedでの初期化を内包する
・元から先頭にあっても巻き上げが実施される、巻き上げにより宣言とundefinedでの初期化が行われる

どっちなのか判別が付かん

13Name_Not_Found2018/06/08(金) 10:44:46.46ID:???
スッゲ曖昧な知識だが。
function命令は命令なので、ちょっと特殊で、最初に読み込まれる。だから巻き上げが出来る
変数は最初に名前だけ収集解析だけされて、値の入ってない変数のリストだけが作られ構造化される。
だったような。

アロー関数がなぜ変数にいれているのに、巻き上げ?がおこるのかはしらない。

14Name_Not_Found2018/06/08(金) 11:01:32.95ID:???
概念についてあーだこーだ言われても確認できるコードがないとわからん

15Name_Not_Found2018/06/08(金) 11:18:35.65ID:???
これは知識不足というか、経験的に浅いと言った方がいいのか
巻き上げというものがあるんだ、そうなんだね!
ぐらいにしか考えてなさそう

なんで巻き上げという機能を実装したのかまで
考えられてない。C言語をしらないからか、
いや昔のC言語と言ったほうがいいのか
C言語に対するJavaの特徴といったほうが良いのか

なんでこうなってるかの、基本がないのは
時代の流れの方が理由大きいのかねぇ

16Name_Not_Found2018/06/08(金) 11:25:46.46ID:???
今のC言語はちょっと違うが、昔のC言語っていうのは、
関数は宣言してからじゃないと使えなくて、
変数の宣言は関数の頭の方に書くしかなかったんだよ

void foo() {
 int i; // OK
 int j; // OK
 bar(); // NG 先に宣言されてない = この時点では知らないので使えない
 int k; // NG 関数の頭じゃないからここで宣言できない
}

foo(); // OK 先に宣言されてるから使える

void bar() {
 return 0;
}

それを他の言語は、先に宣言されて無くても
スコープ内で宣言されていればOKにしたほうが
いいんじゃねという考えで改良したんだよ。
Javaはそれを特徴の一つにもしていた

17Name_Not_Found2018/06/08(金) 11:26:59.18ID:???
ちなみに当時はコンパイラの時代で、主にコンパイルする時点で
先に宣言されて無くてもOKという機能だった

18Name_Not_Found2018/06/08(金) 11:34:23.93ID:???
なんで先に宣言されてないといけないのかというと
関数に関しては、ファイルの頭からコンパイルするときに、
いきなり知らない名前がでてきたらどう処理したら良いかわからんし

変数というのは、関数内で一時的に(スタックに)メモリを確保して
関数が終わったら解放しなきゃいけないから。
頭にまとまってりゃ関数の最初でその処理をやって
関数終了に解放するだけで簡単

主にコンパイラの実装が簡単だからそうなってたんだよ。

これはインタプリタのJavaScriptでも同じ
だが、先に宣言されて無くてもOKにしたほうが便利だろう?

だから、先に宣言されているかのように
内部的に順番を入れ替えるのが、巻き上げの機能の本質

19Name_Not_Found2018/06/08(金) 11:34:39.70ID:???
文法の見てくれが似てるからと言ってjavascriptの動作をjavaやcなどのいわゆるc系言語の動作から読み解こうとしても無駄だよ。
なぜならjavascriptはc系言語の皮を被ったlispだから。
https://www.crockford.com/javascript/javascript.html
http://raganwald.com/2013/07/19/javascript-is-a-lisp.html
https://qiita.com/derui@github/items/6e8de68cc1b7295de3a6

20Name_Not_Found2018/06/08(金) 11:39:23.25ID:???
あとC言語はみ初期化の変数は中になにが入っているか不定
>>16のi,j変数はなにが入っているか決まってない
その時にメモリ(スタック)に入ってるゴミデータになる

実行速度重視のC言語ではそれもやむなしだったが、
決まってない値がなにか入っているのは分かりづらいバグの原因になるので
これが他の多くの言語では、0やNULLや未初期化を表す値になることを
保証している。それがJavaScriptではundefined

宣言したときに、undefinedに初期化するのではなく
初期化されてない変数は、undefinedになると考えたほうが良い

21Name_Not_Found2018/06/08(金) 11:49:27.70ID:???
チューリングマシンの構造によるものだときいたことがるようないような。
チューリングマシンだと最初に命令をよみこんでおかないとだめだとかなんとか。

22Name_Not_Found2018/06/08(金) 11:50:26.31ID:???
ここまで言えばわかったと思うが、
JavaScriptでは宣言前でも関数や変数を使えるようにするために

var i = 1 の var i の部分に相当する宣言と、function hoge() {} の宣言の
二種類の宣言が内部的に頭の方に集められる。そういう機能でしかない。

アロー関数( 例 (param) => value) は、function hoge() {} という形ではなく
名前がないため、後で宣言したアロー関数を宣言前に呼び出すなんてことは
ありえないので上の方に集める必要はない

だが var f = (param) => value と書いた場合の、変数fに関しては
その宣言である var f の部分だけが、その他の変数と同じように
関数の頭の方に集められる(アロー関数が集められるわけではない)

23Name_Not_Found2018/06/08(金) 12:00:31.41ID:???
もっと簡単に言えば、

関数は先に宣言されて無くても使えるようしたい
変数はスタックからのメモリの確保と解放を楽にしたい

という異なる二つの目的を叶えるために
巻き上げという名前で表現されるような
処理が行われるということ

ただ変数の方は、内部的にメモリを確保すればいいだけの話なんだから
宣言前に使えなくてもいいと思うんだが
内部的に関数の頭にまとめてメモリ確保するという実装が
仕様になってしまった感じがするな。

24Name_Not_Found2018/06/08(金) 12:26:11.76ID:???
>>19
はえ〜

25Name_Not_Found2018/06/08(金) 12:40:19.30ID:???
>>20
それは違うな。
JSでは未初期化の変数にアクセスすると例外になる仕様がきちんとある。
letやconstで宣言された変数は実行がその文に達するまでは未初期化の状態になる
その未初期化の区間がTDZと言われる。
未初期化と未宣言とundefinedで初期化済は皆違う。

26Name_Not_Found2018/06/08(金) 12:46:08.72ID:???
>>22
あと、アロー関数は名前がある。
var f = ( ) => { }
のように変数宣言と一緒にアロー関数が定義される場合は
特別に解釈されてf.nameがきちんと"f"になる。

27Name_Not_Found2018/06/08(金) 12:46:32.11ID:???
バカものどもがホイスト嫌ったせいでTDZなんていう化け物を産み出してしまった

28Name_Not_Found2018/06/08(金) 12:50:47.50ID:???
>>26
それ最初はchromeの独自実装だったよね?
今は仕様化されたの?

29Name_Not_Found2018/06/08(金) 12:51:33.45ID:???
言われてみれば確かにTDZってもんがあったな

どんな仕様にしても、自分は最初にまとめて宣言・初期化書いておくが

30Name_Not_Found2018/06/08(金) 12:53:18.97ID:???
>>28
ES2015仕様だよ

31Name_Not_Found2018/06/08(金) 12:56:05.04ID:???
>>26
あ、そういう意味じゃないんだわw
宣言時の話
代入すると名前が付きまーすって話じゃない

32Name_Not_Found2018/06/08(金) 13:00:41.05ID:???
アロー関数として定義された関数が巻き上げられているかどうか
って確認する方法あるのか?

33Name_Not_Found2018/06/08(金) 13:03:29.74ID:???
var f; // 宣言時
console.log(f.name) // undefined
f = () => {} // 代入
console.log(f.name) // f つまり代入によって名前がつく。f宣言時ではない

34Name_Not_Found2018/06/08(金) 13:16:03.50ID:???
それだと、
var f = function (){} では関数オブジェクトへのポインタ代入のみであるところ
f = () => {} では関数オブジェクトへのポインタ代入と変数 fへの.nameプロパティ付加の2つを行う
というだけである、とも解釈できるのでは

アロー関数そのものが巻き上げられていて、3行目でf.nameだけ後から処理されているのか
アロー関数そのものは巻き上げられず、3行目で関数の評価とともにf.nameが処理されているのか
どっちなのかわからないように見える

35Name_Not_Found2018/06/08(金) 13:17:33.65ID:???
console.log(f) // undefined
var f = () => {}
console.log(f.name) // f

console.log(g) // ? g() {}
function g() {}
console.log(g.name) // g

関数gは宣言なので当然巻き上げられるが
アロー関数(?)fは巻き上げられない
fはただの変数であり、変数宣言のみが巻き上げられる

アロー関数 () => {} に名前がつくのは代入した時なので
function g() とは違い記述よりも先に呼び出すことはできない

36Name_Not_Found2018/06/08(金) 13:20:05.69ID:???
アロー関数は関数というより値とみなしたほうが良い

37342018/06/08(金) 13:33:17.77ID:???
>>35

console.log(f); // null
var f = () => {}
f=null;
console.log( f ); // null

console.log(g); // null
var g = function (){}
g=null;
console.log( g ); // null

console.log(h); // function h()
function h(){}
h=null;
console.log( h ); // null

console.log(i); // null
var i = 1;
i=null;
console.log(i); // null

なんで1, 5, 7番目のconsole.log();がundefinedでなくnullになるのかは知らんけど
ともかく
function h(){}ではなくvar g = function (){}と書いたときの挙動とvar f = () => {}と書いたときの挙動
どういうことだろうか

38Name_Not_Found2018/06/08(金) 13:35:44.15ID:???
一言でいうと、ホイスティングにおいてほんとにアロー関数は特別なのか?ということ

39Name_Not_Found2018/06/08(金) 13:57:45.93ID:???
> 一言でいうと、ホイスティングにおいてほんとにアロー関数は特別なのか?ということ
全然特別じゃない。

アロー関数は、関数宣言じゃないので当然巻き上げられないし
アロー関数を、変数の宣言と同時に変数に代入する場合は、変数宣言のみ巻き上げられる

今までとなにも変わってない

40Name_Not_Found2018/06/08(金) 13:59:21.52ID:???
>>39
端的回答サンキュー

41Name_Not_Found2018/06/08(金) 14:01:45.36ID:???
>>37
> なんで1, 5, 7番目のconsole.log();がundefinedでなくnullになるのかは知らんけど

だから、宣言(関数の宣言 と 変数の宣言)のみが巻き上げられるんだって
わからなかったら、var文とfunction文が一番上にくると思えばいい

var f;
console.log(f); // null
f = () => {}
f=null;
console.log( f ); // null

var g;
console.log(g); // null
g = function (){} // ※これは文ではないので関数宣言ではない
g=null;
console.log( g ); // null

function h(){}
console.log(h); // function h()
h=null;
console.log( h ); // null

var i
console.log(i); // null
i = 1;
i=null;
console.log(i); // null

42Name_Not_Found2018/06/08(金) 14:04:30.16ID:???
console.log(v); // undefined
// console.log(f); // referenceError

var v=function f(){console.log(f.name)}
v(); // f

こうだもんな
変数に関数ぶっこんだときと何ら変わらん

43Name_Not_Found2018/06/08(金) 14:13:59.38ID:86T0W8kr
>>39
それおかしくね?
変数の巻き上げは宣言だけで中身までは巻き上げられないでしょ

44Name_Not_Found2018/06/08(金) 14:19:27.97ID:???
即時関数も変数に入れる関数もアロー関数も、前後を問わず、その場所や格納された変数以外から呼べない
呼べないだけで、中身が本当に巻き上げられていないのかどうかは、誰にもわからない

45Name_Not_Found2018/06/08(金) 14:22:51.06ID:???
>>43
だれが中身が巻き上げられるなんて言ったんだ?
そもそも宣言に中身は存在しない

こういう名前の変数 or 関数を使いますよーって言うだけ
だから宣言

46Name_Not_Found2018/06/08(金) 14:25:09.08ID:86T0W8kr
>>45
だけどアロー関数だと

f()
var f = () => {}

とあとに定義しててもf()で定義より先に呼び出して実行出来るという話でしょ?

47Name_Not_Found2018/06/08(金) 14:26:33.85ID:???
ずれてるやつの原因はこれか?

var f = () => {}

fはアロー関数ではない
() => {} がアロー関数

fはアロー関数を入れている変数

48Name_Not_Found2018/06/08(金) 14:29:17.26ID:???
>>46
> とあとに定義しててもf()で定義より先に呼び出して実行出来るという話でしょ?

実行できるわけがない
>>41でどう解釈されるか書いてやったろ


f()
var f = () => {}

↑は↓のように解釈される

var f
f()
f = () => {}

当然undefinedになってるんだから呼び出せない
(蛇足だが、アロー関数 () => {} に fという名前がつくのは
三行目の f = () => {} を実行した時)

49Name_Not_Found2018/06/08(金) 14:32:47.86ID:86T0W8kr
>>48
できるよ。
試してみたら。
自分も最初できないと思ってたけどできたから意外だったと話をしたんだけど。

50Name_Not_Found2018/06/08(金) 14:37:30.11ID:???
>>49
できませんでしたwww
試してから言えや


もう一つ

function foo() { console.log(1) }
foo()
function foo() { console.log(2) }
↑は関数宣言が巻き上げられて↓と解釈される
function foo() { console.log(1) }
function foo() { console.log(2) }
foo()
だから2と表示される


var foo = () => console.log(1)
foo()
var foo = () => console.log(2)
↑は変数宣言が巻き上げられて↓と解釈される
var foo
foo = () => console.log(1)
foo()
foo = () => console.log(2)
だから1と表示される

51Name_Not_Found2018/06/08(金) 15:04:14.53ID:???
どんな環境(※さすがにIE/Edgeは除外)でも挙動変わらないのか?

52Name_Not_Found2018/06/08(金) 15:11:49.09ID:???
IE / Edge 含めて変わるわけないね

53Name_Not_Found2018/06/08(金) 15:14:28.46ID:???
>>30
いやアロー関数自体の話じゃなくて変数に束縛したアロー関数の.name。
初期はchrome以外空白じゃなかったっけ?

54Name_Not_Found2018/06/08(金) 15:15:47.72ID:???
>>31
いや、意味は勿論分かってるがちょっと関連することとして思い出したので
補足的に書いただけだよ

55Name_Not_Found2018/06/08(金) 15:18:25.96ID:???
>>53
それも含めてES2015仕様のはずだよ
あまり重要でない機能だから実装が遅かっただけでは?

56Name_Not_Found2018/06/08(金) 15:19:03.58ID:???
実際にfirefox52ESRではアローのf.nameは何も出てこないな

57Name_Not_Found2018/06/08(金) 15:34:32.92ID:???
というかだなfunctionの名前のように
関数名がその関数オブジェクトの.nameになるってのは思いつくけど、
関数を入れた変数名が、関数名になるなんて仕様普通思いつかないよ

匿名関数はデバッグが面倒になるので
どうにかして名前をつけられないか?という
方針で考えてやっと思いつけるってもんだ

仕様になるのが遅れるのも当然

58Name_Not_Found2018/06/08(金) 20:41:47.10ID:???
仕様は遅れては居ないが実装が遅れてるのかもな
仕様の該当箇所はここか
http://www.ecma-international.org/ecma-262/6.0/#sec-assignment-operators-runtime-semantics-evaluation
e. If IsAnonymousFunctionDefinition ~~

59Name_Not_Found2018/06/08(金) 21:48:42.42ID:???
firefoxってアホみたいに(褒め言葉)早く正確に仕様通りに実装するUAじゃなかったっけ

60Name_Not_Found2018/06/09(土) 07:40:37.68ID:???
contenteditableな要素にクリップボードをペーストする前に
リッチテキストをプレーンなテキストに変換しようと思い、
onPasteイベントの中でclipboardDataにsetDataしたのですが、反映しません
ペースト時にclipboardDataに書き込むことは出来ないのでしょうか?

61Name_Not_Found2018/06/09(土) 10:05:45.85ID:???
https://teratail.com/questions/88915
これを思い出した。

関数宣言→「変数の実体化」で変数定義が巻き上げられる
変数宣言(var)→「変数の実体化」で巻き上げられる
let,const→「変数の実体化」で巻き上げられるが、TDZでは参照不可
アロー関数→即時呼び出しor変数宣言に含めることしかできない
関数式→即時呼び出しor変数宣言に含めることしかできない

「変数の実体化」はES3当時の表現だが、分かりやすいのでつい使ってしまう。
ES2017ではこの文言はどう変わってるんだったか。

62Name_Not_Found2018/06/09(土) 19:40:55.00ID:???
>>59
いや、JS2.0とかやってた名残で当初は早いようにも見えたけど
実際は独自実装の非互換性問題とかもあったし、ここ2年くらいはChromeの方が実装早いよ

>>61
難しく考えずとも、変数とはスコープオブジェクトのプロパティのようなものだ
そのスコープにぶら下がる変数はスコープに入る時に全て作られる
そういうことをしなければ。スコープ外でlet aと定義していてスコープ内で同じくlet aと定義している場合、
スコープ内のlet aに達するまでにaを参照した場合スコープ外のaを参照する挙動になってしまう

あるいはそういう挙動でも良かったのかもしれないが、JSではその挙動を是としていないため、
スコープ内で作られる変数はそのスコープに入った段階で作られることになる
仕様での用語としては「CreateBinding」で、スコープ(Environment Record)に対して値を紐付けるための名前を作る作業がある
そしてその変数宣言文に実行が達したら「InitializeBinding」で、値が初期化される
それまでに変数を利用しようとした場合は例外となる

要するに変数の状態としては「created」かどうかと、「initialized」かどうかの2つを考えればいいだけ
関数宣言に関してはブロックが評価される時に、通常の宣言であればcreateされるだけのところを追加でinitializeされるというだけ

63Name_Not_Found2018/06/09(土) 20:42:00.96ID:???
>>60の件ですが
clipboardDataの実体はドラッグ&ドロップで使われているDataTransferオブジェクトのようです
JavaScriptリファレンス第六版には、
DataTransferオブジェクトのsetDataメソッドの説明として

ドラッグアンドドロップ操作の最初の dragstart イベントに応答して
ドラッグ元がこのメソッドを呼び出します。
このメソッドはその他のイベントハンドラからは呼び出せません。

とあり、DataTransferオブジェクトというのは自由に読み書きできるようなものでもないようです
ペースト前にデータをJavaScriptでフィルタするのは機構的に不可能なのでしょうか?

64612018/06/09(土) 21:56:44.42ID:rjw/LaIP
>>62
変数の挙動は理解しているし、詳細な説明が欲しかったわけではない
「仕様上の文言がどうなっているか」が気になっただけ

65Name_Not_Found2018/06/09(土) 23:59:05.12ID:???
Reactを勉強しているものですが、Reactのスレが見つかりませんでした。日本ではマイナーなのでしょうか?

66Name_Not_Found2018/06/10(日) 00:54:36.18ID:???
>>64
だからそれも書いてるじゃん
変数周りの仕様としては「created」と「initialized」しか無いって
関数宣言は「Hoistable」に含まれるわけだけど、それは「created」されて「initialized」されるということでしかない
「実体化」などという表現や概念は存在しない

67612018/06/10(日) 01:57:27.73ID:AOyPV8Fv
>>66
> 変数周りの仕様としては「created」と「initialized」しか無いって
あなたの解釈はどうでもいいのだよ
知りたいのは一次情報源だけ

> 「実体化」などという表現や概念は存在しない
そんなことはない
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/10_Execution_Contexts.html#section-10.1.3

68Name_Not_Found2018/06/10(日) 02:57:42.92ID:???
React Angular Polymer Vueなんかのフレームワークと
jQueryって同じフレームワークでもなんか別物のような気がするんですが
これらは出来ることは同じなのでしょうか?

69Name_Not_Found2018/06/10(日) 11:32:11.73ID:???
>>67
一時情報源だけ知りたいのなら自分で仕様を読めばいいじゃない
https://tc39.github.io/ecma262/
俺もあんたのためにきちんと仕様を読みながら噛み砕いて説明したんだからさ
それをそんな言い方されちゃもうどうしようもないね

70Name_Not_Found2018/06/10(日) 11:39:33.94ID:???
>>67
と言うかそこでいう実体化っていうのは、「コンテキストの実体化」だからね
静的なコードという型からその時に使う生きた状態を生成する
つまりインスタンス化するというニュアンスだから
「実行コンテキスト」の項にあるでしょ?
その「変数の実体化」っていうのは今話してる変数の状態や「有効化」の話とは軸がずれている
静的な定義らから生きた変数インスタンスを作るというニュアンスの話
そしてやっぱりちょっと妙な表現でもあるから今の仕様では使われてないよ

71Name_Not_Found2018/06/10(日) 12:19:29.70ID:???
>>68
jQueryはライブラリであってフレームワークではありませんよ
それを使っているプログラマが、それを呼び出すコードを書くのがライブラリ
呼び出されるコードを書くのがフレームワークだと誰かが言っていました

72Name_Not_Found2018/06/10(日) 14:34:15.01ID:???
>>69
> 俺もあんたのためにきちんと仕様を読みながら噛み砕いて説明したんだからさ
尋ねてもいない事をあなたが勝手に誤解してお節介しただけだろう
「ES2017ではこの文言はどう変わってるんだったか」とちょっとした疑問を口にしただけで、なぜそこまで絡んでくるのか
しかも、なぜか「あなたの言葉」で返ってくる始末

73612018/06/10(日) 14:57:34.96ID:Q6IKpI1g
>>72も自分なので、念のため

>>70
> その「変数の実体化」っていうのは今話してる変数の状態や「有効化」の話とは軸がずれている

俺からすれば、俺が書いた「独り言(>>61)」にあなたが勝手に絡んできただけなんだがな
で、俺の趣旨は「宣言が巻き上げされるのではなく、宣言した結果、実体化される変数初期化処理が巻き上がる」
変数宣言も関数宣言も巻き上げなんて発生していない
関数スコープにある変数は、実行コンテキストに入る段階で「変数が実体化」されるだけだ

「変数の実体化」がES3の用語である事は61で書いた通り
で、俺は「ES2017ではこの文言はどう変わってるんだったか」と書いた
詳しくは読んでいないが、おそらく関係するにはこの辺りで、俺が欲しいのは「ES2017の文言」
http://www.ecma-international.org/ecma-262/8.0/#sec-executable-code-and-execution-contexts
あなたはなぜか「あなたの言葉」で説明してきた
そして、一時情報源を求めたら、なぜか ES2019 https://tc39.github.io/ecma262/ を持ち出してきた

仕様書は必要になれば読むが、今の時点でそこまで切羽詰まって読む必要性はない
ただの独り言で誰かに答えてもらう事を期待していたわけでもない
答えてくれるのは有り難いが、俺への返信は全てピントがずれているんだよ

74Name_Not_Found2018/06/10(日) 15:28:19.00ID:SGg1sNhW
まだやっとるのか巻き上げの話w
そんな話時間の無駄のような気がするわ
物理の真理でもあるまいし
時間の無駄

プログラミングなんて使えりゃ良いんだよ
JSの仕様策定にかんよしてるのでないなら
もっと別のこと勉強しろ

75Name_Not_Found2018/06/10(日) 15:53:33.14ID:???
仕様を読まなければ、無駄にクロスブラウザする事もあるから時間の無駄ではないけど、否定から前向きな結論は出ないだろうね
独り言に絡まれたのは同情するわ

76Name_Not_Found2018/06/10(日) 16:05:06.46ID:???
というか、絡まれて火の粉を払っている方はともかく、絡んでいる方が望む終着点が読めん

77Name_Not_Found2018/06/10(日) 16:06:05.78ID:???
用語は根拠をもって統一すべきとは確かに思う

そしてもし詳しいなら実務に影響あるところを書いてくれるとうれしいんだが
宣言と初期化の違いが、実際のコーディングにどう影響するのか

アローを含む変数格納の関数と巻き上げの話にしても
その変数を介さずに中身を直接呼ぶ方法がないんだし
「巻き上げなんて無かった」と考えてコード書いていけばそれで良い話にも思える

78Name_Not_Found2018/06/10(日) 16:13:57.91ID:???
>>76
絡んでいる方は「一つの論題」に皆が参画している感覚なんじゃない?
>>70の下記一文は「一人一人にスレッドがある」と考えていない節があって、そこで61と齟齬が発生している印象

> その「変数の実体化」っていうのは今話してる変数の状態や「有効化」の話とは軸がずれている

79Name_Not_Found2018/06/10(日) 16:27:21.22ID:???
>>78
なるほど、確かにそういう人は少なからずいるな…

80612018/06/10(日) 16:51:48.21ID:Q6IKpI1g
>>77
> 「巻き上げなんて無かった」と考えてコード書いていけばそれで良い話にも思える

それで良いと思う
元々、ECMAScript には「巻き上げ」という概念はなく、誰かが hoisting と言い出したのが始まり
今では仕様上に hoisting も出てきてはいるけど、本質ではないと思う
実践的な部分では変数初期化のタイミングさえ覚えれば良い
基本的な部分だけまとめると、

- 「関数呼び出しされるタイミング」で関数宣言/変数宣言(var)の変数が初期化される
- let,const変数も同様に初期化されるが、TDZでは RefarenceError (TDZは仕様外の用語)
- グローバルコードでは先頭で関数宣言/変数宣言(var)の変数が初期化される

「関数式」「アロー関数」は単体で宣言する機構がないので、他のスコープから呼び出すなら変数宣言/引数などに絡めて使う

81Name_Not_Found2018/06/10(日) 17:07:16.04ID:???
>実践的な部分では変数初期化のタイミングさえ覚えれば良い

覚える必要あんのか?
変数は「初期化するコード」より前のタイミングで使うな、なんならブロック先頭で網羅的に初期化しろ、で済む話では?

82Name_Not_Found2018/06/10(日) 21:03:36.41ID:???
>>73
俺からすれば最初>>62は君に対する返答でもたしかにあったけど、
君だけへの返答ではなくそれまでの流れを含めた視聴者に対するまとめを書いただけで
別に君に変数の仕組みを解説したつもりはない

そこに君が>>64で突っ込んできたから、それ「も」書いてると言った
君は「自分の言葉」と思ったかもしれないが、仕様書のURLは、「あえて」記載しなかった
ただ俺はきちんと必要ならすぐ調べられるように仕様上の用語は含ませた
そこは確かに君を強く意識して行ったことだけど
先にも言ったとおり全体としては君の質問へのど直球の回答ではないので
君の期待通りの返信では無いのは悪しからず

そして>>78の言う通り、俺が>>62などで書いた文章は以前の話を含めて書いているため
その後のそれらに対するレスは、>>61だけではない流れ上で考えさせて貰っている
君がやけに>>61に拘ってたことには失礼ながら今気づいたが、俺はそんなちっぽけなところなんて見続けていない

83Name_Not_Found2018/06/10(日) 21:14:46.91ID:???
>>73
あとこれは完全に別件として問いたいことだが、
なぜES2017に拘る?
俺はES2017というのは最新仕様の言い換えだろうなと思ったから
より適切な最新のドラフトを案内した

今回の件でES2017に拘る理由がわからない
ES3,5や、letやconstが入ってその辺りに変更が入った2015を見てみるというのはまだ分かる
でもES2017なんて中途半端なところを拘って見たがる理由って一体全体なんだ?
今を知りたいのなら最新のドラフトの方がいいぞ、多少読みやすくもされてるし

84Name_Not_Found2018/06/10(日) 22:36:17.46ID:???
一次情報云々の話ならそもそも実体化とかいう訳語が怪しいんだが
誰かがそう決めたの?

85Name_Not_Found2018/06/11(月) 08:47:51.79ID:???
>>81
それはポリシーの問題
それでいい人もいれば、良くない人もいる
const房と根本的に同じ問題

86Name_Not_Found2018/06/11(月) 09:52:34.11ID:???
>>85
ちょっとおかしくね
>>80を理解したところで初期化jsコードより先に使っちゃダメなのは確かで
初期化jsコードより後に使うなら>>80は無意味では
問題おきてデバッグする時にもまず役に立たない知識

87Name_Not_Found2018/06/11(月) 10:06:20.55ID:???
知っていると実益があるかどうか
var,let,constはそれぞれ性質が違いしかも一方だけでコードを書くことができる
選択の余地ひいては実益があり、実益をどう判断するかのポリシー問題

変数の巻き上げやTDZや宣言・初期化とか用語・説明の話は実益あるのか

88Name_Not_Found2018/06/11(月) 11:12:20.90ID:???
俺様が満足していればどうでも良いんだよ

89Name_Not_Found2018/06/11(月) 12:13:44.14ID:VhNszVLU

90Name_Not_Found2018/06/11(月) 12:40:18.54ID:???
実益があるのかって、単純に何事も内部構造をできるだけ分かって使う方がより良いと思うけど。
クラッチやエンジンの仕組みを何も知らないで感覚だけで覚えるのと、理屈で理解してるのとでは違いがあると思う

91Name_Not_Found2018/06/11(月) 13:18:48.10ID:???
巻き上げ周りの知識があったら書き方がどう変わるのかってやつだな
自動車の例でいえば、仕組みを知ってれば効率良い運転に繋がる可能性もあろう

92Name_Not_Found2018/06/11(月) 15:55:56.82ID:???
ジェネレーター関数って使い道ありますか・・?

93Name_Not_Found2018/06/11(月) 15:57:10.40ID:???
フレームワーク作者とかは使うんじゃない?

94Name_Not_Found2018/06/11(月) 18:37:23.63ID:???
通常のジェネレータはあんまり使い道はないが
asyncになるとイベント的なことに使えるのでかなり重要な存在
これがあれば、whileループみたいに描くしか無いところをfor awaitで書ける

95Name_Not_Found2018/06/11(月) 19:18:59.97ID:???
でもそれwhileループで書けば良いんですよね?

96Name_Not_Found2018/06/11(月) 22:32:05.39ID:???
そうでもないと思う
ジェネレータの良いところは、継続状態と返り値が同時に抽象化されてることだから
for awaitならそれを抽象化されたまま自然と扱えるが、
whileを使った場合その抽象化システムを丁寧に自分で組み立てるか、
その場その場で適応的に書くか、もしくは妥協しないといけない

97Name_Not_Found2018/06/11(月) 23:47:57.05ID:FHvAGVIA
ftp%3A//ftp2.shuwasystem.co.jp/pub/book/javascpermas/chap09.zip
これのsec04/dragdrop.htmlの26,36行のpreventDefault()ってなにを取り消してるの??

98Name_Not_Found2018/06/12(火) 00:18:43.22ID:???
あ、ちなみに、ページ内の「ドラッグできます」というのを上の四角の領域にドロップすると要素が移動するというコードです。


それから34行のcurrentTargetとtargetと違いもわからないです。
targetに書き換えるとドラッグしても何も起こらなくなるのはなぜだろう

99Name_Not_Found2018/06/12(火) 01:33:58.85ID:???
んなURL持ってくんなよ
しかも度々書籍ステマ・書籍アフィが出てるスレで「コンピュータ、パソコン書籍の出版社」が
アクセス統計でも得たいのか

100Name_Not_Found2018/06/12(火) 06:26:12.22ID:???
本買うと特典でサンプルDLできるとかのあれか

本買ってないやつがDLするわけにはいかないし
本買ったやつならURLなんて出さなくてもわかるだろうし
何より本書いたやつか出版社に聞け

101Name_Not_Found2018/06/12(火) 12:39:51.08ID:???
>>98
どなたかお願いします

102Name_Not_Found2018/06/12(火) 12:54:37.96ID:???
>>92
データのID作るときとか便利
ループだとそのループ中でしかできないが
ループ以外でも簡単に連番等つけれる

同じ理屈で数列つくるときに便利。
遅延評価で無限数列つくるときとか。
ま、あんま使わんと思うが。

103Name_Not_Found2018/06/12(火) 12:55:33.83ID:???
調べるべき用語が分かってるんだからググった方が絶対いい結果を得られるよ

104Name_Not_Found2018/06/12(火) 12:58:21.53ID:???
>>97
$('a').click(function(e){ e.preventDefault(); });

例えばこれなら、a タグによるページ遷移という、デフォルトの動作が取り消される

jQuery のイベントバブリング、preventDefault()・stopPropagation() を参照

105Name_Not_Found2018/06/12(火) 13:35:41.02ID:???
('q')

106Name_Not_Found2018/06/12(火) 16:23:25.80ID:???
>>97-98
http://jqueryui.com/droppable/

jQueryUI の、Draggable, Droppable のソースコードを見れば?

107Name_Not_Found2018/06/15(金) 05:12:24.54ID:OkF/hEF8
JS違法だって
おまえら逮捕だね

【ウイルス】WebサイトでJavaScriptでPCに負荷をかける行為は違法 警察が検挙
http://asahi.5ch.net/test/read.cgi/newsplus/1528979221/

108Name_Not_Found2018/06/15(金) 05:40:24.41ID:???
jkなら大丈夫だから

109Name_Not_Found2018/06/15(金) 12:42:58.55ID:???
ひまつぶしにどうぞ
+ JavaScript のお題用スレッド +
https://mevius.5ch.net/test/read.cgi/hp/1526666703/

110Name_Not_Found2018/06/15(金) 15:06:38.85ID:???
パターンマッチ関数って何のためにやるのですか?
回りくどいな、という印象しかなかったのですが

111Name_Not_Found2018/06/15(金) 16:35:12.09ID:???
パターンマッチ関数??
それだけ言われても…

112Name_Not_Found2018/06/15(金) 17:28:44.15ID:???
>>110
すべてモジュール化するため

113Name_Not_Found2018/06/15(金) 17:41:20.29ID:???
処理のメイン部分の記述が簡素になる。

114Name_Not_Found2018/06/17(日) 09:54:02.75ID:???
JavaScriptで配列をすごい勢いでループしてる時に
緊急停止ボタンが押されたらブレーキをかけることはできますか

115Name_Not_Found2018/06/17(日) 10:02:59.78ID:???
>>114
再帰なら可

116Name_Not_Found2018/06/17(日) 10:24:28.66ID:???
>>115
質問者じゃないけど興味があるので理由を詳しく聞かせてもらいたい

117Name_Not_Found2018/06/17(日) 12:03:06.04ID:???
嘘だから気にすんな

118Name_Not_Found2018/06/17(日) 12:33:49.85ID:???
なんだうそか

119Name_Not_Found2018/06/17(日) 12:35:22.12ID:???
setTimeoutやsetIntervalで再帰させてれば緊急停止できるのでは

概念的にはもはやループじゃなくてタスク管理だけど

120Name_Not_Found2018/06/17(日) 14:34:27.38ID:???
> setTimeoutやsetIntervalで再帰させてれば
再起である必要はないね

121Name_Not_Found2018/06/17(日) 14:57:27.97ID:???
緊急停止ボタンのクリックイベントでkinkyubrake = trueしておく。
ループではkinkyubrakeがtrueのときはbreakするようにしとけばいい。

122Name_Not_Found2018/06/17(日) 16:18:01.04ID:???
再開どうすんの
あ、再開はないのか

123Name_Not_Found2018/06/17(日) 17:49:51.65ID:9b6f4Zt8
緊急停止っていみわからんけど
再帰で無限数列とかつくるとオーバーフローでエラーでるが
それを回避するためにsetIntervalに入れるんだが。
そういうことじゃねぇのか?

124Name_Not_Found2018/06/17(日) 17:58:49.16ID:???
そりゃ別の問題だろ
jsエンジンの保護機能があって、理解した上でそれを回避する手法を使う
そこにユーザの停止意思は関係ない

125Name_Not_Found2018/06/17(日) 18:07:58.46ID:???
>>110
関数型プログラミングの質問か?

126Name_Not_Found2018/06/17(日) 20:12:00.03ID:???
皆様ご回答有り難うございます
長い時間がかかる計算をさせているのですが
私のラスクトップはこの時期長時間動かすと熱で落ちてしまいます
その兆候が現れた時に、物理的なUSBボタンが押されたら
全タブの処理を抑えたいと思っています
完全に止まらなくとも構いません
再開はしたいです

127Name_Not_Found2018/06/17(日) 20:13:14.81ID:???
なんかラスク食べたくなってきた。買ってこよう。

128Name_Not_Found2018/06/17(日) 20:15:51.10ID:???
つまりオーバーフローによる問題を回避するためではなく
エアフローによる問題を回避したいわけですな

ドヤァ

129Name_Not_Found2018/06/17(日) 20:18:15.35ID:???
ラスクトップってなんだデスクトップなのかラップトップなのかどっちだ

PCごとスリープさせたらダメなのかね

130Name_Not_Found2018/06/17(日) 20:32:27.93ID:???
とりあえずJSの仕事では無さそう
プロセスごとのCPU使用率制御かなんかを調べた方が多分近道

131Name_Not_Found2018/06/17(日) 23:23:03.78ID:???
>>116
厳密には同期的繰り返し処理では割り込み処理出来ない

132Name_Not_Found2018/06/19(火) 09:33:33.46ID:adLbUfl+
オライリーのサイ本はもう新しいのは出ないんでしょーか?
7版待ってるんですが

133Name_Not_Found2018/06/19(火) 12:29:07.22ID:???
一回読んだら次は仕様書見て理解すればいい

134Name_Not_Found2018/06/19(火) 23:04:41.37ID:???
今までOOPでやっていた部分をFPで書いていてふと思ったのですが
FPって名前空間汚しまくりじゃないですか?
例えばOOPだと
hoge={sum:()=>{}}
みたいにhogeだけですみますがFPだと
hoge=()=>()=>{};
sum=()=>{};
みたいに延々増えていくような?気がします
そういうものなんでしょうか?

135Name_Not_Found2018/06/19(火) 23:50:01.24ID:???
サイの絵の表紙のサイ本
JavaScript 第6版、2012、David Flanagan

初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、オライリー、2017

Flanagan は、Java, Ruby など色々な言語の本を書いてる。
最近は、何をやってるのかね?

136Name_Not_Found2018/06/20(水) 06:16:56.26ID:???
>>133
>>135
まだ持っていなくこれから学習始めるのに本が欲しかったんですが、第6版は古いから手が出しづらいです。
6版買うくらいならいっそのこと古本の5版でも構いませんか?

137Name_Not_Found2018/06/20(水) 06:49:06.68ID:???
良いか悪いかで言ったら俺は悪いと思う
要するにJSの実際はそんなには難しくもないんだけど、
適切な解説が少ないプロトタイプチェーンやスコープチェーンだったり
多くのJSerが曖昧にしてきたであろう基礎的な仕組みに近いところを
まんべんなくそれなりに分かりやすい解説が載ってたっていうのが価値だった

だけどその他の部分のテクニックとかも肌感覚が古くなってきてるし、
今なら当然合わせて知っておきたいクラス構文やモジュールなんかも学べないしな
まあ物好きでお金と時間に余裕があるなら、
一旦ES5までの知識を付けて個別にアップデートしていってもいいとは思うが

138Name_Not_Found2018/06/20(水) 07:35:11.72ID:???
>>137
ありがとうございます
第6版も古いからオライリーに拘らず他所の新しい本の方がよいでしょうか?

新着レスの表示
レスを投稿する