+ 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/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 スプレッド構文」で検索！

2021/08/17(火) 13:59:39.03

javascript技術者は日本国内で何人ぐらいいるのでしょうか？
10万人？

2021/08/18(水) 00:21:17.10

>>753
https://www.netvisionacademy.com/magazine/3230/
> 経済産業省の調査によると、2020年現在のIT人材数は約100万人、
>不足数は約30万人と推計されています。

2021/08/18(水) 04:14:03.58

>>751
レスありがとうございます。

ご助言頂いた後に、何故「parent」を包括してるのに
わざわざ「...parent」と展開しているのかに悩まされたのですが、
継承元のメソッドをオーバーライドしているため、
継承元のメソッドを参照するための措置だと理解するに至りました。

何はともあれすっきりいたしました。ありがとうございました。

2021/08/18(水) 12:01:29.72

>>754
100万人の内JavaScript使える奴は50万人はいるね…。

がっかり。

2021/08/18(水) 13:25:34.20

デザイナーですらjsバリバリですから

2021/08/18(水) 15:45:08.23

今やデザイナーもJSは必須だよなあ

2021/08/18(水) 16:45:19.75

デザイナーの方が
複雑なアニメションや3Dとか
実装のスキル高かったりしますよ
cssとかのビルドシステムとかも
開発同等ですし

2021/08/19(木) 20:25:30.16

プログラミングにはまる方法ありますか？
もう１日獣コーディング出来るという感じの

2021/08/19(木) 20:29:27.31

百獣の王ライオンのように獣分勉強することが獣要だ。

2021/08/19(木) 21:40:17.09

獣コーディングってカッコいいな
コーディングバトルものにありそう

2021/08/19(木) 23:00:55.88

地水火風のコーディング
光と闇のコーダー

2021/08/20(金) 10:32:33.93

javascriptでゲージを表示出来るライブラリってないですか？
かんたんなものでいいんですが

円形や半円形で、残り時間を表示出来るようなもの

2021/08/20(金) 10:52:39.21

>>759
> cssとかのビルドシステムとか

どういう意味？

2021/08/20(金) 11:10:11.76

scssとかのcssプリプロセッサやら普通に使うんやから
glupとかGruntとかのビルドシステム組むでしょ
そもそもjsでアニメーションコード書いてんだし

2021/08/20(金) 11:13:32.72

あと、UI/UXの設計もデザイナー側でやることが多くなった

そうすると、開発屋はデザイナーの下位作業(下請け感がある)ぽくなる

2021/08/20(金) 11:46:11.89

工程として下流になるのはわかるがなんで下請けやねん

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

JavaScript, CSS のビルドは、Ruby on Rails でも使う。
Webpack, Babel, Gulp など

Bootstrap も、SCSS

>>764
「javascript グラフライブラリおすすめ」で検索！

Google Charts, Highcharts, Chart.js, C3(D3)

2021/08/20(金) 14:54:30.33

没頭できる方法はないかしら

2021/08/20(金) 21:46:27.63

>>764
円じゃなくてバーみたいのじゃダメかな？
https://itest.5ch.net/test/read.cgi/future/1476229483/375
http://imgur.com/9yuYIAR.gif

2021/08/20(金) 22:31:55.01

>>764
円じゃなくてバーみたいのじゃダメかな？
https://itest.5ch.net/test/read.cgi/future/1476229483/375
http://imgur.com/9yuYIAR.gif

2021/08/21(土) 06:10:37.76

>>772
それにしときます

2021/08/21(土) 13:43:38.68

プログラミン好きになりたい

2021/08/21(土) 17:31:43.12

好き好き好きぃーー好き好き～～♪

2021/08/21(土) 19:36:40.29

>>770
JavaScriptでのアプリってさ
静止画で動かないものをプログラミングするよりも
動きのあるものやインタラクションで即応性のあるもののが楽しいと思うよ
canvasやったらお絵描きやら、three.js使ってマウスでグリグリ動かせる3Dも作れるし

2021/08/22(日) 12:53:46.24

>>776
ゲームエンジンも使ってますね
確かに楽しい

2021/08/24(火) 08:35:43.20

コツコツやってれば楽しくなるかしら

2021/08/24(火) 12:57:17.13

自分の好きなものとか作ってみたいアイデアを形にすれば楽しい

2021/08/26(木) 12:42:23.70

セールストークのような短文が浮かんでは消えるようなスクリプトを書きたいです
その場で表示されて、消えて、別の短文が表示されるみたいに
リストした候補を順番、ランダムで代わる代わる表示させるには
どんなキーワードで検索したら似たような機能のスクリプトを探せますか？
素人が引き継ぎをするようになり、webプログラムの機能の専門用語が分からず難儀しています、、

2021/08/26(木) 17:49:38.75

>>780
そのままJavaScriptアニメーションとかでググればいい
基本的な仕組みは紙芝居やアニメーションと同じで
setIntervalの関数で
DOMの要素なりプロパティを一定時間毎に入れ替えれば良い

2021/08/27(金) 00:44:52.42

>>781
有難うございます！
週末に色々試してみます

2021/08/27(金) 13:43:18.46

>>779
プログラミン楽しくなった瞬間とかありますか？
やっぱりある程度スキルがつかないとつまらんですわな

まず継続化の時点で躓いている

2021/08/27(金) 14:09:02.43

即時関数ってのは全体の構造を把握しやすくするために使うんでしょうか？
関数化すればアウトラインに出ますもんね。

2021/08/27(金) 15:39:43.68

スキルというか目的じゃないかな
出会い系サイトで女に足跡つけまくるスクリプト書いてた時とか楽しかったわ
すぐ対策されたけど

2021/08/27(金) 17:07:32.29

java/C++/C#辺りやってたのでオブジェクトの扱いがよく分からないというかプロトタイプベース？というのを聞いて分からない！文化が違う！ってなってます
なんかその辺上手いこと説明してくれてるとこないですかね

2021/08/27(金) 17:44:28.50

jsもクラス対応してたっしょ

2021/08/27(金) 18:57:04.42

>>785
目的あるけど、スキル不足でまだ楽しくない

2021/08/27(金) 19:32:29.78

まず目的を明確にすれば？
「Program」には「計画」と言う意味があって
目的に沿って計画を書くのがプログラミング（手続き型言語）

2021/08/27(金) 21:24:03.62

>>780
要素が自動的に流れ続ける、loop slider, slide show とか

2021/08/27(金) 21:27:41.85

>>784
IIFE (Immediately Invoked Function Expression; 即時実行関数式)は、内部を隠ぺいできる

外から、内部にアクセスできなくなる

2021/08/27(金) 21:58:17.72

>>786
prototype, __proto__ は継承チェーン

let Person = function (name) {
this.name = name;
};

let taro = new Person('太郎');
taro.age = 20;
console.log(taro); //=> Person { name: '太郎', age: 20 }

let jiro = new Person('次郎');
console.log(jiro); //=> Person { name: '次郎' }

taro.age = 20;
みたいに、インスタンスにメンバー(データ・関数)を直接追加しても、
そのインスタンスにしか追加されない。
Ruby の特異メソッドと同じ

1階層上に追加しないといけない。
それをプロトタイプチェーンを遡ると言う

2021/08/28(土) 19:18:57.18

>>780

function f() {
const ary = ["あ","い","うう"]
let i = 1;

const timer_id = setInterval(function () {
// 0～配列の要素数未満の乱数を発生させて、少数点以下を切り捨てる。つまり、0～2
idx = Math.floor(Math.random() * ary.length)
console.log(i, ary[idx]);
i++;

// 指定回数でタイマーを解除する
if (i > 5) { clearInterval(timer_id); }
}, 1000);
}

f()

2021/08/29(日) 15:56:34.06

>>793
有難うございます！
これはJavaScript？
自分で考えてからあれこれ加工するまでには全然至っていません・・
アニメーションも探すとcss3でも可能みたいですね

セールストークの文字列が2箇所あって
例「みんなのお役に立てる」「◯◯です」みたいな感じなのですが
こういう場合は一個づつの要素を動かしてあげる方が簡単ですよね？

3つくらいの組み合わせを、季節ごとに変えようとか考えていて色々試行錯誤してます
ワンセットで、1→2→3と時間指定で変えられれば一番楽なのですが

2021/08/30(月) 14:47:37.94

>>793
idxは宣言しないんか？

2021/08/30(月) 17:56:17.86

無名関数内スコープでなおかつ実行時未確定乱数だからかなぁ・・

2021/08/30(月) 18:26:37.84

多分忘れただけでしょ
とりたてて言うことでもない

2021/09/03(金) 20:32:19.52

オブジェクトのプロパティの値に対して、falseを入れておくと、その一つ下のプロパティの存在チェックが
できるのですが、nullにするとエラーが出てしまいます。
一体どのような理由なのでしょうか？

obj = {
obj.abc = false;
// obj.abc = null;
};
if (obj.abc,def) {...}

?2BP(1000) · 2021/09/03(金) 21:34:31.02

>>798
falseはではない(表示しない)
trueはである(表示する)
nullはなにもない(どちらでもない)
だからだと思う

2021/09/03(金) 22:30:41.85

>>798
falseはBooleanなオブジェクトだから
nullでやりたいなら?.使うべし

**793** (ﾜｯﾁｮｲ 4b2c-3Lnd [153.136.94.40]) · 2021/09/03(金) 22:57:56.98

>>793
自己修正

>idx = Math.floor(Math.random() * ary.length)
let が抜けていた

VSCode で、拡張機能・ESLint も入れているけど、
letが無くても警告されない

2021/09/04(土) 09:37:20.21

>>799-800
ありがとうございます。
falseはオブジェクトだったのですね。
理解できました！

ちなみに "?." とはなんでしょうか？
ググってみましたが出てきませんでした…

2021/09/04(土) 11:16:44.89

>>802
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining

2021/09/04(土) 14:34:40.34

