+ JavaScript の質問用スレッド vol.124 + [転載禁止]©2ch.net

**デフォルトの名無しさん** · 2015/03/22(日) 16:19:45.75

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

+ JavaScript の質問用スレッド vol.123 +
http://peace.2ch.net/test/read.cgi/hp/1423915644/

（ライブラリ禁止条項は、多数の意見によって廃止されました。ライブラリの質問もOKです）

**デフォルトの名無しさん** · 2017/08/29(火) 10:22:05.85

Ball.prototype.move = function() {
this.x += this.dx;
this.y += this.dy;
}
ball.move();//移動

普通はこうする

**デフォルトの名無しさん** · 2017/08/29(火) 10:31:34.54

今時はES2015はどのブラウザでも動くんだからclass構文使いなよ

**デフォルトの名無しさん** · 2017/08/29(火) 10:45:59.23

たとえば select にonchange つけたとき
selectで何が選ばれたかはイベントオブジェクトに入っていない？

**デフォルトの名無しさん** · 2017/08/29(火) 11:48:45.92

>>133
>ball.move(this.x, this.dx);//X方向の移動
>ball.move(this.y, this.dy);//Y方向の移動
上記のコードのthisはballを指してない。実体はwindowだからundeifnedが入ってると思われる。

だからあえて踏襲するなら
ball.move(ball.x, ball.dx);//X方向の移動
ってことになる。
thisがそれぞれの文脈でどこを示しているかは勉強しなきゃいけないけど
thisがballのインスタンスになるのは今回はmoveの実装内だけ。

**デフォルトの名無しさん** · 2017/08/29(火) 12:54:23.72

ゲームエンジンの、Cocos2d-x(JS版)では、
cc.Sprite(画像クラス)は、cc.Node から、派生しているけど、
cc.Node のメソッドも使える

getPosition(), getPositionX(), getPositionY(),
setPosition(newPosOrxValue, yValue), setPositionX(x), setPositionY(y)

getPosition()の戻り値は、cc.Point。
setPosition の引数は、(x, y)か、cc.Point(_x, _y)

this.setPosition(this.getPosition().x + 10, this.getPosition().y)

JavaScript版Cocos2d-x かんたんゲーム開発、2015
原題：Learning Cocos2d-JS Game Development
Emanuele Feronato 著
http://www.emanueleferonato.com/

著者のサイトでは、Phaser の作品が多い

Phaser(フェイザー)は、Pixi.jsをコアにして、
サウンドとか衝突判定とか物理演算を追加した2Dゲーム開発フレームワーク。
マルチプラットフォームで、オープンソース(MITライセンス)

**131** · 2017/08/29(火) 20:54:57.78

皆様ありがとうございます。
結局、
var Ball = function() {
this.x = 0;//X座標
this.dx = 0;//X方向の速度
this.y = 0;//Y座標
this.dy = 0;//Y方向の速度
}を
var Ball = function() {
this.xParam = {position: 0, move: 0};//X座標(現在値、速度)
this.yParam = {position: 0, move: 0};//Y座標(現在値、速度)
}
と、各変数をオブジェクトに格納するよう変えて
Ball.prototype.move = function(positionAndMove) {
positionAndMove.positon += positionAndMove.move;
}
ball.move(ball.xParam);//X方向の移動
ball.move(ball.yParam);//Y方向の移動
のような感じでmoveを使用することで解決しました。

**131** · 2017/08/29(火) 21:07:56.73

>>134
サンプルくらい単純ならそうしたのですが、実際の処理はボール移動ではなくもっと複雑です。
x, y…に該当する概念が7個くらいあり、
moveメソッドで見る変数も各々5種類くらいあります。
なので、そのやり方だと感覚的には
Ball.prototype.move = function() {
this.x += Math.min(this.constX * this.dx , this.minX) + this.adjustX…;
this.y += Math.min(this.constY * this.dx , this.minY) + this.adjustY…;
(以下5行以上コピペして一部だけ書き直し)
}
みたいなコードになってしまいます。
>>135
たしかに、class構文を使った決めた方が保守性がよくなりそうですね。
>>136
すみません、即席サンプルの単純ミスです。
>>138
誤解与えてすみません。「ボール移動」はただの単純化説明用サンプルです。
実際のコードでやっていることは全く関係ないです。

**デフォルトの名無しさん** · 2017/08/30(水) 06:20:41.18

プログラミングしていくうちに、
Unity, UE4, Cocos2d-x(JS版), Godot などの、
ゲームエンジンへ移行していくはず

日本人の開発者は、jsdo.it でも作っている。
他人のソースコードも見れる

**デフォルトの名無しさん** · 2017/08/30(水) 19:39:07.01

エロ画像ブログ巡回してると画像の下に
「二次元画像詳細検索　Google画像検索」
とあって画像の詳細を知らんべることができる
これはJavaScriptで作られているようだが、詳細がよく解らない
どういった感じで作られているのでしょう？

**デフォルトの名無しさん** · 2017/08/30(水) 19:40:02.10

