+ JavaScript の質問用スレッド vol.123 + [無断転載禁止]©2ch.net
■ このスレッドは過去ログ倉庫に格納されています
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 >>529 ボタンが押されたどうこうは変数値を変える機能に直線関係していない 変数値を変えるのは代入演算子 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Assignment グローバル変数ならdefineProperty等のプロパティ操作系機能も使える >>528 オブジェクトの種類の1つがノードってことですね yagniってのを信じてて、使うことだけを勉強すると >>523 domってのはつまり、ただの階層構造ですよね 現実で実践するのは良いがやり過ぎは友達無くすよ 文字通り要らんのかもしれんけど javascriptの書物とか動画のおすすめとかある? すでに書かれてあったらスマソ javascriptでは単なる文字列はオブジェクトではない、とみなされるようです ノード(つまりタグ)に対して付与されるものであって、文字自体はオブジェクトじゃないということですよね >>535 どうも勘違いしていたようです 使用している関数の引数として適切ではないという意味だったようで insertAdjacentTextとinsertAdjacenetHtmlの違いってなんでしょうか? <div>あああ</div> どちらでも↑を↓の状態に出来ました。 <div><span>あああ</span></div> 動作の違いは感じられませんが ↑ああ、分かりました adjacenthtmlだと、"<span>"などとしたときに閉じタグが付与されますね 勝手に これは、プロ用の初心者向けの本。 かなり難しい 初めてのJavaScript 第3版 ――ES2015以降の最新ウェブ開発、オライリー、2017 vscodeでjavascriptをhtml外から呼び出した場合、補完は効かないのですか? htmlファイルとjsファイルを分けた場合、jsファイルでhtmlのidを取りたいなんていう場合 入力補完は当然出ません このような場合はどうしてるのでしょうか? 10数年ぶりにプログラミングやってみようかなと思い立った初心者です JavaScriptをやってみようと思っているのですが、学習ルートとしてまずES6 その後TypeScriptに行くべきか、Reactに行くべきか迷っています AltJSとフレームワークなので一概にどちらが先とは言えないかも知れませんが、あえて選ぶならどちらから学ぶべきでしょうか? もちろん最終的にはReactをTypeScriptで書いてWebアプリを作ってみたいと思っています どっちでも良いと言われるような気はするのですが、それでもあえて諸先輩方のご意見をお伺いしたいです いずれTypeScriptやること決めてるならわざわざJavaScript挟む意味ない TypeScriptやってReact進めばいいだろ javascriptのオブジェクトが、多言語でのクラスということですか? 違います そもそも他言語のクラスとかひとまとめに我こそがスタンダードみたいに言うけど、そのクラスの用法ってクラスベースオブジェクト指向特有のものでしょ。 まぁJSも追従しちゃったけどさ。 父のプロトタイプから包茎を継承してしまったようです >>542 その二択ならTypeScript 文法を先に学ばないと躓く ES6は2015年の仕様で今から学ぶには古すぎる ES2020を学ぶ方が効率は良い http://www.ecma-international.org/ecma-262/11.0/ うせやろ ES6で古いんだ IE対応しないと駄目だったのでアロー関数使ってないから忘れたのに… もう駄目だな… オブジェクトリテラルはプロパティと同義ですかね? オブジェクトの持つデータですよな >>553 違う あなたは先日からおかしな前提の質問ばかり 知識の穴が多すぎて一問一答で出来る範囲を超えている YAGNI信じてるようだが、必要になったら基礎学習する習慣をつけるべき > prototype=組み込み、といった意味だと思いますし、、、。 専門用語が分からない ↓ そうだ英単語の意味から推測しよう ↓ 英単語の意味から間違えている いくらなんでも酷すぎ プログラミング関係なく問題解決の取り組み方が杜撰で稚拙すぎ 辞書引くことすら失敗するとか一体どういう教育受けてきたの 自分で調べるより専門家に聞いた方が早いと思うタイプの人なんだろう >>555 のようにちょっと調べればわかるはずの内容を質問したり、回答したURLを全く読んでないかのような反応が返ってくる DOMもプロトタイプチェーンも学習した形跡がない 忍耐強く付き合ってくれる方々が居るうちはYAGNIで上手く行くのかも知れない 早々に匙を投げてしまった自分が言える立場じゃないけど オナニーメソッドは定義されてますが セックスメソッドが見当たりません C#の拡張メソッドはやってることが分かりやすいね staticと宣言され、thisが第1引数 ただ宣言と利用で引数が違うのが気持ち悪い C#で基礎的に多い使いどころはnull処理や型変換 なんでも型としてobjectがあるので でもやたら型に煩いので中の分岐が面倒 javascriptの引数は全てなんでも型だが、逆にprototypeのthisだけは型が必要 なので、null処理や型変換は、普通の関数にしてる そもそも「メソッドチェーンはnullで止まる」とか、最初から言われてたり >>559 > javascriptの引数は全てなんでも型だが、逆にprototypeのthisだけは型が必要 後半はちょっと意味がわからない this値はStrictModeで指定値をそのまま使い、SloppyModeで指定値をObject型に変換した値を使う 型の制約はないはず オナホールに型があるとは知りませんでした 密閉型のつもりで射精したら貫通型だったらしくリークしてしまったようです arrayとDocument.createDocumentFragment()の違いってなんでしょうか? createElementで作成したタグを、ターゲットに複数追加したい場合、後者を使います。 しかし、arrayにもアンカーは格納されているようです。 >>561 nullでも問題はない 実証コードを書いて、問題が起きるパターンを整理してみては? Object.prototype.toString.call(null) >>563 回答スルーして新規質問を量産してるが、何がしたいんだ? createDocumentFragment は、jQuery でも使っている ソースコード内を検索してみ >>564 Object.prototype.foo=function(s){略} null.foo() こう書けないなら function foo(s){略} foo(null) こうせざるを得ない、ということなんですが null.foo().bar() この利点は bar(foo(null)) これより目に優しいという >>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の影響範囲は大きいが、それでも全てのデータに影響を及ぼすものではない >>568 だからnullは駄目ってことですよねw (C#ではそれができるという違い) >>569 null.foo()が動かない背景の説明>>567 ,559が何一つ正しくなくて比較対象として成立していない、という話 JavaScriptは初心者向けの簡単な言語と言われているけど、ものすごく難しくないですか? Javaとアセンブラも出来るけど、JavaScriptの方が圧倒的に難しい。 当たり前だけど初級レベルはそれほどでもない しかし製品レベルを作るとなると一気にナンジャコレ的な書き方でジャバパーたちには理解不能になる そこにDOM、jsxやstyle componentとかも入ってくるからもはや宇宙語になる JavaScriptはWEBブラウザを誰でも持っていて環境が身近だから試してみやすいというだけで、言語自体が初心者向けというわけではないだろ。 まともに使おうとしたらかなり筋の悪い言語。所詮はWEB用のDSL。 Excelは持ってるからVBAやってみるみたいなもんだよ。 >>571 JavaScriptの理解が難しくなる下地は十分にある - 複数の仕様書 - 複数ブラウザで動作確認 - 新機能作成時の制約(一定の後方互換性を担保) それ以前にESレベルの基本を分かってない人が多過ぎな気はするが - 型 - [[Prototype]] - プロトタイプチェーン - スコープチェーン JavaScript(正しくはECMAScript)ほど仕様しっかりしてる言語は今メインストリームの言語でそんなにはないと思うけどな。Cはしっかりしてるけど、かなりコンパクトな言語だからドキュメント量が全然違う RubyやPythonにいたっては酷いもんだ。思い付きで作ってるレベル 仕様が複数あると言っても、Babel使ってES2020から入るのが正解だろうね。 余計なことを学ぶ必要性が減る。プロトタイプチェーンなんて最初は知らなくていい。 Babelで後方互換性担保できるといっても Setみたいに色々なことができるせいで機械的な書き換えができないコンストラクターがあるからなあ 業務端末が古いandroidのイントラ案件でSet動いてないの気付かず3時間くらい無駄にしたわ JavaScript関連の仕様はECMAScriptの他に、DOM,HTML,UIEvents,fetch,Selectors,CSDOM等、多くの仕様がある Babelを使えば、ECMAScriptをES2020に一本化出来るが、他の仕様は読まなければならない 仕様書の中には日本語訳がなく、英語を読まなければならない場合もある 対して、Ruby,Pythonは公式マニュアルの日本語訳一つを読めば事足りる 資料の読みこなしの面では、JavaScriptの難度は非常に高い 不正確な二次情報に惑わされたり、MDNも時々間違ってたり、罠が多い DOMを扱うならDOMを学ばなきゃならんというだけでJavaScriptとは関係ないが? RubyやPythonを使ったとしてもDOMを扱うなら同じように必要だろう。 Webだけで学ぼうとすると古い情報に惑わされやすいというのはその通りだな。 ちゃんとした書籍を1冊用意して学ぶのが吉。 >>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つ分を読む必要がなく、最新の情報に整備されている 糞どうでもいいさにしか思えないがそこまでして優劣をつけたいんだろうか >>583 ちゃぶ台返しだな >>571 と>>581 にいってやれ ? DOMを持ち出すのは関係ないし糞どうでもいいことなのは変わらんが? 1個の商品の金額の場合オブジェクトでvar shouhin = {};と宣言してshouhin.kingakuとすればいいんですが 複数の商品の場合shouhin[1].kingaku、shouhin[2].kingakuのようにしたいんですが 宣言や関数で引数として渡す場合はどうすればいいですか? 内部関数をコールバックに渡せるのは超楽だね 同名のグローバル関数があってそっち行くかな?と思ったらちゃんと内部関数に行った (そもそも普通の関数に内部関数をほいほい書ける時点で超楽だが) コールバックがグローバルに限定された言語の場合、名前管理が増えるのが嫌で、 なんとかコールバック使わずに、とか頭をひねっちゃう classを使ってる奴いる? 今まで通りfunctionのコンストラクタで十分だよな。 >>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老害ってクソだわ。 自分が分からないからって意味ない(できることが増えるわけでもない)クラスベースに固執しといて、単純な関数で同じことできると気づいたらお前らのワガママに合わせて作ってやったコーディング規約破って勝手に使い出すんだからな。 いや、言いだしっぺなんだからクラス使い続けろや! >>590 結局これも将来的には非推奨になりそうですよね。 中途半端な機能を増やされると現場はかえってしんどい。 要素を取得して、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です。 なぜこのような結果になるのでしょうか? マージするオブジェクトの型?みたいなものが一致していないとだめなのですか? 1つ目はタグにタグをコピーしているだけ 2つ目はタグにプロパティをコピーしている 3つ目はタグオブジェクトに、オブジェクトリテラル?をコピーしている? この辺のことを教えて下さい Nodeオブジェクトに元から存在するプロパティは列挙可能になってないからそのままObject.assginしても何もコピーされない textContentプロパティだけを取り出してObject.assignするくらいなら let copy = document.createElement("span"); copy.textContent = span.textContent; でいいじゃない もっともノードの複製は let copy = span.cloneNode(true); で一発。ただしid等の一意であるべき属性も存在する場合は複製されることに注意 >>593 ノード全体をコピーする場合はcloneで、タグ名などを変えたい場合は教えてもらった方法でやることにします。 1行目なんですが、「 Nodeオブジェクトに元から存在するプロパティは列挙可能になってないからそのままObject.assginしても何もコピーされない 」というのはどういう意味でしょうか? 1つめのやり方に対してだと思いますが、どちらのspanエレメントもtextContentプロパティは持っていると思います。 とりあえず、中身もコピーする場合はプロパティにまでアクセスしないといけないことは分かりました。 object.assignというのはループを回しているわけですよね。おそらく。 素のJS書いてます DOM要素の中身をまるまる消したいんですが、もっといいやり方ないですか? 今はinnerHTML=""で消してます var el = document.querySelector('#nakamikiero'); while (el.firstChild) el.removeChild(el.firstChild); 別にinnerHTMLでいいと思う 初心者です。 chrome拡張機能を作っているのですが、自分のコードが他の人から見たら、見づらかったりするのか気になったので評価してくれませんか? 一人で作っているのでコメントはほぼないです。 https://harigami.net/cd?hsh=b5c6452f-fa81-4b69-b554-d68bf8194d75 constって値の変更できないのであとから値を変更したくなった場合letに書き直さないといけないので 最初からconstよりlet使った方が無難だよね? constの方が速度が速いってこともないだろうし JITの最適化に影響することはあるんじゃない?知らんけど 個人プログラムならそう困ることないし別にいいと思う letってスコープ外からアクセスできないのであとからアクセスしたくなった場合let消してグローバル変数にしないといけないので 最初からletよりグローバル変数使った方が無難だよね? letの方が速度が速いってこともないだろうし >>601 グルーバルはどこからでも変更できちゃうので基本使わない せやから変数はバケツリレーしてでも引数として渡す >>602 それが分かるなら、「letはスコープ内で改変可能なので、再代入が必要な変数以外では使用しない」に辿り着くはずなんだがな 再代入が必要な変数が全体の何割あるかまず眺めてみたらいいんじゃね 更にあとから再代入の必要性に気付くパターンに絞って何割あるのか >>602 >>601 がアイロニーだってことくらい気づけよ。 DIVの中にline-hightを設定したテキストを入れた時と同じ場所になるようにDIVと同じサイズのCanvasの中に文字を書き込みたいんだけどどうやるの(´;Д;`) >>608 line-height内でのテキストの上下方向の位置を合わせる方法がわからない >>609 border,line-height,paddongを計算すればいい というか、ボックスモデルを読め サンプルがこれなんだが、最後の 80*0.64 って奴がline-height*割合で 割合を調整してベースラインの位置に来るように調整してあるんだがfont-sizeやline-heightを変えると0.64じゃ一致しなくなる https://codepen.io/as124680/pen/wvdwWyO <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を取得できる方法があったら やりかたを教えてください >>615 document.querySelectorAll("#tb td > img"); セレクタの指定は適当なので目的に応じて考えてくれ 「css セレクタ」で検索! x y は、xの子孫(子・孫・玄孫なども含む)のy。 x > y は、xの子(直下のみ)のy JavaScript の質問は、web制作管理板の方へ書き込んでください! この板のスレは、荒らしが出た時に、緊急避難用に立てられたもので、今は使われていません プログラミングするときは必要な処理を必ず日本語化したほうがいいですか? まず、必要な機能をすべて書き出してから、フローチャート的なものを作る ぶっつけでコードを書き始めると駄目ですかね。 ストップウォッチを作っています。 1:スタートボタンを押した時にカウントアップを開始し 2:もう1度押すと停止します 3:もう1度押すと途中からのカウントアップを開始します この途中からのカウントアップのやり方がわからないのでヒントを教えて下さい。 addTime変数にカウントアップ途中の数値をセットし、3に加算すればいいわけですが、上手くイカなかったので教えて下さい。 わからないのはaddTimeの取得方法と、加算のタイミングです。 https://ideone.com/Fq7ki3 コードはこちらになります。 別の質問なんですが、コードのペーストサービスってどこがいいんでしょうか? 一人で作る場合はそんなことしてる奴ほぼいないと思う チームで作るならそれをするのはPMの仕事 JSFiddle が多いかも。 Ideone とか Codepad は、バージョンが古い感じ 日本なら、paiza.IO >>623 どうも performanceを使うといいんすね 差分の部分も参考にさせてもらいす わからなかったら聞きます jaavscriptって型あるんですか? let ms= 1000 としてもデータオブジェクト?じゃないので、getUTCSeconds()などが使えません let ms = new Date(1000) これでokです >>624 動作確認しやすいのでjsfiddleにしときます JSは動的型付け言語なので当然型はある あと所詮60の除算をしてるだけなので、いちいちDate型に変換するのはぶっちゃけ大仰 >>623 performance.nowって時刻を取得して差分を求めるより、正確なタイマーになるんでしょうか? utcの時刻です。 ブラウザ次第としか 最近は敢えて精度を落としてることもあって、多分変わらんかも ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる