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

**デフォルトの名無しさん** · 2018/02/18(日) 16:48:01.14

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

前スレ
+ JavaScript の質問用スレッド vol.124 + [転載禁止](c)2ch.net
https://mevius.5ch.net/test/read.cgi/tech/1427008785/

（ライブラリ禁止条項は、多数の意見によって廃止されました。ライブラリの質問もOKです）

**690** · 2018/05/07(月) 23:23:32.41

JavaScript は、Ruby よりもずっと難しいから、
先にRuby やって、無料のRails チュートリアルをやれば、
MVC, web アプリの作り方がわかる

しかも、Rails以降の、多くの言語のフレームワークの基礎になっているから、
Railsを勉強していると、どの言語でも作れるようになる

他の言語でも、フレームワークを、Railsと同じように作っているから、応用できる

DB, Linux コマンド、環境構築も学べる

HTML, CSS, JavaScript, SASS,
Bootstrap などのCSS フレームワークも学べる

しかも、Rails以降の、どの言語のフレームワークにも通用する。
例えば、Node.js + Express Generator とか

**デフォルトの名無しさん** · 2018/05/07(月) 23:29:49.08

はいウソです。RailsやってもReactやAngularはわかりません。
所詮Railsはサーバーサイド用のフレームワークですからね

**デフォルトの名無しさん** · 2018/05/07(月) 23:33:34.70

>>689
電卓アプリを作りたいので、HTMLには数字や記号のボタンを押す処理だけ書いて(ボタンを押すとJSの変数に代入などな処理を行う)、
実際の数字の繰り上がり処理や足し算とかの処理はjavascript側で処理してるんですよね
単純にゴチャゴチャしてるHTMLファイルが嫌いなだけなんですけど…

理想としては、=を押した際に、計算する関数を呼んで、計算し終わったらそのままnode.jsに変数を渡したいです

こういう場合はXMLhttpRequestの方が良いんですかね？(全く存在を知りませんでした)

Express使ってます

**デフォルトの名無しさん** · 2018/05/07(月) 23:35:41.05

https://pastebin.com/7jEkzyww
console.log(req.body)の出力はこんな感じです
Nullオブジェクト？なので、そもそもうまくPOST出来てなさそうです

**690** · 2018/05/07(月) 23:48:28.50

'router.post('/', function(req, res, next) {
var formula = req.body.form.input.value;
console.log(formula);
res.end();
});'

前後を' ' で囲わないし、
'/' ではなく、'/post'

>req.body.form.input.value;
req.body['message']

<form method="post" action="/hello/post">
<input type="text" name="message">
<input type="submit" value="送信">
</form>

この場合、ファイル名は、hello.js

**690** · 2018/05/07(月) 23:52:32.84

YouTube のTraversy Media の動画を見てみ。
Express, Rails とか色々やってる

先にRuby やって、無料のRails チュートリアルをやっていないと、
Node.js + Express Generator の仕組みがわからないと思う

**デフォルトの名無しさん** · 2018/05/07(月) 23:58:21.03

>>695
上にも書いたけど多分bodyParser.text()が機能してない(てかtextで良いんだよね？)
ソースはrequire部分から貼ってもらった方が良いかも

**690** · 2018/05/08(火) 00:03:49.90

>>694
電卓アプリか

それなら、Electron (Node.js + Chromium) の方が良さそう。
VSCode も、Electron製

Electronではじめるアプリ開発
~JavaScript/HTML/CSSでデスクトップアプリを作ろう
野口将人・倉見洋輔、2017

**690** · 2018/05/08(火) 00:21:16.11

Express Generator なら、自動的に以下が書かれている。
var bodyParser = require('body-parser');

bodyParser.json()

もし、JSON なら、HTML のContent-Type ヘッダに、
text/json か application/json という MIME タイプも必要

YouTube のTraversy Media の動画を見てみ。
Express, Rails とか色々やってる

Node.js & Express From Scratch [Part 1] - Intro & Environment
https://youtu.be/k_0ZzvHbNBQ?list=PLillGF-RfqbYRpji8t4SxUkMxfowG4Kqp

これでわからないなら、先にRuby やって、無料のRails チュートリアルから勉強する

**デフォルトの名無しさん** · 2018/05/08(火) 00:25:00.88

>>698
ありがとうございます
githubのExample真似ただけなので、json形式でした
XMLhttpRequestでjson形式に整形したデータを送れば良いのですかね？
それとも、text形式にしたほうが良いんですかね？
https://pastebin.com/RNfTFFUE

>>699
今回はWEBアプリケーションの練習なので、デスクトップアプリはまたの機会にしてみたいです。

