+ JavaScript の質問用スレッド vol.126 + [転載禁止]©2ch.net

**Name_Not_Found** · 2022/08/05(金) 17:47:44.84

>>312
リンク先をよく読め
jQueryスレは既にある

+ jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
https://mevius.5ch.net/test/read.cgi/hp/1466750494/

**Name_Not_Found** · 2022/08/05(金) 19:12:45.74

>>313
じゃ、タイトル詐欺スレを削除すれば解決だね

**Name_Not_Found** · 2022/08/21(日) 11:50:33.80

【環境】iOS Catalina 10.15.7,GoogleCrome104.0.5112.101
【何をしたのか】Editor.jsでデータを受け渡す方法について知りたいです。
【エラーメッセージ】そもそも方法がわからないのでエラー等は発生してません。
【期待する結果】Editor.jsで入力したデータを次のページで内容チェックし、更にMySQLへ登録したい。また、記事の編集の際にはMySQLからデータを読み出し、Editor.js上で編集したい。
【サンプルコード】このサイトとまったく同じ状態です。https://reffect.co.jp/html/block-styled-editor-js#i-2

勉強のため自作のブログ投稿用CMSを作成しています。
formとphpで基本的な記事投稿（入力→実際の表示確認→MySQL登録）、記事の再編集（MySQLからのデータ読み込み→投稿フォームへの再表示→編集→MySQL更新）は完成しました。

ただ、現状では画像や表、リストなどを挿入するときにいちいちhtmlタグを入れなければいけないことから、WYSIWYGのひとつEditor.jsを使ってタグを自動生成したいと思っています。

phpのときには教科書どおりinputにnameをつけてPOSTでデータを受け渡してましたが、Editor.jsではdivにテキストエディタを表示させることから、どうやってデータを受け渡すのかつまずいています。
上記サイトではボタンを押すとconsoleに取得データを表示していますが、ボタンを押すと実際の記事表示を確認できるようにしたいと思っています。

どのようなやり方があるでしょうか。お力を貸してください。

**Name_Not_Found** · 2022/08/21(日) 16:41:06.34

>>315
console.logする代わりにデータ(JSON)を確認画面に渡して
確認画面側でEditorJSをreadonlyで表示するか
同じ画面でreadonly viewとedit viewとtoggleさせる(EditorJSのreadonly.toggle)

サーバーにPOSTするのはJSON

**Name_Not_Found** · 2022/08/22(月) 08:46:09.58

Ruby on Rails では、WYSIWYG エディターは、

Railsの作者・DHH の会社である、Basecamp 製のtrix を使う

**Name_Not_Found** · 2022/08/27(土) 23:04:43.45

もう終わりだよこの板も

**Name_Not_Found** · 2022/08/28(日) 14:19:06.39

JavaScriptスレは荒らされる前は平和だったんだけどね
今は見る影もない

**Name_Not_Found** · 2022/08/28(日) 21:46:17.13

今何とか機能してるのって愚痴スレとHTMLCSS質問スレとPHP質問スレがギリギリって感じか
語ることなんて特にないし仕方ないね

**Name_Not_Found** · 2022/08/31(水) 23:57:52.92

>>320
PHPも死んでね？

**Name_Not_Found** · 2022/09/01(木) 22:47:44.67

HTMLスレは板基準にすれば進んでるよなぁ
まあ最初にやるのがそれってのもあるけど。
初学者がくるようになればこっちも盛り上がるんだろうな？なるよな？

**Name_Not_Found** · 2022/09/01(木) 23:34:56.25

正直調べりゃ分かるからこっちに書き込むエネルギーなんて一々使わないだろってとこは思ってる
jsまで興味を持ったのなら調べるスキルっつーか知識欲も持ち合わせてるだろうし
その結果がこれよ

**Name_Not_Found** · 2022/09/02(金) 00:35:32.25

>>321
PHPの質問スレは板が違う
まあ向こうも同じようなもんだけど

**Name_Not_Found** · 2022/09/02(金) 01:00:03.80

javascriptもPHPもオワコン。
そしてプログラミングの初学者には難しすぎる

初心者はRubyから学習を始めるべき。
そしてRuby on Railsを習得すればPHPは不要

こっちのスレで質問すれば親切な達人プログラマーがどんな質問にも懇切丁寧に答えてくれる。
　↓
Ruby 初心者スレッド Part 67
https://mevius.5ch.net/test/read.cgi/tech/1608837867/

**Name_Not_Found** · 2022/09/02(金) 09:40:03.86

>>325
https://mevius.5ch.net/test/read.cgi/tech/1608837867/512
> 512 デフォルトの名無しさん (ﾜｯﾁｮｲ 027c-5Ix7) sage 2022/08/19(金) 13:31:40.23 ID:Gwz5c/EG0
> Rubyガイジがこのスレに誘導しているみたいだけど
> 今更Rubyなんて流行らないし>>503でも指摘されているけど
> 新規案件でRubyやRailsなんて採用しないから初心者が勉強するだけ無駄だぞｗ

**Name_Not_Found** · 2022/09/06(火) 13:50:31.39

RUNTEQ
【知らないと転職無理】未経験エンジニアの疑問全て回答！
www.youtube.com/watch?v=5IzjaC6vEg0

この動画では、Ruby on Rails から始めろと言っている

ウェブ系で最も使われているフレームワーク。
スタートアップでよく使われる

高速開発で、日本語の情報が多い

**Name_Not_Found** · 2022/12/29(木) 12:19:48.08

JSで「日付が変わると自動で音が鳴る」というものを作りたいです。

**Name_Not_Found** · 2022/12/29(木) 14:40:03.89

どうぞどうぞ

**Name_Not_Found** · 2023/01/01(日) 04:14:06.90

>>328
すいません
JavaScriptで日付が変わると自動で音が鳴るというものを作るにはどうしたらいいですか？

**Name_Not_Found** · 2023/01/01(日) 04:55:49.86

>>330
このスレじゃ無理
こっちのスレで質問してみよう。親切な達人プログラマーが懇切丁寧に教えてくれるよ

Ruby 初心者スレッド Part 67
https://mevius.5ch.net/test/read.cgi/tech/1608837867/

**Name_Not_Found** · 2023/01/01(日) 13:49:46.89

>>331
Rudyって何ですか？

**Name_Not_Found** · 2023/01/01(日) 16:22:43.15

>>331
イタズラ乙
https://mevius.5ch.net/test/read.cgi/tech/1608837867/593-594

**Name_Not_Found** · 2023/01/02(月) 18:52:30.50

>>325,331
4ヶ月前もRuvyスレ移行で受け入れられなかったのに、懲りない人だね

**Name_Not_Found** · 2023/01/03(火) 15:44:37.55

画面遷移に伴って、リクエストヘッダを追加したいときどうすればいいか教えてください。

・１サーバサイドで「Location」レスポンスヘッダを指定してリダイレクトさせるときに、
リダイレクト先アクセスにリクエストヘッダを添付させることは可能ですか？
・2 ブラウザ側で画面遷移するときに、リクエストヘッダをつけることは可能ですか?
<a>タグ、JavaScriptの「location.href」にリクエストヘッダ追加できますか？

・3 同じく<form>を飛ばすときにリクエストヘッダ付けられますか？

(補足)リクエストヘッダをつけるときに、思い浮かぶのはAjax, XHRを使うことですが、
これを使うと画面遷移は伴いません。
OAuthの勉強をしていて、アクセストークンをブラウザで保持して、それをAuthorizationヘッダーに
添付しないといけないことが分かったので、それをどうやってリクエストヘッダにセットするのかを調べています。

もしあるなら、その実装方法が載っているサイトが見つからなかったので教えてください。

**Name_Not_Found** · 2023/01/03(火) 15:59:37.14

>>335

これを質問した者と同じ者ですが、解決方法が分かったかもしれないので書きます。
まず一度、認証情報なしでアクセスすると、
サーバ側が「401: Authorization Requed」ステータスを返してきて、
そこに「WWW-Authenticate」というレスポンスヘッダで認証が必要である指定が返ってくるので、
それが返ってくるとブラウザは自動でAuthorizationヘッダをセットして再アクセスするので、
サーバサイドは、401を返して、WWW-Authenticateヘッダをレスポンスするように実装しておいて、
一度401でわざと失敗させればよいため、最初から自分でAuthorizationヘッダを添付しなくてもいいのかもしれません。

しかし、ブラウザはそれで自動的に正しいアクセストークンを選んでくれるのでしょうか？
認証サーバ(IdP)から払い出されたアクセストークンをブラウザのローカルストレージか何かに保存しとくと思いますが、
それを適切に選んでくれるかが心配です。

**Name_Not_Found** · 2023/01/03(火) 16:25:07.78

リダイレクト時にカスタムヘッダーを追加するのは無理

ブラウザがローカルストレージから自動的に特定のアクセストークンを取得してヘッダーに追加するようなことがあればセキュリティ的に大問題なのでこれも無理
(カスタムヘッダー無しのCookieだけでいいなら可能)

XHRで取得したレスポンス使ってクライント側JavaScriptで画面を更新する他ない

**Name_Not_Found** · 2023/01/03(火) 16:31:47.61

>>337

そのクライアント側JavaScriptで画面を更新するときに、
Authorizationヘッダーを要求されませんか？
そもそも、アクセストークンを要求するのはデータ取得用のAPIだけにとどめておいて、
画面を描画するようなURLに対してアクセストークンを要求してはいけないということでしょうか？

**Name_Not_Found** · 2023/01/03(火) 23:40:35.44

最近までAuthorizationヘッダーがそのままリダイレクトされてたみたいｗ
https://github.com/whatwg/fetch/pull/1544

HTTPの仕様的にはAuthorizationは削除したほうがいい的なことを書いてるのに・・・
Consider removing header fields that were not automatically generated by the implementation (i.e., those present in the request because they were added by the calling context) where there are security implications; this includes but is not limited to Authorization and Cookie.
https://www.rfc-editor.org/rfc/rfc9110#name-redirection-3xx

**Name_Not_Found** · 2023/01/04(水) 00:34:28.00

Ruby on Rails では、Turbolinks を使って、
pjax(ajax と、historyAPI(popState, pushState))を利用して画面遷移する。
通信データを減らすために、body 部分しか変わらない

認証は、退屈な雛形を自動生成する
github.com/abhaynikam/boring_generators

Devise とか、Devise Omniauth(Facebook, GitHub, Google, Twitter)

一番分かりやすい OAuth の説明
qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be

基本、日本の未経験者用のバックエンドで採用しているのは、
YouTube で有名な雑食系エンジニア・KENTA の言う通り、Rails優先

**Name_Not_Found** · 2023/01/04(水) 20:25:37.82

>>339
XHRで非同期でリクエストヘッダを付けてサーバへ送信すると
サーバサイドでLocationヘッダーでリダイレクトすると次のリクエストにも暗黙的に前のリクエストヘッダーが引き継がれるのか？
なかなか複雑だな。

だけどXHRでリダイレクトが帰ってきても自動的には画面遷移しない。
ブラウザ側でlocation.hrefしないと画面遷移しないがこの時はさすがに非同期の戻りのリクエストヘッダは引き継げないだろ。

それと、クロスオリジンでリダイレクトする時もリクエストヘッダー引き継がれるの？

**Name_Not_Found** · 2023/01/09(月) 18:06:47.49

初学者の者です

「Pixiv Filter」というChromeの拡張機能の話なんですけど、この拡張機能の一つに、Pixivの検索結果画面で、イラストごとの割り振られたタグを、本来は表示されない検索結果の画面で表示してくれるというものがある

この機能なんだけど、コード（GitHubで公開されている。URLはスパム対策で貼れない、申し訳ない）を読んでも仕組みがどうにも理解できなかった。
「イラストのURLに飛んで、そこからリンクを取得してくる」といったものかとも思ったが、どうやら違う模様

詳しい方いらっしゃったら、ご教授頂きたいです

**Name_Not_Found** · 2023/01/09(月) 19:33:20.74

