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

2017/04/02(日) 23:30:38.56

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.122 +
http://echo.2ch.net/test/read.cgi/tech/1472426483/

VIPQ2_EXTDAT: checked:vvvvvv:1000:512:----: EXT was configured

2020/12/06(日) 16:49:56.97

Ruby on Rails の、SQLite3 などのデータベース(DB)を使えば？

普通に、Rails プロジェクトの開発環境を作れば、
バックエンドのPuma サーバー・DBも、
フロントエンドのブラウザ、HTML, CSS, JavaScript も、ローカルPC 内にある

Node.js サーバーと、Chromium ブラウザを含む、Electron と同じ

2020/12/06(日) 17:23:44.10

>>387
これだな
>>388
死ね

2020/12/06(日) 19:31:15.25

>>386
めちゃ普通のしょり

2020/12/06(日) 23:31:54.81

>>386
サーバにアップロードしたくないのなら、Java POIはローカルにインストールされているんだよな？

**367** (ｽｯﾌﾟ Sdbf-sakO [1.75.0.54]) · 2020/12/07(月) 08:15:51.20

皆さんレスありがとうございます。

sheetjsを調べてみます。
Java poiはインストールされています。

2020/12/07(月) 10:06:30.93

益々謎が深まるばかりだな
だったらブラウザなんて使わず操作画面から通信まで全部Javaで作ればいいのに

**367** (ｽｯﾌﾟ Sd0f-sakO [1.72.8.111]) · 2020/12/07(月) 17:23:01.27

すでに使われているwebシステムの回収で、ボタンを押したら、ローカルexcelファイルのファイル選択ダイアログを表示して選択する。
メイン画面で登録を押したら、excelファイルから必要な情報を取り込んでDBに登録する機能追加なんです。
sheetjsでやることに決めました。
後、画像もファイル選択ダイアログでよみこんで、リンクで表示できるようにする。登録で初めてサーバーにアップロードするという機能追加です。

2020/12/22(火) 13:54:36.05

http://s.kota2.net/1608612653.png

画像の様なグリッドの中でA,Bなどの矩形の面積が一番多く含まれる
グリッド(赤色部分)の座標を得たいのですが、どのように考えたらよいのでしょう？
この手の考え方は皆目わかりません。

2020/12/22(火) 14:42:45.10

矩形の中心点が含まれるグリッドを計算しろ

**395** (ﾜｯﾁｮｲ ee7b-y216 [153.189.240.38]) · 2020/12/22(火) 14:48:28.47

なるほど。ありがとうございます。
それで試してみます。

**デフォルトの名無しさん** · 2020/12/23(水) 02:46:19.78

templateタグをcloneしてすぐそれにidを追加したいんすけど
なんか無理っぽいですね？？
appendした後にその要素を特定する作業（追加した最後の要素を見つける）をしてから
その要素を改めて取得してから、idを追加することはできるみたいですけど
どうにかなりませんかね

**398** (ｽﾌﾟｯｯ Sdbf-JkJa [1.75.229.205]) · 2021/01/05(火) 07:55:22.65

初見失礼します。

私は今、スマホのメモ帳系のアプリでjavascriptを勉強しています。

それなりに行数増えてきたので、そろそろ外部JSファイルからの読み込みに手をつけてみようと思い、
いろいろなサイトを見ながら四苦八苦していたのですが、殆ど上手く行きません。

何故か唯一、test.jsという名前のファイルだけ正常に開けているのが現状です。
そのファイルの名前に、2とかつけると読み込まれなくなります。

test.jsは何か特別な機能を持ったファイルなのでしょうか？

また、外部jsファイルを普通に読み込めない原因について、見当のつくことがあったら教えて貰いたいです。

よろしくお願いします。

**399** (ｽﾌﾟｯｯ Sdbf-JkJa [1.75.229.205]) · 2021/01/05(火) 07:56:15.13

さっきの名前欄のレス番間違えました。

2021/01/05(火) 12:18:47.00

この板よりも、web制作管理板の方へ書き込んで、聞いて下さい！
この板のスレは、一時的に作られたものなので

JSFiddle のサイトなどで、コーディングすれば？

基本、HTML, CSS, JavaScript の3つのファイルが必要です

たぶん、何かのファイルに、test.jsを読み込むように書かれているだけでしょう

**399** (ｽﾌﾟｯｯ Sdbf-JkJa [1.75.196.4]) · 2021/01/05(火) 14:14:30.47

>>401
ありがとうございます。

また色々と検索、勉強してみます。

