+ 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/14(月) 18:07:17.98

便乗で質問します
キャレット無しの場合、本来TEXTAREAやINPUTにキーボード入力するような操作を
DIV要素でやるにはどのような構成になるのでしょうか（googleドキュメントみたいなやつです）

TEXTAREAにキーボード入力したものをval()で取得してDIVにコピー、みたいなのではありません
さらに全角半角や漢字など（TEXTAREAへ入力できるものすべて）も判別したいです

keydown取得してkeyCodeで半角全角を振り分け→漢字などはスペースキーの監視で。
全角時にはバックスペースキー、半角切り替えも監視
など考えましたがそんなめんどくさい処理をしないといけないのか・・？と眉唾でした
（そのためのTEXTAREAやINPUTだと思いましたが）
例えばGoogleドキュメントなどはそういうめんどくさいキー監視をしているのでしょうか？

**Name_Not_Found** · 2018/05/14(月) 18:09:37.94

キー監視じゃIMEがどんな変換したかわからないから面倒如何の前に不可能でね

**Name_Not_Found** · 2018/05/14(月) 18:20:37.28

例えばhiddenしたTEXTAREAにフォーカスを当てて・・
みたいなことができればと、hiddenしたtextareaにfocusしてみましたが
TEXTAREA内の変更にまでは至りませんでした

>>508
たしかに・・

**Name_Not_Found** · 2018/05/14(月) 18:23:42.47

textareaは表示のまま、potitionでwindowから見切れるように
ならできました
ただ、キーボード入力のプルダウンメニューが邪魔になりますが

**Name_Not_Found** · 2018/05/14(月) 18:57:37.63

ちなみに稚拙ですがこんな感じです
https://jsfiddle.net/5sgn8d8e/

**Name_Not_Found** · 2018/05/15(火) 00:57:32.59

たしかにキャレット位置を保存しておいて、HTMLを書き換えてから戻す
みたいな処理だった気がします
で、すごーーく面倒くさかった記憶があります
RangeオブジェクトとかSelectionオブジェクトとか、
普段全く使わないようなオブジェクトを使って・・
しかもそれらのオブジェクトが異様に難解だった記憶があります
今もそれですかね～

**Name_Not_Found** · 2018/05/15(火) 01:28:59.58

>>495
jQueryのtext()では、タグがエスケープされるけど、
html()では、タグも有効になる

要素の内容が変更されたら、change イベントが発行される

正規表現を使う

**Name_Not_Found** · 2018/05/15(火) 03:08:21.53

一定の領域では泥臭い作業から逃げられん
論理的に必要なことはどうした考えても何度考えても必要

**Name_Not_Found** · 2018/05/15(火) 05:57:19.24

>>507
要素の内容が変更されたら、jQuery のchange イベントが発行される

他には、keypress イベントとか

**Name_Not_Found** · 2018/05/15(火) 06:31:26.60

IME API使えばいいじゃん
対応環境無いけど

**Name_Not_Found** · 2018/05/15(火) 06:50:37.39

div要素の内容が変更されたら、しかしそもそもdiv要素にどうやってキーボードから書き込むの、っていう話じゃないの>>515
隠しtextarea法が定石なの？

**Name_Not_Found** · 2018/05/15(火) 07:05:39.60

定石なんて無い
それでバリアがある環境や、ガラケーみたいなテキスト編集環境に対応できるかは分からんし
一般論としてできる限り細かい調整はしないで諦めたほうが良い

**515** · 2018/05/15(火) 07:08:00.41

>>515
自己レス

jQuery のchange, keypress イベントでは、うまくいかなかった

**515** · 2018/05/15(火) 07:12:36.31

Electron アプリの、VS Code では、半角文字で入力補完が出る

Electron とか使わないと無理なのかも

**Name_Not_Found** · 2018/05/15(火) 08:01:56.32

>>517
div要素を編集可能にするだけじゃん

**Name_Not_Found** · 2018/05/15(火) 16:04:21.29

ぐぐったらcaret.jsというのがあるみたいだけど
https://jsfiddle.net/sbrqvc2q/

**Name_Not_Found** · 2018/05/16(水) 06:07:00.35

そういうのあるんですね
ありがとうございます
ただ要素中のHTMLを書き換えてキャレットを戻せばいいと思っていましたが
よく考えると文字を一文字書き加えるごとに全領域を書き換えるエディタなんてないわけで
テキストノードの中に潜って文字のレベルで操作する必要があると思います
そのためのオブジェクトがRangeオブジェクトだったと思います
面倒くさいですが、面倒くさい方法しかないなら、するしか仕方ないですね・・