ざっと見たところ
・作品ごとのタグは検索結果画面には表示されないものの検索結果データとして飛んできている
www.pixiv.net/ajax/search/artworks/***のリプライ内のdata[].tags[]という配列がそれ

・バックグラウンドで取得し直してそれをストレージに格納している
background.tsの123行目あたり
type.d.tsのWorksData型にtags配列あり

・検索画面にそれを表示している
search_page.tsの97行目あたり

実際に拡張機能入れて動かしたわけでもないしソース追っただけだから適当だけど

**Name_Not_Found** · 2023/01/09(月) 21:27:33.60

>>343
ご教授感謝です、参考にさせて頂きます

**Name_Not_Found** · 2023/01/10(火) 01:47:07.95

ちょっとしたデータを取得するのに、

「イラストのURLに飛んで、そこからリンクを取得してくる」みたいな、
副問い合わせをやっていたら大変

**Name_Not_Found** · 2023/01/11(水) 00:32:53.42

>>345
ですよね…なんかちょっと変かな？という気はしていました、ありがとうございます

「API」とか「ストレージ」「トークン」「クッキー」みたいな通信の部分がからっきしなもので、色々調べながらやらせて頂きます

**340** · 2023/01/11(水) 04:43:41.70

漏れらだって、Ruby on Rails, Linux, Docker, AWS Solution Architect しか分からない

>>340
に書いたように、誰かが作った、退屈な雛形を自動生成して作っている

CSRF, Strong Parameter, pjax, place holder、データベースの設計など、
全部Railsで勉強しているだけ

**Name_Not_Found** · 2023/01/11(水) 11:01:19.44

>>346
察するにその拡張機能を調査分析するのに必要なスキルがまだ足りてないから
もう少し基礎知識を身につけてから挑んだ方がいいと思うよ
分不相応な挑戦は時間のムダにしかならない

あとRailsはNGワードに入れといた方がいい

**Name_Not_Found** · 2023/02/21(火) 11:34:13.09

cssファイルのセレクタに、別のjsonファイルの値をインポートして使える方法とかありませんか？

【jsonファイルの値】{color:green;}

みたいな。

**Name_Not_Found** · 2023/02/22(水) 02:42:08.74

sassファイルに、jsonファイルの読み込みとかってできたりする？

**Name_Not_Found** · 2023/03/24(金) 07:50:31.37

コードを1人で書いてます。他人が見ることは100%ありません。

(a) function hoge(){ }
(b) var hoge = function(){ };

の区別や管理はどうしてますか？

・返り値のないものはa、あるものはb
・宣言のみは冒頭、実行の伴うものは後述

というルールで書いていましたが、
1万行近くなって見通しよくするために大まかな機能ごとにまとめるようになり
bが順序的に後述になる箇所が出てきました。
”機能ごと”は今後順序変更する可能性があります。

関数リテラルのメリットがいまいちわかりません。どんなメリットがあるのでしょうか？
また返り値有無関係なく全てaにして不便はありますか？

**Name_Not_Found** · 2023/03/24(金) 18:33:56.71

>>351
不便はありません
動的に変数の中身の関数を入れ替えたい場合だけ(b)で

**351** · 2023/03/24(金) 22:38:34.30

>>352
動的に全く違う関数に入れ替えられるのですね、なるほどです。
この件では各関数や引数の目的が明確固定ばかりなのでその場合はなさそうです。
極一部名前付き引数を使用していますが、関数内処理はほぼ一定で、その程度です。

ありがとう。

**Name_Not_Found** · 2023/03/25(土) 00:37:00.35

このJavascriptでdivをタブで切り替え表示のサンプルで
Works、Contactタブにimg srcで画像を埋め込んでた場合
Works、Contactタブを選んだ時にだけ画像や内容を読み込む動作ってどうやるの

ttps://posipan.com/js-tab/

**Name_Not_Found** · 2023/03/25(土) 19:04:37.36

Lazyloadとか使うといいかと

**Name_Not_Found** · 2023/03/27(月) 10:49:47.68

>>351
細かい話をするとb自体は関数式であって関数リテラルというのはbの右辺を指す用語

aとbの違いについてはこのへんを参照のこと
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function

あと個人的な感覚としては返り値の有無で区別をするのはナンセンスだと思う

**Name_Not_Found** · 2023/03/27(月) 13:58:05.40

そんな自分のウンチク言ってないで質問に答えてやればいいのに

**Name_Not_Found** · 2023/03/27(月) 20:31:02.45

なんで上から目線で「質問に答えてやればいいのに」といえるのだろう？

**Name_Not_Found** · 2023/03/28(火) 01:36:21.08

なんか癪に障っただけだろう

**Name_Not_Found** · 2023/03/28(火) 16:35:38.31

>>358
何一つ答えてないからじゃね

**Name_Not_Found** · 2023/03/28(火) 17:07:37.33

>>360
それは上から目線である理由になってないね
>>358が聞きたいのはそっちだろう

**Name_Not_Found** · 2023/03/28(火) 19:26:10.85

上から目線を感じてしまうのはあなたが小さい人だからよ

**Name_Not_Found** · 2023/03/28(火) 21:03:37.18

>>356にケチつけるのと似たりよったりだね

**Name_Not_Found** · 2023/03/28(火) 21:15:19.17

356はケチつけられても仕方ない
回答もせず、どうでもいい知識自慢、「このへんを参照のこと」なんて上から目線、自己主張
362の通り気にしすぎ

**Name_Not_Found** · 2023/03/28(火) 21:23:34.93

争いは同じレベルでしか発生しない

**Name_Not_Found** · 2023/03/28(火) 21:47:39.32

>>364が気にし過ぎでﾌﾌｯてなる
なるほど同レベルだね

**Name_Not_Found** · 2023/03/28(火) 22:28:03.56

以前はスコープの問題でfunction expression派のライブラリが数多くあった
strict modeができてからはfunction declaration派が増えたように思う

**Name_Not_Found** · 2023/03/28(火) 22:43:12.53

>>366
356本人？負け惜しみ？

**Name_Not_Found** · 2023/03/28(火) 22:45:04.76

半角カタカナｗ

**Name_Not_Found** · 2023/03/28(火) 23:05:22.37

>>368
気にしすぎですよ

**Name_Not_Found** · 2023/03/29(水) 17:51:02.44

MathJaxってVer3になって、レンダリングされた文字列を範囲選択出来なくなった?

**Name_Not_Found** · 2023/03/31(金) 12:07:44.93

こんにちは。
どなたか教えていただけませんか。

下記のようなコードを書いたのですが、
div部分が1つなら問題ないのですが、複数になると2つ目以降は反映されません。
そこでループにしないといけないのかな？と思うのですが知識が未熟でどうすればいいのか全くわかりません。
どなたかどうすればいいか教えて頂けませんでしょうか。
よろしくお願いします。

// HTML
<div class="fullimg"><img src="./img1.jpg" height="1000" width="1000"></div>
<div class="fullimg"><img src="./img2.jpg" height="500" width="500"></div>

// script
let imgd = document.querySelector("img");
let result = imgd.getAttribute("src");

let hresult = imgd.getAttribute("height");
let wresult = imgd.getAttribute("width");

const div = document.getElementsByClassName("fullimg");
div[0].innerHTML = '<label for="' + result + '"><img src="' + result + '" height="' + hresult + '" width="' + wresult + '"></label>';

**Name_Not_Found** · 2023/03/31(金) 13:50:56.44

ループ以前にlabelのfor属性は関連するフォーム要素のIDを指定するものなので生成しようとしてるhtml自体に問題があるよ

**Name_Not_Found** · 2023/03/31(金) 14:25:37.98

では再度サンプルコードを書いておきます。

// HTML
<div class="fullimg"><img src="./img1.jpg" height="1000" width="1000"></div>
<div class="fullimg"><img src="./img2.jpg" height="500" width="500"></div>

// script
let imgd = document.querySelector("img");
let result = imgd.getAttribute("src");

let hresult = imgd.getAttribute("height");
let wresult = imgd.getAttribute("width");

const div = document.getElementsByClassName("fullimg");
div[0].innerHTML = '<img src="' + result + '" height="' + hresult + '" width="' + wresult '">';

こちらでどうぞよろしくお願いします。

**Name_Not_Found** · 2023/03/31(金) 17:01:16.18

>>372
せめてループに挑戦してるけどうまく動かないから助けてってとこまではたどり着いてほしい気がするなぁ
初心者向けのループのレクチャーなんていくらでも見つかるわけだし

**Name_Not_Found** · 2023/03/31(金) 22:42:19.54

>>375
どこかから拾ったサンプルコードの修正依頼で自分は全く知識がないのだろう

**Name_Not_Found** · 2023/04/01(土) 12:28:09.62

これで音信不通になるようではな
諦めたか他所へマルチしに行ったか

**Name_Not_Found** · 2023/04/01(土) 14:29:48.39

これは、取得した値をそのまま設定しているだけだから、何も変わらない

jQuery なら、

// fullimg クラスの付いたdiv の、直下のimg
$( 'div.fullimg > img' ).each( function ( index, elem ) {

jQ_this = $( this )
const src = jQ_this.attr( 'src' ) // 取得
const height = jQ_this.attr( 'height' )
const width = jQ_this.attr( 'width' )

console.log( `${ index }: ${ src }, h: ${ height }, w: ${ width }` )

jQ_this.attr( 'src', src ) // 設定
jQ_this.attr( 'height', height )
jQ_this.attr( 'width', width )

} )

ログ出力
0: ./img1.jpg, h: 1000, w: 1000
1: ./img2.jpg, h: 500, w: 500

**Name_Not_Found** · 2023/04/01(土) 15:06:47.33

jQuery信者が喜ぶネタなんだな

**Name_Not_Found** · 2023/04/03(月) 20:28:44.17

【環境】VS Code
バージョン: 1.77.0
Electron: 19.1.11
Chromium: 102.0.5005.196
Node.js: 16.14.2
V8: 10.2.154.26-electron.0
OS: Linux x64 5.4.0-42-generic

【何をしたのか】イベントリスナー内でevent.target.valueを参照した。
【エラーメッセージ】プロパティ 'value' は型 'EventTarget' に存在しません。ts(2339)
【サンプルコード】
(() => {
"use strict";
const fruit = document.querySelector('select');
if (null === fruit) { return; }
fruit.addEventListener('change', (event) => {
if (null === event.target) { return; }
console.log(event.target.value);
});
})();

fruit === event.targetを実行するとtrueが返ったので、event.target.valueをfruit.valueに書き換えたところエラーが消えた。
イベントを扱うサンプルコードでは大抵event.target.valueが利用されているが、HTMLSelectElement.valueで置換した場合に何か落とし穴はありますか。

**Name_Not_Found** · 2023/04/03(月) 21:47:26.64

>>380
エラーが消えたからヨシ！は好ましくない
まずはts(2339)で検索してみよう

**>>380** · 2023/04/03(月) 22:22:25.06

>>381
エディタ上でts(2339)が出ていてもブラウザ上での実行は問題なくできます。

キャストするとts(2339)が消えますが、「型アサーション式は TypeScript ファイルでのみ使用できます。ts(8016)」が発生します。
ブラウザで実行すると、「Uncaught SyntaxError: Unexpected identifier 'as' (at hoge.html:24:35)」が発生します。（TypeScriptの構文なので当然ですが……）

fruit === event.target;はtrueなので置き換えたのですが、トラップや問題はありますか。
（エディタ上のts(2339)も消えるし実行もできるので、落とし穴がなければこれで行きたいな、と）

**Name_Not_Found** · 2023/04/03(月) 22:36:04.36

>>382
そもそもTypeScriptを書こうとしてるわけじゃないのになんでtsエラーが出てるの？ってこと
vscode右下の言語モードがTypeScriptになってるんじゃないの？

**Name_Not_Found** · 2023/04/03(月) 23:01:10.11

>>383
なってないです。拡張機能も無効です。
i.imgur.com/TE6gwcY.jpg

**Name_Not_Found** · 2023/04/03(月) 23:26:56.16

>>384
うちではTSでは出るけどJSでは出ない
https://i.imgur.com/TJimdvc.png
https://i.imgur.com/kj2oMNk.png
おそらく何かvscode側の問題だろう
で、エディタの問題ならなおさらfruit.valueで解決とするのは悪手

**Name_Not_Found** · 2023/04/03(月) 23:39:06.45

>>384
わかった、vscodeの設定に↓があるんじゃない？
"js/ts.implicitProjectConfig.checkJs": true
これ追加したらうちでもJSでエラー出た

**>>380** · 2023/04/03(月) 23:48:50.00

>>385 >>380
原因が判明しました。"js/ts.implicitProjectConfig.checkJs"がtrueでした。
型のチェックはしたいので、event.target.valueの上に@ts-ignoreを書いて解決します。
ありがとうございました。

**>>380** · 2023/04/03(月) 23:51:00.10

>>386
まさにそうでした。ありがとうございました。

**Name_Not_Found** · 2023/04/04(火) 00:27:18.41

jQuery では、event.target.value でも、正常に動く

<div id="btn-wrap">
<button class="BtnA BtnAll" value="1">A-1</button>
<button class="BtnA BtnAll" value="2">A-2</button>
<button class="BtnB BtnAll" value="3">B-3</button>
</div>

<div id="btn-wrap-2">
<button class="BtnC BtnAll" value="11">C-11</button>
</div>

$( function ( ) {
// 外側・親に、イベントを付けて、親で、子のイベントをキャッチする
$( '#btn-wrap' ).on( 'click', function ( event ) {
const value = $( event.target ).prop( 'value' )
console.log( value )
alert( value )
} );

$( '#btn-wrap-2' ).on( 'click', function ( event ) {
console.log( event.target.value )
alert( event.target.value )
});
} );

**Name_Not_Found** · 2023/04/04(火) 00:53:07.21

>>387
@ts-ignoreもなんか負けたみたいでいやだけども調べてみてもいい解決策はなさそう
致し方なしかな

>>389
正常に動くかどうかの話はしてないよ
よく読もう

**Name_Not_Found** · 2023/04/04(火) 10:04:45.82

fruitがHTMLSelectElementなのは確定してるから
event.currentTargetがHTMLSelectElementであることは推定できそうだな
event.target じゃなくて event.currentTarget にしたらどうなるかね

**Name_Not_Found** · 2023/04/04(火) 10:48:34.90

>>387
型チェック入れるとか
if (null === event.target || !(event.target instanceof HTMLSelectElement)) { return; }
キャストするとか
console.log(/** @type {HTMLSelectElement} */ (event.target).value);

