+ JavaScript の質問用スレッド vol.137 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
※前スレ
+ JavaScript の質問用スレッド vol.136 +
http://mevius.5ch.net/test/read.cgi/hp/1542707959/ ■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける＝荒らしです ■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 https://w3techs.com/technologies/overview/javascript_library/all
w3techsによると2017年1月の時点で71.9%のサイトがJavaScriptのライブラリとして
jQueryを使用していることが判明し、それ以降もシェアの増加が続いていたが、
2018年4月〜2018年10月の約半年間で変化が見られず、ようやく73.3%〜73.4%で
増加が停止したようである。
しかしながら、減少の傾向は見られず、マーケットシェア（JavaScriptを使用しているサイトでの使用率）
https://w3techs.com/technologies/history_overview/javascript_library は97.2%を
示していることから、jQueryからの移行が始まったと言うより、上げ止まりであると考えられる
jQuery以外では、この1年でBootstrapが2%程度、Underscoreが1%程度増加している以外は
ほとんど変動はなく、期待されていたAngularは過去最高の0.5%から0.1%減少した0.4%に、
Reactは過去最高の0.6%から0.5%と大きく減少し、0.1%に下がっていることが判明した。
またいずれのライブラリも使用していないサイトは24.5%で
2017年まで減り続けていたがこの一年ではほとんど変化はない。
この状況が大きく変化するときは来るのだろうか？この先の動向が注目される React vs jQuery
jQueryはどんどん使われなくなってきている
https://i.imgur.com/enJqwJn.png >>14
お前はjQueryスレ行けや
こっち来んな！！ >>14
トレンド
https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%AC%E3%83%B3%E3%83%89
> トレンド（英語：trend）は、時代の趨勢、潮流、流行のこと。ファッション、マーケティング、
> 経済動向分析などの分野でよく使用される。統計学では、傾向変動を指す（#統計学用語）。
googleトレンドなんだから、今の流行を示してるに決まってるだろ >>15
何をそんなに怒ってるの？
>>16
ただの検索数だよ
クローラの割合、前年比、トレンドをあわせて考えると、
reactを使い始めて、検索しながら手探りで使い始めている層が多いということが考えられるね reactの0.1%って幾らなんでも少なすぎない？
と思ったけど個人サイトやペライチのサイトも考えればそんなもんか
ペライチサイトでもjQueryだけはとりあえず入れるからなぁ > reactの0.1%って幾らなんでも少なすぎない？
そこはそんなに重要じゃなくて、2018年に0.7%まで増えていたのが
2918年終わりには一気に0.2%まで減ってしまったところなんだよな
順調に増えてるなら、低くてもまだ出たばかりだって言えるんだけどさ
https://w3techs.com/technologies/history_overview/javascript_library/ms/y > 2918年終わりには一気に0.2%まで減ってしまったところなんだよな
900年ほど水増ししちゃったw
2018年の終わりってことね >>19
jQueryスレでやれカスブタ野郎！！！ >>21
Reactの話題をjQueryスレでやるっておかしくね？ｗ >>3
なぜjQuetyスレのテンプレを使う？
啓蒙活動は余所でやってくれ 質問
<span onclick="funca()">
<a href="abc >>24すみません途中で書き込んじゃいました。改めて
質問
<span onclick="funca()">
<a href="a">link</a></span>
というような状況で、linkをクリックした時にリンクを開く動作だけしてspanのonclickが働かないようにする
（伝播しないようにする？）にはどうしたら良いんでしょうか？ >>25
訪問したサイトにイベント付きのリンクがあり、
そのイベントを発火させないスクリプトをあとから実行したい
ということなら
a要素をspanから出して直後に挿入とか
span要素の親要素.insertBefore(span要素.querySelector('a'),span要素.nextElementSibling);
もっと簡潔に書けそうですが
https://jsfiddle.net/Lcn8orwv/ >>25
<a href="a" onclick="arguments[0].stopPropagation()">link</a> jQuery版
https://jsfiddle.net/hkL2jmds/
function funca() {
alert("funca");
}
$("a").on("click", function(event) {
event.stopPropagation();
}); >>27
ありがとうございます。バッチリいけました。
onclickの中のarguments[0]の役割について勉強になりました。なるほど。 「javascript stoppropagation preventdefault」で検索！ そらそうよ。
onclick="function(e) {e.stopPropagation();}"
って書くのと同じなんだからarguments[0]はイベントオブジェクト > onclick="function(e) {e.stopPropagation();}"
> って書くのと同じなんだから
それは保証されてんの？ >>33
同義じゃね？
無名関数で一度ラップされてるだけで >>38
それなら
onclick="void function(e){e.stopPropagation();}()"
と書くことになるけどこれはエラー。
この場合eもarguments[0]もundefined。 >>39
void演算子つくと、onclick属性の値はundefinedになっちゃ
…いま気づいたわ間違ってたわすまんこ
<a onclick=" arguments[0].stopPropergation(); ">
は
a要素.addEventListener('click', function(){ arguments[0].stopPropergation(); });
か
onlick属性の値は
addEventListenerの第二引数に渡される関数の中身だた arguments[0]に頼らざるを得ないのかよ
なんか気持ち悪いな >>41
そんな書き方は普通されないし、する必要もない
<a onclick="event.stopPropagation()">
がある >>42
グローバルにeventが置かれてるのは
IE、safari、chromeだけじゃね？
違ったっけ？ eと並んでjs側でも慣例的によく使われるとはいえイベントオブジェクトを勝手にeventという特定の変数名にバインドされてるのは更に気持ち悪いな。arguments[0]のほうがまだマシだわ。 あれってバインドされてるんじゃなくて
window.eventってのが最初からいて
全てで起こるイベントを拾ってるんだと思ってた テンプレートストリングってバックチックで囲むやつのことですか？ テンプレート文字列
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings
Template literal は、バックティック文字(` `) (grave accent)で囲む。
プレースホルダーは、ドル記号と波括弧、${expression}
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20." >>51
ありがとう、これですか
f-stringみたいで使いやすいですね
今はテンプレートリテラルと呼ぶのか テンプレートストリングからテンプレートリテラルに改名されてもmdnのurlは昔の名前のままなんだな。当たり前か… google maps APIで、マーカーに関連付けしたInfoWindowの内容を取得するにはどうしたらいいでしょうか？
具体的には、以下のようなマーカーアがある状態で、マーカーをクリックしたら、地名・タイトル・本文 を文字列として取得したいです。
var marker1 = new google.maps.Marker( { position: { lat:30, lng:135 }, label:'地名', icon:'icon.png', map:map });
var info1 = new google.maps.InfoWindow( { content: '<div class = "inf">タイトル<br><div>本文</div></div>' } );
marker1.addListener('click', function(){ info1.open(map, marker1); } ); タイトルのセレクターは、div.inf
本文は、div.inf > div
地名は、わからない アロー関数の前につけるvar, const, let
ってどれでもいいの？ let使うとif等のブロック内で定義した時、ブロックから出ると使えなくなる
その方がいい場面があればletだけど、多分内と思う
脳死でconstで良いと思う
ｖａｒはもう生涯使わんでいい >>58
>>59
ありがとう
varはデプリケーテッドなんですね
let はスコープ内だけで
varはglobal
constは定数 constはletとスコープは一緒
値を更新しないならconstが推奨される
アロー関数を変更することなんてまず無いんだからconst一択
どうしてもconstではできない時（少ない）だけletを使う アロー関数と関数宣言って使い分けがめんどくさい
なんでこんなクソごっちゃで仕様めちゃくちゃにしてるんだか アロー関数は当分使わないかな
なんか見づらいんだよな アロー関数は「関数である値」と考えればいいよ
見づらいのは関数だと考えているから。
例えば、 sort(比較関数） みたいな時
引数はsoft関数にわたす値のようなもんでしょ？
だから関数として見えるんじゃなくて
値として見えるように、ああいう構文になってるんだよ >>62
ついて来れない人達のために
仕方なく互換性を残してるんだよ まあ関数リテラルのシンタックスシュガーだけど実際は中の挙動が違うし当たり前だけど定義の前では使えない アロー関数の => {} の｛｝の仕様は無くして欲しかったね。returnも使えなくしてほしかった
=> の右側は式だけで十分 だからアロー関数と関数宣言の両方を使ってるソースみると、なんで統一しないの？ってなることもある
だけどこれは仕方のないことなんだよ
統一したいならfunctionを使うしかない => = function
こういう代入ができればいいのに >>68
目的が違うからだよ
・関数は宣言しておいて何処か別の場所で使う
・アロー関数は別の関数に値として渡すために使う
書き方を分けることで、どういう使い方をするのかを
読み手に読み取らせることが出来る 「使い方が違う」というのを理解せずに
単に「書き方が違う」とだけしか思ってないやつがいるんだよな >>70
>・アロー関数は別の関数に値として渡すために使う
渡すためだけにしか使えないわけじゃないんだけど、それはどこで誰が決めたの？ input検証にhtml5からrequiredプロパティが使えるようになったとのことで
それ試してるんですがvalidになったときの状態はどうやって判定したらいいのでしょう？
input[name="hoge"]がパターン^abcでvalidになるとして
if ($('input[name="hoge"]').value.match(/^abc/))
のようにとってしまっては
ただvalidとinvalidでスタイルを変更するだけの飾りになってしまうので
何かvalidになったときその要素に何かプロパティが設定されるのではないかと思うのですが
ちょっと調べてもわかりませんでした
ご存知の方教えていただけるとありがたいです すみません追記です
$('input[name="hoge"]')は$hogeとして
patternプロパティ参照して
if ($hoge.value.match($hoge.pattern))
ではとれます
if ($hoge.value.isvalid)
のようにとれるのが理想でプロパティ見てますが
っぽいのが見当たりません $('input[name="hoge"]:valid') でいいでしょ？
無駄なことしなーいｗ >>75
:の意味がよくわからず思考から除外してました
それでとれることを確認しました
Event.targetにも対応したかったのでそれをヒントに調べましたところ
checkValidity()メソッドでいけることがわかりました
$hoge.checkValidity()
どうもありがとうございました オブジェクト(変数)名を取得する方法を教えてください。
具体的には、以下のようにしたいです。
let variable1 = "";
let variable2 = [];
let variable3 = 12;
let list = [];
list.push(variable1);
list.push(variable2);
list.push(variable3);
for(let i = 0; i < list.length; i++)
{
alert(list[i].？？？); //variable1 variable2 variable3と順番に表示
} 長い
const variable1 = "";
const variable2 = [];
const variable3 = 12;
const list = [variable1, variable2, variable3];
for (const i of list) {
alert(？？？); //variable1 variable2 variable3と順番に表示
} listに入るものは変数名ではなく変数の中身だけなので無理 こんな感じで書く方法があれば行けるかもねぇ
for (arr) {
console.log(this.var_name);
} const variable1 = "";
const variable2 = [];
const variable3 = 12;
const list = {variable1, variable2, variable3};
for (const [key, value] of Object.entries(list)) {
alert(key);
} やっぱダメだわ大抵の処理系ではvariable1, variable2, variable3の順で出てくるれるが仕様では順序保証されてない eval使っていいならこんなのはどうじゃろ？
順序保証されたぞ。
const variable1 = "";
const variable2 = [];
const variable3 = 12;
const list = ['variable1', 'variable2', 'variable3'];
const map = list.map(name => [name, eval(name)]);
for (const [key, value] of map) {
alert(key);
} >>77
いずれにしても、変数名を文字列で渡さなければ、無理
const map = new Map([['variable1', variable1], ['variable2', variable2], ['variable3', variable3]]);
for (let [key, value] of map) condole.log(key) ちょっと趣向を変えてこんなのとかｗ
順序は保証されるし変数名を文字列で渡さなくてもいいぞ。
const variable1 = () => "";
const variable2 = () => [];
const variable3 = () => 12;
const list = [variable1, variable2, variable3];
for (const func of list) {
alert(func.name);
} そもそも変数名を取得する設計を見直した方がいい
何がしたかったのかをもう一度よく考えてみるべき >>81
個別に変数を作らなければ良い
const map = new Map([['variable1', ""], ['variable2', []], ['variable3', 12]]);
for (let [key, value] of map) console.log(key); Mapリテラルまだー？
今の初期化構文、わかりづらいしリストに型の違う値入れなきゃで気持ち悪い それならMap使う必要まったくなくない？
const list = [['variable1', ""], ['variable2', []], ['variable3', 12]];
for (const [key, value] of list) {
alert(key);
} variable3の値だけ欲しいときに毎回find走らせるの？ あー、まぁ「variable3は必ずlistの3要素目である」っていう前提下ならlist[2][1]とかでいけるのか
自分がそういう書き方しないから抜けてたわ >>97
keyはユニークなんだから、配列と違って全体検索ではないでしょ？ ■ このスレッドは過去ログ倉庫に格納されています