＞知らんべる
調べる

**デフォルトの名無しさん** · 2017/08/31(木) 17:02:29.19

高騰中の仮想通貨Liskがこれで作れるらしいんだが、詳細教えて

**デフォルトの名無しさん** · 2017/09/02(土) 13:56:45.51

JavaScript の勉強を始たばかりです。
言語のリファレンスになる本を探しているのですが、ないでしょうか？
いくつか買ってみたのですが、ブラウザオブジェクトの使い方ばかり書いてあります。(まあ仕方ないですが)

with文って何？とか、名前空間どうなってるのとか。昨日知ったのですが、セミコロンの自動挿入とか。そんなのが分かると嬉しいです。
よろしくお願いします。

**デフォルトの名無しさん** · 2017/09/02(土) 14:41:59.39

mozilla developper network

**デフォルトの名無しさん** · 2017/09/02(土) 15:30:33.15

でかい本屋行ってサイか蝶が表紙の本をレジに持ってけ

**デフォルトの名無しさん** · 2017/09/02(土) 18:52:24.90

>>146-147
ありがとう。
ちなみにサイは買った。蝶は見て見るわ。

ECMA Script の仕様書が分かりやすいかも。
JS やってる人はどうしてるの？細かい仕様とか気にならないのかな。

**デフォルトの名無しさん** · 2017/09/03(日) 12:00:03.28

mdn以上に正確に書かれている書籍はない
あるなら教えてくれ

ECMS scriptの仕様書は実装者向けで難解だ
mdnで曖昧な時に頑張って読む

**デフォルトの名無しさん** · 2017/09/03(日) 12:01:25.10

JavaScriptは仕様以外の部分が多いので
仕様だけをみても使い物にならんからな。

例えばブラウザの機能はすべてJavaScriptの仕様の範囲外だ

**デフォルトの名無しさん** · 2017/09/03(日) 13:05:04.70

関数呼び出しで戻り値を受け取らなければ
その関数は今呼んだ関数が終わってから実行されるんですか？

**デフォルトの名無しさん** · 2017/09/03(日) 13:18:23.42

**デフォルトの名無しさん** · 2017/09/03(日) 14:50:30.58

>>150
アホか？
どんな言語だって、開発対象への知識が必要なのは変わらない javascriptが特別なわけじゃない

**デフォルトの名無しさん** · 2017/09/03(日) 15:00:42.17

つまりどの言語でも
仕様だけを見ても使い物にはならないと言ってる

**デフォルトの名無しさん** · 2017/09/03(日) 15:25:00.82

>>150
そう。
なのに、「JavaScript 入門」はDOMの話。おかしいだろ。

**デフォルトの名無しさん** · 2017/09/03(日) 17:39:25.34

> 仕様だけを見ても使い物にはならないと言ってる
そうは言っとらん

> JavaScriptは仕様以外の部分が多いので
> 仕様だけをみても使い物にならんからな。
javascriptが特殊だと言っている

**デフォルトの名無しさん** · 2017/09/03(日) 21:39:39.67

つまり、

韓国人死ね

だろ

**デフォルトの名無しさん** · 2017/09/04(月) 09:16:19.32

うむ、助詞は日本語ネイティヴ以外には難しいと言い訳はできるな

「javascriptも」のつもりで「javascriptは」と書いてしまった
朝鮮人ならありえる

**デフォルトの名無しさん** · 2017/09/04(月) 23:45:53.39

違うぞ。
指摘されても認めてないだろ。本質的に分かってないんだよ。
間違ったんじゃない。間違っていることを認識出来てないんだ。

そして在日韓国人は「日本語が下手糞なこと」を絶対に認めない。
なぜならそれは彼等の存在意義に関わるかららしい。
（日本語が上手いというのが唯一本国韓国人に対するアピールポイントらしい）
だが実際はここで見れば分かるとおり、日本語も韓国語も駄目駄目だ。
だから彼等はまともな（厳密な）議論をしたことがない、というか成立しない。
つまり彼等は議論が出来ない、というか、
彼等内で行われている議論は全く正確さ/厳密さを欠いている物でしかない。
そして彼等はそれで議論が出来ていると勘違いしている。声闘の文化もあるしね。

これが本質的な問題で、いわゆる日本人の議論下手とは全く異なる方向なんだ。
日本人のは単に場慣れしてない、
或いは色々面倒になることを避けて意見を言わない、またはオブラートに包む、
みたいな感じだが、こちらが言ったことは確実に通じていて、
下手すれば助詞の一つで揚げ足を取られたり、いきなりブチ切れられたりする。
これなら放置しておいても場数を詰めば上達するし、
2chに来ている連中はそこそこ出来る奴が多いのも事実だ。

韓国人のは本気で通じてないんだよ。その知能がないんだ。
だから厳密な/正確な議論が出来る人達にとっては邪魔でしかない。
ところが彼等はそれで出来ていると勘違いしている。
というかそれ以上の厳密さで議論する場に参加したことがないから、
そういうまともな議論が出来る（存在する）ことを知らないんだよ。
だから自分たちのレベルが低いことを認識出来ない。
当然ここと同じ事を彼等が得意な(つもりの)韓国語でもやっているはずだし、
同様に本国韓国人にも嫌われるのは自然な成り行きだ。
もちろん他の理由も多々あるにしてもね。

