X



+ JavaScript の質問用スレッド vol.143 +

レス数が1000を超えています。これ以上書き込みはできません。
0001Name_Not_Found
垢版 |
2019/12/26(木) 19:50:04.40ID:???
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください

■規則/推奨ルール
質問者は !slip:vvvvv を名前欄に、その後は「レス番」+!slip:vvvvv
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」から解離した議論はよそでやること。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。
【条件】期待する回答の条件を書いてください。
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
 1レスに収まらないならコード投稿サイトを利用してください。
 http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける=荒らしです

■前スレ
+ JavaScript の質問用スレッド vol.142 +
https://mevius.5ch.net/test/read.cgi/hp/1568622157/
0901Name_Not_Found
垢版 |
2020/04/29(水) 16:14:57.42ID:???
配列へオブジェクトを動的に格納しています。
格納したくないオブジェクト(例ではiが0,2,3のとき)の格納前にはcontinue文で次の反復を実行します。
しかし飛ばしたはずのオブジェクトの分まで添字が用意され、そこにundefinedが入ってしまいます。
配列には1つずつ要素を格納していますが、出力を見るとサンプルコードの★部分で配列の要素が1を超えて増えていることがわかります。
一体なぜ、このようなことが起こるのでしょうか。

【環境】Ubuntu 19.10, Firefox 75, Chrome 81.0.4044.122
【条件】Vanilla JSの使用, FirefoxまたはChrome最新版での動作
【エラーメッセージ】なし
【サンプルコード】
https://jsfiddle.net/et3pw2a4/

--出力ここから
X i = 0, len:0, person -> []
A i = 1, len:0, person -> []
B i = 1, len:2, person -> [null,{}]
X i = 2, len:2, person -> [null,{"id":"a1","no":8}]
X i = 3, len:2, person -> [null,{"id":"a1","no":8}]
A i = 4, len:2, person -> [null,{"id":"a1","no":8}]
B i = 4, len:5, person -> [null,{"id":"a1","no":8},null,null,{}]
A i = 5, len:5, person -> [null,{"id":"a1","no":8},null,null,{"id":"a4","no":20}]
B i = 5, len:6, person -> [null,{"id":"a1","no":8},null,null,{"id":"a4","no":20},{}]
{"person":[null,{"id":"a1","no":8},null,null,{"id":"a4","no":20},{"id":"a5","no":24}]}
--出力ここまで
0903Name_Not_Found
垢版 |
2020/04/29(水) 18:15:46.44ID:???
>>901
>>配列へオブジェクトを動的に格納しています。
はい、コードを確認しました。

>>格納したくないオブジェクト(例ではiが0,2,3のとき)の格納前にはcontinue文で次の反復を実行します。
はい、コードを確認しました。

>>しかし飛ばしたはずのオブジェクトの分まで添字が用意され、そこにundefinedが入ってしまいます。
いいえ、配列には飛ばしたインデックスでのプロパティは作られておらず、当然undefined値も入っていないことを確認しました。

>>配列には1つずつ要素を格納していますが、出力を見るとサンプルコードの★部分で配列の要素が1を超えて増えていることがわかります。
いいえ、それはそう見える書き出し方をしているだけであり、実際の要素数は1つずつしか増えていないことを確認しました。

>>一体なぜ、このようなことが起こるのでしょうか。
起きていないことを、あなたが起きていると信じ込んでしまっているため、あなたの脳内では起こってしまうのでしょう。
0904Name_Not_Found
垢版 |
2020/04/29(水) 21:55:09.35ID:???
すみません、良い方法があれば教えていただけないでしょうか。
現在、300行、40列のtableを表示するjspを作っています。
一度表を描画した後、それぞれのセルに対してID設定や要素の追加等をjavascriptで
行っているのですが、画面を操作できるまでに10秒ほどかかってしまっています。
このjavascriptによる設定追加ですが、見た目には影響しないので、
バックグラウンドでできないかと思っているのですがよい方法はないでしょうか。
(表の描画が完了したところで操作可能となり裏でjavascriptによる設定を行う、等)
自分でも確認したところwebworkerというやり方が目に入ったのですが、DOM操作は
できないとのことで実現はできませんでした。
0905Name_Not_Found
垢版 |
2020/04/29(水) 22:05:01.67ID:???
今どきは別スレッドに描画処理を持っていくこともできるが
でかいテーブルがJSPでどーんとHTMLに最初から乗っかってくるのだから
そういう繊細なことを考えても割に合わない

大胆で究極に簡単な方法
例えば最初CSSで非表示にしておいて処理が完了したら表示するとか
そういったことで乗り切れるでしょ
それでも重ければスクロールに従って少しずつ処理していく
そんなとこ
0906Name_Not_Found
垢版 |
2020/04/30(木) 02:19:20.73ID:???
>>902 >>903
ご回答ありがとうございます。
完全に私の思い込みでした。ご指摘いただきありがとうございました。
もう一度コードをよく見ました。私のコードは次のコードと同じでした。
let person = [];
person[1] = "略";
person[4] = "略";
person[5] = "略";
console.log(person.length); // => 6
console.log(person.hasOwnProperty("0")); // => false

>>いいえ、〜省略〜 当然undefined値も入っていないことを確認しました。
コードAを実行して、えっ、0,2,3はundefinedだよな?なのに入っていないとは???となりました。
しかしコードBを実行して、jの0,2,3でundefinedが返ったのは、[0][2][3]が未定義だからであることがわかりました。
言い換えると、undefinedが入っているわけではなく、何も入っていない(hasOwnPropertyメソッドがfalseになる)からundefinedが返ったのだと理解しました。
// コードA
for (let j = 0; j < foo.person.length; j++) {
if (undefined === foo.person[j]) {
console.log(`foo.person[${j}] is undefined`);
}
}
// コードB
let ary = [undefined, , 'c'];
console.log(ary.hasOwnProperty("0")); // => true
console.log(ary.hasOwnProperty("1")); // => false
0907Name_Not_Found
垢版 |
2020/04/30(木) 06:49:35.06ID:???
null は、プログラマーが初期値として代入できるけど、

一方、undefined は、プログラマーが代入できない。
実行環境が使うもの
0908Name_Not_Found
垢版 |
2020/04/30(木) 07:26:25.43ID:???
>>904
非同期・Ajax, loading spinner

たにぐちまこと
TypeScript入門 #08:Promise処理で、非同期通信(Ajax)をしよう@
https://www.youtube.com/watch?v=Yrx5WG4wVfA

この動画では、素のXMLHttpRequest(XHR)で、readyState === 4 を使っているけど、
普通はもっと簡単な、jQuery のAjax を使う

jQuery slim 版では、Ajax・アニメ効果は含まれていないので、
その場合は、axios を使う
0909Name_Not_Found
垢版 |
2020/04/30(木) 07:33:31.92ID:???
> たにぐちまこと

たまちゆき に見えた。新作でないかな?
0910Name_Not_Found
垢版 |
2020/04/30(木) 07:56:24.33ID:???
jQuery.ajaxはfetchを知らない人の為の遺物
0911Name_Not_Found
垢版 |
2020/04/30(木) 08:07:54.04ID:???
jQuery開発者「うん、だからそれを取り除いたslim版を作ったんやろ?」
0912Name_Not_Found
垢版 |
2020/04/30(木) 08:23:31.52ID:???
$()はSelectors APIを知らない人の為の遺物
0913Name_Not_Found
垢版 |
2020/04/30(木) 08:34:15.02ID:/kED3zLW
axios や querySelector
0914Name_Not_Found
垢版 |
2020/04/30(木) 08:58:35.21ID:???
ElectronでJavaScriptを勉強し始めたのですけどファイルの読み込みと処理結果の取得がよく分かりません
ファイル読み込みは1行ずつ読み込みし逐次内容を抽出して変数に格納しています
この変数を戻り値としたいのでファイル読み込みのメンバ関数はasync,awaitしています
仮にread関数として使ってみると内容が入ってきません何がいけないのでしょう・・・

app.on('ready', () => {
win = new Window({window: BrowserWindow});
let list = readaaa();
console.log(list); ←内容が入っていない
});

async function readaaa() {
const aaa = new ClassAAA();
let list = await aaa.read();
console.log(list); ←内容が入っている
return list;
}
0915Name_Not_Found
垢版 |
2020/04/30(木) 09:03:31.69ID:???
>>908
axiosってさー
わざわざ使わないといかんの?
fetchしゃいかん?
0916Name_Not_Found
垢版 |
2020/04/30(木) 10:03:47.84ID:???
>>914
>win = new Window({window: BrowserWindow});
>let list = readaaa();
>console.log(list); ←内容が入っていない

readaaa( )が非同期だから、後で呼ばれるのでは?
前・後が、list よりも先に、表示されるのでは?

win = new Window({window: BrowserWindow});
console.log("前");
let list = readaaa();
console.log("後");
console.log(list); ←内容が入っていない
0917Name_Not_Found
垢版 |
2020/04/30(木) 10:11:59.60ID:???
>>912
> $()はSelectors APIを知らない人の為の遺物

Selectors APIで代替できると思ってるやつは
$() は Selectors APIと同じ機能しか持ってないと勘違いしてるアホ
0919Name_Not_Found
垢版 |
2020/04/30(木) 10:21:49.35ID:???
>>915
axiosだとデフォルトのhostやレスポンス処理定義したりinstance発行できるから
規模による
0920Name_Not_Found
垢版 |
2020/04/30(木) 10:56:50.10ID:???
const time1 = new Date();
const time2 = new Date;

()が無くても同じ値が出てくるんだけど、()無しはどう意味あんの?
0921Name_Not_Found
垢版 |
2020/04/30(木) 11:07:17.25ID:???
Selectors APIで〜と言ってるやつに
じゃあA要素が複数ある時に
$('a').on('click', function() { ・・・ }); や
$(document).on('click', 'a', function() { ・・・ }); と
全く同じことをするコードはどうなるの?って聞くと
冗長なコードを持ってくるから笑えるw
0922Name_Not_Found
垢版 |
2020/04/30(木) 11:33:29.73ID:???
>>920
Dateというよりnew 演算子で引数がない場合の糖衣構文
0923Name_Not_Found
垢版 |
2020/04/30(木) 11:35:29.38ID:???
>>920
意味は特にないよ
引数渡す必要なければ省略可なだけよ
0924Name_Not_Found
垢版 |
2020/04/30(木) 11:37:40.01ID:???
>>922
なんのメリットもシュガーも与えてないのだから
こういうのは糖衣構文とは言わん。ただの省略

糖衣構文というのは「以前は不便だったものを内部の構造を
大きく変えないで構文だけで便利にするもの」
以前よりも良くなってる素晴らしいものが糖衣構文であって
ただの省略は何のメリットももたらしていない
0925Name_Not_Found
垢版 |
2020/04/30(木) 11:40:19.92ID:???
たまに糖衣構文だから価値がないみたいなことを言ってるやつがいるが
もしかして糖衣構文の意味を知らなかったとかなのか?
0926Name_Not_Found
垢版 |
2020/04/30(木) 11:42:38.59ID:???
挙動が変わらなければシンタックスシュガーじゃないの?
>>924のは省略記法とでも言うの?
差は厳密に定義できるの?
0927Name_Not_Found
垢版 |
2020/04/30(木) 11:44:36.88ID:???
>>924
メリット云々はよくわからないが
構文ではなかったかもすまん
0928Name_Not_Found
垢版 |
2020/04/30(木) 11:53:28.23ID:???
マジで糖衣構文の意味を知らんのかw

糖衣って知ってるか?
セイロガン糖衣Aの糖衣だぞ

https://kotobank.jp/word/%E7%B3%96%E8%A1%A3-579473
1 薬剤を服用しやすくするために外側に施した、糖分を含む被膜。「糖衣錠」
2 チョコレートやゼリーなどの表面を覆う、砂糖でつくった硬い被膜。「糖衣菓子」

何かを糖衣してなきゃ糖衣にはならん
0929Name_Not_Found
垢版 |
2020/04/30(木) 11:59:05.96ID:???
括弧省略できるのは糖衣じゃないのか?
どこからが糖衣でどの省略が糖衣じゃないのか例出してくれたらわかる
0930Name_Not_Found
垢版 |
2020/04/30(木) 12:14:30.81ID:???
jQuery の利点は、未だに大きい

YouTube で、たにぐちまことの「jQuery 入門」という動画を見れば?
0931Name_Not_Found
垢版 |
2020/04/30(木) 12:28:39.37ID:???
>>928
糖衣って無理矢理和訳だから、多少はね?
0932Name_Not_Found
垢版 |
2020/04/30(木) 12:40:33.43ID:???
>>914
app.on('ready', async () => {
win = new Window({window: BrowserWindow});
let list = await readaaa();
console.log(list);
});
0933Name_Not_Found
垢版 |
2020/04/30(木) 12:55:16.94ID:???
>>916
関数を呼ぶと全て非同期になるのですか?
ちょっとよく分からないのでもう少し勉強してみます。

>>932
ありがとう、やってみたら内容受け取れました。
非同期処理と同期処理でぐっちゃになりそうです
0934Name_Not_Found
垢版 |
2020/04/30(木) 13:14:08.53ID:???
>>921

document.querySelectorAll('a').forEach( elem=> elem.onclick = aFunction );

回す用の仮引数 elem で記述が1つ増えるだけじゃない?
0935920
垢版 |
2020/04/30(木) 13:15:18.88ID:???
const time1 = new Date();
const time2 = new Date;
console.log(timer1 ===timer2);
としてみるとfalseが返ってくるんだよな。
同じではないってこと?
0936Name_Not_Found
垢版 |
2020/04/30(木) 13:17:25.69ID:???
>>935
オブジェクトの厳密比較は参照が同じじゃないと偽を返す
0937Name_Not_Found
垢版 |
2020/04/30(木) 13:20:42.88ID:???
>>929
糖衣を省略と思ってるからおかしなことになるんでしょ
より素朴な構文があって、それらを組合わせて実現できることを
1つの構文で実現できれば、それはそれらの糖衣構文と言うんでしょ

それと、「括弧が省略できる」っていうのはだだの主観的な見方でしょ
配列やオブジェクトの末尾カンマのように、見方を変えれば「不要な括弧をつけることができる」とも言えるでしょ
要するにないパターンとあるパターンはどちらかがもう片方の特殊な形と言っても間違いではないけれど、
そう言うよりはどちらでも書ける対等な存在同士と考えるほうがスマートでしょ

実際のESの仕様的にも
new MemberExpressionとnew MemberExpression Argumentsの2つが存在してるんでしょ
0938Name_Not_Found
垢版 |
2020/04/30(木) 13:24:57.19ID:???
>>935
2つの存在をそれぞれ作ったのだから
それらが同一であるはずがないじゃないか
0939916
垢版 |
2020/04/30(木) 13:41:38.71ID:???
>>933
>async function readaaa() { }
async が付いているから、非同期関数じゃないの?

非同期は、同期処理とはコンテキスト・文脈が異なるから、
通常の方法では、やりとりできない

特別な書き方をしないといけない
0940Name_Not_Found
垢版 |
2020/04/30(木) 14:32:52.65ID:???
>>933
ハイパー大雑把だけど
awaitは必ずasync関数の中で使おう
0941Name_Not_Found
垢版 |
2020/04/30(木) 15:07:25.38ID:???
クロージャーの説明のサンプルコードについて質問です。

const createCounter = function() {
let cnt = 0; //(1)
console.log(cnt); //(2)
return function() {
cnt +=1;
console.log(cnt); //(3)
};
};

const counter = createCounter();
counter(); //(4)
counter(); //(5)
counter(); //(6)

出力結果は以下の通りになりました。
0 //(4)を実行
1 //(4)を実行
2 //(5)まで実行
3 //(6)まで実行

なぜ(1)のlet cnt = 0 と(2)のconsole.log(cnt)はスルーされちゃうんでしょうか?
0942Name_Not_Found
垢版 |
2020/04/30(木) 15:32:29.23ID:???
(1)(2)は
const counter = createCounter();
の時にしか実行されないから

console.log(counter.toString());してみ
0943Name_Not_Found
垢版 |
2020/04/30(木) 16:03:47.53ID:???
>>941
0は(4)じゃなくて(2)の出力じゃない?
(1)(2)はちゃんと1回処理されてる
0944Name_Not_Found
垢版 |
2020/04/30(木) 16:22:23.03ID:???
>>941

createCounter();は
let cnt = 0; //(1)
console.log(cnt); //(2)
return
だから0じゃん

counter();は
cnt +=1;
console.log(cnt); //(3)
だから3回呼べば1,2,3じゃん

何がどう分からないの?
0945Name_Not_Found
垢版 |
2020/04/30(木) 17:09:30.50ID:???
>>934
やっぱりだめですねw