**Name_Not_Found** · 2023/04/04(火) 11:43:11.41

>>392
そのへん少し試したけどうまくいかなくて諦めてた
致し方なしとか言う前にもう少し手を尽くすべきだった
反省

**>>380** · 2023/04/04(火) 19:16:22.79

>>391
currentTargetもts(2339)が発生します

>>392
元々、nullチェックは'event.target' は 'null' の可能性があります。ts(18047)のエラーを消すために入れていたのですが、
条件を!(event.target instanceof HTMLSelectElement)に書き換えてもts(18047)とts(2339)は発生しないので、解決しました。
JSDocコメントでのキャストは気づきませんでした、こちらが適している場面があればこちらも利用していきます。ありがとうございました。

>>390 >>393
そうなんです、@ts-ignoreを使用している行で他のエラーが出た時に気づけなくなるので、あまり使用したくないです。
遅い時間までお付き合いいただき、ありがとうございました。

ところで、event.targetの代わりにfruitを使用すべきではない明確な理由はないが、event.targetを使用するのが(通常|普通|無難)である。ということで合っていますか。

**Name_Not_Found** · 2023/04/04(火) 22:54:34.70

1つのイベントハンドラが複数の要素に対して設定されることは一般的で、その場合はevent.targetを使うことになる
今回のケースはそうでないにしても、可搬性や拡張性を考えれば常にevent.targetを使用しておくという判断は妥当だろう
あと処理結果は同じでも、イベントの起こった要素に対して処理をする、という意図をコードに残す意味もある