韓国人死ね

**デフォルトの名無しさん** · 2017/09/04(月) 23:46:16.66

しかしこれは本当に本質的な問題で、ここでプチ日本語講座をやったところで解決しない。
馬鹿が馬鹿であることを自覚出来ないってのは常だからね。
短期的な解決法はとにかく韓国人というか
「議論が成立するレベルの日本語が使えない奴」を排除していくことだ。
これについては俺は何度も「お前ら自身が損をするから発言を慎め」と言ってきたが彼等は聞かない。
(まあ彼等は上手いつもりだからそうなるのも自然ではあるのだが)
だからどうにもならないよ。

レベルの低い奴が混ざるだけで迷惑だ、ということを彼等は認識出来てない。
そして彼等（というか在日韓国人コミュニティ）はこの理由で
「正統に排除」されるのを差別だといってゴネてきた連中だ。
東大が入試で馬鹿を「正統に排除」するのは区別であり、差別ではない。
同様に、2chで2chに不十分な日本語の奴を排除するのも区別でしかない。
彼等にはこれを理解する知能すらないんだ。
マジで彼等は腐っているし、本国韓国人からもゴミ扱いされて当然だ。

マジで韓国人は死ね

一朝一夕には解決しない。話しても通じない。
となると、「在日韓国人はいるだけで迷惑だ」ということを地道に彼等に教えてやるしかない。
在日韓国人が全員自殺してくれるのが一番助かるんだが。

なんつーか、彼等は迷惑行為を行っているのだが、その自覚がないんだよ。
そりゃ今後とも在日韓国人は死ねと言われ続けるだろうし、至極当然の成り行きでしかないのだが、
彼等はそれを差別だといってゴネるだろうし、
それに対して余計にブチ切れる奴もでるだろうしで、悪循環だね。

在日韓国人が全員自殺してこの悪循環を断ち切ることを切に願う。
つか、ゴキブリは半島に帰れマジで。

**デフォルトの名無しさん** · 2017/09/05(火) 00:05:35.88

書き込み増えてないのに更新来てると思ったらそういう事か

**デフォルトの名無しさん** · 2017/09/05(火) 02:35:39.68

>>159
詳しすぎｗ
韓国人博士の商業を授けよう

**デフォルトの名無しさん** · 2017/09/05(火) 02:36:12.97

× 韓国人博士の商業
○ 韓国人博士の称号

**デフォルトの名無しさん** · 2017/09/05(火) 23:21:08.39

俺は韓国人について詳しいのではなく、単純に状況を分析出来るだけだけどな。
匿名掲示板では不思議なことは起こらない、俺はこの点が気に入っている。
在日韓国人が本国でも嫌われているのは、在日韓国人自体がマジで糞だからだよ。
あらゆる点でね。ここに挙げたのも一つ。

C#のスレでも暴れてるだろ。
http://mevius.2ch.net/test/read.cgi/tech/1492843013/783

だが他の連中が呆れている。理由は、
1) そもそも日本人なら脳内補完されてしまう（気づかないかも、程度の誤字）
2) C#userなら当然何のことを言っているのか分かる
だからそこをあげつらうのはなんの為？って感じになってる。
ところが当の本人は本気で分かってなくて、煽って答えを出させようとしている。
マジで糞だろ。死ねでしかない。

在日韓国人みたいな馬鹿はいるだけで迷惑だ。
だから彼等が嫌われるのは当然であり、これは区別であり、差別ではない。
ということを周知徹底し、韓国人を無視するようにしていかないといけない。
つーか、そうしないと議論が進まない。

韓国人死ね

つっても結局は非韓三原則、これが一番分かりやすいのだが。

韓国人に対しては、
助けない、教えない、関わらない

しっかりと韓国人がクズであることを指摘しつつ、（攻撃されたら反論）
後は放置して勝手に死ぬのを待て、ってことだね。(助けない、教えない、関わらない)
韓国人に対してエネルギーを使うこと自体が勿体ない。

**デフォルトの名無しさん** · 2017/09/20(水) 21:50:19.54

文字数制限の為、二回に分けて書き込ませていただきます。
各テーブルの背景色を条件に処理を分けたいと思い、いろいろと試していますが上手くいきません。
テスト用に書いたもので、背景色（#000000または#ffffff）ごとに合計値をresuleBまたはresultWに合計していきたいのですが、
背景色の取得がうまくいっていないようです。
今後別の処理を記述するため、できれば背景色をキーに分岐を行いたいと思っています。
解決の為、アドバイスをいただければと思います。
よろしくお願いいたします。

**>>165** · 2017/09/20(水) 22:01:50.45

>>165
NGワードに引っかかってしまいコードが書き込めないのでまた、後ほど書き込ませていただきます。

