+ 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にして見えないようにしてください。文句をつける＝荒らしです >新しいスレの内容の条件
>・JavaScriptだけを扱う（AltJSやBabelやTypeScript禁止）
>・ブラウザのDOM APIだけを使う（jQueryなどのライブラリやフレームワーク禁止）
>・サーバーサイド禁止（nodejsなど禁止）
これが、荒らしが作りたいスレだろ？
何も、コミュニティが交流できないように作っている
荒らしの言う通りやっていたら、スレが細分化されて、議論できなくなる
次スレからは、プログラム板のように、
スレを初心者向けと、普通用に分けてくれ 初心者用と普通用ということであれば話題の内容は一緒だ。
どちらもライブラリの話題も対象となる。 というと反対してくるんだろうな
結局ライブラリの話題を禁止したいだけ 初心者用は、主に言語の文法などが、わからない人向け。
普通用は、フレームワーク・ライブラリも含める
プログラム板もそうだし、これで良い また、初心者用のスレを勝手に立てて、ライブラリ禁止とか書いてる
こいつがいつもスレを一杯立てる、荒らしじゃないのか？ 初心者専用のスレがほしいって言ったから立ててやっただけだろ
あとは勝手にメンテしろや
俺は最初からいらないって言ってる 初心者って言ってもどのような初心者かわからないんだから
分けるんなら目的に応じて分けないと駄目でしょ
JavaScript.DOM勉強スレ（ただしライブラリ排除ではなく、あくまでDOMや標準APIから学んでいく事をモットーとした勉強のためのスレ）と
JavaScript解法相談スレ（JSをできるだけ深く学習する事なくライブラリやツールを駆使して簡単に問題を解決する事をモットーとしたスレ）
で分けよう
これまでの質問スレは終了 ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる
禁止事項を勝手に作って、スレを一杯立ててる、こいつが荒らし
今まで、Lodash厨が荒らしかと思っていたけど、荒らしじゃなかった。
誰が荒らしか、ようやく分かった >>87
勝手にスレ作って勝手に保守してろ
ここが嫌ならさっさとでていけ ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる
結局、スレのテンプレを勝手に変えて、禁止事項を勝手に作って、
スレを一杯立てている奴が荒らしだな
ライブラリ用スレとか、jQuery用スレとか、
スレを分割して、皆が議論できないようにしたのも、この荒らしか
皆、荒らしと会話しないように。
もし気付かず、荒らしと会話している人がいたら、荒らしと教えてあげて テンプレを勝手に変えた>>1も荒らしということだな
>>1を相手にしないように 既存の配列に他の配列を連結したいのですが、１発でやる方法はないでしょうか？
for (let sourceItem of sourceItems) destItems.push(sourceItem);
現状、ループを回しています。 新しい配列で良いなら
destItems.concat(sourceItems) JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。
https://qiita.com/takeharu/items/d75f96f81ff83680013f
指定した位置に一つ以上追加 - splice
非破壊的な結合 - concat
破壊的な結合 - push pushにこだわるなら
Array.prototype.push.apply(destItems,sourceItems);
あるいは
destItems.push(...sourceItems); 既存の配列を書き換えたいのです。要は破壊的結合で。
destItems.push(...sourceItems);
ああ、pushでそんな書き方できたんですか・・
>>28で教えてもらったスプレッド演算子ってやつですね。
ありがとうございます。 スプレッドって巨大な配列でやろうとするとエラーになるから嫌いなんだよな 配列長の制限値を超えた配列作ろうとすればそりゃエラーになるが
別にスプレッド関係ないわな こんな式を見たのですが、これは何ですか？
var data = ('' == 0 ? '' : ''); >>101
では、このコードを書いた人はどういう意図で書いたのでしょうか？
JavaScript専門家の方の推理を聞かせて下さい。 >>102
・あなたか「書いた人」が転記ミスしている
・「書いた人」が文法をよくわかっていない
文法エラーは関わった人に問題がある以外に考えられないので、第三者が推理するのは時間の無駄です。
大抵はあなたか「書いた人」が頭の中のイメージで転記しているだけで転記ミスしているケースが大半です。 >>101を鵜呑みにして書いてしまいましたが、文法エラーはないですね。
>>100は
var data = '';
と等価で>>100のように回りくどい書き方をする必要は全くありません。
説明用のコードか、難読化の一環なのか知りませんが、コードの意図は書いた人に聞く以外の方法はないでしょう。 >>104は
・あなたが転記ミスをしていないのなら
・「書いた人」が転記ミスしていないのなら
の条件付きの回答です。
その可能性を捨ててはいけないと思います。 >>98-99
var a = [0]; として Chrome62の場合
a.push(...a); を繰り返すとlengthが131072の時点で Maximum call stack size exceeded
a=a.concat(a); の場合はlengthが33554432の時点で Invalid array length
引数の問題だからスプレッド自体に問題が有るわけではないけどな jQueryが必要とされなくなってきたのは,Reactなどの他のフレームワークが登場したせいではなく,標準DOM APIが進歩したおかげです
https://www.ncaq.net/2017/12/02/00/00/01/
またなんか勘違いさんというかｗ、結論ありきさんというかｗ
標準DOM APIがいくら進歩したとしても、jQueryにかなわないんだよ。
それは基本的な設計方針の違いのせい
jQueryも標準DOM APIも、どちらもDOM操作をする。
"DOM操作をするならば"、標準DOM APIよりもjQueryの方が優れてるわけで
わざわざjQueryを捨てる理由はない
その一発逆転がありえるのがReactなどのフレームワーク案だよ
"DOM操作をするならば"、jQueryや標準DOM APIが必要
だけど "DOM操作をしないならば"・・・？
そうDOM操作がいらないフレームワークがでてきたから
JavaScriptフレームワーク導入可能な一部の業種においては
jQueryや標準DOM APIがいらなくなってきたという話
DOM操作がいるならば、これからもjQueryが必要だって >>100-105
式 ? a : b
3項演算子は、式が真なら a で、偽なら b だろ
var data = ('' == 0 ? '' : '');
式 ? a : a
式が、真でも偽でも、空文字を返すから、この式は無意味。
単に空文字を代入すれば良いだけ あー、まだ >>100の答え出てなかったのか？
var data = ('' == 0 ? '' : '');
これは最終的にこう書いてあるってだけ。そう最終的に
これだけじゃわからんのよ。
間違いかもしれないし意味があるかもしれない。
もしかしてソースコードはこうなっているかもしれない
var data = ('<?= $v' ?>' == 0 ? '' : '<?= $v' ?>');
$vに0が入っていれば
var data = ('0' == 0 ? '' : '0');
0なら空文字
var data = ('1' == 0 ? '' : '1');
1（0以外）なら1
var data = ('' == 0 ? '' : '');
空文字でも空文字
0の場合だけ空文字になる 訂正
var data = ('<?= $v ?>' == 0 ? '' : '<?= $v ?>'); もちろん、意味があるコードかもしれないとは言うが
無駄かつ良くないコードだとも言う
普通はこんな書き方はしない。
こんな書き方はしないが意味が無いとは言い切れない >>112
無駄なコードを意味がないコードと表現してるだけだろ
言葉遊びも程々にしろ >>113
「0だったら空文字にしたい」という要望があったとしたら
それを正しく実装しているわけで無駄ではないよ >>116
それは三項演算子ではなく、ただのif文だろ
それと「無駄かつ良くないコードだとも言う」に言及して反論してるのだが、前言撤回もここまで早いと信頼性ゼロだな >>117
少なくともifであることは認めたようだが
あんたにとって三項演算子とifの違いって何？ > var data = ('<?= $v' ?>' == 0 ? '' : '<?= $v' ?>');
これはやってることに意味があるが
無駄かつ良くないコードだろ
何を反論してるんだ？ >>118
質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら、話はここで終わりだな > 質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら
無駄かつ良くないコードだと言ったのは俺なんだが、
なんで俺が自分が行った言葉に反論しなきゃいけないんだ？ 無駄かつ良くないコードだが
ちゃんと動く
っていうことの意味が分からんのかな？
俺ここでよく無駄かつ良くないコードを
修正してるんだが >>119
>>112では「無駄」と認めながら>>116では「無駄ではない」といってるだろ
前後で主張が変化する奴は信用できない 揚げ足ではないような
自己矛盾を抱える人は日本語が分かってない人という典型かな 日本語がわからんやつは困るね。いちいち説明せんといかんのかね
コードが無駄だってだけで動作は無駄じゃないってことだよ
ちゃんと書いてあるだろ 必要なことをやっているけど無駄の多いコードは冗長なコードというべきではないか 1 + 1 // ->
で2が出力されるのですが、これは何でしょうか？？？ > 必要なことをやっているけど無駄の多いコード
「必要」と「無駄」は対義語
必要なことをやっているなら無駄ではない >>132
なるほど、この場合はコードに無駄が多くて長いが
処理そのものには意味がある（無駄ではない）ってことだな >>133
必要の対義語は不必要ってでてきたけど？ >>136
日本語ひどすぎねぇか・・
「必要」かつ「無駄」ってそれぞれ修飾してる語が違うんだけど >>137
俺は無駄なコードを書いている
俺は必要なことをやっている(無駄なコードを書く事は必要である) 必要なことをやっているコードと
必要なことだけで書かれてるコードは違うだろう 意味不明な論理だし、直接的に反論しないところがいやらしいな >>112はいつもの日本語破綻者だしなあ
曖昧に濁して、相手の反応を伺う事で糸口を探してるんだろ > 必要なことをやっているけど無駄の多いコード
そもそも、これは「無駄なコードを残すことに意味がある」と主張したいが為の論理でしょ
「必要」と「無駄」の修飾先が違うのなら、必要なAだけ残して無駄なコード(B)を排除すれば良いだけ
よって、「無駄なコード(B)を書く事に意味はない」と結論される
どちらにしても、論理が破綻してるんだよ カレンダーのマス目に編集ボタンが配置されていて、編集ボタンをクリックすると編集画面が表示されるページを作成しています。ここでお尋ねしたいのが、idの名前の付け方です。
今は、id=btnEdit20171201、id=btnEdit20171202と名前を付けていますが、より良い名前の付け方はありますか？ idをつけない、という選択肢もあるんじゃないかな
押したボタンから日付を取得したいなら、カスタムデータ属性なり、button要素でvalue属性を使うなり、手はいくらでもある >>145
>>146も書いているけどそういうIDが必要になるのがおかしい気がするね。
JavaScriptのスレに書いてるってことは、JavaScriptからそれらを参照するつもりなのだろう
本題の前に言っておくと、普通HTMLでは全部小文字でハイフン区切りが多い
btn-edit-20171201 みたいに。なぜかはよく分からんけどアンダースコアはあまり使われない
まあそれでもBEMみたいな変則的なものは有るし、強制ではない
んで、本題。あーだこーだ言いたいが、まあ要するにIDなしでやる方法を知らんのだろう？
なので軽くサンプルを書いてあげよう
https://jsfiddle.net/bfw0m3p6/ >>146,147
ありがとうございます。とても参考になりました。idを振らずにイベントをトリガーしたり、カスタムデータ属性を使う方法などがあるのですね。
編集画面でクリックされた日の年月日を引き継いで表示したりすることを考えると、カスタムデータ属性が面白そうですね！ >>148
そのマス目に入れるものが日付だけならtime要素を使うのが良いかもね
https://developer.mozilla.org/ja/docs/Web/HTML/Element/time
<time datetime="2017-12-05">5日</time> ['みかん','りんご','みかん','ばなな','りんご','りんご',]から
一番出現回数の多い「りんご」を得るにはどうすればいいでしょうか？ >>150
sort してから反復するとか
let a = [‘りんご’, … ];
a.sort();
let max = -1, // 最大出現回数
let count = 0, // 現在の単語の出現回数
let word, // 出現回数最大の単語
a.reduce(f);
function f(前, 次){
if(前 === 次){
count +=1
} else {
if( max < count ) { max = count; word = 前 }
count = 0;
}
みたいな感じ（細かい所は省略 >>151
すまん、 reduce の使い方がダメダメだったので取り消す var fruitsArray:Array<String> = ['みかん','りんご','みかん','ばなな','りんご'];
var fruitsMap:Map<String, Int> = new Map();
var count:Dynamic;
for (fruit in fruitsArray) {
count = fruitsMap[fruit];
if(count == null){
count = 1;
} else {
++count;
}
fruitsMap[fruit] = count;
}
trace(fruitsMap);
// 出力 {みかん => 2, りんご => 2, ばなな => 1}
Haxe で書いた。以下で試して。
https://try.haxe.org/
Map に入れたけど、最大値が複数ある場合の、処理がわからない >>150
lodashを使った
https://jsfiddle.net/5azq6k7q/
const counts = _.countBy(['みかん','りんご','みかん','ばなな','りんご','りんご']);
const max = _.max(_.values(counts));
const picked = _.pickBy(counts, _.partial(_.eq, max));
const items = _.keys(picked);
console.log(items);
// => ["りんご"]
出現回数が最大のものが複数ある場合を考慮して複数返している >>154
ありがとうございます
やっぱりライブラリ使わないと難しそうですね >>155
別にライブラリ使わなくてもできるよ。
ただ見て分かる通り優れたライブラリを使うとこの程度の問題なら
複雑化の原因になる条件分岐やループを使わずに最小のコード量で実装できる Haxe で書いた通り、まずMap が必要だから、
ES6(2015) + Babel で、ES5 へ変換
>>153
で、Map に入れる所までは書いたから、その後を書けば？
漏れは、最大値が複数ある場合の、処理がわからなかったけど
Lodash も、ES6 もほぼ同じ ES6は必要最小限しか言語機能として搭載しない
という考え方があるから、高度なことはできんよ
>>154の例だとcountByとpickByはない
その他は代替方法があるが少し冗長になる
まあ書いてみると良いよ ES6 が流行れば、Underscore/Lodash がいらなくなる、という記事が一杯あるけど
Ruby, Kotlin だと、ライブラリが無くても、かなり簡潔に書けるけど。
列Aでソートして、それが同じ値なら、さらに列Bでソートするとか
Kotlin 2
https://mevius.5ch.net/test/read.cgi/tech/1509462463/18 >>160
そこに出てくるMutableListやmutableListOfってのはライブラリだよ
Kotlin Standard Library の一部
https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/-mutable-list/index.html
https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/mutable-list-of.html
RubyのArrayも（組み込み）ライブラリ
https://docs.ruby-lang.org/ja/latest/class/Array.html
言語の範囲っていうのは一般的にはかなり少なく作るもの
関数やクラスの文法とか基本的なものだけ
大部分は標準ライブラリとして実装するのが普通
残念ながらJavaScript（ES6）の標準ライブラリはかなり小さく作られてる
その気になれば一気に最低でもRubyレベルまで実装するのは可能だろうになぜかそういうことをしない。
互換性を保つためなのかブラウザベンダーの負担を減らすためなのか知らんけど
この方針が変わらない限り、貧弱なライブラリとそれを補うlodashとかの構図は変わらない 初歩的な質問で恐縮ですが、お分かりの方ご教授ください。
画像のパスの一部を書き換えるjsを書いてるんですが
ネットで調べてページすべての画像は↓で変更できるようになったのですが、
特定のclass（<div class="gallery">）の中にある<img>画像だけ書き換える時の書き方がわかりません。
jsマスターの方、ご教授ください。
window.onload = function() {
var images = document.images;
for (var i=0, n=images.length; i<n; i++) {
var img = images[i];
img.src = img.src.replace(/xxx/, 'xxx_s');
}
}; >>155
ライブラリ使わなくても単純に考えればいいのよ
const fruits = ['みかん','りんご','みかん','ばなな','りんご','りんご',];
const counts = [];
const result = [];
let max = 0;
for (let fruit of fruits) {
let c = counts[fruit] || 0;
if (++c >= max) {
if (c > max) {
max = c;
result.length = 0;
}
result.push(fruit);
}
counts[fruit] = c;
}
console.log(result); >>162
jQueryが得意そうな課題だなｗ
動かしてないけどこんな感じかな
$(function() {
$('.gallery img').attr('src', function() {
return this.src.replace(/xxx/, 'xxx_s');
});
}); >>162
var images = document.querySelectorAll("div.gallery img"); >>164
>>165
さっそくありがとうございます。
お二方のコード双方動きました。
動くと嬉しいですね〜。 >>166
あ、ごめん。少し無駄があった。
（最初のページロードを待つ部分は単に書くのを省略するとして）
$('.gallery img').attr('src', function(i, src) {
return src.replace(/xxx/, 'xxx_s');
});
もしくは、これで良かったんだ。
$('.gallery img').attr('src', (i, src) => src.replace(/xxx/, 'xxx_s'));
なんのためにfunctionを使ったんだ？っていうねｗ 文字列の先頭からのマッチングに使うのに適した変数名は何だろう
startWithか？とか思って検索していて、
ES6からStringにstartsWithメソッドが追加されているのに気づきました
こんなメソッド知ってましたか？
Google書籍検索で「JavaScript startsWith」で検索しても、
日本語の本は一冊も出てこないところをみると、
知らない人は決して少なくないと思います
他にもES6で追加されているのに知らないメソッドがある気がします
どう調べればいいですか？ >>163
答えが複数ある場合でも、OK だね
ただ、そういう複雑なプログラムを書きたくないから、
便利な関数を検索していた >>163
ありがとうございます
みかんとりんごが同数の場合は、どちらか一つが取れればいいので
こんな感じに書いてみましたが間違ってたらご指摘下さい
var fruits = ['みかん','りんご','みかん','みかん','ばなな','りんご','りんご',];
var fruit = fruits.filter(function (value, index, self) {
if (index === 1) {
return self.indexOf(value) === index && index !== self.lastIndexOf(value);
}
});
console.log(fruit); >>171
何を持って複雑というかだね。
俺は条件分岐やループが多く処理の中で状態が
変化するようなものを複雑だと定義している
だけど人によっては知らない関数を使うことを
複雑だと言う人もいるだろう >>172
const counts = _.countBy(['みかん','りんご','みかん','ばなな','りんご','りんご']);
const max = _.max(_.values(counts));
const picked = _.pickBy(counts, _.partial(_.eq, max));
const items = _.keys(picked);
console.log(items);
// => ["りんご"]
さっきの答の最後を書き換えて
console.log(items[0]);
こうすればいいだけだよ >>173
> 何を持って複雑というかだね。
いや、複雑の定義は（いくつか有るとは言え）ソフトウェア業界で決まってるんだから
いくつか有るうちのどれかに従おうよｗ
オンラインで複雑度を調べるサイトぐぐってみたら
http://jsmeter.info ってのを見つけた
（意味は知らないのあるからちょっと調べてみようかな）
>>163の結果
http://jsmeter.info/m61k7f/1#results
Statements: 27
Lines: 17
Branches: 3
Depth: 3
Cyclomatic Complexity: 4
Halstead Volume: 322
Halstead Potential: 4.75
Program Level: 0.0148
MI: 104.43
>>154の結果
http://jsmeter.info/35xbq5/1#results
Statements: 16
Lines: 5
Branches: 0
Depth: 0
Cyclomatic Complexity: 1
Halstead Volume: 223
Halstead Potential: 4.75
Program Level: 0.0213
MI: 126.20 Statements: 文の数（少ない方が良い）
Line: 行数（少ない方が良い）
Branches: 分岐数（少ない方が良い）
Depth: ネストの深さ（少ない方が良い）
Cyclomatic Complexity: 循環的複雑度
10 以下であればよい構造
30 を越える場合，構造に疑問
50 を越える場合，テストが不可能
75 を越える場合，いかなる変更も誤修正を生む原因を作る
Halstead Volume: よくわからん
https://www.imagix.com/user_guide_jp/class-metrics.html
Halstead プログラム量？
Halstead Potential: よくわからん
http://se-naist.jp/old/lecture/se3/2006/handouts/productmetrics2.pdf
語彙の多さに着目した尺度？
Program Level: 抽象度？（高い方がいい？）
MI: 保守容易性（高い方がいい） >>175-176
ライブラリのコードを含めて比較しなければ公正とはいえない >>167
両方動きました！
上級者になると一行で書けるんですね。 ■ このスレッドは過去ログ倉庫に格納されています