**Name_Not_Found** · 2018/05/16(水) 08:26:59.14

改行ごとにspanやpで区切るなどして部分的な指定をしやすくすれば、
HTMLの書き換えでもいいのかもしれません
ただ、何か問題があったから前回そうしなかったのではないか、という気もします

**Name_Not_Found** · 2018/05/16(水) 11:43:04.01

SelectionオブジェクトとRangeオブジェクトには、
ひととおりの API が定義されていますが、あまり使われていません。
本書でも解説しません。
（…）
Webアプリケーション上でリッチテキスト編集機能が必要な場合は、
ブラウザ間での差異を吸収してくれる既存のソリューションを適用するとよいでしょう。
インターネット上を探せば、そのようなエディタ部品がたくさん転がっています。

名著と名高いサイ本も、リッチテキスト編集周辺はそっけない記述＆放り投げです
「たくさん転がっています」って、
これはそういうエディタ部品を作りたい人が読む本じゃないのかと問い詰めたいです

**Name_Not_Found** · 2018/05/16(水) 12:06:09.71

>>525
テキストエディタの作り方って本があると思ってんの？

**Name_Not_Found** · 2018/05/16(水) 12:12:00.56

配列について質問です

var arr = [1, 2, 3, …]; と続く配列をタグで囲み、IDを割りふるにはどうすればいいでしょうか？

1 2 3 … のようにしたいです

下を試しましたが、IDにすべての配列が入ってしまったため、arr[0] と arr[1] としたら、3番目以降が2のままでした
console.log('' + arr.join(' ') + '');

よろしくおねがいします。

**Name_Not_Found** · 2018/05/16(水) 13:56:16.68

>あまり使われていません。

ガリガリ使っとるがな

**Name_Not_Found** · 2018/05/16(水) 17:09:18.55

>>527
var ary = [1, 2, 3, 4];
console.log(ary.reduce((acc, n) => acc + `${n}`, ''));

**Name_Not_Found** · 2018/05/16(水) 17:13:13.29

>>529
ありがとうございました！

**Name_Not_Found** · 2018/05/16(水) 19:24:22.87

>>529
console.log(ary.reduce((acc, n) => acc + `${n}`, ''));
console.log(ary.map(n => `${n}`).join(''));

上の方を選んだ理由は？

**Name_Not_Found** · 2018/05/16(水) 19:37:19.81

どっちでもいいけど新しい配列ちゃん生んですぐ殺すとかかわいそうやん

**Name_Not_Found** · 2018/05/16(水) 21:46:41.00

そんな無理にmapだのコールバックだの使わなくとも
昔っからある
(''+ary).replace(/(\d+),?/g,'$1')
でいいじゃん

**Name_Not_Found** · 2018/05/16(水) 22:03:54.34

ループさせますが何か

**Name_Not_Found** · 2018/05/16(水) 23:57:30.03

>>533
お前が正規表現に慣れてるだけだろｗｗｗｗ
知らんやつにはそっちのほうが宇宙語だろｗ

**Name_Not_Found** · 2018/05/17(木) 00:38:42.11

中途半端に新作作るならいっそリメイクの方が売れると思う

**Name_Not_Found** · 2018/05/17(木) 00:42:57.16

jsは昔っからコールバック使うが。
そういう言語だ。
pythonとかから来た人かな？

**Name_Not_Found** · 2018/05/17(木) 00:59:32.71

あ？昔から？ JavaScriptでmapやreduceが
使えるようになったのはIE9からなんだが？
昔はそんなコード書いてねーよ

**Name_Not_Found** · 2018/05/17(木) 01:40:37.68

IEをサポート対象外としてきたものは幸福である

**Name_Not_Found** · 2018/05/17(木) 01:52:20.30

IE以外はネスケしかないって時代を知らんのだろうなｗ
それでよく昔からなんて言えたものだ

**Name_Not_Found** · 2018/05/17(木) 02:11:05.39

>>538
おまえ頭湧いてんのかｗｗｗ
コールバックって言ってんだろｗｗｗｗ
コールバック使うのはmapreduceの専売特許じゃねーんだよアホｗｗｗｗｗ