**>>165** · 2017/09/20(水) 22:33:57.96

**デフォルトの名無しさん** · 2017/09/20(水) 23:57:51.37

>>165
まず背景色をキーにするのはダメ
なぜなら色をどうするかはCSSの仕事だから。
背景色の代わりにクラスを使う

document.getElementsByNameで table を取ってくるのが意味不明
この場合だと tr だろう？

ループの終了判定が1固定なのがだめ。trの数にするべき

**デフォルトの名無しさん** · 2017/09/20(水) 23:59:37.05

訂正。読み間違えた。ここはとりあえずOK。とりあえずだが

> document.getElementsByNameで table を取ってくるのが意味不明
> この場合だと tr だろう？

**デフォルトの名無しさん** · 2017/09/21(木) 00:21:05.95

id = "line1" とか id を付ける理由がわからん。
サンプルコードなら余計なものは消すべし

tableは複数変えてくるのであれば、
tablesとかいう変数にする。
が、そもそも変数名が適切じゃない。
とりあえずfield（fields）に解明する

.parentNodeじゃなくて、.parentNode.parentNode

でここまでは序の口

**デフォルトの名無しさん** · 2017/09/21(木) 01:12:09.67

ここまでの途中結果
https://jsfiddle.net/52qcoLt7/3/

resultB と resultW の２つを一つのループで計算してるから
処理がわかりづらくなってる。
別々に計算する。そのための関数を作る
https://jsfiddle.net/52qcoLt7/4/

細か不要なところを削る
https://jsfiddle.net/52qcoLt7/5/

これ以上短くするにはjQueryがないと逆に面倒なのでjQuery化
https://jsfiddle.net/52qcoLt7/6/

sum関数を使って少しわかりやすくする
https://jsfiddle.net/52qcoLt7/7/

sum関数などというものを自分で作るよりlodash使ったほうがいいや
https://jsfiddle.net/52qcoLt7/8/

ES6のアロー関数を使う
https://jsfiddle.net/52qcoLt7/9/

もう関数の中にまとめちゃえ
https://jsfiddle.net/52qcoLt7/10/

見づらくなったので修正
https://jsfiddle.net/52qcoLt7/11/

**デフォルトの名無しさん** · 2017/09/21(木) 01:16:29.67

修正後
$(document).on('blur', '[name="input"]', function() {
　const toInt = el => parseInt(el.value);
　const getValues = selector => $(selector).find('[name="input"]').get().map(toInt);
　$('#resultB').text(_.sum(getValues('.classB')));
　$('#resultW').text(_.sum(getValues('.classW')));
});

<table border="1">
　<tr class="classB">
　　<td><input type="text" name="input" value="0"></td>
　</tr>
　<tr class="classW">
　　<td><input type="text" name="input" value="0"></td>
　</tr>
</table>
<table id="result" border="1">
　<tr>
　　<td id="resultB"></td>
　　<td id="resultW"></td>
　</tr>
</table>

.classB {
background-color: #000000;
}
.classW {
background-color: #ffffff;
}
#result {
width: 30px;
}

**>>165** · 2017/09/21(木) 21:43:40.32

>>168
ご回答ありがとうございます。
無事解決しました！

結果vbaで作り直すことになりましたが……
今回のことも一つの経験として、次につなげたいと思います。

**デフォルトの名無しさん** · 2017/09/26(火) 17:15:57.30

・「DOM要素」「JavaScriptオブジェクト」
　「文字列」ってどういうふうに認識を分ければいいですか、
・どういうときに、「DOM要素」をいじり、
・どういううときに「JavaScriptオブジェクト」で処理し
・どういうときに「文字列」として扱うべきなのか教えてください。

**デフォルトの名無しさん** · 2017/09/26(火) 17:18:46.94

・具体例

> $0
<div class="guide">
<a 略> </a>"
｜"<a 略> </a>"
｜"<a 略> </a>"
｜"<a </a>
</div>

------------------------------------------------------------------------------

> dir($0)
VM22805:1 div.guide
accessKey: ""
align: ""
assignedSlot: nullattributes:
NamedNodeMap {0: class, length: 1}
baseURI: "https://www.2ch.net/";childElementCount: 4
childNodes: (9) [text, a, text, a, text, a, text, a, text]
....

------------------------------------------------------------------------------

> $0.innerHTML
"
<a 略> </a>"
｜"<a 略> </a>"
｜"<a 略> </a>"
｜"<a </a>
"

**デフォルトの名無しさん** · 2017/09/27(水) 12:23:59.68

山田祥寛(よしひろ)、翔泳社
10日でおぼえる jQuery 入門教室第2版

この本を読め

**デフォルトの名無しさん** · 2017/10/04(水) 18:54:10.62

http://www.myu.ac.jp/~akizuki/sct/js/picture/pc_size.htmlみたいに
入力して指定した要素(div等)の大きさをリアルタイムに変えられるようにしたいけど、コードうまくできない
Chromeとかのデベロッパーツールを使えばいいじゃんと言われるオチだけど、cssとか詳しくない人に入力してチェックしてもらうためなので
ググっても関係ない情報ばかり引っかかるお