それだと複数のイベントを設定できない
頑張ってjQueryと同じようなことをしても
デメリットが出てしまう
$(document)〜のほうはもうお手上げみたいだしw
0946941
垢版 |
2020/04/30(木) 17:28:20.23ID:???
>>944
counter()を実行する、つまりまたcreatecCounter()を実行するのに(1)(2)をすっ飛ばしてしまうのが理解できてません。
0947Name_Not_Found
垢版 |
2020/04/30(木) 18:43:36.41ID:???
>>945
複数の要素に同じイベントハンドラを設定する必要はないから問題ない
0948Name_Not_Found
垢版 |
2020/04/30(木) 18:49:15.71ID:???
>>945
ほれ
document.querySelectorAll('a').forEach(elem => elem.addEventListener('click', aFunction));
0949Name_Not_Found
垢版 |
2020/04/30(木) 18:51:10.43ID:???
>>946
counter()を実行する、つまりまたcreateCounter()を実行する
ことにはならないでしょ
counterはcounterであってcounterには
cnt +=1;
console.log(cnt); //(3)
の部分しか含まれてないじゃん
0950Name_Not_Found
垢版 |
2020/04/30(木) 18:55:47.86ID:???
>>946
const counter = createCounter();
で実行されるのは944が言ってる通り
let cnt = 0; //(1)
console.log(cnt); //(2)
return
までで、そのreturnに指定してある戻り値の
function() {
cnt +=1;
console.log(cnt); //(3)
};
がcounterに代入される
0951Name_Not_Found
垢版 |
2020/04/30(木) 19:00:37.97ID:???
>>947
> 複数の要素に同じイベントハンドラを設定する必要はないから問題ない

それはお前の都合であって、
お前という人間の話はしてない。
技術について語れ
0952Name_Not_Found
垢版 |
2020/04/30(木) 19:01:55.30ID:???
>>948
長いよなぁw

document.querySelectorAll('a').forEach(elem => elem.addEventListener('click', aFunction));
$('a').click(aFunction);

これがjQueryとの差。4倍と言っていいかね?w
0953Name_Not_Found
垢版 |
2020/04/30(木) 19:11:50.76ID:???
長いなら適切に関数を作れば良いのでは?
もしかして他人が作ったものしか使えないってこと?
それなら俺がもっと短く書けるライブラリ使ったらそれを使うんだろうか?

jQueryの価値は短く書けるとかいう馬鹿なことじゃないでしょ
多くの人が使ったことがある著名で枯れたライブラリだから
チーム開発に導入して意味があるんでしょ

短く書けるからと言ってその場限りの適当なライブラリあフレームワーク持ってくると
学習コストが見合わなかったり、メンテがされてなかったり、後々ルールを思い出すのが大変だったりするんでしょ
だからそんなものを使うくらいなら「著名で枯れている」標準APIを使っとこうとなるんでしょ

jQueryの価値って、短く書けるとかそういったことじゃなくて、「皆が使ってる」これに限るでしょ
0954Name_Not_Found
垢版 |
2020/04/30(木) 19:14:32.70ID:???
> 長いなら適切に関数を作れば良いのでは?

だからそれをjQueryがやってくれてる
オレオレで作った関数は、他人と知識を共有できない
jQueryであればたとえ外部の人とであっても、技術を共有できる

> jQueryの価値は短く書けるとかいう馬鹿なことじゃないでしょ
jQueryの価値は、開発コストの削減。短く書けるだけじゃなくて
新しく雇った人でも知ってる可能性が高い。教えるコストも減る。
自社独自の方法は出来る限り少なくするべき
0955Name_Not_Found
垢版 |
2020/04/30(木) 19:15:59.83ID:???
>>953
今話しをしてるのは
皆が使ってるjQueryとDOM APIの比較

両者ともに皆使ってる。皆使ってる同士を比べて
良いのはjQueryだという話をしている。
0956Name_Not_Found
垢版 |
2020/04/30(木) 19:31:13.15ID:???
>>955
良いということを否定してないよ
でもその理由はおかしいでしょってこと
あと煽るような書き方やめなよ
0957Name_Not_Found
垢版 |
2020/04/30(木) 19:40:50.68ID:???
>>951
使わなくて良いものにコストをかけるのは愚かなことだ
0958Name_Not_Found
垢版 |
2020/04/30(木) 19:51:39.16ID:???
>>957
jQueryは使われてますよ。
またシェア出しましょうか?
0959Name_Not_Found
垢版 |
2020/04/30(木) 19:57:05.78ID:???
このクソ馬鹿は死んでも直らんな
HTMLやCSSで十分簡単にできることなのに
JSはほぼ100%のサイトで使われている!
だからJSを使うべきだ!
と騒いでるのに等しいことが分からんのか
0960Name_Not_Found
垢版 |
2020/04/30(木) 19:59:24.29ID:???
数十だか数百だかの文字を削減できたところで
それで削減できる時間よりもjQueryライブラリを導入してページに配置する時間の方が何倍も大きい
0961941
垢版 |
2020/04/30(木) 20:03:39.27ID:???
あ!
createCounter()の戻り値である関数が代入されるってことですね!
const counter = function () {cnt += 1 ・・・}
となるんでcounter()とするとcntに1が足されると。。。

