+ 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です）

**デフォルトの名無しさん** · 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で囲うのは関数定義がスコープを生成するからだよ

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

>>786
さっきも説明したと思うけど
>仮にファイルAはウェブサイト側のjs、ファイルBはブラウザアドオンのjsだとします
この場合は処理系が分離してるから。
関数名が衝突するどころかブラウザのアドオンからウェブサイト側のjs内の関数呼び出しはできない。
DOMしか共有してない。何度も言うけどDOMしか共有してないから

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

あと、質問するくらいだったら自分で検証環境つくって動かしてみたほうが早い。
2,3hで終わる話

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

>>793
DOM共有してるならなんとかなるな
mousemoveとかで呼び出したい関数をセットすればいい

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

ブラウザの拡張とかの場合は特殊ケースだからあんまり深く考えてもしょうがない
Greasemonkeyはセキュリティのために何度も仕様変更してるし

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

>>786
だから、関数スコープでぐぐれ
関数で括ったら、スコープが漏れない
グローバル変数は共有する必要がなければ使わないものだ

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

javascriptからtwitterにツイートするってどうすればできますか？

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

A・P・I！
A・P・I！

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

JSだけでTLを取得するのはあったんですが投稿するのが他の言語しかみつからなくて…

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

>>798
出来ると思うか？
悪意のWebサイト開設者が裏でJS回して「○○小学校に爆弾設置する」みたいな犯罪予告ツイートさせたらサイト訪問した奴の人生終わるぞ
だからTwitter Developer DocumentationのJSAPIにも載ってないし出来ない

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

他の言語がツイート出来るのは、Twitter開発者として公式サイトから認定されて、ツール越しに発言した内容を責任持ちますという取り決めがされてるから可能なだけ。
だからJS単体で裏で勝手にツイートさせる事は不可能

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

rest api使えば出来るよ。
consumer secret晒す必要あるけど。
こっそり訪問者にツイートさせたところがconsumer secretに紐付くお前が童貞されて罰を受けるだけ

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

>>801,802,803
特定のページをみはって特定の情報（DOM)がでたらツイートするBOTアカウントを作りたくて
訪問した人のアカウントで勝手にツイートするわけじゃないです
動作自体はローカルで動かすのでツイッターアカウントとパスワードｗｐソースにうめこんでも大丈夫なはず

他の言語でブラウザを経由せずにwgetみたいなことをやってもいいんですけど
ログイン認証があるのでログイン後に表示されるHTMLを取得する方法がわからないので
ブックマークレットだったりchrome拡張にできるjsが便利かなと

>>803
rest api で検索してみら node.js や npm のインストールがいるっていわれるんですけど
unix サーバー環境をもってないです…

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

node要らないよ。
nodeでやるにしてもunixサーバーなんか要らないよ。

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

>>804
もうちょっと具体的な機能の説明を頼む。
なんだかわからんけどパスワード類埋め込みだと悪用されるで。tweet自体はサーバサイドってやったほうが良い。

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

クロスオリジンの制約をどうするかって話じゃないの

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

BOTならサーバサイド, 常駐アプリのイメージ
JavaScriptならNodeが良いと思うけどね(Nodeすら導入出来ないなら諦めろ)

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

nodeは怖くないよ。
npmくらいは使ってんだろ。普段から

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

>>806
具体的な内容まではいえないですけど情報が変化するサイトがあって
その情報を分析して特定の反応がきたときにツイートするBOTを作りたいんです
FXや株価のシグナルをつぶやくみたいなイメージに近いかもです

>>808
ほんとはcronか何かで定期的にそのサイトにHTTPアクセスにいくサーバーサイドアプリが一番なんですけど
その情報を表示するのにログインが必要なんですよね

で自分がログインした後のページのHTMLを取得する方法がわからないので
ログインまではブラウザで手動でやって
あとはjsで一定時間ごとにreloadかけてgetElementByClassとかで情報を抜き出して
分析してツイートするみたいなことをしたいのです

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

すいません　まだわかりにくかったと思うので補足です

その情報を表示するサイトはぜんぜん他人のサイトでその上でJSを動かすって意味ではなくて
JSを動かすのは自分のブラウザ上だけで公開するわけでもないので
BOTのアカウント情報をうめこんでも大丈夫だと思います

JSから自分のつくったBOTアカウントにツイートさせることができればやりたいことはできそうなんです…

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

>>810
https://qiita.com/sand/items/b01d7d8f3d9c1642298b
headless chrome使えば大抵のことは自動化できる

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

>>812
ありがとうございます
確かにこれならやりたいことができそうなんですが

