+ 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/04(金) 12:13:36.89

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/link
javascriptでlinkメソッドが非推奨になったようですが、代わりに何を使ってリンクをつけるんでしょうか？

2021/06/04(金) 12:14:09.97

>>513
糖衣構文としての class はあるが、クラスの概念はない
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes

[[Prototype]] とプロトタイプチェーンの理解が必要

2021/06/04(金) 12:19:22.31

>>514
組み込みはビルトイン
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects

プロトタイプは原型の意だろう
https://www.weblio.jp/content/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97
https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

2021/06/04(金) 12:20:38.14

>>515
createElement
https://developer.mozilla.org/ja/docs/Web/API/Document/createElement

2021/06/04(金) 18:27:11.43

let get_ul = document.querySelector("#test_ul");
let str = "hogehoge";
get_h2.insertAdjacentElement("beforebegin",str);

こうするとstrはオブジェクトじゃない、というエラーが出ます。
javascriptにおいてのオブジェクトとは、dom、つまりhtmlの構造を持つもののことでしょうか？
文字列を入れたいのなら、htmlと連結するのでしょうか。

>>516,517,518
ありがとうございます。全部見させてもらいます。

2021/06/04(金) 18:29:25.67

insertAdjacentText

2021/06/04(金) 18:32:49.09

↑上でやりたかったことはタグの中に文字列を挿入したかったのです
<a></a>
↑ここに「あああ」をはさみたいのです
innnerhtmlより、insertadjacenthtmlがいいと聞いて使ってみたんですが、文字型はオブジェクトじゃないと、、、。

2021/06/04(金) 18:38:54.51

>>521
textContent
createTextNode

2021/06/04(金) 18:44:54.98

>>519
あなたはまず、DOMのノードの概念を学んだ方がいい
https://uhyohyo.net/javascript/2_1.html
HTMLタグで捉えるから本質とかけ離れた考え方をするようになる

2021/06/04(金) 18:56:14.50

>>522
回答どうも
タグで包んだ場合はいけました

文字列だけの場合はtextContentですね

しかし、これはすべての内容物を書き換えてしまいます
そこでinsertadjacentを使いたかったです

2021/06/04(金) 19:14:18.33

>>524
挿入ならappendChildでも良い

2021/06/04(金) 20:28:32.31

>>525
ありがとうございます。
オブジェクトとそうでないものの違いってなんでしょうか？
全てはオブジェクトだと思うんですが。
stringはオブジェクトじゃないと。

2021/06/04(金) 21:09:03.37

連投すみません。
既存のタグの中にある文字を挟み込むように、新たなタグを挿入するにはどうしたらいいのでしょうか？

<div id="target_div">もじ</div>
↑これを
<div id="target_div"><p>もじ</p></div>
↑こうしたいです

let target = document.querySelector("#target_div");
let parag = document.createElement("p");
target.insertBefore(spa);

https://gray-code.com/javascript/add-html-element/
appendChild,before,after,insertBeforeはどれも違うようです。
前のpと閉じpを別に挿入することはできそうです。

まずtarget_divに対してpタグを先に追加して、innerhtmlで文字列を挿入したほうがいいのでしょうか？

2021/06/04(金) 21:45:58.82

>>526
オブジェクトでもあるが、ノード
困ったらMDNを読めば大体分かる
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild

>>527
replaceChild

いい加減、体系的に学ばないとリファレンスが読めるようにはならないと思うが　>>523

2021/06/05(土) 21:16:58.18

javascriptでボタンを押したときにaaaという変数の値(現在100)を変えるには
<input type="hidden" id="aaa" value="200">というのを作って
ボタンを押したときに
var aaa = document.getElementById("aaa").value;を呼び出すというやり方でやっていますが
この方法以外で変数の値を変えるやり方あったら教えてください

2021/06/05(土) 21:54:26.82

>>529
ボタンが押されたどうこうは変数値を変える機能に直線関係していない

変数値を変えるのは代入演算子
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Assignment
グローバル変数ならdefineProperty等のプロパティ操作系機能も使える

2021/06/06(日) 06:22:02.86

>>528
オブジェクトの種類の１つがノードってことですね
yagniってのを信じてて、使うことだけを勉強すると

>>523
domってのはつまり、ただの階層構造ですよね

2021/06/06(日) 07:01:24.97

現実で実践するのは良いがやり過ぎは友達無くすよ
文字通り要らんのかもしれんけど

2021/06/06(日) 09:39:10.77

javascriptの書物とか動画のおすすめとかある？
すでに書かれてあったらスマソ

2021/06/06(日) 11:35:27.06

javascriptでは単なる文字列はオブジェクトではない、とみなされるようです
ノード（つまりタグ）に対して付与されるものであって、文字自体はオブジェクトじゃないということですよね

2021/06/06(日) 12:08:34.85

んなあワケない

2021/06/06(日) 12:46:12.70

>>535
どうも勘違いしていたようです
使用している関数の引数として適切ではないという意味だったようで

2021/06/06(日) 12:57:18.59

insertAdjacentTextとinsertAdjacenetHtmlの違いってなんでしょうか？
<div>あああ</div>
どちらでも↑を↓の状態に出来ました。
<div><span>あああ</span></div>

動作の違いは感じられませんが

2021/06/06(日) 13:11:29.85

↑ああ、分かりました
adjacenthtmlだと、"<span>"などとしたときに閉じタグが付与されますね　勝手に

2021/06/06(日) 13:47:28.77

これは、プロ用の初心者向けの本。
かなり難しい

初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、オライリー、2017

2021/06/06(日) 17:40:54.85

開眼JavaScript

2021/06/06(日) 19:54:43.32

vscodeでjavascriptをhtml外から呼び出した場合、補完は効かないのですか？
htmlファイルとjsファイルを分けた場合、jsファイルでhtmlのidを取りたいなんていう場合
入力補完は当然出ません

このような場合はどうしてるのでしょうか？

2021/06/07(月) 14:09:10.93

10数年ぶりにプログラミングやってみようかなと思い立った初心者です
JavaScriptをやってみようと思っているのですが、学習ルートとしてまずES6
その後TypeScriptに行くべきか、Reactに行くべきか迷っています
AltJSとフレームワークなので一概にどちらが先とは言えないかも知れませんが、あえて選ぶならどちらから学ぶべきでしょうか？
もちろん最終的にはReactをTypeScriptで書いてWebアプリを作ってみたいと思っています
どっちでも良いと言われるような気はするのですが、それでもあえて諸先輩方のご意見をお伺いしたいです

2021/06/07(月) 14:43:46.50

いずれTypeScriptやること決めてるならわざわざJavaScript挟む意味ない
TypeScriptやってReact進めばいいだろ

2021/06/07(月) 17:15:28.63

javascriptのオブジェクトが、多言語でのクラスということですか？

2021/06/07(月) 17:28:09.54

違います
そもそも他言語のクラスとかひとまとめに我こそがスタンダードみたいに言うけど、そのクラスの用法ってクラスベースオブジェクト指向特有のものでしょ。
まぁJSも追従しちゃったけどさ。

2021/06/07(月) 17:29:49.37

ボクのオブジェクトも暴発しそうです

2021/06/07(月) 17:35:37.04

父のプロトタイプから包茎を継承してしまったようです

2021/06/07(月) 17:42:33.71

(;´д｀)

2021/06/07(月) 18:28:53.16

>>544
https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%99%E3%83%BC%E3%82%B9#%3A%7E%3Atext%3D%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%99%E3%83%BC%E3%82%B9_%28%E8%8B%B1%3A_class-%2C%E3%81%99%E3%82%8B%E3%80%81%E3%81%A8%E3%81%84%E3%81%86%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82
https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%83%99%E3%83%BC%E3%82%B9#%3A%7E%3Atext%3D%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%83%99%E3%83%BC%E3%82%B9_%28%E8%8B%B1%3A_prototype-%2C%E3%82%92%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%99%E3%83%BC%E3%82%B9%E3%81%A8%E5%91%BC%E3%81%B6%E3%80%82

2021/06/07(月) 18:46:01.96

>>542
その二択ならTypeScript
文法を先に学ばないと躓く

ES6は2015年の仕様で今から学ぶには古すぎる
ES2020を学ぶ方が効率は良い
http://www.ecma-international.org/ecma-262/11.0/

2021/06/07(月) 19:06:44.87

うせやろ
ES6で古いんだ
IE対応しないと駄目だったのでアロー関数使ってないから忘れたのに…
もう駄目だな…

2021/06/07(月) 19:18:18.21

>>551
IEをサポートする必要かあるのか、検討すべきでは？
https://docs.microsoft.com/ja-jp/lifecycle/faq/internet-explorer-microsoft-edge#internet-explorer--------------------------
https://kangax.github.io/compat-table/es2016plus/

2021/06/08(火) 11:33:50.39

オブジェクトリテラルはプロパティと同義ですかね？
オブジェクトの持つデータですよな

2021/06/08(火) 12:01:34.57

>>553
違う

あなたは先日からおかしな前提の質問ばかり
知識の穴が多すぎて一問一答で出来る範囲を超えている
YAGNI信じてるようだが、必要になったら基礎学習する習慣をつけるべき

2021/06/08(火) 12:26:14.97

> prototype=組み込み、といった意味だと思いますし、、、。

専門用語が分からない
↓
そうだ英単語の意味から推測しよう
↓
英単語の意味から間違えている

いくらなんでも酷すぎ
プログラミング関係なく問題解決の取り組み方が杜撰で稚拙すぎ
辞書引くことすら失敗するとか一体どういう教育受けてきたの

2021/06/08(火) 18:29:25.55

自分で調べるより専門家に聞いた方が早いと思うタイプの人なんだろう

>>555のようにちょっと調べればわかるはずの内容を質問したり、回答したURLを全く読んでないかのような反応が返ってくる
DOMもプロトタイプチェーンも学習した形跡がない

**532** (ﾃﾃﾝﾃﾝﾃﾝ MM7f-snJV [133.106.61.7]) · 2021/06/08(火) 18:39:03.92

忍耐強く付き合ってくれる方々が居るうちはYAGNIで上手く行くのかも知れない
早々に匙を投げてしまった自分が言える立場じゃないけど

2021/06/08(火) 21:06:17.76

オナニーメソッドは定義されてますが
セックスメソッドが見当たりません

2021/06/09(水) 11:50:43.35

C#の拡張メソッドはやってることが分かりやすいね
staticと宣言され、thisが第１引数
ただ宣言と利用で引数が違うのが気持ち悪い

C#で基礎的に多い使いどころはnull処理や型変換
なんでも型としてobjectがあるので
でもやたら型に煩いので中の分岐が面倒

javascriptの引数は全てなんでも型だが、逆にprototypeのthisだけは型が必要
なので、null処理や型変換は、普通の関数にしてる
そもそも「メソッドチェーンはnullで止まる」とか、最初から言われてたり

2021/06/09(水) 12:14:45.43

>>559
> javascriptの引数は全てなんでも型だが、逆にprototypeのthisだけは型が必要

後半はちょっと意味がわからない

this値はStrictModeで指定値をそのまま使い、SloppyModeで指定値をObject型に変換した値を使う
型の制約はないはず

2021/06/09(水) 12:35:56.32

>>560
失礼、nullが駄目なだけだね

2021/06/09(水) 12:40:37.25

オナホールに型があるとは知りませんでした
密閉型のつもりで射精したら貫通型だったらしくリークしてしまったようです

2021/06/09(水) 13:01:14.82