いずれにしろ現時点のそのコードだけを考えるならお好きなように

**>>380** · 2023/04/05(水) 00:34:18.58

>>395
確かに以下のような場合にはEvent.targetを使う必要があるし、「意図をコードに残す」にとても合点がいきました。
<button data-x="1">btn1</button>
<button data-x="2">btn2</button>
const btns = document.querySelectorAll('button');
for (const b of btns) {
b.addEventListener('click', e => console.log(e.target.dataset.x));
}

**389** · 2023/04/05(水) 10:13:44.20

>>389
に書いた

複数のコントローラーに、イベント登録する場合、
外側・親に、イベントを付けて、親側で子のイベントをキャッチする

**Name_Not_Found** · 2023/04/05(水) 11:14:44.19

このjQuery信者は文脈や論点ってものを全く理解しないのな
jQueryでは～jQueryなら～ってただただ念仏を唱えて布教に励む様子がまさに信者

**Name_Not_Found** · 2023/04/05(水) 13:56:33.20

Slickで出来てSwiperでできないようなアニメーション処理って何かある？

**Name_Not_Found** · 2023/04/06(木) 13:40:22.56

Mathjaxって配列環境でcolspan, rowspanって使えないのか？
\multicolumnというべきか

**Name_Not_Found** · 2023/04/13(木) 11:04:39.61