counter()とすると毎回createCounter()を実行するものだと思ってました。
解決しました。ありがとうございます!
0962Name_Not_Found
垢版 |
2020/04/30(木) 20:03:54.63ID:???
やめろお前ら素人じゃあるまいに

それぞれのエコシステムにフィットするものが
一意でないことなんて当たり前じゃん
そんなことは過去に何千件とこなしてきた仕事でわかりきってるだろ
0964Name_Not_Found
垢版 |
2020/04/30(木) 20:05:49.08ID:???
>>962
2chなんだから趣味プログラマや
仕事を選ぶフリーランスとか
職人気質な奴が多いんだろうな
0965Name_Not_Found
垢版 |
2020/04/30(木) 20:05:49.17ID:???
>>962
2chなんだから趣味プログラマや
仕事を選ぶフリーランスとか
職人気質な奴が多いんだろうな
0966Name_Not_Found
垢版 |
2020/04/30(木) 20:31:17.76ID:???
>>958
日本語が読めない馬鹿に与える薬はない
0967Name_Not_Found
垢版 |
2020/04/30(木) 20:50:49.91ID:???
>>959
いやいや、JSだけで出来るのわかってる
DOM APIを使うよりも快適に作れるのがjQueryって言ってるだけ
0968Name_Not_Found
垢版 |
2020/04/30(木) 20:51:35.62ID:???
>>960
> それで削減できる時間よりもjQueryライブラリを導入してページに配置する時間の方が何倍も大きい

あなたは1行追加するのに何時間かかるんです?
0969Name_Not_Found
垢版 |
2020/04/30(木) 21:11:20.98ID:???
JavaScriptでクラスを学び始めて気になったことがあったので質問させてください

JavaScriptは関係ないかもしれませんが、メソッドの中で別のクラスのインスタンスを呼ぶ事が、
せっかくクラス分けしているのに動作が他クラスのインスタンスに依存する形になって気持ちが悪い気がします
このような書き方は一般的なのでしょうか?

class A {
constructor(){}
metho(){
console.log('A!');
}
}
const a = new A();

class B {
constructor(){}
method(){
a.method();
}
}
const b = new B();
b.method();
0970Name_Not_Found
垢版 |
2020/04/30(木) 21:14:54.14ID:???
>>968
鯖から落として読み込み毎にメモリに展開するって話じゃないの
0971Name_Not_Found
垢版 |
2020/04/30(木) 21:32:08.96ID:???
JSに一般的な書き方というものはないし
お前さんが一般的な書き方を探して真似するする必要もない
気持ち悪いと思うのならばそういう書き方をお前さんがしなければいいだけの話
0972Name_Not_Found
垢版 |
2020/04/30(木) 23:21:20.19
>>969
あくまで強いて言えば、
自前のライブラリなどでパッケージとして公開する場合は
そもそもClass AやClass Bというクラスを作るクラスも作っておいた方がいいかも
0973Name_Not_Found
垢版 |
2020/05/01(金) 00:08:53.50ID:???
>>970
流石にそんな意味がないことを気にしてるわけ無いやろw
0974Name_Not_Found
垢版 |
2020/05/01(金) 00:43:53.57ID:???
>>969
クラスが他クラスに依存した形にならないようにわざわざクラス分けするのであって、
そのような場合は別のクラスとして定義するべきではないのは理解できない?
0975Name_Not_Found
垢版 |
2020/05/01(金) 00:45:49.30ID:???
class B が class A を持つような形にすれば
「Bでメソッドを使いたいけどAがインスタンス化されていなかった」
みたいな問題は起きなくなる

プログラム書く以前の設計の問題
0976Name_Not_Found
垢版 |
2020/05/01(金) 01:11:02.09ID:???
あの例がだいたいの形だとして、
AはBで利用する用で主にBをexportしたいのならばまだ分かりみがある
0977Name_Not_Found
垢版 |
2020/05/01(金) 01:36:17.29ID:???
簡単なFlashゲームみたいなページ変遷のない育成ゲームを作りたくて
データバインディングが可能なライブラリを調べているのだけど
どこにでもNode.jsという謎の概念が出てきて、困っている。
ライブラリのようにscriptタグで読み込んで準備完了とはいかないのか…?
とにかく数値と画面の同期ができるだけでいいんだけど
0978Name_Not_Found
垢版 |
2020/05/01(金) 02:38:10.88ID:???
描画系フレームワークに最低限の支援は付いてる
0979Name_Not_Found
垢版 |
2020/05/01(金) 08:37:37.89ID:???
>>946
内側の関数を、return しているから、それは何回も実行できるけど、
(1)(2) は、それに含まれていないから、1回しか実行されない