**デフォルトの名無しさん** · 2018/05/08(火) 02:14:30.98

XMLhttpRequestでjson形式に整形したデータを送る感じで動きました

XMLhttpRequestで送るときはxhr.open("POST", "/hoge")
routes/hoge.jsで受け取るときは
router.post('/', function())
ってややこしいですね…
このせいで2時間ほど頭悩ましてました…

**デフォルトの名無しさん** · 2018/05/08(火) 17:56:42.00

>>702
HTML内でのjavascriptをnodejsみたく扱えるライブラリ等を使わないなら
全然別物としてそれぞれ勉強したほうが良い

**デフォルトの名無しさん** · 2018/05/08(火) 19:01:14.60

>>703
それ何て言うライブラリですか？

**デフォルトの名無しさん** · 2018/05/08(火) 19:24:22.02

逆逆、
これからは統一するなら送信はfetch、受取はSW

**デフォルトの名無しさん** · 2018/05/08(火) 20:27:07.36

>>704
SuperAgent、Axios

ブラウザネイティブのFetchは、大人の事情で
すでに使い方が複雑になってしまったので
おすすめできない

**デフォルトの名無しさん** · 2018/05/08(火) 20:36:20.78

>>706
それはhttpクライアントライブラリです。
HTML内でのjavascriptをnodejsみたく扱えるライブラリとやらを紹介してください。あるんでしょ？

**デフォルトの名無しさん** · 2018/05/09(水) 12:42:52.67

fetchが複雑?
全くそんなことはないが

**デフォルトの名無しさん** · 2018/05/09(水) 12:44:04.59

JavaScriptのコメントで/**/って使わないと聞いたのですか、皆さんは気にしてますか？

**デフォルトの名無しさん** · 2018/05/09(水) 12:51:08.11

普通に使うが。
例えばAirbnbのスタイルガイドでは複数行コメントは//使うな/**/使えと書いてある。

**デフォルトの名無しさん** · 2018/05/09(水) 12:57:14.88

>>710
ありがとうございます
難しいですね…

**デフォルトの名無しさん** · 2018/05/09(水) 19:18:25.01

AndroidのWebViewで利用したいのですが、Googleなどの検索サイトを読み込んだ後に、JavascriptでKeyboardが出るのを無効にしたいのですが、どのような方法があるでしょうか？
キーボードの発火点である検索ボックスなどのInput要素を特定して、addEventListenerでフォーカスを登録し、
フォーカスイベント直後にblurを呼び出しフォーカスを外すなどの方法を考えたのですが,Input要素の取得がそもそもうまくいきませんでした。もっと単純な方法で、サイト全体でキーボードを無効にする方法などないでしょうか？

**デフォルトの名無しさん** · 2018/05/09(水) 19:20:04.83

ブラウザの開発者ツールを開いても
解析できないようにしたいのですがどうしたら良いのですか？
avgleというサイトみたいに

**デフォルトの名無しさん** · 2018/05/09(水) 19:24:56.61

え？ avgleに限らず解析できないサイトなんてないだろ

**デフォルトの名無しさん** · 2018/05/09(水) 19:29:20.70

ブラウザのツールバーからもいけるけど、
Chromeだと

ソースコードを見る・・・CTRL+U
デベロッパーツール・・・CTRL+SHIFT+I

**デフォルトの名無しさん** · 2018/05/09(水) 20:41:47.38

難読化ってことでは？

**デフォルトの名無しさん** · 2018/05/09(水) 23:29:02.17

MDNのRegExp.prototype.testに以下が追加されていることに今気づいた。

> exec() と同様に（またはこれとコンビで）、
> test() が同じグローバル正規表現インスタンスで複数回呼び出されると、前回のマッチの先に進むことになります。
> https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

対応してくれた人がいたのならありがとう。

**デフォルトの名無しさん** · 2018/05/09(水) 23:37:55.06

俺じゃないけどどういたしまして

**デフォルトの名無しさん** · 2018/05/10(木) 00:17:07.08

>>716,715
あ、そうです。難読化です。

デバッガが以下でとまってしまいません？

(function anonymous(
) {
debugger
})

**デフォルトの名無しさん** · 2018/05/10(木) 01:29:34.71

>>719
いや、止まるかけど解析はできるだろって話。
debuggerステートメントを入れてれば、そこでデバッグできるように止まるが
止まるのが嫌なら、デバッガのActivate break pointsを無効にすればいいし、
デバッガで止まっていても、ソースコード見れるし
いくらでもやりたい放題

**デフォルトの名無しさん** · 2018/05/10(木) 04:39:15.42

google map apiで地図を作ってるんですが、国内だけでマーカーを27000個ほど配置する必要があるため、クラスタリングしたいと考えてますが、
どのクラスタにどのマーカーを含めるかを、マーカー同士の距離から自動的に計算してクラスター化してくれるライブラリはないでしょうか？

**デフォルトの名無しさん** · 2018/05/10(木) 13:35:09.44

>>721
これじゃダメなんか？
https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=ja

**デフォルトの名無しさん** · 2018/05/11(金) 07:08:17.25

ブラウザゲームで特定のタグが出現したら音がなるような仕組みを作りたいんですけど
chrome拡張のjavascriptでサイト外のサウンドをならすことってできますか？

**デフォルトの名無しさん** · 2018/05/11(金) 08:19:04.38

>>723
https://stackoverflow.com/questions/32356613/chrome-extension-not-playing-sound-when-button-is-clicked

**デフォルトの名無しさん** · 2018/05/11(金) 09:01:53.27

>>724
.mp3のとこにＵＲＬをうめこんだら音でました
<audio>タグとかをうめこんでうんたらとかが必要かと思ってたらたった３行でよかったんですね
ありがとうございました

**デフォルトの名無しさん** · 2018/05/11(金) 12:45:37.29

１行でいいよ
a = new Audio()
a.src = url
a.play()
は
new Audio(url).play()
と書けるから

**デフォルトの名無しさん** · 2018/05/11(金) 17:59:04.27

varとfunction文を使わないjavascriptの入門書ってないですか？

**デフォルトの名無しさん** · 2018/05/11(金) 19:30:17.66

letとconstとアロー関数で作るってこと？

**デフォルトの名無しさん** · 2018/05/11(金) 19:37:44.27

>>728
classもfunctionは使わないし、
連想配列を使ったオブジェクトへの
メソッド定義にも必要ない

**デフォルトの名無しさん** · 2018/05/11(金) 20:40:43.55

ES2015入門　　で検索すれば山のようにありそう

**デフォルトの名無しさん** · 2018/05/11(金) 23:07:20.95

codeacademyがes6みたいなのでこれ使ってみます

**デフォルトの名無しさん** · 2018/05/11(金) 23:14:52.51

functionはthisとかargumentsが使えるし排除する積極的理由が思い浮かばないんだが

**デフォルトの名無しさん** · 2018/05/11(金) 23:36:23.57

馬鹿だからだろ

**デフォルトの名無しさん** · 2018/05/12(土) 00:43:23.02

thisはともかくargumentsはrest parametersでよくね？待ち望んだ本物の配列だぞ

**デフォルトの名無しさん** · 2018/05/12(土) 13:56:37.03

arguments.calleeが重要
function.selfメタプロパティにする案もあるが

**デフォルトの名無しさん** · 2018/05/12(土) 14:59:39.65

arguments.calleeは名前を付ければ不要
Strict Modeで使えない機能は要らん

**デフォルトの名無しさん** · 2018/05/12(土) 15:53:47.45

名前を付けないといけないと言うことが問題だろう
～すれば不要だなんて何事にも言えることだし
つうかES2015の著者も提案してることからも重要性は分かるだろう
function.sentのようにfunction.meとかで入るべきだよ

**デフォルトの名無しさん** · 2018/05/13(日) 09:29:47.91

> 名前を付けないといけないと言うことが問題だろう
何が問題？

**デフォルトの名無しさん** · 2018/05/13(日) 11:31:36.16

ES2015の著者？？

**デフォルトの名無しさん** · 2018/05/13(日) 12:04:56.38

>>738
無名関数に再起をするためだけに外にも分かる名前を付けないといけないのは問題だろう
そもそも名前を付けるに値しない、付けなくても良いような関数であっても
無理やり固有の名前を付けないといけないということなんだからさ
仮に名前が最初から付いていたとしても、super()のように関係性による参照は重要

**デフォルトの名無しさん** · 2018/05/13(日) 12:18:18.48

自分を呼び出したりプロパティ生やしたり
複雑なことするならちゃんと名前を付けるべきだと思うの

**デフォルトの名無しさん** · 2018/05/13(日) 12:21:35.42

>>737
> function.sentのようにfunction.meとかで入るべきだよ
arguments.callee 問題を回避する為には this 値束縛の例外機構が必要で関数呼び出しの処理に手を入れる必要がある
これは「arguments.callee 問題を知っている人にとっては」直観的な動作ではなく、分かりづらい

