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

**Name_Not_Found** · 2018/04/16(月) 00:09:43.45

JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください

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

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

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

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

**Name_Not_Found** · 2018/05/27(日) 10:17:15.98

>>729
この本は「コアJavaScriptリファレンス」と「クライアントサイドJavaScriptリファレンス」に分けて説明しています
クライアントサイドJavaScriptの章では、CanvasやGeolocationやHistoryやStorageなど、
あなたが言うライブラリと同等のものが大量に紹介されています
しかしRangeとSelectionはないのです
あほとしか言い様がありません

**Name_Not_Found** · 2018/05/27(日) 10:19:09.88

>>728
リファレンスの価値は、可能な限り全部を載せるということでしょう
あほとしか言い様がありません（あなたが）

**Name_Not_Found** · 2018/05/27(日) 10:20:08.00

>>730
それよりもサーバーサイドJavaScriptが
まるまる抜け落ちてるのはどういうわけ？

**Name_Not_Found** · 2018/05/27(日) 10:30:06.59

>>727
こんなとこで聞いて何がしたいのでしょう?
出版社に問い合わせればいいだけなのではないでしょうか?
あほなのでしょうか?

**Name_Not_Found** · 2018/05/27(日) 10:36:08.74

>>733
何がしたい？もうしてますよ
あんたをイラつかせること
それがしたいことで、すでにやっていて結果もでてることですよ
出版社に問い合わせてもあなたをイラつかせることにはなりません
それもわからないあほなのでしょうか？

**Name_Not_Found** · 2018/05/27(日) 11:31:47.26

もう来ないっつったんだからもう来んなよ

**Name_Not_Found** · 2018/05/27(日) 11:37:02.92

そもそも翻訳の出来に左右される日本語版を買うのがあほ。
リファレンスは原著買うのが普通。

**Name_Not_Found** · 2018/05/27(日) 11:39:56.86

>>727
微妙なAPIだからね
マイナーだし、HTML5になる過程で一応仕様がデファクトに合わせて整備されなおされたけど
今後の発展性もないし取り上げて面白いAPIではないだろうからね

**Name_Not_Found** · 2018/05/27(日) 12:03:50.09

>>734
で、出版社はなんてこたえたの?

**Name_Not_Found** · 2018/05/27(日) 12:06:19.36

>>734
この人は偽者ですよ
出版社に問い合わせたところで何も変わらないでしょう
それよりも、何故そうなったのかを公開の場で検討した方がはるかに生産的です

**Name_Not_Found** · 2018/05/27(日) 12:08:03.82

>>732
Node.jsの本に任せているのでしょう
JavaScriptはそもそもの生まれがクライアントサイドスクリプトですし。
そういう意味でそこは妥当だと思います

**Name_Not_Found** · 2018/05/27(日) 12:13:26.82

>>737
発展性というか、基本的な機能だと思いますが・・
特に昨今JavaScriptの役割がアプリと同一化しているので、
もっと光を当てるべき機能だと思います
エディタ的なものを作る時には必須のオブジェクトなのですから

**Name_Not_Found** · 2018/05/27(日) 12:18:30.61

>>734
別にオレイライラしてないよ。
やった意味なかったね。

**Name_Not_Found** · 2018/05/27(日) 12:27:56.82

>742
レスしたのが証拠ｗ

**Name_Not_Found** · 2018/05/27(日) 12:28:48.06

electronで作られているVSCodeのエディタ部分はどういう実装になっているのでしょうか？

**Name_Not_Found** · 2018/05/27(日) 12:47:29.99

>>739
どう生産的なの?
著者と出版社に、自分はこう思うのでコレも書けって意見送ればいいだけでは?

**Name_Not_Found** · 2018/05/27(日) 13:12:15.20

>>744
ボク？オープンソースって意味わかりまちゅか？
https://github.com/Microsoft/vscode

**Name_Not_Found** · 2018/05/27(日) 13:13:18.36

エディタ部はmonaco
https://github.com/Microsoft/monaco-editor

**Name_Not_Found** · 2018/05/27(日) 13:26:01.97

原書は検索するとpdfでおっこちてること多いよなぁ。
公式なのか違法なのか知らんけど。

**Name_Not_Found** · 2018/05/27(日) 13:28:43.48

これ著者のツイッターアカウントだろ?
https://twitter.com/__davidflanagan
とりあえずツイッターで聞いてきなよ。

**Name_Not_Found** · 2018/05/27(日) 14:45:02.31

>>741
別に光を当てても選択範囲が取れますで終わりでしょ
エディタを作るのに必要でこれから考えないといけないのは
入力領域やIME制御のAPIだと思うけど