JavaScript でローカルファイルを読み書きするにはどうすればいいでしょうか？
fetchという関数が使えるかと思ったんですが、blocked by CORS policy というエラーになってしまいます。

**Name_Not_Found** · 2023/04/13(木) 14:00:39.10

CORS(Cross-Origin Resource Sharing)制限は、
ローカルPC 上に、何かのサーバーを立てて、そこから配信すれば良い

VSCode の拡張機能、open in browser では、
file:/// から始まるローカルファイル・アクセスだから、CORS制限あり
file:///C:/Users/Owner/Documents/test.htm

一方、Live Server では、サーバーを立てているから、CORSにならない
http://127.0.0.1:5500/test.htm

同様に、コマンドプロンプト・PowerShell から、
1-liner で、Ruby で作られた遅いウェブサーバー、WEBrick を起動すると、
ruby -run -e httpd . -p 8080

これも、サーバー経由だから、CORSにならない
http://localhost:8080/test.htm

**Jun** · 2023/04/26(水) 01:05:22.69

JavaScriptで電卓を作るよ。

**Name_Not_Found** · 2023/04/27(木) 09:25:37.76

ChatGPTを使って

**Jun** · 2023/04/27(木) 23:52:36.98

JavaScript + HTML + CSS で電卓やホームページを作るのが今の目標です。

**Name_Not_Found** · 2023/05/09(火) 15:14:09.97

マイナーな質問

XyJaxで、一括して文字色を変える方法教えてくれ

\color{red}を使っても、その箇所だけしか変更できない。
\xymatrix環境内全部の文字色を変えたい

**Name_Not_Found** · 2023/05/10(水) 19:05:11.90

>>406自己解決

**Name_Not_Found** · 2023/06/16(金) 12:40:56.37

こんにちは。
誰か教えてください。

<style>
.def { color: red;}
</style>

<div>
<p class="abc">aaa</p>
</div>
<div>
<p class="abc">bbb</p>
</div>

<script>
dif = document.querySelectorAll('.abc');
dif.forEach(element => document.querySelector("div").classList.add("def"));
</script>

このようなコードですが、実行すると1つめのaaaを囲ってるdivにしかclassが追加されません。
条件にあるすべてのdivに追加するにはどうすればいいのでしょうか？

**Name_Not_Found** · 2023/06/16(金) 14:16:25.94

>>408
document.querySelectorAll('.abc').forEach(element => element.closest("div").classList.add('def'));

**Name_Not_Found** · 2023/06/16(金) 14:24:00.49

>>409
レスありがとうございます。
closestなんてものがあるのですね。知りませんでした。
おかげで思うように行きました。
ありがとうございます。

**Name_Not_Found** · 2023/06/16(金) 16:50:32.34

>>408
これでもいけると思う
document.querySelectorAll('div:has(> .abc)').forEach(x=>x.classList.add('def'));

**Name_Not_Found** · 2023/06/16(金) 16:57:38.56

これでもいいのかな？間になにか挟まってたらダメだけど
('div >:is(.abc)')

**Name_Not_Found** · 2023/06/16(金) 17:02:39.12

>>411,412
こちらもありがとうございます。
大変助かります。

**Name_Not_Found** · 2023/07/14(金) 05:34:41.98

