+ 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にして見えないようにしてください。文句をつける＝荒らしです >>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
両方動きました！
上級者になると一行で書けるんですね。 >>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くらいなら同時に把握しない要素数が１０も無いから
プログラマのワーキングメモリに乗るという意味で普通のコードの範疇だと思う 関数や命令を知っているという前提で、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のような感じだと
４個も公開変数があるから結局一部を捨てたりということもしづらい
一部を修正しようと思えば結局全ての行とそのほかの部分の絡みを考えないといけない
これもワンラインで書くなり使わない変数を削って一つの塊にすべき
もしくは５行程度なら即時関数にしてスコープ限定してもいいけど
本当にデバッグを考えたら結局コメントだったりわかりやすさが足りない
逆に何度も使うんならライブラリ使ったり書いたりする
もし単関数で取れるライブラリがあればそれで良し
中途半端な気遣い（？）は一番無駄 > そもそも一度限りのかき捨てのコードなんだから読む必要がない
一度限りのかき捨てのコードなんて誰が決めたの？
あなたの思い込みですよね？ > 問題があれば捨てればいいだけでその時に例えば>>174のような感じだと
> ４個も公開変数があるから結局一部を捨てたりということもしづらい
公開変数ってなんや？
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
最初から用意されている１つのクラスシステムに縛られないのがプロトタイプベースの良さと言っても
大きなコードを書けば自ずと抽象化の結果として何らかのクラスシステムを作ることになる
既存のJSの２つのクラスシステムは当然内部的にプロトタイプベースのプロトタイプ設定を利用しているのを見ても分かるが
プロトタイプの自由な設定機能がないとまともなクラスシステムを作るのは困難
一番わかり易い形で具体的に絶対にできないことを挙げるなら上で書いたように関数のプロトタイプ設定
つまり関数へのメソッドの継承が実現できない
因みにプロトタイプベースらしい書き方って言うのも一概には言えないのかもしれないし、
実際はコンストラクタ的な機能を考えたりしてクラスシステムを構築する場合もある
そもそも自分がこれを挙げた理由は継承の概念を理解するのが簡単ということで
本当に単純なプロトタイプの設定だけで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');
}
);
});
}); ■ このスレッドは過去ログ倉庫に格納されています