まさに、(1)(2)は、内側の関数の外側に存在して、
内側で参照されている・つかまれているから、クロージャ

内側の関数が存在する限り、その外側にある、つかまれている環境も存在しなければならない。
だから、GC で解放できない。
これが、クロージャがメモリを食う理由

クラス内のメンバー変数と同じ仕組み。
クラス内のメソッドの外側に存在する変数だけど、メソッド内で使える

つまり、クロージャは簡易クラスみたいなもの
0980908
垢版 |
2020/05/01(金) 08:43:10.84ID:???
>>904

>>908
にも書いたけど、下もある

たにぐちまこと
jQuery入門 2020 #06:非同期(Ajax)通信をしよう @
https://www.youtube.com/watch?v=dyBtH9NolIQ&;list=PLh6V6_7fbbo_CHSvYCwcgh2p79ybE5OCi&index=6

非同期処理、jQuery, Vue.js, Axios の比較
0981Name_Not_Found
垢版 |
2020/05/01(金) 08:55:14.33ID:???
>>969
異なるクラスは、異なるファイルに書いて、import/export などを使う

export 文は、モジュールから関数、オブジェクト、プリミティブ値をエクスポートするための、
JavaScript モジュールを作成するときに使用し、
これらは別のプログラムから、import 文で利用する

export default class { .. }

import myDefault from '/modules/my-module.js';
0982Name_Not_Found
垢版 |
2020/05/01(金) 09:15:49.96ID:???
>>977
VSCode, Node.js は必須。
Ruby on Rails でも使う

Node はサーバー側の実行環境。
これが無いと、ブラウザを実行環境にしないといけないから、テストが大変。
gulp・npm scripts などのテストランナーや、端末も使えない

ブラウザが実行環境の場合、webページは、ローカルPC 内のファイルにアクセスできないから、
Ruby を参考にして、Nodeが作られた

npm/yarn という、ライブラリの依存関係を解決する、パッケージマネージャーも使える。
Ruby のBundler と同じ

Webpack, Babel で、ES2015, TypeScript, SASS などを、
ブラウザで動く、HTML5 へ変換したり
0983Name_Not_Found
垢版 |
2020/05/01(金) 10:43:19.15ID:???
>>977
ライブラリだけで頑張るのもいいけど
SPAやりたいなら
vueなどのフレームワークに頼ってみるのもいいんじゃない?
0985Name_Not_Found
垢版 |
2020/05/01(金) 14:40:35.12ID:???
>>971,972,974,975,976,981
レスありがとうございます

やはり、あまりよくない書き方なんですね

まだクラスと言うものがまだよく理解できていなくて
canvas要素に多数のキャラクターを表示させ動かす200行くらいのプログラムをTypeScriptで書いて勉強しているのですが
canvasの初期化やベースの描画を行うスクリーンクラス→キャラクターのベースクラス→様々なキャラクタークラス
と継承させてグローバル変数なしでプログラムが書けないか試行錯誤している最中でした

クラスは設計図のようなものでそれ自体はインスタンス化されるまでプロパティを持たないため
例えばスクリーンクラスのプロパティを子要素でグローバル変数のように使いたい場合は
子クラスのコンストラクターのにスクリーンクラスのインスタンスを渡すか、
使い回したい変数を管理するクラスやオブジェクトを作るということでしょうか
0986981
垢版 |
2020/05/01(金) 15:18:32.05ID:???
>>981
に書いたように、export されたクラスを、import して、

import myClass from '/modules/my-class.js';

let obj = new myClass( );