**Name_Not_Found** · 2018/05/27(日) 16:18:20.01

>>746
知っている人がいたらざっくり説明してくださいという意味です

>>747
そういうのを使っていたのですね
ありがとうございます

**Name_Not_Found** · 2018/05/27(日) 16:19:42.10

>>749
今から聞いても本が書き換わるわけじゃないですよね？
それに別に本人を責めたいわけではありません

**Name_Not_Found** · 2018/05/27(日) 16:26:17.87

ちなみに自分の知る限り、SelectionやRangeについて一番詳しく書かれている本は
Professional JavaScript for Web Developersです
この本以上に詳しくかかれている本ありますか？

**Name_Not_Found** · 2018/05/27(日) 16:52:48.97

ちょっと前から居てる、WYSIWIGエディタとかcontenteditableとかrangeあたりばっかりのキチは一体なんなん？
selection/range周りの解説本のステマかなんかか？
それとも新興のediterのステマか？

**Name_Not_Found** · 2018/05/27(日) 17:58:43.59

>>752
じゃあ何がしたいの?
理由がききたいんでしょ?
これから先出版する本で考慮してくれるかもしれないよ?

で、ここでグダグダいう生産性って何なの?

**Name_Not_Found** · 2018/05/27(日) 18:09:05.28

はい、またレスが一つ生産されましたよ？

**Name_Not_Found** · 2018/05/27(日) 19:10:13.80

毛根生産してから言えや

**Name_Not_Found** · 2018/05/27(日) 19:50:53.62

毛根なら生産しましたよ
一年間で毛根の数が倍に増えました

**Name_Not_Found** · 2018/05/27(日) 20:04:05.69

闘魂はどうですか？

**Name_Not_Found** · 2018/05/27(日) 21:22:55.25

>>731
> リファレンスの価値は、可能な限り全部を載せるということでしょう

「全部」とは何の全部ですか。
JavaScriptという言語仕様が存在しないことをあなたは知っているのですか。
JavaScriptから扱えるAPI仕様が多岐にわたっていることをあなたは知っているのですか。
その全てを網羅して、値段が10倍になってもあなたは買うのですか。
他の人も買ってくれると思いますか。
膨大な厚みの紙の書籍を買ってくれると思いますか。書店に置けますか。ビジネスモデルとして成立しますか。

> あほとしか言い様がありません（あなたが）

それは、あなたがJavaScriptを熟知してからいえる言葉ではないですか。

**Name_Not_Found** · 2018/05/27(日) 23:21:08.73

>>755
質問スレにおける生産性は、議論の中から新しい知見が現れることです
分かりますね？

**Name_Not_Found** · 2018/05/27(日) 23:26:39.12

ああ！「激しくだるま」で略して「はげるま」か
気づかなかった
なるほどうまいなｗ

**Name_Not_Found** · 2018/05/27(日) 23:41:55.90

selection/range って、この2冊にも載ってないだろ

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

JavaScript 第6版、2012、David Flanagan

**Name_Not_Found** · 2018/05/27(日) 23:41:59.69

誤爆かハゲ

**Name_Not_Found** · 2018/05/28(月) 00:43:33.87

>>763
載ってませんよ
サイ本というのはJavaScript第六版のことです

**Name_Not_Found** · 2018/05/28(月) 08:06:31.36

>>761
どんな知見生まれた?
何故載ってないかで新しい知見なんて生まれるわけないw
生産性低すぎなんだけどw

**Name_Not_Found** · 2018/05/28(月) 08:07:56.54

>>756
ゴミが生まれても生産性があるとは言わんわなw

**Name_Not_Found** · 2018/05/28(月) 08:45:41.82

Selectionの変更を検知するためのイベントハンドラないかな？
と思ったら、まさにそのための、document.selectionchangeというものが見つかりましたが
これはまだ草案状態で、firefoxにしか実装されていませんでした
contenteditableな要素でkeyupとfocusを使えば、
Selectionの変更を残らず捕捉できるでしょうか？

**Name_Not_Found** · 2018/05/28(月) 08:53:12.23

>>767
つまり、お前のそのレスはゴミだということか

**Name_Not_Found** · 2018/05/28(月) 08:53:51.11

>>768
不可能

**Name_Not_Found** · 2018/05/28(月) 10:02:25.45

>>770
ありがとうございます
確かにfocusやfocusinが発生した段階ではselectionの設定が済んでいないので適当ではないようでした
mouseupにしたらselectionの値も想定通りに取得できました

**Name_Not_Found** · 2018/05/28(月) 11:26:52.86

let hoge = {
property: 100,
method: ()={
return this.property;
}
}

