+ 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にして見えないようにしてください。文句をつける=荒らしです
>>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が得意そうな課題だなw 動かしてないけどこんな感じかな $(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を使ったんだ?っていうねw 文字列の先頭からのマッチングに使うのに適した変数名は何だろう 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 > 何を持って複雑というかだね。 いや、複雑の定義は(いくつか有るとは言え)ソフトウェア業界で決まってるんだから いくつか有るうちのどれかに従おうよw オンラインで複雑度を調べるサイトぐぐってみたら 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 両方動きました! 上級者になると一行で書けるんですね。 >>177 ライブラリの部分は十分にテストされて書かなくていい部分だから そこを含める必要はないよ っていうかその話をするとブラウザの部分まで含めろ OSの部分まで含めろってなるだろ 自分の書くコードをシンプルにするためにライブラリを使うのに ライブラリを使ってシンプルにするなど許さん! ライブラリの分まで含めるのが公平だ!なんて言ってるのか? どんだけ複雑すれば気が済むんだろうか そもそも複雑度ってファイルごと、クラスごと、関数毎に出すものだから 例えライブラリが複雑だとしても、 ・使ってるライブラリが複雑です ・それはそれとしてあなたの書いたコードはシンプルです という結果になるだけの話なんだけどね 対するは、 ・ライブラリは使ってません ・それはそれとしてあなたの書いたコードは複雑です となるだけの話 > 自分の書くコードをシンプルにするためにライブラリを使うのに そう思っているのはあんただけ 意味も分からずに http://jsmeter.info/ を使っているから、ライブラリを使うためのツールぐらいにしか思えないんだろうな >>182 それで何が言いたいのさ? 否定だけして、お前の意見が何も書いてないぞ プログラム板にも、荒らしが出てるぞ 元々、荒らしは、全部のスレで、いちゃもんを付けてくる。 漏れも、何回も攻撃されてる プログラミングの話は、一切できないくせに、批判ばっかり書いてるのが荒らし ただ、Ruby, JavaScript のスレでは、 荒らしにかまうから、喜んで居着いてるだけ 荒らしは一切、無視すべし! sortを使えばいいと思う こんな感じで let fruits = [ 'みかん', 'りんご', 'みかん', 'みかん', 'ばなな', 'りんご', 'りんご', ] let map = new Map for(let f of fruits) map.set(f, (map.get(f)|0)+1 ) let [[max]] = [...map].sort( ([,a],[,b])=>b-a ) >>186 あれに付け加えてもいいけど 別のやり方でもうちょっと汎用的な処理を書くとして例えばこういうのはどう? let fruits = [ 'みかん', 'りんご', 'みかん', 'みかん', 'ばなな', 'りんご', 'りんご', ] let ary = [] // 個数毎にグループ分けした配列を作る fruits.sort().reduce( (c,f,i,a,n=c|0) => (f==a[i+1]) ? n+1 : (ary[n] = [f,...ary[n]||[]]), 0 ) ary[0] // ["ばなな"] => 個数1 ary[1] // undefined => 個数2 ary[ary.length-1] // ["りんご", "みかん"] => 最大個数 >>190 くらいなら同時に把握しない要素数が10も無いから プログラマのワーキングメモリに乗るという意味で普通のコードの範疇だと思う 関数や命令を知っているという前提で、1行の処理を把握するのに 5秒以上かかるようなものは普通のコードではないと思う コードは読むものであって、解析するものになってはいけない 場合による 行数が短く一つのブロックがスクロール無しに見れることも重要 つかそもそも読む必要はできるだけ少ないほうが良い 今回のような処理の場合ただ最大個数の要素を得るためだけに十行二十行かけるのは極めて愚策 そこからの処理が重要なんだから、普通は外部関数化する あえてインラインで書くならできるだけ目につかないように短く書いたほうが良い 仮にもしそこに問題がありそうだということになれば、一行捨てて書き直しても良い程度のものだし > つかそもそも読む必要はできるだけ少ないほうが良い ということは、ライブラリを使って読むものを減らすのが正解なわけか > fruits.sort().reduce( (c,f,i,a,n=c|0) => (f==a[i+1]) ? n+1 : (ary[n] = [f,...ary[n]||[]]), 0 ) このコードの読むもの = トークン はどれくらいあるのかざっくり数えてみた (カッコは省略、連続する変数定義は一つにまとめた) fruits sort reduce c,f,i,a,n = c|0) => ( f==a[ i+1] ) ? n+1 : (ary[n] = [ f,...ary[n] ||[] ]), 0 ) 全部で16個ぐらい これぐらいの量を、ひとつづつ意味を考えながら 読んでいかないといけない >>170 にも書いた通り、Ruby でも調べたけど、 最大使用回数が複数ある場合、簡単には取得できない 最大使用回数を返す場合、1つしか返さない strHash = {"a"=>2, "b"=>1, "c"=>2} maxCount = strHash.values.max #=> 2 p strHash.select {|k, v| v == maxCount } #=> {"a"=>2, "c"=>2} まず、Hash の全要素をなめて、最大使用回数を取得して、 その最大使用回数に一致するキーを、Hash の全要素をなめて取得する 同じHash を、2回走査してしまう。 一発で取得できないから、無駄を感じる >>196 考え方が逆 そもそも一度限りのかき捨てのコードなんだから読む必要がない 問題があれば捨てればいいだけでその時に例えば>>174 のような感じだと 4個も公開変数があるから結局一部を捨てたりということもしづらい 一部を修正しようと思えば結局全ての行とそのほかの部分の絡みを考えないといけない これもワンラインで書くなり使わない変数を削って一つの塊にすべき もしくは5行程度なら即時関数にしてスコープ限定してもいいけど 本当にデバッグを考えたら結局コメントだったりわかりやすさが足りない 逆に何度も使うんならライブラリ使ったり書いたりする もし単関数で取れるライブラリがあればそれで良し 中途半端な気遣い(?)は一番無駄 > そもそも一度限りのかき捨てのコードなんだから読む必要がない 一度限りのかき捨てのコードなんて誰が決めたの? あなたの思い込みですよね? > 問題があれば捨てればいいだけでその時に例えば>>174 のような感じだと > 4個も公開変数があるから結局一部を捨てたりということもしづらい 公開変数ってなんや? this.foo なんてのが公開変数やろ? どうみても>>174 はローカル変数や 一部を捨てたりってなんや? 全くもって意味不明だ 初心者です。 この本(http://amzn.asia/386grG8 )を文中の課題をやりながら読み終わったので、 次はこちらの本(http://amzn.asia/cDn7CWG )に行こうと思っております。 この話を知人にしたところ、旧版(http://amzn.asia/cv1is9n )を持っているから貸してやろうか?と言われました。 同じ本ですが2010年の旧版です。 javaScriptの学習において そこまで問題がなければ旧版を借りようかと思うのですが、 この界隈の技術の移り変わりは早いので本書も最新版を買うべきでしょうか? 初めてのJavaScript 第3版、オライリー、2017 この本は、ES6(2015)の本だけど、 プログラミングを数年以上やっていないと、難しくて読めない 初心者は、(ECMA Script)ES3, ES5, ES6 と順番に、やった方が良いかも 今のブラウザは、ES5だけど、 ES6ではクラス構文などもできて、極端に難しくなる >>201 間違いなく新しい方が良いけど 古いから役に立たないって訳でもない クラス構文習うよりprototype習うほうが難しくね? >>174 , >>185 ありがとうございました! >>201 あってもいいけど物理的な本は必要か?と思う あるていど経験してるとサイト検索で十分だと思うけど 最初のうちは体系立てて勉強できるように、本がいいと思う >>204 プロトタイプは超簡単 「prototype」は難しいが、それはプロトタイプベースとは関係なく 関数をクラスに見立てたJSの旧クラスシステムで必要になるもので本質とは関係がない でもプロトタイプベースで書けるようになったのはES2015からで その教え方をしている入門書なりは見たことがない phpマニュアルみたいなサイトないもんかね あれを一度ガッツリ読むとすんげーレベルアップするんだけどな >>208 > でもプロトタイプベースで書けるようになったのはES2015からで JavaScriptは最初からプロトタイプベースだよ 「俺は昔のJavaScriptはプロトタイプベースとは認めん!」というのは無しな それはお前の「オレオレ定義」であって世間一般には通用しないものだから 世間一般にはJavaScriptは最初からプロトタイプベース HPで友達が稼げるようになった情報とか ⇒ http://asaswq3wq.sblo.jp/article/181819223.html 興味がある人だけ見てください。 717PZBPVIE >>210 いやいや、JSのベースがプロトタイプかどうかを言ってるんじゃなくて、 プロトタイプベースらしいプログラミングができる言語だったかを言ってるんだよ ES2015まではプロトタイプの設定が自由にできなかったんだが それでプロトタイプベースプログラミングが出来るわけ無いでしょ だから長らく継承テクニックとしてJSの内部プロトタイプの操作を利用するハックが使われてきたのよ それでもES2015でいうextendsの効果にもある 関数のプロトタイプを別の関数にするとかいう重要な操作はできなかったわけよ でも当時でも独自実装であった__proto__を使えばそれは容易にクリアできたわけで それこそがプロトタイプベースのポテンシャルなわけよ class構文追加でより難しくなるかどうかの話だったと思うが >>214 とりあえず自分が言いたいことは、prototypeプロパティやnew演算子を使った継承周りのテクニックは 確かに簡単とは言いにくく、class構文はその点分かりやすいけれど、 勘違いしてほしくないのは『プロトタイプ』を活用した継承システムは本来簡単なはずなんだってこと でもJSでは長らく活用が許されてなかったので、プロトタイプベースOOPの文化や学習が整っていないということ >>215 因みにプロトタイプベースらしい書き方ってどんな感じ? TypeScriptメインだからよくわからんのだ ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる