+ JavaScript の質問用スレッド vol.130 + [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
・回答者同士のレスは原則禁止(>>6を参照)
・ライブラリの話題の投稿(>>6を参照)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/ innerHTMLしたあとにaddEventListenerすればいいかと
むしろまだ存在していない(innerHTML前)要素にどうやってaddEventListenerしようとしたのか >>369
ボタンの一つ上の要素にaddEventListenerしevent.targetでクリックされた要素を取得し判別する clickイベントはwindowに対して1つだけでいい
あとはevent.targetで振り分け
というかボタン2とボタン3は元々ある状態にしておいて
スタイルのdisplay:noneをdisplay:blockなりに変更するだけでいいのでは >>369
要素が存在しない時にイベントを与えているからだろうなw
その辺りをチェック >>369
プログラムだけではないが、
HTML + CSS + JavaScriptの世界では
見た目はCSSで制御する
最初にボタンを3つ書く
<input class="btn" type="button" value="button1" >
<input class="btn" type="button" value="button2">
<input class="btn" type="button" value="button3">
見た目をCSSで制御(最初のボタン以外は非表示)にする
.btn + .btn {
display: none;
}
.btn.clicked + .btn {
display: inline;
}
ボタンが押されたら押されたいう情報(クラス)を自分自身に設定する
(JavaScriptはjQueryを使えば簡単に書ける)
$(document).on('click', '.btn', function() {
$(this).addClass('clicked');
});
実行サンプル https://jsfiddle.net/qz5fLy9y/
ちなみに押したら押されたという状態になって、その後変わらないものは
ラジオボタンを単独で用いれば表現できる。あとは見た目をCSSでボタン風にするだけ
つまりJavaScriptなしでもできるぞ
https://jsfiddle.net/qz5fLy9y/1/ addEventListenerではなくaddEventListnerしてるというオチに期待
エラーも見てないな 皆さんありがとうございます!
cssで隠しておくのと親要素から取得するの2つともで希望の動きができました
皆さんめっちゃ心強いです(*´ω`*) サンプルまで作ってもらって本当に感謝です
HTMLとCSSだけでもここまで動かせるなんて知りませんでした(;´Д`)
ちゅーかjsfiddleってサイト便利ですね
私が作ってる程度のものならatomよりこっちのが使い勝手いいかも(??????)?? jsdo.it で、HTML, CSS だけで、
ワニワニパニックを作った人を知らんのか?w HTML5ムーブメントを語る上で避けては通れない
CSSプログラミングを知らないとか教養がないと言われてもしようがないな
昔っからこのスレは知ったかが多かったが
今では知ったかもできないほんまもんの無知ばかりやな んなもん知っとるわ
あのお粗末なワニワニパニックを話に出したレベルの低さに対しての反応だろ
もっと教養を身につけた方がいいぞ 何が「知らんのか?w」だよ。
聞いてもねーのに糞しょうもない知識を自慢したいだけの馬鹿は黙ってろよ。 こいつ通勤中の赤信号にもいちいちキレてそうな奴だな windows版のchrome(バージョンは最新)で
SpeechSynthesisUtteranceの
rateを上げたら、再生出来ないばかりか、
ブラウザを再起動しないとその後再生できなくなる現象が出ています
自分だけでしょうか?
仕様によるとrateの最大値は10なので値は仕様の範囲内のはずなのですが
3にするとおかしくなります
(再生可能)
https://jsbin.com/wuteqewavo/edit?js,console
(rate=3、その後再生不可能)
https://jsbin.com/viriritali/edit?js,console >>387
自分もちょこちょこ試してるけど1年前からそんな感じだよ
そのAPIはセンシティブで上手くいくかはタイミングなんかにも影響する
OSやデバイスのシステムを借りててブラウザだけで完結してる範囲が少ないから
仕方がないのかもしれない
それでも最近は随分マシになった方
最初の頃はまともに動く確率のほうが低かった [ [1, 'c'], [2, 'a'], [3, 'b'], [4, 'a'], [5, 'c'] ]から重複を除いた abc だけを取り出すにはどうすればいいでしょうか? 1,2,3,4,5の数字のほうはどうでもいいのか? lodash便利だよ
https://jsfiddle.net/2etnxe05/
a = _.uniq(_.map(list, i => i[1]))
もしくは
https://jsfiddle.net/2etnxe05/1/
a = _.uniq(list.map(i => i[1]))
jQuery使ってるならこっちでも良いね
https://jsfiddle.net/2etnxe05/2/
$.unique(list.map(i => i[1])) nativeでも良いじゃん
list.map(a => a[1]).filter((v, i, arr) => arr.indexOf(v)==i)
Array.from(new Set(list.map(a => a[1]))) ぶっちゃけこれだけのためにlodash丸ごと使うことは絶対にありえない
その内部実装の関数1つだけ借りてくることはあっても そういう時に使いたいのが、これ、custom build
お客さんの要望に応じて必要な分だけをチョイスできる
オトクなパッケージ
https://lodash.com/custom-builds >>392
それ遅い。
https://jsfiddle.net/2etnxe05/4/
> list.map(a => a[1]).filter((v, i, arr) => arr.indexOf(v)==i)
lodashの3倍
> Array.from(new Set(list.map(a => a[1])))
lodashの6倍 配列の中のオブジェクトの中のプロパティ値の最大値をMath.max.applyで呼び出す書き方をご教授くださいm(_ _)m
配列はこんな感じです
var scoring=[
{'male':[1,0,0,0],'female':[10,5,3,0]},
{'male':[2,5,3,0],'female':[10,5,3,0]},
{'male':[0,0,0,0],'female':[10,5,3,0]}
]; >>396
> Math.max.applyで呼び出す
ってのが意味わからん。
スコアの配列を最大値に置き換えれば良いんか?
つまりこういうことか?
https://jsfiddle.net/a1p11fLt/
var scoring=[
{'male':[1,0,0,0],'female':[10,5,3,0]},
{'male':[2,5,3,0],'female':[10,5,3,0]},
{'male':[0,0,0,0],'female':[10,5,3,0]}
];
var s = _.map(scoring, row => _.mapValues(row, (v,k) => _.max(v)))
console.table(s) あー、すまん Math.max.apply を使うんだったな。
https://jsfiddle.net/a1p11fLt/1/
var s = _.map(scoring, row => _.mapValues(row, (v,k) => Math.max.apply(null, v))) 余計なコード(変数)があったわ。訂正
https://jsfiddle.net/a1p11fLt/2/
var s = _.map(scoring, row => _.mapValues(row, v => _.max(v))) >>398
大変申し訳無いです、質問の内容に不足がありました(;´Д`)
上記の配列から変数を使って特定の値を呼び出し、それが所属する配列の中の最大値かどうかの判定をしたいのです。
変数を使って値を呼び出すところまではできています。
例えば2列目maleの3を呼び出した時、それは[2,5,3,0]の中で最大かどうか?を判定するために、最大値である5を取得したいです。
よろしくおねがいします。
それから初心者すぎて_.mapとかその他もろもろの表現が初見で頭が沸騰してしまってます。
せっかく書いていただいたのに申し訳ないですm(_ _)m >>400
ary = scoring[num][sex] と置けば
num = 1, sex = 'male' のとき
ary が [2,5,3,0] になる
その内最大を得るには
max = Math.max.apply(Math,ary) もしくは
max = Math.max(...ary) >>401
できました!
ありがとうございます(*´ω`*) >>394
そういう問題じゃ無いんだよね
3種類10箇所とかなら分かるけど、ただ一つ_を使うのは変だし
それだけのためにライブラリ管理コストかけるのもね
キリも無くなるし
既に利用してる可能性が結構あるjQueryは分かるけど、
_は単発の質問にはそぐわないね >>395
コードが短いのはいいことだけども速さ求めるなら
おとなしくforと連想配列でやったらはやいんちゃう >>388
まだ不安定なんですね
ありがとうございました JSONのデータ構造を変えてから
$.getJSONで取ったデータがおかしくなるという問題に悩まされていましたが
原因はキャッシュでした
GETは通常、パラメータが同じ場合に同じものが返ってくるものですが
データ構造を変えるなどの仕様的な変更が反映されないと困ります
解決方法として、パラメータにタイムスタンプを付加するという方法がありますが
これで毎回別のGETにすることで、
キャッシュが異様に増殖してしまうのではないか、という危惧があります
どうなのでしょうか? >>406
ブラウザのキャッシュ管理のことまで気にしなくていいとは思うが
やるなら.htaccess等でヘッダーいじれば色々出来る
キャッシュさせないよう設定するとか逆にキャッシュさせた上で毎回確認だけはして更新時のみデータ受信する等 クリックすると広告ページが新しいウィンドウで開くのを開かないようにjavascriptで制御したいんですが、
何かいい方法ないですかね?
window.openが実行された時に、すぐページを閉じるようなやつでもいいんですが、リファラは空だしどうしようかなと。
Google extensionで作ってます。 >>408
uBlock origin 使えばだいたい防げるだろ?
それで足りなければTampermonkeyを使えば良い >>409
こんなのあったんですね
ありがとうございます。
>>410
ありがとうございます
調べてみます。 Underscore は、ライブラリ全体をロードする必要があるけど、
Lodash は、使う関数だけを、include できる
ただ最近は、ES5/6 に実装している、関数も多い
ライブラリにある関数を自作するのは、
ホワイトボックステストも必要だし、品質も悪い >>407
そこまでコントロールできたのですか
ありがとうございます promiseは非同期処理を同期的に書く方法ですが
非同期処理を実際に同期的にするにはどういう方法がありますか? >>414
取り敢えず全ての非同期関数がpromiseを返すように設計しとけばasync awaitで同期的に書ける
あと問題があるのがobservableやasync iteratorに当たるものだが
これはトランスパイラを使うか、while(await)テクニックで乗り切る
ちょっと悩ましい所 >>415
ありがとうございます
順次調べていきます ぶっちゃけpromise理解できないから騙し騙しやってるわ ローカル変数って
内部的には関数のプロパティとして実現されているのでしょうか? >>416
概観しましたが、すごくすっきり書けていいですね
generatorで同期的に処理する方法も調べたのですが、
これは本来そのために作られた訳ではない機能をハック的に使ってる感じで
美しくないと感じましたが
それに比べるとasync/awaitはキレイだと思いました プロパティは、プロトタイプチェーンをさかのぼって探索されるけど、
ローカル変数は、さかのぼらない >>418
関数実行時やブロック文に入る度にそのコンテキストに紐付いたオブジェクトのようなもの
globalやwith文中では本当のオブジェクトが使われる 分割代入と変数宣言を同時に行うことは出来ませんか? let [ a, b ] = ary
みたいにできるよ firefoxがshadowdomに対応してないんで似たようなことがしたいんですが
いいアイディアありませんか?
勉強のためにやるのでフレームーワークなどは使いません それって死んでもFxで動かないと駄目なの?
Fxも1年以内に実装されるだろうから、そのときには動きますで良いじゃん ES2015ではundefinedの上書きが出来なくなったようですが
属性の有無を調べるメソッドなり関数なりが追加されないのは何故ですか? Object.getOwnPropertyDescriptor( window, 'undefined' )
// { value: undefined, writable: false, enumerable: false, configurable: false } >>427
undefinedの上書きができなくなったことがどう関係するんだ?
undefinedの上書きができれば、属性の有無を調べるメソッドが
無くてもいいってことだろ? in演算子なんてあったんですね
ありがとうございます 画面構成が一貫したSingle Page Applicationを作っていました
ベースとなるHTMLは最初から記述されていて、
適宜要素を動的に操作していたのですが
異なる構成の画面が必要になりました
部分的な書き換えではおさまりません
そうなると最初の画面から完全に動的に書かなくてはいけないのか?
それとも今の画面をどこかに保存しておいて、処理が終わったらまた戻す?
とか色々考えていますが
こういうことが問題になったらそろそろフレームワークの導入を考えた方がいいのでしょうか? >>431
hasOwnProperty と使い分けよう >>432
スケールしないことを実感したら切り替え時だろう >>432
もう1個 別のSPA 作って
ShareWorker で状態を共有させる方法もあるんじゃないかな chromeとIEで確認しています
下記のような形でクリックイベントリスナーを設定しましたが反応はありませんでした
どこに問題がありますでしょうか?よろしくお願いします
Hoge.prototype.foo = function(){
var button = document.createElement( "input" );
button.type = "button";
button.value = "テスト";
button.addEventListener( "click", this.bar, false );
this.div.appendChild( button );
}
Hoge.prototype.bar = function(){
alert( "click" );
}; >>437
要素が生成されていないのにイベントを与えているから >>437
途中で送信しちゃったw
this.bar
って第二引数に与えると、実際にクリックイベントが発火したとき
thisになるのはevent.targetであってHogeインスタンスじゃない >>440
試しに下記の様にしましたが変わりませんでした
this.div.appendChild( button );
var func = this.bar;
button.addEventListener( "click", func, false ); >>441
変わってないよ
var A = this;
button.addEventListener('click' , function(){ A.bar(); } , false);
とか
これがベストとは言わんけど >>441
そのやり方でもthisになるのはevent.targetであってHogeインスタンスじゃない Function.prototype.bind() を使う Hoge.prototype.foo = function(){
this.div.appendChild(button);
button.addEventListener( "click", function(){
console.log( "test" );
alert( "test" );
},false );
}
そもそも発火しませんでした・・・ >>445
そんな中途半端に書かれてもわからんよ
this.divってなんぞや?とかとか
全部書いておくれ
https://jsfiddle.net/ 詳しいサンプルをありがとうございます
一旦最小構成でテストしてみたら最初のままで通用してしまいました
var Hoge = function( elementId ){
this.div = document.getElementById( elementId );
};
Hoge.prototype.foo = function(){
var button = document.createElement( "input" );
button.type = "button";
button.value = "ボタン";
this.div.appendChild( button );
button.addEventListener( "click", this.bar( this ), false );
};
Hoge.prototype.bar = function( arg ){
console.log( "arg is..." ); //
console.log( arg ); // object
};
var hoge = new Hoge( "test" ); // <div id="test"></div>
hoge.foo(); >>448
>button.addEventListener( "click", this.bar( this ), false );
これは間違ってるよ
第二引数に渡すのは関数
this.bar ← これは関数
this.bar(this) ← これは関数barを実行した返り値 訂正!訂正します
先の書き方だと第2引数が意図せずに実行されてるだけで本当は下記の通りですね
button.addEventListener( "click", function(){ this.bar( this ); }, false );
// this.bar is not a function at HTMLInputElement. >>450
>button.addEventListener( "click", function(){ this.bar( this ); }, false );
おちつけw
そのthis.barのthisは第二引数に渡した無名関数のスコープで
無名関数の外、つまりHogeのものじゃない
んでお手軽に解決するなら、Hogeのthisをいっぺん保存してこう
var A = this;
button.addEventListener( "click", function(){ A.bar( this ); }, false );
もっと根本的に解決するなら
Function.prototype.bind()
Function.prototype.call()
Function.prototype.apply()
あたりをググると良いよ >>451
その後色んなパターンを実践していましたが
最終的には、まさに一度thisを保存する方法に落ち着きました
(関数先でクラスのプロパティを参照する必要があるので)
スコープとbind()について落ち着いて調べてみたいと思います
みなさんありがとうございました JavaScript の、this は、コロコロ変わるから難しい。
bind を使わないと、拘束できない
jQuery を使えば、悩むこともない >>453
jQueryを使ってもそこは一緒
だけどjQueryだとクロージャーを使っても循環参照になりづらいのと
DOM要素のリストとして扱うという設計思想によって扱いやすいってだけ
でさ、お前ら何やってんの?
>>437の話だろ? なんでthisを保存とかいう話になってんの?
addEventListenerの第二引数にクロージャーなんか渡すから
話ややこしくなってるじゃん。 >>437のコードでだいたいあってるだろ
https://jsfiddle.net/rdeuvep2/
function Hoge(elementId) {
this.div = document.getElementById(elementId)
}
Hoge.prototype.foo = function() {
var button = document.createElement( "input" );
button.type = "button";
button.value = "テスト";
button.addEventListener( "click", this.bar, false );
this.div.appendChild( button );
}
Hoge.prototype.bar = function() {
alert( "click" );
};
var hoge = new Hoge("buttons");
hoge.foo(); んで、恒例のjQuery化w
なるべく元の形を保ったバージョン
https://jsfiddle.net/rdeuvep2/1/
function Hoge(elementId) {
this.elementId = elementId
}
Hoge.prototype.foo = function(){
$("<input>", {type: "button", value: "テスト"}).click(this.bar).appendTo(this.elementId)
}
Hoge.prototype.bar = function(){
alert( "click" );
};
var hoge = new Hoge("#buttons");
hoge.foo()
俺はHogeクラスなんか作らずこんなんでいいと思ってる
https://jsfiddle.net/rdeuvep2/2/
var attrs = [{value: "テスト1"}, {value: "テスト2"}];
var buttons = attrs.map(attr => $("<input>", attr).attr({type: 'button'}));
$("#buttons").append(buttons).on('click', 'input[type="button"]', function() {
alert( "click " + this.value);
});
>>455
アロー関数使ってやったぜ?w classを使って書いたバージョン
https://jsfiddle.net/rdeuvep2/3/
>>455
アロー関数つかってやったが、
>>454で書いたとおり、今回はアロー関数もクロージャーもいらない 補足
「今回は」アロー関数もクロージャーもいらない
今回の要件にthisがどうなるかってのが書かれていないから
this.barは今回は動くがthisは違っていると念の為に言っておく
いろんなサンプル追加
https://jsfiddle.net/rdeuvep2/6/ qiitaで記事うpしても叩かれない知識を身に着けたいんですが
JavaScriptという言語を学ぶための良書を教えてください その考え方は大間違い
人に意見を発信する以上は文句を付けられて当たり前
そしてそれは良いこと
お互い内外から叩き合ってきれいな球に近づくのだから
それを防ごうと言うのはトゲトゲボールか、スライムになってしまうのがオチ >>459
とりあえずサイ本
現段階のおまえさんのレベルも
おまえさんが書いた記事にツッコミを入れる奴のレベルもわからんから
それを数冊の本でなんとかするのは難しかろう JavaScript 第6版、2012、David Flanagan
Google などのプロの机に、必ず置いてある本 プロのJSerやWEBエンジニアならオンライン仕様書以外は必要ない
そういうのはJSの常識を知らない非JSネイティブプログラマ向けに用意されてる
それもES2015以降の今の時代に於いては、JSを歴史から学んでJS仙人を目指したい人以外には過去の有名な本という飾りでしかない 初心者はまずはMDN 「MDN ○○」でググる
そしてより詳しく知りたければMDNの各記事の下に仕様へのリンクが張ってある
徐々にそっちに移行していく let lastTimeSignal;
setInterval(fuction(){
let now = moment();
let nowMinutes = now.format('YYYYMMDDHHmm');
if (now.minutes()==0 && lastTimeSignal !== nowMinutes){
lastTimeSignal = nowMinutes;
/*処理*/
}
},1000);
みたいなコードがあります
moment()はmoment.jsです
現在時刻の分数が0の時に一度だけ実行する、ようは時報です
ですが、ごくまれに連続して複数回時報が実行されてしまうことがあります
lastTimeSignalが設定されるので排他的に処理されるはずなのに
何故複数回実行されてしまうのか分かりません
現象はchromeで確認しています
lastTimeSignal とnowMinutesをログに出力するようにしましたが
連続実行された時の値は全く同一でした
lastTimeSignalが設定されないまま
複数のインターバルが呼び出されている、としか思えません
処理は、何かと不安定なSpeechSynthesisUtteranceを使っているので
それが原因なのかとも思いますが
処理の前にlastTimeSignal = nowMinutesとすぐに代入しているので、
たとえSpeechSynthesisUtteranceに問題があっても排他処理まで失敗するのは奇妙です
関数の外の変数(lastTimeSignal)への変更が
すぐに反映しない、なんてことあり得ますか? >>468
あらためてログを確認すると
10/13 05:00:00.97
10/13 05:00:00.98
と、0.01秒差で連続実行されていました
1秒ごとに実行されるはずのインターバル処理が、
ほぼ同時に2回呼び出されていることになります
一体何故・・?
いま、ふと思い付いたのですが
不安定なSpeechSynthesisUtteranceの実行に更にsetTimeoutを挟めば
変数の変更まで不安定になることは防げるかもしれません ■ このスレッドは過去ログ倉庫に格納されています