let a = hoge.method();

みたいな書き方って今でもアリなのでしょうか？
クラスを使わずにオブジェクトを作るやり方です

**Name_Not_Found** · 2018/05/28(月) 11:39:38.99

ちなみに最近はもっぱらクラスと関数で書いていたのですが
昔のコードを見たら>>772みたいな書き方をしていて、
あれ？これ普通に便利じゃね？
ってなりました
newで生成する必要のない単体のオブジェクトならこれでいいのでしょうか？

**Name_Not_Found** · 2018/05/28(月) 12:26:55.16

> newで生成する必要のない単体のオブジェクトならこれでいいのでしょうか？

その通り。たくさん作る場合は関数が都度生成されるのでコスト高。
単発ならそれで十分。

**Name_Not_Found** · 2018/05/28(月) 12:51:23.12

サーバーとかもってないんだけど
クロスオリジン系のエラーがでるコードは試しで実行できないってこと?

**Name_Not_Found** · 2018/05/28(月) 14:09:43.60

>>772
何そのへんな書き方？
昔も今もエラーになるでしょ

**Name_Not_Found** · 2018/05/28(月) 19:06:43.61

>>772
場合によってはあり

**Name_Not_Found** · 2018/05/28(月) 19:07:23.66

ありって言ってるやつはJavaScriptしらないのかな？
見ただけで構文エラーだとわからないやつは
仕事やめたほうがいいよ

**Name_Not_Found** · 2018/05/28(月) 19:13:45.79

いや、もちろん文法エラーになるのは分かるよｗ
そういう低レベルの指摘は下々の者に任せることにしてるの。くだらない。
そこが本旨の質問じゃないからな。

**Name_Not_Found** · 2018/05/28(月) 19:15:14.45

>忘れてるだけでしょ
ただしそのままじゃthisが想定と違う気がするけど

**Name_Not_Found** · 2018/05/28(月) 19:38:55.10

昔のコード・・・・

**Name_Not_Found** · 2018/05/28(月) 19:45:24.64

>>779
やっぱりわかってないなｗ
文法エラーであることに気づいてない＝JavaScriptしらないから、
昔の書き方と今の書き方の違いもわからない
だからそれでOKとか言っちゃってるんだろ

**Name_Not_Found** · 2018/05/28(月) 19:50:17.43

static変数君また暴れてんのかw
ここはお前の遊び場じゃないぞ

**Name_Not_Found** · 2018/05/28(月) 20:02:57.25

>>782
お前こそ質問の意図がまるで分かっていない。
文法エラー直してくださいって質問じゃないぞ。
質問もう一度読みなおしてみ。
仕事ではコード以外にも日本語も読むだろｗ

**Name_Not_Found** · 2018/05/28(月) 20:13:59.25

>>784
だから書き方だろ

はそこに書いてあるコードが
昔の書き方か、今の書き方かで答えは変わる。

昔の書き方だろうから、今はそう書かないが答えだろうが
そもそも間違ってるので、もしかしたらそのコードは
今の書き方かもしれない

だからそれを正さなければ、
「今の書き方はそうかかない」と言い切ることはできない
だからまず、そのコードは間違ってると指摘しなければいけない

**Name_Not_Found** · 2018/05/28(月) 20:32:37.81

アローちゃんは、いつ大半のブラウザで動くようになるんですか

**Name_Not_Found** · 2018/05/28(月) 20:38:14.18

>>786
IE11とAndroid 4.4、そしてiPhone 4sを
使っている人が消えたら使っていいよ

**Name_Not_Found** · 2018/05/28(月) 20:49:39.53

win8.1のサポートが切れたら

**Name_Not_Found** · 2018/05/28(月) 23:14:27.37

>>785
お前AI BOTだろ

**Name_Not_Found** · 2018/05/28(月) 23:20:43.93

もういいよめんどくさい

**Name_Not_Found** · 2018/05/29(火) 01:47:08.51

>>785
質問者の意図を反映しつつ
動くコードに書き換えるとどうなるの?

**Name_Not_Found** · 2018/05/29(火) 01:52:56.73

var hoge = 100;

**Name_Not_Found** · 2018/05/29(火) 02:10:43.75

>>775
Ruby のSinatra が、標準のWEBrick よりも簡単。
JS の、Node.js の方が難しい

get '/' do
'hello'
end

これで、ブラウザからアクセスすれば、hello と表示される

実行環境がサーバーなら、クロスオリジンもOK だけど、
ブラウザでは出来ない

ただし直接、HTML ファイルに、URI を書けば、
JS じゃないから、クロスオリジンも出来たかも？

