+ 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にして見えないようにしてください。文句をつける＝荒らしです >>300
ありがとうございます。自分の納得は低レベルでした。
めちゃくちゃわかりやすかったです。精進します。 >>300
お前それforEachさんの中でもおんなじこと言えんの？ forEachとか使わないな。
普通はmapとか使う 個人的にforEachは名前をforやeachにしなかったのが結構な失敗だと思ってる >>304
普通って何よ。お前の普通なんて知らんがな。
javascriptで副作用だけ使いたい場面なんていくらでもあるだろう。
console.log使って例示すると、
['foo', 'bar'].forEach(item => {
console.log(item);
});
map使うってお前…これをお前は
['foo', 'bar'].map(item => console.log(item));
と書くのか？
[undefined, undefined]なんて生成してなんに使うの？
なんでもかんでもmapはダメだろ。それぞれ想定されてる用途がある。
あとアロー関数の{}にreturn必須とか嘘教えんな。
複数の文を書くなと言うのもどういうことだ。
ちょっとしたcompare function書くとき、読みやすさや入力値チェック処理などで複数行になったらアローじゃなくてfunction(){}使えってこと？
どんなオレオレルールだ。わけの分からない縛りいれるのならアロー関数なんてやめたら。
['大', '小', '小', '中', '中', '大'].sort((a, b) => {
const order = ['小', '中', '大'];
return order.indexOf(a) > order.indexOf(b);
}); 普通こうやるからなぁ
console.log(['foo', 'bar']); おじいちゃん、配列の要素をそれぞれログするのと配列をそのままログするのは違うでしょ。
前者は
foo
bar
後者は
[ 'foo', 'bar' ]
になるでしょ。
ロシアのえんぴつ的なことが言いたいならそもそもブラウザのデベロッパーツール使えばいいでしょ。
でもそういう話じゃないから。 まあ普通にこうかくだろうな
何度もconst order = ・・・を実行するのは無駄だし
const order = ['小', '中', '大'];
const data = ['大', '小', '小', '中', '中', '大'];
data.sort((a, b) => order.indexOf(a) > order.indexOf(b)); >>309
ごもっともな指摘。
もっとちゃんとした例考えないとな… ちなみに最後の
data.sort((a, b) => order.indexOf(a) > order.indexOf(b));
は、order.indexOfを二回書くの無駄だと思わね？
lodash使うとこう書ける
_.sortBy(data, v => order.indexOf(v)); へぇー思想違うんだなぁ。
考えてみてもこの仕様で困る例が思い付かない。
素のsortでは表現できてlodashのsortByでは無理な比較仕様ってあるのかな 思想？ 違いがあるとしたら
まあ何かやりたいことがあって、それを実現するためには
どういうふうに処理したらいいか？と考える人と
やりたいことがそのままコードになってないと気がすまない人の違いかな
俺は「文字の小さい順に並び替えたい」と思ってるから
コードには「文字」「大小を求める」「並び替える」この３つぐらいしか
登場してほしくないんよ。人間の思考の通りのコードになって間違いが少なくなる
一方で、並び替えるには文字と文字をそれぞれ数値化したものを比較する関数を
ソート関数に渡せば実現できるという、やりたいことを処理に置き換えてからコードにするやつもいる
処理を考えてしまうから、こっちのやり方では冗長化してしまうんだよ。それが困ることだな >>312
あり得そうな気がするが、相当なレアケースじゃないかな。事実上困らない >>316
こういうこと？
https://lodash.com/docs/4.17.4#sortBy
var users = [
{ 'user': 'fred', 'age': 48 },
{ 'user': 'barney', 'age': 36 },
{ 'user': 'fred', 'age': 40 },
{ 'user': 'barney', 'age': 34 }
];
_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]] ライブラリ使う必要ない場面で
ここでしか見ないナントカってのを執拗に勧めるやつまだいたのか
害悪だなぁ ここでライブラリを使うって事は間違ってないと思うよ
ただsortByっていう名前での
結局ライブラリを覚えないと自明ではない振る舞いは好きじゃないし
それがこの一時で便利だとは思わない >>319
sort by というのは例えばRuby標準にも有るしよく知られた単語なんだよ
プログラマにとって、for といえば ループねって
わかるように、sort by というだけで何をするのか知ってるもの
それに対して、オレオレライブラリで勝手な名前を作ると困る
それが何をするのかわからない
同じ覚えることでも、一般的なものを覚えるのと
プロジェクト固有のものを覚えるのとでは、覚える価値が違う
lodashはよく知られたアルゴリズムをよく知られた名前で実装してるので
覚える価値が高い。たとえ使わなくても知っておいたほうが良いものばかりだよ 他の言語にあるって然程重要では無いと思うけどね
特に補完が弱い動的型付け言語のJSでは
いかに他のJS周りの標準と命名規則を揃えて
振る舞いや型を想像付かせるかが大事
JSにsortByのような文化は無いのだから
なんぼRubyやらにそれがあると言われても
多くのJSerはローダッシュのsortByと覚えることになるのよ >>322
> JSにsortByのような文化は無いのだから
世界が狭いな。
あんたはJSの世界に生きてるわけか
俺はプログラマの世界に生きてるんだよ。
JSはそのプログラマの世界の一地域にすぎない >>324
それは日本人に会った時世界の挨拶だからと言ってハグするようなもんだぞ >>326
それは的はずれだな。
今言ってる世界っていうのは、広さの話をしてる
JSの世界っていうのはプログラマの世界の一部 >>328
今は相対的な話をしているので、
プログラマの世界よりも○○の世界が広い言い方をしてくれない困る
そして○○が話と全く関係ない世界だとそれは意味がない JSerの価値観っていう話でさえ既に十分に大袈裟で広い話なのに
JS質問スレにプログラマの世界（しかも一部の>>324が好きな言語限定）とか持ち込まれてもな 好きな言語限定？
いろんな言語の知識を持っていると
好きな言語以外の話も持ち込むよ？
本当にあんた世界が狭いねｗ すんごく初歩的なことで申し訳なさでいっぱいなんですが教えて下さい
clickイベントリスナをつけた<button>や<input>があって
これをdisabled="disabled"やelement.disabled = trueでdisabledにしたとき
<button>や<input>をclickしてもイベントは発火しない
これ合ってます？この挙動普通？ >>331 見てて恥ずかしい奴だな もう口を開くな >>333
断るｗ いくらでも言うよ？見たくない、聞きたくないなら、
俺に何かをさせるんじゃなく、あんたが自分で行動しなきゃだめだよ 自演しつけえ
お前が低レベルなことはみんなわかってるからw >>318-322,324-331,333,334,336
とりあえずこれ全部低レベルな１人の自演 はい、はずれｗ
それはいいからどこが低レベルなのか
その理由を言ってみたら？
言えなきゃ言えないやつが低レベルってことだし なぜ自作自演だって見抜いただけで
俺様の世界ってことになるのか？ >>340
自演なんだろ？お前の中ではな
って言えば理解できるかい？ アジアではこういう考え方が主流なんだから狭い価値観に捕われるなって言うのと
その前にここは日本人による日本人のためのスレなんだから日本の考え方を深く学ぶべきって言うのと
アジア基準が常識とか中途半端で恣意的な価値観だなっていうヤジの３つに分けれてる 質問スレなんだから質問とそれに対する回答だけでいいんだよ
考え方とかどうこうはいらない
自分の考え方と違うなら「こういうやり方もあるよ」と自分なりの答えを書けばいい
どれを採用するかは質問者の自由 「考え」は書くな
「答え」を書け
ただし質問に書いてもいないライブラリやフレームワーク持ち出すのはただのバカだからNGだろ 書いてもいないライブラリやフレームワークが答えの場合だってあるだろ？
ってか答を知らないから質問する訳で
答を質問に書くわけがない お前らwshスレって落ちました？
質問しようとしたらスレッド一覧にない・・・ 関数へ引数の渡し方が、func(A)、func(B)、func(A, B)、の3種類（のみ）。
(A, B)の場合は共に実行。
関数内は、A、Bそれぞれ同じ処理。例えば$('#hoge-' + A).〜。
処理は長いのでif分岐は重複が多すぎ。
yobidasi(A);
yobidasi(A, B);
function func1(arg1, arg2){
func2(arg1);
if(arguments.length === 2){func2(arg2)};
function func2(arg){
$('#hoge-' + arg).〜;
$('#hage-' + arg).〜;
}
}
より簡単な書き方教えてください。 そもそもfunc(A);func(B);で良くねとは思うけど
function func(...args) {
for (let arg of args) {
// $('#hoge-' + arg).〜;
// $('#hage-' + arg).〜;
}
} > 関数へ引数の渡し方が、func(A)、func(B)、func(A, B)、の3種類（のみ）。
> (A, B)の場合は共に実行。
その(A, B)をやめろって話だな >(A, B)をやめろ
そうなのですが、すると
yobidasi(A);
yobidasi(B);
となり、yobidasiの類は20種類あるので40行になってしまいまして。 yobidasi(A), yobidasi(B);
で良いじゃん >>351
forループはオブジェクトのみ推奨って先生が言ってなかったっけ？ >>355
その「先生」は担任の先生って言う意味で素人だろｗ >>357
google先生だろ
SEO少しでもかじったのならすぐピンとくる >>358
オマエ馬鹿だろ JavaScriptって知ってるか？ > forループはオブジェクトのみ推奨って先生が言ってなかったっけ？
これがSEOと関係があるとでも？
ないない Objectのみ推奨ってのはfor-inのことだろ >>353
>>351でもいいけど、
とにかく君に一番必要なことは配列を覚えることだな js初心者です。
var accounts = {
'mail@address1': 'user1',
'mail@address2': 'user2',
...
'mail@address100': 'user100',
'mail@address n': 'user n',
}
このように別のプログラムで使用してるオブジェクト型の文字データがありましてそれを利用したいのですが
うまく行かないので教えてください。
オブジェクトのデータの登録数は不定の為、メールアドレスとユーザー名を1セットと考え総数をカウントしたいのと
n番目のメールアドレスとユーザー名を文字列データで取得したい。
全部を読み取って文字列配列にいれてもOKですし、n番目のデータは何と返すだけでも構いません。
例えば 登録総数111で100番目のデータを取得した場合
100/111 のデータは、ユーザーはuser100でアドレスはmail@address100です のように出来るとありがたいです。 スクレイピングのサイト巡回を自動化するスクリプトかいてて
テストでクロムの開発者ツールでいろいろためしているんだけど
ログインが必要なサイトで名前とかのフォーム入力まではできたのですけど
それをsubmitするほうほうがわかりません。
｢送信｣ボタンのセレクターからノード?オブジェクトを取得。
例えば var button = document.querySelector('セレクター')
それにbutton.submit()という感じでsubmit()をつけてみたけど↓みたいなエラーがでます
どうすればいいのでしょうか?
button.submit()
VM775:1 Uncaught TypeError: button.submit is not a function
at <anonymous>:1:8
とコンソールにエラーがでます 配列はfor かfor of
for in はオブジェクとって本に書いてた >>365
自分も初心者だとことわっておくけど
mapオブジェクト使えば?
マップオブジェクトの作成
var mail = new Map()
中身の追加
mail.add('name3','address3')
IDとの名前の対応表を作成
var id = {1:"name3"}
要素数の取得
var size = mail.size
console.log(size)
名前からアドレスの取得
console.log(mail.get('name3')) >>366
自己解決しました
formエレメントの要素オブジェクトにsubmitをつけるんですね >>365
Object.keys(accounts)でキーの配列を取得できる
総数が欲しいならObject.keys(accounts).length
ES2017からはObject.entries(accounts)が理想的
ただし順序は保証されない
可能ならオブジェクトは避けるべき >>370,373
ありがとうございます！
一歩先にすすめそうです <div ng-if="vm.isProgressBarShowing()" qa-value="{"label": 90,"percentage" :0.9}"
qa-id="jss-score" eo-round-progress="" round-progress-model="vm.roundProgressData"
round-progress-width="210" round-progress-height="210" round-progress-outer-circle-width="15"
round-progress-outer-circle-radius="95" round-progress-label-font="40pt Gotham SSm" class="ng-scope"><canvas width="210" height="210" class=""></canvas></div>
これから一行目のqa-valueの90を正規表現でstringを解析する方法以外で取り出す方法ってありますか?
obj.qa-valueとかobj.qa-value.labelではとりだせないのですが >>375
そりゃあるだろうけど、それってangularだよな？
angularのやり方でやれば良いんじゃないの？
まあ俺はそのやり方を忘れたけどなｗ
アレだろ？jsの変数にバインドされてるってやつ >>376
angularってやつなのですか。
聞いたことはありますが全く知らないです。
勉強しないといけないことおおすぎる。。。 obj.getAttribute('qa-value')でとれました!!!!
感動!!! とれるっていうのならそうなんだろうけどさ
angularのやり方じゃねーぞ？
それで良いのか悪いのか知らんけどさ
普通は正しくないやり方だろうな 勝手なやり方をしたら、ダメ！
フレームワークのやり方に従っていないのなら、誤動作を起こす
Angular を勉強すべし >>364
最初配列でやってたのですがA,値,B,値という形もあり、
また通しで見てるとABの方がどっち渡してるか一目でわかりやすいので変えました。
どうもでした。 >>380
jQueryもやりたいんだけど
AngularとjQueryどっちをさきにやればいい? 何を目指すかによる
JavaScript必須なページを作りたいならAngular 今一番やりたいのはスクレイピングで
次にデータ可視化なんで
サイトの仕組みの理解とスクレイピングのスクリプトかくためにJavaScriptの勉強初めたんだけど
jQuery使ってるサイトが多いのであとでjQueryもやろうとおもってたけど
JavaScriptの勉強一通りおわったら
Angurlarやってみることにしました
そのあとD3やるかな
ほんでひつようそうだったらjQueryやるかな
やることおおすぎ。。。 var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var r = s.match(/\<tag\>(.*?)\<\/tag\>/g);
console.log(r);
とすると結果は
["<tag>hoge</tag>", "<tag>poge</tag>", "<tag>fuge</tag>"]
になります
つまりグループ化した部分を取り出していません
gスイッチを使った場合はグループ化を使えないのでしょうか？
こういう場合どうするのがいいのでしょうか？ スクレイピングなら、Angular なんて関係ない。
君が、たまたま、Angular製のページを対象にしただけだろ
JavaScript なら、jQuery は必須
Ruby で、Nokogiri とか、
Selenium WebDriver, PhantomJS とか、
Chromium, Chrome のヘッドレスモードとか >>385
グループ化した部分ってどこ？
グループ化って何のこと？ >>385
jQuery を使え
$('tag').text(); >>387
(.*?)のことです
正規表現において一般的な用語だと思いますが 結局、jQuery でも、Ruby のNokogiri でも、
取得する要素を、CSS セレクターで指定するのは同じ
上はjQuery、下はNokogiri
$('tag').text();
doc.css('tag').text
xpath で指定するのではなく、CSSセレクターの方が、簡単に指定できる 正規表現では、データに親子関係のような構造があるものは、うまく取れない
<tag1><tag2></tag2></tag1>
このように要素がネストしていると、<tag1></tag2> が対応してしまうから
jQuery とか、Ruby のNokogiri で、
取得する要素を、CSS セレクターで指定する 失礼、(.*?)だけを取り出したいってことか
gフラグは正規表現全体で配列にする
ので、こんなのしか思いつかない
let s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
let regex = /\<tag\>(.*?)\<\/tag\>/;
let result = [];
while(s){
s = s.replace(regex, (...args) => {
result.push(args[1]);
return '';
})
}
console.log(result);
入れ子は考慮せず
そこまでやると複雑すぎてどうにもならない >>392
while(s)
じゃなくて、
while(regex.test(s))
のほうがいいかも
DOM（jQueryでもできるはず）で、
let div = document.createElement('div');
div.innerHTML = s;
let elements = div.querySelectorAll('tag');
// で、各elementsのtextContentを取得
というのもありかと
タグの入れ子は考慮せず String.matchで正規表現にgオプションをつけるとキャプチャが取れるのかどうかの話で答えは上の通り「取れない」
RegExp.execを(複数回)使うか正規表現をやめてHTMLパーサを使うかだが正直後者を推奨する var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
根本的に参照が間違っている HTMLタグならHTMLパーサーやXMLパーサーが使えるけど
正規表現はセパレーターがタグ（<>記号で囲まれた文字列）でない場合でも使える var resAry = [];
function replacer(match, p1) { resAry.push(p1); };
var oldStr = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var re = new RegExp('\<tag\>(.*?)\<\/tag\>', 'g');
// 第2引数は、コールバック関数
oldStr.replace(re, replacer);
console.log(resAry); // ["hoge", "poge", "fuge"]
String.prototype.replace()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace jsで初めてプロトタイプベースに触れたけど、最初クラスベースとの違いに混乱して悪態ついたりしたけど今じゃクラスベースより好きだわ。
js以外クラスベースが主流なのは大規模設計手法が確立されてるというエンタープライズ用途のためってことかな？
それにしてもプロトタイプベースのメジャー言語なさすぎじゃ… あ、お題はこれでいいんじゃないか？
var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var r = s.split(/<\/?tag>/g).filter(item => item !== '');
console.log(r); // ["hoge", "poge", "fuge"] ■ このスレッドは過去ログ倉庫に格納されています