**デフォルトの名無しさん** · 2017/10/04(水) 18:57:08.16

愚痴だけならよそでやってくれ

**デフォルトの名無しさん** · 2017/10/04(水) 20:37:27.97

>>177
一行目から行くぞ。
今時DOCTYPEを使わないのはありえない
META HTTP-EQUIVが大文字だったり小文字だったり、意味もわからずコピペしている証拠
今時Shift_JISとかありえない
languageは古い属性いまどき使わない
関数の中の変数にvar（もしくはletやconst）がない
evalは使うな
; の前にスペースはいらない
document.size.value_xなんて参照はいまどきしないgetElement○○を使え
bgcolorなどの物理属性は使うなcssを使え
centerなどのタグも使うな
brは連続して使うな
tableじゃない場所にtableを使うな
20年ぐらい前に素人が書いたコードにしか見えない

**デフォルトの名無しさん** · 2017/10/04(水) 22:11:21.81

概ね同意だが……br連続って駄目なん？

**デフォルトの名無しさん** · 2017/10/04(水) 23:54:58.26

jqplotで凡例の項目の一部をデフォルトfalseにしたいのですが
どのようにすればできるでしょうか?

例えば以下のサンプルサイト様の凡例「花子」を
初期起動時にはデフォルトでfalseにするイメージです
http://alphasis.info/2012/04/jquery-plugin-jqplot-line_charts-legend-numberrows/

よろしくお願いします

**デフォルトの名無しさん** · 2017/10/05(木) 01:58:15.39

web制作管理板の、jQuery スレに、書き込んだ方が良さそう

**183** · 2017/10/05(木) 06:42:50.41

すみません、自分一人ではどうしても解決できないことが有ってご質問させていただきます。

【やりたいこと】
任意の数の制御点（0=≦x =<511、0=< y =<1000）を格納した配列を基に、三次Bsplin補完を実行し、
生成された曲線の座標からx=0からx=511までをインデックスとして、y座標を出力したいのです。

任意の数の制御点を生成して、昇順に並べる関数は作りました。
また、Bsplin補完を実際に生成する関数もネットから拾ってきて既に出来ているものがあります。

次にコードを載せます。

**183** · 2017/10/05(木) 06:51:04.01

function interpolation(top_elements){

var sp = new Spline();
sp.init(top_elements);

var t = variation;/* any value as parameter */ ;
var val = sp.culc(t);

}

このようなものです。top_elementsは私が作った[x,y]を任意個格納した二次元配列です。
Spline()がBspline補完をする、外部から拝借した関数になります。

tの値を変えたりして何度かやっているのですが、曲線を生成した、ということは、
xもｙも連続的なはずですよね？ｘが512個のインデックスだとしたら、それに対応するｙは
当然滑らかにはならないでしょうが、それでもいきなり飛び出た値が出るとか、そういったことはないと思います。

今のままだと、ほとんどxの値に対してランダムというか、作っている人間には突飛な値ばかり出力されてしまいます。
ようするに滑らかな曲線にならないのです。

どなたかご教授お願いします・・・Spline関数に間違いはないと思います。

**183** · 2017/10/05(木) 07:23:50.95

補遺：二次元配列top_elementsは、xの昇順になっています。

**デフォルトの名無しさん** · 2017/10/05(木) 15:39:58.45

アルゴリズム調べて自分で書けよ
十数行で書けるんだからさ

**デフォルトの名無しさん** · 2017/10/05(木) 18:06:29.65

>>182
jquery寄りの投稿でした
出直してきます

**183** · 2017/10/05(木) 18:50:12.30

>>186

そうします。
そもそもスプライン補完とスプライン曲線を混同していました。
制御点の間を結ぶのがスプライン補完なんですね・・・

勉強不足で失礼しました。

**デフォルトの名無しさん** · 2017/10/05(木) 21:37:12.37

学校の宿題は自分でやってください

**デフォルトの名無しさん** · 2017/10/05(木) 21:48:37.53

先生です。見てますよ。

**デフォルトの名無しさん** · 2017/10/05(木) 22:47:29.02

別に宿題でも良いんだが
この手のアルゴリズムはちょっと調べたらCやJavaなんかでの実装が山ほど見つかるじゃん
コピペ手直しならまだ宿題やったってことで良いと思うけど
そこまで人にさせるのはちょっとね

**デフォルトの名無しさん** · 2017/10/06(金) 00:12:32.57

すみません質問なのですが
HTMLファイルを IE11 でローカルで開いて遊ぶゲームの制作中で
データを保存する機能の部分でエラーが出ます。

Chromeだと問題ないのですがIE11だと動きません。
（未定義または NULL 参照のプロパティ 'setItem' は取得できません）

var storage = localStorage;
storage.setItem("item1", "soda");
console.log(storage.getItem("item1"));

IE11の仕様でローカル書込できない場合
何か回避方法はありますでしょうか。