>>740
> 無名関数に再起をするためだけに外にも分かる名前を付けないといけないのは問題だろう
名前付き関数式はスコープが外に漏れないよ

> そもそも名前を付けるに値しない、付けなくても良いような関数であっても
それは発想力の問題であって、名前を付ける方がリーダブルコード的には正しいと思う
特に再帰関数は可読性を下げるので、名前はあった方が分かりやすい
jQueryに代表される「とにかく無名関数式を使え」な偏重的傾向は可読性とは正反対のポリシーでしかないので、好ましくないと個人的には思ってる
彼らの主張は「ショートコーディング最高！名前を付けるのは悪！」という感じでどうにも共感できない

**デフォルトの名無しさん** · 2018/05/13(日) 15:20:12.22

>>741
でも自分自身を呼び出すことが目的であって、例えば関数meを呼び出すことが目的じゃないからね
関数名meをmyに変えたら変更しないといけなくなってしまうし
superの例と同じくそこは抽象的な物があったほうがいいんじゃない？

>>742
普通の名前付き関数式は確かにもれないが、
アロー関数とかも「fn(()=>{})」の代わりに「let cb;fn(cb=()=>{})」とかにしろってことでしょ？
あと変数はできるだけ名前を短くして寿命（スコープ）を短くするのが良いと個人的には思うよ
ショートコーディング最高というのではなくてね、
昔のとある言語界のようにスコープが広くて説明口調の何十文字もある関数名が好まれていたものの対局としてね

汎用的な関数とか、関数の引数のような使われる範囲の広い名前は比較的きっちり決めるべきだけどね
そうでないものは、それこそ一旦途中計算をとっておくようなものはtempか、
スコープ狭くてそこの２行で使わないようなものならtでも十分

**デフォルトの名無しさん** · 2018/05/13(日) 15:55:10.12

>>743
結局、function.me で arguments.callee 問題をどう解決するの？

> アロー関数とかも「fn(()=>{})」の代わりに「let cb;fn(cb=()=>{})」とかにしろってことでしょ？
そんなことはいっていない
自分が主張しているのは名前付き関数式

> あと変数はできるだけ名前を短くして寿命（スコープ）を短くするのが良いと個人的には思うよ
名前を短くしても寿命は短くならない
同様に名前を無くすことで寿命が短くなることもない
それはただの論理のすり替え

**デフォルトの名無しさん** · 2018/05/13(日) 16:08:51.21

> アロー関数とかも「fn(()=>{})」の代わりに「let cb;fn(cb=()=>{})」とかにしろってことでしょ？
そもそも、これは再帰関数ではなく、コールバック関数

**デフォルトの名無しさん** · 2018/05/13(日) 16:11:38.32

ここで言う arguments.callee 問題ってどういうもの？

**デフォルトの名無しさん** · 2018/05/13(日) 16:28:09.92

>>746
>>742で触れたし、ぐぐればすぐに出てくると思うんだけど…
arguments.callee() における this 値が何かを考えれば、すぐわかる
彼は function.me() にも同様の問題がある事に気が付いてなかったような気がしてきた(実際、>742に反論してこなかったし)

**デフォルトの名無しさん** · 2018/05/13(日) 16:51:22.54

なるほど、ありがとう。

**デフォルトの名無しさん** · 2018/05/13(日) 17:50:15.21

>>744-747
だから例えばそうやって他に渡された関数がその先で自己呼び出しするためには
定義した場所で名前を付けて置かないといけないでしょ？
()で囲んだ即時関数にしろ、コールバックにしろ、式中でアロー関数を定義する場合は
宣言を別にしないといけないし不格好になるよという例だよ

それで結局、君はアロー関数中の使用なら必要性を認めるし問題は無いということでOK？
君がやけに拘るthis値もアロー関数は定義された場所のthis値で固定されるんだから
そもそもどのように参照がされようがthis値が変わったりはしないのは自明で
そこに何も新しいことや考えないといけないことは生まれない

そもそもアローでない関数に関してもメタプロパティなんだから仕様でどうとでもできる話
function.me()と読んだらthisがfunctionになるわけでもあるまいし
まあ自然なのはfunction.meというキーワードが自己関数を素朴に参照することだろう
つまりme()のようにfunction.me()とできればいいし、
me.call()のようにfunction.me.call()とできればいい

**デフォルトの名無しさん** · 2018/05/13(日) 18:38:44.63

>>749
> だから例えばそうやって他に渡された関数がその先で自己呼び出しするためには
だから、名前付き関数式なら自己呼び出しできると説明したよね？

