+ 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/09/14(火) 00:46:24.59

>>875
有難うございます！
確かにCDNでjQueryが導入済みだったので、いきなりFanction以下の本文を記入してもxampp上では動いてくれたのですが、、
一応、ローカル環境だけでいじくり回して解らなくなったらバックアップのデータで復元してます

何故かサーバーにアップしたら動かない、、
ライブラリのバージョンが違うのかはどうやって判断すれば良いのでしょうか？
業者は2.2.1でしたが、3.6.0にすべきかどうか？
なぜ、bodyの終了タグが無いのか？
一応、body自体を消してみたけど、何ら崩れたりもせず動いてました

header.phpのheadの終了タグの前にjQueryの本文を記入しましたが、レイアウトが崩れました
index.phpに記載した内容に影響のあるscriptなので、別のファイルに記載したら駄目なのか？

一晩寝て、アドバイスの通り検索から始めて理解を深めてから先に進むことにします、、

2021/09/14(火) 08:12:14.43

>>873
一晩寝て思いついたのですが
header.phpはメニューだけを記述したファイルのようです
そこのheadにhtmlの宣言？CSSの呼び出し、CDNが記載されてました
他にhead,body,CDNを記述したファイルは見つかりません

そもそも.htmlというファイルが無いサイトって成り立つのでしょうか？
index.phpはトップページの内容を記述してますが、headもbodyも記述がありません、、
index.phpに記載の内容に対してjQueryを作動させたいのですが、、
xampp上では何故か上手くいってるんですよね
index.phpにbodyを新たに記述するってのは違反行為でしょうか？

そもそもhtmlの知識もなくカスタマイズしようとしてまして、、

2021/09/14(火) 09:07:31.26

>>877
一般に公開するwebならその程度の知識でいじるのはやめといた方がいいよ

2021/09/14(火) 09:10:16.30

body云々の話はどうでもいい
(header.php、footer.phpでワンセット)
htmlの勉強も必要だけどまずWordPressのお作法を勉強しろ(WordPress javascriptで検索)
原因を探るならページを表示した際のソースをxamppと本番環境で見比べてみればいい

2021/09/14(火) 09:35:33.82

>>878-879
ご指摘はごもっともですが、他に適任者は居なく業者からも実装したことが無いと放り投げられてるのでやるしか無いのです
上でも指摘していただきましたが、wordpressで jQueryは設定されていて、私の作成したfunctionの記述を再確認したところ上手く作動するようになりました！
やはり壊していたのは自分自身だったと・・

2021/09/14(火) 09:48:24.43

>>880
その流れだと普通は他の業者探さないか？

2021/09/14(火) 10:56:51.75

自己責任で勝手に会社のをいじるのか、人生ひっくり返されないようにな

2021/09/14(火) 11:48:37.64

wordpressネタで色んなスレで暴れてる釣り師だよ

2021/09/14(火) 12:44:48.80

2021/09/14(火) 17:37:23.97

ちゃんと確認したらできました

2021/09/14(火) 18:10:22.42

>>881-882
ECサイトとかじゃなくて単なる零細企業の企業サイトですから・・

2021/09/15(水) 02:21:53.09

例えば、Ruby on Rails なら、部分テンプレート(Partial)で、
メインの内容・ヘッダー・フッター・サイドメニューなど、
ページの各部分をバラバラに作る

_main_content.html.erb
_header.html.erb
_footer.html.erb
_sidemenu.html.erb

上の各部分を、全体のテンプレート・application.html.erb で読み込む

拡張子ERB は、Rubyの構文で書いて、HTML へ変換する。
a.php と同じ。PHPの構文で書いて、HTMLへ変換するだろ

Rubyでは、ERB内で、<% ～ %>, <%= ～ %> に、Rubyの構文を書けば、
それが解釈されて、HTMLへ変換される。例えば、

ERB
<% price = 100 * 1.1 %>
<p>値段は<%= price %>円です</p>

変換されたHTML
<p>値段は110円です</p>

**887** (ﾜｯﾁｮｲ 8b2c-0MLo [153.136.94.40]) · 2021/09/15(水) 02:22:34.90

WordPress はプロ向きじゃない。
デザインの本ばかりで、Railsみたいに、フレームワークの仕組みを学べる本がない

プログラミングはコーディングするものじゃない。
ほぼ、ずっとフレームワークの仕組みを読むこと。
これが、開発のほとんどの時間を占める