2021/01/05(火) 14:40:22.86

>>399
どういうエラーメッセージが出ているの?

2021/01/05(火) 14:43:42.88

>>403
ディスプレイに「エライこっちゃ」と表示されます

2021/01/05(火) 16:55:55.29

>>399
安くてもいいから、とりあえずPCとかMacとか呼ばれている電子計算システムを購入したほうがええで。
JAVA Script学ぶのはそのあとでいい。

2021/01/05(火) 17:01:53.12

そしてGoogleの提供してるビジュアルプログラミング環境
現在はJAVA SCRIPTでコードジェネレート出来る。
https://developers.google.com/blockly/

2021/01/26(火) 16:31:42.32

modalってもしかしてjqueryのほうがVueより全然簡単？
Vueだとよくわからんエラーばっかり出るわ

2021/02/14(日) 05:19:12.94

オフショアの人らが全く同じ関数を1つの.jsの中で3回も書いてた…
動いてるし俺の担当じゃないから触らなかったけど

2021/03/02(火) 05:22:50.76

Adobe製品がこれで動作するから使い始めた

2021/03/02(火) 20:14:12.81

>>409
PhotoShopも？

2021/03/03(水) 10:06:47.42

全機能を制御できるわけではないけど、
PhotoshopでもJavaScript(extend script)は使えるよ。

2021/03/03(水) 10:51:04.90

>>411
よっしゃ！
で、なにができますの？

2021/03/03(水) 10:51:27.69

>>411
よっしゃ！
で、なにができますの？

2021/03/04(木) 18:56:07.87

>>410
もちろん
https://www.adobe.com/devnet/photoshop/scripting.html

2021/03/12(金) 15:48:21.50

一回躓くと次の一歩踏み出すのが困難なのは何でも同じか～とか考えながら勉強の日々

2021/03/16(火) 09:49:45.28

javascritpは文法がしっかりしてないから
最初に学ぶには非推奨だね
学習体系がしっかりし参考情報が豊富な言語から始めたほうがいい

2021/03/16(火) 19:45:10.52

>>416
どこがしっかりしてない？

2021/03/16(火) 20:15:20.99

>>417
変数に関数が代入できること

2021/03/16(火) 20:32:36.45

>>418
第一級関数と文法の関係性は？

2021/03/16(火) 20:55:27.51

中途半端な変数宣言がちょっとね
整数とちゃんと宣言するか
まったく宣言しないかどちらかにしてほしかった

2021/03/16(火) 20:58:41.67

その基準で除外したらモダン言語ほぼ全滅じゃね

2021/03/16(火) 20:59:24.04

>>421は>>418宛

2021/03/16(火) 21:29:17.58

JSXっってbabelで変換しないとｎｏｄｅで動かんのか？

2021/03/16(火) 22:17:20.61

関数の引数に関数というのがあるけど
その引数の関数の中からは外のすべての変数にアクセスできるの？

例は
something.addEventListener(function(){
この中から外の変数はすべて見えるのか
});

2021/03/16(火) 22:24:28.16

>>421-422
だよね

>>418
お勧めの言語は何？

2021/03/16(火) 23:07:50.72

>>425
Javaだ

2021/03/16(火) 23:33:01.12

すまん、変数に関数を代入できちゃ初学者に向いてない理由がわからんのだが

2021/03/16(火) 23:51:36.72

>>426
Javaも第一級関数あるから>>418の理由でお勧め出来ないはずでは？
https://qiita.com/YutaKase6/items/2ff6cba4b059dde92b8b

2021/03/16(火) 23:55:56.03

>>428は間違いなので忘れて
お勧めというかJavaしか知らないから他言語に慣れてないだけなんじゃないの？

2021/03/26(金) 19:37:25.16

F12 ＞　Ctrl + Shift + K
以下の二行をコピペして一度に実行後、リンクをクリック

'knar-csed-etad=s&tpircsavaj=k?s/pj.oc.nozama.www//:sptth'
.split('').reverse('').join('')

**デフォルトの名無しさん** · 2021/04/22(木) 13:40:05.75

document.querySelectorAllの:last-child使えなくなってる？？
セレクタでjqueryでいうところの:eq()があればいいのにな

2021/04/22(木) 20:12:48.08

:last-childはマッチした中の最後じゃないで？

2021/04/23(金) 05:59:03.22

>>431
[0]を忘れてるのでは？
querySelectorの方が良いと思うけど

2021/04/29(木) 08:41:41.15

(function aaa(){})のように関数を()で囲むのはどういう意味があるんですか？

