+ JavaScript の質問用スレッド vol.124 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
※前スレ
+ JavaScript の質問用スレッド vol.123 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/
VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured >>100
なんでクラスの話に？詭弁では？
クラスベースの奴らがうるさいからclassなんて入れる羽目になったんだが。
そいつらのせいで木に竹を接ぐようなことさせられてむしろ複雑になった。
プロトタイプベースとしてシンプルでよかったのにほんと独善的でろくなことしない。
Reactでもクラスコンポーネントは廃れ99%のケースでFCになったよ。 >>109
エセクラスベースは絶対に反対。
classは早期に非推奨にすべき。 >>105
>>107
ああ、なるほど、エスケープをダブルでつけないといけなかったんですね
シングルではつけてみていたんですがそれで動かなかったのであれって思ってました
資料の提示もありがとうございます！ >>102
その問いはマジ質問？
>>109
JavaとJsの言語設計に関して
どっちがすっきりしてるかを話ししてるだけだろ
疑似クラスなんてあること自体がお笑いだし
オブジェクト生成方法も多岐にわたるとか
どこが整理されてる言語なのかと 変数エラーでググっても出てこなかったです
何処の業界用語ですか？ >>104
Ruby では、Regexp.escape で、
正規表現において、特別な意味を持つ文字の直前に、
エスケープ文字(バックスラッシュ)を挿入した、文字列を返す
p esc_1 = Regexp.escape( "[-a]" ) #=> "\\[\\-a\\]"
reg_1 = Regexp.new( esc_1 )
p reg_1.match( "x[-a]y" ) #<MatchData "[-a]"> >>112
お笑いと言えばJavaの無名クラスだろ
なんだったのアレ
関数がファーストクラスオブジェクトじゃなかった欠陥言語の苦肉の策とは言えとんでもなくキッタネェコード
今じゃラムダ関数使ってだーれも使ってないし
最初からそうしとけばよかったのにね
ぜんぜん整理されてなかったのかな？ｗ 言語の完成度はJava>JS
学びやすさもJava>JS
だからと言って優劣を表現してるわけじゃないよ
マークアップ操作言語として
JS、HTML、CSS等との新旧互換性を担保しながら
成長してきた言語だから
継ぎ接ぎ言語になっているのは仕方ないこと
JSでできることは多いし楽しい言語であることを否定してるわけじゃないんだ
でもJSが整理されてシンプルな言語であるとは言えないってだけ javascriptさえあれば何もいらん
javascriptだけでスケーラブルなシステムが作れる あまりにも面倒くさいため、誰もJavaでGUIを作らなくなりました。
やる気とAWT,Swingなど道具立てはあったのです。
ただJavaがクソ過ぎた。
イベントドリブンで必須のリスナー登録はこんな感じ（笑）
button1.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
System.out.println("clicked");
}
});
一方C#ではデリゲートで簡単に書くことができました。
Javaはデリゲートが言語機能として無いのでマネできませんでしたｗ
結果今では誰もJavaでクライアントGUIプログラムを書きませんがC#はバリバリ使われてますｗ
結局Java8でJavaScriptをパクってlambdaで以下のように書けるようにしました（ハズカシーｗ）
button1.addActionListener(e -> System.out.println("clicked"));
しかし時すでにお寿司、誰もJavaでGUIを作っていないのであるｗｗｗ
Javaはサーバーサイドに集中して成功者？
ノンノンｗ
Javaが糞でめんどくさくて誰も書かなくなったから廃れた、これがシンプルな答えですｗ Android StudioではまだJava言語で開発が必要だったような 0から9の入ったランダムの配列に適当に選んだnという数字が最大何個並んでいるか
これはどういう方法が早いのでしょうか
気にするほどでもないのでしょうか
配列を見ていくのは遅いとか言う話も聞いたような気もします
一般的にはどういう方法を取るのでしょうか
・配列の前から順にforでnであるか、あればカウンターインクリメント、なければカウンターリセット
・joinで配列を文字列化したあとforでi文字数ぶんのnを検索文字として includesがfalseになるまでか最悪配列数まで調べる
・文字列化したあとmatchで/n+/gで一覧を出して一覧の配列をmap(e=>e.length)で文字数にしてMath.maxで調べる コードはこんな感じでいいですか？
https://jsfiddle.net/rj457v0q/
windows10 firefox 64bit 94.0.2のabout:newtabのコンソールでやった結果
11374, 1970, 2920
とかそれに似たような時間なんですが
同じ環境でJSFiddle に保存した際に実行された時間が
320, 1994, 2938
と1番目が早くなって結果が真逆になっています
どういう事なんでしょうか IronというChromeベースのブラウザでも試したところ
FirefoxからJSFiddleを開いてそこで走らせた時間と同じような結果になりました element.addEventListener(
"mousemove",
function(e){alert(e.offsetX);}
);
このfunction(e)の部分はfunction(aaa,e,bbb){}のように引数を複数設定することはできますか？
e以外を渡すにはグローバルしかできないんですか？ >>123
Firefox の Math.max() が激重っぽい（1万回の関数呼び出しが重い？）
三項演算子とかにすれば JSFiddle と同じくらい早くなる >>126
ありがとうございます。
Math.maxを使わず、
配列のまま計算させたほうがいいみたいですね。
3つ目もMath.maxを使ってますが使わないようにしても、
こちらはMath.max関数の呼び出し回数が1周1回なせいか短縮されませんでした。 >>123
1つめのバグっとるよ
2つめのは連続する数が大きいのでも確かめないとパフォーマンス特性が分からない
jsbench.meみたいなところで試すといい
アルゴリズムのオーダー考えれば単純ループが一番高速 >>125
引数を複数設定できる。ただし、第一引数以外は何も渡されない。（デフォルト引数なんかの例外もある）
thisを渡せる。bind()とhandleEvent()を含むオブジェクトで渡せる。 >>128
ありがとうございます
サイトは次使う時に使って見たいと思いますｗ >>125
どんな使い方をするのか想定コードを教えて
あと代入されるaaa,bbbの値はいつ確定する？
呼び出し時に確定するなら変数で置いとくしか無いし
関数定義する時点で確定してるなら引数にする必要が無い >>131
canvasの領域内をクリックしながらマウスを移動させたときの
canvas内のマウスの座標を得たいんだけど
mousedownでvar clickcyuu = 1;mouseupでclickcyuu=0;
mousemoveでclickcyuu===1ならばdrag_mouse_x = e.offsetX;drag_mouse_y = e.offsetY
とやりたかったのでfunction(e,clickcyuu){}としたかった >>132
それだと結局グローバル変数参照してるのと同じじゃない？
わざわざ引数経由する理由がない 定期的にaddEventListener自体から引数渡したいって人出てくるけど
仮にできたとしてもaddEventListenerした時点で値が固定されることが考えから抜け落ちてるよね
>>132
引数渡したいならイベントハンドラに関数式使えば済むけど
複数のイベント仕込むなら一連の動作をこんな感じでclassかオブジェクトにした方が楽よ
https://jsfiddle.net/hgro7t5m/ クロージャ使えば普通にできるやろ
それに参照型ならaddEventListenerした後からでも値を変えられるよ >>135
オブジェクトを束縛すれば、プロパティは固定されない(>>129)
handleEventも使ってみればその有用性に気がつくと思うが 読み込みたいファイルのパスだけがわかっている場合に
reader= new FileReader();
reader.readAsText("aaa/hoge.csv") ;
みたいな感じで読み込もうと思ったんですが、
readAsTextの引数はblobだかfileオブジェクトでないとだめみたいで、
レファレンスを読んで見るも、
パスからblogだかfileオブジェクトだかを作成する方法がわかりませんでした。
ファイル読み込み自体は他の方法を使ってできるものの、
FileReaderとreadAsTextの組み合わせを使ってトライしてみたいので
どなたかアドバイスお願いできますでしょうか >>139
それが出来たら、ファイルの情報を盗み出せるようになるな >>140
例えばxmlhttpRequest()でもパスからファイルを読み込むことが出来るので
FileReaderでそれが出来ないのは不思議な気になるんですがそういうものなんですかね >>141
xhrは基本的にhttp接続しか出来ない ガチでヌーブなんですけどrequestsとbeautifulsoupでスクレイピングやってます
waitかけないとバンされるよと言われましたがどうすればいいですか？
requests.get()でtimeoutは今書きましたがforで同じサイトの似たようなページに何度もアクセスするのでサーバーへの負荷はすごいと思います
これに対してどうすればいいですか？ const test = [
{main:"A"},
{main:"B"},
{main:"C"}
]
から全てのmainをとり出した["A","B","C"]となる配列を作りたいです
forを使えば作れますが、もっと簡単に作れる便利なメソッドあったりしますか？ const test = [
{main:"A"},
{main:"B"},
{main:"C"}
]
let testB = test.map(e=>e.main)
知っててコレジャナイ方法をきいてるのかもしれないけど >>148
自分もそれやってたけど不可能なので質問しましたが
どうやらqueryselectorAllにmapが効かないっていうのが原因だったみたいです
すんません querySelectorAllの戻り値はArrayではなくNodeListだからね
hoge = Array.from(test).map(e => e.main); hoge = Array.prototype.map.call(test,e => e.main);
とか PythonのコードですがどなたかJavascriptに直して下さい…
sorted(pts, key=clockwiseangle_and_distance)
import math
pts = [[2,3], [5,2],[4,1],[3.5,1],[1,2],[2,1],[3,1],[3,3],[4,3]]
Origin = [2, 3]
refvec = [0, 1]
def clockwiseangle_and_distance(point):
vector = [point[0]-Origin[0], point[1]-Origin[1]]
lenvector = math.hypot(vector[0], vector[1])
if lenvector == 0:
return -math.pi, 0
normalized = [vector[0]/lenvector, vector[1]/lenvector]
dotprod = normalized[0]*refvec[0] + normalized[1]*refvec[1]
diffprod = refvec[1]*normalized[0] - refvec[0]*normalized[1]
angle = math.atan2(diffprod, dotprod)
if angle < 0:
return 2*math.pi+angle, lenvector
return angle, lenvector すんません
var hoge = test(); //←2個入った配列が返ってくるヤツ
var A = hoge[0];
var B = hoge[1];
って書いてます。
これもーちょっとカッコよく
var A B = test();
って感じで一行でAとBに変数に入れる方法とかあります？ var hoge = [1,9];
var [A,B] = hoge; >>156
うおーすげー天才
ありがとうございます！ var obj={
key:{x:200,y:300}
}
obj.key2=500;
alert(obj.key2);
alert(obj.key.x);
上はオブジェクトで下はオブジェクトのオブジェクトです。
実行結果は上が500で下が200です。
一応動作はしますがこのような使い方は間違っていますか? >>158
「間違っている」は「期待する動作」によって決定される
それをあなた自身しか知らないので、第三者による判断は不可能 >>160
文法は他人に聞くまでもない
コンソールにSyntaxErrorが出力されていなければ、文法的に問題ない 何に引っかかってるのか書かないと期待してる答えは返ってこない
特に変なところないし 引数が多い場合の引数の渡し方について
function(
aaa,
bbb,
ccc,
・・・（略）
zzz
){}
って書くより
function(obj){
var aaa = obj.aaa;
var bbb = obj.bbb;
・・・・・（略）
var zzz = obj.zzz;
}
って書く方がいいんでしょうか？
どっちもメリット、デメリットはあると思うけど >>163
何でこう無条件に善し悪しを求めようとするかね
メリット、デメリットがあるなら、どちらが良いと決めつけることは出来ないと判断出来ないものなのか 下のほうなら
const f = function({aaa, bbb, zzz}){
console.log(aaa, bbb, zzz);
}
のほうが分かりやすくないか
const o = {
aaa: 'あ',
bbb: 42,
zzz: 'ん',
};
f(o); >>136
形だけひとまとめにしても後でバラすんじゃなんの意味もない
objとかじゃなくて意味のある名前が付けられる範囲でまとめるべき var str="ｘ^2 + (x+2)^2 - (x*(x-2))^3";
をMath.pow(x,2)+Math.pow((x+2),2)-
Math.pow((x*(x-2)),3)に置換するにはどうやればいいんですか? Math.powを使わなければ簡単なんだけどね
eval(str.replace(/\^/g, '**')); スペース含まない半角文字列限定。式の文字列つくるまで。
賢い人ならもうちょっとスマートに書けるかと。
var str="x^2+(x+2)^2-(x*(x-2))^3";
function func(s){
var s2=s.split('^');
var s3=s2[1].replace(/¥d+/,"");
return "Math.pow("+s2[0]+","+s2[1].replace(/[^¥d]/,"")+")"+s3;
}
var result=str.replace(/[a-z¥(¥)¥d¥*¥+¥-¥/]+¥^¥d+([¥+¥-¥*¥/]|$)/g,func); >>169
そうやった方が簡単そうですね
>>170
ありがとうございます いつもはreplaceやmatchを使うんだけど、
execってのがキャプチャグループだけを簡単に抜き出せて便利そうだから使ってみました
txt="AabBxxB";
pattern = /A(.*)B/;
d=pattern.exec(txt);
alert(d[1]);
期待する結果はab
でも実際はabBxxが返ってきます、後方参照ってやつですか？一番後ろのものとマッチしてしまう
これって最短距離でのマッチを取得するにはどうすれば良いんでしょうか？ ぱっとしかみてないけど
pattern = /A(.*?)B/; >>173
>>174,175
ありがとうございます
なるほど、*も+も?も単体で使うと最長一致になるけど
*?とか+?みたいに組み合わせて使うと最短一致になるんですね、ややこしい… >>177
その通りだが、一文字ならバックトラックが発生しない最長一致がいいと思う >>175 【環境】Windows 7 64bit, IE11
【何をしたのか】
$("form")で取得している内容が自分の考えと正しいかを確認したい
1. alert($("form")) → [object Object]と表示される
2. alert(JSON.stringify($("form"))) → IEが動作を停止しましたで強制終了
【エラーメッセージ】-
【期待する結果】
$("form")の中身が確認したいです
手段は選びません
console.log()は試していませんがshowModalDialogにて新規で開かれるウィンドウが描画されるまでに行われる処理のようで、コンソールを開く前に終わってしまうためalertで今は試しています
【サンプルコード】
$("form").attr("name"); >>179
自分は取得しているものが<form 〜>であると思っています
なのでHTMLが確認したいです 試してみたらfirefoxだと強制終了しないね
IEは消したからわからん >>179
試してないconsole.logやconsole.dirでいいと思うが、まず試してみては？
コンソールはモーダルウインドウが開いてなくても関係ない
あなたがほしいのは$("form")[0]な気はするが モーダルウインドウ上でコンソール出力しようとせず、モーダルウインドウを開くページから参照するとか、breakpointで止めるとか、モーダルウインドウを閉じるコードを一時的にコメントアウトするとか
モーダルウインドウを使わないのが一番だが
、Win7を使ってるならインターネットに接続してないのだろうし、相当特殊な環境だな >>181-183
ありがとうございます
>>182,183
お察しの通り過去に作られたIE用のシステムをEdgeに対応する必要があり、
現時点では当時の開発環境(VS2012)でデバッグ実行しています
JavaScriptに関わるのが初めてでとにかく動かして覚えようとしているところです
$("form")[0]は明日試してみます
console.logなどを試していない（諦めた）理由は、
動作として、親ウィンドウからshowModalDialogで子ウィンドウを開く
→子でデータを選択する→親に選択したデータが入力される という流れになっており、
親画面でF12のコンソールを開いておいても子が開かれるとモーダルにより親画面のコンソールも触れない
ので諦めたんですが、もしかしてピン止め外すと止まらないんですかね？
ピン止めした状態でしか動かしてなかったので明日試してみようとおもいます
>モーダルウインドウを開くページから参照するとか、
ウィンドウ間のやりとりがまだよくわからないのでその発想に至れませんでした
>breakpointで止めるとか、
showModalDialogで開いた後に処理される関数に貼ってみたんですが
張っていないshowModalDialogの行で止まって、関数の中をステップ実行できなかったんですよね…
関数の最初にdialogArgumentsを参照してifで分岐するんですが
showModalDialog以外で呼ばれるときはステップ実行できるのでそういうものなのかと諦めました
>モーダルウインドウを閉じるコードを一時的にコメントアウトするとか
その発想はなかったです
今後のデバッグに使ってみます
ひとまず、$("form")[0]とピン止めを試してみます html5のcanvasについて質問です
drawImageでこの画像をcanvasに描写した後、画像の白い部分だけを赤くマスクしたいです
https://illust8.com/wp-content/uploads/2018/08/icon_mail_illust_924.png
ctx.globalCompositeOperation = 'destination-in';
や
c2.globalCompositeOperation = 'darken';
を使うとオシイのですが、どうしても黒い箇所が赤くそまってしまったり、明るい方が優先されてしまったりします
何か良い手はないでしょうか？ JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。
そのため、以前できなかったことは、今でもできません。
クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、誰にとってわかりやすいかいまいち不明。
prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。
class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、勉強にならないですね。
でも理解したら、わざわざclassを使う必要がない気がします。
使いたければ使えばいいんじゃない？と思います。 >>186-187
自問自答？
使いたくなければ使わなければいいと思うが、定期的にネガキャンするのは無駄なので、止めて欲しい
>>82,110 JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。
そのため、以前できなかったことは、今でもできません。
クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、
誰にとってわかりやすいかいまいち不明。
prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。
class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、
勉強にならないですね。
でも理解したら、わざわざclassを使う必要がない気がします。 >>179
const form = $( 'form' )
console.log( form.length, form[ 0 ] )
HTML 内に、フォームが1つしかないなら、
form.length は1 で、form[ 0 ] でform 要素を取得できる
<form action="" id="form_1" name="form_1">
みたいに、id を付けた方が良いかも
そうすれば、これで取得できる
const form_1 = $( '#form_1' )
まあ、HTML, JavaScript, jQuery の質問は、
この板よりも、web制作管理板の方へ書き込んでください
向こうのスレが、本スレです 今は、class を使う
今さら、prototype を使う人は、いない 中がprototypeだとか別に関係ないだろう。外から見てclassとして振舞うならそれでいいわけだし。
classとしての振る舞いに何か問題があるならそこは注意すべきだが。 みなさんjavascript何年目？
オレは2年。 昼食が3億!?AppleCEOや投資の神様とのランチ権オークションがすごい
スティーブ・ジョブズが亡くなった後にAppleのCEOになったのがティム・クック氏です。
そんな彼との1時間のランチ権が今年4月から5月にかけてCharitybuzzというオークションサイトに
出品され、$515,000（約5,150万円）で落札されました！
実はクックは過去にも同様の出品をしていて、今年の出品で4回目となります。
2000年からこれまでに計17回出品されているのが、「投資の神様」とも呼ばれるウォーレン・バフェット氏
とのランチミーティング権。2003年からは、世界最大級のオークションサイト「eBay」で毎年開催される
チャリティー・オークションのひとつとして出品されています。
今年6月に出品された際には、なんと$3,456,789(約3億4,568万円)で落札されました！ fc2ブログを使用しているのですが、javascriptが動かない設定などあったりするのでしょうか？
<script type="text/javascript">alert("hoge");</script>
また、動かない原因をブラウザの検証から調べる事はできますか？ 文字数の制限をしたいのですが、htmlでoverflow hiddenするのとjsでカットするのはどちらがいいんでしょうか？
ブログのトップページなんですが、本文の１部を表示させておいて、続きを読むというリンクを設置したいなと。
<div id="text">１２３４５６７８９</div>
<script>
let text = document.getElementById("text");
let inner_text = text.innerHTML;
let text_length = inner_text.length;
let max_length = 5;
if(text_length > max_length){
console.log("5文字超えてます");
text.innerHTML = inner_text.substr(0,max_length);
}
</script>
これで動きはしましたけど x=<span id="x">0</span>,y=<span id="y">0</span>
<p> </p>
<div style="text-align:center">
<canvas id="canvas"></canvas>
</div>
<スクリプト>
var canvas_elm = document.getElementById("canvas");
var x_elm = document.getElementById("x");
var y_elm = document.getElementById("y");
var context = canvas_elm.getContext("2d");
canvas_elm.width = 600;
canvas_elm.height = 500;
context.fillStyle = "#0000ff";
context.fillRect(0,0,canvas_elm.width,canvas_elm.height);
canvas_elm.addEventListener(
"mousemove",
function(e){
x_elm.innerHTML = e.offsetX;
y_elm.innerHTML = e.offsetY;
}
);
</スクリプト>
canvas上でのマウスやタッチポインターの座標を表示したいんですけど、、PCではこれで座標が表示されるけど
mousemoveをtouchmoveにしてchromeでF12キーを押してスマホモードにしてタッチポインターを動かしたときxy座標がundefinedと表示されてしまいます。
スマホモードでもポインターの位置を表示できるようにするにはどうやればいいんですか？ スマホなど、色々なデバイスに対応させるのは、
React, Vue.js などのフレームワークを使うのでは？
それと、JavaScript の質問は、この板よりも、
web制作管理板の方へ書き込んでください！
この板のスレは、荒らしが出て、緊急避難用に立てたものだから >>201
Ruby on Rails では、続きを読むのは、truncate(文字数)。
Railsがどういう実装をしているかまでは知らないけど
npm とか、Lodash とかに、そういう関数が無いのか？
「javascript 続きを読む」「css 続きを読む」で検索してみれば？ >>202
タッチイベントにはevent.offsetX, event.offsetYはありません
event.changedTouches[0].pageX等から計算してください ■ このスレッドは過去ログ倉庫に格納されています