繰り返すけど、
- 名前を短くしても寿命は短くならない
- 同様に名前を無くすことで寿命が短くなることもない
- 再帰関数は可読性を下げるので、名前はあった方が分かりやすい

> それで結局、君はアロー関数中の使用なら必要性を認めるし問題は無いということでOK？
アロー関数には名前を付ける機構があって良いとは思うけど、arguments.callee は必要性を感じない

> つまりme()のようにfunction.me()とできればいいし、
それが直観的でない事は>>742で説明した
拡張するなら、@callee() とかの方がまだわかりやすい
ただし、自己呼び出しなら「名前を付ける機構さえあればいい」
スコープを無駄に拡張する必要はない

**デフォルトの名無しさん** · 2018/05/13(日) 18:44:11.30

>>744で「自分が主張しているのは名前付き関数式」といってるのに、彼はアロー関数の問題に執拗にこだわるから論点が曖昧になってる
アロー関数の問題は「名前を付ける機構がないこと」
解決するには、「アロー関数に名前を付ける機構を作ってくれればいい」
関数式は現状維持で何の問題もない、以上

**デフォルトの名無しさん** · 2018/05/13(日) 19:08:29.05

console.log((n => {let fact = n => n ? n * fact(n-1) : 1; return fact(n);})(5));

**デフォルトの名無しさん** · 2018/05/13(日) 20:48:36.27

>>751
非アロー関数にこだわってるのは君の方でしょ
というか君の言い方を真似して言うと、
ただアロー関数の問題に気が付いて無かっただけでしょ

というかfunction.meが直感的で無いっていうのは
this周りの話だと思うけど、そのことについてはsuperを例に挙げたじゃん

直感的で無いと感じるのはただ単に君がメタプロパティに馴染みがないからでしょ
super.method()、new.target()としたときthisについて、
またはfunction.sentが採用されればそれについて知っていれば何も違和感なんて生じようがないよ

それにメタプロパティの良いところは、新しい予約語も記号も消化せずに済むところなんだから
@とかJSの残り少ない貴重な資源でしょ

**デフォルトの名無しさん** · 2018/05/13(日) 21:27:47.15

こっちでもアロー関数ネタやってんのかよｗ
向こうでも同じことを言ったがな
アロー関数は、functionの代替、短い書き方じゃねぇ。
関数を値のように扱うためのものだ。

基本は n => func(n) の形、=> の左の部分は他の書き方でもいいけど
=> の右側に { retun hoge } みたいに {} や returnを使おうと思ったら
それはアンチパターンだ

そんな複雑な処理をするためのものじゃねぇ
だから再起に使おうとか思うんじゃねーよｗ

**デフォルトの名無しさん** · 2018/05/13(日) 22:07:23.07

妄想納得くん向こうでミジメに敗退してるじゃんｗ
ソースは？ｗ

**デフォルトの名無しさん** · 2018/05/13(日) 22:11:17.68

>>754
少なくともお前は間違っていると思う

**デフォルトの名無しさん** · 2018/05/13(日) 22:22:40.53

アロー関数のほうが自然だから基本的にはアロー関数を使いたいね

**デフォルトの名無しさん** · 2018/05/14(月) 05:21:56.64

関数は昔から値として扱えるよね
アローは this の束縛が特徴だと思ってるが

**デフォルトの名無しさん** · 2018/05/14(月) 06:42:29.35

誤解されるから訂正するよ

× 値として使う
○ 引数として使う

**デフォルトの名無しさん** · 2018/05/14(月) 09:14:08.97

>>753
そもそもの発端は>>737の「名前を付けないといけないと言うことが問題だろう」に反論したこと
この文脈で名前をつける機構のないアロー関数に言及してると思う方が無理があるでしょ
アロー関数の問題には気が付いていたけど、論点を拡大させすぎると君は都合のいい部分だけ抽出して反論するから、あえて言及しなかったんだよ

**デフォルトの名無しさん** · 2018/05/14(月) 19:07:34.18

732だがまさかこんなに熱い議論になるとは思わなかった
軽い気持ちでargumentsを話題に出してしまって申し訳ない

**デフォルトの名無しさん** · 2018/05/14(月) 20:41:31.32

いいってことよ。なんでもおもちゃにするだけの話だしな

**デフォルトの名無しさん** · 2018/05/16(水) 08:52:28.96

ブラウザゲームのデータをよんでサーバーに記録するようなのを作りたくて
chrome extension で実装したんですがデベロッパーモードにしないで動かすにはどうすればいいんでしょうか
自分用につくったんですけど知り合いも使いたいみたいで導入ハードルをさげたいんですよね

あとプレーヤーごとにデータをわけて個別にマイページ表示したいので
送信するPOSTのなかにユーザIDなり暗号化したトークンなりをいれたいんですが
どうやって実装するのが簡単でしょうか

配布する chrome extension を共通にしてその中の post の内容を外からの変数でかえることってできるんでしょうか
あるいはプレーヤーごとに ID をうめこんだ extension ファイルを配ったほうがいいのでしょうか

**デフォルトの名無しさん** · 2018/05/16(水) 09:02:16.89

>>732
> functionはthisとかargumentsが使えるし排除する積極的理由が思い浮かばないんだが
その通りだと思う
アロー関数だけにしたら、this値束縛でいろいろと弊害が出てくる
- call,apply,bindが使えない
- addEventListenerの第二引数に非関数オブジェクトを指定しても無効

**デフォルトの名無しさん** · 2018/05/16(水) 11:51:28.93

>>763
googleに登録する（審査有り）
ChromeではないChroniumを使う
諦めてデベロッパーモードにする

ユーザーIDかなんかは乱数で作って保存しとけ
既にスレ違いだから気をつけろ

**デフォルトの名無しさん** · 2018/05/16(水) 12:08:44.49

回等ありがとうございます
chrome拡張の話はスレ違いなんですね
気をつけます

**デフォルトの名無しさん** · 2018/05/16(水) 20:43:11.69

スレ違いじゃないよ
今やブラウザ拡張もWeb標準技術の１つだから
https://browserext.github.io/browserext/

**デフォルトの名無しさん** · 2018/05/16(水) 20:59:52.14

ドラフトじゃん

**デフォルトの名無しさん** · 2018/05/16(水) 22:41:52.64

スレ違いじゃないならききたいんですけど
乱数で作って保存するっていうのはどこに保存すればいいんでしょうか？

識別する文字列を鯖側で乱数作成するにしても
ユーザがアカウント名として入力するでもいいんですが
配布する拡張機能側にうめこむ方法がわかりません

ユーザごとにIDをうめこんだ違うファイルを配るか
拡張機能内に何かしら入力欄を作って入力しないと無理ですよね？

**デフォルトの名無しさん** · 2018/05/16(水) 22:46:17.65

>>769
自分で読み直してみて, 何がしたいのかその文章から読み取ってもらえると思う？

**デフォルトの名無しさん** · 2018/05/16(水) 23:34:27.83

>>769
普通にストレージはchrome.storage.localとかで提供されてるけど。
エクステンションごとに保存先が独立して用意される。
ちなみにgoogle認証とかで識別したほうが楽じゃない。
乱数だとエクステンションをアンインストールしたタイミングでヒモ付が消えることになる

**デフォルトの名無しさん** · 2018/05/17(木) 02:10:24.80

>>770
拡張機能をインストールしてブラゲーページをみたとき
特定の画面でDOMを抜き出す　＋　ユーザ識別トークンを付与してサーバー送信

サーバー（PSP CGI)は受け取ったデータをユーザ識別トークンごとに保存

表示ページではユーザ全体の集計結果を公開してログインするとユーザごとの個別データが見られる

というイメージなんですけど
拡張機能側で毎回同じ識別トークンを知るor個別に作るにはどうしたらいいのかなって

PHPもJSも4月から覚えたばかりでウェブアプリつくるの自体がはじめてなので
認識が間違ってたらごめんなさい

>>771
わー　ありがとうございます！

localStrageっていうの localStrage.put() get() だけで使えたので簡単そう
初回アクセス時にクライアント側で乱数を生成してlocalStrageに保存して
localStrageから取り出してつけるだけでいけそうです

これ実態はメモリじゃなくてファイルになってるんでしょうか
PCの電源落としたりセッションやIPがかわっても毎回取り出せるのかな
有効期限のないクッキーみたいなもの？

google認証軽くしらべてみたんですけど理解できなかったので自分には難しそうです
サンプルコードいくつかみたけどどれも何かしら入力文字列があったので
ユーザは何も入力しなくてもサーバー側で固有のトークンを取り出せるんでしょうか

とりあえずlocalStrage使う方向ですすめてみます
本当にありがとうございました！

**デフォルトの名無しさん** · 2018/05/17(木) 08:24:04.09

>>772

oauthって、聞いたことない？
gmailは大体の人が使ってるからパスワード入力を省略できる。

**デフォルトの名無しさん** · 2018/05/17(木) 10:27:39.72

どうにもわからないことがあります
例えばHTMLの中に<a onclick="hoge()">と書いてあるとして
そのhoge関数はどのスクリプトにあるhoge()が呼ばれるんでしょうか？ブラウザでは同時にいくつものjavascriptが走っていると思うんですが