arrayとDocument.createDocumentFragment()の違いってなんでしょうか？
createElementで作成したタグを、ターゲットに複数追加したい場合、後者を使います。
しかし、arrayにもアンカーは格納されているようです。

2021/06/09(水) 13:53:10.87

>>561
nullでも問題はない
実証コードを書いて、問題が起きるパターンを整理してみては？
Object.prototype.toString.call(null)

2021/06/09(水) 13:54:10.75

>>563
回答スルーして新規質問を量産してるが、何がしたいんだ？

2021/06/09(水) 14:01:43.46

createDocumentFragment は、jQuery でも使っている

ソースコード内を検索してみ

2021/06/09(水) 15:23:28.36

>>564
Object.prototype.foo=function(s){略}
null.foo()　こう書けないなら

function foo(s){略}
foo(null)　こうせざるを得ない、ということなんですが

null.foo().bar()　この利点は
bar(foo(null)) これより目に優しいという

2021/06/09(水) 18:17:53.95

>>567
いろいろと誤解があるので、プロパティアクセサ、プロトタイプチェーンについて再学習することをお勧めする
(ちなみに、あげられている問題は「this値」は全く関係していない。用語定義も見直したほうが良いと思う。)

Object.prototype.foo を定義してfooプロパティを参照できるのは、new Objectかプロトタイプチェーン上に Object.prototype が存在するオブジェクトに限定される
プロパティアクセスする際、それがPrimitive値であるなら、Object型に変換してプロパティ参照を試みるが、null, undefined はObject型に変換できず、TypeErrorとなる

(null).toString; // TypeError: Cannot read property 'toString' of null
(undefined).toString; // TypeError: Cannot read property 'toString' of undefined

なお、null,undefinedでなくても、プロトタイプチェーン上に Object.prototype が存在しなければ、Object.prototype.foo をプロパティアクセサで参照できない

Object.prototype.foo = 1;
console.log(Object.create(null).foo); // undefined

Object.prototypeの影響範囲は大きいが、それでも全てのデータに影響を及ぼすものではない

2021/06/10(木) 08:41:17.28

>>568
だからnullは駄目ってことですよねｗ
（C#ではそれができるという違い）

2021/06/10(木) 08:57:10.02

>>569
null.foo()が動かない背景の説明>>567,559が何一つ正しくなくて比較対象として成立していない、という話

2021/06/12(土) 12:09:15.43

JavaScriptは初心者向けの簡単な言語と言われているけど、ものすごく難しくないですか？
Javaとアセンブラも出来るけど、JavaScriptの方が圧倒的に難しい。

2021/06/12(土) 13:07:42.11

当たり前だけど初級レベルはそれほどでもない
しかし製品レベルを作るとなると一気にナンジャコレ的な書き方でジャバパーたちには理解不能になる
そこにDOM、jsxやstyle componentとかも入ってくるからもはや宇宙語になる

2021/06/12(土) 13:10:20.75

まずJavaが出来るとはどこまで出来るのか

2021/06/12(土) 13:34:25.97

JavaScriptはWEBブラウザを誰でも持っていて環境が身近だから試してみやすいというだけで、言語自体が初心者向けというわけではないだろ。

まともに使おうとしたらかなり筋の悪い言語。所詮はWEB用のDSL。
Excelは持ってるからVBAやってみるみたいなもんだよ。

2021/06/12(土) 15:13:04.15

>>573
ボラクルのシルバー

2021/06/12(土) 15:55:52.61

>>571
JavaScriptの理解が難しくなる下地は十分にある

- 複数の仕様書
- 複数ブラウザで動作確認
- 新機能作成時の制約(一定の後方互換性を担保)

それ以前にESレベルの基本を分かってない人が多過ぎな気はするが

- 型
- [[Prototype]]
- プロトタイプチェーン
- スコープチェーン

2021/06/12(土) 17:03:36.21