**デフォルトの名無しさん** · 2017/10/06(金) 00:37:43.35

ローカルで開いてもらうんなら
そもそもElectronとか使って配布すれば良いじゃない

**デフォルトの名無しさん** · 2017/10/06(金) 01:37:47.85

jagarikin

スーパー鳥スロット
http://jsdo.it/jagarikin/EjpL

これを参照。
ソースコード中を「Storage」で検索して、研究しろ

**デフォルトの名無しさん** · 2017/10/10(火) 15:40:09.98

次々にDOMの内容が時間とともに書き換わるホームページで
特定の要素が開いたときにすでに存在しているか、これから存在するか、
の２パターンのうち、存在するまで待って何かするにはどうすればいいですか。
やったことはタイマーで３秒くらい待ってから調べる方法ですが
低スペックのパソコンだと時間がズレるのでつかえませんでした。

**デフォルトの名無しさん** · 2017/10/10(火) 19:16:14.99

ハックならsetTimeoutで十分でしょ
きっちりやりたいのならMutationObserverでも試してみたら？

**192** · 2017/10/10(火) 23:39:33.60

>>193
>>194
助言ありがとうございます。
これらを試してみます。

**デフォルトの名無しさん** · 2017/10/11(水) 00:31:33.94

スマホのwebアプリを作ってるのですが、beforeunloadのようにホーム画面に戻った時や
強制終了した時に発火するイベントはありますか？
iOSとandroidの両方に対応させたいです。
宜しくお願い致します。

**デフォルトの名無しさん** · 2017/10/11(水) 07:25:31.32

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

**デフォルトの名無しさん** · 2017/10/12(木) 00:26:26.49

phantomJS使って画面キャプチャして保存してるんですが
どうしても画像が保存されません…
htmlを出力してみるとアクセスは出来てるみたいなんですが。
コードは以下です。
var page = require('webpage').create();
page.open('http://yahoo.co.jp', function(status) {
console.log("Status: " + status);
if(status === "success") {
page.render('example.png');
}
phantom.exit();
});

**デフォルトの名無しさん** · 2017/10/12(木) 00:31:54.06

http://www.ugtop.com/spill.shtml
ここ見るとMIMEタイプが以下になってるのが原因でしょうか？
普通のブラウザでアクセスするのと比較するとこれくらいしか違いがないので。
[phantomJS]
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
[Chrome]
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

**デフォルトの名無しさん** · 2017/10/12(木) 00:56:54.00

>page.render('example.png');

render は、画面を保存する関数なのか？

**デフォルトの名無しさん** · 2017/10/12(木) 01:39:40.89

>>202
ここ見てやったんですが、保存までやってくれるんじゃないんですかね？
ttps://qiita.com/makoto1007/items/a54ff3ded2114a0d5433

**デフォルトの名無しさん** · 2017/10/12(木) 03:24:44.94

1行ずつ、デバッグ実行して、エラーメッセージを取得して、そのメッセージで検索する

ファイルI/O 関連のエラーなら、ブラウザが対応していないとか、
フォルダが無いとか、書き込みできないとか、アクセス権限とか、色々ある

まず、どの原因か、エラーメッセージを取得して、解明する

Linux なら、strace のような、
OS のAPI の呼び出しをチェックするような、コマンドがあって、
どのAPIでエラーが起こっているのか、わかるけど

**デフォルトの名無しさん** · 2017/10/13(金) 13:57:58.99

function Hoge() {
}
Hoge.piyo = 123;
var hoge = new Hoge();

とかした場合にhogeからHoge.piyoにアクセスする方法はある？

**デフォルトの名無しさん** · 2017/10/13(金) 14:54:34.78

hoge.constructor.piyo

**デフォルトの名無しさん** · 2017/10/13(金) 23:41:18.31

関数をコンストラクタにして、インスタンスを作りたいのか？

var A = function(x) {
this.y = x;
}

var aa = new A(3);
var bb = new A('a');

console.log(aa, bb);

**デフォルトの名無しさん** · 2017/10/14(土) 09:16:31.69

これとは意図が違うの？
function Hoge() {
}
Hoge.prototype.piyo = 123;
var hoge = new Hoge();
console.log(hoge.piyo);

**デフォルトの名無しさん** · 2017/10/14(土) 11:14:33.00

インスタンスの意味がわからないのなら、
オブジェクト指向を知らないという事だから、JavaScript は無理

JS は、prototype と言って、普通のオブジェクト指向じゃないから、さらにややこしい

まずこの本で、普通のオブジェクト指向を学ぶ。
スッキリわかる Java入門第2版、2014

それから、JSのprototype を学ぶ

**デフォルトの名無しさん** · 2017/10/14(土) 12:52:58.47

いきなりprototypeでいいんじゃないかな。
たしかにjsのprototypeは分かりにくいけどクラス使う言語からやってくると、もっとわかんなくなりそう

**デフォルトの名無しさん** · 2017/10/14(土) 13:33:10.91