https://jsfiddle.net/um71qgzf/3/
こんな表示状態で、textarea に入力して改行していき、表示可能行数を超えると、スクロール状態になります。
入力された行数に応じて textarea が縦に伸びて、textareaのコンテナにあたる li もそれに応じて縦に伸びるようにするにはどうすればいいのでしょうか？

**Name_Not_Found** · 2023/07/14(金) 17:33:09.83

自前でやろうとせずにライブラリ探してきたら？

**Name_Not_Found** · 2023/07/14(金) 17:53:03.06

textarea 高さ自動
でググるとそれっぽいのあったよ

**Name_Not_Found** · 2023/07/17(月) 03:34:14.72

SELECTタグで、人物を選択出来るようにしたいのですが、SELECTが非展開の時はIDだけ表示して、
展開した時だけ、IDと人物名が表示されるようにする方法を教えてください。

人物配列
↓
var array =
[
{
"id": 1,
"name": "人物1"
},
{
"id": 2,
"name": "人物2"
}
]

こんな表示にしたいです。
↓
https://i.imgur.com/WWwRHPV.jpg

**Name_Not_Found** · 2023/07/17(月) 08:04:52.05

展開したときにどこにID表示されてるの？

**Name_Not_Found** · 2023/07/17(月) 12:41:46.99

>>417
一応確認するが、非展開時に数字にする意図は何？
フォーム送信時に数字を送信したいだけなら、尊信値(value属性値)と表示する選択肢(子要素の文字列)を分けて書くだけで良いのだが

**Name_Not_Found** · 2023/07/19(水) 04:29:50.61

https://getbootstrap.jp/docs/5.0/components/dropdowns/

Bootstrap 5 のDropdowns のページの一番最後に、
ドロップダウンイベントについて書いてある

show.bs.dropdown/shown.bs.dropdown

このイベント発生時に、表示テキストを入れ替えれば？

**Name_Not_Found** · 2023/07/25(火) 00:23:24.85

(-。-)y-゜゜゜

**Name_Not_Found** · 2023/11/20(月) 22:52:12.45

何をしていいか分からないな…

**Name_Not_Found** · 2023/12/12(火) 22:36:34.47

変数名はキャメルケース(getNameなど)がよく使われるようですが、
スネークケース(get_nameなど)はやはり使わない方がいいですか？

**Name_Not_Found** · 2024/02/28(水) 02:36:50.61

https://liveweave.com/6IlWRJ

JavaScriptでスプリッターを作っているのですが、左右を分割するスプリッターをマウスで動かしても、マウスの位置とずれてしまいます。
どのように修正すればいいのでしょうか。

**Name_Not_Found** · 2024/03/28(木) 04:02:18.18

>>423
良いか悪いかはさておき

考え方としては
そのコードを、どのくらいの範囲で共有するのか
ってのを基準に考えたらいいと思う

自分だけなら好きにすればいいし
身内だけなら話して決めればいいし
広範囲なら世間一般の流れに合わせるべき

みたいな

**Name_Not_Found** · 2024/03/28(木) 04:07:49.72

>>417
すんごい前だけど
似たようなことを頑張ったことある

でもやっぱり
select要素が開いているかどうかを判定出来ないので
原理的に出来なくて

select要素のように振る舞うものを
手作りするのが早かったです

**Name_Not_Found** · 2024/04/08(月) 00:13:34.85

今動作しているのがサーバ上（https//:～）なのかローカル（file:///C:～）なのか区別する必要性が出てきました。
locationで取得する以外にいい方法ありますか？
区別さえ確実にできれば得られる値は（true/falseなど）なんでもいいです。

**Name_Not_Found** · 2024/04/08(月) 12:44:09.64

>>427
window.location.protocolを見れば良いんじゃないかな
httpかhttpsなら、みたいな

**Name_Not_Found** · 2024/04/18(木) 13:55:10.68

**Name_Not_Found** · 2024/04/18(木) 17:45:29.04

>>429
select_tag.selectedIndexに
今選ばれてるoptionが何番目かが入ってるから

select_tagのchangeイベントにフックして
その数字を拾って、people[数字].idを参照したらいいよ

**Name_Not_Found** · 2024/04/18(木) 17:53:34.56

ごめん間違えた
people[数字].roomだった
すまんこ

**Name_Not_Found** · 2024/04/19(金) 02:15:05.41

>>431
出来ました！ありがとうございます！

select_tag.addEventListener("change", (e) =>{
let i = select_tag.selectedIndex;
alert(people[i].room);
});

**Name_Not_Found** · 2024/05/07(火) 02:22:40.33

calleeという古語を使っていたが
怒られた

**Name_Not_Found** · 2024/05/07(火) 06:21:21.73

>>433
arguments.calleeは無名関数式で使う人が多かった印象
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/arguments/callee
名前付き関数式に変えれば解決する課題だと思う