2021/04/29(木) 09:34:41.24

>>434
関数が寒くて風邪をひかないように服を着せているんです。

2021/04/29(木) 10:05:07.56

>>434
ここで質問している人は回答を貰っても何故無反応なのですか？

2021/04/29(木) 10:27:52.89

IIFE (Immediately Invoked Function Expression; 即時実行関数式) は、
定義されるとすぐに実行される、JavaScript の関数です

関数を定義して即実行したい場合、( ) で囲んで、式にする

JS の質問は、web制作管理板の方へ書き込んでください！
この板のスレは、荒らしが出た時に、緊急避難用に作られたものだから

2021/04/29(木) 12:23:48.15

>>437
どうもどうも
web版のスレは新スレが立ってないのでこっちに書いてみた

2021/05/03(月) 00:14:59.29

仕事でWebアプリケーションを作ってる方にお聞きしたいんですが、
jsやcssをいわゆるmin化するのに何使ってます？

Web上のサービスでやるのはセキュリティ的によろしくないのでローカルで完結できるものがあればと思いまして調べたら何個かあるみたいなのですが、主流はどれなのかなと…

2021/05/03(月) 17:20:40.35

全Rubyistに今すぐ伝えたいwebpackとwebpacker
https://qiita.com/jesus_isao/items/1f519b2c6d53f336cadd

Ruby on Rails では、この2つを使っているらしい

webpacker の内部のpackage.json

"mini-css-extract-plugin": "^1.0.0",
"terser-webpack-plugin": "^4.0.0"

この2つは、webpack のサイトにも載ってる
https://webpack.js.org/plugins/

2021/05/07(金) 11:11:04.70

質問です。

下記みたいに複数の配列の各要素を合算した配列を作成するために、
スマートなやりかたはありますでしょうか。

function sumItems(hogearray, fugaarray){
let len = hogearray.length;
let sumarray = [];
for (var i = 0; i < len; i++) {
sumarray.push(hogearray[i] + fugaarray[i]);
}
return sumarray;
}

let arr1 = [1, 2, 3, 4];
let arr2 = [4, 5, 6, 7];

console.log(sumItems(arr1, arr2));
→(4)?[5, 7, 9, 11]

上記のsumItemsをもうちょっと賢く行いたいです。
lodashもざっくり見たのですが無さそうなので・・・。
（本当に欲しいものはこのような配列を不特定多数渡して合算した配列を作りたいです。
　ChartJsの積み上げグラフで、合計の線グラフを差し込むのにあればいいなと思っています）

2021/05/07(金) 12:18:29.36

>>441
for使うコードとしては十分にスマートだと思うが…
関数型がスマート打と思うならArray#mapとか

2021/05/07(金) 14:03:34.51

>>442
なるほど！Array.mapにindex使えばよかったんですね！
これで出来ました！（newarrのところ）

function sumItems(hogearray, fugaarray){
let len = hogearray.length;
let sumarray = [];
for (var i = 0; i < len; i++) {
sumarray.push(hogearray[i] + fugaarray[i]);
}
return sumarray;
}

let arr1 = [1, 2, 3, 4];
let arr2 = [4, 5, 6, 7];

let newarr = arr1.map((value, index) => {
return value + arr2[index]
});

console.log(sumItems(arr1, arr2));
console.log(newarr);

↓
(4)?[5, 7, 9, 11]
(4)?[5, 7, 9, 11]

ありがとうございました！

2021/05/07(金) 14:50:50.30

無理に関数型で書くのはどうかと思う
↑で十分

2021/05/07(金) 21:41:50.48

>>444
スマートというふわふわした理由でfor文を毛嫌いしないで欲しいとは思う

2021/05/07(金) 22:28:49.44

Ruby では、zip で、

pp result = [1,2,3].zip( [4,5,6], [7,8,9] ).map( &:sum )

出力
[12, 15, 18]

**446** (ﾜｯﾁｮｲ 692c-M0W8 [180.26.204.51]) · 2021/05/07(金) 22:34:04.42

Lodash にも、zip ある

_.zip( ['a', 'b'], [1, 2], [true, false] );

// [ ['a', 1, true], ['b', 2, false] ]

2021/05/08(土) 08:52:00.58

極論だけどあんまり内包表記とかラムダ式とか関数型的な書き方ばかりしてるとあの人のコードは短いけど読みにくいから一緒に仕事したくないって言われるぞ

2021/05/08(土) 19:17:06.73

var data_array = [];

～いろいろと処理～

このとき、処理に分岐によって、配列を空にしたときって
data_array.splice(0);
っとしているのですが、配列を空にするなら
data_array = []の方がいいのでしょうか？

2021/05/08(土) 20:14:59.28

data_array.length = 0;

2021/05/10(月) 01:09:13.09

https://jsfiddle.net/s1awpc0b/

すみません、JS、jQuery初心者なのですが質問させてください。
「リストの中の文字をホバーしたら、タイトル内のテキストがその文字列に置き換わる」
という機能を実装したいと考えております。

しかし、実際にやってみると、何故か最初に一回変わるだけで他のリストにホバーしても
最初と同じ文字列が出てきてしまうのと、ホバーを外した際にタイトル内のテキストを
元の文字に戻す方法が分からず、困っております・・・

この場合、有効な手段などあれば教えて下さい。よろしくお願いします

2021/05/10(月) 01:32:31.24

.parent(ttl)ってbodyを指してるからじゃないの
jqueryは知らんからどう置き換えたらいいかは分からんけど

2021/05/10(月) 02:00:41.51

ttl.find('p').text(navtxt);

2021/05/10(月) 23:59:24.06

const navtxt = $(this).find('p').text();

find() メソッドは、提供されたテスト関数を満たす配列内の、最初の要素の値を返します。
最初の要素だから、p が複数あるなら、別々に指定しないといけない

テスト1 のp
テスト2のp
テスト3のp

個別に、クラスか何かを付ければ？

2021/05/11(火) 02:35:02.21

var l = data_array.length;
if (l > 51) {
l = 50;
}
for (var i3 = 0; i3 < l; i3 += 1) {～略～}

なんか、書き方がダサい気がする、かっこよくて見やすい書き方
をご教授願います。

2021/05/11(火) 02:53:40.06

const l = Math.min(data_array.length, 50)
for(let i3 = 0; i3 < l; i3++){}

変数名がダサいのは直してない

2021/05/11(火) 03:24:41.76

>>456
早速の回答、ありがとうございます。
変数名や関数名の付け方がよくないのは
上司によく言われますが、直しません。

2021/05/11(火) 03:50:48.88

Ruby なら、Range で、0以上・len未満

( 0...len ).each { |index| p index }

出力
0
1
2

2021/05/11(火) 06:41:38.89

>>456
l=51の時、>>455と結果が違う

2021/05/11(火) 13:35:37.63

>>459
すいません。元のコードが間違えていました。
lに入る値の最大値が50が正しいです。

2021/05/13(木) 23:48:22.88

複数の画像を全て読み込んでからfunc1を実行したい場合、このような書き方で間違いがあったら教えてください
var img_obj_list = [];
var img_file_list = ["./test1.png","./test2.png","./test3.png"];

for(let n=1;n<=3;n++){
img_obj_list[n-1] = new Image();
img_obj_list[n-1].src = img_file_list[n-1];
}

var img_load_count = 0;

for(let n=1;n<=3;n++){

img_obj_list[n-1].onload = function(){

img_load_count++;

if(img_load_count == 3){

func1();

}
}
}

function func1(){alert("");}

2021/05/14(金) 00:39:39.82

細かくは確認してないけどonloadはpromiseでwrapするといい

2021/05/14(金) 00:40:22.23

画像の読み込み完了は、非同期処理か。
そりゃ難しい

async/await とか使えないのか？

2021/05/14(金) 02:11:40.87

>>461
Promise.allを使うか、handleEventを持つオブジェクトにload回数を埋め込んで管理すれば良い

2021/05/14(金) 07:15:30.72

promiseっていうやつですか
調べてみます

2021/05/15(土) 08:00:49.27

aaa.pngという幅１００ピクセル、高さ１００ピクセルの画像があるとして

<img src="aaa.png" id="aaa">

var elm = document.getElementById("aaa");
var rect = getBoundingClientRect();
としたら
rect.leftが8でrect.rightが108でした。

これって幅が101になるのでおかしくないですか？
rect.rightは107にならなければならないのに。

2021/05/15(土) 08:24:12.13

訂正elm.getBoundingClientRectです

2021/05/16(日) 00:04:05.86

正直言って、