だから、WordPressの仕組みは、web制作管理板のWordPressのスレで聞くように言ってる。
各テンプレートを読み込む順番とか、どれが本体のHTMLなのかとか

この板で聞いても、個別のフレームワークの仕組みは誰も知らない

だから皆、専用のサロンへ入る。
例えばRailsなら、YouTube で有名な、雑食系エンジニア・KENTA のサロンへ、3千人が入っている

そういうコミュニティーへ入らないと無理。
独学では作れない。教えてもらわないと無理

2021/09/15(水) 02:34:09.70

宣伝死ね

2021/09/15(水) 03:16:07.67

>>884
jQuery なら、sepia(0.8) blur(1px)
と、文字列で出力された。
JavaScript のオブジェクトにならなかった！

<img src="a.jpg" id="img_01">

<style>
#img_01{ filter:sepia(80%) blur(1px); }
</style>

$( function ( ) {
prop = $( '#img_01' ).css( 'filter' )
console.log( prop );
} );

2021/09/15(水) 17:19:00.06

classでインスタンスを作っている人いますか？
これってすごく中途半端でかえって分かりにくいです。

2021/09/15(水) 18:11:45.71

three.jsのオブジェクトはこんな感じで作ったりするけど？

for (let i = 0; i < 1000; i++) {
const sprite = new THREE.Sprite(material);
// ランダムな座標に配置
sprite.position.x = 500 * (Math.random() - 0.5);
sprite.position.y = 100 * Math.random() - 40;
sprite.position.z = 500 * (Math.random() - 0.5);
// 必要に応じてスケールを調整
sprite.scale.set(10, 10, 10);

scene.add(sprite);
}

2021/09/15(水) 18:15:59.59

何が中途半端か分からんけどTypeScriptでも触ってみたら

2021/09/15(水) 19:02:24.83

スクレイピングすると地獄へ落ちるって本当ですか？

2021/09/15(水) 19:09:57.19

やり方を間違えるとあり得ます

2021/09/15(水) 20:59:30.06

>>891
それを作らないなんてとんでもない

2021/09/16(木) 00:08:14.89

class 構文を使わず、継承チェーンを自作しているようなコードは、地獄

そういう香具師は追放

?2BP(1000) · 2021/09/16(木) 00:11:22.80

>>897
継承自作はガチでやばい

2021/09/16(木) 00:40:41.07

ES2015まではclass無かったんですよね？それまではどうしていたんですか？

2021/09/16(木) 00:56:38.22

>>899
関数宣言

2021/09/16(木) 10:55:25.86

リサイズイベントが複数設置していて、望んだ順番で発火して欲しいのですが、
何か方法はありますでしょうか？

現状は各リサイズイベントにて、setTimeoutを用いてイベントの発火を間引いていますので、
その間引く時間をそれぞれ変更して対応しています。

2021/09/16(木) 13:22:43.27

クラスにして引数渡すメソッドにすりや良いんじゃね？

2021/09/16(木) 15:22:17.42

すいません
windowsのローカルで動くスクリプトを書いてて質問です。（JSX）

children = folder.getFiles();

でディレクトリにあるファイル一覧を取得してるんですが

children[0].path = decodeURI(children[0].path);

みたいにファイルのパスをURLデコードしても、デコードしたパスが上書きされません。

ファイルパスに日本語が含まれていると後の処理でエラーが出るので
色々試してる途中なのですが、むしろ「日本語がURIエンコードされている」ことが問題なのかなと思ったので
いったんデコードを試みてる次第です。

どなたかよろしくお願いいたします。

2021/09/16(木) 19:34:45.06

classは非推奨になると思う。

2021/09/16(木) 19:40:28.89

>>903
一行でやらずに間挟んでみたら？
tmp = decodeURI(children[0].path);
children[0].path = tmp;

2021/09/16(木) 21:28:13.93

classを導入するならjavaみたいにクラスベースにするべき。

2021/09/16(木) 21:57:57.90

>>906
なぜ？

2021/09/16(木) 22:58:46.10

>>907
中身がプロトタイプのままならfunctionでコンストラクタを書いた方が、
プロトタイプチェーン、this、継承の挙動が把握しやすいから。

2021/09/16(木) 23:06:18.36

>>908
糖衣構文と把握できない人にはそうかもしれないな

2021/09/17(金) 05:14:25.65