>>803
新しい文法なんですね
全然知りませんでした。
ちょろっと勉強してみます！！

2021/09/05(日) 00:45:07.05

ぼっち演算子・Null条件演算子・Null安全演算子か

Ruby にも導入された。&.
object&.method

2021/09/05(日) 04:32:46.84

戻り値のない関数ってどういうときに使うんでしょうか？

2021/09/05(日) 06:50:44.94

無数にあるけど例えばalertとか

2021/09/05(日) 10:32:02.35

>>807
alertやconsole.logなどの何らかの出力処理を関数内に含めるか、returnを使うかしないと、外部とのやり取りは出来ないんですよね？

2021/09/05(日) 11:31:11.96

ごめんけど何言ってるか分からん

2021/09/05(日) 12:47:36.39

>>809
関数は数値などを加工するものだと思います。
その加工した値を取り出す手段がないと、使う意味がないと思うのですが。

2021/09/05(日) 13:42:05.76

>>806
「プログラミング　関数を作る意味」でググっていくつか読めば分かると思う

2021/09/05(日) 14:46:48.17

>>808
alertやconsoleに限らず、その関数内から呼び出せる任意の関数を使って外部とのやりとりはできるわけだが。

2021/09/05(日) 18:55:22.30

>>811
>>812
はい

2021/09/07(火) 11:24:53.81

localStrageに複数のデータを保存して、ループで取り出したいのですが、pushで保存は可能です。しかし、forで取り出すとカンマの区切りが機能していないようです。
[1,2,3]
こういう配列があった場合、forで取り出すと以下のようになります。
1
,
2
,
3
つまりこれは配列ではなく、文字列として扱われているのだと思います。
localStrageへの保存はどのような方法が一般的なのでしょうか？

以下はstartを押すとlocalStrageに配列を保存し、outputで取りだすというものです。
<button id="start">ボタン</button>
<button id="test">output</button>
<div id="timer" style="border:1px solid red;width:500px;height:500px;"></div>
<script>
let startButton = document.getElementById("start");
let testButton = document.getElementById("test");
let timer = document.getElementById("timer");
let num = 0;
let arr = [];
startButton.addEventListener("click" , function()
{num += 1;
timer.insertAdjacentHTML("afterbegin" ,"<div>" + num + "</div>");
arr.push(num);
localStorage.setItem("saveArray" , arr);
});
testButton.addEventListener("click" , function()
{let array = localStorage.getItem("saveArray");
for(let i = 0;i < array.length ; i ++)
{console.log(array[i]);}});
</script>

2021/09/07(火) 11:29:52.51

>>814
JSON.stringify(), JSON.parse()

2021/09/07(火) 15:35:10.78

>>815
jsonにするということですが、なぜ配列だと駄目なんですかね。

2021/09/07(火) 15:44:10.61

pythonにとって読み込んだテキストは単なる文字列だから。
“[1,2,3]”と同じ。

2021/09/07(火) 15:48:32.44

おっとpythonスレじゃなかった。javascriptにとってね。

2021/09/07(火) 15:57:51.34

>>818
そういう仕組だと覚えるしかないですね
localstrageって一種の変数みたいなもんじゃないんでしょうかね

2021/09/07(火) 20:38:17.68

外部とのやり取りは、文字列だけ

オブジェクトのシリアル化(直列化)、serialize

2021/09/07(火) 22:51:34.49

localstorageだと強制的に文字列に変換されるから、それが嫌ならlocalforageとかのラッパーを使うといい

2021/09/08(水) 15:58:10.14

はい(´・ω・`)

2021/09/08(水) 21:31:41.92

innerhtmlはfor内では機能しないのでしょうか？
クリックしたときにtimerの中にnum_arrの中身をセットしたいです。
しかし、console.log(num_arr[i])での展開はされますが、innerhtmlでのセットは機能していないです。
なぜでしょうか？
<button id="test2">
test2
</button>
<div id="timer"></div>
<script>
let testButton2 = document.getElementById("test2");
let num_arr = [1,2,3,4,5];
testButton2.addEventListener("click" , function()
{
for(let i = 0;i <num_arr.length ; i ++)
{
timer.innerHTML = "<div>" + num_arr[i] + "</div>" ;
console.log(num_arr[i]);
}
});
</script>

2021/09/08(水) 21:50:08.74

書いた通りに動いてるじゃん
一瞬で上書きされるから人間の目には何が起きてるか見えんけど

2021/09/08(水) 21:52:59.07

>>823
> for(let i = 0;i <num_arr.length ; i ++)

i ++ とは？

2021/09/08(水) 21:56:09.90

変数timer が未定義だから

let timer = document.getElementById("timer");
が必要なのでは？

2021/09/08(水) 22:05:24.18

>>826
その方がお行儀がいいのでそうすべきだが、定義はされてる

2021/09/08(水) 22:13:11.22

>>823
プラスイコールにしてみればわかるよ
timer.innerHTML = "<div>" + num_arr[i] + "</div>" ;
timer.innerHTML += "<div>" + num_arr[i] + "</div>" ;