+ 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

2021/07/24(土) 06:42:23.52

https://github.com/geolonia/japanese-prefectures
適当に探したらあった

2021/07/24(土) 10:50:15.00

https://www.gsi.go.jp/kizyunten.html
https://www.gsi.go.jp/gis.html

2021/07/24(土) 17:07:18.18

JavaScriptエンジニアって国内に何人いるのだろう？
JQueryとAltJSは省いて純粋にJavaScriptを書ける人を対象にした場合。

下のゲータは明らかにおかしい。なんでCSS < JavaScriptになってんの？

21種類のプログラミング言語別エンジニア数

HTML ：325,954人
JavaScript ：299,426人
Ruby ：215,270人
Java ：190,343人
CSS ：187,243人
Python ：176,419人
PHP ：168,821人
C ：131,520人

2021/07/24(土) 17:07:44.11

>>655
ゲータ
↓
データ

2021/07/24(土) 17:14:34.88

>>655
というかHTML書けてCSS書けないってどういう状態か不明で草

2021/07/25(日) 05:41:30.41

>>653
cssだけでできませんかね？

2021/07/25(日) 07:43:41.11

たぶん、アンケート調査で、HTML, JS, Ruby には使う印を付けるけど、

CSS には付けないのだろう

2021/07/25(日) 10:58:38.88

JavaScript技術者は約３０万人もいるのか…。

2021/07/25(日) 11:00:31.66

>>660
アレ？
CやPHPより多いというのはどういうことだ？
JQureryを貼ってるだけでJavaScriptエンジニアを名乗っている奴もいるということか？

2021/07/25(日) 11:41:43.27

cssできないプログラマーが圧倒的に多い

2021/07/25(日) 17:17:31.43

>>662
え、本当ですか？

JavaScript技術者は日本国内では実際にどの程度いるか分かる方いますでしょうか？
JQueryのみは除外した場合で。

2021/07/25(日) 20:29:40.21

javascriptわからない奴がjqueryを使いこなせるとも思えんが

2021/07/25(日) 21:03:55.43

>>664
とりあえず貼り付けて使ってた女子社員がいた。
当然プロトタイプって何？　美味しいの？　という感じだった。

2021/07/26(月) 01:07:59.65

まともなwebデザイナーならjsやjqueryくらいなら当たり前に使えるし

2021/07/26(月) 01:25:28.37

まともなWebデザイナが少ないと思ってる
このスレでも余所でも何もわかってない丸投げ質問が少なくない

2021/07/26(月) 03:26:52.00

５ｃｈに丸投げ質問してる人が何でWebデザイナだってわかるの？

2021/07/26(月) 09:03:30.22

そりゃ思い込んでるんだから自分が正義なんですよ

2021/07/26(月) 09:54:32.14

>>666
JavaScriptがよく分かってない人は多い。

で、国内のJavaScriptエンジニアはどのくらいの数がいるの？

2021/07/26(月) 10:24:11.39

>>670
不毛な質問だと思うけどね
https://www.itra.co.jp/webmedia/programming_language_ranking.html

2021/07/26(月) 10:54:00.67

javascriptが動かない環境ってまだまだあるんでしょうか？
ブログの見出しをjavascriptで取得して、ページ内リンク(目次)にしたいのですが。
wordpressならそのようなアドオンがあるんですが、ライブドアブログなので。

見出しは記事内に手書きしたほうがいいでしょうか？

2021/07/26(月) 11:03:46.60

JavaScript の質問は、この板ではなく、web制作管理板の方へ書き込んでください！

この板のスレは、荒らしが出た時に、一時的に緊急避難用に立てたものです

2021/07/26(月) 15:01:24.78

今来てるのがあらしなら
隔離がうまく機能してると言える訳で
本スレや本板を教えるのは逆効果

2021/07/27(火) 20:06:25.72

const thumbs = document.querySelectorAll('.thumb');

thumbs.forEach(function(item,index) {

item.onclick = function() {

document.getElementById('bigimg').src = this.dataset.image;

}

});

2021/07/30(金) 18:19:58.69

スクレイピングしたいんですけど何を勉強すればいいですか
不正アクセスに問われたりしないでしょうか？
セキュリティ対策はどのようなことに注意すればよいでしょうか？

2021/07/30(金) 19:50:46.65

質問場所が違う

スレ立てるまでもない質問はここで 157匹目
https://mevius.5ch.net/test/read.cgi/tech/1624024239/

2021/07/31(土) 18:56:31.47

>>676
python

2021/08/01(日) 11:31:04.39

ブログ記事のヘッダ(h要素)を取り出して目次化する機能をjavascriptで作りました。
目次ってのは直接、idを指定して作ったほうがいいんでしょうか？

このような疑問を持ったのは、javascriptが動かない場合を考えてです。

2021/08/01(日) 12:45:35.34

大抵のブログにはもともとそういう機能あると思う

2021/08/01(日) 14:53:40.48

>>680
ワードプレスならプラグインがあるんですが、ライブドアブログなんですよね。
調べましたが、おそらくないと思います。

2021/08/01(日) 22:39:15.41

JavaScript の質問は、この板ではなく、web制作管理板の方へ書き込んでください！

この板のスレは、荒らしが出た時に、一時的に緊急避難用に立てたものです

2021/08/02(月) 06:44:39.43

そうなんですか？

2021/08/02(月) 06:59:02.24

>>683
元々はWeb制作板が本スレだが、Web制作板もある時から次スレが立たなくなり、重複スレの再利用しかされなくなっている
既に本スレがどちらといえる状況ではない為、好きな方に書き込めば良い

2021/08/02(月) 20:51:31.31

はい

2021/08/06(金) 14:39:15.85

最近、ステップ実行というデバッグ方法をはじめてみたんですが、使い方がよくわかりません。
質問です。

１：ステップ実行はブラウザの機能を使うのが普通なんでしょうか？firefoxです
２：ブレークポイントから実行されるようですが、行末までいったらブレームポイントに戻るという挙動似できないのでしょうか？
firefoxです

2021/08/06(金) 15:12:12.08

Node.js, VSCode をインストールするのが基本

VSCodeの拡張機能も一杯あるし、デバッグも出来る

2021/08/07(土) 05:29:09.18

>>687
どうも
htmlファイル内のjsをデバッグする場合はブラウザになるんですかね？

2021/08/07(土) 05:55:47.26

Firefoxの挙動を調査するにはFirefoxを使う

**687** (ﾜｯﾁｮｲ 822c-2tbN [211.11.11.1]) · 2021/08/07(土) 13:14:23.80

VSCode で、break point を付けたりして、1行ずつデバッグする。
好きなブラウザも起動される

例えば、ボタンをクリックした時のコールバック関数に、break point を付けて、
ブラウザでボタンをクリックすると、そこで止まる

そこから、1行ずつデバッグするような感じ

まあ、VSCodeの使い方・おすすめ拡張機能を学ぶのが先。
YouTube でも見れば？

この板にも、VSCodeのスレがある

2021/08/08(日) 13:12:16.33

>>689
>>690
どうも
ブラウザで動かすものなので、すべてブラウザ上のデバッグツールでは駄目なんでしょうか？

2021/08/08(日) 13:28:13.29

>>691
そのWebページを訪れる全てのWebブラウザでデバッグするのが正しい

2021/08/08(日) 13:59:15.55

node jsとvscode使ってみたんですが　デバッガーのタブを開いて、node.jsをデバッガーとして開き、runcurrent fileを洗濯するという手順でいいんすかね？

2021/08/08(日) 15:22:47.76

>>692
vscode上でのデバッグだとまとめて出来るという意味でしょうか？

2021/08/08(日) 17:28:52.75

>>694
どのようなロジックでそのように解釈した？

VScodeはブラウザではないし、>>691のあなたの考えから飛躍している
意味がわからない

2021/08/08(日) 20:33:00.96

>>695
node.jsを使ったデバッグだとまとめてできるのかなと思いこんでました
node.jsはブラウザをvscode上で再現するものではないのですか？
console.logの結果をdebug consoleに表示出来たり。

2021/08/08(日) 21:20:49.18

>>696
調べてからものを言うべきだ
https://nodejs.org/ja/about/

2021/08/08(日) 21:49:22.54

>>687あたり見て言ってるんでしょ
何が基本なのか知らんけど

2021/08/08(日) 21:52:29.48

>>698
そんなんだろうが、そこから憶測で物事を決め付け過ぎる

2021/08/08(日) 22:25:01.50

ボタンを無効化したいです

button.setAttribute("disabled");
これだとdisabledがセットされないのですが、なにか間違っているでしょうか？
valueを追加しても同じです。

サンプルコード通りにやってみたんですが、、、

2021/08/08(日) 22:30:55.91

>>700
調べずに憶測で決めつけるな、と何度いえば理解出来るんだ？
https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute

2021/08/09(月) 06:27:35.78

>>701
どの部分が間違っているのでしょうか？

2021/08/09(月) 08:22:05.11

valueは必須
>>1読んでからサンプルコードがあるならまずそれを出して

2021/08/09(月) 09:38:38.41

ここは答えだけ教えてもらえる場所じゃないから
それを求めてるなら別の場所に行って

2021/08/09(月) 09:50:15.30

>>702
第二引数が省略可能とどこに書いてある？
省略時に属性値が何になったか確かめたか？

setAttributeでdisabled属性を指定する方法をぐぐったか？
setAttributeのMDN英語版を読んだか？

2021/08/09(月) 10:18:05.96

了解っす。

2021/08/09(月) 13:39:27.94

JavaScript の実行環境には、Node.js・ブラウザの2つある。
Node.jsを入れておくと、JavaScript のコード片を、
ブラウザを使わずに実行できるので便利

例えば、拡張機能・Quokka.js では、
console.log しなくても、オブジェクトの中身が表示される

let a = 1
a //=> 1

拡張機能・Code Runner では、右クリックメニューから、
ファイル全体または選択したコード片を実行できる

上の2つは、Node.jsの実行環境

一方、ブラウザで実行するなら、
拡張機能・open in browser では、ローカルファイルアクセスになる

一方、拡張機能・Live Server では、
自分のPC 内にサーバーを立ててから、そこから配信されるので、テストしやすい

ローカルファイルアクセスでは、CORS など、ブラウザの色々な制限がある

どの道、Node.js は絶対に必須。
npm/yarn, webpack, babel など、様々なツール・プロジェクトで使っているから。
Ruby on Rails でも必須

2021/08/09(月) 20:37:20.30

ロジックが分からないといった場合、デバッグは役に立たないのですか？

2021/08/09(月) 21:38:55.96

ごめん質問のロジックが分からない

2021/08/09(月) 22:31:45.41

>>708
ロジックが分からなければ、コードは書けない
デバッグ以前の問題

2021/08/10(火) 05:43:40.17

>>709
座布団1枚！

2021/08/10(火) 05:53:52.56

>>710
で、ですよね、、、(´・ω・`)

2021/08/10(火) 21:33:07.35

ステップ実行というのは同じ範囲を何度もループ出来るんでしょうか？
例えばクリックするごとに数字が加算されていくというばあい、同じ範囲をループさせる必要があります

<button id="button1">ボタン</button>
<script>
let button1 = document.getElementById("button1");
mode = false;
num = 0;
button1.addEventListener("click" , function()
{
switch(mode)
{
case false:
mode =true;
num += 1;
break;
case true:
mode = false;
num += 1;
break;

}
console.log(num);

});

</script>

このコードのaddEventListenerの範囲を何度もループさせたいのですが。

2021/08/10(火) 21:48:11.22

イベントにブレークポイント仕込んで
何回もクリックすればええやん

2021/08/10(火) 23:01:22.02

>>713
反復処理を入れれば良い

2021/08/11(水) 11:45:51.34

>>714
すみません
firefoxなんですが、例えばブレークポイントを以下のように仕込んでもループしません
開発環境によって違うのでしょうか？
以下の0と5にブレークポイントを仕込み、step inを連打しているのですが、この範囲をループしません
console.log("0");
console.log("1");
console.log("2");
console.log("3");
console.log("4");
console.log("5");

>>715
どうも
調べてきます

2021/08/11(水) 13:18:09.70

「javascript 繰り返し」で検索！

for, do...while, while
label, break, continue
for...in, for...of

2021/08/11(水) 14:14:15.47

ideやブラウザではなく、コードの方で対処するということですか？

2021/08/11(水) 14:16:43.01

コードに書いてない動作をしたら
デバッグにならんでしょ

2021/08/11(水) 14:26:13.53

コードで繰り返してないのに繰り返したらおかしいじゃん

何度もクリックすればいいってのは、イベント仕込んだ要素をってことでしょ
ステップイン連打って、どこをどうしたらそういう理解になるのかわからん

2021/08/11(水) 14:38:47.36

>>716
カウントが追加されているかを確認したいんだったら、
デバッグ用にクリック時に変数値を表示するアラートでも出したら？
なんか根本的な部分がわかってない気もするんだけど。

2021/08/11(水) 16:45:11.40

>>721
ステップ実行を使いたいんですよね
ステップ実行で繰り返しは出来ないんですよね

確かに根本は理解出来ていないです

2021/08/11(水) 17:21:03.66

>>713
ブラウザを起動して、HTML を読み込んで、
開発者ツールのコンソールを開きながら、ボタンをクリックしていくと、

コンソールに、1, 2, 3 と表示されて、ちゃんと1ずつ増えていく

2021/08/11(水) 17:40:28.99

>>722
ステップ実行でもbreakpointでもコードにない動きはしない

2021/08/11(水) 17:45:17.95

click イベント内で、break point で止めてから、step 実行していっても、
callback 関数を抜けると、実行が止まる

そこで一旦、ブラウザに戻って、またボタンを押さないと、
callback関数が呼ばれない

つまり、イベントの場合は、VSCode だけでは出来ない。
同時にブラウザも操作して、イベントを起動しないといけない

2021/08/11(水) 18:04:02.19

>>725
ステップ実行が何かを調べる事から始めるべき

2021/08/11(水) 18:22:34.40

マジですまんが何がやりたいのか分からないのでまともなアドバイスが出来ない
「ステップ実行で繰り返し」が最終目標なら諦めて

**725** (ﾜｯﾁｮｲ 822c-Lto6 [211.11.11.1]) · 2021/08/11(水) 18:50:49.65

click イベント内のcallback 関数は、VSCode だけでは実行できない

同時にブラウザも操作して、イベントを起動しないと、
callback関数が呼ばれない

2021/08/11(水) 19:12:40.02

>>728
dispatchEventで発火可能
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/dispatchEvent

2021/08/11(水) 20:12:32.61

>>723
ボタンをクリックしていけばそうなんですが、ステップ実行のstep inの連打でそのような挙動をさせたいのですが、無理なんでしょうか？

2021/08/12(木) 08:52:00.10

>>730
ステップ実行はあくまで、ブレークポイントまでを順に降りて実行するだけ。
意味もなくステップ実行にこだわるなよ。

2021/08/12(木) 09:29:13.14

ん？イベントハンドラの中をステップ実行したいの？
ソコが少し分からん。
あと、バベってたりしない？うまく掛からん事があるよ。

2021/08/12(木) 11:30:17.02

複数から>>718-720,724といわれて、未だにステップ実行で繰り返し処理しようとしてるのは理解出来ない

2021/08/12(木) 11:40:23.94

ステップ実行のロジックを理解しなぎゃ話にならない
>>708は何だったのか

2021/08/12(木) 12:06:58.17

ChromeならgetEventListeners使ってコンソールから直接イベントを繰り返し発行すればいい

listeners = getEventListeners(button1)
listener = listeners.click[0].listener
// debug(listener) // set breakpoint
for(let i=0;i<10;i++) listener()

2021/08/13(金) 16:09:16.34

>>733
繰り返し処理のデバッグはステップ実行を使わないのですか？
ステップ実行がどんな場面で必要かよくわかりませんが、

2021/08/13(金) 16:27:54.44

質問者はブラウザを操作しないで、VSCode だけで、イベントを繰り返したいのだろ？
ブラウザのボタンをクリックすると、イベントが呼ばれるから簡単なんだけど

クリックなど、ユーザーのアクションが無いと、
イベントが呼ばれない事を知らないのかも

2021/08/13(金) 19:28:29.54

array.lengthで取得できる配列の長さって、実行時に数えているのでしょうか？
それとも要素数を値として持っているのでしょうか？

2021/08/13(金) 19:31:32.80

数えてるという言い方が正しいかわからんが
valueを削除したあとlengthを再取得すると減る

2021/08/13(金) 19:45:15.15

array.lengthがO(1)かO(n)かってこと？

2021/08/13(金) 20:04:58.72

>>736
繰り返し処理がないコードで繰り返し処理が出来るわけない
コードに繰り返し処理を入れて、デバッグしろ、と何度もいってる

2021/08/13(金) 20:06:25.53

>>737
>>729では出来ない？

2021/08/13(金) 20:30:04.92

さすがに、配列の要素数ぐらい持ってるだろ

関数型のElixir では、リストの要素数を、その都度数えるけど。O(N)

2021/08/13(金) 20:56:08.85

data propertyってあるからとりあえず値は持ってるハズ
https://tc39.es/ecma262/#sec-properties-of-array-instances-length

2021/08/14(土) 07:42:49.75

>>741
ブレークポイントの範囲内で動かすというようなことが出来るのかなと

2021/08/14(土) 08:00:11.15

>>745
繰り返し範囲をどうやって設定するんだ？
何か設定をしたのか？

2021/08/14(土) 11:31:45.65

>>746
ブレークポイントを２つ設定することで、範囲が指定されるのかなと考えていました

2021/08/14(土) 11:35:01.27

>>747
3つあったら3つ目には永遠に辿り着かない？
あなたの想定する挙動が公式ヘルプのどこに書いてあった？

2021/08/16(月) 14:04:43.59

>>748
ブレークポイントは２つです。
この範囲内のみの実行が可能かと思っていました。
ヘルプは読んでいないのですが、そういうものかと思いこんでいました。

2021/08/17(火) 07:58:32.06

「ハンズオンJavaScript」と言う難解な本を読んでいます。
classの学習に入る前に、
classを使わずに関数で他のオブジェクトの構造を継承と言うか取り込んだ後、
自身のインスタンスを生成し、
それを返す関数の定義が以下のようにされているのですが、
ここでスプレッド演算子を用いている意味がさっぱり分かりません。
(書籍に説明もありません)
外すとまともに動作しなくなります。
このスプレッド演算子からなる「...parent」は
どういった働きがあるのでしょうか？

function Vector3( x, y, z )
{
let parent = Vector2( x, y );
const o =
{
parent,
...parent,
z,
lengthSq: Vector3_lengthSq,
add: Vector3_add
};
return o;
}

2021/08/17(火) 12:09:13.23

parentで親のプロトタイプチェーンにつないで
…parentで親のプロパティをコピーしてるんではないかな

2021/08/17(火) 12:12:47.41

「javascript スプレッド構文」で検索！