**Name_Not_Found** · 2018/05/17(木) 03:14:54.20

昔から使うsetTimeoutもcallbackだな
callbackが昔から使われていることと、replace()が昔からあることは別だが

callbackで配列や文字列操作する関数って昔からあったっけ？

**Name_Not_Found** · 2018/05/17(木) 06:21:36.32

>>535
そんなんだから君には成長がないんだよ

**Name_Not_Found** · 2018/05/17(木) 06:29:42.28

はぁ？去年から10kgは成長しとるで？

**Name_Not_Found** · 2018/05/17(木) 07:30:57.08

もう成長する毛髪もないクセに・・・

**Name_Not_Found** · 2018/05/17(木) 09:12:07.01

自演で誤魔化し乙ｗ
「昔からある～でいいじゃん」とか言ってるくせに人には君には成長がないｷﾘｯとか笑うｗｗ

**Name_Not_Found** · 2018/05/17(木) 20:16:53.61

何が言いたいんだこいつ
喧嘩したいだけのJS無関係レスは他所でやれ

**Name_Not_Found** · 2018/05/17(木) 21:16:59.69

>>533
無理に正規表現を使わずとも、昔からあるfor文でいいじゃん

for (var i = 0, l = ary.length, s = ''; i < l; ++i) {
s += '' + ary[i] + '';
}

**Name_Not_Found** · 2018/05/17(木) 21:29:14.42

これが見慣れてるな

**Name_Not_Found** · 2018/05/17(木) 21:48:22.10

ループ外で使うsをループ初期化部で宣言するのは駄目じゃないか

**Name_Not_Found** · 2018/05/17(木) 22:02:15.20

一旦代入したsを更新し続けるのも良くないよ

**Name_Not_Found** · 2018/05/17(木) 22:08:05.80

全部const使えってか?

**Name_Not_Found** · 2018/05/17(木) 22:09:24.93

それが良いと思う

**Name_Not_Found** · 2018/05/17(木) 22:26:25.10

>>550
それは確かだが、昔からシリーズとしてはsを外に出すのが正解だな

**Name_Not_Found** · 2018/05/17(木) 22:37:26.27

>>533は数字以外が来たときに壊れる一番ダメなやつじゃん

**Name_Not_Found** · 2018/05/17(木) 22:43:15.75

変数の異目的の再利用が、コードの見通し上よろしくないのは知ってるが
再代入も追記追加変更もNGというのは初めて聞いたな

**Name_Not_Found** · 2018/05/18(金) 03:15:41.51

前から気になってたけどconstの変数は再代入するとエラー出るけど
const obj={}みたいにオブジェクトにすると中は再代入しまくりなのが混乱するのですが
これはobjectとかarrayはconst宣言しない方がいいってことですか？

**Name_Not_Found** · 2018/05/18(金) 03:53:08.93

他のところでうっかりvarで再定義再代入されないだけと考えたほうがいいってこと

**Name_Not_Found** · 2018/05/18(金) 05:49:13.18

>>556
const房というなんでもかんでもconstにすればいい、と考える極端な人がいるらしい
基本、気にしなくてOK

**Name_Not_Found** · 2018/05/18(金) 06:00:17.51

const宣言された変数の中身がオブジェクトや配列だった時に中身の操作が可能なのは、なんで？
参照だから、って考えたら混乱しないし一応筋は通るけど、必然性はないよね

**Name_Not_Found** · 2018/05/18(金) 06:19:08.20

const には「再代入不可」以外の意味はないからね
プロパティの更新も禁止したいなら
Object.defineProperty とか Object.freeze

**Name_Not_Found** · 2018/05/18(金) 17:21:46.36

>>558-560
use strict宣言ではvarの代わりにconstを使う、みたいなのを見たのでてっきり変数宣言の主軸なのかと思っていました
>>561
なるほど（エラーは設定しないといけないみたいですが）そういう関数があるのですね

**Name_Not_Found** · 2018/05/18(金) 18:58:08.98

constを基本にするのは別に悪いことじゃないよ
必須かと聞かれると自分はletばかりだけど

**Name_Not_Found** · 2018/05/18(金) 19:35:55.40

TDZのクソ挙動が気に入らないのでvarです。
functionスコープで特に問題ない。
大規模開発するなら使うけど。
しないなら必要ない。不便なだけだぞ。

**Name_Not_Found** · 2018/05/18(金) 21:06:39.05

それ本当にTDZの挙動に不満持ってるのか？
再宣言禁止で
let a = hoge
と次の
a = fuga
が揃わないとかならまだ少し分かるが
定義場所前でのundefinedを期待する必要性なんてまず無いだろう

**Name_Not_Found** · 2018/05/18(金) 23:26:18.45

TDZは重宝してる

**Name_Not_Found** · 2018/05/19(土) 02:25:49.15

fromってどういうとき使うの・・？

var arr=['kyoto','oosaka'];
console.log(Array.from(arr, n=>`${n}-fu`).join(", "));
console.log(arr.map(n=>`${n}-fu`).join(", "));

mapでいいじゃん・・みたいな

**Name_Not_Found** · 2018/05/19(土) 02:34:37.26

配列風オブジェクトを配列に変換したい時に使う

**Name_Not_Found** · 2018/05/19(土) 13:30:15.68

[...配列風オブジェクト]でいいじゃん

**Name_Not_Found** · 2018/05/19(土) 17:23:00.70

>>569
配列風オブジェクトにスプレッド演算子が使えるとは限らないんだが

実際にEdgeでNodeListにスプレッド演算子は使えない。
古いChromeとかも使えないようだ。

**Name_Not_Found** · 2018/05/19(土) 18:31:51.94

古いブラウザ持ち出したらfromも使えないじゃん

**Name_Not_Found** · 2018/05/19(土) 18:36:57.78

fromはpolifilでできる
スプレッド演算子はbabelで使えるようになったとしても
NodeListでは使えない

**Name_Not_Found** · 2018/05/19(土) 18:55:29.64

だったらアロー関数もletもconstもトレイリングカンマも使うなよ

**Name_Not_Found** · 2018/05/19(土) 19:12:45.53

ぶっちゃけ必要が無い限り使わんなあ

**Name_Not_Found** · 2018/05/19(土) 19:38:52.11

>>573
babelで変換可能なものは使うよｗ

**Name_Not_Found** · 2018/05/19(土) 21:28:56.72

>>572
Symbol対応していればポリフィル可能だよ

NodeList.prototype[Symbol.iterator] ≒ Array.prototype.values
だから

**Name_Not_Found** · 2018/05/19(土) 21:32:49.32

>>568
iterableでない配列likeオブジェクトに対応できない

**577** · 2018/05/19(土) 21:35:39.93

>>577は>569宛

**Name_Not_Found** · 2018/05/20(日) 14:37:34.10

そういうツッコミは感心しないな
この靴は山を登るときに使う
いや、エベレストに対応できない
みたいな

**Name_Not_Found** · 2018/05/20(日) 16:43:05.57

熊の毛皮はあんまり寒いと役に立たないらしい。そういうときは犬の毛皮を使うそうだ。
なんだ、熊の毛皮つっかえねーな

**Name_Not_Found** · 2018/05/20(日) 17:29:49.09

じゃああんまり寒いと熊、絶滅しちゃう？

**Name_Not_Found** · 2018/05/20(日) 18:13:12.78

>>579
この場合は、Array.fromは不要というニュアンスへの反論だからおかしくはないと思うが

**Name_Not_Found** · 2018/05/20(日) 19:21:02.36

>>581
熊には体脂肪という毛皮をサポートするものがあるから大丈夫

**Name_Not_Found** · 2018/05/20(日) 19:37:28.85

俺にも脂肪はたくさんついているが？

**Name_Not_Found** · 2018/05/20(日) 20:40:15.97

髪の毛がついてないから寒さに弱いんだよ

**Name_Not_Found** · 2018/05/21(月) 18:45:07.49

暇つぶしに姉妹スレもよろしくおねがいします

+ JavaScript のお題用スレッド +
https://mevius.5ch.net/test/read.cgi/hp/1526666703/

**Name_Not_Found** · 2018/05/21(月) 21:14:25.17

スマートホン
スマフォ

**Name_Not_Found** · 2018/05/21(月) 21:18:23.96

セマフォ

**Name_Not_Found** · 2018/05/21(月) 23:41:14.10

全くの初心者ですが、
便利なウェブサービスを作りたくてJavaScriptを勉強しはじめました。

質問ですが、
ブログによく貼ってある、
カエレバ、ヨメレバってJavaScriptでできているのですか？

**Name_Not_Found** · 2018/05/22(火) 00:58:13.06

カエレバ.comそのものがどうやってできている、という意味なら
カエレバは、amazonや楽天などそれぞれのアフィリエイトパーツのルール（やテンプレート）に則った
アフィリエイトリンクを生成するサービス　>>589

カエレバ利用者がブラウザからアフィID情報など打ち込んだとき
動的にアフィリンクを生成する処理部分で、少なくともJavaScriptが使われている
（ようはjavascriptを使った穴埋め問題）

あとは各サイトのテンプレートを一旦kaereba.comのサーバーサイドで処理のため
ここではphpが使われてるぽい
仮に、アフィIDによって商品IDそのものもが変わってしまうなら
各サイトへリクエストする必要がある
（ただほとんどのアフィリエイトパーツは穴埋め問題みたいなテンプレだろうが）

穴埋め問題だけなら、フロントエンドだけのjavascriptで実現できるし
極端に言えば個人使用なら文字通りテキストエディタで穴埋め問題すればいいだけ

もしリクエストする必要があるなら
・各サイトのレスポンスがクロスサイトに対応している、ならjavascriptだけで可能
・対応していなければ、phpやNode.jsみたいなサーバーサイドでの処理が必要
・対応しておらずサーバーサイドも嫌なら、ブラウザなどフロントエンドの設定を変える
など、この辺りがポイント

**Name_Not_Found** · 2018/05/22(火) 01:28:37.89

質問ですが、
ブログによく貼ってある、
ビックカメラ、ヨドバシってJavaScriptでできているのですか？

**Name_Not_Found** · 2018/05/22(火) 02:24:52.55

質問ですが頭によく貼ってある

**Name_Not_Found** · 2018/05/22(火) 02:26:11.46

地毛にきまっとるだろーが

**Name_Not_Found** · 2018/05/22(火) 02:51:33.73

JigeScript

**Name_Not_Found** · 2018/05/22(火) 04:52:54.78

Selectionオブジェクトでは
始点をanchor、終点をfocusと呼んでいます
anchor＝碇なのは、選択開始部分を「そこに留める」ことからの発想だと思います
そう考えると、必ずしも始点が前、終点が後ろにあるとは限らないってことですよね？
文字選択というものは一般的にそうですし。
一方Rangeオブジェクトでは始点をstart、endと呼んでいます
この場合は始点が前、終点が後ろ（あるいは始点＝終点）と保証されているということでしょうか？

**Name_Not_Found** · 2018/05/22(火) 05:11:56.81

>保証されている
少なくとも仕様ではそう。
例えば start を end より後に設定しようとすると end も変更される

**Name_Not_Found** · 2018/05/22(火) 05:20:24.05

>>596
そうなのですね
ありがとうございます

**Name_Not_Found** · 2018/05/22(火) 06:06:14.54

そもそもLtoRとRtoLが交じってることもある文字列で頭と尾を一般に定義することは出来ない
一応の挙動は決まっていても人間の尺度で保証されていると考えると痛い目にあうぞ

**Name_Not_Found** · 2018/05/22(火) 07:11:24.49

> そもそもLtoRとRtoLが交じってることもある文字列で頭と尾を一般に定義することは出来ない

どちらでも、頭は上で、尾は下だろ。

**Name_Not_Found** · 2018/05/22(火) 07:16:35.64

RtoLって言っても、要素の前後関係が変わるわけではないのでは？
たとえばrangeの先頭から末尾まで舐める処理は、LtoRだろうがRtoLだろうが同じように動作しますよね

**Name_Not_Found** · 2018/05/22(火) 09:08:41.33

いずれにしても、見た目上は左が前で右が後だけど、ここでいわれる「前」と「後」は前(previousSibling) と後(nextSibling)？
DOMノードレベルとブラウザに描画されるレベルでは、前後の定義が変わるのでは？

**Name_Not_Found** · 2018/05/22(火) 10:44:30.80

RtoLで２要素跨いでる場合はどういう順番になるんだろう

**Name_Not_Found** · 2018/05/22(火) 13:28:48.90

>>601
なに言ってるんだ？先に現れたのが前だろ

**Name_Not_Found** · 2018/05/22(火) 13:35:57.83

先って？

**Name_Not_Found** · 2018/05/22(火) 14:05:37.24

メモリアドレスの小さい順だが？

**Name_Not_Found** · 2018/05/22(火) 19:04:47.97

ファイルにしろDOMにしろ本質的にはシーケンシャルなのですよね