>>903
Node.jsでglobモジュールでワイルドカード指定する方法とディレクトリ除外する方法
https://confrage.jp/node-js%E3%81%A7glob%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%A7%E3%83%AF%E3%82%A4%E3%83%AB%E3%83%89%E3%82%AB%E3%83%BC%E3%83%89%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%A8/

Windows, Node.js でもファイル操作できる。
日本語のファイル名でも、普通に表示できる

でも初心者が、サーバー側・バックエンドをJavaScript で作るのは推奨しない。
10年以上掛かる。非同期処理も難しい

ファイル操作・テキスト処理なら、Ruby から始めた方がよい

2021/09/17(金) 07:38:30.25

>>909
従来のままのほうが分かりやすくない？
何のためにclassを追加したのだろうか？

2021/09/17(金) 07:41:06.43

https://note.affi-sapo-sv.com/js-class.php
JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。

そのため、以前できなかったことは、今でもできません。

クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、誰にとってわかりやすいかいまいち不明。
prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。

class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、勉強にならないですね。
でも理解したら、わざわざclassを使う必要がない気がします。

使いたければ使えばいいんじゃない？と思います。

2021/09/18(土) 09:19:17.64

classでインスタンスを生成した場合、関数の入れ子・クロージャ・関数の合成は
どのように実装すればいいのでしょうか？

2021/09/18(土) 09:21:08.79

>>907
分かりにくいから。

2021/09/18(土) 09:25:01.08

jsonファイルをfetchで読み込んで表示するページ作りたいんですが読み込んだjsonファイルの更新日時を取得する方法ってありますか？

2021/09/18(土) 09:30:36.71

HTTPのレスポンスヘッダーにLast-Modifiedがあれば

2021/09/18(土) 18:47:47.12

>>914
理解してない機能はわかりにくい
理解した機能はわかりやすい
それだけの話

2021/09/20(月) 12:44:45.58

関数の呼び出しコストという文言を見るのですが、具体的にはどのようなコストなのでしょうか？
関数スコープが生成される？的なコストと処理量などでしょうか？

2021/09/20(月) 12:54:03.49

検索の時間
家の本棚から探すのと図書館に行って探してくるのとの違い

2021/09/20(月) 17:33:22.90

プログラミング初心者＋αです。

const a = オブジェクト.length
console.log(a);

ということをやると
undefined:undefined
つまり未定義と表示されて正常に認識してくれない。

console.log(オブジェクト.length);
ならうまくいくのに。
プロパティの値を変数に割り当てられないのでしょうか。

2021/09/20(月) 17:38:24.56

定数にメソッドは登録出来ないんじゃない

2021/09/20(月) 17:52:12.71

オブジェクトって具体的には？

2021/09/20(月) 17:59:21.71

>>920
再現しないんだが
Objectにはlength無いけどなんの話か教えてくれ

2021/09/21(火) 20:13:00.16

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

オーバーヘッドと似たようなもんだと考えてよいのでしょうか？

forEach が遅いのは関数呼び出しだからってのを、何処かで見まして、
インライン関数でも遅いので、自分の中で『検索』ってのと繋がらないです…

2021/09/21(火) 20:47:54.79

>>924
ゴメン、CDNのボトルネック的な事かと思っただけで
コールスタックとかリターンアドレスやらメモ化なんて知らないです。

どっちにしろ人間もコンピュータも間接的な呼び出しは遅いようだ
以下参考

2019年版: JavaScriptのループの考察
https://qiita.com/shibukawa/items/4cae2a1410754d519232

【Python】関数呼び出しのコストを計測してみた
https://qiita.com/stokes/items/e8440329fb6f37944a9b

2021/09/23(木) 18:37:57.95

>>918
Function Callの処理コスト
https://262.ecma-international.org/11.0/#sec-function-calls

>>924
Array.prototype.forEachの仕様を確認すべし
https://262.ecma-international.org/11.0/#sec-array.prototype.foreach

2021/09/26(日) 10:15:24.86

元のhtmlが<td id=***>文字列</td>と言う形でユニークなidが振られています。文字列の部分がokだった場合、字色を赤に変えたいのですがどのようなコードとすればよいでしょうか
試しに該当箇所にreplaceでspan styleを当てると元のタグが消えてテーブルが破壊されてしまいました

2021/09/26(日) 10:34:01.51

>>927
td要素ノードにスタイルを割り当てればいいのでは？
style属性よりclass属性がいい気はするが
https://developer.mozilla.org/ja/docs/Web/API/Element/classList

2021/09/27(月) 20:29:49.49

>>928
ヒントありがとうございます
解決しました

2021/09/28(火) 16:18:59.44

下記のようにhtmlを変数の中に入れて、複数ある.itemクラスを順番にループして
その中の.hogeクラスのインナーを取得したいです。

しかしhoge変数に入れて処理しようとすると何故かunderfindになってしまいます。
どなたかアドバイス頂けないでしょうか
（いったん変数に入れた方がすっきりするのでそうしたいです）

var DOM = $('#test').html(document.getElementById('text').value);
DOM.find('.item').each(function(i){
var hoge = $('.hoge',this);

alert(this.getElementsByClassName('hoge')[0].innerHTML);//こっちはinnerHTMLの中身がちゃんと表示される
alert(hoge.innerHTML);//こっちはunderfindになる
}

2021/09/28(火) 18:40:20.62

下にも [0] をつけたら？

**930** (ﾜｯﾁｮｲ 4ec3-2Lmd [159.28.152.184]) · 2021/09/28(火) 18:42:29.73

alert( hoge.text() );
にするとマークアップ部分を抜いたテキストを取得できることに気付きましたが
マークアップも含んだ状態のインナーhtmlが欲しいんですよね…

2021/09/28(火) 18:45:06.33

>>931
まさかと思ってやってみたらいけました、そうかー配列で持ってたのかー
ありがとうございます

2021/09/28(火) 20:00:42.73

配列とHTMLcollectionは似て非なるものやぞ

2021/09/28(火) 21:27:29.09

>>934
hogeはHTMLcollectionじゃないぞ

2021/09/28(火) 21:44:32.49

>>933
getでもいける
https://api.jquery.com/get/

2021/09/30(木) 21:24:16.30

if (true) {}
if (a === 300) {}

if文は真偽値だけの判定と比較の判定だったら、真偽値だけの方が速いとかありますか？
複数個所で同じ比較の判定が必要な場合、結果を真偽値にして使い回した方がよいのか
知りたいです。

2021/09/30(木) 21:59:02.86

初学者あるあるだけどそんなの誤差だから保守しやすいコードを書くのが正しい

2021/09/30(木) 22:15:02.92

誤差なのですね
何の真偽値か調べるの手間ですもんね
ありがとうございました。

2021/10/01(金) 04:55:16.35

>>937
前者が速いが、フラグ変数を使わずにすむロジックを考案するのが最も効率的

2021/10/01(金) 04:59:49.85

>>937
ちなみに複数箇所で同じ判定をしなければならない判定は、フラグ変数を使う方が保守性が高い
将来、判定処理を更新する際に更新箇所が一つですむし、複数箇所に同じ判定があると更新漏れのリスクがある

>>940でいったように、判定箇所が一カ所になるようロジックをくむのが最適

2021/10/01(金) 14:19:20.76

最近vueやらreactやら仕事で触ることになったんだけど、
みんなこの巨大なvueのtemplate構文とかどうやって読み解いてるんだ・・・？
実際のUIがイメージできるようになるのかコツとかある？

2021/10/01(金) 16:21:28.18

>>942
慣れ。

2021/10/01(金) 18:40:19.96

ありがとう。慣れんのかな・・・

2021/10/01(金) 19:42:32.31

>>944
知らんけど。

2021/10/01(金) 20:18:01.29

vueはGoogleの拡張いれたら分かりやすくやった

2021/10/05(火) 00:55:13.12

>>940-941
台風でネット繋がらなくて、お礼言うの遅れてすみません…

すっごい腹落ちしました。
どうしても複数になる場合はフラグ変数使っていこうと思います。

2021/10/12(火) 02:32:16.48

javascriptで関数はオブジェクトって書いてあったんですよ
でもオブジェクトって例えばconst o = { name: "noname", mail:"sage}みたいに定義されるものではないのですか？

2021/10/12(火) 05:05:04.25

>>948
関数はObject型
{}はnew ObjectでありObject型
new ArrayもObject型
https://tc39.es/ecma262/#sec-typeof-operator

2021/10/20(水) 02:51:41.42

スクレイピングに興味があるのですが1時間に1回の頻度のGETだけで訴えられる危険があるって本当ですか？

2021/10/20(水) 03:28:52.56

次スレ立てる義務を果たしたら答えてあげる

2021/10/20(水) 10:49:03.56

PHPスレとのマルチやん

2021/10/22(金) 10:33:33.27

jqueｒｙなんですが
jqXHRオブジェクトから逆算してクエリ文字列を得る方法ってありませんか？

var a = $("index[name=hoge]");
a.xxxx()= → "index[name=hoge]" みたいな関数とかプラグインとか

2021/10/22(金) 13:52:34.02

>>953
ない

2021/10/22(金) 16:50:13.59

>>953
あった
a.selector
が、1.9で消された

2021/10/23(土) 06:37:42.27

>>955
これか
https://bugs.jquery.com/ticket/9469

2021/10/25(月) 21:08:09.07

>>953
やはり、放置か

2021/10/30(土) 07:24:51.67

>>948
JSの型には、String Number Boolean Null　undefined Symbolなどの他、Objyectがあります
プリミティブでない型は全てObject型です

Objectの例は
let o={};
let a=[];
let f=function(){}
function f(){}
などがあります

2021/10/30(土) 10:09:55.72

>>948
あと、オブジェクトという意味合いは結構あいまいです

JSではプリミティブはそれ自体に関数やパラメータなどを保持しません
ObjectはObject（）の派生ですので関数やパラメータを持ちます
型という意味合いでは、typeof でObject型なのか判定できますのでお試しを

オブジェクトを目的物、対象物という表現でとらえれば
文字や数字も、扱う対象物として、オブジェクトと表現できますが
型としの意味合い（始祖Object()を継承してるか）なのか
対象物という意味合いなのか、混乱したときには整理してみるといいかもです

2021/10/30(土) 10:14:21.41

オブイェークト

2021/10/30(土) 10:46:44.64

なんかまた新しいものが出てきたのかと思った

2021/10/30(土) 10:50:46.34

ほら泣くぞ

2021/10/30(土) 11:05:17.84

>>960
ようやく、>>953が出てきたと思ったら、ただの感想か
相変わらず、このスレの質問者は自己中だな

2021/10/30(土) 12:45:13.50

アロ関とthisが分かりにくい。
全部バインドしとけばいいの？

2021/10/30(土) 12:56:38.70

>>964
慣れ
違いを何度も意識すれば分かる

2021/10/30(土) 22:52:40.11

>>965
thisだけでなくselfをもっと活用すればいいのでしょうか？

2021/10/30(土) 22:56:14.00

そもそも典型的な場面を除いてthisを多用しない

2021/10/30(土) 23:44:50.08

またおまえか
ストーカーかよ
いい加減にしろ

2021/10/31(日) 01:31:34.39

質問です。
https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript
の
var input;
do {
input = get_input();
} while (inputIsNotValid(input));
を実行したら、
Uncaught ReferenceError: get_input is not defined
と出ました。

get_input()は自作関数だと思いますかが、
どんな関数になるのか教えて下さい。

2021/10/31(日) 03:14:18.94

<input id="address">

function get_input(){
return document.querySelector("#address").value
}

2021/10/31(日) 04:01:17.10

>>970
こんな深夜にありがとうございます。

ただ、すみません、
Uncaught ReferenceError: document is not defined
というエラーが出ました。
このdocumentというのはどのように定義したらよいですか？

あと、
<input id="address">
は同じフォルダにindex.htmlのような名前で保存すればよいですか？

2021/10/31(日) 07:37:28.36

>>969
var input;
do{
input=get_input();
}while(inputIsNotValid(input));

function get_input(){
return confirm('input!');
}
function inputIsNotValid(input){
return !input;
}

2021/10/31(日) 07:45:13.63

>>969
サンプルコードは、

inpu=get_input() // 入力されたものをinputに代入する

do-whileは、inputIsNotValid()関数の戻り値がtrueの時に繰り返す

inputIsNotVarid()は、入力されたinput値が不適切の時にtrueを返す

という内容を説明しています

get_input()がどのような入力になるのか
inputInNotValid()で、inputの適否をどう判定しているのかは問いません、ということです
このようなコードを見たときには、関数名で働きが説明できている、という前提ですので
関数名をよく読んで、戻り値を推測して読んでください

2021/10/31(日) 07:53:36.67

>>969
あと、このコード自体は
「有効な値が入力されるまでループする」というコードです

confirm関数はシンプルな入力関数で、OKボタンでtrueを、キャンセルボタンでfalseを返します

2021/10/31(日) 07:58:15.87

>>972
理想的な必要十分なコードだけど
promptじゃね