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

**Name_Not_Found** · 2015/08/08(土) 12:43:43.71

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

**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
名前付き関数式に変えれば解決する課題だと思う

**Name_Not_Found** · 2024/05/09(木) 18:11:07.56

今のJavascriptファイルの管理って、どれがスタンダードになっていますか？
webpackはだいぶ古いんですよね？

**Name_Not_Found** · 2024/05/09(木) 20:40:41.69

>>435
そもそもwebpackは管理するものではないのだが…

バンドルツールのシェアのことなら
webpackがまだまだ支配的だと思う

viteとturbopackが頑張り始めたところだけど
この辺はJSだけの話ではなくなるので
なんとも言い難い感じ

**Name_Not_Found** · 2024/05/09(木) 20:42:16.82

パッケージの管理のことなら
npm一択な気がする

ツール自体はyarnとかpnpmとか色々あるけど

**Name_Not_Found** · 2024/05/10(金) 01:03:55.90

Ruby on Rails では、npm は遅いから、yarn を使う

Rails 7 からは脱webpack で、
Import Maps で、CDN から直接インポートする

HTTP/2 が普及して、バンドル・Node.js が不要になった。
バンドル不要のTailwind を使う

バンドルするなら、esbuild, rollup, webpack を使う。
esbuildならCSS プロセッサとして、Bootstrap を使う

**435** · 2024/05/10(金) 08:14:30.07

>>436-438
バンドルツールのことです。
webpack→viteと学んでいるのですが、
正直複雑すぎてついていけてません・・・

特にviteでバンドルして生成されるファイル構成に
どうしても違和感があって、勉強を中断しています。
ChatGPTに聞くとviteのようにハッシュ値で変換した
ファイル名にすることでセキュリティが高まるそうですが、
元のファイル名から変わるのに違和感を覚えます

**438** · 2024/05/11(土) 08:51:08.46

Vite は、Vue.js の作者だったか？
Vueも、Vue 3 で人気が無くなって、React 一色になった

2, 3年前は、Vueが転職で有利だったのに、
今は、React, TypeScript

ブラウザのキャッシュ対策として、
ファイル名はハッシュ値の方が良い

ファイルを更新するとハッシュ値も変わるから、
古いファイルがキャッシュされない

どうせ配布用のファイル名だから、開発用には関係ない

**Name_Not_Found** · 2024/05/11(土) 17:41:41.54

Viteの書き出すファイル名はconfigで変更できたような

**Name_Not_Found** · 2024/05/12(日) 01:16:53.68

>>439
元のファイル名がわかることに
どこまで意味があるのか？って話じゃね？

たとえばbabel+webpackだって
トランスパイル、パッキング後は
部分的にバイナリになったりするわけで
要するに人間の読めるものではなくなる

つまり、ファイル名がハッシュ化されなくても
人間が得られるものはせいぜい
そのファイルがなんなのかの想像がつきやすい
程度のこと

ファイル名が中身と全く関係ない
なんてこともよくあるとは言わんまでも
一定数わけで、となるとデプロイされるファイル名には
それほど大きな意味がない

ってことが多いのではないかな

**438** · 2024/05/12(日) 01:18:55.04

Vite は、Ruby on Rails をコピーしたのかな？

foreman, webpack-dev-server で、hot reload するみたいな？
ファイルを修正したら、即ブラウザに反映されるとか

開発時には、CSS をコンパイルせず、
動的にスタイルを当てているだけとか