導入にコマンドライン操作がいっぱい必要みたいですね
ためしに最初の１行をプロンプトにうってみたけど curl がないっていわれた…
コマンドラインになれてないので exe クリックするか
ブラウザ上で完結する作業以外は自分にはまだ難しそうです…

せっかく教えていただいたのにすいません

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

分からんなら勉強しろよ
はっきり言うがお前のやりたいことはTwitterの公式APIドキュメント読めば簡単に実現出来る
自分で調べる気のない奴は向いてないからやめちまえ

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

確かにそのとおりなんですが
ツイッターもJSもそこそこ有名だから
JSからツイートするぐらいの関数なら誰かが作ってないかなと思って質問してみましたが意外といないものなんですね

時間はかかりそうですが自分でプロトコルから勉強して作ってみます
お答えいただいたかたがたありがとうございました
レベルの低い質問をしてしまって失礼しました

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

このスレに知ってる奴がいないだけで、ないはずはないので探してみるか他できくといいんじゃね
つーかツイートするだけでAPIの仕様まで理解しなきゃいけないとか欠陥言語もいいとこ
何のためのブラックボックス化だよ

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

npm search twitterくらい打てよ

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

今どきコードの断片をブログで共有って時代じゃないから。npm にいくらでもライブラリはある。でもnode使いたくないんだよね。
そもそもchrome extension作ろうと思ったら
yoとかである程度コードジェネレートしないとどうでもいい所で詰まるよ。
まぁいいけどさ。

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

「ツイートするにはこれ使ってね」とTwitter自身が言ってるWebAPIを知らずに何故ツイート出来ると思えるのか？
WebAPIの仕様を知らないといけないことが何故言語の欠陥になるのか？

>>816はひょっとしてWebAPIというものをご存じないのではないか？

**デフォルトの名無しさん** · 2018/05/19(土) 00:50:49.48

メール送るのにSMTP
HTTPリクエストするのにHttpヘッダを理解しろ
っていってるのと同じことじゃねーの？

**デフォルトの名無しさん** · 2018/05/19(土) 01:55:16.37

>>820
メールを自動化するなら少しは理解しとかなきゃダメだろ

**デフォルトの名無しさん** · 2018/05/19(土) 01:59:23.35

というか様々な用途で利用される標準化されたプロトコルとTwitter一社のWebAPIを比較することのバカバカしさをだな
あとは>>817と同じ

**デフォルトの名無しさん** · 2018/05/19(土) 02:18:16.90

ブラウザの自動操作・マクロなら、iMacros, Selenium WebDriver

Ruby で、Mechanize, Selenium WebDriver で自動操作できる。
大学や図書館にもログインできる

パスワードを入れて、ボタンを押す。
element.send_key "パスワード"
driver.find_element(:css, 'ボタン').click

Nokogiri で、スクレイピングもできる。
ほとんど、jQuery と同じ

公開されているAPI を使わないなら、webページを自分で解析しないといけない。
どのタグに、どういう情報があるのか、分析するのが大変

API を使わずに、5ch 専用ブラウザを作れないのも、同じ理由。
自分で5ch の仕様を解析するのが、面倒だから

**デフォルトの名無しさん** · 2018/05/19(土) 03:20:34.34

>>817
npmっていうコマンドがないっていわれます

>>818
使いたくないというかjs自体4月から独学で勉強はじめたばっかりで…
上位のフレームワーク的なものまで手だせる段階じゃなくて…

node.jsっていうのもよくきくので以前１回調べたんですけど
サーバー側で動作するjavascriptでスケーラビリティが必要な場合に
Apache+CGIのかわりにつかう速いウェブサーバー？って認識だったので関係ないと思ってましたが
普通にクライアントサイドjavascriptかくのにも必要な技術なんでしょうか

今回たまたま拡張機能使うのが楽そうだと思ってjsにしただけでjsはほとんどかかないので
知らなくてすむ技術なんだったらそれにこしたことはないんですが
話きいてるとそれを覚えてそのなかのツイッターライブラリ探したほうが速い感じなんですね

あのあといろいろ検索してみたんですが
javaやｐｈpならトークン4つセットしたあとツイート内容引数1つうけとるだけでつぶやける関数があって
5,6行でツイートできるサンプルが結構でてくるのに…
javascriptだけは複雑な数十行のサンプルしかでてこない…
レン鯖かりてCGIにポストしてCGI側でツイートするほうがはやいのかな…

>>823
iMacrosって調べてみたら
>条件分岐などの操作ができない。
ってかいてあったんですけど単に操作記録してループ再生できるだけでは？
プログラミングの知識が必要ないってあるんですけど
HTMLを読んだりができないとやりたいことができない気がします

というかwebの解析自体はできててツイートしたい文字までは用意できてるんですよね…