JavaScriptでもclassからやったほうがいいんじゃないかな？
classほうがわかりやすいし。それからprototypeでも遅くはないよ。
そもそもprototypeって普段から意識して使ったこと無いしね
内部実装よりも言語仕様の方が重要

**デフォルトの名無しさん** · 2017/10/14(土) 17:00:10.76

分かりにくいのはprototypeプロパティの意義であって
それはプロトタイプベースの本質ともオブジェクト指向の本質とも関係はなく
ただのJSのチンケな旧クラスシステムということでしかない

学習としては__proto__を使って素直で本質的なプロトタイプベースOOPを覚えるか
class構文を使ってよりまともな新クラスシステムに慣れる形が良い

**デフォルトの名無しさん** · 2017/10/14(土) 22:49:28.49

>>206
できたわサンクス

**デフォルトの名無しさん** · 2017/10/15(日) 01:15:59.00

class {
プロパティ
メソッド
}

普通の言語で、これで済む所を、JS では自分で実装していかないといけない

メソッドは、__proto__ で、親クラスへつなげて行くとか、
実行環境を作る人と、同じ技術を学ばなければならない。
こんなのは、インタープリタを作る人の話

オブジェクト指向をわかっていない奴だと、
.constructor, .prototype とか、何もわからずに使うだけ

**デフォルトの名無しさん** · 2017/10/15(日) 05:30:29.29

それはちょっと違うかな
物は言いようでクラスに縛られること無くOOPが出来るというのはプロトタイプベースのメリットだけど、
だから自作しないといけないというわけではなくてプロトタイプベースに標準のクラスシステムがあっても何も矛盾しない

というかJSはES5までプロトタイプの設定ができなくて
予め用意された貧弱なクラスシステムを使わざるを得ないといけないということが問題で、
むしろ変わったクラスベース言語と言っても良いくらいだった
.constructor, .prototypeもオブジェクト指向の本質とは何の関係もない、ただJSのクラスシステムの癖なだけ

というか元々JSは手続き型チックに使うことを想定された簡潔なDOM操作スクリプト言語として作られたのであって
それに一応OOPもできますよと言うことでnew演算子を取ってつけただけ
プロトタイプベースなのも、崇高な目的があるわけじゃなくて
OOPが最低限できる素朴な仕組みを用意できれば良かったから

**デフォルトの名無しさん** · 2017/10/16(月) 11:07:06.61

なんでもありの言語にお堅い規約やらなんやらを詰め込もうとするから無理がでてくる

**デフォルトの名無しさん** · 2017/10/16(月) 11:28:22.60

まあ単に素朴なだけだけどね
鋼の様な硬い制限は言語のメリットを殺すだけで良くないが、一方で柔軟さ活かせばゴムの様に「矯正力」を発揮させる事ができる
固い考え方に於いての問題を問題として弾くのではなく、問題を飲み込み問題では無くす事ができる
その様にJSらしいプログラミング思想を受け入れることがJS克服の鍵

**デフォルトの名無しさん** · 2017/10/16(月) 21:47:15.44

jsは凄くやらかい言語だよね。欲を言えばマクロが欲しいけど、現状でも割と何でも出来る

**デフォルトの名無しさん** · 2017/10/17(火) 01:16:06.64

マクロはsweet.js型のが検討された事があるがまだまだデコレータとか先に検討すべき機能はたくさんあるし
Object.observeみたいにその時の流行りと勢いで大胆な機能を入れると、後悔することが教訓になっているので慎重にもなるだろう

今は立案から策定までのペースが早くて１０年後もその機能があって良いのかを考えにくくなってる
慎重で優秀なメンバーがいるおかげか高Stageでギリギリ落とされるものもチラホラ
その時は不満でも１年くらいして落ち着いて考えてみるとやっぱり入れ無くて良かったのかなと思える

**デフォルトの名無しさん** · 2017/10/17(火) 08:50:09.14

そういえば末尾最適化が来てたっけChromeに
あれアロー関数かつ三項演算子でも使えるんかね。今度実験してみよ

**デフォルトの名無しさん** · 2017/10/17(火) 23:45:33.60

すみません洋書でも知ってたら教えて頂きたいのですが、
jqueryをネイティブのJSに書き直す方法を網羅した
リファレンス本や虎巻、早見表等の書籍がありましたら
教えて下さい。

**デフォルトの名無しさん** · 2017/10/18(水) 00:40:19.37

>>221
不完全なのならネットにいくらでもあると思う。
でも網羅してるのはないだろうね。
例えば、onの二番目の引数にselectorを使用した書き方（旧delegate）とか
置き換える方法が書いてあるの見たことない。
http://js.studio-kingdom.com/jquery/events/delegate

網羅しているのがあれば、jQueryがどれだけ複雑な処理を
簡単にかけるかってのがよく分かるんだけどな。

この際だからネイティブのJSに置き換えるんじゃなくて
ReactとかAngularに置き換えたら？
はっきり言って他のフレームワークに置き換える意味はあるけど
jQueryをネイティブのJSに置き換える意味は殆どないよ

