+ 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にして見えないようにしてください。文句をつける=荒らしです 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メインだからよくわからんのだ >>216 最初から用意されている1つのクラスシステムに縛られないのがプロトタイプベースの良さと言っても 大きなコードを書けば自ずと抽象化の結果として何らかのクラスシステムを作ることになる 既存のJSの2つのクラスシステムは当然内部的にプロトタイプベースのプロトタイプ設定を利用しているのを見ても分かるが プロトタイプの自由な設定機能がないとまともなクラスシステムを作るのは困難 一番わかり易い形で具体的に絶対にできないことを挙げるなら上で書いたように関数のプロトタイプ設定 つまり関数へのメソッドの継承が実現できない 因みにプロトタイプベースらしい書き方って言うのも一概には言えないのかもしれないし、 実際はコンストラクタ的な機能を考えたりしてクラスシステムを構築する場合もある そもそも自分がこれを挙げた理由は継承の概念を理解するのが簡単ということで 本当に単純なプロトタイプの設定だけでOOPが円滑にできるとは言わない その上で書くと class B { m() { return 6 } } class A extends B { m(){ return 7 * super.m() } } let o = new A o.m() というのと let B = { m() { return 6 } } let A = { __proto__: B, m(){ return 7 * super.m() } } let o = { __proto__: A } o.m() というの、初めて継承やらを理解する時にはオブジェクトだけで説明できる後者の方が仕組み理解し易くないか? 少なくとも、class構文でない旧クラスシステムで書いたコードと比べたら明らかにそうだよねってこと >>213 いや、だからそれはあんたの「オレオレ定義」であって 世間一般ではJavaScriptはプロトタイプベースのオブジェクト指向だって 最初から言われてる 言われているかどうか。事実の話をしている。 あんたが認めるかどうかじゃない >>218 俺は前者だな 知ってるからかもしれんが class構文がなかったころと比べたら まあどっちも理解しやすい >>217 > つまり関数へのメソッドの継承が実現できない それはクラスベースでは当たり前にある機能で プロトタイプベースはクラスベースと同じ機能が なければないと思ってるからだよね? つまりあんたはクラスベースとプロトタイプベースを 違うものだって考えられてないってこと プロトタイプベースをクラスベースの書き方を変えただけと思ってるから クラスベースと同じ機能がない=プロトタイプベースではない という意味がわからないことになってるんだよ。 ようするに「プロトタイプベースのオブジェクト指向」を やるのであれば昔のJavaScriptでもそれは普通にできる プロトタイプベースのオブジェクト指向で クラスベースの真似事をしようとするから 機能が足りないって思ってしまう プロトタイプベースでやるならば、 別に最初から機能は不足してない これも一応書いておくか 言いたいことはいろんな形のオブジェクト指向があるということ https://codezine.jp/article/detail/3708 > 継承は決してオブジェクト指向の必須技術ではありませんが > (実際、継承を持たないオブジェクト指向言語も存在しています)、 >>222 完全にJS流クラスシステムに毒されてんな 自分はプロトタイプベースのメリットは最初から用意されているクラスシステムに縛られないことって言ったでしょ? でも旧JSは半分、いや3/4くらい縛られてたわけよ 旧JSでプロトタイプベースっぽい、つまりクラスに縛られない固い言語でない特徴が現れていたのは オブジェクトとプロパティのゆるさだけで、ここで問題にしている継承周りに関しては 他のクラスベース言語同様に縛られていたし、むしろクラスシステムがクソな分状況が酷かった だからみんな旧クラスシステムの内部のプロトタイプ操作を利用する 『機能が十分なクラスシステム』をいろいろ考えてたわけじゃん それでも関数のプロトタイプ設定はできないってことが長年の悩みだったわけだけどね それと話を整理するけど プロトタイプベースでも機能は足りるっていうのは話が食い違っている よく考えてみて それって、new演算子やprototypeプロパティを使えば、 プロトタイプの設定ということができなくても継承は十分に実現できるって言いたいんでしょ? でもこちらはそもそもそのnew演算子やprototypeプロパティを使ったJS流旧クラスシステムの複雑さと 本来のプロトタイプベースでの継承実現の簡潔さを比較してるんだよ 話がおかしいよね? あとそちらこそプロトタイプベースとクラスシステムの関係を分かっていないようだけど プロトタイプベースでも、デフォルトのクラスシステムがあることとは矛盾しない それに縛られないってことが重要だからね > それって、new演算子やprototypeプロパティを使えば、 > プロトタイプの設定ということができなくても継承は十分に実現できるって言いたいんでしょ? いわんよ? 継承はオブジェクト指向に必須ではない。 new演算子やprototypeプロパティを使えば、 プロトタイプベースのオブジェクト指向が実現できる それだけ 分かった分かった、自分が悪かった 『継承』っていうのをクラスベース的な捉え方してクラス同士の話だけと思っている人がいるようだから話が食い違うんだな 自分が言っているのはプロトタイプ的継承だったり、もっと一般的な「継承」の話だから 例えば>>223 でも引用されているWikipediaを見てくれ https://ja.wikipedia.org/wiki/%E7%B6%99%E6%89%BF_ (%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0) まさに序文に書かれている『あるオブジェクトが他のオブジェクトの特性を引き継ぐ場合』っていうのを指して言ってる だからnew演算子やprototypeプロパティだって継承のための機能なんだよ 要するに継承が云々言ってきたのは、(ある程度構造化した状態で)プロトタイプチェーンを繋げるのは云々って話だから スクリプト書こうとするとNGワードが出て書き込めない… 質問したいのに〜 var elmDiv = document.createElement('div'); var hoge = document.getElementsByClassName('test'); hoge[1].parentNode.insertBefore(elmDiv, hoge[1].nextSibling) ↑のようなスクリプトを書いて <div class="test"> <div class="test"> 【追加のDIV[1]】 <div class="test"> 【追加のDIV[2]】 <div class="test"> ↑のような形でDIVを複数追加したいのですが、書き方がわかりません; hoge[1]のみだと正しく追加されるのですが、hoge[2]を書くと上書きされてしまいます。。 任意の配列に複数要素を追加する書き方をご教授願えませんでしょうか…? >>226 まだ話が食い違ってるな。 俺が最終的に言いたいことは、JavaScriptは昔からプロトタイプベースの オブジェクト指向だってことだけだよ で君がいいたいことはだいたい分かる。 それに対して反論するならば、 [君がいいたいこと] 昔のJavaScriptは継承がやりにくい それは事実だろう。だがやりにくいからといってもできる以上 プロトタイプベースであることを否定することにはならない。 つまり継承がやりづらいプロトタイプベースのオブジェクト指向 [君がいいたいこと] 一般的な「継承」ができない(面倒) 大変でもできる。できるのだからオブジェクト指向と言える。 それにそもそも継承はオブジェクト指向の必須要件ですらない だからプロトタイプベースのオブジェクト指向 わかる? 継承があってもなくても、面倒であってもそうでなくても JavaScriptは昔からプロトタイプベースのオブジェクト指向なんだよ >>228 本当にNGワード?ブラウザで書き込めるんじゃない?って思わなくはないが、 jsfiddleあたりで動く最低限のサンプルコード書いてから質問すればいい あ、やっぱり動く最低限のサンプルコード書いてもらわないとダメだな divがネストしてるのかどうかわからんから答えられん 任意の配列とか言ってるのに、1以上から始まってるのが謎だし じゃあ複数とはいくつまでなのかとか書いてないし情報が足りんだよ まあ、情けでエスパーして(いつも通りjQueryで)書いてやったが 次はもれなく情報を書くか、jsfiddleにサンプル書くか、その両方をやってからレスしてくれ https://jsfiddle.net/ft3aegkx/ >>229 >上書き 上書きの意味がよくわからんが、 2回目の追加は、実際は1回目に追加した elmDiv の移動になった ということか? 追加するたびに createElement(cloneNodeでもOK)で 新たに要素を作成しないとそうなる 要素を2つ、追加したいのなら、 まず要素を2つ、作った(new した)かどうかを確かめる var aaa=undefined; とのか変数にundefinedを入れるって文法的に正しいのでしょうか? undefinedって変数未定義のときにwebコンソールとかで出ると 考えているため、変数に代入することはないと思ってんですけど どうなのでしょうか? 文法的には問題ない NaNとかと同じ ただ変数に直接入れるような使い方が相応しい場面はかなり少ないと思う undefined は、JS の実行環境が使うもの プログラマーが使うのは、null すいません、正規表現について教えてください メールアドレス判定の許可として下記条件にプラスして /^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/ 空(何も無い)も許可として追加したいのですが どのように書いたらよいでしょうか・・ /^(^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$)?$/ 出来なくもないけど非常に分かり辛い 文字列長0で分岐させたほうが良さそうな気がする >>240 正規表現をそのまま使うやつは馬鹿 名前をつけて使え 名前というのは関数名のことだ。 function is_email(email) { 正規表現チェック } 空を許可するんだろう? function is_email(email) { emailが空なら return true 正規表現チェック } こうすればよかろう 質問です 環境はvagrantでubuntu16.04を使用してます vue-cliを使ってるんですけどnpm run buildしてlocalhost:8080にアクセスできません。 ポートフォワーディングは8080→8080で設定しています。 http_proxyも設定しています。 ローカルホストからアクセスする方法を教えてください buttonをclockすると、現在値を取得し、 lat(緯度)、lng(経度)、distance(距離)をgetパラメータとして渡し、同じページに遷移したいと思っています ・lat(緯度)、lng(経度)はgetCurrentPositionの引数のfunctionから取得 ・distanceはbuttonタグの属性から取得。 例)<button data-distance="1000"> lat(緯度)、lng(経度)はは取得できましたが、distanceは取得できませんでした 何故でしょうか? $(function(){ $("button").click(function(){ navigator.geolocation.getCurrentPosition( function(pos){ var crd = pos.coords; var url = location.href; url = url.replace(/\?.*$/,""); window.location.href = url +'?lat='+ crd.latitude + '&lng=' + crd.longitude+ '&distance=' + $(this).data('distance'); }, function(){ console.log('error'); } ); }); }); ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる