+ 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/06/17(木) 14:39:14.89

>>589
誰のためにあるかという話だわな。
なおクラス構文導入議論時、反対派の旗手だったのはグッドパーツ著者でありJSONの発明者でもあるダグラスクロックフォード。

https://www.graat.co.jp/blogs/ckn8ourdkezx50b95h4v5uk1o
障害物 #1: .NET開発者のチーム参加
概念実証の後は、クライアントのアウトソーシングチームの開発者が合流した。知識共有はまだ始めておらず、CTOから「やあ、Răzvan。明日は本物のアウトソーシングチームと会わないといけないね」とメールが送られてきた。

我々はミーティングを設け、テクニカルリードは私を質問と解決策で迎え撃った：

「依存性の注入はどこですか？『必要ない』とはどういうことですか？」：これはInversifyJSだよ！
「関数コンポーネント？　ダメダメダメ。我たちは好きじゃないからクラスコンポーネントを使いましょう！」
「なぜこれらの関数はただぶら下がっているだけなのですか？　なぜ静的にするためサービスクラス内でカプセル化しないのですか？」
「APIのリトライポリシーはどこですか？　PollyJSで実装しましょう」
「なぜクラス名がパスカルケースの場合にファイル名がダッシュケースとなるのですか？　クラス名を反映させるため、今後はSomePageComponent.tsxという名前にします」
そして、私をもっとも悩ませた件：「Visual Studio CodeでなくVisual Studioで実行するにはどうすればよいでしょうか？」
私は確信した。彼らはReactで .NETのガイドラインとデザインパターンを使いたがっている。私は何度もこのような出来事を見てきた — 新しい技術のやり方に適応できず苦労している開発者だ。

↓

9か月後、我々は50ページ以上を作成していた。開発者たちは関数コンポーネントがクラスコンポーネントと同じくらい良いことに気づき、それらを使い始めた。その結果、進行中のプロジェクトは元々のコーディング規約に従わなくなっていた。

本当.NET老害ってクソだわ。
自分が分からないからって意味ない（できることが増えるわけでもない）クラスベースに固執しといて、単純な関数で同じことできると気づいたらお前らのワガママに合わせて作ってやったコーディング規約破って勝手に使い出すんだからな。
いや、言いだしっぺなんだからクラス使い続けろや！

2021/06/17(木) 16:52:43.35

>>590
結局これも将来的には非推奨になりそうですよね。
中途半端な機能を増やされると現場はかえってしんどい。

2021/06/20(日) 16:40:52.66

要素を取得して、appendchildしたいのですが、appendchildは移動になるんですよね。
そこでassignでコピーしたいと思います。
以下のspanをコピーした後、別のspan内に入れたいです。

<span id="test_span" style="background-color: skyblue;">てすとな</span>
<ul id="table_of_content"></ul>

let toc = document.getElementById("table_of_content");
let span = document.getElementById("test_span");
let copy = Object.assign(document.createElement("span") ,span);
toc.appendChild(copy);
しかし、これだとtable_of_contentにspanは挿入されますが、spanの中身がありません。

let copy = Object.assign(document.createElement("span") ,textContent:span.textContent);
こうへんこうしてもだめです。
let copy = Object.assign(document.createElement("span") ,{textContent:span.textContent});

これならokです。
なぜこのような結果になるのでしょうか？

マージするオブジェクトの型？みたいなものが一致していないとだめなのですか？
１つ目はタグにタグをコピーしているだけ
２つ目はタグにプロパティをコピーしている
３つ目はタグオブジェクトに、オブジェクトリテラル？をコピーしている？

この辺のことを教えて下さい

2021/06/20(日) 20:46:26.62

Nodeオブジェクトに元から存在するプロパティは列挙可能になってないからそのままObject.assginしても何もコピーされない
textContentプロパティだけを取り出してObject.assignするくらいなら
let copy = document.createElement("span");
copy.textContent = span.textContent;
でいいじゃない

もっともノードの複製は
let copy = span.cloneNode(true);
で一発。ただしid等の一意であるべき属性も存在する場合は複製されることに注意

2021/06/21(月) 11:08:34.75

>>593
ノード全体をコピーする場合はcloneで、タグ名などを変えたい場合は教えてもらった方法でやることにします。
1行目なんですが、「 Nodeオブジェクトに元から存在するプロパティは列挙可能になってないからそのままObject.assginしても何もコピーされない」というのはどういう意味でしょうか？
1つめのやり方に対してだと思いますが、どちらのspanエレメントもtextContentプロパティは持っていると思います。

とりあえず、中身もコピーする場合はプロパティにまでアクセスしないといけないことは分かりました。
object.assignというのはループを回しているわけですよね。おそらく。

2021/06/21(月) 18:44:30.50

素のJS書いてます
DOM要素の中身をまるまる消したいんですが、もっといいやり方ないですか？
今はinnerHTML=""で消してます

2021/06/21(月) 23:17:22.43

それだと気に入らない点は？

2021/06/22(火) 01:04:49.78

var el = document.querySelector('#nakamikiero');
while (el.firstChild) el.removeChild(el.firstChild);

別にinnerHTMLでいいと思う

?2BP(1000) · 2021/06/22(火) 01:23:10.83

初心者です。
chrome拡張機能を作っているのですが、自分のコードが他の人から見たら、見づらかったりするのか気になったので評価してくれませんか？
一人で作っているのでコメントはほぼないです。
https://harigami.net/cd?hsh=b5c6452f-fa81-4b69-b554-d68bf8194d75

2021/06/23(水) 17:45:18.28

constって値の変更できないのであとから値を変更したくなった場合letに書き直さないといけないので
最初からconstよりlet使った方が無難だよね？
constの方が速度が速いってこともないだろうし

2021/06/23(水) 18:05:46.06

JITの最適化に影響することはあるんじゃない？知らんけど
個人プログラムならそう困ることないし別にいいと思う

2021/06/23(水) 18:16:29.13

letってスコープ外からアクセスできないのであとからアクセスしたくなった場合let消してグローバル変数にしないといけないので
最初からletよりグローバル変数使った方が無難だよね？
letの方が速度が速いってこともないだろうし

2021/06/23(水) 18:20:16.91

>>601
グルーバルはどこからでも変更できちゃうので基本使わない
せやから変数はバケツリレーしてでも引数として渡す

2021/06/23(水) 20:29:20.42

>>602
それが分かるなら、「letはスコープ内で改変可能なので、再代入が必要な変数以外では使用しない」に辿り着くはずなんだがな

2021/06/23(水) 21:08:19.92

なんか新次元の考え方してるのがおるな

2021/06/23(水) 21:53:55.51

再代入が必要な変数が全体の何割あるかまず眺めてみたらいいんじゃね
更にあとから再代入の必要性に気付くパターンに絞って何割あるのか

2021/06/24(木) 21:15:11.64

>>602
>>601 がアイロニーだってことくらい気づけよ。

2021/06/25(金) 16:01:35.51

DIVの中にline-hightを設定したテキストを入れた時と同じ場所になるようにDIVと同じサイズのCanvasの中に文字を書き込みたいんだけどどうやるの(´；Д；`)

2021/06/26(土) 17:26:43.66

>>607
ボックスモデルと同じ計算を実装すればいい
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

2021/06/26(土) 18:57:01.42

>>608
line-height内でのテキストの上下方向の位置を合わせる方法がわからない

2021/06/26(土) 19:10:04.18

>>609
border,line-height,paddongを計算すればいい
というか、ボックスモデルを読め

2021/06/26(土) 19:52:17.54

ボックスというかベースラインの話
今サンプル作る

2021/06/26(土) 20:25:23.61

>>611
ではvertical-alignを作れ
https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align

当初のline-hightが関係なくなってる
現象を切り分けしてから質問してくれ

2021/06/26(土) 20:30:25.16

>>612
そのベースラインの座標がわからない

2021/06/26(土) 20:35:43.90

サンプルがこれなんだが、最後の 80*0.64 って奴がline-height*割合で
割合を調整してベースラインの位置に来るように調整してあるんだがfont-sizeやline-heightを変えると0.64じゃ一致しなくなる
https://codepen.io/as124680/pen/wvdwWyO

2021/07/12(月) 23:42:04.57

<table id="tb">
<tr>
<td><img src="./test1.png"></td>
<td><img src="./test.2png"></td>
<td><img src="./test3.png"></td>
</tr>
</table>

tableの中にあるimgのelementを取得したいんですけど
imgに個別にidやclassを設定しなくてもそれぞれのimgのelementを取得できる方法があったら
やりかたを教えてください

2021/07/13(火) 00:00:08.97

>>615
document.querySelectorAll("#tb td > img");
セレクタの指定は適当なので目的に応じて考えてくれ

2021/07/13(火) 03:42:43.38

「css セレクタ」で検索！

x y は、xの子孫(子・孫・玄孫なども含む)のy。
x > y は、xの子(直下のみ)のy

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

2021/07/18(日) 14:00:13.55

プログラミングするときは必要な処理を必ず日本語化したほうがいいですか？
まず、必要な機能をすべて書き出してから、フローチャート的なものを作る

ぶっつけでコードを書き始めると駄目ですかね。

2021/07/18(日) 14:03:11.59

いや全然

2021/07/18(日) 16:06:28.09

ストップウォッチを作っています。
１：スタートボタンを押した時にカウントアップを開始し
２：もう１度押すと停止します
３：もう１度押すと途中からのカウントアップを開始します

この途中からのカウントアップのやり方がわからないのでヒントを教えて下さい。
addTime変数にカウントアップ途中の数値をセットし、3に加算すればいいわけですが、上手くイカなかったので教えて下さい。
わからないのはaddTimeの取得方法と、加算のタイミングです。

2021/07/18(日) 16:08:02.80

https://ideone.com/Fq7ki3
コードはこちらになります。

別の質問なんですが、コードのペーストサービスってどこがいいんでしょうか？

2021/07/18(日) 16:09:17.45

一人で作る場合はそんなことしてる奴ほぼいないと思う
チームで作るならそれをするのはPMの仕事

2021/07/18(日) 18:28:56.11

>>621
ごめんコード見てない
https://jsfiddle.net/bLce9az3/

2021/07/18(日) 20:54:37.23

JSFiddle が多いかも。
Ideone とか

Codepad は、バージョンが古い感じ

日本なら、paiza.IO

2021/07/18(日) 23:43:41.81

>>623
どうも
performanceを使うといいんすね

差分の部分も参考にさせてもらいす
わからなかったら聞きます

2021/07/19(月) 14:43:39.83

jaavscriptって型あるんですか？
let ms= 1000
としてもデータオブジェクト？じゃないので、getUTCSeconds()などが使えません
let ms = new Date(1000)

これでokです

>>624動作確認しやすいのでjsfiddleにしときます

2021/07/19(月) 19:11:44.96

JSは動的型付け言語なので当然型はある
あと所詮60の除算をしてるだけなので、いちいちDate型に変換するのはぶっちゃけ大仰

2021/07/19(月) 20:25:14.80

>>623
performance.nowって時刻を取得して差分を求めるより、正確なタイマーになるんでしょうか？
utcの時刻です。

2021/07/19(月) 21:04:01.22

ブラウザ次第としか
最近は敢えて精度を落としてることもあって、多分変わらんかも

2021/07/19(月) 21:45:19.83

>>621
k4aのコードに似てるのは気のせいか？https://teratail.com/questions/348862

>>628
同じ質問者が質問して得た回答に答えはある
https://teratail.com/questions/348048

2021/07/20(火) 06:08:39.83

>>630
performanceについての質問はしてないですよ。
performanだとcpu性能などに影響されるのか分かりません。

2021/07/20(火) 06:28:13.06

>>631
失礼、performance.now()には触れてなかったな
だが、リファレンスに書いてある

https://developer.mozilla.org/ja/docs/Web/API/Performance/now
> performance.now() メソッドは、ミリ秒単位で計測された DOMHighResTimeStamp を返します。

---

https://teratail.com/questions/348048
> あらゆるイベントに timeStamp というプロパティがあり、これが 0.005ms 程度の精度だそうです。

こう回答されたら、俺ならtimeStampプロパティを使うが

2021/07/20(火) 11:44:45.80

>>632
performanceはタイムスタンプを取得しているそうですが、その取得にはcpu性能が影響するのでしょうか。
最初のタイムスタンプの取得が遅れたとしても、終了時のタイムスタンプも同様に遅れるわけですから、差分は変わらないと考えればいいでしょうか。

2021/07/20(火) 18:05:59.91

>>633
CPUに影響しない処理はほとんどないも思うが、GPU演算を期待してるのか？
ハードウェアアクセラレーションは門外漢なので分からん
専門家に確認してくれ

そこまで気にしていて、requestAnimationFrameが候補に挙がらない理由が謎

2021/07/20(火) 19:59:06.20

質問の意図がよく分からないので何とも
完全無欠なタイマーが作りたいって話なら力にはなれん

2021/07/20(火) 22:23:21.73

>>634
ありがとうございました。
gpuを期待しているわけではないです。
非力な環境で正確な動作をするかどうか分からないのです。

2021/07/21(水) 21:55:42.60

msから時間（hour）を取得する関数はあるのでしょうか？
getutchourとgethourだと、時刻？が取得されるみたいです。
http://www.htmq.com/js/date_getUTCHours.shtml

1日が86400000msなので、何時間か得るにはこうします
86400000 / 3600000 = 24

getutchoursを使用すると結果は0となります。

let dt = new Date(86400000);
console.log(dt.getUTCHours());

2021/07/21(水) 22:38:44.52

ありません

2021/07/21(水) 22:45:53.25

割り算すら面倒ならMoment.jsでも使ったら

2021/07/21(水) 23:23:26.06

>>637
剰余

2021/07/22(木) 01:35:46.57

最近javascriptを始めた者ですが、最初の段階からつまづいています。
参考にしているのはこの本ですが「https://www.sbcr.jp/product/4815601577/」
ブラウザのコンソール機能を使って文字を表示させるのですが、上手くいきません。
「>console.log('おうむ返し');」と打ち込んでも、「Uncaught SyntaxError: expected expression, got '>'」
と言うエラーメッセージが出て上手く表示されません。
本に書いてある通りにやっているつもりなのですが、何故なんでしょうか？
宜しくお願いします。

2021/07/22(木) 01:46:58.75

console.log('おうむ返し');
と打ち込んでください

2021/07/22(木) 01:47:21.36

エラーメッセージにそのまま書いてるだろ
なんで読まないんだよ

2021/07/22(木) 02:05:33.27

>>642
「illegal character U+FF1B」と出るのですが・・・

2021/07/22(木) 02:13:03.04

自己解決しました。
「：」を付けるなと言うエラーでした。
しかし、本には「>」「；」を付けろと書いてあるのですが
付けてはいけないのでしょうか？

2021/07/22(木) 03:43:27.82

「javascript console.log」で検索してみれば？

2021/07/22(木) 03:43:40.04

u+ff1bは全角のセミコロン(；)
;みたいな半角にすれば上手くいく
セミコロンに限らずプログラムを書く時は文字列、コメント以外は基本全角を使ってはいけないことを意識した方がいい
JavaScriptの場合文字列にあたるのは"文字列"、'文字列'、`文字列`の3種類

2021/07/22(木) 03:57:29.35

言い忘れてたけど>はコンソールの入力を表してるだけだからそれ自体は入力しない
javascriptと直接は関係ないけど$とか#も同様

2021/07/23(金) 07:07:08.07

まああとエラー文くらいは英語でも読もうぜ
せっかくエラー出してくれてるんだから

2021/07/23(金) 14:12:58.59

都道府県のデータを地図上に表示させる場合、なにかしらapiを使いますか？
例えば、人口のデータ。
東京10万人、大阪5万人というデータだった場合、東京を赤に、大阪を青にします。

cssのareaとif文でできそうですが、グラフィカルに出来るやり方はあるんでしょうか？

2021/07/23(金) 16:25:33.46

知らないけど、Google MAP と契約するのじゃないの？

2021/07/24(土) 05:34:58.11

>>651
googlemapほど高機能じゃなくてもいいんですよね。
単なるグラフ化するライブラリなりあれば

ただ、地図ですが

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を使う