試しにGreasemonkeyでスクリプトfugaを作りそこからHTMLの適当な要素にonclick="hoge()"を追記して発火させてみると
ちゃんとGreasemonkey下のfugaスクリプト内のhoge()が呼ばれますが
ブラウザはどうしてhoge関数がGreasemonkey下のfugaスクリプト内にあると分かるんでしょうか？
動いている全てのスクリプトの関数名を走査しているんでしょうか
だとしたらhoge()とたまたま同名の関数が他のスクリプトにあったらどっちにいってしまうのか
確実にfuga内のhoge関数を呼ぶようにonclickに指定する方法はないのか
が分かりません…

**デフォルトの名無しさん** · 2018/05/17(木) 11:02:58.88

>>774
何がわかんないのかよくわからないな。
同時に幾つものjsが走っているというのはあくまでタブ単位の話
複数のタブにまたがってグローバルスコープは共有しないから大丈夫
でも同名の関数が衝突することはあるから確かに気をついないとダメだね。

**774** · 2018/05/17(木) 12:03:22.10

>>775
レスありがとうございます
他のタブの関数が呼ばれてしまうということは心配していないのですが
同じ１つのタブの中でもサイト作者が作ったJS、ブラウザアドオンのJS、GreasemonkeyのJS、と複数走っていますよね？
そこで同名の関数があったらどうなるんでしょう？
また確実に自分のスクリプトの中の関数を呼ぶ方法があれば知りたいです
またmin()とかmax()みたいにごく短くてありふれた名前の下位関数を作ることはよくあると思うんですが
関数名がブラウザには全部一緒くたに記憶されているんだとしたらそれすらも危険という気がしてきました
自作スクリプト全体を(function(){…})()で包んだとしても、先程の例のhoge()が呼べてしまうので
やはりmin()やmax()も宣言すれば全体から見えてしまう（上書きしている？）のでしょうか？

**デフォルトの名無しさん** · 2018/05/17(木) 12:30:50.49

Greasemonkeyは使ったことないのでよく分からないけど同一スコープで同名の関数が複数定義された場合後勝ちになるよ
あと現在のスコープに関数定義が見つからない場合１つ外側のスコープを探しに行くよ

**デフォルトの名無しさん** · 2018/05/17(木) 13:32:25.37

>>776
Browserアドオン。エクステンションに関しては別の処理系で動いているから名前衝突は起こさない。ただしDomだけは共有してる。

**774** · 2018/05/17(木) 14:00:11.16

>>777-778
ありがとうございます
そこで最初の疑問になるのですが
Greasemonkeyやブラウザアドオンのjsからdocumentの要素にonclick="hoge()"等と書き加えた場合、
いざページを見ていてユーザーがその要素をクリックした時は、ブラウザからはHTML（DOM)だけを見ているのであれば
hoge()がどこのスクリプトから書き加えられたか分からない（どのスコープのその関数を呼べばいいか分からない）と思うのです。
その時でもなぜちゃんとhoge()が呼ばれるのかしっくりきません
また確実に自分のスクリプトを呼ばせる方法が知りたいです

**デフォルトの名無しさん** · 2018/05/17(木) 17:35:57.36

>>779
その要素のaddEventListenerを呼び出して該当関数を渡せばいい

**デフォルトの名無しさん** · 2018/05/17(木) 21:07:32.64

>>779
どのスクリプトファイルかを判断する必要はない
グローバルスコープは共有されるからだ

**デフォルトの名無しさん** · 2018/05/17(木) 21:44:36.42

>>779
その書き方だとグローバル変数hogeかグローバルスコープに定義されているhoge関数が実行されるよ
どのファイルかを気にしているけれどJavaScriptはファイル単位でスコープが分かれるわけではないよ
ファイルAでグローバルスコープにhoge関数を定義してファイルBでbuttonのonclick属性にhogeを追加するとして、どちらのファイルも読み込まれた後にbuttonをクリックすればhogeは実行されるはずだよ

**774** · 2018/05/17(木) 22:40:53.71

ありがとうございます
まとめて書きます
ファイルA.jsとファイルB.jsの作者がまったく別の人でお互いの内容を知らず、
まず順番が来たファイルAがbuttonのonclickにhoge関数を追加してhoge関数の本体も定義、
次に順番が来たファイルBがimgのonclickに（たまたま同名の）hoge関数を追加してhoge関数の本体も定義した（内容は全くの別物）という場合、
buttonやimgをクリックした時にファイルAのhoge本体とファイルBのhoge本体のどちらが呼ばれるのか？という問題が分からないのです
関数名はグローバルスコープで全て共有されるとしたら後で定義したほうが勝ちになるというのは分かるのですが
だとするとスクリプト全体を(function(){…})()で包むということの意味は何になるのでしょうか？
包んだ変数名や関数名をグローバルスコープから隠すことだと思っていたのですが