jQuery などで動的に、<script> 要素を生成して、
クロスオリジンのページを読み込ませるような、ハックがあったかも知れないけど、
ブラウザのセキュリティが厳しくなったから、今は出来るかどうかわからない

**Name_Not_Found** · 2018/05/29(火) 02:19:38.99

ヨコからだけど
こゆこと?

var hoge = {
property: 100,
method: ()=>{
return hoge.property;
}
}

var a = hoge.method();

**Name_Not_Found** · 2018/05/29(火) 02:33:23.85

それともこう?

function hoge () {
var property = 100;
this.method = function() { return property;}
}

var h = new hoge()
h.method()

**Name_Not_Found** · 2018/05/29(火) 02:34:50.82

でもnewは使わない前提なのか?

**Name_Not_Found** · 2018/05/29(火) 06:24:16.45

こうゆうことだろ
var hoge = {
property: 100,
method(){
return this.property;
}
}

**Name_Not_Found** · 2018/05/29(火) 06:25:40.93

>>794
昔はそのコードは動かないので、
>>773の昔のコード見てこのような書き方を
しているってのはおかしい

そして今そんな書き方はしない

**Name_Not_Found** · 2018/05/29(火) 06:27:15.53

>>797が今の書き方
だが、昔はこんな書き方はできなかったので
昔のコード見てこうなっているのはありえない

**Name_Not_Found** · 2018/05/29(火) 06:50:24.91

本当に分からないようだから一度だけガチで教えてあげる
質問者が言いたいのはメソッドを持ったオブジェクトを生成するとき
クラスを定義してnewを使うか、それとも使わないかという話だ
もうこれで納得出来ないのなら頼むから発言を控えてくれ

**Name_Not_Found** · 2018/05/29(火) 06:56:09.37

>>800
断る

**Name_Not_Found** · 2018/05/29(火) 07:01:38.19

>>801
狂人

**Name_Not_Found** · 2018/05/29(火) 07:09:18.58

>>802
気が済んだか？

**Name_Not_Found** · 2018/05/29(火) 07:18:09.35

static変数君が、classのstaticメソッドがうんたらかんたらって
流れにしたくて言い出した、と思いながら俺はみている

**Name_Not_Found** · 2018/05/29(火) 08:37:14.83

妄想乙。敵は一人ってやつですねｗ

**Name_Not_Found** · 2018/05/29(火) 08:43:27.65

答えを焦らして止めをさす戦術は実に嫌みだな

**Name_Not_Found** · 2018/05/29(火) 09:59:10.38

>>800
本当に分かってないようなので教えてやるが
今の質問者は>>791だぞ

**Name_Not_Found** · 2018/05/29(火) 12:08:48.27

indexedDB ってnosql ですか?

**Name_Not_Found** · 2018/05/29(火) 13:56:26.61

>>800
オブジェクトの生成じゃなくてインスタンスの生成じゃないの?
昔の仕様でnewなしでできるの?

**Name_Not_Found** · 2018/05/29(火) 14:51:13.63

まーた来たよクラスベース脳が
大人しくJavaワールドにお帰り

**Name_Not_Found** · 2018/05/29(火) 14:53:57.48

クラスとか関係ねぇ
インスタンスはインスタンス
なにをいってるんだか
オブジェクトだと範囲が広すぎて混乱するからインスタンスのほうがいい

**Name_Not_Found** · 2018/05/29(火) 15:02:53.88

newして生成するものがインスタンスですよ

**Name_Not_Found** · 2018/05/29(火) 15:12:19.47

Object.create()ならnewしなくてもインスタンスつくれるやん。

**Name_Not_Found** · 2018/05/29(火) 16:06:37.71

インスタンスはクラスベースの用語だろ。
ほにゃららクラスのインスタンス。
jsのプロトタイプベースの文脈ではnew ほにゃららのほにゃららはコンストラクタと言う。
そしてその正体はちょっとお作法に乗って作っただけのただの関数。

**Name_Not_Found** · 2018/05/29(火) 16:13:21.11

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages

> Java や C++ といったクラスベースのオブジェクト指向言語はクラスとインスタンスという 2 つの異なる実体があるという概念に基づいています。

> クラスはあるオブジェクトの集合を特徴付けるすべてのプロパティを定義する。
クラスとはそれが表すオブジェクトの集合の特定のメンバではなく、抽象的なものである。
例えば、Employee クラスで従業員すべてを含む集合を表す。

> 一方、インスタンスはクラスを実例にしたものである。
つまり、そのメンバの 1 つということである。
例えば、Victoria は Employee クラスのインスタンスとなることができる。このクラスは特定の個人を従業者として表すものである。
インスタンスはその親クラスのプロパティを正確に保持する。

> JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。

繰り返す。Javaワールドに帰りなｗｗｗ

**Name_Not_Found** · 2018/05/29(火) 16:51:26.62

文法上正しいならそういう書き方もあり
メジャーな方法を使いたいというのであれば、まあ、、何がどうであればメジャーなのか知らんが
メジャーと思う方法を使えばいい

**Name_Not_Found** · 2018/05/29(火) 17:31:52.52

>>815
つまりお前はJSにはインスタンスはないといいたいのか?

**Name_Not_Found** · 2018/05/29(火) 17:36:45.13

>>800
>>791への回答はまだですか?

**772** · 2018/05/29(火) 17:38:48.81

言われてみれば、昔風といいつつアロー関数式書いてましたね
しかも、アロー関数式もケアレスミスしてますしw
でも言わんとするところは分かりますよね？

**Name_Not_Found** · 2018/05/29(火) 17:41:29.02

言わんとすることを回答者に想像させるバカ質問者

**Name_Not_Found** · 2018/05/29(火) 17:42:07.53

関数
オブジェクトリテラル
クラス
を取り混ぜて書くのがJavaScriptなのでしょうね？

**Name_Not_Found** · 2018/05/29(火) 18:02:11.75

今も昔もjsにクラスはないよ。es2015で導入されたclassキーワードもクラスっぽく使えるオブジェクトを簡単に作れるシンタクティックシュガー。

**Name_Not_Found** · 2018/05/29(火) 19:30:08.02

var categoryHtml = document.getElementsByClassName("data-catg");
でHTMLCOLLECTIONを取得して
console.dir( categoryHtml)とすると結果は
ーーーーーー
HTMLCollection(5)
0:td.data-catg
1:td.data-catg
2:td.data-catg
3:td.data-catg
4:td.data-catg
length:5
__proto__:HTMLCollection
----------------

なのに
console.log("length"+ categoryHtml.length)
とすると
length1
となって何故かlengthが5のはずなのに1になってしまいます。
いみがわからないんですがなんでなんですか?

**Name_Not_Found** · 2018/05/29(火) 19:35:31.63

HTMLCollectionはNodeListと違って「生きている」「動的である」ということ
つまり取得したときの状態ではなく、現状が反映される

**Name_Not_Found** · 2018/05/29(火) 19:39:47.64

>>824
いやでも
console.dir( categoryHtml)
console.log("length"+ categoryHtml.length)
と並べて実行した結果なんですが。
動的と言っても変化する要素はないです。

**Name_Not_Found** · 2018/05/29(火) 19:47:47.62

>>822
class構文があるのにクラスが無いとか詭弁でしか無いと思うけどな

それは単にクラスベース言語のクラスを思い浮かべているだけだろう
オブジェクトのライフサイクルが予め存在するクラスシステムに縛られるのがクラスベースOOP言語だよ
一方インスタンスベースOOP言語は縛られないというだけでクラスがあることと矛盾しない
むしろ構造化プログラミングの観点から、『より素朴である』インスタンスベースOOP言語でも
自前でクラスシステムを組み上げるのは当然のことだし、
言語が予め標準的なクラスシステムを用意しておくのも自然なことなんだよ

改めて言うけど、クラスベース言語があって、そしてクラスがあるんじゃなくて、
クラスがあって、そしてそれをベースとする縛りを課した言語であるクラスベース言語があるんだからね
クラスっていうのはクラスベース言語に於ける存在ではなくもっと広い意味を持つもの
そしてクラスとインスタンスベース系言語は矛盾するどころか協力関係だし、
JSにも幾つかのクラスシステムが導入されてるし、
クラスとは、実はいろんなクラスシステムでのある形、塊のことをさす言葉なんだよ

**Name_Not_Found** · 2018/05/29(火) 19:48:46.05

>825
最低限再現できるコードを書いてみて

**Name_Not_Found** · 2018/05/29(火) 20:04:39.71

インスタンスベースOOP(笑)
しかもクラスベースOOPと並べて語っとるｗｗ

**Name_Not_Found** · 2018/05/29(火) 20:29:21.18

Javaの泥舟が沈みそうだからってほうぼうで必死すぎるだろ最近。
天下のIT土方様ならプロトタイプベースくらい覚えてから突っかかって来ればいいのに思い込みでギャーギャー喚いてるだけだからな。
そんな腐った心構えじゃJavaの沈没とともに仕事なくなるよ？
ま、次のCOBOLとも言われてるし立ち回りようによっちゃ死ぬまで食えるのかも知れんが。