+ JavaScript の質問用スレッド vol.131 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【条件】期待する回答の条件を書いてください。(ex: jQuery不可, フレームワーク不可)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです >>766
処理分離したいし破壊的代入はなるべく避けたいじゃん？ 破壊的代入したって頑張ればできるだろ
ほんの少しづつ頑張ればいいだけだよ
小さいものを積み重ねても大きくはならない >>768
今回がそもそもfor-inとの対比の話だからな
値を列挙して利用したいというだけだから
配列をどう処理していきたいかみたいな一般論とは話が違う
つまりfor-ループの{}内の置き換えだから、それは素直に考えるとforEachでいいじゃないかと
列挙したい物を連続してフィルタリングしたりする書き方したいか？ということ そもそも、すべての属性を取得するような、
メタプログラミングみたいな設計自体がおかしい
もし、テストツール以外で、こういう設計をしていたら、おかしいと思え！ childNodes[n] や item(n) では最後の要素は -1 では取得できないってことでいいですよね?
n の変更でアクセスする方法ってないんでしょうか?
lastChildとかつうと位置が変わった時に書き換えるのが面倒なんですけど。 >>774
ありがとうございます。
別の質問なんですけど
table の tbody に入っているデータを
localStorageに保存したあとで
ページを開き直した後に
localStorageから呼び出して
同じ形式で再表示したいんですけどどうすれば良いんでしょう?
storage.data = document.getElementByID("toboyのID")
で保存して
appendChild(storage.data)
とかやってもうまく行かないんですけど
forループかなんかつかって1つづつ要素を createChild とかして appendChild() するしかないんですか? 訂正
storage.data = document.getElementByID("toboyのID")
↓
storage.data = document.getElementById("tbodyのID") >>778
プロパティ構文、ブラケット構文、メソッド構文とあるようなので問題ないようです。
>>777
あぁ、それ本に書いてたなぁと思って調べたら
オブジェクトはJSON.stingiy/parseつかえってかいてたので試したけど
駄目っぽいですね。
一つ一つデータをオブジェクトかなにかで保存して
それを取り出して一つ一つcreateElement/appendChildしていくしか無いっぽいですかね。
だれか妙案あれば引き続きよろしくお願いします。 >>779
知らんかった！恥ずかしい
>>780
こんなかんじでどうじゃろ
var storage = localStorage;
//保存
storage.data = document.getElementById("tbodyのID").innerHTML;
//復元
document.getElementById("tbodyのID").innerHTML = storage.data; >>781
あぁ、それ良いかもですね!
あとで試してみます。 LocalStorage って、HTML を保存するものじゃないだろ
どちらも文字列の、key : value 型だろ ふーん、じゃ>>781がダメならオブジェクトをJSON.stringifyして保存するのも禁止な。 イベントリスナ無視していいなら
innerHTMLを出し入れしてもただの文字列でしょ、問題はないんじゃね
なんか問題あるっけ ない。>>783がinnerHTMLの戻り値が文字列だと理解してないだけ。だからバカにされている。 普通、HTML タグなど、保存しないだろ。
なんで、そんな表示情報を保存するねんw
保存するのは、アプリに必要なデータだろ
key : value
アプリに必要な、データの項目と値 今回はtableの保存だからな
HTMLのままが駄目と言っちゃ
縦横長＋配列に分割することになるんだろうけど
そうなったらJSON化もあんまりスマートでないのでIDB使おうかとかも言えるしな
まあ、大きなアプリで沢山入出力するなら
そこ抽象化して丁寧にやるのもいいけど
簡素なものには適当な対応でHTML突っ込んで戻すくらいで良いんじゃないかと思うよ >>787
で？復元時にはバラバラにしたデータからまた元のhtmlの文字列組み直すのか？それとも一つずつcreateElement繰り返して挿入か？ｗ
どっちにしろバカなんじゃねーのオメー
えんぴつを使わないアメリカかよｗｗｗ >>789
でも君プログラムのアーキテクチャについて無知じゃん っていうか、たったそれだけのことで悩んでどうするんだって気がするけどねw
値からテーブルを作るコードはデータの部分を除いてたったの6行でできる。
（アロー関数を使えばもっと減らせる）
https://jsfiddle.net/1uopxycn/
var data = [
[{text: 1, colspan:2},{text: 3}],
[{text: 1},{text: 2},{text: 3}],
[{text: 1},{text: 2},{text: 3, style: 'color:red'}],
];
var rows = data.map(function(row) {
return $('<tr/>').append(row.map(function(attrs) {
return $('<td/>', attrs);
}));
});
$('#table').append(rows); スマートかどうか、仕様的に許されたことかどうか、この2つは別問題
1行で終わる話 テーブルの部分をコンポーネントにしてそっちに配列読み込みの機能を持たせるべきだと思う ネズミ倒すのに戦車が必要とか組織再編が必要とか言い出す兵隊、降格です。 $('#table').append(data.map(function(row) {
return $('<tr/>').append(row.map(function(attrs) {
return $('<td/>', attrs);
}));
})); つーかHTMLをそのままデータにすると柔軟性がなくなるよ。
後からHTMLをかえたくなったときとかね
テンプレートにデータを流し込んでビューを作るってことを
やっている人なら理解できると思う
そもそもデータとして参照する時HTMLを解析しなければいけなくなる
仕様的に許されているからOKと考えるんじゃなくて
後々のメンテナンス性なんかも考えらるようでなければダメ ちなみにjQueryの例を出したけどデータが多くなるとさすがに重くて
lodashとかにあるテンプレートエンジンの機能を使って
文字列として処理したほうが速い
attrsの部分がちょっと大変だけどね innerHTMLつかった書き換えはセキュリティ上よくないからあんま使うなってよんだけど そりゃどういう時どうして危険か理解できないなら使って問題ないか問題か自分で判定できないだろうから一律使用しないという方針にするしかないな。哀れｗ javascriptはセキュリティ上よくないから使っちゃいけないな
ある意味、真理ではあるが tableじゃ無くてflexboxにすると多少抽象度と、コードのシンプルさと、パフォーマンスが担保できると思う テーブルセルの幅の取り方の挙動をflexで再現できたらいいのになっておもうことがある
区切り線付きの横並びの要素とかで 基本的にアプリは、MVC で作る
Model(データ)と、View は分離させる。
View は、しょっちゅう変わるから、Modelは、View に依存させない
>>799
異なるドメインから読み込んだものや、素性の知れない者が作ったものを、
innerHTML で読み込んで実行すると、何されるか分からないので、危険
自分自身で作ったものだけで、ハッキングされていないなら、まあ大丈夫かな javascriptの知識一通り合ったらjQueryってすぐおぼえられるもんなん?
20時間くらいでいける? >>810
ただのライブラリだからすぐに覚えられる20時間もいらん。
本気で1時間やればもうDOM APIは使いたくなくなる。 DOM APIつかってループで繰り返し要素を作ったり変更したり
したことがあるならjQueryの簡単さに感動するだろうな 正規表現リテラルって
別に普通にシングルクォートで囲ってパターン文字列として書いてもいいんですよね >>815
そうだよ。ライブラリってのは普通何か目的があって
その目的をうまくやるために作られる。
なんにでも使えるライブラリとかそいういうのゴミだから >>781
できました。
ありがとうございます。
とりあえずはコレでいきたいと思いますが、
他の方の指摘にありますし
データ処理には興味あるので勉強としてデータを構造的に保存する方法も模索していこうと思います。
>>793
データは2次元配列に格納していけばよいこいうことでしょうか
コンポーネントというのはどういうことなんでしょう?
>>802
flexboxにするいうのは
<p>かなんかに各データポイントをいれて
display: flex; flex: columnにして
それを行方向に積み重ねていくって感じでしょうか?
>>808
JavaScriptデザインパターン
https://www.amazon.co.jp/dp/toc/487311618X/
この本に書いてそうなので読んでみます。
ヒントありがとうございます! 画像を真ん中に配置したいのですが真ん中に配置されずに困っています
var imgTag = document.createElement('img');
imgTag.setAttribute('src', fugafuga);
imgTag.setAttribute('title', hogehoge);
setAttributeを使用し画像を真ん中に設置する方法はありません出ようか？ >>818
setAttributeなら
style属性に
"margin-right:auto; margin-left:auto"
でいいんじゃない?
外部スタイルシートなら
cssに
.someName {
whatever: anything
}
JSで
imgTag.className ='someName' >>819
多分ID変わってます
ありがとうございます
頑張ってみます！ >>817
書名紛らわしいが、一般に「JavaScriptパターン」のほうが良書と評価されてるよ。ご参考まで。 macOS High Sierra 10.13.2
safari 11.0.2です。
実現したい機能：Youtubeの自動再生ボタン（動画を再生した後に次の動画に自動遷移する機能）をUserScriptで自動クリックしてオフにする。
Youtubeの自動再生機能はデフォルトではオンで、オフにする事もできるのですが、その設定はCookieで保存されるようです。
しかし私は普段、プライベートモードでブラウジングをします。
そこで上記の機能をTampermonkeyのUserScriptで実現しようとしました。
私はjavascriptに関しては完全な初心者なので、ググって出てきたソースを改変しましたが、機能しませんでした。
おそらく、的外れなことをしているんだと思います。
以下のソースについてアドバイス、ここがおかしい等のツッコミをいただけたら幸いです。
// ==UserScript==
// @name Youtube自動再生ブロック2
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
setInterval(function() {
var button = document.querySelector("style-scope ytd-compact-autoplay-renderer");
if (!button || button.style.display == "none") return;
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
button.dispatchEvent(evt);
}, 1000);
})(); >>822
>自動再生ボタンをUserScriptで自動クリックしてオフに
意図がわからん
ボタンを自動クリックしたら再生が始まってしまうではないか？
最近のブラウザは勝手に自動再生しないように環境設定できるのがあるぞ ツベのプレイヤーって特殊だよね
javascriptで操作できんのか 822です。レスありがとうございます。
>>823私の意図している”自動再生”は、ページを開いた時に再生ボタンをクリックをしなくても動画が再生される機能のことではなく、
動画を再生し終えた後に10秒ほどのカウントダウンがあり、さらにその後別の動画に自動リダイレクトされる機能の事です。
質問文がわかりにくかったようで、申し訳ないです。
スクショを用意しました。
https://imgur.com/a/UDsCL >>825
ほらよ。直してやったで
// ==UserScript==
// @name Youtube自動再生ブロック2
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
setInterval(function() {
var button = document.querySelector("paper-toggle-button[checked]");
if (!button || button.style.display == "none") return;
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
button.dispatchEvent(evt);
}, 1000);
})(); ついでにjQueryを使ったバージョンな。
覚えるとサクッとできるぞ。
// ==UserScript==
// @name Youtube自動再生ブロック2
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @grant none
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// ==/UserScript==
(function() {
'use strict';
setInterval(function() {
$("paper-toggle-button[checked]").click();
}, 1000);
})(); 補足しておくと最初のやつはセレクタがよく分からんやつだった。
適切と思われるものに直した後、checkedがついているときだけoffにするようにした
またjQueryバージョンは、buttonの存在チェックをしていないが、
jQueryっていうのは、セレクタで見つかった要素全てにメソッドを実行する（この場合はclick）
というものだから、要素が見つからなければ何もしないので存在チェックが不要になる なお、一行でも書ける
setInterval(() => $("paper-toggle-button[checked]").click(), 1000); 822です。
>>826,>>827,>>828,>>829
動作を確認できました。助かりました。
欲しい機能をさらって実現出来たら最高ですよね！
本当にありがとうございました。
Javascript勉強します。 document.querySelector("paper-toggle-button").checked = false
これでもいける?
createEvent("MouseEvents");
evt.initMouseEvent();
button.dispatchEvent(evt);
このあたり何やってるんだろう
質問者じゃないけど詳しい人教えて >>831
行けるかもしれないけど実装次第だろうね
まずpaper-toggle-buttonというタグ（カスタムタグ？）は
動き見てると非同期で表示されてる感じがする。
なので、ページ読み込んだすぐには存在しておらずsetIntervalで
1秒おきにチェックしてるおり、paper-toggle-buttonが
nullの場合になにもしないようになってる。
こういう所、jQueryは存在しなくてもエラーにならない設計なので便利
クリックは実際のマウスクリックをエミュレートしており、
実際にマウスでクリックしたのと同じ動きをする。
YouTube側の実装がcheckedだけを見てるなら、それで動くかもしれないけど
他にクリックされた時に何かしている可能性があるからクリックを
エミュレートするほうが確実
本気で解析すればわかると思うけど、こういうハックでそんな面倒なことしたくない
ささっと解決したいね。 やりすぎ防犯パトロール、特定人物を尾行監視 2009年3月19日19時7分配信 ツカサネット新聞
http://headlines.yahoo.co.jp/hl?a=20090319-00000026-tsuka-soci
この記事で問題になった通称やりすぎ防パトは、創価学会と警察署が引き起こしていたようです
掻い摘んで説明すると
・創価学会は、町内会や老人会、ＰＴＡ、商店会等の住民組織に関し、学会員が役員になるよう積極的に働きかける運動を
９０年代末から開始し、結果、多くの住民組織で役員が学会員という状況が生まれた
・防犯パトロールの担い手は地域の住民と住民組織で、防犯活動に関する会議や協議会には、住民組織の代表に役員が出席する為
防犯活動や防パトに、創価学会が間接的に影響力を行使可能となった
・防パトは住民が行う為、住民が不審者や要注意人物にでっち上げられるトラブルが起きていたが
創価学会はその緩さに目をつけ、住民組織を握っている状況を利用し、嫌がらせ対象者を不審者や要注意人物にでっち上げ
防パトに尾行や監視、付き纏いをさせるようになった
・防パトは地元警察署との緊密な連携により行われる為、創価学会は警察署幹部を懐柔して取り込んでしまい
不審者にでっち上げた住民への嫌がらせに署幹部を経由して警察署を加担させるようになった
・主に当該警察署勤務と考えられる創価学会員警察官を動かし、恐らく非番の日に、職権自体ないにもかかわらず
私服警官を偽装させて管轄内を歩いて回らせ、防犯協力をお願いしますと住民に協力を求めて回り
防犯とは名ばかりの、単なる嫌がらせを住民らに行わせた(防犯協力と称し依頼して回っていた警察官らの正体は恐らく所轄勤務の学会員警察官)
※これに加えて防犯要員が同様のお願いをして回る
・こうして防犯パトロールを悪用し、住民を欺いて嫌がらせをさせつつ、創価学会自体も会員らを動員し、組織的な嫌がらせを連動して行った
つまり警察署に勤務する学会員警察官、警察署幹部、創価学会が通称やりすぎ防犯パトロールの黒幕
詳細は下記スレをご覧下さい(現在スレが荒されてますので、テンプレと87の連絡先さえ確認して頂ければokです)
やりすぎ防犯パトロールは創価学会と警察署の仕業だった
https://rio2016.5ch.net/test/read.cgi/bouhan/1516500769/1-87 おいおい、、、、頼むからもうcreateEvent系は使うな
コンストラクタでスマートに作れるだろ clickイベントを発行するだけなら.
document.querySelector("paper-toggle-button").click()
でいける
jQueryではなく標準JavaScriptでサポートしてる
ただし<input type="image">の_xや_yを指定したいとかなら、
createEvent()で細かく指定する必要がある jq広めてどんな得があるというのか
本が売れるとか？アフィが捗るとか？ 変に謎関数を自作されるより既存のちゃんとしたライブラリ使ってくれる方が後の人が助かる >>836
イベントは
new Event(nameString,optionObject)
の形で作れ
createは非推奨 >>817-821
Stoyan Stefanov 著
JavaScriptパターン ―優れたアプリケーションのための作法、2011
オブジェクト指向JavaScript、2012
JavaScriptデザインパターン、Addy Osmani, 2013 >>842
JavaScriptパターン ＞ JavaScriptデザインパターン ＞＞＞＞＞ オブジェクト指向JavaScript >>838
jQueryはすでに広まってるよ
どんな特があるかは、広めて特があるんじゃなくて使うと特がある。
今回みたいなのはささっと実装できるという得がね
俺の得じゃなくて、使うみんなが得をする >>818
> var imgTag = document.createElement('img');
> imgTag.setAttribute('src', fugafuga);
> imgTag.setAttribute('title', hogehoge);
だと
$('<img>', {src: fugafuga, title: hogehoge});
ね？ >>843
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法
これは? グッドパーツは世界的に超有名な本だけどさすがに古いから読む場合は現在どうなってるか気を付けながら読んで The Good Partsなんて出たときから歴史を振り返る見て楽しむ本であって
それで勉強するような本ではない 配列に関しての質問いいでしょうか？
hoge[10].parentNode.insertBefore(elmDiv, hoge[10].nextSibling)
上記のような配列を指定して要素を追加する記述において、hoge[10]の部分を”一番最後の配列”に指定するメソッドは存在するんですかね？
配列の値が毎度変動するため、（１〜１０の時もあれば、１〜３０の時もある）
それができるとものすごく楽なのですが・・・調べてみてもあらかじめ配列の数が決まっている場合に最後の値を取得するメソッドしか出てこないんですよね。。 JSではlengthゲッタに副作用を持たせる事ができるし
ロジック的にhogeが正当な混じりけのないNodeListだと確認もする
保証された方法がないのでセキュアでない 本読んで勉強してたらXMLHttpRequestの項目が合って
コードをうって試して見るんだけど
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
というエラーが出てうまく生きません。
サーバーの概念とか全くよく分かってないのですが
コレは自分が今使ってるPCをサーバーとみなして処理とかできないってことなんでしょうか?
いまいちよくわかりません。
現在は自分のPCのあるフォルダにJSとHTMLを置いて
HTMLを同じ自分のPC上でクロムで開いています。 ローカル環境では自由にXHRはできない、特にChromeはその制約がややきつい
なぜなら、readme.htmlとか開いただけでPCの全データを外部に送信されたりしたら困るだろう？
セキュリティを無効にする方法もあるが、
基本的には「live-server」などの簡易ローカルサーバを立てることが推奨
ちなみに今ではXHRはもう使われない
Fetch APIを使う 単純にhtmlを
http://localhost/some_file.html じゃなくて
file:///C:/WEBFOLDER/some_file.html とかで開いてしまってて、
他方htmlの中では http://localhost/some_data.json にXHRしてる、・・・とかじゃねーの
当然だがしっかりCORSに引っかかる
まあ本読んで勉強してますなんかおかしいです、っつーなら
本出したとこに電話して聞けよとか なんとなく構造がわかりました。
live-serverで検索してみたけど難しそうなので今回は諦めます。
有益な情報有り難うございました。 いくらJSとはいえlengthが配列の長さじゃないかもしれないと疑いだしたらキリがなくない？ >>856
live-serverなんて何も考えなくても１分あれば準備できる最もお手軽なサーバーだぞ npm i serve -g
でインストール以降、
serve .
これだけ。 CORS だろ。
サーバーを立てていないと、異なるドメインにアクセスできない
Python, Ruby など、何かの言語に、最初から入っている、
サーバーを起動させて開発をやれば？ htmlとjsだけなんだから
Windows環境でも使えて日本語環境もばっちりの
apache httpdでいいじゃん・・・ > ちなみに今ではXHRはもう使われない
> Fetch APIを使う
これはウソ。前提としてXHRを使えば以下の問題は全て解決している
まずFetch APIにはIE11が対応してない。
Fetch APIに対応していたとしてもStreams APIに対応していなければ
プログレスの取得やキャンセルが実装できない。
https://developer.mozilla.org/en-US/docs/Web/API/Streams_API
Firefox、IE、が対応していない。Safariは不明
Chromeも59からなので少し前の機種は使えないかもしれない
また仕様上アップロードのProgressは取ることはできない
以上のような制限があるので、苦行の道を進みたい人ぐらいしかFetch APIを使ってない。
嘘だと思うのなら勉強サイト以外でFetch APIを使ってるサイトを探してみると良い
まず見つからない ブラウザ互換性は重要だが正直言えばそろそろIEは切り捨てても赦して欲しい
仕事ではそうもいかんけど 仕事でそうはいかないのをわかってるなら
どの辺で切り捨てようというのだ
趣味サイトならいくらでもお好きにどうぞじゃん 最初から読み込んでいるJavascriptで制御している開閉ボタンつきサブメニュー部分を
ここだけajaxで更新した時、その開閉ボタンが開閉しなくなるので
なんとかしたいんですが、何かいい方法ないでしょうか？
うまく何がしたいか言葉に表せないのですが、以下の記事とだいたい同じことがしたいです。
http://petitviolet.hatenablog.com/entry/20130418/1366288852 >>865
どうせ簡単な話だろうが、めんどくさい
サンプルコードかけ >>866
わかりやすい説明じゃなくてすいません
$(function(){
$("#menu")
.empty()
.load("./menu_output.php");
});
↑こんな感じで#menuだけ更新、
menu_output.php の中に最初から読み込んでいる
$("button").click(function () {
$("p").slideToggle();
});
で動かしてる部分があり、更新し直す前はトグルできるが
更新した後はトグルができない、更新後もトグルできるようにしたいということです ■ このスレッドは過去ログ倉庫に格納されています