(a)=>{

2021/05/16(日) 00:07:02.23

間違いｗ

正直言って

(a)=>{
　bar(a);
}

を引数に渡すのって可読性どうなんだろう？数学的には
美しいのかもしれないけど、世の中の大部分のプログラムは
そういうところまで行ってないプログラマが組んでるわけで。

そのうち、「大多数のプログラマにとって理解しやすいかどうか」理論
みたいのが出てこないかと…。

2021/05/16(日) 07:43:31.39

「大多数のプログラマ」じゃなくて「一年後の自分」で考えればいい
一年経ったら成長するだろ？その時に自分が辛くなるようなコードを書きたいと思うか？

プログラマを一年程度で使い捨てにしているところなら、
そりゃ一年以内の知識だけでやりゃあいいだろうさ
一年後にはプログラマをやってないわけだからな

成長するたびに自分が苦しくなるようなコードを
書き続けなければいけないのは地獄だってわかるかい？

2021/05/16(日) 07:43:31.96

四則演算も出来ないのか....

2021/05/16(日) 10:19:50.12

>>469
その関数だけ見せられてもなにを意図したコードかわからんからなんともいえない

2021/05/16(日) 12:32:29.26

>>471
x座標8～108だと101ピクセルあるので幅101になる
108-8=幅100ピクセルではない
なので107にならなければおかしいので間違ってないですよ

2021/05/16(日) 18:22:27.95

>>473
width=0ならleft,right値が何になると思ってる？

2021/05/16(日) 19:39:53.23

>>466,473
あなたのロジックではこうなる

width=100なら、left=8,right=107
width=1なら、left=8,right=8
width=0なら、left=8,right=7

座標に1*1pxの実体があると認識してそう

2021/05/16(日) 19:59:20.58

>>469
コードが断片的でわからんが、https://medaka.5ch.net/test/read.cgi/prog/1582181395/27 のことか？
> 27 仕様書無しさん 2020/05/24(日) 15:41:00.93
> 最近の言語って、
>
> Button.addEventListener('click', () => {
> //TODO　ずらずらー
> })
> みたいな書き方が、主流のようなんだけど、
>
> 関数は関数できちんと宣言して書いて
> ButtonClick_Function(){
> ずらずらー
> }
> 他の関数(){
> ずらずらー
> }
>
> で、メインの部分で
> 　Button.addEventListener('click', ButtonClick_Function());
> 　オブジェクト.addEventListener('他のイベントA', 他の関数A());
> 　オブジェクト.addEventListener('他のイベントB', 他の関数B());
> 　オブジェクト.addEventListener('他のイベントC', 他の関数C());
> と、ロジックはロジック、コールはコールとかで並んでたほうが可読性高くね？？
> (以下略)

2021/05/16(日) 21:30:12.14

>>475
MSペイントを拡大してドットを打つと一番左上のドットが(0,0)で右隣が(1,0)になってるよ

2021/05/16(日) 22:14:20.49

>>477
MSペイントとCSSで同一のロジックが通用する根拠は何だ？

2021/05/16(日) 22:43:10.57

<img src="test.png" id="test" style="border:Solid 20px #0000ff;padding:10px ">
の画像のブラウザ上での絶対座標はどうやって求めるんですか？
getBoundingClientRectのleft,topだとborderとpaddingを含んだ座標になるので
これらを含まない画像のみの座標で

2021/05/16(日) 22:55:03.32

htmlと画像は別物なんだから同じサイズになるわけないだろ
あとhtmlは仮想サイズ使ってるからドットバイドットじゃない

2021/05/16(日) 23:19:05.48

>>474,478はスルーか

2021/05/17(月) 01:35:41.32

HTML の要素内の位置とか、求めるのは無理じゃないか？

ピクセル操作なら、WebGL, Canvas みたいな所に描かないと無理かも

2021/05/17(月) 08:40:57.94

>>480
html上の座標もpxピクセルで指定するのに何が違うのかわからん
>>481
width=0ならleft=8,right=7になるのでwidth=0ならエラー処理にする

2021/05/17(月) 20:48:45.14

>>483
CSSボックスモデルはwidth=0を認めているのでエラー処理にするのは間違い

2021/05/18(火) 08:20:27.46

やっとわかった
ワイが言ってたのはグリッド座標ではなくピクセル座標のことか
四角形の場合ピクセル座標の右端を＋１すればグリッド座標になるな
左端は同じだけど

2021/05/18(火) 08:27:50.81

>>482
element.clinetLeftで左側のborderの幅を、element.clinetTopで上側のborderの幅をピクセルで取得できるので
getBoudingClientRectのleftとtopの座標にそのぶん加算すれば座標取得できたけど
問題はpaddingの幅をピクセルで取得できないこと
element.style.paddingLeftだとem指定の場合ピクセルで取得できないし

2021/05/18(火) 08:48:41.79

>>486
computedStyle