**デフォルトの名無しさん** · 2017/10/18(水) 01:18:00.87

jQuery は、タグにイベントハンドラーを付けて、

そのタグの先祖のタグを削除しても、メモリリークをしないほど、すごい！

**デフォルトの名無しさん** · 2017/10/18(水) 10:01:32.88

jQueryをどう使ってるかによるんじゃない？
Promise、Animation、Fetchなんかは置き換えできるよね
でも一番地味な要素の取得・操作やイベント周りは結局ラッパーを書くことになると思うよ

そこだけjQuery使うというのも大有りだけど、もしasync-awaitを広範囲に使っているのなら
組み合わせが難しくなるので完全に外すことを検討して良いと思う

awaitとイベントを柔和させるためにはasync-iteratorやObservableが必要だけど、まだ実装されてないからね
まあwhile(await)を使って工夫すればなんとかそれっぽく書けるんだけど、
今はまだObservable系のフレームワーク使った方が良いかもね

**デフォルトの名無しさん** · 2017/10/18(水) 21:29:42.35

jQueryのAjaxは、Fetchには置き換えられないよ。
Fetchは仕様のレベルでJavaScriptのXMLHttpRequestの機能の
一部しかサポートされていない。今新しい仕様策定中

Promise（Deffered）は仕様が少し違うけど、
これ実質Ajaxぐらいしか使ってないので、Fetchが置き換えれないのなら
Promiseに置き換える作業も発生しない。

Animationは置き換えは置き換えでもJavaScriptではなくCSSに置き換えだね

jQueryを使ったコードがたくさんあるなら、比較的最近のブラウザでしか
動かないasync-awaitを使っていることはないだろう

将来はasync-iteratorやObservableに変わるということは
今JavaScriptネイティブの古き良きaddEventListenerに変更する意味はあるのだろうか？
あと数年ブラウザネイティブでasync-iteratorやObservableがサポートされるまで
jQueryのままで良いんじゃね？どうせまた変えなきゃいけなくなるし。
コードは少ないほうが置き換える手間も少なくなるよ

**デフォルトの名無しさん** · 2017/10/18(水) 21:42:54.57

Fetchで置き換えられない具体的で有意義な例を出して欲しい
例えばキャンセルは出来るという議論前出てたよね

**デフォルトの名無しさん** · 2017/10/18(水) 21:43:41.72

進捗状況は取得できないって結論出てたよね？

**デフォルトの名無しさん** · 2017/10/18(水) 21:49:34.17

キャンセルに対応しているブラウザないみたいだし
https://developer.mozilla.org/en-US/docs/Web/API/AbortController

**221** · 2017/10/18(水) 23:24:44.84

皆さんご助言ありがとうございます。
ReactとかAngularも検討してみます。
ネイティブの実装方法知らなくても
結果が同じなら書き換えなくていいかもです。
どうもありがとうございます。

**デフォルトの名無しさん** · 2017/10/19(木) 02:13:50.99

>>224は脱jQueryの指針を表したつもりで
jQueryのそれと全く同じ使い勝手のものが標準にあると言う気もないけど
そもそもjQueryの機能を完全にカバーできるかで考えるのも変だと思うけどな

因みにキャンセルや進歩状況はbody使えばできるんでなかったか?

**デフォルトの名無しさん** · 2017/10/19(木) 08:00:15.95

調べてみた
キャンセル：
res = await fetch(''); reader = res.body.getReader(); reader.cancel(); OR res.body.cancel()
ダウンロードプログレス：
res = await fetch(''); reader = res.body.getReader(); ......
アップロードプログレス：
（できない）

ただし注意点としてプログレスは勿論キャンセルも実質、最初からReadableStreamで取って行ってるときでないと使えない
つまり、req.text()と先にしておいて、後でそれを予想外に長引いているからとreq.body.cancel()などキャンセルしようということはできない
まあプログレスやキャンセルが必要なのって大きいファイルの取得のときでしょ、
それで大きいファイル取得するときは最初からblobチャンク取っていく形で良いでしょ、ってことなのかもしれないが
一応素晴らしい解決方法もある

Response、body、ReadableStreamが再利用不可なのが問題なので、新しく作ってバイパスしてやればいい
つまり、ストリームに割り込むという考え方が必要
res = await fetch(''); reader = req.body.getReader();
res2 = new Response( new ReadableStream({...readerから読み込む...}), {...ヘッダを複製...}); ←キャンセルしたりプログレスが取れる
text = await res2.text()

**デフォルトの名無しさん** · 2017/10/19(木) 08:22:28.68

あーでもアップロードプログレスはできないって情報あったけど
よく考えたらrequest bodyにストリーム使えるわけだから出来そうだな

2017/10/22(日) 09:36:57.74

JavaScriptの配列で中身はあるのにforinがまわらない、chromeの開発ツールで見ると1行目の［］の中身がなくて、>でオブジェクト開くと中身があるみたいな状態なんだけど、どなたか経験あります？
説明が難しくて伝わらなかったらごめん