**デフォルトの名無しさん** · 2018/05/17(木) 22:41:39.44

>>783
やってみ

**デフォルトの名無しさん** · 2018/05/17(木) 22:42:37.94

>>783
関数スコープでぐぐれ

**774** · 2018/05/17(木) 22:56:03.69

↑の補記
話を具体的にするために言い換えますと、
仮にファイルAはウェブサイト側のjs、ファイルBはブラウザアドオンのjsだとします
ブラウザアドオン側のjsの作者は、ウェブサイト側のjsで作って使っている関数名を全て調べて知っておく（そして衝突を避ける）
なんてことをするのは現実的ではないと思うのですが
どうやって衝突を避けるのでしょう？　という疑問なのです
ファイルAのjs内で呼び合っている関数ならスコープで保護されるのは分かるのですが
HTML（DOM)のonclick等に書いてしまった場合スコープ情報が抜け落ちるような気がするのです

細かい話ですが、要素のaddEventListenerに登録する場合も、そのまま関数名だけならスコープ情報を登録してくれそうな気がしますが
関数に引数を渡したくてaddEventListener("click","function(){hoge(a,b,c)}",false)のように登録してしまった場合はやはりスコープ情報が抜け落ちそうな気がするのですが
そんなことはないのでしょうか？

**デフォルトの名無しさん** · 2018/05/17(木) 23:11:50.85

どこをどう話せば良いか分からんし、スコープ情報ってなんや？っ感じだけど

前提として衝突を100%回避するのは無理
是非はともかくjQueryやlodashなんかは1文字に全てを押し込めて衝突を避けてるけど
サイト側が$を使っちゃうとそれまでの話

**デフォルトの名無しさん** · 2018/05/17(木) 23:55:51.71

window.jQuery = window.$ = jQuery;

jQueryのソースコードでは、windowの、jQuery, $ に、
jQueryオブジェクトを代入してる

この2つだけが、グローバル変数

**デフォルトの名無しさん** · 2018/05/18(金) 00:20:55.09

>>774
イベントハンドラーを、<a onclick="hoge()"> のように、HTML に直接書くのは、ダメ！
jQuery の、on とかで、JavaScript から設定する

モジュール管理は、Node.js が使っている、CommonJS とか。
ES6(2015) で、import文ができた

JavaScript, jQuery の質問は、
この板よりも、web制作管理板へ書き込んだ方が良い

そちらの方が、人が多い

**デフォルトの名無しさん** · 2018/05/18(金) 00:50:52.81

>>787,788の言う通り完全に衝突を避けるのは不可能だけど実際上ほとんど問題にならないよ
グローバルスコープで発生する名前の衝突を避けるには不要なオブジェクトをグローバルスコープに曝さなければいいんだよ
ライブラリではそのために特定の名前に全部詰め込んでそれだけをグローバルスコープに晒したりしているよ
あとはwindow.foo.barみたいに独自のネームスペースを切り出してその中だけを使うといったやり方もあるよ
javaが分かるならパッケージ名みたいなものだと言えば伝わるかな
(function(){})()の意味は無名関数の即時実行だよ
スコープの話と絡めると良くあるのは(function(global){var foo; ... global.bar=foo;})(window)みたいな使い方だよ
この例だとグローバルスコープにbarと言う名前でfooというオブジェクトを曝してるよ
あとはえーと、addEventListenerで登録するのは関数の名前じゃなくてFunctionオブジェクトそのものだよ
無名関数も登録できるよね
リスナーが実行されるときに名前で関数を探しているわけではないんだよ

**デフォルトの名無しさん** · 2018/05/18(金) 01:01:40.56

>>787
> 是非はともかくjQueryやlodashなんかは1文字に全てを押し込めて衝突を避けてるけど
> サイト側が$を使っちゃうとそれまでの話

jQueryもlodashも$や_をサイト側でも使っても問題ない方法を用意してるよ

jQuery.noConflict()
https://api.jquery.com/jquery.noconflict/

_.noConflict()
https://lodash.com/docs/4.17.10#noConflict

**デフォルトの名無しさん** · 2018/05/18(金) 01:04:02.60

大事なことを言い忘れたよ
functionで囲うのは関数定義がスコープを生成するからだよ