JavaScript(正しくはECMAScript)ほど仕様しっかりしてる言語は今メインストリームの言語でそんなにはないと思うけどな。Cはしっかりしてるけど、かなりコンパクトな言語だからドキュメント量が全然違う
RubyやPythonにいたっては酷いもんだ。思い付きで作ってるレベル

2021/06/12(土) 17:20:10.36

仕様が複数あると言っても、Babel使ってES2020から入るのが正解だろうね。
余計なことを学ぶ必要性が減る。プロトタイプチェーンなんて最初は知らなくていい。

2021/06/12(土) 17:33:15.15

Babelで後方互換性担保できるといっても
Setみたいに色々なことができるせいで機械的な書き換えができないコンストラクターがあるからなあ
業務端末が古いandroidのイントラ案件でSet動いてないの気付かず3時間くらい無駄にしたわ

2021/06/12(土) 17:52:32.79

JavaScript関連の仕様はECMAScriptの他に、DOM,HTML,UIEvents,fetch,Selectors,CSDOM等、多くの仕様がある
Babelを使えば、ECMAScriptをES2020に一本化出来るが、他の仕様は読まなければならない
仕様書の中には日本語訳がなく、英語を読まなければならない場合もある

対して、Ruby,Pythonは公式マニュアルの日本語訳一つを読めば事足りる

資料の読みこなしの面では、JavaScriptの難度は非常に高い
不正確な二次情報に惑わされたり、MDNも時々間違ってたり、罠が多い

2021/06/12(土) 18:08:20.99

DOMを扱うならDOMを学ばなきゃならんというだけでJavaScriptとは関係ないが？
RubyやPythonを使ったとしてもDOMを扱うなら同じように必要だろう。

Webだけで学ぼうとすると古い情報に惑わされやすいというのはその通りだな。
ちゃんとした書籍を1冊用意して学ぶのが吉。

2021/06/12(土) 19:05:50.66

>>581
Python公式文書はDOM APIの説明があるので、DOM仕様書を読まずともある程度の情報は得られる
https://docs.python.org/ja/3/library/xml.dom.html

ESにはDOM,HTML,fetch,CSSOM等のAPI情報は当然ない
MDNがこの役割に近いが、仕様程の信頼性がなく、英語版と日本語版で情報に差異があったり、仕様と比べて情報鮮度が落ちている部分がある
体系的な一カ所にまとまった一次情報と呼べるものがJavaScriptにはない
実装が複数仕様を実装する形なので当然だが、調査コストが高いのは事実

Pythonは仕様と実装が同一なので、仕様と実装の差を区別する必要がない
ドキュメントも仕様と実装の2つ分を読む必要がなく、最新の情報に整備されている

2021/06/12(土) 19:38:43.59

糞どうでもいいさにしか思えないがそこまでして優劣をつけたいんだろうか

2021/06/12(土) 21:01:08.50

>>583
ちゃぶ台返しだな
>>571と>>581にいってやれ

2021/06/12(土) 21:06:47.07

？
DOMを持ち出すのは関係ないし糞どうでもいいことなのは変わらんが？

2021/06/15(火) 08:09:22.25

１個の商品の金額の場合オブジェクトでvar shouhin = {};と宣言してshouhin.kingakuとすればいいんですが
複数の商品の場合shouhin[1].kingaku、shouhin[2].kingakuのようにしたいんですが
宣言や関数で引数として渡す場合はどうすればいいですか？

2021/06/15(火) 08:57:01.65

配列にするだけじゃん。

2021/06/17(木) 11:44:35.91

内部関数をコールバックに渡せるのは超楽だね
同名のグローバル関数があってそっち行くかな？と思ったらちゃんと内部関数に行った
（そもそも普通の関数に内部関数をほいほい書ける時点で超楽だが）

コールバックがグローバルに限定された言語の場合、名前管理が増えるのが嫌で、
なんとかコールバック使わずに、とか頭をひねっちゃう

2021/06/17(木) 12:31:17.20

classを使ってる奴いる？
今まで通りfunctionのコンストラクタで十分だよな。

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