- 1 名前：デフォルトの名無しさん mailto:sage [2022/08/07(日) 15:57:40.26 ID:TS5TGpUB0.net]
- !extend:checked:vvvvvv:1000:512
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-5のテンプレを読んだ上で質問してください。次スレは>>950が>>2の「次スレの立て方」を元に立ててください
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
■前スレ
JavaScript の質問用スレッド vol.124
https://mevius.5ch.net/test/read.cgi/tech/1636525464/
VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured
- 2 名前：デフォルトの名無しさん mailto:sage [2022/08/07(日) 15:59:57.05 ID:TS5TGpUB0.net]
- ■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
https://plnkr.co/ jsbin.com/ jsfiddle.net/ ideone.com/
■次スレの立て方
本文一行目に「!extend:checked:vvvvvv:1000:512」と書いて、>>1-5のテンレの「前スレ」「関連スレ」を最新化して立ててください。
■JavaScriptスレの現状
元々はWeb制作板が本スレでしたが、ライブラリ信者に荒らされ、プログラム板に避難所として本スレが立てられました。
Web制作板の本スレは荒らされてから次スレが立っておらず、重複スレの消化のみとなっています。
実質的に本スレは存在しない為、質問者はWeb制作板、ブログラム板のどちらのスレで質問しても問題ありません。
- 3 名前：デフォルトの名無しさん mailto:sage [2022/08/07(日) 16:02:05.65 ID:TS5TGpUB0.net]
- ■関連スレ(Web制作板)
JavaScript の質問用スレッド vol.126 (重複スレの消化)
https://mevius.5ch.net/test/read.cgi/hp/1439005423/
JavaScript ライブラリ総合質問所 vol.5
https://mevius.5ch.net/test/read.cgi/hp/1465399470/
jQuery 質問用スレッド vol.7
https://mevius.5ch.net/test/read.cgi/hp/1466750494/
■各種仕様
◆ECMAScript
bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
https://262.ecma-international.org/13.0/ (ECMAScript 2022)
◆HTML Standard (HTML5)
www.whatwg.org/specs/web-apps/current-work/multipage/ (HTML Living
Standard)
https://momdo.github.io/html/ (HTML Living
Standard日本語訳)
- 4 名前：デフォルトの名無しさん mailto:sage [2022/08/07(日) 16:05:31.17 ID:TS5TGpUB0.net]
- テンプレここまで。
テンプレは前スレ、前々スレを元に、よくある議論(Web制作板へ誘導云々)を独断で追加した。
問題があれば、修正案を提案して頂ければ。
- 5 名前：デフォルトの名無しさん mailto:sage [2022/08/07(日) 16:08:52.26 ID:GMB7hjKM0.net]
- 乙
- 6 名前：デフォルトの名無しさん [2022/08/07(日) 17:10:09.37 ID:r7YsBDkd0.net]
- > Javascript はweb制作管理板、CGI はWEBプログラミング板へ。
これは？
- 7 名前：デフォルトの名無しさん mailto:sage [2022/08/07(日) 17:57:12.51 ID:TS5TGpUB0.net]
- >>6
プログラム板のローカルルールか
「今ではNode.jsもあるし、JavaScriptはWeb制作言語に限定されないよね」を理由にプログラム板に立てられた、と記憶してる
Node.jsスレを関連スレに入れるべきだった
【非同期】node.js part.1【javascript】
https://mevius.5ch.net/test/read.cgi/tech/1582906877/
- 8 名前：デフォルトの名無しさん mailto:sage [2022/08/08(月) 23:23:18.64 ID:RzP/TMnO0.net]
- この板のJavaScript スレは、
web制作管理板が荒らされた時に、緊急避難用として立てられたもの
もう、この板でやる必要はない。
web制作管理板の方へ移動すべし！
全く、HTML, jQuery などに関係ない、
Node.js でも扱うなら、この板でも良いけど、
基本、Ruby on Rails などのフレームワークは、WEBプログラミング板
- 9 名前：デフォルトの名無しさん mailto:sage [2022/08/10(水) 07:14:35.84 ID:vRPAjQH+0.net]
- >>8
本スレがなく、ライブラリ信者が健在なWeb制作板に移動する理由はないと思う
- 10 名前：デフォルトの名無しさん mailto:sage [2022/08/10(水) 10:46:13.57 ID:j9H+Z2W1r.net]
- >>8はRubyを引き合いに出す件の荒らしだから気にしなくていい
- 11 名前：デフォルトの名無しさん [2022/08/14(日) 02:20:20.36 ID:/Eqen91K0.net]
- 🦏
- 12 名前：デフォルトの名無しさん [2022/08/18(木) 14:56:28.79 ID:ZVXdu8CF0.net]
- ローカルのhtmlファイル内に記載してるjsで位置情報取得するコードを書いてるのですが、
毎回位置情報を尋ねられてしまいます。
webサイトのページなら位置情報の使用許可を一度設定すれば、そのサイトでは次から尋ねられなくなりますが、
ローカルのhtmlファイルを開いても同様に永続的に位置情報の使用を尋ねられないようにする方法はありますか？
ブラウザはchrome使ってます。
- 13 名前：デフォルトの名無しさん [2022/08/18(木) 15:27:03.90 ID:qt1eMpHHa.net]
- https://support.google.com/chrome/a/answer/2657289?hl=ja
https://support.google.com/chrome/answer/114662?hl=ja
- 14 名前：デフォルトの名無しさん [2022/08/18(木) 15:28:26.33 ID:qt1eMpHHa.net]
- あとは https にしてみたらどうか
atmarkit.itmedia.co.jp/ait/articles/1605/13/news038.html
- 15 名前：デフォルトの名無しさん mailto:sage [2022/08/18(木) 15:37:16.04 ID:P/iDblewM.net]
- file:はともかくhttp:にも機能制限かけるのは逆効果だと思う
クラウド売りたい一心なのだろうけどオレオレ証明書が増えてかなわんよ
- 16 名前：デフォルトの名無しさん mailto:sage [2022/08/18(木) 19:42:08.69 ID:FZFlEvPV0.net]
- そもそもwebアプリ作るなら仮想環境なり、dockerなりで開発環境を作った方が良いかと
- 17 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ cb01-gduT [60.151.253.164]) mailto:sage [[ここ壊れてます] .net]
- すんませんjQueryの質問なんやけど
eachでliタグの子要素のimgタグを取得してalt属性を追加して値はliタグの子要素のemタグのテキストにしたいんだが
全部のliタグの子要素のemタグのテキストを追加してしまう
対応するliタグの子要素のemタグのテキストをそれぞれ追加したいんや！
おせーてくれ！！たのんます！！
- 18 名前：デフォルトの名無しさん mailto:sage [2022/08/18(木) 21:48:22.57 ID:J6oxun4X0.net]
- >>17
スレ違い
>>3のjQueryスレへ誘導
- 19 名前：デフォルトの名無しさん mailto:sage [2022/08/19(金) 12:26:38.67 ID:l81SyMmZ0.net]
- jQuery の質問は、web制作管理板の方へ書き込んでください
確か、jQueryのスレがあったと思う。
無ければ、JavaScript のスレへ
- 20 名前：デフォルトの名無しさん mailto:sage [2022/08/19(金) 13:26:53.16 ID:v8JNzl630.net]
- japascriptは難しい。
初心者はまずはRubyから始めること
そしてRuby on Railsを習得する
javascriptｙとjQueryはその後で良い。
こっちのスレで質問すれば親切な達人プログラマーがどんな質問にも懇切丁寧に答えてくれる。
↓
Ruby 初心者スレッド Part 67
https://mevius.5ch.net/test/read.cgi/tech/1608837867/
- 21 名前：デフォルトの名無しさん [2022/08/19(金) 18:14:31.50 ID:KbHvsoqL0.net]
- clickのタイミングについて
<input type="button" value="クリック" id="bt">
let aaa=0;
setInterval(
function(){
aaa=100;aaa=200;aaa=300;aaa=400;aaa=500;
},0
);
document.getElementById("bt").addEventListener(
"click",
function(e){alert(aaa);}
);
何回クリックしても500と表示されるけど500以外が表示されることはないんでしょうか？
aaaが200のときにクリックが割り込むとかはないんですか？
- 22 名前：デフォルトの名無しさん [2022/08/19(金) 18:41:35.47 ID:hN4Icouo0.net]
- >>21
タイマー処理の関数呼び出しの途中でイベントハンドラが処理されることはない
- 23 名前：デフォルトの名無しさん [2022/08/19(金) 18:53:07.56 ID:KbHvsoqL0.net]
- >>22
どうもです
タイマー以外のfunctionでもfunctionの途中でイベントハンドラが呼び出されることはないってことですか？
- 24 名前：デフォルトの名無しさん [2022/08/19(金) 21:41:37.23 ID:PiTy7UnQ0.net]
- JavaScriptは基本シングルスレッド
関数の実行途中に別の関数の処理が割り込んでくるようなことはない
- 25 名前：デフォルトの名無しさん mailto:sage [2022/08/19(金) 23:29:36.47 ID:icsyH/kW0.net]
- >>23
非同期処理が混在していなければ、ない
- 26 名前：デフォルトの名無しさん mailto:sage [2022/08/20(土) 10:52:07.09 ID:y/gx0kbE0.net]
- Wan、Lanどちらからもアクセス可能なWebサーバーで
アクセス元がどっちなのかを判断する方法はありますか？
- 27 名前：デフォルトの名無しさん mailto:sage [2022/08/20(土) 11:45:31.91 ID:ThG9yriU0.net]
- >>26
送信元アドレス見ればよくね？
- 28 名前：デフォルトの名無しさん [2022/08/20(土) 12:02:01.28 ID:tDO3e6hW0.net]
- サーバーで判断すべきだろう
クライアントで知りたいならサーバーに聞けばいい
- 29 名前：デフォルトの名無しさん mailto:sage [2022/08/20(土) 12:48:23.28 ID:y/gx0kbE0.net]
- 確かにそうですよね
サーバー側で何とかしてみます
- 30 名前：デフォルトの名無しさん [2022/08/21(日) 00:53:25.42 ID:aTZvlMved.net]
- ナンセンスな質問かもしれませんが、JavaScriptにおいて関数はデータ型としてオブジェクトであり、一方でオブジェクトはプロパティとメソッドの集まりであると説明されています。
関数とオブジェクトはどちらが先に定義されているのでしょうか？
- 31 名前：デフォルトの名無しさん mailto:sage [2022/08/21(日) 07:04:02.83 ID:D11cwWL50.net]
- >>30
「先に定義」とは、どのような意味？
- 32 名前：デフォルトの名無しさん [2022/08/21(日) 10:31:51.96 ID:3ESrn3ezd.net]
- >>31
先に存在しているとか先に実装されている(?)というようなイメージです
- 33 名前：デフォルトの名無しさん mailto:sage [2022/08/21(日) 10:42:02.01 ID:KqCcLvyW0.net]
- >>30
定義が無限循環してると言いたいんだろうけど広辞苑にだってそういうのはあるし、関数ノットイコールメソッドと考えれば矛盾はしてない
たぶんオブジェクトが先だろうけどね
- 34 名前：デフォルトの名無しさん [2022/08/21(日) 11:25:21.77 ID:df/SIE01d.net]
- >>33
ありがとうございます
もう少し調べてみると、 https://tc39.es/ecma262/multipage/overview.html#sec-ecmascript-overview でTerms and Definitionsのところに、関数はオブジェクトであってプロパティの他に実行可能なコードと状態を持つもの、という感じのことが書かれてて、メソッドはオブジェクトのプロパティの値である関数のことと書かれていました
こちらの説明で一旦納得できました
- 35 名前：デフォルトの名無しさん [2022/08/21(日) 11:46:37.18 ID:j3ukytx2a.net]
- v8のソースでも読んでみれば
- 36 名前：デフォルトの名無しさん (ﾌﾞｰｲﾓ MM8b-mKyu [133.159.148.135]) mailto:sage [[ここ壊れてます] .net]
- オブジェクトが先
オブジェクトはプロパティのコレクション
プロパティとはkey/valueのペアのこと
keyはStringでvalueはプリミティブかオブジェクト
- 37 名前：デフォルトの名無しさん (ﾌﾞｰｲﾓ MM8b-mKyu [133.159.149.74]) mailto:sage [[ここ壊れてます] .net]
- オブジェクトを定義するのにオブジェクトを使ったりStringという別のオブジェクト使えるの？
と疑問に思うのかもしれないけど
定義が存在する(名前解決可能である)ことを確認するフェーズと
定義の中身を検証するフェーズを分けることで可能
foo関数の中でbar関数を呼び出しつつ
bar関数の中でfoo関数を呼び出すような関数定義ができるのと同じこと
- 38 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ d501-dbST [60.87.221.16]) mailto:sage [[ここ壊れてます] .net]
- >>32
「実装」というが、「仕様」上で両方とも存在しているなら、同時に「実装」されるのでは？
>>34
ES3には「オブジェクト」の定義はあるが、「関数」の定義はない
故に「歴史的にはオブジェクトが先に定義された」といえなくもないが、そんな回答を望んでいるようにも見えない
www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/4_Overview.html#section-4.2.1
参考になるかわからないが、typeof演算子は「[[Call]] を持つObject型」の場合に "function" を返す
https://262.ecma-international.org/13.0/#sec-typeof-operator
- 39 名前：デフォルトの名無しさん mailto:sage [2022/09/02(金) 16:08:14.77 ID:anBQQFEld.net]
- ブックマークレットのスレッドかこちらか悩みましたが質問なのでこちらでご相談させていただきます。
他者のWebサイトを閲覧する際、JavaScriptを用いて作成されている場合、リンクを新しいタブで開けない場面があります。
頻繁にページを進んだり戻ったりする場面、可能であればリンク先を別タブで開くようにしたいです。
ブックマークレットを用いて、現在ページのJavaScriptのリンクを別タブで開くように書き換える処理をすることは可能でしょうか？
- 40 名前：デフォルトの名無しさん mailto:sage [2022/09/02(金) 16:38:05.47 ID:avuNeQJi0.net]
- >>39
そのサイト次第かな
クリックした後の画面を一発で開けるURLが用意されてたら基本的に実装できると思う
- 41 名前：デフォルトの名無しさん mailto:sage [2022/09/03(土) 00:11:31.61 ID:8AM/s+hA0.net]
- 連想配列から特定のキーを検索して、重複がないもののみ取り出した配列を取得したいのですが、
このコードだと速度的に問題がありました。何か良い方法があったら教えていただけないでしょうか
const a= [
{'id': 1, 'category': 'animal', 'kind': 'dog'},
{'id': 2, 'category': 'fruit', 'kind': 'apple'},
{'id': 3, 'category': 'fruit', 'kind': 'orange'},
{'id': 4, 'category': 'animal', 'kind': 'dog'},
{'id': 5, 'category': 'animal', 'kind': 'cat'},
{'id': 6, 'category': 'fruit', 'kind': 'grape'},
]
var b=a.filter((x,y,z)=>z.slice(0,z.length).filter(w=>w.kind==x.kind).length＝=1);
console.log(b);
- 42 名前：デフォルトの名無しさん mailto:sage [2022/09/03(土) 02:15:20.35 ID:Wm/0iruN0.net]
- >>41
const buckets = a.reduce((buckets, current) => {
if (!buckets[current.kind]) {
buckets[current.kind] = [current];
} else {
buckets[current.kind].push(current);
}
return buckets;
}, {});
const b = Object.values(buckets)
.filter((items) => items.length === 1)
.flat();
速度は測ってないけどたぶんO(n^2)→O(n)になって速いはず
- 43 名前：デフォルトの名無しさん mailto:sage [2022/09/03(土) 03:34:12.57 ID:E5gjC2rTd.net]
- Mapで似たようなこと考えてた
- 44 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 3501-bBdM [126.94.243.226]) mailto:sage [[ここ壊れてます] .net]
- >>41
要素数や重複要素のばらつき具合によって結果は変わるが、最終的には力業が最速な事が多い
https://jsfiddle.net/gft5ah0n/
極端な結果になっているのは重複要素がすぐそばにあり、while文による検索ですぐに見つかる為だ
重複要素が遠い位置にあるなら、while文による検索が遅くなるケースも十分にある
>>41のコードが比較的高速なのも重複要素が比較的近くにある為だ
Object.valuesやArray#filterによる変換コストが検索コストより高くついているので、他のコードが比較的遅い
重複検知が頻繁に発生するようであれば、データのも持ち方を new Map や new Set を使うように変更した方がいい
配列はユニークな値を得るのに向いていない
- 45 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 3501-bBdM [126.94.243.226]) mailto:sage [[ここ壊れてます] .net]
- >>44の補足
jsfiddleのconsoleはconsole.time()を実装していないようだ
ベンチマーク結果はブラウザのコンソールで確認する必要がある
- 46 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 3501-bBdM [126.94.243.226]) mailto:sage [[ここ壊れてます] .net]
- すまん
>>44のwhile_loopは期待通りに動かないので忘れてほしい(console.assert()のコードをミスって気づかなかった)
重複要素のばらつき具合によるが、(>>41の配列においては)暫定最速は>>41
- 47 名前：デフォルトの名無しさん mailto:sage [2022/09/03(土) 10:46:53.92 ID:RJZpwhgn0.net]
- >>46
console.assert()の修正、重複チェックをkindのみに修正したら、mapが最速になった
https://jsfiddle.net/bw8z2acf/
- 48 名前：デフォルトの名無しさん mailto:sage [2022/09/03(土) 11:16:26.73 ID:RJZpwhgn0.net]
- >>47
高速化で考えるべきは「ループ回数の削減」と「変換回数の削減」
>>41 source
>>42 reduce
>>47 map
reduceはループ回数は削減されているが、変換回数がsourceよりも多い
要素数6では「変換コスト > 検索コスト」になってしまい、sourceよりも遅い
要素数192では「変換コスト < 検索コスト」となるので、sourceよりも速い
mapの変換回数は2回で Array.from() と results.values() のみ
ループ回数、変換回数ともにsource,reduceよりも少ない
要素数6、要素数192のいずれも map が最速となる
実際のところ、変換を一度も発生させないコードが理想となる
データの持ち方として配列(new Array)であるべきなのか、はよく考えた方がいい
- 49 名前：デフォルトの名無しさん mailto:sage [2022/09/03(土) 11:42:14.57 ID:RJZpwhgn0.net]
- >>39
a要素でマークアップされているなら、難しくはない
for (let a of document.querySelectorAll('a[href]')) a.target = '_blank';
window.open()などでリンクを開く挙動もJavaScriptで制御しているなら、コードを読んでリンク先を得る手段を考える必要がある
- 50 名前：デフォルトの名無しさん mailto:sage [2022/09/04(日) 09:22:10.61 ID:eAq4eNQY0.net]
- >>40
>>49
ありがとうございます。
テーブルの表示となっていて、行全体にリンクが設定されているようです。
以下のような記載が複数並んでおり、通常は左クリックでリンク先に移動しかできず、新しいタブで開くことができません。
<tr class=”〇〇〇” data-href=”★リンク先アドレス★” data-target=”〇〇〇”>
<td class=”〇〇〇”></td>
<td class=”〇〇〇”></td>
</tr>
素人ながらいくつかブックマークレットで試したのですが、逆に実行するとリンクが無効になる事が多々でした。
アドバイスをいただければ幸いです。
- 51 名前：デフォルトの名無しさん [2022/09/04(日) 12:38:54.82 ID:FoFuUBY00.net]
- <div style="width:100%;height:200px;border:Solid 3px #0000ff" id="test"></div>
これのcss初期設定を取得したいのでstyle="○○"の○○部分を抽出したいんだけどやり方がわかりません。
element.style.widthみたいに取得すると途中で値を書き換えられると初期設定が得られないので
最初にタグに埋め込んであるものを取得したいんです。
- 52 名前：デフォルトの名無しさん mailto:sage [2022/09/04(日) 20:07:02.96 ID:KWOOnIlI0.net]
- getAttributeとか？
- 53 名前：デフォルトの名無しさん mailto:sage [2022/09/04(日) 20:23:24.42 ID:FTTWPGH/0.net]
- element.style.hoge=fugaしたらstyle属性値も連動するんだから
書き換える前に取得しとくしかなくね？
- 54 名前：デフォルトの名無しさん mailto:sage [2022/09/04(日) 21:15:03.99 ID:SMoCQy1h0.net]
- >>51
・直後にscript書いて書き換え前にstyleを取得しておく
・Fetch APIでhtmlをGETしてCSPでscript無効化してparseしてstyleを得る
- 55 名前：デフォルトの名無しさん [2022/09/04(日) 22:38:54.08 ID:FoFuUBY00.net]
- >>52-54
ありがとうございました
- 56 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ d52c-6nWD [180.52.202.152]) mailto:sage [[ここ壊れてます] .net]
- >>50
開発者が、どのフレームワークを使っているのか分からないけど、
例えば、Ruby on Rails, Stimulus を使っているなら、
[Rails]Stimulusを使ってtableの行全体<tr>をリンクにする(jQuery不要)
https://zenn.dev/necocoa/articles/rails-stimulus-tr-link
これのhref_controller.js に、
export default class extends Controller {
toHref(event) {
// 既定の動作を取り消す
event.preventDefault()
// data-href 属性に入っている、URL を取得する
const href = event.currentTarget.dataset['href']
// URL を設定する
window.location.href = href
}
}
- 57 名前：56 mailto:sage [2022/09/04(日) 23:14:48.88 ID:9ocqxCfk0.net]
- >>56
// URL を設定する
window.location.href = href
みたいに直接、window.location.href に設定しているけど、
この場合、Ctrl + クリックや、
右クリックメニューから新しいタブで開くことは出来ないのかな？
- 58 名前：デフォルトの名無しさん mailto:sage [2022/09/04(日) 23:26:45.19 ID:RdtW7bNN0.net]
- >>50
遷移する時にdata-targetが使われることを見込んでこれでいけるかもね
for (let tr of document.querySelectorAll('tr.〇〇〇')) tr.dataset.target = '_blank'
※〇〇〇はtrのクラス名で
- 59 名前：デフォルトの名無しさん mailto:sage [2022/09/05(月) 18:27:01.95 ID:XvLqNcU6H.net]
- document内の要素で、textContentに'xxx'を持つクラスを取得するにはどうしたらいいですか？
全部の要素総当たりでtextContent調べるしかないんでしょうか？
- 60 名前：デフォルトの名無しさん mailto:sage [2022/09/05(月) 18:51:10.83 ID:ng2JfbNn0.net]
- >>50
JavaScriptコードが不明なので正確な回答は不可能
>>58の想定通りなら、おそらくその実装が一番楽
tr要素ノードにclickイベントハンドラでwindow.openする実装と仮定して、下記実装が考えられる
1. elementdataset.hrefでリンク先アドレスを得る
2. createElementでa要素ノード生成
3. replaceChildで(A)のDOMになるよう調節
4. tr要素ノードの仕掛けられたであろうclickイベントハンドラをevent.stopImmediatePropagation()で封印
(A)
<tr class=”〇〇〇” data-href=”★リンク先アドレス★” data-target=”〇〇〇”>
<td class=”〇〇〇”><a href=”★リンク先アドレス★”></a></td>
<td class=”〇〇〇”><a href=”★リンク先アドレス★”></a></td>
</tr>
window.open()なんてレガシーコード書きたくないからあえて
- 61 名前：a要素を使っているが、
イベントを横取りできるなら、既存イベントハンドラと同じコードにしても良い [] - [ここ壊れてます]
- 62 名前：デフォルトの名無しさん mailto:sage [2022/09/05(月) 19:18:18.86 ID:ng2JfbNn0.net]
- >>59
XPath式を使えば、textContentを使わなくて済む
https://jsfiddle.net/kb5e740f/
- 63 名前：デフォルトの名無しさん mailto:sage [2022/09/05(月) 19:25:28.71 ID:ng2JfbNn0.net]
- >>61
テキストノードを子に持つ要素ノードを捕捉するコードにすればよかった
https://jsfiddle.net/kb5e740f/1/
- 64 名前：デフォルトの名無しさん (ｱｳｱｳｳｰ Sa69-QaXK [106.129.180.164]) [[ここ壊れてます] .net]
- プログラミング初心者でJavaScriptを勉強してます。
メンバ変数A、メソッドBを持つクラスがあり、メソッドBの中で変数Aを活用（Aを用いた処理やAの変更）したいのですが、
Aを引数としてBに渡して返り値として受け取るのと、Bの中で直接this.Aと記述して処理するのは何か違いがありますか？
メソッドBに別の変数を渡す可能性があるなら前者でないといけないのでしょうが、そうでなければ後者の書き方でよいでしょうか？
- 65 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 6501-vbgY [60.85.61.123]) mailto:sage [[ここ壊れてます] .net]
- >>63
this.Aは全てのインスタンスメソッドで参照できる
this.Aはインスタンスを参照可能なスコープ上で参照可能
仮引数AはメソッドBの関数スコープ外から参照不可能
- 66 名前：デフォルトの名無しさん mailto:sage [2022/09/07(水) 19:11:15.04 ID:8NMkvrFG0.net]
- Ruby で書くと、
initialize は、constructor
class A
def initialize
@x = 0
end
def f_1
@x = 1
end
def f_2( num )
@x = num
end
end
p a = A.new #<A: @x=0>
a.f_1
p a #<A: @x=1>
a.f_2( 2 )
p a #<A: @x=2>
- 67 名前：デフォルトの名無しさん [2022/09/07(水) 19:17:44.81 ID:GIiuva0od.net]
- >>64
それ何にも疑問の解決になってないだろう
- 68 名前：デフォルトの名無しさん [2022/09/07(水) 20:26:24.25 ID:LU0OXBc/0.net]
- >>66
↓のsetAとcalcAの違いを聞いてるんじゃないのか？
class Foo {
constructor (a) {
this.A = a;
}
setA (a) {
this.A = calc(a);
}
calcA (a) {
return calc(a);
}
}
わかっているらしいあなたが回答すれば済む話だが
- 69 名前：デフォルトの名無しさん [2022/09/08(木) 00:18:00.64 ID:rIQlC2lz0.net]
- すいません。以下の様な状況でfuncCからfuncBまたはB'が呼ばれる状況を考えていました。B'のほうが楽な気がして。そもそも意味不明な質問だったら申し訳ないです…
```
class Foo{
varA; // varAの値はよそから取得
funcB (a){
//aに対する処理
return a;}
funcB' (){
//this.varAに対する処理
}
funcC(){
ans = funcB(this.varA);
または
funcB'();
ans = this.varA;
}
}
- 70 名前：65 mailto:sage [2022/09/08(木) 07:17:36.21 ID:eI1uoUaK0.net]
- Ruby では、>>65
に書いたように、
def f_1
@x = 1
end
みたいに、クラス内のインスタンスメソッド・f_1 内で、
インスタンス変数・@x を使えるので、一々、引数で渡す必要がない
- 71 名前：デフォルトの名無しさん mailto:sage [2022/09/08(木) 19:40:45.35 ID:6QKcdu8L0.net]
- オブジェクト指向の一般的な話としては、クラス内の関数であればクラス内のメンバはいじっても問題ないと思う。
ただ、「どこの関数がこのメンバを触ってるのかわからない」ってほどクラスが巨大化するなら、もはやそれはたちの悪いグローバル変数そのものなので設計からおかしい。
- 72 名前：デフォルトの名無しさん mailto:sage [2022/09/08(木) 22:51:00.93 ID:D/mmzJCP0.net]
- >>68
一つ一つのコードの意味を理解して、一つ一つのコードでなぜをそれを使うのか、と自問して答えを出せば、自ずと答えが出てくる
質問していない部分で突っ込みどころが多すぎて、「何も考えてないんだな」と思わせられる
https://jsfiddle.net/qem7cLyf/
・なぜ 全ての関数は返り値を持たないのか？
・なぜ Foo1#funcB は静的関数ではないのか？
・なぜ Foo1#funcC,Foo2#funcC は返り値ではなく、グローバル変数に演算結果を格納したのか？
・なぜ Foo2#varA の初期化にコンストラクタの引数を使わないのか？
こういう質問全てにこたえられるぐらいに考えられないと良いコードはかけない
https://jsfiddle.net/s27mxepn/
・可能な限り、変数のスコープはせまくあるべき
・可能な限り、関数は参照透過性を持つべき
今後、インスタンスプロパティを拡張する予定があるならclassを使うべきだし、そうでないなら静的関数で十分
>>64で示した挙動の違いだけで十分に判断できる
- 73 名前：デフォルトの名無しさん mailto:sage [2022/09/08(木) 23:10:43.06 ID:DGEh14TYr.net]
- それがプログラミング初心者に投げつける言葉かよ・・・
そういう知識や判断力もゆくゆくは必要だけども物事には順序ってもんがあってまだその域ではなかろう
マウントが取りたいだけならもっと近いレベルの相手にやんなよ
- 74 名前：デフォルトの名無しさん mailto:sage [2022/09/08(木) 23:23:08.03 ID:xrpQvLAzM.net]
- >>63
いいと思うよ
というかBに汎用性を持たせるのは微妙
- 75 名前：デフォルトの名無しさん [2022/09/09(金) 09:56:50.51 ID:Rq87TVpoa.net]
- this.Aで書いた方が手っ取り早いことが多い気がしたのですが、そちらでもいいけどスコープに注意しないとバグの要因になる、グローバル変数を濫用しないようにというのと相似形の似たような話という認識でいいでしょうか。
下手したら必然性なく両者を混在させてしまったりしそうなので注意したいと思います。参照透過性とか言葉自体知りませんでした…
参考になりました。ありがとうございます。
- 76 名前：デフォルトの名無しさん [2022/09/09(金) 11:06:49.13 ID:hB1+BppPd.net]
- >>74
今は>>70の理解でいいと思うよ
今の時点であまり詰め込んでもしょうがないし
>>71みたいなののせいで萎縮しないでね
- 77 名前：デフォルトの名無しさん mailto:sage [2022/09/09(金) 19:12:54.25 ID:0zkp1JmC0.net]
- >>72
> 物事には順序ってもんがあってまだその域ではなかろう
順序が大切なことには同意
ダメ出しがたくさんあるのは「学習の順序」が間違っているから
いろいろと学習を飛ばしてコードを書いており、その質問をする域に達していない
初心者だからこそ、もっと基礎的な課題から取り組むのが現実解だと俺は思う
今までの受け答えを見る限り、付け焼刃で知識をつけているように俺には見える
> マウントが取りたいだけならもっと近いレベルの相手にやんなよ
マウントを取りたいわけじゃない
- 78 名前：デフォルトの名無しさん mailto:sage [2022/09/09(金) 20:14:57.93 ID:n8dQNxep0.net]
- だから、オブジェクト指向とかプログラミングは、Ruby から始めるべき。
JavaScript(JS)みたいなややこしいもので、デザインパターンを学ぶべきではない
改訂2版 Ruby逆引きハンドブック
の1冊だけで、かなりのモジュール・ライブラリの使い方も分かる
同じページ数でも、JSなら、文法だけで終わる。
20年以上のJSの歴史を追っかけて行くから、文法だけでもRubyの5倍ぐらいある
だから、こういう言語へ手を出したらダメ。
Rubyist は、JSなどをコピペで済ます。
深い所までやらない。分量的に切りがない
- 79 名前：デフォルトの名無しさん mailto:sage [2022/09/10(土) 00:48:49.86 ID:1NdnS3vZ0.net]
- 学習の順序とか提示せずに「何も考えてない」と切り捨てるのはマウンティングに入らないんですか？
- 80 名前：デフォルトの名無しさん mailto:sage [2022/09/10(土) 06:13:53.00 ID:Cpvx7Vnj0.net]
- 回答者相手にマウントとってる人に真面目に答えるだけ無駄か
そんな暇があったら、質問者に回答すればいいのに
- 81 名前：デフォルトの名無しさん mailto:sage [2022/09/10(土) 09:58:22.29 ID:aLnVTfHzr.net]
- 君は高圧的な正しさで初心者を殴ってるだけ
人にものを教えるのには向いてないと思うよ
- 82 名前：デフォルトの名無しさん mailto:sage [2022/09/10(土) 11:01:57.14 ID:Cpvx7Vnj0.net]
- >>80
5chはそういうものと思っていたが、それがこのスレの流儀なら気を付ける
だが、回答者に高圧的だったり、回答者にマウントをとる人も是正されるような公平な世界であってほしいね
- 83 名前：デフォルトの名無しさん mailto:sage [2022/09/10(土) 11:48:27.08 ID:DabBJhVCr.net]
- 具体的にどの発言に対して言ってるのかわからんけど
そういう何か言い返さないと気がすまないって気持ちは心の中にしまっておいた方がいいんじゃないかな
- 84 名前：デフォルトの名無しさん (ｽｯﾌﾟ Sd33-A6fq [49.97.111.223]) mailto:sage [[ここ壊れてます] .net]
- 自分の過ちを認めると負けたみたいでプライドが傷つくから
俺も悪かったけどお前らも悪いから引き分けだよねということにしたい心理の表れ
- 85 名前：デフォルトの名無しさん [2022/09/11(日) 20:15:23.24 ID:yDUj5jeF0.net]
- 元の配列を関数内で空にしたいけどうまくいきません
100と表示されてしまったので空になっていませんでした。
配列は参照渡しなので元の配列も書き換えられると思ったんだけど
どうやれば関数内で元の配列を空にできますか？returnは使いたくないです。
let a_list = [100,200,300];
test(a_list);
function test(b_list){
b_list = [];
}
alert(a_list[0])
- 86 名前：デフォルトの名無しさん mailto:sage [2022/09/11(日) 20:29:51.41 ID:bqV48/aB0.net]
- >>84
function test(b_list) {
b_list.length = 0
}
- 87 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 6910-V+uT [180.12.82.129]) [[ここ壊れてます] .net]
- >>85
できました
ありがとうございます
- 88 名前：デフォルトの名無しさん [2022/09/12(月) 09:29:51.85 ID:ptOOOLgwr.net]
- b_list = [];
が何故ダメかというとb_listを空にしてるんじゃなくて
b_listに新しい配列を代入してるだけだから
ということは覚えておこう
- 89 名前：デフォルトの名無しさん mailto:sage [2022/09/23(金) 01:20:03.32 ID:93J4lVSi0.net]
- ブラウザで動かすとき、グローバルスコープでの demo って名前は何かある？
この名前の関数作ってボタンの onclick から呼び出そうとしたら関数未定義のエラーになる。
別の名前にすると呼び出せる。
- 90 名前：デフォルトの名無しさん (ｽｯﾌﾟ Sd43-Kpwt [49.97.97.207]) mailto:sage [[ここ壊れてます] .net]
- タイポかスコープの勘違いとかじゃないの？
コンソールでdemo関数定義して実行したら普通に動いたけど
- 91 名前：デフォルトの名無しさん mailto:sage [2022/09/23(金) 10:32:57.61 ID:UxdKoKVd0.net]
- >>88
再現可能なコードを出してみたら？
https://ja.stackoverflow.com/help/minimal-reproducible-example
- 92 名前：デフォルトの名無しさん mailto:sage [2022/09/23(金) 15:04:58.71 ID:i+SKzCkA0.net]
- >>90
こんな感じだけど、ちょっと分かってきた。
全体貼ろうとしたらセキュリティチェックかなにかに引っ掛かって書けないから、scriptタグの中身と body の中身だけ。
function demo() { alert('DEMO'); }
<form>
<input type="button" name="demo" value="DEMO" onclick="demo()">
</form>
この onclick にとっての demo は多分 form内の input要素の demo になるんだね。
スコープがこの form になると。
- 93 名前：デフォルトの名無しさん mailto:sage [2022/09/23(金) 15:06:34.97 ID:i+SKzCkA0.net]
- エラーは未定義関数じゃなく、demo is not a function だった。
- 94 名前：デフォルトの名無しさん mailto:sage [2022/09/23(金) 17:05:20.97 ID:bbK6e07Hd.net]
- thisとthis.formがスコープに入る仕様だそうな
https://qiita.com/hakatashi/items/40fbedf61a3dd79f21fc
有効に使う機会よりも謎の挙動にどハマりするケースの方が多そう
- 95 名前：デフォルトの名無しさん mailto:sage [2022/09/23(金) 18:38:15.96 ID:UxdKoKVd0.net]
- >>91
window.demoかaddEventListenerを使ってみては？
後者がベター
- 96 名前：デフォルトの名無しさん mailto:sage [2022/09/25(日) 08:59:26.24 ID:oCqDdJBP0.net]
- 回答もらった途端にいなくなる
- 97 名前：質問者多いな []
- [ここ壊れてます]
- 98 名前：デフォルトの名無しさん mailto:sage [2022/09/25(日) 17:53:11.47 ID:hlHjM9NA0.net]
- こんにちは
ブラウザから、ローカルのファイル（画像など）を「関連付けされたソフトで開く」というのはできますか？
HTMLの<a href=#></a>だと、ブラウザ（Chrome）内で開いてしまいますが、これを別の画像ビューアで開きたいです
- 99 名前：デフォルトの名無しさん mailto:sage [2022/09/25(日) 20:26:11.45 ID:oCqDdJBP0.net]
- >>96
参考情報
https://akaki.io/2021/url_scheme_hijack
- 100 名前：デフォルトの名無しさん (ﾜｯﾁｮｲ 2b5f-JEaq [106.73.71.2 [上級国民]]) mailto:sage [[ここ壊れてます] .net]
- ありがとうございます
「カスタムURLスキーム」を調べてやったみましたが、ローカルのファイルを指定ができません（画像ビューアは開くがファイルが開かない）
JavaScriptの質問ではないので恐縮ですが、どうやって指定できますかね？
https://qiita.com/kojimadev/items/74100c8557a92939ef69
例えば上のサイトを参考に、画像ビューアをhogeでレジストリ登録して下のようにすると、画像ビューアだけ起動してファイルは見つからなかったと出ます（hoge:file:///C:...などもダメ）
<a href="hoge:C:/tmp/sample.jpg"></a>
- 101 名前：デフォルトの名無しさん mailto:sage [2022/09/26(月) 22:44:18.29 ID:Xyg4q6vF0.net]
- >>98
違ってるかもだけど、Windowsだったらパスの区切り文字は/じゃなくて\または¥じゃないのかな
で、\は制御文字として扱われるからエスケープして\\にしないとダメとか
- 102 名前：デフォルトの名無しさん mailto:sage [2022/09/26(月) 23:02:16.56 ID:adbpU9F00.net]
- >>98
アプリの方もURLスキームでの起動に対応してないとだめなんじゃない？
URLスキームはその URLの書式をアプリ独自に決めてあって、アプリはその書式でアクションや対象を判別して動作するように作られてるんだと思う。
とりあえず与えられた引数が分かるテストアプリを見繕って hoge として登録してみたら何か分かるかもよ。
|
 |