何かを管理するようなクラスは普通、複数のインスタンスを作らない。
そういう場合は、複数のインスタンスが作られないように、シングルトンでも使えば?
0987Name_Not_Found
垢版 |
2020/05/01(金) 15:19:26.17ID:???
Node.jsはindex.htmlと同じとこにアップロードしたらサーバー側で動いてくれるもの?
0988Name_Not_Found
垢版 |
2020/05/01(金) 15:31:54.81ID:???
>>986
すいません
なぜ、例えばスクリーンクラスで作成したcanvas要素への参照を格納したプロパティに子クラスからアクセスするために
クラスを外部ファイルにしなければならないのかが理解できません
0989Name_Not_Found
垢版 |
2020/05/01(金) 16:23:00.82ID:???
JSの決まり事ではないのかもしれないけれど、
オブジェクト指向の他言語だと1クラス1ファイルが基本になっていることが多い。

あんたが書いている通りクラスを設計図みたいなものとして見た場合、
設計図はただの設計図、実際にインスタンス化して利用するのは実行用のファイル、というように整理(管理)することが多い。
工場(実行用のファイル)の中に設計図を持ち込んで、それをもとに実際のブツを造る、というようなイメージが近いかも。
現実でも設計図や料理のレシピにベタベタと実物が貼りついていることなんて基本的には無いでしょう?

んで、プロパティやフィールドといったクラスが持つ変数へのアクセスは、直接アクセスしても良いけど、メソッドを通して正しい手続きを用意して行ったりする。
>>986が書いているように、複数作るとおかしくなるものに関しては、常に単一の変数を参照できるようにシングルトンで実装するよ、という話だと思う。

小さいプログラムであったり、個人で書いている分には>>971も書いているように決まりは無いから好きに書けば良い。
0990Name_Not_Found
垢版 |
2020/05/01(金) 17:03:56.83ID:???
>>989
分かりやすく書いていただいてありがとうございます

しかし、TypeScriptのシングルトンは継承ができないらしく
例の場合のスクリーンクラス→キャラクタークラスの継承が不可能になるようです
スクリーンクラスとキャラクタークラスでは設計的な共通部分が少なくコンストラクタの相性も悪いため
そもそも継承すること自体が間違いな気がしてきました
0991Name_Not_Found
垢版 |
2020/05/01(金) 17:50:07.24ID:???
>>987
node.jsはサーバにインストールするもの
0992Name_Not_Found
垢版 |
2020/05/01(金) 17:54:59.93ID:???
>>991
レンタルサーバーに勝手にインストールして大丈夫なのだろうか、怒られないか
0993Name_Not_Found
垢版 |
2020/05/01(金) 18:02:21.60ID:???
>>992
レンサバではそもそもできないんじゃない?
0995Name_Not_Found
垢版 |
2020/05/01(金) 19:44:07.15ID:???
>>990
ここでのやり取りだけでは具体的にどう設計(実装)されているのかは計り兼ねるけど、
"本当に継承が必要な場合"でないなら継承は避けて、"委譲"するべき、という考え方がある。
そもそもシングルトンを実装されるようなクラスの場合は継承すべきではない、と個人的には考えている。

適切なクラス分けやどのようなアルゴリズムやアーキテクチャを採用するか、というのはすごく難しい課題(設計)なので、
結局のところ、今あんたが書いているプログラムが
 ・練習や趣味
 ・他人の手に渡らないプログラム
の様な小さな規模であるのなら、
>>971も書いているように好きなように(自分の分かりやすいように)書けば良い。

逆に、
 ・長期的にメンテナンスしながら運用
 ・他人の手に委ねるようなプログラム
ならば、
採用する環境や、適切なクラス分け、どのようなアーキテクチャやデザインパターン(要するに設計)から熟考すべきと思う。
0996Name_Not_Found
垢版 |
2020/05/01(金) 20:22:17.10ID:???
>>985
コンテキスト系は面倒でも毎回メソッドに渡すようにしたほうが良い
巨大で複雑になってくると絶対リファクタリングしたくなるよ
0997Name_Not_Found
垢版 |
2020/05/02(土) 05:15:36.46ID:???
>>994
ただ今時だったら
既にnode入ってるのもあるんじゃない?
0998Name_Not_Found
垢版 |
2020/05/02(土) 05:26:21.69ID:???
継承か、委譲(包含・部品化・インターフェース)か?
is-a, has-a

車・消防車は、親子関係の継承。
消防車は、車の一種。is-a

車・ハンドルは、has-a。
車はハンドルを持つ。
ハンドルは車の一種ではない
0999Name_Not_Found
垢版 |
2020/05/02(土) 10:02:30.27ID:???
色々試したいなら狭義のWeb的レンサバではなくKAGUYAみたいなクラウドサービス使ったほうが良いと思う
レス数が1000を超えています。これ以上書き込みはできません。