2ちゃんねる スマホ用 ■掲示板に戻る■ 全部 1- 最新50    

■ このスレッドは過去ログ倉庫に格納されています

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

1 :Name_Not_Found:2017/11/21(火) 21:58:33.01 ID:???.net
JavaScript を自ら学ぶ人のための質問スレッドです。
次スレは>>950が(本スレで改善案があれば考慮して)立ててください

■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。

■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)

■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【条件】期待する回答の条件を書いてください。(ex: jQuery不可, フレームワーク不可)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
 1レスに収まらないならコード投稿サイトを利用してください。
 http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/

■回答者へ
・回答には多様性があります。他人の回答を尊重してください
・動作ブラウザや環境が限られる場合は、それを明記してください
・他人の回答を批判する代わりに、自分ならこう書くという例を示してください
・質問者がJavaScriptでなければ実現できないと勘違いしてるなら、その否定としてHTMLとCSSで実装しても良い
・他人の回答を見たくないのであれば、文句をつける代わりにNGにして見えないようにしてください。文句をつける=荒らしです

2 :Name_Not_Found:2017/11/21(火) 21:59:12.78 ID:???.net
■FAQ
http://fiddle.jshell.net/vSqKr/44/show/light/

◆開発者ツール(Developer Tools)の基本的な使い方 (全部はhttp://fiddle.jshell.net/vSqKr/44/show/light/#Browser-Developer-Tools )
 ▼諸注意
  - 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
  - Edge- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません)
  - Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。
  https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html
 ▼要素を検証
 1. ページ上で右クリックして [要素を検証]
 2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す)
 3. 右側のサイドバーから知りたいステータス名のタブを選択する
   - [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される)
   - [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される)
   - [Properties] タブ … 選択したDOMノードのプロパティを表示
 ▼コンソール
 1. JavaScript コード上で console.log('Hello, World!'); と入力
 2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く
 3. [Console] パネルに "Hello, World!" と表示される
 (※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。)

3 :Name_Not_Found:2017/11/21(火) 21:59:43.39 ID:???.net
■FAQ(続き)
◆JavaScriptの実行速度
JavaScriptの速度は「ブラウザ名」「ブラウザのバージョン」「PCスペック」に依存します(ブラウザのバージョン毎に最適化具合が異なります)。
速度の疑問解消の為に http://jsperf.com/ にコードをUPしてブラウザ毎に速度計測する事を推奨します。
例外として、仕様における理論上の速度が明確になっている場合があります。
例えば、正規表現によるマッチング処理を考えた場合、「RegExp#test > RegExp#exec > String#match」は ES5 仕様で保証されています。
ES5 仕様において RegExp#test が最も処理数が少なく、String#match が最も処理数が多いことが明確だからです。
ブラウザによっては RegExp#test の最適化が十分でなく、String#match の最適化が RegExp#test より十分であれば逆転する可能性はありますが、各メソッドの最適化が一律であればこの前提が崩れる事はありません。

■各種仕様 ( http://fiddle.jshell.net/vSqKr/44/show/light/#Link も参照 )
◆ Standard ECMA-262
http://bclary.com/2004/11/07/ (ECMAScript 3 HTML版)
http://www2u.biglobe.ne.jp/~oz-07ams/2002/ecma262r3/ (ECMAScript 3 和訳)
http://www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版)
http://tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳)
http://www.ecma-international.org/ecma-262/6.0/ (ECMAScript 6 / ECMAScript 2015)
http://kangax.github.io/compat-table/es5/ (ECMAScript 5 compatibility table)
http://kangax.github.io/compat-table/es6/ (ECMAScript 6 compatibility table)
◆ HTML Standard (HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/
http://momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳)
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳)

4 :Name_Not_Found:2017/11/21(火) 22:00:08.82 ID:???.net
■各種仕様 (続き)
◆ Document Object Model (DOM) / CSS Object Model (CSSOM)
http://www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html (DOM Standard (DOM4) 和訳)
http://www.w3.org/TR/DOM-Level-3-Events/ (DOM3 Events)
http://www.w3.org/TR/uievents/ (UI Events)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html (CSSOM 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html (CSSOM View Module 和訳)
◆ その他のWeb関連仕様
http://domparsing.spec.whatwg.org/ (DOM Parsing and Serialization - innerHTML等)
http://www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html (XMLHttpRequest 和訳)
http://www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html (File API 和訳)
http://www.whatwg.org/specs/ (WHATWGの仕様一覧)
◆ MDN (Netscape/Mozilla)
https://developer.mozilla.org/ja/docs
◆ MSDN Library
https://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API)
http://msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript)
http://msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript)
http://msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML)
◆ JavaScript Garden (ja)
http://bonsaiden.github.com/JavaScript-Garden/ja/
◆ JSON (JavaScript Object Notation)
http://www.json.org/json-ja.html

5 :Name_Not_Found:2017/11/21(火) 22:06:20.25 ID:???.net
>>1
いいね! 乙

6 :Name_Not_Found:2017/11/22(水) 00:24:20.79 ID:???.net
http://www.hcn.zaq.ne.jp/___/WEB/
だいぶ前からリンク切れ

7 :Name_Not_Found:2017/11/22(水) 01:51:46.08 ID:???.net
>>1
ライブラリ禁止の条項をなくした、という事はいつもの人か

8 :Name_Not_Found:2017/11/22(水) 02:09:04.06 ID:???.net
ライブラリ禁止をなくせば問題は全て解決する

9 :Name_Not_Found:2017/11/22(水) 02:11:24.02 ID:???.net
ライブラリ禁止は質問者やほかの人のためになるかどうかじゃなくて
アンチが荒らす免罪符とてしか使われてないからな

10 :Name_Not_Found:2017/11/22(水) 08:06:26.11 ID:???.net
だからテンプレリンクあまりに多すぎだって
こんな沢山のリンク読む人はいない
MSDNだってMDNに統合されるし、リファレンスはMDNだけで十分
WHATWGとかW3CはMDNを読んでもっと詳しく知りたいと思った人が勝手にたどり着く
ES仕様もしかり、ここで紹介しても仕方がない

11 :Name_Not_Found:2017/11/23(木) 10:24:10.82 ID:???.net
>>10
次はちゃんと吟味して更新しておくよ

12 :Name_Not_Found:2017/11/23(木) 15:02:08.95 ID:???.net
テンプレが無駄に多いのは100スレ続く伝統
技術者のクセ

13 :Name_Not_Found:2017/11/23(木) 20:29:10.91 ID:???.net
「伝統」は本当にそれでいいのかを常に見直し更新していくのがプログラマのさだめ
「ずっとこうだから」と言った時点でその人はただのコーダー

14 :Name_Not_Found:2017/11/24(金) 00:22:28.46 ID:???.net
node.jsの勉強にいいサイトありませんか?

15 :Name_Not_Found:2017/11/24(金) 00:55:02.41 ID:???.net
Node.jsで何がしたいの?

16 :Name_Not_Found:2017/11/24(金) 00:56:13.28 ID:???.net
Node.jsでどんなことができるの?

17 :Name_Not_Found:2017/11/24(金) 01:29:49.36 ID:???.net
前スレに書きましたが、chromeのローカルストレージの実装がLevelDBなので
LevelDBのデータファイルの中身を
node.jsで見ようと思ったのです

18 :Name_Not_Found:2017/11/24(金) 03:16:54.45 ID:qZ01KuDr.net
おまえら大先生なんだから
本質的にJSというよりライブラリの話だなってわかった時点で誘導してあげればいいじゃん?
そんなにけんけんしないで

19 :Name_Not_Found:2017/11/24(金) 03:52:21.64 ID:???.net
殆どがライブラリでも解決できる話題なのでここでやる方がいい
誘導が多い=ここでやるべき話題ってことだ

20 :Name_Not_Found:2017/11/24(金) 09:01:08.60 ID:???.net
質問者がライブラリの話を始めるのが問題なんじゃなくて
ライブラリ使わずとも数行で実現できることであっても
頑なにライブラリを勧めようとする回答者がいることが問題

21 :Name_Not_Found:2017/11/24(金) 09:50:31.51 ID:???.net
いろんな回答があって良いのだからライブラリを使った回答でも良い
その人がライブラリを使わない回答を書く義務もない

ライブラリを使わない回答は他の誰かがやればいい
それをやらないで頑なにライブラリを使った回答をするなと
言うやつが問題

ライブラリを使うなというのではなく、
ライブラリを使わない回答を書け

そうすれば荒れることはない

22 :Name_Not_Found:2017/11/24(金) 10:16:13.72 ID:qZ01KuDr.net
>>20
それなー
わかるんだけど、初心者とかだと特にjQuery使うだろうから
ピュアJSで教えたら、教えた部分だけ浮いちゃったりするんじゃないかなー
とも思う

>>21がごもっともだと思う
こうも書けるよ!って言うだけで良いのだろうなと

23 :Name_Not_Found:2017/11/24(金) 10:43:35.24 ID:???.net
自分で関数を作ってもある意味ライブラリ

24 :Name_Not_Found:2017/11/24(金) 13:02:29.64 ID:???.net
>>14-17
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017

この本では、データアクセス(CRUD)は、Flux の、Store という部分で、
UI とは完全に分離させている

nmp の、immutable パッケージで、データを変更不能にしたり

25 :Name_Not_Found:2017/11/24(金) 13:16:13.20 ID:???.net
>>23
00年代前半にオレオレライブラリを作ってた記憶が…うっ、頭が

26 :Name_Not_Found:2017/11/24(金) 13:59:17.25 ID:???.net
初心者だとjQueryを使うっていう考えに違和感

27 :Name_Not_Found:2017/11/27(月) 15:17:03.43 ID:???.net
■テンプレ案
http://fiddle.jshell.net/fH4cC/174/show/light/

■諸注意
vol.115でlodashを不必要に推奨して啓蒙する行為が多く確認されており、ライブラリ系の話題はvol.116から禁止されました。
vol.115,116ではライブラリ禁止する発言が見られた直後にライブラリを許可する意図で次スレを立てる行為が確認されています。
本スレッドでライブラリ許可を求める発言が確認された場合は不要な争いを避ける為、スルーすることを推奨します。
ライブラリの話題はライブラリスレへ誘導し、誘導行為への反論はスルーしてください。

28 :Name_Not_Found:2017/11/27(月) 22:07:10.95 ID:???.net
JavaScriptでたまに
{ ...abc, }
みたいなの見ますが「...」って何なんでしょうか?

29 :Name_Not_Found:2017/11/27(月) 22:45:27.59 ID:???.net
>>27
伝統あるテンプレをvol.116から勝手に変えないでください
いい加減怒りますよ?

勝手に変えて良いのであれば、vol.131からライブラリは解禁になりました。
スレの住民の意見をちゃんと取り入れましょう

30 :Name_Not_Found:2017/11/27(月) 22:48:15.24 ID:???.net
>>28
これ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator

>>1より
> ・動作ブラウザや環境が限られる場合は、それを明記してください
ということなので書くと

比較的最近使えるようになった。リンク先にも書いてあるが
IEではサポートされていない(Edge12から使える)

Chrome、Firefox、Safariも古いやつは使えないが
これらの古いやつはシェア低いので無視していいだろう

31 :29 = 30:2017/11/27(月) 22:48:53.48 ID:???.net
もう一つ、IEに対応する必要があるのであれば
babelやtypescriptを使って変換するという手もある

32 :Name_Not_Found:2017/11/27(月) 22:54:36.34 ID:???.net
>>30
スプレッド演算子とかいうやつですか。
調べてみます。ありがとうございます。

33 :Name_Not_Found:2017/11/27(月) 22:54:56.09 ID:???.net
スプレッド演算子知らなかった
これ、使える?

34 :Name_Not_Found:2017/11/27(月) 23:13:50.26 ID:???.net
ECMA 6 から使える、スプレッド(展開)演算子。
React, JSX でも使える

Babel で、ECMA 5 に変換できる

var attr = {
href: '〜',
target: '_blank',
};

return <a {...attr}>あ</a>

return (
<a href={attr.href} target={attr.target}>あ</a>
);

35 :29:2017/11/27(月) 23:17:10.77 ID:???.net
> これ、使える?

ブラウザが対応しているか?ということなら>>30に書いたとおり

ではなくて、便利か?という意味なら
一度知ってしまえば、有って然るべき機能だと思うようになるよ
以前は変則的な書き方をしていた所をシンプルに書けるようになる

例えば、以前はこんな感じで一瞬「?」となるような書き方が必要だった
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Copy_an_array
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#A_better_way_to_concatenate_arrays

36 :Name_Not_Found:2017/11/27(月) 23:17:31.95 ID:???.net
オブジェクトに関するスプレッド演算子は、以前はlodashなどのライブラリを使わないとやりづらかった
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Spread_in_object_literals

あとこの「...」は関数の引数にも使用できる。正確にはこっちはrest parameterと呼ばれているけどね
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

37 :29:2017/11/27(月) 23:27:08.22 ID:???.net
>>34
こういう書き方も好き
(hrefやtaget変数に入れておいて何らかの処理をすることはよくあるので)

const href = '〜';
const target = '_blank';
const attr = {href, target};

return <a {...attr}>あ</a>

38 :Name_Not_Found:2017/11/28(火) 00:07:55.41 ID:???.net
>>29
テンプレを勝手に書き換えた>>1にもどうぞ文句を入れて下さいよ

39 :Name_Not_Found:2017/11/28(火) 00:51:34.53 ID:???.net
戻しただけなので問題ない

40 :Name_Not_Found:2017/11/28(火) 02:45:01.60 ID:???.net
質問テンプレートとか、テンプレも結構後から改変されてるよね
残してほしいところだけ「前からあった」といい、変えては困る場所だけ「勝手に変えるな」と彼はいう

41 :Name_Not_Found:2017/11/28(火) 03:15:00.28 ID:???.net
>>40
5ちゃんねるに申請でもしてこのスレの公式管理人でもなったら?
でないのであれば、俺とお前は立場は一緒、
俺がスレの民意をまとめてその内容でテンプレにしただけの話

42 :Name_Not_Found:2017/11/28(火) 07:22:51.26 ID:???.net
>>41
>>27のテンプレも当時のスレの民意をまとめて決めたものだけど、なぜその伝統は無視するの?
>>1は事前に話し合ったわけでもなく、彼が独断で決めただけでしょ
話し合いのあった当時と比べるべくもないよ

43 :Name_Not_Found:2017/11/28(火) 07:40:54.97 ID:???.net
テンプレ案にjsfiddleを使い始めたのはvol.97からか
http://fiddle.jshell.net/fH4cC/1/show/light/
ライブラリ禁止はvol.116から続く伝統
ライブラリ荒らしとの言い争いも伝統といえなくもないな

44 :Name_Not_Found:2017/11/28(火) 07:51:59.25 ID:???.net
>>41
> 5ちゃんねるに申請でもしてこのスレの公式管理人でもなったら?
> 俺がスレの民意をまとめてその内容でテンプレにしただけの話
君が>>1なら、>>1のルールを守るのは最低限の礼儀だと思うよ

> ・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)

45 :Name_Not_Found:2017/11/28(火) 10:23:08.52 ID:QIJXvf1S.net
javascript初歩的な質問で申し訳ありません
var string = "1020304";
string,split("0")
を最初に出てきた0だけで分割して[1,20304]にしたいです
どうすればいいんでしょうか?

46 :Name_Not_Found:2017/11/28(火) 14:48:11.95 ID:???.net
>>45
var string = "1020304";
var idx = string.indexOf('0');
var arry = [parseInt(string.substring(0, idx), 10) || null, parseInt(string.substring(idx + 1, string.length), 10) || null];
console.log(arry);

47 :Name_Not_Found:2017/11/28(火) 15:28:54.71 ID:???.net
俺だったらstring,split("0",1)にした後
その結果とその文字数+0を差し引いたものを配列として扱うね

48 :Name_Not_Found:2017/11/28(火) 17:08:12.93 ID:???.net
なんでsplitの2番目の引数指定した時の動作が他の言語と違うんだろうか

49 :Name_Not_Found:2017/11/28(火) 19:14:41.20 ID:???.net
string.split(/0(.*)/,2)

50 :Name_Not_Found:2017/11/28(火) 19:29:37.54 ID:???.net
var string = "1120304"; 場合 >>49だと無理

51 :Name_Not_Found:2017/11/28(火) 20:04:20.45 ID:???.net
>>45
/^([1-9]*)0(\d*$)/.exec(string);

52 :Name_Not_Found:2017/11/28(火) 21:01:34.18 ID:???.net
>>45
事前に string 値が整数文字列である事を保証できるか否かで>>51と使い分ける
var i = string.indexOf('0');
var match = [string.slice(0, i), string.slice(i + 1)];
console.log(match); // ["1", "20304"]

>>46
var string = "100"; で破綻する

53 :Name_Not_Found:2017/11/28(火) 22:19:01.45 ID:???.net
ライブラリ荒らしは、ライブラリを禁止にした奴が荒らしかな?
とにかく、スレを一杯立てた奴が荒らしなんだよ

Undescore から、Lodash へ移行したのは、皆が知ってる常識だから、荒らしじゃない。
今でも、Undescore を使っているのは、Backbone だけ

荒らしは、jQuery, Lodash とか、皆が新しい知識を得るのを、邪魔してくる。
荒らしは食えないから、他人の勉強の邪魔をしてくる

とにかく、JavaScript の情報を書いてない奴が荒らし。
推薦書を書いても、ステマやステマやとか、荒らしは皆の邪魔してくる

とにかく、JavaScript の情報を書いてない奴とは、会話しないように。
そいつは荒らしだから

54 :Name_Not_Found:2017/11/28(火) 22:50:20.27 ID:???.net
>>45
> var string = "1020304";
> 分割して[1,20304]にしたいです
まずstringの文字列の法則と、分割後の array は String なのか、Number なのか
質問に於いての説明が不十分

55 :Name_Not_Found:2017/11/28(火) 22:53:46.60 ID:???.net
Vue.js meet upが応募開始10分で100人満員になってた…
Vue.js人気だねー

56 :Name_Not_Found:2017/11/29(水) 00:31:12.26 ID:???.net
file:///d:\sample.htmlからhttp://localhost/postmethodにajaxでpostすると失敗します。エラーコードは0です。
失敗する原因として、下記が3つ存在することまではたどり着きましたが、試行錯誤のうえ解決に至っていません。
1.サーバがCORSに対応していない。
2.異なるプロトコルにAjaxできない。
3.Chromeのセキュリティポリシー。
他に何か思い当たることはありますか?
やはりfileからhttpにajaxは出来ないのでしょうか?
(そうなるとデバッグが微妙に面倒です)

57 :Name_Not_Found:2017/11/29(水) 02:48:43.74 ID:???.net
0は成功してる可能性もあるぞ

58 :Name_Not_Found:2017/11/29(水) 07:12:15.77 ID:???.net
>>56
クロスドメインかセキュリティポリシーだと思う
hosts触って
http:/exasmple.com
でアクセスした時にローカルを見るようにするといい

具たち的にはこんな感じ
https://qiita.com/nbkn/items/e72b283c54403a30b2e1

59 :Name_Not_Found:2017/11/29(水) 07:14:56.47 ID:???.net
>>56
プロトコルもホスト名もポート番号すら違って、同一オリジンと見なされるわけがない
CORSについて勉強し直すべき

60 :Name_Not_Found:2017/11/29(水) 20:19:58.42 ID:???.net
SPAみたいなアプリを作るんですが、内部の状態を全部保存して、次にアプリを表示したときに
復元するのですが、普通の静的型付け言語ならモデルにメソッド追加したりしても、
大抵は元に簡単に戻せるんですが、JavaScriptではどうすればいいんでしょうか??
JSONじゃなくてもいいんですが、自前でシリアライズ・デシリアライズする処理を
かいてるんでしょうか??

61 :Name_Not_Found:2017/11/29(水) 21:10:01.55 ID:???.net
メソッドごと保存しようというのは正しくない
まず、仮想DOM的なものを設計して、HTMLでもCanvasでもアタッチ出来るくらいのビューを用意する
そしてそのビューに対してこれからどういう変更を加えるか、加えてきたかのアクションチェーンを設計する
実行はアクションチェーンを読み出しつつ各アクションの種類に応じてswichを使ったりして行う
保存はアクションチェーンオブジェクトと仮想DOMオブジェクトをそのままIndexedDBなんかに保存すれば良い
JSONは循環参照を扱えないのでオススメしない、まあ循環参照だけならほぐしてJSON化可能だが
画像なんかのバイナリも別に保存したいこともあろうからIDBがオススメ
1アクション中のアニメーションだったり、もうちょっと工夫が必要だがそれで概ね上手くいく

62 :1/2:2017/11/29(水) 21:24:24.05 ID:???.net
>>60
なんかいろいろずれてる気がするな
web製作板なのだからウェブアプリってことでいいのか?
SPAみたいなアプリを作ると書いているが、あなたが書いている内容は
SPAとは関係ない話になっている。

まず
> 内部の状態を全部保存して、次にアプリを表示したときに復元するのですが、
と書いてあるがウェブの世界ではSPAでなくとも一般的にサーバーにデータを保存し、
ページを表示した時にサーバーからデータを取ってくる。SPAではそれがページ単位ではなく
何かしらのコンポーネント単位になることもよくある

> 普通の静的型付け言語ならモデルにメソッド追加したりしても、
> 大抵は元に簡単に戻せるんですが、
一般的にシリアライズっていうのはデータのみを保存するのだから
モデルへのメソッドを追加に関しては、静的型付け言語かどうかは関係ない

シリアライズが(簡単に)可能かどうかっていうのはクラスのインスタンス変数を
全て取得する方法を言語やライブラリが提供しているかどうかにかかっている
JavaやRubyはそれが可能なので簡単に実現できるが
JavaScriptはではそういったことは完璧にはできないので出来たとしても制限がある
一般的にできないと考えたほうが良い

とはいっても、JavaScriptのobject(配列や連想配列)≒JSONなのでJavaScriptのクラスが
持っているデータをobjectとして管理していれば、比較的簡単にJSON化できる。
なおJSONではなく他のバイナリデータにシリアライズするライブラリも有ったはず

そして「次にアプリを表示したときに復元する」というのはobjectを表現するデータを
JSON形式でもいいし、そうでない形式でも良いが、サーバーに保存することになる
オブジェクト自身を保存するというより、中身のデータを保存するという感じ
まあつまりは自前でシリアライズ・デシリアライズする処理を書くことに相当するわけだが
繰り返すがJSON形式を用いればそれは大したことじゃない

63 :2/2:2017/11/29(水) 21:30:41.02 ID:???.net
そしてSPAとは関係ない話では有るが、SPAを実装する時は
自力で作るのではなく、何らかのフレームワークを使ったほうが良い

残念ながら俺はSPAフレームワークには詳しくないのだが、
SPAを作りやすくする"フレームワーク"として機能で
オブジェクトをシリアライズ・デシリアライズする機能があるかもしれない。

つまりフレームワークが決めたルールに従って作ることで
モデルを簡単にシリアライズしたりデシリアライズできる。
そういう機能があるかないかはしらないが、自力でSPAアプリを作るのは骨が折れるので
SPAアプリを作るというのが本当の目的であれば、
まずSPA対応のフレームワークの使い方を勉強することをおすすめしたい


ちなみになぜ「SPAアプリを作るというのが本当の目的であれば」なんて
わざわざ言ってるのかというと繰り返すが>>60の内容はSPAアプリを
作る時の話とは関係ないから

64 :Name_Not_Found:2017/11/29(水) 21:41:57.38 ID:???.net
>>60ですが、そこまでは書きませんでしたが、実際はReactを使います。で、それと他にRedux使うかMobX使うかとか
どうするか色々調べてるところです。例えば、MobXとか使うと元のオブジェクトがラップしてオーブザーバルになるみたいんです。
React使う前にも他にデータバインディングできるライブラリを調べると、元のオブジェクトをラップしたり
とか何種類か方法があるみたいんですが、そららを使うと
JavaScriptのobject(配列や連想配列)≒JSONじゃなくなるっぽいので、一般的にどうすればいいのかなと
思った次第です。

65 :Name_Not_Found:2017/11/29(水) 21:51:40.81 ID:???.net
漏れもブラウザで、ローカルHTML・JS ファイルから、
jQuery のAjax で、2ch にアクセスしようとしたけど出来なかった

iframe 内になら取得できるけど、外側のHTMLファイルからは、アクセスできない。
内外で、異なるサイトに扱われるから

そこで、ブラウザから、YQL(Yahoo! Query Language)のサービス・サーバーを利用して、
アクセスする方法があった。
jquery.xdomainajax.js も、YQLを使っていたけど、動かなくなった

異なるサイト同士では、直接アクセスできない。
Node.js とか、Node.jsを含んだ、Electron など、
サーバーを立てて、サーバーを介して通信しないといけない

66 :Name_Not_Found:2017/11/29(水) 21:52:12.00 ID:???.net
JavaScript一般的にはシリアライズする方法はないので自力でやる必要がある。
そこら辺をフレームワークがカバーしている(かもしれない)
というのが答かな


もともとJavaScriptはクラスなんてものはなかったから
シリアライズすべき変数はなんや?って話なんだよ。

ローカル変数を使われるとクラス(に相当する関数)の外から見る方法はないし、
関数を値として扱えるから、関数のコードをシリアライズするの?って話まででてくるし

67 :Name_Not_Found:2017/11/29(水) 21:55:27.62 ID:???.net
>>65
YQLなんていずれだめになるだろう
あれは使うべきではない

68 :Name_Not_Found:2017/11/29(水) 22:00:32.30 ID:???.net
入門 React ――コンポーネントベースのWebフロントエンド開発、2015

Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017

Stefanov の本では、Flux を使って、JSON で、localStorage に保存している。
まあ、これは例題だから、実際には、DB を使うのだろう

69 :Name_Not_Found:2017/11/29(水) 22:03:37.19 ID:???.net
怖い例題だな
ブラウザ開発者の機嫌次第で一発でふっとびそう

70 :Name_Not_Found:2017/11/29(水) 22:14:18.15 ID:???.net
>>68
> JSON で、localStorage に保存している。
そこは(どうでも)いいんだよね。
表現形式と保存場所の話だから

シリアライズっていうのはオブジェクト(クラスのインスタンス)を
どうやって保存できる形式に変換するかって話だから

その本ではクラスのインスタンスのシリアライズの話をしてる?

71 :Name_Not_Found:2017/11/29(水) 22:21:05.46 ID:???.net
PWAっぽい

72 :Name_Not_Found:2017/11/29(水) 22:34:24.67 ID:???.net
>>64ですけど、
>>66
>もともとJavaScriptはクラスなんてものはなかったから
>シリアライズすべき変数はなんや?って話なんだよ
ありがとうございます。
いったんクラスというのも忘れて真剣に考えないとダメっぽいですね。

>>68
そうですね。redux使うと、完全にStoreはシンプルになるので、そのまんまシリアライズ・デシリアライズ
できそうなんで、そこは楽そうなんですが、redux自体がactionやらactionCreaters,Reducersやらで・・

73 :Name_Not_Found:2017/11/29(水) 22:43:31.41 ID:???.net
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
https://github.com/stoyan/reactbook

whinepad という名前で、Excel みたいな表を作っている

インスタンスの保存だけど、メソッドは保存しない。
保存するのは、データだけ

74 :Name_Not_Found:2017/11/29(水) 23:12:17.69 ID:???.net
>>53
なんか素で勘違いしてそうだからレスするけど
スレをいっぱい立てまくってたのが件のテンプレ改変した人であり前スレとここの>>1だよ

75 :Name_Not_Found:2017/11/29(水) 23:28:35.87 ID:???.net
スレをいっぱい立てまくっていたのが、荒らしだろ?
それで皆、苦労したんだろ?

このスレは、荒らしが立てたスレか?
まあそれなら、再利用すればよい

とにかく荒らしは、議論させないように、皆の邪魔をする。
jQuery の話をするなとか、Lodash の話もするなとか、DOM の話もするなとか、
荒らしの言う通りやっていたら、スレが細分化されて、議論できなくなる。
そうやって、ここのコミュニティをつぶすつもりだろ

スレを分けるなら、プログラム板のように、
初心者向け・上級者向けに分けるべき

76 :Name_Not_Found:2017/11/29(水) 23:32:17.41 ID:???.net
その話いい加減にしてくれないかな?
いま問題なく進行してるだろうが

77 :Name_Not_Found:2017/11/29(水) 23:46:16.66 ID:???.net
スレ議論スレでも作れば

78 :Name_Not_Found:2017/11/29(水) 23:48:36.69 ID:???.net
>>77
はいどうぞ。そしてその末路も見ていってください。
投票結果見て明らか。議論にすらならない。やるだけ無駄

+ JavaScript の質問用スレッド vol.123 + [無断転載禁止]©2ch.net
http://mevius.2ch.net/test/read.cgi/tech/1491143438/33

33 名前:デフォルトの名無しさん (ワッチョイ 75d1-JAgm [114.169.237.158])[] 投稿日:2017/11/19(日) 16:06:59.97 ID:ANnOsUYp0
投票です。

現在JavaScript関連にはまともなスレがありません。
新しいスレを立てた方がいいと思いますが賛同する方はいますか?

新しいスレの内容の条件

・JavaScriptだけを扱う(AltJSやBabelやTypeScript禁止)
・ブラウザのDOM APIだけを使う(jQueryなどのライブラリやフレームワーク禁止)
・サーバーサイド禁止(nodejsなど禁止)

79 :Name_Not_Found:2017/11/29(水) 23:53:10.48 ID:???.net
>>78
thx
あったんだ、知らなかった・・・

80 :Name_Not_Found:2017/11/30(木) 00:12:37.60 ID:???.net
>新しいスレの内容の条件

>・JavaScriptだけを扱う(AltJSやBabelやTypeScript禁止)
>・ブラウザのDOM APIだけを使う(jQueryなどのライブラリやフレームワーク禁止)
>・サーバーサイド禁止(nodejsなど禁止)

これが、荒らしが作りたいスレだろ?
何も、コミュニティが交流できないように作っている

荒らしの言う通りやっていたら、スレが細分化されて、議論できなくなる

次スレからは、プログラム板のように、
スレを初心者向けと、普通用に分けてくれ

81 :Name_Not_Found:2017/11/30(木) 00:34:22.31 ID:???.net
初心者用と普通用ということであれば話題の内容は一緒だ。
どちらもライブラリの話題も対象となる。

82 :Name_Not_Found:2017/11/30(木) 00:46:22.21 ID:???.net
というと反対してくるんだろうな
結局ライブラリの話題を禁止したいだけ

83 :Name_Not_Found:2017/11/30(木) 00:50:52.17 ID:???.net
初心者用は、主に言語の文法などが、わからない人向け。
普通用は、フレームワーク・ライブラリも含める

プログラム板もそうだし、これで良い

84 :Name_Not_Found:2017/11/30(木) 01:01:54.94 ID:???.net
はいどうぞ
JavaScript 初心者用質問用スレ(ライブラリ禁止)
http://mevius.2ch.net/test/read.cgi/hp/1511971305/

85 :Name_Not_Found:2017/11/30(木) 01:23:35.71 ID:???.net
また、初心者用のスレを勝手に立てて、ライブラリ禁止とか書いてる

こいつがいつもスレを一杯立てる、荒らしじゃないのか?

86 :Name_Not_Found:2017/11/30(木) 01:28:02.36 ID:???.net
初心者専用のスレがほしいって言ったから立ててやっただけだろ
あとは勝手にメンテしろや
俺は最初からいらないって言ってる

87 :Name_Not_Found:2017/11/30(木) 02:50:24.30 ID:???.net
初心者って言ってもどのような初心者かわからないんだから
分けるんなら目的に応じて分けないと駄目でしょ

JavaScript.DOM勉強スレ(ただしライブラリ排除ではなく、あくまでDOMや標準APIから学んでいく事をモットーとした勉強のためのスレ)と
JavaScript解法相談スレ(JSをできるだけ深く学習する事なくライブラリやツールを駆使して簡単に問題を解決する事をモットーとしたスレ)
で分けよう

これまでの質問スレは終了

88 :Name_Not_Found:2017/11/30(木) 06:42:10.12 ID:???.net
ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる

禁止事項を勝手に作って、スレを一杯立ててる、こいつが荒らし

今まで、Lodash厨が荒らしかと思っていたけど、荒らしじゃなかった。
誰が荒らしか、ようやく分かった

89 :Name_Not_Found:2017/11/30(木) 08:27:32.88 ID:???.net
>>87
勝手にスレ作って勝手に保守してろ
ここが嫌ならさっさとでていけ

90 :Name_Not_Found:2017/11/30(木) 20:23:32.06 ID:???.net
ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる

結局、スレのテンプレを勝手に変えて、禁止事項を勝手に作って、
スレを一杯立てている奴が荒らしだな

ライブラリ用スレとか、jQuery用スレとか、
スレを分割して、皆が議論できないようにしたのも、この荒らしか

皆、荒らしと会話しないように。
もし気付かず、荒らしと会話している人がいたら、荒らしと教えてあげて

91 :Name_Not_Found:2017/11/30(木) 20:36:33.57 ID:???.net
テンプレを勝手に変えた>>1も荒らしということだな
>>1を相手にしないように

92 :Name_Not_Found:2017/11/30(木) 21:08:37.84 ID:???.net
既存の配列に他の配列を連結したいのですが、1発でやる方法はないでしょうか?
for (let sourceItem of sourceItems) destItems.push(sourceItem);
現状、ループを回しています。

93 :Name_Not_Found:2017/11/30(木) 21:38:08.27 ID:???.net
新しい配列で良いなら
destItems.concat(sourceItems)

94 :Name_Not_Found:2017/11/30(木) 21:42:26.10 ID:???.net
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。
https://qiita.com/takeharu/items/d75f96f81ff83680013f

指定した位置に一つ以上追加 - splice

非破壊的な結合 - concat
破壊的な結合 - push

95 :Name_Not_Found:2017/11/30(木) 22:02:59.31 ID:???.net
pushにこだわるなら
Array.prototype.push.apply(destItems,sourceItems);
あるいは
destItems.push(...sourceItems);

96 :Name_Not_Found:2017/11/30(木) 22:36:42.10 ID:???.net
既存の配列を書き換えたいのです。要は破壊的結合で。
destItems.push(...sourceItems);
ああ、pushでそんな書き方できたんですか・・
>>28で教えてもらったスプレッド演算子ってやつですね。
ありがとうございます。

97 :Name_Not_Found:2017/12/01(金) 02:33:38.45 ID:???.net
スプレッドって巨大な配列でやろうとするとエラーになるから嫌いなんだよな

98 :Name_Not_Found:2017/12/01(金) 07:29:45.46 ID:???.net
巨大ってどれぐらい?

99 :Name_Not_Found:2017/12/01(金) 08:34:48.80 ID:???.net
配列長の制限値を超えた配列作ろうとすればそりゃエラーになるが
別にスプレッド関係ないわな

100 :Name_Not_Found:2017/12/01(金) 09:38:33.33 ID:X7oqfLY+.net
こんな式を見たのですが、これは何ですか?
var data = ('' == 0 ? '' : '');

101 :Name_Not_Found:2017/12/01(金) 09:46:19.17 ID:???.net
文法エラーです

102 :Name_Not_Found:2017/12/01(金) 09:52:55.80 ID:X7oqfLY+.net
>>101
では、このコードを書いた人はどういう意図で書いたのでしょうか?
JavaScript専門家の方の推理を聞かせて下さい。

103 :Name_Not_Found:2017/12/01(金) 11:35:39.13 ID:???.net
>>102
・あなたか「書いた人」が転記ミスしている
・「書いた人」が文法をよくわかっていない

文法エラーは関わった人に問題がある以外に考えられないので、第三者が推理するのは時間の無駄です。
大抵はあなたか「書いた人」が頭の中のイメージで転記しているだけで転記ミスしているケースが大半です。

104 :103:2017/12/01(金) 11:46:06.60 ID:???.net
>>101を鵜呑みにして書いてしまいましたが、文法エラーはないですね。
>>100

var data = '';

と等価で>>100のように回りくどい書き方をする必要は全くありません。
説明用のコードか、難読化の一環なのか知りませんが、コードの意図は書いた人に聞く以外の方法はないでしょう。

105 :103:2017/12/01(金) 11:48:12.00 ID:???.net
>>104

・あなたが転記ミスをしていないのなら
・「書いた人」が転記ミスしていないのなら

の条件付きの回答です。
その可能性を捨ててはいけないと思います。

106 :Name_Not_Found:2017/12/01(金) 17:40:23.92 ID:???.net
>>98-99
var a = [0]; として Chrome62の場合
a.push(...a); を繰り返すとlengthが131072の時点で Maximum call stack size exceeded
a=a.concat(a); の場合はlengthが33554432の時点で Invalid array length

引数の問題だからスプレッド自体に問題が有るわけではないけどな

107 :Name_Not_Found:2017/12/01(金) 23:36:41.01 ID:???.net
jQueryが必要とされなくなってきたのは,Reactなどの他のフレームワークが登場したせいではなく,標準DOM APIが進歩したおかげです
https://www.ncaq.net/2017/12/02/00/00/01/

またなんか勘違いさんというかw、結論ありきさんというかw

標準DOM APIがいくら進歩したとしても、jQueryにかなわないんだよ。
それは基本的な設計方針の違いのせい

jQueryも標準DOM APIも、どちらもDOM操作をする。
"DOM操作をするならば"、標準DOM APIよりもjQueryの方が優れてるわけで
わざわざjQueryを捨てる理由はない

その一発逆転がありえるのがReactなどのフレームワーク案だよ
"DOM操作をするならば"、jQueryや標準DOM APIが必要
だけど "DOM操作をしないならば"・・・?

そうDOM操作がいらないフレームワークがでてきたから
JavaScriptフレームワーク導入可能な一部の業種においては
jQueryや標準DOM APIがいらなくなってきたという話
DOM操作がいるならば、これからもjQueryが必要だって

108 :Name_Not_Found:2017/12/02(土) 00:00:42.05 ID:???.net
 jQueryをフレームワークにすればと思うけど

109 :Name_Not_Found:2017/12/02(土) 01:01:06.91 ID:???.net
>>100-105
式 ? a : b
3項演算子は、式が真なら a で、偽なら b だろ

var data = ('' == 0 ? '' : '');
式 ? a : a

式が、真でも偽でも、空文字を返すから、この式は無意味。
単に空文字を代入すれば良いだけ

110 :Name_Not_Found:2017/12/02(土) 01:25:47.76 ID:???.net
あー、まだ >>100の答え出てなかったのか?

var data = ('' == 0 ? '' : '');

これは最終的にこう書いてあるってだけ。そう最終的に

これだけじゃわからんのよ。
間違いかもしれないし意味があるかもしれない。

もしかしてソースコードはこうなっているかもしれない

var data = ('<?= $v' ?>' == 0 ? '' : '<?= $v' ?>');


$vに0が入っていれば
var data = ('0' == 0 ? '' : '0');
0なら空文字

var data = ('1' == 0 ? '' : '1');
1(0以外)なら1

var data = ('' == 0 ? '' : '');
空文字でも空文字

0の場合だけ空文字になる

111 :Name_Not_Found:2017/12/02(土) 01:26:42.28 ID:???.net
訂正

var data = ('<?= $v ?>' == 0 ? '' : '<?= $v ?>');

112 :Name_Not_Found:2017/12/02(土) 01:29:18.11 ID:???.net
もちろん、意味があるコードかもしれないとは言うが
無駄かつ良くないコードだとも言う
普通はこんな書き方はしない。
こんな書き方はしないが意味が無いとは言い切れない

113 :Name_Not_Found:2017/12/02(土) 09:12:56.52 ID:???.net
>>112
無駄なコードを意味がないコードと表現してるだけだろ
言葉遊びも程々にしろ

114 :Name_Not_Found:2017/12/02(土) 09:14:30.51 ID:???.net
論理演算の意味がない

115 :Name_Not_Found:2017/12/02(土) 09:22:55.15 ID:???.net
三項演算子を出力する意味がない

116 :Name_Not_Found:2017/12/02(土) 18:16:31.30 ID:???.net
>>113
「0だったら空文字にしたい」という要望があったとしたら
それを正しく実装しているわけで無駄ではないよ

117 :Name_Not_Found:2017/12/03(日) 00:19:35.36 ID:???.net
>>116
それは三項演算子ではなく、ただのif文だろ
それと「無駄かつ良くないコードだとも言う」に言及して反論してるのだが、前言撤回もここまで早いと信頼性ゼロだな

118 :Name_Not_Found:2017/12/03(日) 00:42:59.95 ID:???.net
>>117
少なくともifであることは認めたようだが
あんたにとって三項演算子とifの違いって何?

119 :118:2017/12/03(日) 00:44:06.26 ID:???.net
> var data = ('<?= $v' ?>' == 0 ? '' : '<?= $v' ?>');

これはやってることに意味があるが
無駄かつ良くないコードだろ
何を反論してるんだ?

120 :Name_Not_Found:2017/12/03(日) 00:46:44.07 ID:???.net
>>118
質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら、話はここで終わりだな

121 :Name_Not_Found:2017/12/03(日) 00:47:37.59 ID:???.net
> 質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら

無駄かつ良くないコードだと言ったのは俺なんだが、
なんで俺が自分が行った言葉に反論しなきゃいけないんだ?

122 :Name_Not_Found:2017/12/03(日) 00:48:48.68 ID:???.net
無駄かつ良くないコードだが
ちゃんと動く

っていうことの意味が分からんのかな?

俺ここでよく無駄かつ良くないコードを
修正してるんだが

123 :Name_Not_Found:2017/12/03(日) 00:49:05.59 ID:???.net
>>119
>>112では「無駄」と認めながら>>116では「無駄ではない」といってるだろ
前後で主張が変化する奴は信用できない

124 :Name_Not_Found:2017/12/03(日) 00:50:11.59 ID:???.net
あ、揚げ足取っていただけかw

125 :Name_Not_Found:2017/12/03(日) 00:54:47.33 ID:???.net
揚げ足ではないような
自己矛盾を抱える人は日本語が分かってない人という典型かな

126 :Name_Not_Found:2017/12/03(日) 01:10:35.99 ID:???.net
日本語がわからんやつは困るね。いちいち説明せんといかんのかね
コードが無駄だってだけで動作は無駄じゃないってことだよ
ちゃんと書いてあるだろ

127 :Name_Not_Found:2017/12/03(日) 14:02:27.52 ID:???.net
動作自体が無駄

128 :Name_Not_Found:2017/12/03(日) 14:11:59.68 ID:???.net
じゃあ無駄じゃない動作とは?

129 :Name_Not_Found:2017/12/03(日) 14:27:27.65 ID:???.net
祈りの所作

130 :Name_Not_Found:2017/12/03(日) 16:24:26.70 ID:???.net
必要なことをやっているけど無駄の多いコードは冗長なコードというべきではないか

131 :Name_Not_Found:2017/12/03(日) 17:55:51.86 ID:???.net
1 + 1 // ->
で2が出力されるのですが、これは何でしょうか???

132 :Name_Not_Found:2017/12/04(月) 12:45:59.51 ID:???.net
>>130
>>130
「冗長」の意味を調べなおした方がいいのではないか。

"文章・話などが、「むだ」が多くて長いこと。また、そのさま。"
https://dictionary.goo.ne.jp/jn/109389/meaning/m0u/

133 :Name_Not_Found:2017/12/04(月) 13:17:53.26 ID:???.net
> 必要なことをやっているけど無駄の多いコード
「必要」と「無駄」は対義語
必要なことをやっているなら無駄ではない

134 :Name_Not_Found:2017/12/04(月) 13:19:29.68 ID:???.net
>>132
なるほど、この場合はコードに無駄が多くて長いが
処理そのものには意味がある(無駄ではない)ってことだな

135 :Name_Not_Found:2017/12/04(月) 13:20:38.96 ID:???.net
>>133
必要の対義語は不必要ってでてきたけど?

136 :Name_Not_Found:2017/12/04(月) 18:31:21.62 ID:???.net
必要かつ無駄は矛盾してると思うけどね

137 :Name_Not_Found:2017/12/04(月) 18:45:27.08 ID:???.net
>>136
日本語ひどすぎねぇか・・
「必要」かつ「無駄」ってそれぞれ修飾してる語が違うんだけど

138 :Name_Not_Found:2017/12/04(月) 18:47:12.01 ID:???.net
>>134
いつも通りの曲解だな

139 :Name_Not_Found:2017/12/04(月) 18:48:18.37 ID:???.net
>>137
俺は無駄なコードを書いている
俺は必要なことをやっている(無駄なコードを書く事は必要である)

140 :Name_Not_Found:2017/12/04(月) 21:08:50.03 ID:???.net
必要なことをやっているコードと
必要なことだけで書かれてるコードは違うだろう

141 :139:2017/12/04(月) 21:14:31.74 ID:???.net
意味不明な論理だし、直接的に反論しないところがいやらしいな

142 :Name_Not_Found:2017/12/04(月) 21:18:43.71 ID:???.net
つまりダムってことだな

143 :Name_Not_Found:2017/12/04(月) 21:20:39.67 ID:???.net
>>112はいつもの日本語破綻者だしなあ
曖昧に濁して、相手の反応を伺う事で糸口を探してるんだろ

144 :Name_Not_Found:2017/12/04(月) 21:53:11.51 ID:???.net
> 必要なことをやっているけど無駄の多いコード
そもそも、これは「無駄なコードを残すことに意味がある」と主張したいが為の論理でしょ
「必要」と「無駄」の修飾先が違うのなら、必要なAだけ残して無駄なコード(B)を排除すれば良いだけ
よって、「無駄なコード(B)を書く事に意味はない」と結論される
どちらにしても、論理が破綻してるんだよ

145 :Name_Not_Found:2017/12/04(月) 22:13:47.23 ID:???.net
カレンダーのマス目に編集ボタンが配置されていて、編集ボタンをクリックすると編集画面が表示されるページを作成しています。ここでお尋ねしたいのが、idの名前の付け方です。
今は、id=btnEdit20171201、id=btnEdit20171202と名前を付けていますが、より良い名前の付け方はありますか?

146 :Name_Not_Found:2017/12/04(月) 23:25:30.85 ID:???.net
idをつけない、という選択肢もあるんじゃないかな
押したボタンから日付を取得したいなら、カスタムデータ属性なり、button要素でvalue属性を使うなり、手はいくらでもある

147 :Name_Not_Found:2017/12/04(月) 23:48:01.31 ID:???.net
>>145
>>146も書いているけどそういうIDが必要になるのがおかしい気がするね。
JavaScriptのスレに書いてるってことは、JavaScriptからそれらを参照するつもりなのだろう

本題の前に言っておくと、普通HTMLでは全部小文字でハイフン区切りが多い
btn-edit-20171201 みたいに。なぜかはよく分からんけどアンダースコアはあまり使われない
まあそれでもBEMみたいな変則的なものは有るし、強制ではない

んで、本題。あーだこーだ言いたいが、まあ要するにIDなしでやる方法を知らんのだろう?
なので軽くサンプルを書いてあげよう
https://jsfiddle.net/bfw0m3p6/

148 :Name_Not_Found:2017/12/05(火) 00:40:08.94 ID:???.net
>>146,147
ありがとうございます。とても参考になりました。idを振らずにイベントをトリガーしたり、カスタムデータ属性を使う方法などがあるのですね。
編集画面でクリックされた日の年月日を引き継いで表示したりすることを考えると、カスタムデータ属性が面白そうですね!

149 :Name_Not_Found:2017/12/05(火) 00:54:54.75 ID:???.net
>>148
そのマス目に入れるものが日付だけならtime要素を使うのが良いかもね
https://developer.mozilla.org/ja/docs/Web/HTML/Element/time

<time datetime="2017-12-05">5日</time>

150 :Name_Not_Found:2017/12/06(水) 17:17:54.46 ID:6QjIZVj3.net
['みかん','りんご','みかん','ばなな','りんご','りんご',]から
一番出現回数の多い「りんご」を得るにはどうすればいいでしょうか?

151 :Name_Not_Found:2017/12/06(水) 18:26:46.19 ID:???.net
>>150
sort してから反復するとか

let a = [‘りんご’, … ];
a.sort();

let max = -1, // 最大出現回数
let count = 0, // 現在の単語の出現回数
let word, // 出現回数最大の単語

a.reduce(f);

function f(前, 次){
if(前 === 次){
count +=1
} else {
if( max < count ) { max = count; word = 前 }
count = 0;
}

みたいな感じ(細かい所は省略

152 :Name_Not_Found:2017/12/06(水) 18:33:37.87 ID:???.net
>>151
すまん、 reduce の使い方がダメダメだったので取り消す

153 :Name_Not_Found:2017/12/06(水) 22:06:13.37 ID:???.net
var fruitsArray:Array<String> = ['みかん','りんご','みかん','ばなな','りんご'];
var fruitsMap:Map<String, Int> = new Map();
var count:Dynamic;

for (fruit in fruitsArray) {
count = fruitsMap[fruit];
if(count == null){
count = 1;
} else {
++count;
}
fruitsMap[fruit] = count;
}
trace(fruitsMap);
// 出力 {みかん => 2, りんご => 2, ばなな => 1}

Haxe で書いた。以下で試して。
https://try.haxe.org/

Map に入れたけど、最大値が複数ある場合の、処理がわからない

154 :Name_Not_Found:2017/12/07(木) 00:27:44.39 ID:???.net
>>150
lodashを使った
https://jsfiddle.net/5azq6k7q/

const counts = _.countBy(['みかん','りんご','みかん','ばなな','りんご','りんご']);
const max = _.max(_.values(counts));
const picked = _.pickBy(counts, _.partial(_.eq, max));
const items = _.keys(picked);
console.log(items);
// => ["りんご"]

出現回数が最大のものが複数ある場合を考慮して複数返している

155 :Name_Not_Found:2017/12/08(金) 00:17:01.66 ID:AHHYVqIH2
間違って他のスレにも書いてしまったんですが、お分かりの方ご教授ください。

画像のパスの一部を書き換えるjsを書いてるんですが
ネットで調べてページすべての画像は↓で変更できるようになったのですが、
特定のclass(<div class="gallery">)の中にある<img>画像だけ書き換える時の書き方がわかりません。
jsマスターの方、ご教授ください。

window.onload = function() {
  var images = document.images;
  for (var i=0, n=images.length; i<n; i++) {
    var img = images[i];
    img.src = img.src.replace(/xxx/, 'xxx_s');
  }
};

156 :Name_Not_Found:2017/12/07(木) 15:49:48.80 ID:???.net
>>154
ありがとうございます
やっぱりライブラリ使わないと難しそうですね

157 :Name_Not_Found:2017/12/07(木) 21:15:11.79 ID:???.net
>>156
別にライブラリ使わなくてもできるよ。
ただ見て分かる通り優れたライブラリを使うとこの程度の問題なら
複雑化の原因になる条件分岐やループを使わずに最小のコード量で実装できる

158 :Name_Not_Found:2017/12/07(木) 23:12:55.32 ID:???.net
すごいな。ちゃんとconstだけでかけちゃってる

159 :Name_Not_Found:2017/12/07(木) 23:19:30.37 ID:???.net
Haxe で書いた通り、まずMap が必要だから、
ES6(2015) + Babel で、ES5 へ変換

>>153
で、Map に入れる所までは書いたから、その後を書けば?
漏れは、最大値が複数ある場合の、処理がわからなかったけど

Lodash も、ES6 もほぼ同じ

160 :Name_Not_Found:2017/12/08(金) 00:00:01.13 ID:???.net
ES6は必要最小限しか言語機能として搭載しない
という考え方があるから、高度なことはできんよ

>>154の例だとcountByとpickByはない
その他は代替方法があるが少し冗長になる
まあ書いてみると良いよ

161 :Name_Not_Found:2017/12/08(金) 00:20:11.03 ID:???.net
ES6 が流行れば、Underscore/Lodash がいらなくなる、という記事が一杯あるけど

Ruby, Kotlin だと、ライブラリが無くても、かなり簡潔に書けるけど。
列Aでソートして、それが同じ値なら、さらに列Bでソートするとか

Kotlin 2
https://mevius.5ch.net/test/read.cgi/tech/1509462463/18

162 :Name_Not_Found:2017/12/08(金) 01:46:22.33 ID:???.net
>>161
そこに出てくるMutableListやmutableListOfってのはライブラリだよ

Kotlin Standard Library の一部
https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/-mutable-list/index.html
https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/mutable-list-of.html

RubyのArrayも(組み込み)ライブラリ
https://docs.ruby-lang.org/ja/latest/class/Array.html


言語の範囲っていうのは一般的にはかなり少なく作るもの
関数やクラスの文法とか基本的なものだけ
大部分は標準ライブラリとして実装するのが普通

残念ながらJavaScript(ES6)の標準ライブラリはかなり小さく作られてる
その気になれば一気に最低でもRubyレベルまで実装するのは可能だろうになぜかそういうことをしない。
互換性を保つためなのかブラウザベンダーの負担を減らすためなのか知らんけど

この方針が変わらない限り、貧弱なライブラリとそれを補うlodashとかの構図は変わらない

163 :Name_Not_Found:2017/12/08(金) 01:53:01.14 ID:???.net
 初歩的な質問で恐縮ですが、お分かりの方ご教授ください。

画像のパスの一部を書き換えるjsを書いてるんですが
ネットで調べてページすべての画像は↓で変更できるようになったのですが、
特定のclass(<div class="gallery">)の中にある<img>画像だけ書き換える時の書き方がわかりません。
jsマスターの方、ご教授ください。

window.onload = function() {
  var images = document.images;
  for (var i=0, n=images.length; i<n; i++) {
    var img = images[i];
    img.src = img.src.replace(/xxx/, 'xxx_s');
  }
};

164 :Name_Not_Found:2017/12/08(金) 02:01:45.73 ID:???.net
>>156
ライブラリ使わなくても単純に考えればいいのよ
const fruits = ['みかん','りんご','みかん','ばなな','りんご','りんご',];
const counts = [];
const result = [];
let max = 0;
for (let fruit of fruits) {
let c = counts[fruit] || 0;
if (++c >= max) {
if (c > max) {
max = c;
result.length = 0;
}
result.push(fruit);
}
counts[fruit] = c;
}

console.log(result);

165 :Name_Not_Found:2017/12/08(金) 02:06:22.46 ID:???.net
>>163
jQueryが得意そうな課題だなw
動かしてないけどこんな感じかな

$(function() {
 $('.gallery img').attr('src', function() {
  return this.src.replace(/xxx/, 'xxx_s');
 });
});

166 :Name_Not_Found:2017/12/08(金) 02:06:56.67 ID:???.net
>>163
var images = document.querySelectorAll("div.gallery img");

167 :162:2017/12/08(金) 02:23:12.26 ID:???.net
>>165
>>166
さっそくありがとうございます。
お二方のコード双方動きました。
動くと嬉しいですね〜。

168 :Name_Not_Found:2017/12/08(金) 02:50:47.41 ID:???.net
>>167
あ、ごめん。少し無駄があった。
(最初のページロードを待つ部分は単に書くのを省略するとして)

$('.gallery img').attr('src', function(i, src) {
 return src.replace(/xxx/, 'xxx_s');
});

もしくは、これで良かったんだ。

$('.gallery img').attr('src', (i, src) => src.replace(/xxx/, 'xxx_s'));


なんのためにfunctionを使ったんだ?っていうねw

169 :Name_Not_Found:2017/12/08(金) 03:16:43.69 ID:???.net
文字列の先頭からのマッチングに使うのに適した変数名は何だろう
startWithか?とか思って検索していて、
ES6からStringにstartsWithメソッドが追加されているのに気づきました
こんなメソッド知ってましたか?
Google書籍検索で「JavaScript startsWith」で検索しても、
日本語の本は一冊も出てこないところをみると、
知らない人は決して少なくないと思います
他にもES6で追加されているのに知らないメソッドがある気がします
どう調べればいいですか?

170 :Name_Not_Found:2017/12/08(金) 03:19:02.22 ID:???.net
普通にググって見つかるので

171 :153:2017/12/08(金) 06:13:25.95 ID:???.net
Ruby 初心者スレッド Part 62
https://mevius.5ch.net/test/read.cgi/tech/1511451329/96

ちなみに、Ruby でやってみた

172 :Name_Not_Found:2017/12/08(金) 06:29:21.92 ID:???.net
>>164
答えが複数ある場合でも、OK だね

ただ、そういう複雑なプログラムを書きたくないから、
便利な関数を検索していた

173 :Name_Not_Found:2017/12/08(金) 12:42:30.79 ID:???.net
>>164
ありがとうございます
みかんとりんごが同数の場合は、どちらか一つが取れればいいので
こんな感じに書いてみましたが間違ってたらご指摘下さい

var fruits = ['みかん','りんご','みかん','みかん','ばなな','りんご','りんご',];
var fruit = fruits.filter(function (value, index, self) {
if (index === 1) {
return self.indexOf(value) === index && index !== self.lastIndexOf(value);
}
});
console.log(fruit);

174 :Name_Not_Found:2017/12/08(金) 21:54:48.56 ID:???.net
>>172
何を持って複雑というかだね。

俺は条件分岐やループが多く処理の中で状態が
変化するようなものを複雑だと定義している

だけど人によっては知らない関数を使うことを
複雑だと言う人もいるだろう

175 :Name_Not_Found:2017/12/08(金) 21:57:13.56 ID:???.net
>>173
const counts = _.countBy(['みかん','りんご','みかん','ばなな','りんご','りんご']);
const max = _.max(_.values(counts));
const picked = _.pickBy(counts, _.partial(_.eq, max));
const items = _.keys(picked);
console.log(items);
// => ["りんご"]

さっきの答の最後を書き換えて

console.log(items[0]);

こうすればいいだけだよ

176 :Name_Not_Found:2017/12/08(金) 22:06:48.91 ID:???.net
>>174
> 何を持って複雑というかだね。
いや、複雑の定義は(いくつか有るとは言え)ソフトウェア業界で決まってるんだから
いくつか有るうちのどれかに従おうよw

オンラインで複雑度を調べるサイトぐぐってみたら
http://jsmeter.info ってのを見つけた
(意味は知らないのあるからちょっと調べてみようかな)

>>164の結果
http://jsmeter.info/m61k7f/1#results
Statements: 27
Lines: 17
Branches: 3
Depth: 3
Cyclomatic Complexity: 4
Halstead Volume: 322
Halstead Potential: 4.75
Program Level: 0.0148
MI: 104.43

>>154の結果
http://jsmeter.info/35xbq5/1#results
Statements: 16
Lines: 5
Branches: 0
Depth: 0
Cyclomatic Complexity: 1
Halstead Volume: 223
Halstead Potential: 4.75
Program Level: 0.0213
MI: 126.20

177 :Name_Not_Found:2017/12/08(金) 22:20:56.36 ID:???.net
Statements: 文の数(少ない方が良い)
Line: 行数(少ない方が良い)
Branches: 分岐数(少ない方が良い)
Depth: ネストの深さ(少ない方が良い)
Cyclomatic Complexity: 循環的複雑度
 10 以下であればよい構造
 30 を越える場合,構造に疑問
 50 を越える場合,テストが不可能
 75 を越える場合,いかなる変更も誤修正を生む原因を作る
Halstead Volume: よくわからん
 https://www.imagix.com/user_guide_jp/class-metrics.html
 Halstead プログラム量?
Halstead Potential: よくわからん
 http://se-naist.jp/old/lecture/se3/2006/handouts/productmetrics2.pdf
 語彙の多さに着目した尺度?
Program Level: 抽象度?(高い方がいい?)
MI: 保守容易性(高い方がいい)

178 :Name_Not_Found:2017/12/09(土) 00:53:25.98 ID:???.net
>>176-177
ライブラリのコードを含めて比較しなければ公正とはいえない

179 :166:2017/12/09(土) 00:53:30.06 ID:???.net
>>168
両方動きました!
上級者になると一行で書けるんですね。

180 :Name_Not_Found:2017/12/09(土) 00:55:50.83 ID:???.net
>>178
ライブラリの部分は十分にテストされて書かなくていい部分だから
そこを含める必要はないよ

っていうかその話をするとブラウザの部分まで含めろ
OSの部分まで含めろってなるだろ

181 :Name_Not_Found:2017/12/09(土) 02:40:12.73 ID:???.net
自分の書くコードをシンプルにするためにライブラリを使うのに
ライブラリを使ってシンプルにするなど許さん!
ライブラリの分まで含めるのが公平だ!なんて言ってるのか?
どんだけ複雑すれば気が済むんだろうか

182 :Name_Not_Found:2017/12/09(土) 03:09:49.01 ID:???.net
そもそも複雑度ってファイルごと、クラスごと、関数毎に出すものだから
例えライブラリが複雑だとしても、

・使ってるライブラリが複雑です
・それはそれとしてあなたの書いたコードはシンプルです

という結果になるだけの話なんだけどね

対するは、

・ライブラリは使ってません
・それはそれとしてあなたの書いたコードは複雑です

となるだけの話

183 :Name_Not_Found:2017/12/09(土) 14:03:27.11 ID:IjKCYIGUL
https://mallento.com

こういうの使って似たようなサービスできんかね
システムよくわからんから誰かおしえてくれ

184 :Name_Not_Found:2017/12/09(土) 09:12:58.40 ID:???.net
> 自分の書くコードをシンプルにするためにライブラリを使うのに
そう思っているのはあんただけ
意味も分からずに http://jsmeter.info/ を使っているから、ライブラリを使うためのツールぐらいにしか思えないんだろうな

185 :Name_Not_Found:2017/12/09(土) 10:16:41.91 ID:???.net
>>184
それで何が言いたいのさ?
否定だけして、お前の意見が何も書いてないぞ

186 :Name_Not_Found:2017/12/10(日) 03:05:54.10 ID:???.net
プログラム板にも、荒らしが出てるぞ

元々、荒らしは、全部のスレで、いちゃもんを付けてくる。
漏れも、何回も攻撃されてる

プログラミングの話は、一切できないくせに、批判ばっかり書いてるのが荒らし

ただ、Ruby, JavaScript のスレでは、
荒らしにかまうから、喜んで居着いてるだけ

荒らしは一切、無視すべし!

187 :Name_Not_Found:2017/12/10(日) 14:47:13.97 ID:???.net
sortを使えばいいと思う
こんな感じで

let fruits = [ 'みかん', 'りんご', 'みかん', 'みかん', 'ばなな', 'りんご', 'りんご', ]

let map = new Map
for(let f of fruits) map.set(f, (map.get(f)|0)+1 )
let [[max]] = [...map].sort( ([,a],[,b])=>b-a )

188 :Name_Not_Found:2017/12/10(日) 15:18:23.37 ID:???.net
>>187
最大を複数取得したい場合は?

189 :Name_Not_Found:2017/12/10(日) 16:09:19.03 ID:???.net
誰が複数取得したいなんていったんだ?

190 :Name_Not_Found:2017/12/10(日) 16:19:48.14 ID:???.net
>>167が言ってるけど?

191 :Name_Not_Found:2017/12/10(日) 16:20:04.59 ID:???.net
>>188の間違い

192 :Name_Not_Found:2017/12/10(日) 17:45:40.53 ID:???.net
>>188
あれに付け加えてもいいけど
別のやり方でもうちょっと汎用的な処理を書くとして例えばこういうのはどう?

let fruits = [ 'みかん', 'りんご', 'みかん', 'みかん', 'ばなな', 'りんご', 'りんご', ]

let ary = [] // 個数毎にグループ分けした配列を作る
fruits.sort().reduce( (c,f,i,a,n=c|0) => (f==a[i+1]) ? n+1 : (ary[n] = [f,...ary[n]||[]]), 0 )

ary[0] // ["ばなな"] => 個数1
ary[1] // undefined => 個数2
ary[ary.length-1] // ["りんご", "みかん"] => 最大個数

193 :Name_Not_Found:2017/12/10(日) 20:34:15.96 ID:???.net
コードゴルフってやつだね

194 :Name_Not_Found:2017/12/10(日) 20:43:06.10 ID:???.net
>>192くらいなら同時に把握しない要素数が10も無いから
プログラマのワーキングメモリに乗るという意味で普通のコードの範疇だと思う

195 :Name_Not_Found:2017/12/10(日) 20:59:52.72 ID:???.net
関数や命令を知っているという前提で、1行の処理を把握するのに
5秒以上かかるようなものは普通のコードではないと思う
コードは読むものであって、解析するものになってはいけない

196 :Name_Not_Found:2017/12/10(日) 22:45:15.56 ID:???.net
場合による
行数が短く一つのブロックがスクロール無しに見れることも重要
つかそもそも読む必要はできるだけ少ないほうが良い
今回のような処理の場合ただ最大個数の要素を得るためだけに十行二十行かけるのは極めて愚策
そこからの処理が重要なんだから、普通は外部関数化する
あえてインラインで書くならできるだけ目につかないように短く書いたほうが良い
仮にもしそこに問題がありそうだということになれば、一行捨てて書き直しても良い程度のものだし

197 :Name_Not_Found:2017/12/10(日) 22:47:45.60 ID:???.net
> つかそもそも読む必要はできるだけ少ないほうが良い

ということは、ライブラリを使って読むものを減らすのが正解なわけか

198 :Name_Not_Found:2017/12/10(日) 22:50:53.43 ID:???.net
> fruits.sort().reduce( (c,f,i,a,n=c|0) => (f==a[i+1]) ? n+1 : (ary[n] = [f,...ary[n]||[]]), 0 )

このコードの読むもの = トークン はどれくらいあるのかざっくり数えてみた
(カッコは省略、連続する変数定義は一つにまとめた)

fruits
sort
reduce
c,f,i,a,n
=
c|0)
=> (
f==a[
i+1]
) ?
n+1
:
(ary[n] = [
f,...ary[n]
||[]
]), 0 )

全部で16個ぐらい
これぐらいの量を、ひとつづつ意味を考えながら
読んでいかないといけない

199 :153:2017/12/11(月) 01:05:24.91 ID:???.net
>>171
にも書いた通り、Ruby でも調べたけど、
最大使用回数が複数ある場合、簡単には取得できない

最大使用回数を返す場合、1つしか返さない

strHash = {"a"=>2, "b"=>1, "c"=>2}

maxCount = strHash.values.max #=> 2
p strHash.select {|k, v| v == maxCount } #=> {"a"=>2, "c"=>2}

まず、Hash の全要素をなめて、最大使用回数を取得して、
その最大使用回数に一致するキーを、Hash の全要素をなめて取得する

同じHash を、2回走査してしまう。
一発で取得できないから、無駄を感じる

200 :Name_Not_Found:2017/12/11(月) 05:39:34.10 ID:???.net
>>198
考え方が逆
そもそも一度限りのかき捨てのコードなんだから読む必要がない
問題があれば捨てればいいだけでその時に例えば>>175のような感じだと
4個も公開変数があるから結局一部を捨てたりということもしづらい
一部を修正しようと思えば結局全ての行とそのほかの部分の絡みを考えないといけない
これもワンラインで書くなり使わない変数を削って一つの塊にすべき
もしくは5行程度なら即時関数にしてスコープ限定してもいいけど
本当にデバッグを考えたら結局コメントだったりわかりやすさが足りない

逆に何度も使うんならライブラリ使ったり書いたりする
もし単関数で取れるライブラリがあればそれで良し
中途半端な気遣い(?)は一番無駄

201 :Name_Not_Found:2017/12/11(月) 05:43:08.85 ID:???.net
> そもそも一度限りのかき捨てのコードなんだから読む必要がない

一度限りのかき捨てのコードなんて誰が決めたの?
あなたの思い込みですよね?

202 :Name_Not_Found:2017/12/11(月) 05:53:03.70 ID:???.net
> 問題があれば捨てればいいだけでその時に例えば>>175のような感じだと
> 4個も公開変数があるから結局一部を捨てたりということもしづらい

公開変数ってなんや?
this.foo なんてのが公開変数やろ?
どうみても>>175はローカル変数や

一部を捨てたりってなんや?
全くもって意味不明だ

203 :Name_Not_Found:2017/12/11(月) 06:10:08.40 ID:???.net
初心者です。
この本(http://amzn.asia/386grG8)を文中の課題をやりながら読み終わったので、
次はこちらの本(http://amzn.asia/cDn7CWG)に行こうと思っております。
この話を知人にしたところ、旧版(http://amzn.asia/cv1is9n)を持っているから貸してやろうか?と言われました。

同じ本ですが2010年の旧版です。
javaScriptの学習において そこまで問題がなければ旧版を借りようかと思うのですが、
この界隈の技術の移り変わりは早いので本書も最新版を買うべきでしょうか?

204 :Name_Not_Found:2017/12/11(月) 08:39:09.19 ID:???.net
初めてのJavaScript 第3版、オライリー、2017

この本は、ES6(2015)の本だけど、
プログラミングを数年以上やっていないと、難しくて読めない

初心者は、(ECMA Script)ES3, ES5, ES6 と順番に、やった方が良いかも

今のブラウザは、ES5だけど、
ES6ではクラス構文などもできて、極端に難しくなる

205 :Name_Not_Found:2017/12/11(月) 08:54:39.81 ID:???.net
>>203
間違いなく新しい方が良いけど
古いから役に立たないって訳でもない

206 :Name_Not_Found:2017/12/11(月) 12:57:28.50 ID:???.net
クラス構文習うよりprototype習うほうが難しくね?

207 :Name_Not_Found:2017/12/11(月) 15:22:11.55 ID:???.net
>>175, >>187
ありがとうございました!

208 :Name_Not_Found:2017/12/11(月) 15:31:05.98 ID:???.net
>>203
あってもいいけど物理的な本は必要か?と思う

209 :Name_Not_Found:2017/12/11(月) 16:38:16.76 ID:???.net
あるていど経験してるとサイト検索で十分だと思うけど
最初のうちは体系立てて勉強できるように、本がいいと思う

210 :Name_Not_Found:2017/12/11(月) 19:20:43.67 ID:???.net
>>206
プロトタイプは超簡単
「prototype」は難しいが、それはプロトタイプベースとは関係なく
関数をクラスに見立てたJSの旧クラスシステムで必要になるもので本質とは関係がない
でもプロトタイプベースで書けるようになったのはES2015からで
その教え方をしている入門書なりは見たことがない

211 :Name_Not_Found:2017/12/11(月) 20:34:04.11 ID:???.net
phpマニュアルみたいなサイトないもんかね
あれを一度ガッツリ読むとすんげーレベルアップするんだけどな

212 :Name_Not_Found:2017/12/11(月) 23:09:50.28 ID:???.net
>>210
> でもプロトタイプベースで書けるようになったのはES2015からで

JavaScriptは最初からプロトタイプベースだよ

「俺は昔のJavaScriptはプロトタイプベースとは認めん!」というのは無しな
それはお前の「オレオレ定義」であって世間一般には通用しないものだから
世間一般にはJavaScriptは最初からプロトタイプベース

213 :Name_Not_Found:2017/12/11(月) 23:33:14.20 ID:???.net
>>212
んだね

214 :Name_Not_Found:2017/12/12(火) 02:59:49.05 ID:MrUcGD8N.net
HPで友達が稼げるようになった情報とか

⇒ http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

717PZBPVIE

215 :Name_Not_Found:2017/12/12(火) 14:42:25.20 ID:???.net
>>212
いやいや、JSのベースがプロトタイプかどうかを言ってるんじゃなくて、
プロトタイプベースらしいプログラミングができる言語だったかを言ってるんだよ
ES2015まではプロトタイプの設定が自由にできなかったんだが
それでプロトタイプベースプログラミングが出来るわけ無いでしょ

だから長らく継承テクニックとしてJSの内部プロトタイプの操作を利用するハックが使われてきたのよ
それでもES2015でいうextendsの効果にもある
関数のプロトタイプを別の関数にするとかいう重要な操作はできなかったわけよ
でも当時でも独自実装であった__proto__を使えばそれは容易にクリアできたわけで
それこそがプロトタイプベースのポテンシャルなわけよ

216 :Name_Not_Found:2017/12/12(火) 14:50:46.50 ID:???.net
class構文追加でより難しくなるかどうかの話だったと思うが

217 :Name_Not_Found:2017/12/12(火) 16:05:59.03 ID:???.net
>>216
とりあえず自分が言いたいことは、prototypeプロパティやnew演算子を使った継承周りのテクニックは
確かに簡単とは言いにくく、class構文はその点分かりやすいけれど、
勘違いしてほしくないのは『プロトタイプ』を活用した継承システムは本来簡単なはずなんだってこと
でもJSでは長らく活用が許されてなかったので、プロトタイプベースOOPの文化や学習が整っていないということ

218 :Name_Not_Found:2017/12/12(火) 21:23:35.72 ID:???.net
>>217
因みにプロトタイプベースらしい書き方ってどんな感じ?
TypeScriptメインだからよくわからんのだ

219 :Name_Not_Found:2017/12/12(火) 22:15:37.27 ID:???.net
>>218
最初から用意されている1つのクラスシステムに縛られないのがプロトタイプベースの良さと言っても
大きなコードを書けば自ずと抽象化の結果として何らかのクラスシステムを作ることになる
既存のJSの2つのクラスシステムは当然内部的にプロトタイプベースのプロトタイプ設定を利用しているのを見ても分かるが
プロトタイプの自由な設定機能がないとまともなクラスシステムを作るのは困難
一番わかり易い形で具体的に絶対にできないことを挙げるなら上で書いたように関数のプロトタイプ設定
つまり関数へのメソッドの継承が実現できない

因みにプロトタイプベースらしい書き方って言うのも一概には言えないのかもしれないし、
実際はコンストラクタ的な機能を考えたりしてクラスシステムを構築する場合もある
そもそも自分がこれを挙げた理由は継承の概念を理解するのが簡単ということで
本当に単純なプロトタイプの設定だけでOOPが円滑にできるとは言わない
その上で書くと

220 :Name_Not_Found:2017/12/12(火) 22:16:46.34 ID:???.net
class B { m() { return 6 } }
class A extends B { m(){ return 7 * super.m() } }
let o = new A
o.m()
というのと
let B = { m() { return 6 } }
let A = { __proto__: B, m(){ return 7 * super.m() } }
let o = { __proto__: A }
o.m()
というの、初めて継承やらを理解する時にはオブジェクトだけで説明できる後者の方が仕組み理解し易くないか?
少なくとも、class構文でない旧クラスシステムで書いたコードと比べたら明らかにそうだよねってこと

221 :Name_Not_Found:2017/12/12(火) 22:19:09.90 ID:???.net
>>215
いや、だからそれはあんたの「オレオレ定義」であって
世間一般ではJavaScriptはプロトタイプベースのオブジェクト指向だって
最初から言われてる

言われているかどうか。事実の話をしている。
あんたが認めるかどうかじゃない

222 :Name_Not_Found:2017/12/12(火) 22:23:27.86 ID:???.net
>>220
俺は前者だな
知ってるからかもしれんが

class構文がなかったころと比べたら
まあどっちも理解しやすい

223 :Name_Not_Found:2017/12/12(火) 22:36:46.52 ID:???.net
>>219
> つまり関数へのメソッドの継承が実現できない

それはクラスベースでは当たり前にある機能で
プロトタイプベースはクラスベースと同じ機能が
なければないと思ってるからだよね?

つまりあんたはクラスベースとプロトタイプベースを
違うものだって考えられてないってこと

プロトタイプベースをクラスベースの書き方を変えただけと思ってるから
クラスベースと同じ機能がない=プロトタイプベースではない
という意味がわからないことになってるんだよ。

224 :Name_Not_Found:2017/12/12(火) 22:39:48.00 ID:???.net
ようするに「プロトタイプベースのオブジェクト指向」を
やるのであれば昔のJavaScriptでもそれは普通にできる

プロトタイプベースのオブジェクト指向で
クラスベースの真似事をしようとするから
機能が足りないって思ってしまう

プロトタイプベースでやるならば、
別に最初から機能は不足してない

225 :Name_Not_Found:2017/12/12(火) 22:43:55.05 ID:???.net
これも一応書いておくか
言いたいことはいろんな形のオブジェクト指向があるということ

https://codezine.jp/article/detail/3708
>  継承は決してオブジェクト指向の必須技術ではありませんが
> (実際、継承を持たないオブジェクト指向言語も存在しています)、

226 :Name_Not_Found:2017/12/12(火) 22:56:59.96 ID:???.net
>>224
完全にJS流クラスシステムに毒されてんな
自分はプロトタイプベースのメリットは最初から用意されているクラスシステムに縛られないことって言ったでしょ?
でも旧JSは半分、いや3/4くらい縛られてたわけよ
旧JSでプロトタイプベースっぽい、つまりクラスに縛られない固い言語でない特徴が現れていたのは
オブジェクトとプロパティのゆるさだけで、ここで問題にしている継承周りに関しては
他のクラスベース言語同様に縛られていたし、むしろクラスシステムがクソな分状況が酷かった
だからみんな旧クラスシステムの内部のプロトタイプ操作を利用する
『機能が十分なクラスシステム』をいろいろ考えてたわけじゃん
それでも関数のプロトタイプ設定はできないってことが長年の悩みだったわけだけどね

それと話を整理するけど
プロトタイプベースでも機能は足りるっていうのは話が食い違っている
よく考えてみて
それって、new演算子やprototypeプロパティを使えば、
プロトタイプの設定ということができなくても継承は十分に実現できるって言いたいんでしょ?

でもこちらはそもそもそのnew演算子やprototypeプロパティを使ったJS流旧クラスシステムの複雑さと
本来のプロトタイプベースでの継承実現の簡潔さを比較してるんだよ
話がおかしいよね?

あとそちらこそプロトタイプベースとクラスシステムの関係を分かっていないようだけど
プロトタイプベースでも、デフォルトのクラスシステムがあることとは矛盾しない
それに縛られないってことが重要だからね

227 :Name_Not_Found:2017/12/12(火) 23:08:03.69 ID:???.net
> それって、new演算子やprototypeプロパティを使えば、
> プロトタイプの設定ということができなくても継承は十分に実現できるって言いたいんでしょ?

いわんよ?
継承はオブジェクト指向に必須ではない。


new演算子やprototypeプロパティを使えば、
プロトタイプベースのオブジェクト指向が実現できる
それだけ

228 :Name_Not_Found:2017/12/13(水) 12:54:32.31 ID:???.net
分かった分かった、自分が悪かった
『継承』っていうのをクラスベース的な捉え方してクラス同士の話だけと思っている人がいるようだから話が食い違うんだな
自分が言っているのはプロトタイプ的継承だったり、もっと一般的な「継承」の話だから
例えば>>225でも引用されているWikipediaを見てくれ
https://ja.wikipedia.org/wiki/%E7%B6%99%E6%89%BF_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)

まさに序文に書かれている『あるオブジェクトが他のオブジェクトの特性を引き継ぐ場合』っていうのを指して言ってる
だからnew演算子やprototypeプロパティだって継承のための機能なんだよ
要するに継承が云々言ってきたのは、(ある程度構造化した状態で)プロトタイプチェーンを繋げるのは云々って話だから

229 :Name_Not_Found:2017/12/13(水) 17:21:42.62 ID:EPMhIZDs.net
テスト

230 :Name_Not_Found:2017/12/13(水) 17:41:49.02 ID:EPMhIZDs.net
スクリプト書こうとするとNGワードが出て書き込めない…
質問したいのに〜

231 :Name_Not_Found:2017/12/13(水) 17:42:50.07 ID:EPMhIZDs.net
var elmDiv = document.createElement('div');
var hoge = document.getElementsByClassName('test');
hoge[1].parentNode.insertBefore(elmDiv, hoge[1].nextSibling)

↑のようなスクリプトを書いて

<div class="test">
<div class="test">
  【追加のDIV[1]】
<div class="test">
  【追加のDIV[2]】
<div class="test">

↑のような形でDIVを複数追加したいのですが、書き方がわかりません;
hoge[1]のみだと正しく追加されるのですが、hoge[2]を書くと上書きされてしまいます。。
任意の配列に複数要素を追加する書き方をご教授願えませんでしょうか…?

232 :Name_Not_Found:2017/12/13(水) 21:40:35.76 ID:???.net
>>228
まだ話が食い違ってるな。

俺が最終的に言いたいことは、JavaScriptは昔からプロトタイプベースの
オブジェクト指向だってことだけだよ


で君がいいたいことはだいたい分かる。
それに対して反論するならば、

[君がいいたいこと] 昔のJavaScriptは継承がやりにくい

それは事実だろう。だがやりにくいからといってもできる以上
プロトタイプベースであることを否定することにはならない。
つまり継承がやりづらいプロトタイプベースのオブジェクト指向

[君がいいたいこと] 一般的な「継承」ができない(面倒)

大変でもできる。できるのだからオブジェクト指向と言える。
それにそもそも継承はオブジェクト指向の必須要件ですらない
だからプロトタイプベースのオブジェクト指向


わかる? 継承があってもなくても、面倒であってもそうでなくても
JavaScriptは昔からプロトタイプベースのオブジェクト指向なんだよ

233 :Name_Not_Found:2017/12/13(水) 22:04:20.84 ID:???.net
>>230
本当にNGワード?ブラウザで書き込めるんじゃない?って思わなくはないが、
jsfiddleあたりで動く最低限のサンプルコード書いてから質問すればいい

234 :Name_Not_Found:2017/12/13(水) 22:04:39.62 ID:???.net
あ、ごめん>>231を見てなかった

235 :Name_Not_Found:2017/12/13(水) 22:49:20.89 ID:???.net
あ、やっぱり動く最低限のサンプルコード書いてもらわないとダメだな
divがネストしてるのかどうかわからんから答えられん

236 :Name_Not_Found:2017/12/13(水) 22:58:43.71 ID:???.net
任意の配列とか言ってるのに、1以上から始まってるのが謎だし
じゃあ複数とはいくつまでなのかとか書いてないし情報が足りんだよ

まあ、情けでエスパーして(いつも通りjQueryで)書いてやったが
次はもれなく情報を書くか、jsfiddleにサンプル書くか、その両方をやってからレスしてくれ

https://jsfiddle.net/ft3aegkx/

237 :Name_Not_Found:2017/12/13(水) 23:24:52.73 ID:???.net
>>231
>上書き
上書きの意味がよくわからんが、
2回目の追加は、実際は1回目に追加した elmDiv の移動になった
ということか?

追加するたびに createElement(cloneNodeでもOK)で
新たに要素を作成しないとそうなる

238 :Name_Not_Found:2017/12/14(木) 03:14:36.36 ID:???.net
要素を2つ、追加したいのなら、

まず要素を2つ、作った(new した)かどうかを確かめる

239 :Name_Not_Found:2017/12/15(金) 01:37:08.42 ID:???.net
var aaa=undefined;
とのか変数にundefinedを入れるって文法的に正しいのでしょうか?
undefinedって変数未定義のときにwebコンソールとかで出ると
考えているため、変数に代入することはないと思ってんですけど
どうなのでしょうか?

240 :Name_Not_Found:2017/12/15(金) 01:52:06.85 ID:???.net
文法的には問題ない NaNとかと同じ
ただ変数に直接入れるような使い方が相応しい場面はかなり少ないと思う

241 :Name_Not_Found:2017/12/15(金) 02:28:46.69 ID:???.net
undefined は、JS の実行環境が使うもの

プログラマーが使うのは、null

242 :Name_Not_Found:2017/12/16(土) 20:43:37.18 ID:G0N7qOwo.net
すいません、正規表現について教えてください

メールアドレス判定の許可として下記条件にプラスして
/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/
空(何も無い)も許可として追加したいのですが
どのように書いたらよいでしょうか・・

243 :Name_Not_Found:2017/12/16(土) 21:32:25.56 ID:???.net
/^(^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$)?$/
出来なくもないけど非常に分かり辛い
文字列長0で分岐させたほうが良さそうな気がする

244 :Name_Not_Found:2017/12/16(土) 22:03:00.98 ID:???.net
>>242
正規表現をそのまま使うやつは馬鹿
名前をつけて使え

名前というのは関数名のことだ。

function is_email(email) {
 正規表現チェック
}

空を許可するんだろう?

function is_email(email) {
 emailが空なら return true
 正規表現チェック
}

こうすればよかろう

245 :Name_Not_Found:2017/12/17(日) 03:05:23.03 ID:???.net
>>243,>>244
ありがとこのやろう

246 :Name_Not_Found:2017/12/17(日) 18:24:28.70 ID:???.net
質問です

環境はvagrantでubuntu16.04を使用してます

vue-cliを使ってるんですけどnpm run buildしてlocalhost:8080にアクセスできません。
ポートフォワーディングは8080→8080で設定しています。

http_proxyも設定しています。

ローカルホストからアクセスする方法を教えてください

247 :Name_Not_Found:2017/12/17(日) 22:08:55.18 ID:???.net
>>246ですが、自己解決しました

248 :Name_Not_Found:2017/12/20(水) 22:43:03.65 ID:aEN4Dhcy.net
buttonをclockすると、現在値を取得し、
lat(緯度)、lng(経度)、distance(距離)をgetパラメータとして渡し、同じページに遷移したいと思っています
・lat(緯度)、lng(経度)はgetCurrentPositionの引数のfunctionから取得
・distanceはbuttonタグの属性から取得。
例)<button data-distance="1000">

lat(緯度)、lng(経度)はは取得できましたが、distanceは取得できませんでした
何故でしょうか?


$(function(){
$("button").click(function(){
navigator.geolocation.getCurrentPosition(
function(pos){
var crd = pos.coords;
var url = location.href;
url = url.replace(/\?.*$/,"");
window.location.href = url +'?lat='+ crd.latitude + '&lng=' + crd.longitude+ '&distance=' + $(this).data('distance');
},
function(){
console.log('error');
}
);
});
});

249 :Name_Not_Found:2017/12/20(水) 22:46:17.45 ID:???.net
thisがbuttonじゃないから

250 :Name_Not_Found:2017/12/20(水) 22:50:44.82 ID:aEN4Dhcy.net
>>249
高速回答ありがとうございます!
もうちょっと考えてみます

251 :Name_Not_Found:2017/12/20(水) 22:51:32.51 ID:???.net
$(this).attr
でええやろ
dataはキャッシュかなんかですげー使いにくいぞ

252 :Name_Not_Found:2017/12/20(水) 22:58:53.90 ID:aEN4Dhcy.net
スコープの問題と分かりました
こういう場合はどう解決すればいいんでしょうか?
グローバル変数にする、DOMにclassをつける、などが思い浮かびましたが違う気がしてなりません
お助け下さい・・・

253 :Name_Not_Found:2017/12/20(水) 23:14:05.38 ID:???.net
$(function() {
 $('button').click(function() {
  var distance = $(this).data('distance');
  navigator.geolocation.getCurrentPosition(
   function(pos) {
    var crd = pos.coords;
    var url = location.href.replace(/\?.*$/, '');
    window.location.href = url +'?lat='+ crd.latitude + '&lng=' + crd.longitude+ '&distance=' + distance;
   },
   function() {
    console.log('error');
   }
  );
 });
});

254 :Name_Not_Found:2017/12/20(水) 23:18:10.18 ID:???.net
答を書きはしたがな、これは、

255 :Name_Not_Found:2017/12/20(水) 23:20:49.27 ID:???.net
>>253
なるほどー!なるほど!ありがとうございます
jsって難しいですね

256 :Name_Not_Found:2017/12/20(水) 23:45:36.06 ID:???.net
idすげーな

257 :Name_Not_Found:2017/12/21(木) 00:01:56.80 ID:???.net
locationの部分、これでいいのかな? あまり$.paramって使わんのよね

$(function() {
 $('button').click(function() {
  var distance = $(this).data('distance');
  navigator.geolocation.getCurrentPosition(
   function(pos) {
    var crd = pos.coords;
    window.location.search = $.param({lat: crd.latitude, lng: crd.longitude, distance: distance});
   },
   function() {
    console.log('error');
   }
  );
 });
});

258 :Name_Not_Found:2017/12/21(木) 00:19:46.53 ID:???.net
>>251
attr使うぐらいなら、<input type="hidden" name="distance" value="1000> だな
なぜかって? GETのパラメータだからだよ

現在地の取得をどうにかできるならば、HTMLだけでこれで実行できるでしょ?

<form>
<input type="hidden" name="lat" value="?">
<input type="hidden" name="lng" value="?">
<input type="hidden" name="distance" value="1000">
<input type="submit">
</form>

これにJavaScriptで現在地を入れ込むという処理を割り込ませると考える

259 :Name_Not_Found:2017/12/21(木) 00:23:35.43 ID:???.net
例えばこんな感じ

$(function() {
 $('form').on('click', ':submit', function(event) {
  var form = event.delegateTarget;
  event.preventDefault();
  navigator.geolocation.getCurrentPosition(
   function(pos) {
    var crd = pos.coords;
    form.lat.value = crd.latitude;
    form.lng.value = crd.longitude;
    $(form).submit();
   },
   function() {
    console.log('error');
   }
  );
 });
});

コードを短く出来たわけじゃないけど
HTMLだけで動くことを確認して、その続きで
処理を加えていくという作り方ができる

260 :Name_Not_Found:2017/12/21(木) 07:48:48.11 ID:???.net
現在地の取得はhttpsにしないとエラーが出るゾ
気づいたら昔作ったサービスが動いてなかったゾ

261 :Name_Not_Found:2017/12/24(日) 00:50:41.33 ID:GnSFaKqPJ
ネイティブjavascriptって覚える必要ある?

262 :Name_Not_Found:2017/12/24(日) 14:53:18.88 ID:???.net
http://www6.kaiho.mlit.go.jp/02kanku/aomori/tappisaki_lt/livecamera/index.html

ここのライブカメラを見ようとするとJAVAのセキュリティの警告とやらが出て表示されないんですが、
どうすれば見れる様になりますか?

263 :Name_Not_Found:2017/12/24(日) 23:49:35.67 ID:???.net
ここは、JavaScript のスレです

Java ではありませんので、スレ違い!

264 :Name_Not_Found:2017/12/26(火) 05:01:29.75 ID:???.net
動画サイトを見ていて、動画ページでコメントだけを見たいときとかに、ページを軽くしようとして

$("video").remove();
とか
$("video").parent().remove();
とかするのですが、これだと音声は再生されたままになってしまいます

コントローラーは消えるので音声を止められないし、ミュートだとちょっと重くなりそうなので
ムービー関係のもの全て消す方法ってないでしょうか?
例サイトはYouTubeです

265 :Name_Not_Found:2017/12/26(火) 09:27:00.46 ID:???.net
再生を止めればいいだけで消す必要なくない?

266 :Name_Not_Found:2017/12/26(火) 13:35:26.16 ID:???.net
>>264
pause() を使うとか、src属性を無効なURLに設定するとか

267 :Name_Not_Found:2017/12/26(火) 18:42:35.36 ID:???.net
>>264
for (var video of document.querySelectorAll('video')) {
video.pause();
video.parentNode.removeChild(video);
}

268 :Name_Not_Found:2017/12/26(火) 18:48:41.82 ID:???.net
>>265,267
再生を止めても、裏では動画や音声は読み込まれてるので、やっぱり結構CPUメモリ食べちゃうんですよね

>>266
無効なURLにするの良さげですね
ありがとうございます

269 :Name_Not_Found:2017/12/26(火) 20:46:29.51 ID:???.net
は?PentiumDでも使ってんの?

270 :Name_Not_Found:2017/12/26(火) 21:33:20.14 ID:???.net
まあ環境は人それぞれだから

271 :Name_Not_Found:2017/12/26(火) 23:15:45.24 ID:???.net
>>264
一時期軽くしたいと思っていたときは、
そういったものは原則OFFで、必要なときだけ再生するようにしていたな
昔はProximitronでHTMLを書き換えて実現していた、
比較的最近はブラウザの機能でFlashを自動的に再生しないようにしていた

もしかしたらブラウザに動画を自動的に再生しないような
設定があるんじゃないかな?
もし今の俺が同じことをやろうとしたら、ブラウザのプラグインである
TampermonkeyかStylishを使うかな? 実現できるか知らんけど

272 :Name_Not_Found:2017/12/26(火) 23:27:25.73 ID:???.net
おみとろん懐かしいな
今ならTampermonkeyだろうけど

本気でコメントだけ読みたいならapiを叩くという手もある

273 :Name_Not_Found:2017/12/27(水) 17:13:45.73 ID:???.net
EcmaScriptという言葉はES5あたりから良く聞くようになったと思いますが
それより前のES3相当のJavaScriptも、
EcmaScriptの標準を参照して作られていたのでしょうか?

274 :Name_Not_Found:2017/12/27(水) 22:16:48.95 ID:???.net
https://developer.mozilla.org/ja/docs/Web/JavaScript/Language_Resources
ECMAScript は JavaScript の基礎を成すスクリプト言語です。
ECMAScript は標準化団体 ECMA International によって ECMA-262 および
ECMA-402 specifications として標準化されています。
次のような ECMAScript 標準が承認済みおよび策定中です:

275 :Name_Not_Found:2018/01/05(金) 15:14:20.79 ID:???.net
ショッピングサイトにビットコイン決済を導入した際に、価格表記をビットコイン、マウスを重ねたら円表記が出るシステムを外注したいのですが、JavaScriptで大丈夫でしょうか?

276 :Name_Not_Found:2018/01/05(金) 19:50:26.20 ID:???.net
>>275
できるよ
マウスオーバーで表示変わるのはJavaScriptの得意とするところだから問題ない
単純なのならCSSでもできる
リアルタイムな相場の取得はAPIでできる
仮想通貨の各取引所がAPIを公開してるからそれ使えばいい
取引所によって取得の仕方や形式が違うからその辺は好みかな
ずっと提供されるかは保証ないからいくつかをフェイルオーバー的に作っておいた方がいい

277 :Name_Not_Found:2018/01/05(金) 20:07:44.63 ID:???.net
>>276
事細かにありがとうございます。
プログラミングの知識はないのですが、外注に当たって方向性だけでも確認したかったので助かりました

278 :Name_Not_Found:2018/01/06(土) 00:41:01.92 ID:???.net
HTMLは初級ぐらいでJavaScript(TypeScript)も普通ぐらいには使えるようになって、
Reactも使えるようになったのですが、目的のUI作れません。
WPF/UWPならXAMLとコントロール使って、AndroidならレイアウトファイルとViewコントロールを使って
複雑でないUIならとりあえず普通に作ってアプリ作れるんですが。
自分のレベルだとWebアプリだとかなり死ねます。

例えば、ちょっとこの項目を右寄せ表示するにしてもできねぇーとかのレベルです。

やっぱ、CSSを覚えるしかないのでしょうか??みなさんはバリバリCSS使いこなしてるんでしょうか??

279 :Name_Not_Found:2018/01/06(土) 00:44:40.86 ID:???.net
>>278の続きです。
例えば、Material UIなどReact用のコンポーネントはドキュメント見れば普通には使えるようになったんですが、
タブにアイコンつけたいとか、リスト表示でこの項目を右寄せしたいとか
Reactコンポーネントのプロパティに用意されてないことやると、
とたんにダメなレベルで、UIがつくれません。

280 :Name_Not_Found:2018/01/06(土) 06:18:30.78 ID:???.net
>>278-279
cssも覚えないと、結局細かい事は何も出来ない

>タブにアイコンつけたい
font-awesomeのver4を使う

>リスト表示でこの項目を右寄せ
text-align:right

281 :Name_Not_Found:2018/01/06(土) 15:00:09.67 ID:???.net
>>278
> やっぱ、CSSを覚えるしかないのでしょうか??みなさんはバリバリCSS使いこなしてるんでしょうか??

HTMLもCSSも使いこなしてるよ。というかJavaScriptだけでやろうとしたら破綻する
基本的にJavaScriptではデザインは作らない
JavaScriptでやるのは状態に応じてclassを設定するとかそういうことぐらい
そのclassに応じてどういう見た目にするかはすべてCSSで行う
そうしないと面倒なだけだから

逆にCSSを使いこなすと処理とデザインの責任範囲が明確になるから
コードはシンプルになるし、デザインの修正も簡単になる

282 :Name_Not_Found:2018/01/06(土) 16:26:17.74 ID:???.net
個人的には細かいこと気になるならCanvasの方がオススメ

283 :Name_Not_Found:2018/01/06(土) 16:54:45.33 ID:???.net
CSS勉強します(´・ω・`)

284 :Name_Not_Found:2018/01/07(日) 12:45:39.51 ID:PY90DREO.net
>>236
>>237
>>238


規制で書き込めなかったけど読ませていただきました。
無事解決しました!ありがとうございました(遅)

285 :Name_Not_Found:2018/01/08(月) 14:31:08.81 ID:nlt9GcxA.net
【大イスラエル帝国】「覚えておけ、我々は数百万人を殺した」 ((゜Д゜;;))) こんなのが直接来るのよ
https://rosie.5ch.net/test/read.cgi/liveplus/1515114599/l50

286 :Name_Not_Found:2018/01/08(月) 14:39:06.71 ID:???.net
「当方のエージェントは、追跡を避けるためメールアドレスを毎週変更している。

かあわいい

287 :じゃがりきん:2018/01/11(木) 23:10:13.35 ID:ZlMal6Wd.net
ついに宇宙一難解なパズルが完成しました・・

その名も
『宇宙一難解なパズルゲーム』!!
http://jagarikin.html.xdomain.jp/pzl.html

htmlでできてるのでブラウザから手軽に宇宙一難解なパズルをプレイできるよ〜

288 :Name_Not_Found:2018/01/11(木) 23:52:10.05 ID:???.net
5年ぶりに触り始めたんですけども、
var不要論ってなんすかね?

289 :Name_Not_Found:2018/01/12(金) 06:53:35.21 ID:???.net
let, constが使えるならvarで宣言する意味はない(少なくともletに置き換えて問題ない)
そして現状、メジャーな環境では使える
それならvarいらんよね、という主張かと

290 :Name_Not_Found:2018/01/12(金) 20:49:25.76 ID:???.net
コールバックの中のreturnについてお伺いします。

ttps://azu.github.io/promises-book/#promises-overview
の中の、promise-workflow.jsについてなのですが、
このサンプルコードを仮に2連続で呼び出すように改変する場合、A部分を

asyncFunction()
.then(function (value) {
console.log(value); // => 'Async Hello world'
return asyncFunction()
}).then(function (value) {
console.log(value); // => 'Async Hello world'
})

のように書くかと思うのですが、最初のthenの中の、
return asyncFunction()のreturnは、関数を実行するだけなのになぜ必要なのでしょうか?

以前も別件でfoo.map( ( x ) => x*2 )を
foo.map( ( x ) => { x*2 } )と書いてしまい、returnでハマりました。

どなたかこのreturnのミステリーについて教えてください。

291 :Name_Not_Found:2018/01/12(金) 21:07:47.77 ID:???.net
>>290
> 関数を実行するだけ

ではない。
asyncFunction() は promise も返す。

2 つめの then は、その promise がresolveされたときに呼ばれることになる

292 :Name_Not_Found:2018/01/12(金) 21:11:10.05 ID:???.net
>>291
訂正
2 つめの then は、…

2 つめの then の中のfunctionは、 …

293 :Name_Not_Found:2018/01/12(金) 21:26:37.01 ID:???.net
>>292
ありがとうございます。

asyncFunction()
.then(function (value) {
console.log(value); // => 'Async Hello world'
asyncFunction()
}).then(function (value) {
console.log(value); // => 'Async Hello world'
})

この書き方では動かないのは、これではpromiseが返ってこないということです…かね?
説明が下手で本当に申し訳ないです。

294 :Name_Not_Found:2018/01/12(金) 21:28:31.31 ID:???.net
Promiseのthenメソッドが返すPromise Tはthenメソッド中でPromise Rを返した場合
Rの解決を待って、その解決値を持ってTが解決されることになる
つまり実質的にT==Rと言うように振る舞わせることが出来る
つまり、
非同期A .then( Aの解決値を得て、別の非同期Bを実行 ) .then( Bの解決値を得て、別の非同期Cを実行 ) .then ......
というようにどんどんthenを繋げて行くことができる

勿論then中でそのチェーンとは独立したPromiseを作成することを繰り返してもいいが、
そうすると所謂コールバック地獄のようにネストが深くなってしまう
それを平坦化するためにこの機能がある

295 :Name_Not_Found:2018/01/12(金) 23:00:30.24 ID:???.net
2つめのthenで捕まえられるようにだろ。

296 :Name_Not_Found:2018/01/12(金) 23:01:42.96 ID:???.net
失礼、リロードしてなかった。

297 :Name_Not_Found:2018/01/12(金) 23:12:06.81 ID:???.net
>>293
Promiseをreturnするのが自然だけど
気持ち悪いなら別にこう書いたって良い
https://jsfiddle.net/4kks4bns/

298 :Name_Not_Found:2018/01/12(金) 23:45:26.63 ID:???.net
皆さん、ありがとうございました。
ようやく納得がいきました。

299 :Name_Not_Found:2018/01/13(土) 00:15:17.83 ID:???.net
この流れで理解できたのか・・・?
なんか質問者も回答者もずれまくってる気がするんだが

300 :Name_Not_Found:2018/01/13(土) 00:27:58.22 ID:???.net
なぜか納得してるようだが、これで納得できるはずがないので勝手に説明するわ

まず基本(?)系。thenを二回続けているが、asyncFunction()は
一回しか読んでないパターン

asyncFunction()
 .then(function (value) {
  console.log(value); // => 'Async Hello world' ・・・(1)
 }).then(function (value) {
  console.log(value); // => undefined ・・・(2)
 });


(2)でundefinedになっているのは、1回目のthenで何もreturnしてないから
JavaScriptは関数で何もreturnしてない場合はundefiendになる
(Rubyなどのように最後に評価された値ではない)

次のように、thenでreturnすれば次のthenの関数の引数に渡すことができる

asyncFunction()
 .then(function (value) {
  console.log(value); // => 'Async Hello world' ・・・(1)
  return value;
 }).then(function (value) {
  console.log(value); // => 'Async Hello world' ・・・(2)
  return value;
 });

301 :Name_Not_Found:2018/01/13(土) 00:37:04.30 ID:???.net
>>300の例では、return valueと単なる値を返した、
単なる値を返すと、次のthenの引数になるが、
単なる値の代わりにPromiseオブジェクトを返すこともできる

function newPromise() {
return new Promise(function (resolve, reject) {
 resolve('new-promise');
});
}

asyncFunction()
 .then(function (value) {
  console.log(value); // => 'Async Hello world' ・・・(1)
  return newPromise(); // 参考 return Promise.resolve('new-promise') と書いても良い
 }).then(function (value) {
  console.log(value); // => new-promise' ・・・(2)
  return value;
 });


この場合、2番目のthenの関数の引数には、Promiseオブジェクトが渡されるのではなく、
Promiseでresolveされた値(new-promise)が渡される

もしnewPromiseがresolveするまでに時間がかかる場合は、
2番目のthenが呼び出されるまで時間がかかるということ
thenで単なる値を返した場合は、次のthenはすぐに実行される。
すぐにresolveされたのと同じだと考えればいい

このように、thenでreturnするのは単なる値でもPromiseオブジェクトでも良いという
仕様のために、Promiseを返さない単なる関数をあとからPromiseに変えても
同じように動かすことができる。同期と非同期の違いを吸収していると考えることができる。

302 :Name_Not_Found:2018/01/13(土) 00:45:35.15 ID:???.net
>>290でreturnしない場合、

asyncFunction() ・・・(a)
 .then(function (value) {
  console.log(value); // => 'Async Hello world' ・・・(1)
  asyncFunction() ・・・(b)
 }).then(function (value) {
  console.log(value); // => undefined ・・・(2)
 })


(a)のasyncFunction()につながってるthenの結果として
(1)と(2)のconsole.logが実行される。
(2)のconsole.logがundefinedなのは間違いではない。
なぜならthenでreturnしてないのだから当然undefinedになる

(b)のasyncFunction()は何の意味も持たない。なぜなら(b)がresolveしても
その後にthenがないので(b)の結果としては何も出力しない

returnした場合は意味が異なる。(a)の1番目のthenの戻り値はPromiseオブジェクト
そのため(b)がresolve()された後にresolve()された結果が2番めのthenに渡される。

asyncFunction() ・・・(a)
 .then(function (value) {
  console.log(value); // => 'Async Hello world' ・・・(1)
  return asyncFunction() ・・・(b)
 }).then(function (value) {
  console.log(value); // => 'Async Hello world' ・・・(2)
 })

注意として(1)のvalueと(2)のvalueは(同じ文字列だが)違うオブジェクト
(1)は(a)がresolve()された結果だが、(2)は(b)がresolve()された結果

303 :Name_Not_Found:2018/01/13(土) 00:49:38.49 ID:???.net
>>290

> 以前も別件でfoo.map( ( x ) => x*2 )を
> foo.map( ( x ) => { x*2 } )と書いてしまい、returnでハマりました。

これは単純な勘違いをしているだけ
{ } を省略したら return も省略できる
{ } で囲んだら return が必須
というだけの話

個人的にはアロー関数は、関数っぽく見えないのも利点の一つだと思ってるので
前者の書き方をおすすめする。 { } をつけて returnを書いて、ましてや { } の中に
複数の式や文を書くのはなんか違うと思ってる

304 :Name_Not_Found:2018/01/13(土) 02:25:38.45 ID:???.net
>>287
これ何に描画してんの?

305 :Name_Not_Found:2018/01/13(土) 09:05:24.97 ID:???.net
>>303
ありがとうございます。自分の納得は低レベルでした。
めちゃくちゃわかりやすかったです。精進します。

306 :Name_Not_Found:2018/01/13(土) 20:09:36.72 ID:???.net
>>303
お前それforEachさんの中でもおんなじこと言えんの?

307 :Name_Not_Found:2018/01/13(土) 20:12:13.36 ID:???.net
forEachとか使わないな。
普通はmapとか使う

308 :Name_Not_Found:2018/01/13(土) 22:06:05.52 ID:???.net
個人的にforEachは名前をforやeachにしなかったのが結構な失敗だと思ってる

309 :Name_Not_Found:2018/01/13(土) 22:33:45.51 ID:???.net
>>307
普通って何よ。お前の普通なんて知らんがな。
javascriptで副作用だけ使いたい場面なんていくらでもあるだろう。
console.log使って例示すると、
['foo', 'bar'].forEach(item => {
console.log(item);
});
map使うってお前…これをお前は
['foo', 'bar'].map(item => console.log(item));
と書くのか?
[undefined, undefined]なんて生成してなんに使うの?
なんでもかんでもmapはダメだろ。それぞれ想定されてる用途がある。
あとアロー関数の{}にreturn必須とか嘘教えんな。

複数の文を書くなと言うのもどういうことだ。
ちょっとしたcompare function書くとき、読みやすさや入力値チェック処理などで複数行になったらアローじゃなくてfunction(){}使えってこと?
どんなオレオレルールだ。わけの分からない縛りいれるのならアロー関数なんてやめたら。
['大', '小', '小', '中', '中', '大'].sort((a, b) => {
const order = ['小', '中', '大'];
return order.indexOf(a) > order.indexOf(b);
});

310 :Name_Not_Found:2018/01/13(土) 23:07:38.78 ID:???.net
普通こうやるからなぁ

console.log(['foo', 'bar']);

311 :Name_Not_Found:2018/01/13(土) 23:21:26.18 ID:???.net
おじいちゃん、配列の要素をそれぞれログするのと配列をそのままログするのは違うでしょ。
前者は
foo
bar
後者は
[ 'foo', 'bar' ]
になるでしょ。
ロシアのえんぴつ的なことが言いたいならそもそもブラウザのデベロッパーツール使えばいいでしょ。
でもそういう話じゃないから。

312 :Name_Not_Found:2018/01/13(土) 23:25:42.43 ID:???.net
まあ普通にこうかくだろうな
何度もconst order = ・・・を実行するのは無駄だし

const order = ['小', '中', '大'];
const data = ['大', '小', '小', '中', '中', '大'];
data.sort((a, b) => order.indexOf(a) > order.indexOf(b));

313 :Name_Not_Found:2018/01/13(土) 23:27:40.62 ID:???.net
>>312
ごもっともな指摘。
もっとちゃんとした例考えないとな…

314 :Name_Not_Found:2018/01/13(土) 23:30:14.31 ID:???.net
ちなみに最後の
data.sort((a, b) => order.indexOf(a) > order.indexOf(b));
は、order.indexOfを二回書くの無駄だと思わね?

lodash使うとこう書ける
_.sortBy(data, v => order.indexOf(v));

315 :Name_Not_Found:2018/01/14(日) 01:12:23.56 ID:???.net
へぇー思想違うんだなぁ。
考えてみてもこの仕様で困る例が思い付かない。
素のsortでは表現できてlodashのsortByでは無理な比較仕様ってあるのかな

316 :Name_Not_Found:2018/01/14(日) 01:35:02.67 ID:???.net
思想? 違いがあるとしたら
まあ何かやりたいことがあって、それを実現するためには
どういうふうに処理したらいいか?と考える人と
やりたいことがそのままコードになってないと気がすまない人の違いかな

俺は「文字の小さい順に並び替えたい」と思ってるから
コードには「文字」「大小を求める」「並び替える」この3つぐらいしか
登場してほしくないんよ。人間の思考の通りのコードになって間違いが少なくなる

一方で、並び替えるには文字と文字をそれぞれ数値化したものを比較する関数を
ソート関数に渡せば実現できるという、やりたいことを処理に置き換えてからコードにするやつもいる
処理を考えてしまうから、こっちのやり方では冗長化してしまうんだよ。それが困ることだな

317 :Name_Not_Found:2018/01/14(日) 09:38:18.99 ID:???.net
>>316
あれは何に描画してんの?

318 :Name_Not_Found:2018/01/14(日) 18:32:38.21 ID:???.net
>>315
あり得そうな気がするが、相当なレアケースじゃないかな。事実上困らない

319 :Name_Not_Found:2018/01/14(日) 18:37:15.54 ID:???.net
複数の値で比較したい場合はどうすんの?

320 :Name_Not_Found:2018/01/14(日) 23:29:09.25 ID:???.net
>>319
こういうこと?

https://lodash.com/docs/4.17.4#sortBy

var users = [
{ 'user': 'fred', 'age': 48 },
{ 'user': 'barney', 'age': 36 },
{ 'user': 'fred', 'age': 40 },
{ 'user': 'barney', 'age': 34 }
];

_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]

321 :Name_Not_Found:2018/01/15(月) 06:30:58.52 ID:???.net
ライブラリ使う必要ない場面で
ここでしか見ないナントカってのを執拗に勧めるやつまだいたのか
害悪だなぁ

322 :Name_Not_Found:2018/01/15(月) 14:39:23.27 ID:???.net
ここでライブラリを使うって事は間違ってないと思うよ
ただsortByっていう名前での
結局ライブラリを覚えないと自明ではない振る舞いは好きじゃないし
それがこの一時で便利だとは思わない

323 :Name_Not_Found:2018/01/15(月) 15:17:45.29 ID:???.net
さよかw

324 :Name_Not_Found:2018/01/15(月) 23:13:05.92 ID:???.net
>>322
sort by というのは例えばRuby標準にも有るしよく知られた単語なんだよ

プログラマにとって、for といえば ループねって
わかるように、sort by というだけで何をするのか知ってるもの

それに対して、オレオレライブラリで勝手な名前を作ると困る
それが何をするのかわからない

同じ覚えることでも、一般的なものを覚えるのと
プロジェクト固有のものを覚えるのとでは、覚える価値が違う

lodashはよく知られたアルゴリズムをよく知られた名前で実装してるので
覚える価値が高い。たとえ使わなくても知っておいたほうが良いものばかりだよ

325 :Name_Not_Found:2018/01/16(火) 07:49:09.00 ID:???.net
他の言語にあるって然程重要では無いと思うけどね
特に補完が弱い動的型付け言語のJSでは
いかに他のJS周りの標準と命名規則を揃えて
振る舞いや型を想像付かせるかが大事

JSにsortByのような文化は無いのだから
なんぼRubyやらにそれがあると言われても
多くのJSerはローダッシュのsortByと覚えることになるのよ

326 :Name_Not_Found:2018/01/16(火) 14:05:09.25 ID:???.net
>>319-320
Kotlin なら

Kotlin 2
https://mevius.5ch.net/test/read.cgi/tech/1509462463/18

327 :Name_Not_Found:2018/01/16(火) 22:43:30.12 ID:???.net
>>325
> JSにsortByのような文化は無いのだから

世界が狭いな。
あんたはJSの世界に生きてるわけか

俺はプログラマの世界に生きてるんだよ。
JSはそのプログラマの世界の一地域にすぎない

328 :Name_Not_Found:2018/01/17(水) 08:43:29.78 ID:???.net
俺様の世界w

329 :Name_Not_Found:2018/01/17(水) 09:10:46.47 ID:???.net
>>327
それは日本人に会った時世界の挨拶だからと言ってハグするようなもんだぞ

330 :Name_Not_Found:2018/01/17(水) 22:13:04.85 ID:???.net
>>329
それは的はずれだな。

今言ってる世界っていうのは、広さの話をしてる
JSの世界っていうのはプログラマの世界の一部

331 :Name_Not_Found:2018/01/17(水) 22:58:51.39 ID:???.net
プログラマの世界も狭くね?

332 :Name_Not_Found:2018/01/17(水) 23:20:47.83 ID:???.net
>>331
今は相対的な話をしているので、
プログラマの世界よりも○○の世界が広い言い方をしてくれない困る
そして○○が話と全く関係ない世界だとそれは意味がない

333 :Name_Not_Found:2018/01/18(木) 02:32:12.39 ID:???.net
JSerの価値観っていう話でさえ既に十分に大袈裟で広い話なのに
JS質問スレにプログラマの世界(しかも一部の>>327が好きな言語限定)とか持ち込まれてもな

334 :Name_Not_Found:2018/01/18(木) 22:44:43.52 ID:???.net
好きな言語限定?

いろんな言語の知識を持っていると
好きな言語以外の話も持ち込むよ?

本当にあんた世界が狭いねw

335 :Name_Not_Found:2018/01/19(金) 19:22:45.51 ID:???.net
すんごく初歩的なことで申し訳なさでいっぱいなんですが教えて下さい

clickイベントリスナをつけた<button>や<input>があって
これをdisabled="disabled"やelement.disabled = trueでdisabledにしたとき
<button>や<input>をclickしてもイベントは発火しない

これ合ってます?この挙動普通?

336 :Name_Not_Found:2018/01/19(金) 20:01:38.96 ID:???.net
>>334 見てて恥ずかしい奴だな もう口を開くな

337 :Name_Not_Found:2018/01/19(金) 21:07:59.84 ID:???.net
>>336
断るw いくらでも言うよ?見たくない、聞きたくないなら、
俺に何かをさせるんじゃなく、あんたが自分で行動しなきゃだめだよ

338 :Name_Not_Found:2018/01/19(金) 21:40:56.60 ID:???.net
自演しつけえ
お前が低レベルなことはみんなわかってるからw

339 :Name_Not_Found:2018/01/19(金) 21:42:43.07 ID:???.net
みんなって誰?
一人何役してるの?

340 :Name_Not_Found:2018/01/19(金) 21:51:27.37 ID:???.net
>>321-325,327-334,336,337,339
とりあえずこれ全部低レベルな1人の自演

341 :Name_Not_Found:2018/01/19(金) 21:57:49.59 ID:???.net
はい、はずれw

それはいいからどこが低レベルなのか
その理由を言ってみたら?
言えなきゃ言えないやつが低レベルってことだし

342 :Name_Not_Found:2018/01/19(金) 22:25:39.03 ID:???.net
>>340
君って俺様の世界なんだよねw

343 :Name_Not_Found:2018/01/19(金) 22:37:48.12 ID:???.net
なぜ自作自演だって見抜いただけで
俺様の世界ってことになるのか?

344 :Name_Not_Found:2018/01/19(金) 23:24:00.06 ID:???.net
ばれて必死になりすぎ

345 :Name_Not_Found:2018/01/19(金) 23:26:25.72 ID:???.net
>>343
自演なんだろ?お前の中ではな
って言えば理解できるかい?

346 :Name_Not_Found:2018/01/20(土) 09:02:51.37 ID:???.net
俺様の世界のグローバル化

347 :Name_Not_Found:2018/01/20(土) 11:18:39.49 ID:???.net
アジアではこういう考え方が主流なんだから狭い価値観に捕われるなって言うのと
その前にここは日本人による日本人のためのスレなんだから日本の考え方を深く学ぶべきって言うのと
アジア基準が常識とか中途半端で恣意的な価値観だなっていうヤジの3つに分けれてる

348 :Name_Not_Found:2018/01/20(土) 11:48:39.11 ID:???.net
質問スレなんだから質問とそれに対する回答だけでいいんだよ
考え方とかどうこうはいらない
自分の考え方と違うなら「こういうやり方もあるよ」と自分なりの答えを書けばいい
どれを採用するかは質問者の自由

349 :Name_Not_Found:2018/01/20(土) 12:14:57.76 ID:???.net
つまり自分なりの考えを書くんですね?

350 :Name_Not_Found:2018/01/20(土) 12:32:06.88 ID:???.net
「考え」は書くな
「答え」を書け
ただし質問に書いてもいないライブラリやフレームワーク持ち出すのはただのバカだからNGだろ

351 :Name_Not_Found:2018/01/20(土) 12:53:03.62 ID:???.net
書いてもいないライブラリやフレームワークが答えの場合だってあるだろ?

ってか答を知らないから質問する訳で
答を質問に書くわけがない

352 :Name_Not_Found:2018/01/20(土) 14:03:12.49 ID:???.net
お前らwshスレって落ちました?
質問しようとしたらスレッド一覧にない・・・

353 :Name_Not_Found:2018/01/21(日) 09:24:46.83 ID:???.net
関数へ引数の渡し方が、func(A)、func(B)、func(A, B)、の3種類(のみ)。
(A, B)の場合は共に実行。

関数内は、A、Bそれぞれ同じ処理。例えば$('#hoge-' + A).〜。
処理は長いのでif分岐は重複が多すぎ。

yobidasi(A);
yobidasi(A, B);

function func1(arg1, arg2){
func2(arg1);
if(arguments.length === 2){func2(arg2)};

function func2(arg){
$('#hoge-' + arg).〜;
$('#hage-' + arg).〜;
}
}

より簡単な書き方教えてください。

354 :Name_Not_Found:2018/01/21(日) 10:23:17.94 ID:???.net
そもそもfunc(A);func(B);で良くねとは思うけど

function func(...args) {
for (let arg of args) {
// $('#hoge-' + arg).〜;
// $('#hage-' + arg).〜;
}
}

355 :Name_Not_Found:2018/01/21(日) 12:37:55.62 ID:???.net
> 関数へ引数の渡し方が、func(A)、func(B)、func(A, B)、の3種類(のみ)。
> (A, B)の場合は共に実行。

その(A, B)をやめろって話だな

356 :Name_Not_Found:2018/01/21(日) 17:21:55.95 ID:???.net
>(A, B)をやめろ

そうなのですが、すると
yobidasi(A);
yobidasi(B);
となり、yobidasiの類は20種類あるので40行になってしまいまして。

357 :Name_Not_Found:2018/01/21(日) 17:38:24.17 ID:???.net
yobidasi(A), yobidasi(B);
で良いじゃん

358 :Name_Not_Found:2018/01/21(日) 20:35:03.46 ID:???.net
>>354
forループはオブジェクトのみ推奨って先生が言ってなかったっけ?

359 :Name_Not_Found:2018/01/21(日) 22:28:35.52 ID:???.net
いいんだよ、俺様の世界なんだから

360 :Name_Not_Found:2018/01/21(日) 22:40:32.35 ID:???.net
>>358
その「先生」は担任の先生って言う意味で素人だろw

361 :Name_Not_Found:2018/01/21(日) 23:13:52.24 ID:???.net
>>360
google先生だろ
SEO少しでもかじったのならすぐピンとくる

362 :Name_Not_Found:2018/01/21(日) 23:15:40.97 ID:???.net
>>361
オマエ馬鹿だろ JavaScriptって知ってるか?

363 :Name_Not_Found:2018/01/21(日) 23:32:03.53 ID:???.net
まさかSEOとjsが関係ないとでも

364 :Name_Not_Found:2018/01/21(日) 23:39:42.75 ID:???.net
> forループはオブジェクトのみ推奨って先生が言ってなかったっけ?

これがSEOと関係があるとでも?
ないない

365 :Name_Not_Found:2018/01/22(月) 00:04:07.14 ID:???.net
Objectのみ推奨ってのはfor-inのことだろ

366 :Name_Not_Found:2018/01/22(月) 00:22:17.35 ID:???.net
SEO関係あるもん!

367 :Name_Not_Found:2018/01/22(月) 10:08:34.84 ID:???.net
>>356
>>354でもいいけど、
とにかく君に一番必要なことは配列を覚えることだな

368 :Name_Not_Found:2018/01/22(月) 16:42:21.74 ID:???.net
js初心者です。

var accounts = {
'mail@address1': 'user1',
'mail@address2': 'user2',
...
'mail@address100': 'user100',
'mail@address n': 'user n',
}

このように別のプログラムで使用してるオブジェクト型の文字データがありましてそれを利用したいのですが
うまく行かないので教えてください。
オブジェクトのデータの登録数は不定の為、メールアドレスとユーザー名を1セットと考え総数をカウントしたいのと
n番目のメールアドレスとユーザー名を文字列データで取得したい。
全部を読み取って文字列配列にいれてもOKですし、n番目のデータは何と返すだけでも構いません。

例えば 登録総数111で100番目のデータを取得した場合
100/111 のデータは、ユーザーはuser100でアドレスはmail@address100です のように出来るとありがたいです。

369 :Name_Not_Found:2018/01/22(月) 18:23:42.71 ID:RO0qKM/0.net
スクレイピングのサイト巡回を自動化するスクリプトかいてて
テストでクロムの開発者ツールでいろいろためしているんだけど
ログインが必要なサイトで名前とかのフォーム入力まではできたのですけど
それをsubmitするほうほうがわかりません。
「送信」ボタンのセレクターからノード?オブジェクトを取得。
例えば var button = document.querySelector('セレクター')

それにbutton.submit()という感じでsubmit()をつけてみたけど↓みたいなエラーがでます
どうすればいいのでしょうか?

button.submit()
VM775:1 Uncaught TypeError: button.submit is not a function
at <anonymous>:1:8

とコンソールにエラーがでます

370 :Name_Not_Found:2018/01/22(月) 18:43:34.12 ID:???.net
>>362が何言いたいのかわからん

371 :Name_Not_Found:2018/01/22(月) 19:12:58.02 ID:???.net
配列はfor かfor of
for in はオブジェクとって本に書いてた

372 :Name_Not_Found:2018/01/22(月) 19:53:51.03 ID:???.net
>>367
配列でもあんま変わらなくね?

373 :Name_Not_Found:2018/01/22(月) 20:04:42.30 ID:RO0qKM/0.net
>>368
自分も初心者だとことわっておくけど
mapオブジェクト使えば?

マップオブジェクトの作成
var mail = new Map()
中身の追加
mail.add('name3','address3')
IDとの名前の対応表を作成
var id = {1:"name3"}

要素数の取得
var size = mail.size
console.log(size)

名前からアドレスの取得
console.log(mail.get('name3'))

374 :Name_Not_Found:2018/01/22(月) 20:08:18.30 ID:RO0qKM/0.net
中身の追加 はaddじゃなくてsetだった
mail.set('name3','address3')

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype

375 :Name_Not_Found:2018/01/22(月) 20:28:08.39 ID:RO0qKM/0.net
>>369
自己解決しました
formエレメントの要素オブジェクトにsubmitをつけるんですね

376 :Name_Not_Found:2018/01/22(月) 21:40:41.15 ID:???.net
>>368
Object.keys(accounts)でキーの配列を取得できる
総数が欲しいならObject.keys(accounts).length
ES2017からはObject.entries(accounts)が理想的

ただし順序は保証されない
可能ならオブジェクトは避けるべき

377 :Name_Not_Found:2018/01/22(月) 22:18:37.71 ID:???.net
>>373,376
ありがとうございます!
一歩先にすすめそうです

378 :Name_Not_Found:2018/01/22(月) 23:43:57.35 ID:RO0qKM/0.net
<div ng-if="vm.isProgressBarShowing()" qa-value="{"label": 90,"percentage" :0.9}"
qa-id="jss-score" eo-round-progress="" round-progress-model="vm.roundProgressData"
round-progress-width="210" round-progress-height="210" round-progress-outer-circle-width="15"
round-progress-outer-circle-radius="95" round-progress-label-font="40pt Gotham SSm" class="ng-scope"><canvas width="210" height="210" class=""></canvas></div>

これから一行目のqa-valueの90を正規表現でstringを解析する方法以外で取り出す方法ってありますか?
obj.qa-valueとかobj.qa-value.labelではとりだせないのですが

379 :Name_Not_Found:2018/01/22(月) 23:59:04.35 ID:???.net
>>378
そりゃあるだろうけど、それってangularだよな?
angularのやり方でやれば良いんじゃないの?

まあ俺はそのやり方を忘れたけどなw
アレだろ?jsの変数にバインドされてるってやつ

380 :Name_Not_Found:2018/01/23(火) 00:03:29.33 ID:WLPFoLKy.net
>>379
angularってやつなのですか。
聞いたことはありますが全く知らないです。
勉強しないといけないことおおすぎる。。。

381 :Name_Not_Found:2018/01/23(火) 00:43:41.02 ID:WLPFoLKy.net
obj.getAttribute('qa-value')でとれました!!!!
感動!!!

382 :Name_Not_Found:2018/01/23(火) 00:48:19.81 ID:???.net
とれるっていうのならそうなんだろうけどさ
angularのやり方じゃねーぞ?
それで良いのか悪いのか知らんけどさ
普通は正しくないやり方だろうな

383 :Name_Not_Found:2018/01/23(火) 15:14:35.38 ID:???.net
勝手なやり方をしたら、ダメ!
フレームワークのやり方に従っていないのなら、誤動作を起こす

Angular を勉強すべし

384 :Name_Not_Found:2018/01/23(火) 20:05:46.77 ID:???.net
>>367
最初配列でやってたのですがA,値,B,値という形もあり、
また通しで見てるとABの方がどっち渡してるか一目でわかりやすいので変えました。
どうもでした。

385 :Name_Not_Found:2018/01/24(水) 01:04:14.72 ID:UdszAn8A.net
>>383
jQueryもやりたいんだけど
AngularとjQueryどっちをさきにやればいい?

386 :Name_Not_Found:2018/01/24(水) 02:08:15.18 ID:???.net
何を目指すかによる
JavaScript必須なページを作りたいならAngular

387 :Name_Not_Found:2018/01/24(水) 08:55:26.78 ID:UdszAn8A.net
今一番やりたいのはスクレイピングで
次にデータ可視化なんで
サイトの仕組みの理解とスクレイピングのスクリプトかくためにJavaScriptの勉強初めたんだけど
jQuery使ってるサイトが多いのであとでjQueryもやろうとおもってたけど

JavaScriptの勉強一通りおわったら
Angurlarやってみることにしました
そのあとD3やるかな
ほんでひつようそうだったらjQueryやるかな
やることおおすぎ。。。

388 :Name_Not_Found:2018/01/24(水) 23:13:43.54 ID:???.net
var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var r = s.match(/\<tag\>(.*?)\<\/tag\>/g);
console.log(r);
とすると結果は
["<tag>hoge</tag>", "<tag>poge</tag>", "<tag>fuge</tag>"]
になります
つまりグループ化した部分を取り出していません
gスイッチを使った場合はグループ化を使えないのでしょうか?
こういう場合どうするのがいいのでしょうか?

389 :Name_Not_Found:2018/01/24(水) 23:14:33.52 ID:???.net
スクレイピングなら、Angular なんて関係ない。
君が、たまたま、Angular製のページを対象にしただけだろ

JavaScript なら、jQuery は必須

Ruby で、Nokogiri とか、

Selenium WebDriver, PhantomJS とか、
Chromium, Chrome のヘッドレスモードとか

390 :Name_Not_Found:2018/01/24(水) 23:22:55.14 ID:???.net
>>388
グループ化した部分ってどこ?
グループ化って何のこと?

391 :Name_Not_Found:2018/01/24(水) 23:24:07.94 ID:???.net
>>388
jQuery を使え

$('tag').text();

392 :Name_Not_Found:2018/01/24(水) 23:25:21.67 ID:???.net
>>390
(.*?)のことです
正規表現において一般的な用語だと思いますが

393 :Name_Not_Found:2018/01/24(水) 23:37:05.77 ID:???.net
結局、jQuery でも、Ruby のNokogiri でも、
取得する要素を、CSS セレクターで指定するのは同じ

上はjQuery、下はNokogiri

$('tag').text();
doc.css('tag').text

xpath で指定するのではなく、CSSセレクターの方が、簡単に指定できる

394 :Name_Not_Found:2018/01/24(水) 23:49:50.17 ID:???.net
正規表現では、データに親子関係のような構造があるものは、うまく取れない

<tag1><tag2></tag2></tag1>

このように要素がネストしていると、<tag1></tag2> が対応してしまうから

jQuery とか、Ruby のNokogiri で、
取得する要素を、CSS セレクターで指定する

395 :387:2018/01/24(水) 23:54:01.21 ID:???.net
失礼、(.*?)だけを取り出したいってことか

gフラグは正規表現全体で配列にする

ので、こんなのしか思いつかない

let s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
let regex = /\<tag\>(.*?)\<\/tag\>/;
let result = [];
while(s){
s = s.replace(regex, (...args) => {
result.push(args[1]);
return '';
})
}
console.log(result);

入れ子は考慮せず
そこまでやると複雑すぎてどうにもならない

396 :392:2018/01/25(木) 00:07:22.24 ID:???.net
>>395
while(s)
じゃなくて、
while(regex.test(s))
のほうがいいかも

DOM(jQueryでもできるはず)で、

let div = document.createElement('div');
div.innerHTML = s;
let elements = div.querySelectorAll('tag');
// で、各elementsのtextContentを取得

というのもありかと
タグの入れ子は考慮せず

397 :Name_Not_Found:2018/01/25(木) 01:19:36.76 ID:???.net
https://qiita.com/honeydaisuki/items/d2a38cef1b95fd347fa4
これ?
最短マッチと最長マッチ

398 :Name_Not_Found:2018/01/25(木) 06:23:05.64 ID:???.net
String.matchで正規表現にgオプションをつけるとキャプチャが取れるのかどうかの話で答えは上の通り「取れない」
RegExp.execを(複数回)使うか正規表現をやめてHTMLパーサを使うかだが正直後者を推奨する

399 :Name_Not_Found:2018/01/25(木) 09:05:37.30 ID:???.net
var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
根本的に参照が間違っている

400 :Name_Not_Found:2018/01/25(木) 10:29:09.69 ID:???.net
HTMLタグならHTMLパーサーやXMLパーサーが使えるけど
正規表現はセパレーターがタグ(<>記号で囲まれた文字列)でない場合でも使える

401 :Name_Not_Found:2018/01/25(木) 20:01:44.28 ID:???.net
var resAry = [];

function replacer(match, p1) { resAry.push(p1); };

var oldStr = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';

var re = new RegExp('\<tag\>(.*?)\<\/tag\>', 'g');

// 第2引数は、コールバック関数
oldStr.replace(re, replacer);

console.log(resAry); // ["hoge", "poge", "fuge"]

String.prototype.replace()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

402 :Name_Not_Found:2018/01/26(金) 01:32:12.62 ID:???.net
jsで初めてプロトタイプベースに触れたけど、最初クラスベースとの違いに混乱して悪態ついたりしたけど今じゃクラスベースより好きだわ。
js以外クラスベースが主流なのは大規模設計手法が確立されてるというエンタープライズ用途のためってことかな?
それにしてもプロトタイプベースのメジャー言語なさすぎじゃ…

403 :Name_Not_Found:2018/01/26(金) 02:05:33.69 ID:???.net
あ、お題はこれでいいんじゃないか?

var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var r = s.split(/<\/?tag>/g).filter(item => item !== '');
console.log(r); // ["hoge", "poge", "fuge"]

404 :Name_Not_Found:2018/01/26(金) 02:07:33.86 ID:???.net
すまん空文字列はfalsyだから比較要らんわ訂正

var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var r = s.split(/<\/?tag>/g).filter(item => item);
console.log(r); // ["hoge", "poge", "fuge"]

405 :Name_Not_Found:2018/01/26(金) 02:13:06.24 ID:???.net
グローバルスイッチも要らんかった…
これからゲームしようと思ってたけどもう寝とくわ…

var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var r = s.split(/<\/?tag>/).filter(item => item);
console.log(r); // ["hoge", "poge", "fuge"]

406 :Name_Not_Found:2018/01/26(金) 02:29:08.11 ID:???.net
クラスベース言語が多いのは皆C++に影響を受けているから
多くの言語は別に人間工学的や信念として選んでいるのではなく揃えるのが無難だからそうしているだけ
C++がクラスベースなのはCの構造体からの自然な発想
CにOOPを組み込むに当たって当然プロトタイプベース的な方向にはなり得ない

JSがプロトタイプベースなのはクラスベースのインタプリタエンジンは実装も大変で
生半可なものではシンプルなプロトタイプベースに比べて性能を出すのが難しいという事実があるから
また、スクリプト言語としてはクラスに縛られるというのは不便となることも多い

クラスかプロトタイプかと言うよりはクラスベースを選んだか、選ばなかったかという違い

407 :Name_Not_Found:2018/01/26(金) 02:57:54.16 ID:???.net
よっしゃジャバスクリプトの勉強始めるで!
お前らよろしく!!!!!!!!!!!

408 :Name_Not_Found:2018/01/26(金) 09:55:40.02 ID:???.net
プロトタイプベースは型システムとの相性が良くない, 気がする

409 :Name_Not_Found:2018/01/26(金) 10:32:36.63 ID:???.net
htmlをStringで参照していることが笑えるw

410 :Name_Not_Found:2018/01/26(金) 13:42:13.67 ID:???.net
独学で参考書をペン片手に読んでる。今2冊目。
読み終えたところまでのコード解読はいける。
まだまだ何もできないけど
まずは基礎知識の積み重ねが大事だなと深く感じてる

411 :Name_Not_Found:2018/01/26(金) 14:52:29.75 ID:???.net
ペン片手は駄目 キーボード片手でないと
とにかくサンプルを試して、自分で改変して仕組みを学び
分からない所は調べてそのうち1%でも理解したような気になるようにする
本はあくまで導入と思うこと

412 :Name_Not_Found:2018/01/26(金) 17:20:08.99 ID:???.net
いいえ、自分にあったやり方を見つけているのでこの順番が自分にとって最善。

413 :Name_Not_Found:2018/01/26(金) 20:02:12.46 ID:???.net
なんで何もできない段階でそれが最善だと分かるのか謎だなぁ。
>>411もいいアドバイスだと思うんだが。
もちろん本でしっかり知識積み重ねるのも大事だとも思うよ。
しかしそもそもどういう意図で>>410書き込んだんだ?
エライエライ頑張れして欲しかったのかな?

414 :Name_Not_Found:2018/01/26(金) 21:10:49.59 ID:???.net
>>411はごく普通な方法だな。誰でもいえる事。

415 :Name_Not_Found:2018/01/26(金) 23:20:17.26 ID:???.net
jQuery で作った

var oldStr = '<div>hoge</div><div>poge</div><div>fuge</div>';
$('body').append(oldStr);

var resAry = [];
$( 'div' ).each( function(){ resAry.push( $(this).text() ); } )

console.log( resAry ); // ["hoge", "poge", "fuge"]

416 :Name_Not_Found:2018/01/27(土) 01:31:35.31 ID:+mZ3NtMu.net
やり方なんて自分が一番吸収しやすい方法をみつければいいんだよ
こればかりは人によって違うもの。

417 :Name_Not_Found:2018/01/27(土) 01:51:37.67 ID:???.net
まだまだ何もできないのにどうしてそれが最善なの?
その人の最善の方法見つけるには他の方法も試さなきゃダメでは?
合理化とか埋没費用の誤謬とかで既に時間かけた方法に固執してるだけでは?

418 :Name_Not_Found:2018/01/27(土) 02:19:18.35 ID:???.net
jQueryありなの?ならこうするわ。

var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
var r = $(s).get().map(item => item.innerHTML);
console.log(r); // ["hoge", "poge", "fuge"]

rのとこは
var r = $(s).map(function() {return this.innerHTML}).get();
でもいいけど。
上のmapはjavascriptネイティブのmapでこっちはjQueryのmapね念のため。

419 :Name_Not_Found:2018/01/27(土) 02:32:38.95 ID:???.net
var r = $(s).get().map(item => item.innerHTML);
var r = $(s).map(function() {return this.innerHTML}).get();
var r = $.map($(s), item => item.innerHTML);

jQuery.mapを使ったほうが僅かに短いよ

420 :Name_Not_Found:2018/01/27(土) 03:08:14.13 ID:???.net
ほんまや!

速度はどんなもんかperformance.now()で測ってみたけど長さ10のランダム文字列をtagでくくったものを1000個連結したもので確認した限り3つとも5ms前後で目立った差なかったわ。
もっと大きくなると差もあるかも知れないけど実用上はどれも問題ないね。

421 :Name_Not_Found:2018/01/27(土) 09:01:48.16 ID:???.net
また俺様の世界を語ってるのw

422 :Name_Not_Found:2018/01/27(土) 09:12:05.42 ID:???.net
>>421
おまえも語って良いんやで?

423 :Name_Not_Found:2018/01/27(土) 16:25:13.08 ID:+mZ3NtMu.net
>>417
試した上で書いてるのでは。

424 :Name_Not_Found:2018/01/28(日) 04:41:23.29 ID:???.net
その人の最適な方法とかいう魔法みたいなものはない
人間の脳はニューラルネットと同じなんだから
Web技術の情報、特に本の内容は糞な場合が多いという事実がある以上
沢山の検索と試行錯誤をして知識を積み重ねていって形にする以外はない
ブロックを積み上げるように体系的に学ぶのは無理
薄い絵の具を塗り重ねて絵を浮かび上がらせる感じしか無い

425 :Name_Not_Found:2018/01/28(日) 04:46:06.46 ID:???.net
>>424
お前Changelogに○○を最適化しましてって
書いてあったら、それは最適な方法じゃないって
いちいちツッコむのか?

426 :Name_Not_Found:2018/01/28(日) 04:57:00.46 ID:???.net
その最適化は恐らくoptimizationの訳語としての用法だから最善の方法を見つけ出しそして実装した!という意味ではないだろう。
virtual→仮想と並ぶ近代クソ訳語のひとつ。

427 :Name_Not_Found:2018/01/28(日) 18:13:39.13 ID:zZNs90iR.net
他者を認められない受け入れられないというのも
自分の、個人の考え方やり方なんだよね

428 :Name_Not_Found:2018/01/28(日) 20:11:26.66 ID:ZkfV466A.net
【ほら吹きマネク】マイトLーヤ「太陽凝視は危険」
http://matsuri.5ch.net/test/read.cgi/esp/1517129538/l50

429 :Name_Not_Found:2018/01/29(月) 01:29:43.15 ID:???.net
>>427
初心者と今活躍してる業界人とじゃけして平等ではないからな
色んな人に教えて自身でも色々失敗してきた経験を元に
無駄をしないようアドバイスしてるのであってそういうのは素直に聞くべき

430 :Name_Not_Found:2018/01/29(月) 08:15:52.37 ID:r/D88pTD.net
onclick="javascript:ac_tracer(

って何でしょうか?ボタン画像を挟む<a>タグ内にあります。

431 :Name_Not_Found:2018/01/29(月) 09:15:51.45 ID:???.net
イベントハンドラの設定方法のひとつです。
今回の場合onclickなのでクリックイベントのハンドラ。
クリックするとそこに書かれたJavaScriptコードが実行されます。

432 :427:2018/01/29(月) 10:53:12.05 ID:MncMfLpu.net
ありがとうございます。
このac_tracerというのは何でしょう?

433 :Name_Not_Found:2018/01/29(月) 10:55:50.48 ID:???.net
さあ?

434 :Name_Not_Found:2018/01/29(月) 11:52:50.50 ID:???.net
>>432
ブラウザの検証機能でコードを見るのが早い

435 :Name_Not_Found:2018/01/29(月) 11:54:02.20 ID:???.net
極悪onclick

436 :Name_Not_Found:2018/01/29(月) 12:19:15.81 ID:???.net
>>432
昔昔あるところに太郎という人が居ました
この太郎というのは何でしょう?

437 :Name_Not_Found:2018/01/29(月) 12:50:41.45 ID:???.net
>>432
銭湯に行ったらオッサンが湯につかっていました。このオッサンは何でしょう?

438 :Name_Not_Found:2018/01/29(月) 13:12:25.96 ID:???.net
あるところにおじいさんとおばあさんがいました。
さて私は誰でしょう?

439 :Name_Not_Found:2018/01/29(月) 13:29:23.97 ID:???.net
>>432
関数です。
ただし、ac_tracerという名前の関数はJavascriptに元々用意されているものでも、web開発者が利用するDOM APIのものでもないため、ユーザー定義関数、つまり誰かが何かの目的のために作った関数です。
つまり、作った人に聞くか、ac_tracerの定義部分を含むコードを読まなければ、この関数が何なのかエスパーを除き誰にも分かりません。

440 :Name_Not_Found:2018/01/29(月) 13:54:25.86 ID:???.net
長いキッスの途中で

441 :Name_Not_Found:2018/01/29(月) 15:44:45.33 ID:???.net
Fu Fu さりげなく

442 :Name_Not_Found:2018/01/29(月) 16:44:00.27 ID:???.net
首狩り族を倒した

443 :Name_Not_Found:2018/01/30(火) 00:37:08.63 ID:???.net
>>436
> この太郎というのは何でしょう?
人の名前では?

444 :Name_Not_Found:2018/01/30(火) 00:38:26.46 ID:???.net
>>443
そうだねイベントハンドラの設定方法のひとつだね

445 :Name_Not_Found:2018/01/30(火) 00:44:51.93 ID:???.net
>>438
> あるところにおじいさんとおばあさんがいました。
> さて私は誰でしょう?

そんなことよりよ、桃太郎の
おじいさんとおばあさん、子供がいないらしいぜ?

ってことは、おじいさんとおばあさんじゃないよな?
子供ができたら、やっとおとうさんとおかあさんになるはずだ
孫も子供もいないのにおじいさんとおばあさんというのはおかしすぎる

っていうか、子供いないのに孫を養子に取ることってできるのかよ?
孫悟空の孫じゃないぞ。子供の子供という意味の孫だ

446 :Name_Not_Found:2018/01/30(火) 02:07:29.66 ID:???.net
歳的な意味での爺婆だし
子供と言っても当然手続きもして無かろうし家系図にも組み込まれてないだろうし
桃太郎から見たらお父さんお母さんでも
全く関係ない第三者が伝聞として話したり聞く際にはふさわしくないと思う

447 :Name_Not_Found:2018/01/30(火) 04:58:54.24 ID:???.net
>>445
でもお前甥も姪もいないのにおじさんじゃん。

448 :Name_Not_Found:2018/01/30(火) 15:13:26.78 ID:???.net
>>445
【お祖父さん】 祖父(そふ)の敬称。
【お爺さん】 男の老人の敬称、また親しんで言う語。

449 :Name_Not_Found:2018/02/01(木) 08:38:52.20 ID:???.net
localStorageやsessionStorageなどwebStorageには文字列値しか保存できないとMDNで読んだ

でも[ 3, 6, 1, 23 ]や[ 'apple', 'orange', 'kiwi' ]など単純な配列は
特に変換することなしに、そのままsetItem()/getItem()できているようにみえる
値を取り出してすぐ直接push()やslice()などで操作できるしindexOf()もできてる

これはどういう理屈でこういう挙動になるんでしょうか?ブラウザが勝手にやってくれてる?配列関数が優秀?
試したのはMacのSafariとWindowsのFirefoxでsessionStorage利用

450 :446:2018/02/01(木) 09:12:03.27 ID:???.net
ごめん完全に気のせいだった

451 :Name_Not_Found:2018/02/01(木) 12:01:57.89 ID:???.net
http://sdsoffice.com/tools/homepage-patrol-v2b.html
上記サイトのwebサイトを巡回してくれるJavaScriptを利用をしようと思います。

windows8.1(64bit) + IE11の環境で、上記サイト上で実行させるには問題ないのですが、
htmlファイルとしてローカルに保存して、ローカルで実行するとエラーとなります。
(巡回してくれない)

windows7(64bit) + IE11の環境でしたら、ローカルでも問題なく動きます。

windows8.1でエラーになる原因がわかりません。
お詳しい方、力になっていただけないでしょうか?
よろしくお願いいたします。

452 :Name_Not_Found:2018/02/01(木) 22:16:16.86 ID:Es0XuYnt.net
別フレームに指定の複数のページをランダム時間(何分から何分の間ランダム)で表示する。

の参考資料とかありませんか?
十数年前「html」だったのか「javascript」か覚えていないけど
色んな例を組み合わせて作って偶然動いたことがあったのでどこかに保存しておいたんだけどなくなってしまったので・・・
よかったら教えてください。

453 :Name_Not_Found:2018/02/01(木) 22:38:53.38 ID:???.net
>>451
そもそも普通は、crossOrigin (CORS)アクセス禁止だろ

自分のPC 上の、HTML ファイルから、他のドメインにアクセスできないだろ。
iframe 内に、他のドメインのページを読み込んでも、
iframeの内外で、異なるサイトになるから、アクセスできない

自分のPC で、サーバーを立てて、それを経由しないとアクセスできない。
または、ネット上のそういうサーバーを利用するとか

以前使えていた、Yahoo Query Language (YQL) も、使えなくなった

454 :Name_Not_Found:2018/02/01(木) 22:41:17.04 ID:???.net
aからbまでの間でランダムは
a+(0からb-a)までランダムと表せられる
つまりa+Math.random()*(b-a)となる

455 :Name_Not_Found:2018/02/01(木) 22:42:29.86 ID:???.net
>>452
「iframe ランダム表示」で検索!

iframe 内に、他のドメインのページを、ランダムに読み込む

456 :Name_Not_Found:2018/02/02(金) 00:10:56.52 ID:???.net
あるある質問かもしれませんが
Javascriptのソースコードからコメントをすべて除去するツールなり方法ってどんなものがあるでしょうか?
単独のフリーソフトでも良いですし
atomのbeautify等、構文解析するプラグイン等にオマケでついていてもおかしくないと思うのですが
windows7を使っています

457 :Name_Not_Found:2018/02/02(金) 00:28:03.36 ID:???.net
<iframe src="#" id="ifrm"></iframe>

<script type="text/javascript">
window.onload = function(){

var urls = ['http://www.example.com', 'http://www.yahoo.co.jp', 'http://www.google.co.jp'];

// 0以上、3未満。つまり、0〜2
var idx = Math.floor( Math.random() * urls.length );

var ifrm = document.getElementById('ifrm');
ifrm.src = urls[idx];
}
</script>

これを、<body>タグの中に書いて実行すれば、毎回違うサイトが読み込まれる

458 :Name_Not_Found:2018/02/02(金) 00:46:27.79 ID:???.net
>>452
「jquery plugin カルーセル」で検索!

jQuery Plugin を探す方が、簡単かも

459 :Name_Not_Found:2018/02/02(金) 00:54:55.79 ID:???.net
>>456
「javascript コメント 削除 ツール」で検索!

460 :Name_Not_Found:2018/02/02(金) 02:38:55.11 ID:???.net
>>459
ありがとうお陰でbeautifierの反対語にminifierという言葉があることを知ってatom minifierを入れて解決しました

461 :454:2018/02/02(金) 04:53:16.01 ID:???.net
>>452
454 を修正した。
ランダム時間は難しくてできない。一定時間ならできる

以下を、<body>タグの中に書いて実行すれば、5秒毎に、違うサイトが読み込まれる。
タイマーを止めるには、clearInterval を使う

<iframe src="#" id="ifrm"></iframe>

<script type="text/javascript">
window.onload = function(){

var urls = ['http://www.example.com', 'http://www.yahoo.co.jp', 'http://www.google.co.jp'];

var ifrm = document.getElementById('ifrm');

var timerID = setInterval(function () {
// 0以上、3未満。つまり、0〜2
var idx = Math.floor( Math.random() * urls.length );
ifrm.src = urls[idx];
}, 5000); // 5分なら、5 * 60 * 1000 とする
}
</script>

462 :454:2018/02/02(金) 07:06:29.03 ID:???.net
458 を修正した

setTimeout() で、最初から表示する。
その後、setInterval() で、一定時間ごとに表示する

<iframe src="#" id="ifrm"></iframe>

<script type="text/javascript">
window.onload = function(){

var urls = ['http://www.example.com', 'http://www.yahoo.co.jp', 'http://www.google.co.jp'];

var ifrm = document.getElementById('ifrm');

function setExternalWebsite() {
// 0以上、3未満。つまり、0〜2
var idx = Math.floor( Math.random() * urls.length );
ifrm.src = urls[idx];
}

setTimeout(setExternalWebsite, 0); // 最初から表示する
// 5分なら、5 * 60 * 1000 とする
var timerID = setInterval(setExternalWebsite, 5000);
}
</script>

463 :Name_Not_Found:2018/02/02(金) 07:23:25.57 ID:???.net
自ら学ぶ人とは回答者の事だったのか

464 :Name_Not_Found:2018/02/02(金) 12:37:30.47 ID:???.net
>>462
setInterval使わずにsetExternalWebsiteの最後で毎回setTimeoutすればいいだけやで

465 :Name_Not_Found:2018/02/02(金) 12:43:41.74 ID:???.net
問題にはならんと思うんだけどどんどん再起が深くなっていくのが気持ち悪い

466 :Name_Not_Found:2018/02/02(金) 12:44:46.38 ID:???.net
>>464
それってスタックオーバーフローしないの?

467 :Name_Not_Found:2018/02/02(金) 13:12:21.97 ID:???.net
スタックは積まれない

468 :Name_Not_Found:2018/02/02(金) 15:06:20.75 ID:???.net
>>467
積まれないんすね、ありがとうございます
関数ポインタみたいなのがどんどん積まれていくのかと思った

469 :Name_Not_Found:2018/02/02(金) 17:41:52.25 ID:hJ9iJ7qw.net
>>455 >>448 >>457 (459)
丁寧に教えてもらってありがとうございます。すごく参考になりました。

ランダム時間なのですがsetIntervalを使っていたの思い出しました。

{
var min = 5000 ;
var max = 10000 ;

setInterval("hyoji()",(max + 1 - min))+ min;
}

としました。

やってないと忘れるものですみませんでした。

470 :Name_Not_Found:2018/02/02(金) 19:01:30.35 ID:???.net
webpackやgulpについて質問したいのですが、その類のスレッドってありますかね??。
なければここで質問してもよろしいでしょうか?

471 :Name_Not_Found:2018/02/02(金) 22:10:29.45 ID:???.net
function(t, i) {
t.target = i, e.apply(this, arguments)
}
こういう構文があったんですが
「 t.target = i;
e.apply(this, arguments);

つまりこういう構文を略して書く書き方って認識であってますか?

472 :454:2018/02/02(金) 23:46:50.02 ID:???.net
>>464-468
1. function f() { setTimeout(f, 5000); }
2. setTimeout(f, 5000);

まず、2の実行では、setTimeout()は実行されるけど、f()はまだ実行されない。
つまり、キューに、fが積まれるだけ

次に5秒後、キューからfが削除されて、1が実行される。
その時に、setTimeout()で、またキューに、fが積まれる

つまり、キューには常に、fが1個しか積まれていない

>>471
わかりにくいから、そんなカンマの使い方をしない方が良い。
勘違い・バグを誘発する

普通に、; で文を区切るべき

473 :Name_Not_Found:2018/02/03(土) 01:26:18.14 ID:PujzEQQR.net
>>472
認識があってるか確認してんだよボケ

474 :Name_Not_Found:2018/02/03(土) 02:24:56.13 ID:???.net
>>470
いいよ。他に該当のスレなんて有るわけないし

475 :Name_Not_Found:2018/02/03(土) 06:33:39.21 ID:???.net
>>453
ありがとうございました。
ローカルファイルで他サイトの呼び出しの規制に引っかかっているわけですね。
今回の案件だけ個別に許可はできないものでしょうか?(ブラウザのセキュリティ上難しい?)

476 :Name_Not_Found:2018/02/03(土) 07:05:49.60 ID:???.net
>>475
ブラウザじゃなくてサーバー側のセキュリティな

477 :Name_Not_Found:2018/02/03(土) 12:01:19.79 ID:???.net
制限をかけてるのがブラウザで
サーバはブラウザがかけてる制限を任意に解除できるだけじゃないのか
違いは無設定の鯖に対してどういう挙動になるか

というか>>451はCORS関係なんか?
みたところ子ウィンドウを開いて、子のlocation.hrefで移動させてるだけ
IE自身のセキュリティ設定、イントラネットのセキュリティポリシーな気がするんだが

478 :Name_Not_Found:2018/02/03(土) 12:08:23.84 ID:???.net
グローバル変数を1つ宣言するのと
関数を1つ宣言するのとでは
グローバルの汚染度は変わらないですよね?

479 :Name_Not_Found:2018/02/03(土) 12:40:30.96 ID:???.net
>>478
変わる

480 :Name_Not_Found:2018/02/03(土) 12:43:46.29 ID:???.net
>>478
変数というのは「変えられる値」関数というのは、変えられない。

(まあ正確に言えば、JavaScriptでは関数もオブジェクトなので変えようと思えば変えられるが、
普通そういう使い方はしないしそういう使い方はグローバル変数と同様になってしまうから
ダメなやり方であるという考え方をする)

グローバル汚染というのは、値がどこから書き換えられるかわからないから問題なので、
グローバル変数はアウトだが、グローバル関数(グローバルクラス含む)は問題ない

481 :Name_Not_Found:2018/02/03(土) 12:56:39.57 ID:???.net
>>479-480
無名関数を使うとかなら、変わると言われても納得なんですけど

function ffff(){}と定義するのとvar ffff = function(){}と定義するのでは変わらないし
どちらの場合も変数名ffffに対する文字列値の再代入も関数再定義も特別の構文なしにできてしまうし
同じ名前の関数宣言があってもエラーも何も出ないのを考えると
宣言時には入れ物はどちらも変数であって(というかポインタと考えたほうが)
中身が、関数か、文字列や数値や配列やオブジェクトか、の違いでしかない、という風に思うんです

そうなると、1個グローバル変数を使うのと1個グローバル関数を使うのとでは、もはや変わりが無いように思うんですが

482 :Name_Not_Found:2018/02/03(土) 13:08:32.34 ID:???.net
ニュアンス的には幾らかの違いがあるけど、汚染度と言う視点だと無いよ
つか、関数もオブジェクトだから変えられるという言い用はJSer失格

483 :Name_Not_Found:2018/02/03(土) 13:13:24.91 ID:???.net
だからnamespace的に1つのオブジェクトに全部押し込めて汚染度下げたりしてたわけですし

484 :Name_Not_Found:2018/02/03(土) 13:13:46.96 ID:???.net
関数は関数だもんな

485 :Name_Not_Found:2018/02/04(日) 13:01:29.10 ID:???.net
>>474
ではこちらで質問させていただきます。
gulpであればgulp-uglifyを、webpackであればUglifyJsPluginを使って
minify化しようと思うのですが、どちらもjsに記述している変数名がiやfに変わってしまいます。
どちらのnpmもオプションに変数名が変わらない様な設定があるかと思ったのですが無いようでした。

変数名が変わるのは困るので、ただ単に改行、コメント削除、空白削除をしたいのですが、何か方法はありますでしょうか。

486 :Name_Not_Found:2018/02/04(日) 13:04:16.82 ID:???.net
変数名が変わって困るのがそもそもおかしい

487 :Name_Not_Found:2018/02/04(日) 14:12:57.48 ID:???.net
>>486
HTMLに直接変数名が書いてあり、その変数を外部jsファイルで使用する時に使えなくなると思ったのですが。
ということは、そもそもjsの書き方がおかしいということでしょうか?
例を出せと言われてもすぐには出せませんが・・・・

488 :Name_Not_Found:2018/02/04(日) 14:26:32.98 ID:???.net
> HTMLに直接変数名が書いてあり
そんなことはしない。HTMLにJavaScriptの変数は出てこない

489 :Name_Not_Found:2018/02/04(日) 19:14:59.77 ID:???.net
uglify=難読化、minify=軽量化、全然別だ
uglifyやってんなら、そりゃそうなる

490 :Name_Not_Found:2018/02/04(日) 19:24:47.55 ID:???.net
ところでnpmに gulp-minify (-cssや-htmlがつかない)があって
minify()で普通に無駄な空白類やコメントの削除してくれるらしいが

491 :Name_Not_Found:2018/02/04(日) 20:11:37.39 ID:Z2Ku3KdF.net
>>485
uglify-js@3だが、mangleオプションにreservedをつければいいんじゃない?

492 :Name_Not_Found:2018/02/04(日) 20:12:55.29 ID:Z2Ku3KdF.net
あ、すべての変数名を変えたくないのか
magleオプションをなくすような設定ができるのかね

493 :Name_Not_Found:2018/02/04(日) 21:22:12.95 ID:???.net
gulp-uglifyは詳しくないけど、
サードパーティー製のライブラリで使用しているグローバル変数(いわゆるネームスペース)を
スクリプト内で参照している場合に、その変数名をminifyしない設定があるのでは?

494 :Name_Not_Found:2018/02/04(日) 22:44:24.61 ID:???.net
>>488
多分私の説明が下手でうまく伝わっていない気がするのでちょっと考え直して
再度ご質問します。ありがとうございました。

>>489
その違いが知りませんでした。
勉強になります。ありがとうございます。

>>490
gulp-minifyですか。ちょっと試してみます。

>>492
uglify-jsも知りませんでした。
これも検証してみます。

>>493
ごめんなさい。話に追いついていけません。。。

495 :Name_Not_Found:2018/02/04(日) 23:36:42.46 ID:Z2Ku3KdF.net
https://github.com/webpack-contrib/uglifyjs-webpack-plugin
これのことだよね
ならmangleオプションが指定できるから
falseにしてみたらいいんじゃないかな

496 :Name_Not_Found:2018/02/05(月) 00:36:25.08 ID:???.net
>>494
だからHTMLに直接変数名を書くことが
間違いだって話だよ

他のやつもやる必要のないことを書くな

497 :Name_Not_Found:2018/02/05(月) 01:08:14.66 ID:???.net
そんなの環境とコーディング規約次第だろ

498 :Name_Not_Found:2018/02/05(月) 01:09:29.45 ID:???.net
>>497
その理屈だと、腐った環境やクソなコーディング規約に
したがって開発しろって言ってるように見えるが?

499 :Name_Not_Found:2018/02/05(月) 01:10:08.48 ID:???.net
だからHTMLに直接変数名を書くことが
腐った環境やクソなコーディング規約だって話だ

500 :Name_Not_Found:2018/02/05(月) 01:44:44.15 ID:???.net
ページごと、ユーザーごとのパラメータをHTMLに書くことはあるぞ
どうせlocalStorageかHTMLに書くかAjaxで取得するかくらいしかないし

501 :Name_Not_Found:2018/02/05(月) 01:52:32.96 ID:???.net
今話をしてるのはJavaScriptの変数の話だ
分かってないなら黙ってろ

502 :Name_Not_Found:2018/02/05(月) 01:56:06.57 ID:???.net
HTML内で
var userData = {}

外部JSファイル内で

(function(){
something(userData.何か);
})();

こういうことだろ

503 :Name_Not_Found:2018/02/05(月) 02:11:37.12 ID:???.net
>>500
常に何から何までXHRで済ませられるわけじゃないしな

504 :Name_Not_Found:2018/02/05(月) 03:20:21.65 ID:???.net
>>502
細かいことだがそれ(function(){ })(); で囲う意味ある?

505 :Name_Not_Found:2018/02/05(月) 03:40:25.36 ID:???.net
window.now = performance.now;
now();

こう書くと"オブジェクトの呼び出しが無効です"と怒られるんすよ
なんででしょうね

506 :Name_Not_Found:2018/02/05(月) 04:26:38.57 ID:???.net
thisの問題ですね。
now()で呼び出したときもthisがperformanceを指すように以下のようにbindしときましょう。
window.now = performance.now.bind(performance);

507 :Name_Not_Found:2018/02/05(月) 05:42:06.72 ID:???.net
とりあえずthisを拘束すればいいという考えはあまり良いとは思えないな
エイリアスという点では今は
fn = ( ...args ) => performance.now( ...args )
と書く方が良い
bind構文が実装されて記述が容易になるとともに
bindを常日頃から使う文化が広がったらbind構文の方が基本になると思う

508 :Name_Not_Found:2018/02/05(月) 05:43:42.70 ID:???.net
より「ハック」っぽくないのはどちらかっていう意味ね

509 :Name_Not_Found:2018/02/05(月) 06:17:58.17 ID:???.net
ハックっぽいかなぁ?
>>506はbindした新しい関数返してるだけで別になんにもハックしてなくない?
bindなんてES5から入ってるし実装されてるかどうか気にするレベルにないのでは…

510 :Name_Not_Found:2018/02/05(月) 16:53:25.38 ID:???.net
Google Maps (Javascript) API に関することはここでいい?

他に適当な質問スレがあれば教えてください。

511 :Name_Not_Found:2018/02/05(月) 17:00:03.74 ID:???.net
>>510
Google Maps API 質問箱
http://mevius.5ch.net/test/read.cgi/tech/1131627583/

512 :Name_Not_Found:2018/02/05(月) 23:52:28.98 ID:???.net
>>477
Windows8.1はダメなので、IE自体の問題のような感じです。
開発者ツールでみると
else { //* not MSIE browser
wid1.location.href=wz1;
}
で止まっているのですが、Windows7では不具合なく動いているので、どこがおかしいかわからないのです。

513 :Name_Not_Found:2018/02/06(火) 02:26:00.54 ID:155ekgt0.net
フォーム内のあるアイテムの入力文字数が
たとえば 5文字あるいは10文字あるいは空白の場合だけ入力できるようにするにはどうすればよい?

514 :Name_Not_Found:2018/02/06(火) 03:50:42.56 ID:???.net
地道に数えろよ

515 :Name_Not_Found:2018/02/06(火) 08:19:49.38 ID:???.net
サロゲートペアと結合文字の問題があるからな
サロゲートペアで結合文字のものもある
例えばアクセント付付点8分音符「"𝅘𝅥𝅮𝅻𝅭"」は一文字でlengthは10だ

516 :Name_Not_Found:2018/02/06(火) 11:45:45.30 ID:???.net
>>495
ありがとうございました。
無事にこちらの方法で変数名を変えずに圧縮することができました。

517 :507:2018/02/06(火) 13:15:35.38 ID:???.net
>>511
ありがとう。しかしそっちはちと寂しかったです。

518 :Name_Not_Found:2018/02/08(木) 22:50:41.60 ID:???.net
基本的なことだと思うんだけど、分かってないので

click event についてなのですが
event発生のタイミングって、カーソルのpushが対象から抜けた時ですよね
表現がヘンで伝わってるか不安だけど

ブラウザゲームっぽいの作ってまして
touchしたときにevent発生させることってできるんでしょうか?

519 :Name_Not_Found:2018/02/08(木) 23:34:02.32 ID:???.net
タッチならタッチ専用のイベントが有る
タッチ専用のイベントは有るがマウスにも対応しようとしたら
いろいろ面倒なので、統合的に使えるライブラリを探したほうが良いかもね
俺の知識は古いので何が最善かまで言えない

520 :Name_Not_Found:2018/02/08(木) 23:38:48.28 ID:???.net
mousedown

521 :515:2018/02/08(木) 23:48:36.33 ID:???.net
>>519
ありがとう!
できないものと思い込んでた
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Events/Touch_events
これ見て吃驚

522 :Name_Not_Found:2018/02/08(木) 23:51:08.92 ID:???.net
マウスならmousedown、タッチならtouchstart
まあ両方やっとけばいい

523 :Name_Not_Found:2018/02/08(木) 23:53:20.77 ID:???.net
タッチは300ms問題とかもあったはず。ライブラリ使うべき。

524 :Name_Not_Found:2018/02/09(金) 00:01:43.51 ID:???.net
300ms問題はtapやで
だからtouchstart使うんや

525 :515:2018/02/09(金) 00:11:31.05 ID:???.net
>>520
えっ!あっそか
と思ってやってみました (jqueryでね)
$('#hoge').on('click', function () {
console.log('ムフフ');
});

$('#hoge').on('mousedown', function () {

desktop版firefox お〜動くー!

iOS safari あれ?挙動が click と同じだなぁ

526 :Name_Not_Found:2018/02/09(金) 00:13:58.77 ID:???.net
あー、思い出した FastClick.js だ
300ms問題を解決するライブラリ

527 :Name_Not_Found:2018/02/09(金) 00:18:02.30 ID:???.net
>>525
そういうこと。
ブラウザによって挙動が違ってよく分からんw

そういやタッチとマウスを統一的に扱えるようにした
Pointer Eventsってどうなったんだろうね

https://caniuse.com/#search=pointer%20events
結局Chromeは実装したみたいだけど

528 :515:2018/02/09(金) 00:25:48.81 ID:???.net
皆様ありがとう!
スマホはmouseじゃないからなのか

ぐぐってやってみて、ちゃんと動くようになったのが
var clickEventType = ((window.ontouchstart!==null) ? 'mousedown':'touchstart');
$('.slotBtn').on(clickEventType, function () {
socket.emit($(this).attr('id'));
});
// thankYou!!!

529 :Name_Not_Found:2018/02/09(金) 00:35:08.20 ID:???.net
タッチパネルつきパソコンはどうなるのか?って考えると
両方onしたほうがいいのかもしれないけどな

イベント2つ扱うときはこういう書き方な

$('.slotBtn').on("mousedown touchstart", function () {
socket.emit($(this).attr('id'));
});

あとどうでもいいけど、イベントハンドラ内のthisみたいに
必ず要素が一個であると断定できる時は、this.id と最近は書いてる

530 :Name_Not_Found:2018/02/09(金) 00:41:05.58 ID:???.net
内部でvarしない関数定義もしない即時関数って、即時関数にする意味なんかある?

531 :Name_Not_Found:2018/02/09(金) 00:42:29.31 ID:???.net
>>529
2回呼ばれることは絶対ないのけ?

532 :515:2018/02/09(金) 00:44:41.07 ID:???.net
>>529
mousedown と touchstart 併記したら
safariのやつが2つとも反応しちゃうんですよ

this.id の件了解!きっとこの方が速いんですよね

533 :515:2018/02/09(金) 00:50:57.13 ID:???.net
>>530
$('.slotBtn').on(clickEventType, socket.emit(this.id));
ってことですね
習慣でいたるところに…

534 :Name_Not_Found:2018/02/09(金) 00:52:03.46 ID:???.net
例えばbuttonの中に生の文字と<img>があってbuttonにイベントリスナつけたとき

535 :Name_Not_Found:2018/02/09(金) 00:53:04.40 ID:???.net
>>533
それダメwww

536 :Name_Not_Found:2018/02/09(金) 00:56:43.96 ID:???.net
>>533
それ動くの?
>>530で言ってるのは例えばこんな感じの記述
(function(){
 document.getElementsByClassName('slotBtn')[0].addEventListener('mousedown', function(){
  call.some.function();
 }, false);
})();

537 :515:2018/02/09(金) 00:56:44.37 ID:???.net
>>535
なんんでぇー

538 :Name_Not_Found:2018/02/09(金) 00:58:46.31 ID:???.net
>>537
関数そのものを渡さなきゃいけない
function(){}を渡すのはいいが、
socket.emit(this.id)ではsocket.emit(this.id)を実行した結果が渡される

って感じか?

539 :515:2018/02/09(金) 01:01:09.65 ID:???.net
>>536
やってないんで、やらんで良かった
コードさんきゅです、理解できた

540 :Name_Not_Found:2018/02/09(金) 01:03:05.75 ID:???.net
>>537
それだとその行にきた段階でリスナー登録じゃなく socket.emit() が実行される
もとのやつでいい

541 :Name_Not_Found:2018/02/09(金) 01:05:39.21 ID:???.net
タッチ、タップは魔境だなぁw
単体でもたくさんあるしuiライブラリ専用のもあるし…
https://npms.io/search?q=touch%20events

これなんかすげえ便利そう
https://github.com/GianlucaGuarini/Tocca.js

あとzingchartってやつはサンプルがウケた。いいのかこれw
https://codepen.io/zingchart/full/BzmdwQ

542 :Name_Not_Found:2018/02/09(金) 01:10:09.52 ID:???.net
そのうえ
画面のスクロールとかスクロールバー付き要素のスクロールとか
2本以上の指のタッチとか
アホかってほどいっぱい面倒なもんが出てくるからな

543 :Name_Not_Found:2018/02/09(金) 01:20:09.65 ID:???.net
zingchartじゃなくてzingtouchだった…
http://zingchart.github.io/zingtouch/

544 :Name_Not_Found:2018/02/09(金) 01:23:18.30 ID:???.net
ただ単にタッチを検出したいだけなら
touchstartとかでいいが

タッチを利用したカルーセルのような
インターフェースを作りたいのなら
自作するより使ったほうが楽

理由は>>542が書いているとおり

545 :Name_Not_Found:2018/02/09(金) 01:31:40.71 ID:???.net
>>518
自分も作るけど使い分けなくて便利だからPointer Events使ってる
来年にはFxとSafariでも使えそうな雰囲気だし
今はChromeとEdgeだけでもいいでしょ

546 :Name_Not_Found:2018/02/09(金) 01:34:56.66 ID:???.net
>>544
カルーセル作りたいなら、の意味がわからん

547 :Name_Not_Found:2018/02/09(金) 01:43:38.37 ID:???.net
touch, mouse を透過的に扱うのは、
Electron, Cordova, React などのフレームワーク

>>536
ECMA5 では、ブロックスコープが無かったから、
関数でスコープを作る

548 :Name_Not_Found:2018/02/09(金) 01:52:06.65 ID:???.net
>>547
やっぱ魔境じゃん
http://mk.hatenablog.com/entry/2017/08/27/003515

549 :Name_Not_Found:2018/02/09(金) 01:53:28.22 ID:???.net
バッドノウハウの温床というやつだな

550 :Name_Not_Found:2018/02/09(金) 01:54:39.96 ID:???.net
>>547
内部でvarしない関数定義もしない場合、スコープ作る必要ある?

551 :Name_Not_Found:2018/02/09(金) 04:12:44.08 ID:???.net
前提知識として学ばないといけないことが多すぎ複雑すぎなのが嫌なのに
ライブラリの構造とか使い方とか
さらにさらにバージョンごとの差異とか
そんなん使ってられませんわ

552 :Name_Not_Found:2018/02/09(金) 08:46:59.23 ID:???.net
JSの仕組み自体はシンプル・イズ・ザ・ベストなのに

553 :Name_Not_Found:2018/02/09(金) 08:59:58.13 ID:???.net
というか、柔軟なんだよ

554 :Name_Not_Found:2018/02/09(金) 09:43:55.08 ID:???.net
>>546
> カルーセル作りたいなら、の意味がわからん

考えることがたくさんあるからだよ
要件次第だが

カルーセルで横スクロールする時、
縦スクロールしたらページはスクロールするか?とか

ピンチ、ピンチアウト機能と両立できるか?とか

スクロールはスムーズか?とか
(スムーズにするためのCSSの機能があるが使えない機種がある)

555 :Name_Not_Found:2018/02/09(金) 10:00:02.38 ID:???.net
カルーセルの基礎構造って

・操作に応じて横方向に画像が切り替わりループするスライド
・スライドを操作する「<」「>」ボタンや「□■□□」のようなナビゲーションを兼ねたボタン

これだけじゃないのか
touchendが使えればtouch*、でなきゃclickやmousedown、だけで普通にpure jsで書けね

556 :Name_Not_Found:2018/02/09(金) 11:08:48.56 ID:???.net
初心者が失礼します
http://fast-uploader.com/transfer/7073696781713.jpg
このコードで28行目の関数の引数eventはクリックしたときに引き渡されると思うんですが何が引数として引き渡されているのでしょうか?
event.clientXとevent.clientYでそれぞれ左上から縦横の位置を示してるのはわかるんですが、
じゃぁ.clientXと.clientYをとったときのeventってなんなんだろうって疑問になります。
この引数はいったい何でいつどんな変数が入ってるのでしょうか?

557 :Name_Not_Found:2018/02/09(金) 11:28:00.42 ID:???.net
イベントオブジェクトの一種、マウスイベントオブジェクト
clickされたときにブラウザがイベントオブジェクト作って引数eventとして引き渡してくれる

.clientXや.clientYはマウスイベントオブジェクトが持っているプロパティ
だからevent.clientXでマウスX座標が取れる
https://developer.mozilla.org/ja/docs/Web/API/MouseEvent/clientY

558 :515:2018/02/09(金) 11:47:48.48 ID:???.net
>>545
pointer events って便利そうだけど
今、動作するのは chrome と edge だけってことですか?
作ってるサービスの対応ブラウザとしては、できるだけ多くを相手にしたいです。

自分が作ってる中で
押したらすぐ反応して欲しい部分は、プレイ画面中のボタンだけなんです
ある機械の状態をWebRTCでリアルタイムに流してて、ボタンはその機械を操作するものです
これスレと関係なかった

559 :Name_Not_Found:2018/02/09(金) 11:49:18.43 ID:???.net
>>557
なるほど、リスナーに引数を持つ関数を登録するとブラウザが自動で引数にイベントオブジェクトを入れてくれるんですね。
ありがとうございます。

560 :515_555:2018/02/09(金) 12:16:28.78 ID:???.net
スレ違だろうなぁ、でも他に
知見のある人のいるスレが見つけられない m_m

もう諦めてるんですが
画面サイズから video を90度回して縦方向いっぱいに計算して表示してるのですが
スマホ画面の上とか下に出てくるじゃまなやつのせいで動画が
ちっちゃくなってしまうのは、どうにもならないですか

561 :Name_Not_Found:2018/02/09(金) 13:21:50.31 ID:???.net
何でFullScreenAPI使わないの?

562 :515_555:2018/02/09(金) 14:55:53.28 ID:???.net
>>561 ありがとう!
これも、なんぞそれ!?
ってことで調べながらやってみてます
が、90度回してる影響かうまくいってないです

563 :Name_Not_Found:2018/02/10(土) 11:50:49.98 ID:oy2RaxPK.net
下で「START」ボタン押してもなにもおこらないんですがなぜでしょう?
エラーは出ません。
chromeです。

<div class="container operate">
<ul>
<li><button class="button" id="start" onclick="click()" >START</button></li>

</ul>
</div>
<script type="text/javascript" charset="utf-8" >
function click() {
window.alert("2");
}
</script>

564 :Name_Not_Found:2018/02/10(土) 12:17:41.99 ID:???.net
click()の関数名がまずいっぽいね
click1()に変えたら動いたよ

565 :Name_Not_Found:2018/02/10(土) 12:35:50.48 ID:???.net
そういうのもあるし、onclick属性とは
HTMLのonなんたらで処理呼び出すのやめなよ

566 :Name_Not_Found:2018/02/10(土) 12:51:55.94 ID:oy2RaxPK.net
>>564
ありがとうございます!
>>565
最初は別ファイルからインポートしてたんですけど
はじめてスクリプト埋め込んだのでなんで動かないのかわからなかったので
とりあえず動かなくなる地点を探そうとして
順番に埋め込むところを移動させていました。

567 :Name_Not_Found:2018/02/10(土) 13:20:38.10 ID:???.net
>>565
reactさんをバカにするのはやめるんだ

568 :Name_Not_Found:2018/02/10(土) 13:29:12.18 ID:???.net
react?あれはJSXだから関係ない

569 :Name_Not_Found:2018/02/10(土) 13:47:15.21 ID:???.net
>>568
細かい話をするとreactとJSXも関係ない。別にJSX使わなくても全部関数で書ける。
で、JSXで書いて、reactが生成する生DOM確認してみた?onclick属性使われてるよ。

570 :Name_Not_Found:2018/02/10(土) 13:54:02.97 ID:???.net
>>569
reactとJSXは関係ない。
だからreactは持ち出してくるなって話なんだが?

571 :Name_Not_Found:2018/02/10(土) 14:15:36.43 ID:???.net
>>570
根拠なくon*属性にハンドラ書くの否定するなという話なんだが?

572 :Name_Not_Found:2018/02/10(土) 15:23:07.72 ID:???.net
reactがHTMLのon*使ってるかどうかはon*が良いか悪いかの指標にはならん

573 :Name_Not_Found:2018/02/10(土) 15:27:51.69 ID:???.net
じゃあ>>565のやめなよの根拠は?

574 :Name_Not_Found:2018/02/10(土) 15:45:42.89 ID:???.net
やめなよ

575 :Name_Not_Found:2018/02/10(土) 15:50:10.61 ID:???.net
 |ヽ∧_    
 ゝ __\   やめなよ
 ||´・ω・`| > 
/  ̄ ̄  、ヽ _______
└二⊃  |∪=| |─── /
 ヽ⊃ー/ノ    ̄ ̄ ̄ ̄
    ̄`´ ̄

576 :Name_Not_Found:2018/02/10(土) 20:33:03.75 ID:tiFE6zoU.net
こう言う文字列を作成して
var str ='文字列';
var func = '<button onclick="func(¥'' + str + '¥')">実行</button>';
funcをhtmlのページに埋め込みました。
そのhtmlを表示すると、文字列strが英数字なら問題ないのですが、文字列中にシングルクォーテーションとかダブルクォーテーション
が混じっているとエラーが出ます。
正しい解決方法を教えてください。

577 :Name_Not_Found:2018/02/10(土) 21:22:04.38 ID:???.net
埋め込みました、て・・・document.writeしたりelement.innerHTMLに入れたりしてんだろ
なんでcreateElementしてaddEventListenerしてappendChildしないんですか

578 :Name_Not_Found:2018/02/10(土) 21:33:18.02 ID:???.net
そういう問題ではない

579 :Name_Not_Found:2018/02/10(土) 21:45:41.78 ID:???.net
シングルクォーテーションの数が奇数です

580 :Name_Not_Found:2018/02/10(土) 22:49:57.63 ID:tiFE6zoU.net
>>577
やり方が分からないからです。

581 :Name_Not_Found:2018/02/10(土) 23:12:46.00 ID:???.net
>>580
もろもろエスパーするとこれはサーバーサイドテンプレート…
expressかなにかでやってる?

582 :Name_Not_Found:2018/02/10(土) 23:19:52.42 ID:???.net
>>576
何がどうエラーなのかぐらい書いてくれ
再現できなきゃ話にもならん
https://jsfiddle.net/84f0yahw/

583 :Name_Not_Found:2018/02/10(土) 23:31:51.47 ID:???.net
やっぱたぶんサーバーサイドテンプレートなんだろうな。
質問するのになんで隠すのか分からんが。

ほらよ>>576
出力確認のためのconsole.logもつけたから良く確認するように。
var str = 'こんにちは\'赤"ちゃん'; // 念のため言っとくがこの場合ここシングルクォートにエスケープ必要
console.log(str); // こんにちは'赤"ちゃん
str = str.replace(/'/g, "\\'"); // ブラウザJSのコンテキストでシングルクォートエスケープ処理
console.log(str); // こんにちは\'赤"ちゃん
str = str.replace(/"/g, '&quot;'); // HTMLのコンテキストでダブルクォートエスケープ処理(文字参照に変換)
console.log(str); // こんにちは\'赤&quot;ちゃん
var func = '<button onclick="alert(\'' + str + '\')">実行</button>';
console.log(func); // <button onclick="alert('こんにちは\'赤&quot;ちゃん')">実行</button>

584 :Name_Not_Found:2018/02/10(土) 23:34:28.83 ID:???.net
あ、すまん確認のためfuncをalertに変えてたんだった。alertはfuncに置換してくれ

585 :Name_Not_Found:2018/02/11(日) 00:43:04.96 ID:???.net
babelって今は末尾再帰最適化をサポートしてくれないんですか?
せっかく気軽に再帰で開発できると思ったのに……

586 :Name_Not_Found:2018/02/11(日) 01:03:27.06 ID:???.net
SSIだとなんか問題起きるんか(ハナホジ

587 :Name_Not_Found:2018/02/11(日) 01:36:10.68 ID:???.net
>>585
プラグインになっただけじゃねーの?

https://www.npmjs.com/package/babel-preset-optimized

This is a list of plugins this uses. Do note that by default, not all of these may run:

babel-plugin-minify-constant-folding
babel-plugin-loop-optimizer
babel-plugin-closure-elimination
babel-plugin-tailcall-optimization

588 :Name_Not_Found:2018/02/11(日) 02:21:31.20 ID:???.net
https://w3techs.com/technologies/overview/javascript_library/all

w3techsによると2017年1月の時点で71.9%のサイトが
JavaScriptのライブラリとしてjQueryを使用していることが判明したが
それから1年たった2018年1月現在、73.2%に1.4%も増えていることが判明した。

またAngularは0.5%、だがReactが伸びてきており0.5%
とAngularを逆転したことがわかる

だがjQueryには大幅なさをつけられており取って代わるのは
いつになるのか動向が注目される

589 :Name_Not_Found:2018/02/11(日) 02:46:01.53 ID:???.net
軽く使えるDOM操作ライブラリってほとんどないから

590 :Name_Not_Found:2018/02/11(日) 02:51:23.00 ID:???.net
jqueryに大幅な差というよりangularやreactが木っ端なだけだろ

591 :Name_Not_Found:2018/02/11(日) 03:18:40.93 ID:???.net
自前でwebサービス立ち上げてる会社以外reactもangularも出番ないんですもの。

592 :Name_Not_Found:2018/02/11(日) 03:57:28.37 ID:???.net
自社でがっつりやるなら自社で組む手があるからなぁ
他所のポリシーに合わせる必要なくなる

593 :Name_Not_Found:2018/02/11(日) 08:39:54.82 ID:???.net
>>576
jQuery を使え

<button id="btn1">押して</button>

$('#btn1').click (function() {
// ここに処理を書く
console.log("クリックされた");
});

594 :Name_Not_Found:2018/02/11(日) 11:48:00.24 ID:???.net
>>588
取って代わるてw
使われ方が全く違うだろ

595 :Name_Not_Found:2018/02/11(日) 11:49:51.13 ID:???.net
> 使われ方が全く違うだろ

ちゃんとした考え方できる人はそうわかるんだけどね。
今のところjQueryがなくなることはない。
jQueryの代替技術はない

だけど一部のjserどもが、jQueryはオワコン
これからはAngular、Reactやで!
jQuery使わなくて頑張ればコストがかかるだけでできる!
などと言い始めたからね。

596 :Name_Not_Found:2018/02/11(日) 11:50:35.97 ID:???.net
jQueryがまだ下り坂になってないのは
この一年でシェアが更に増えたことからも明らかだよな

597 :Name_Not_Found:2018/02/11(日) 11:58:03.08 ID:???.net
>>595
addEventListenerとattachEventの違いの吸収のように
UA間で異なる仕様が少なくなっていくにつれて
jquery自体が不要になっていくんじゃないの
例えばアニメーションだって5年前とは比較にならんほどcss対応進んだし

598 :Name_Not_Found:2018/02/11(日) 11:59:05.35 ID:???.net
どっちかっていうとこれからはピュアなjavascript

599 :Name_Not_Found:2018/02/11(日) 12:10:26.49 ID:???.net
>>597
addEventListenerとonの違いを考えれば
jQuery優位になるんだよ。

今はaddEventListenerが優位な点も残っているが解決できる
でも逆にaddEventListenerはonの優位な点を解決することができない


onが優位な点
・onの方が文字数が少ない
・複数のイベントに対して一度にイベントを設定できる
・後から追加される要素に対しても働くイベントハンドラが簡単に書ける

addEventListenerが優位な点
・イベントハンドラの設定が速い(だが体感できるものではない)
・キャプチャフェーズにも対応できる(そもそもIE8非対応の機能。jQuery 4.0で対応予定)
  https://github.com/jquery/jquery/wiki/jQuery-4.0-Event-Design


結局jQueryオブジェクト=DOM要素のコレクションという仕組みが最強なんだわ
jQueryオブジェクトはjQuery独自のものだから標準にとらわれず自由にメソッドを追加できる

600 :Name_Not_Found:2018/02/11(日) 12:12:46.62 ID:???.net
>>598
> どっちかっていうとこれからはピュアなjavascript

ピュアなjavascriptがループとか条件分岐なしに
書けるようになればね・・・

結局、言語の設計方針レベルの問題だから
ループなしにセレクタに一致する要素群に対して
一括でイベントハンドラを設定できるようにはならんと思うよ

601 :Name_Not_Found:2018/02/11(日) 12:24:44.98 ID:???.net
>後から追加される要素に対しても

よくわからないんだが
適切にHTML構造作ってバブリング考えてリスナ組み立てればいいだけでないの

602 :Name_Not_Found:2018/02/11(日) 12:42:53.72 ID:???.net
>>601
jQueryだと

$('.class').on('click', function() { this はクリックされた要素 } );

これを

$(document).on('click', '.class', function() { this はクリックされた要素 } );

こう書き換えるだけでいい。
イベントハンドラの中身も書き換えなくて済む

これとまったく同じことをjQueryを使わずに書こうとしたら
ほんとうに大変だよ

603 :Name_Not_Found:2018/02/11(日) 13:00:41.21 ID:???.net
class名でイベントリスナ貼り付けるの好きだよねjquery使い

604 :Name_Not_Found:2018/02/11(日) 13:02:25.85 ID:???.net
>>603
IDでイベントハンドラを付ける意味が無いからね。

605 :Name_Not_Found:2018/02/11(日) 13:07:07.65 ID:???.net
jQueryは動的ページと相性が良くて動的ページっていうのはある要素が条件によって
存在したりしなかったりするわけだけど、jQueryを使うといちいち要素が
存在しているかしていないかをチェックする必要がない

その動きはCSSと一緒。
CSSでも特定の要素が存在しなくてもエラーにならない

そして要素が1つであっても複数であっても、それを気にする必要がない。
まったく同じコードで処理できる。

同じことをDOM APIだけでやろうとするとループが必要になってしまう。
そのループを避けるため、ID指定で一つの要素だけ取得しようとするが
そもそもループが存在しないjQueryではID指定に拘る必要がない。

606 :Name_Not_Found:2018/02/11(日) 14:34:55.91 ID:???.net
>これとまったく同じことをjQueryを使わずに書こうとしたら
>ほんとうに大変だよ
後から追加した要素のイベントを検出するのは、
JavaScriptで同じ事をやろうと思えば出来るんですか?
jQueryではどんな手法でやっているんですか?

607 :Name_Not_Found:2018/02/11(日) 14:36:00.82 ID:???.net
そもそもそんなハッキーな状況に軽やかに対応しないといけないって言うのが理想的ではないんじゃないか
やっぱり中に何があるかわからんけど、取り敢えず外から操る、それを楽にしたいでは無くて
コンポーネント化に努める方向で気にしなくていい事を増やした方が良いだろう

グローバル変数は楽し小さなケースでは良いけど、やっぱり色々考えると推奨されないのと同じ

608 :Name_Not_Found:2018/02/11(日) 14:43:37.25 ID:???.net
>>606
まずイベントバブルを利用してdocumentにイベントハンドラを設定する
その後、発生したイベントの発生元が、指定したセレクタに一致するか比較する
そうすればできる。

最近のブラウザなら、指定したセレクタに一致するか比較するのは簡単に
できるようになっているらしいが、jQueryはそれができない時代から
独自で実装していた

609 :Name_Not_Found:2018/02/11(日) 14:44:18.43 ID:???.net
>>607
> そもそもそんなハッキーな状況に軽やかに対応しないといけないって言うのが理想的ではないんじゃないか

JavaScriptを使ったページで、要素が動的に増えたり減ったりするのは
よくあると思うけど?

610 :Name_Not_Found:2018/02/11(日) 14:48:04.46 ID:???.net
>>607
> コンポーネント化に努める方向で気にしなくていい事を増やした方が良いだろう

そうそれ! jQueryが得意な所

IDを使ってしまうとコンポーネント化とは逆の方向になってしまう。
コンポーネントというのは使いまわしできるもので、
同じコンポーネントが一つのページに複数存在したりするものだからね。

それがjQueryと相性がいい。
同じコンポーネントというのは同じクラスであるということ
クラスに対してイベントハンドラを設定することで
コンポーネントに対しての処理が書きやすくなる。

> グローバル変数は楽し小さなケースでは良いけど、やっぱり色々考えると推奨されないのと同じ

即時関数を使ってグローバル変数を無くすってのはよくあるけど、
jQueryを使うと即時関数を使わなくてもグローバル変数はなくなってしまう。
実際に書いてみればわかるがこんな感じになるから

$(".class").on('click', function() {
 // ここはローカル変数
});

611 :Name_Not_Found:2018/02/11(日) 15:06:24.05 ID:???.net
結局、ここ数年のWeb界隈を見るに、既存のDOM構造の地位を脅かすようなモデルが現れてないからね
それらと相性がいいjQueryは、好みはともかく、現実的にはまだしばらくは覇権でしょう

612 :Name_Not_Found:2018/02/11(日) 15:15:05.35 ID:???.net
jQueryは設計センスが良すぎてとても真似できない
これとlodashであと10年戦う

613 :Name_Not_Found:2018/02/11(日) 15:19:30.26 ID:???.net
懐かしいな。もう一年前になるのか。
jQueryはオワコン、下降傾向にあるって言ってたやつ

一年経って減るどころか1.4%も増えたで?
その増えた量はReactよりも多い

どんな気分?w

614 :Name_Not_Found:2018/02/11(日) 15:39:18.08 ID:???.net
angularやreactとかは大規模複数人開発案件でないとメリットがデメリットを上回らないからjQueryはなくならないと思う。
jQueryにマウント取ってるreactファンボーイが頭おかしいだけ。
しかも攻撃理由がreact等のvirtualDOMとjQueryの生DOM操作は相性悪い→jQueryはオワコン だからな。最高に頭悪い。
飛行機ができたから電車オワコンと言ってるようなもの。
原爆できたから軍隊にナイフ要らないと言ってるようなもの。

615 :Name_Not_Found:2018/02/11(日) 16:49:33.71 ID:???.net
>>610
直近の親要素にaddEventListenerすれば済むことでは
classをjsの判断に使ったらcssで他の箇所に容易に再利用できなくなる

616 :Name_Not_Found:2018/02/11(日) 16:52:19.03 ID:???.net
>イベントバブルを利用してdocumentに

とりあえずグローバル変数、とりあえずsingletonみたいな感じで気持ち悪い

最低限にまとめろよ

617 :Name_Not_Found:2018/02/11(日) 18:01:41.90 ID:???.net
jQueryの是非は置いておいても
angularもreactもJSXもダメすぎる、あんなものが覇権取れるわけない

618 :Name_Not_Found:2018/02/11(日) 18:32:29.27 ID:???.net
>>615
直近の親要素にaddEventListenerするだけだと、クリックされた要素をうまく取得できない
下記のHTMLで動的に増えるものがliだとして、そのliの中に更にspanなどが入っている場合
[click here]の部分をクリックすると期待するliが取得できない

<ul id="ul">
 <li>list1 <span>[click here]</span></li>
 <li>list2 <span>[click here]</span></li>
 <li>list3 <span>[click here]</span></li>
</ul>

document.getElementById('ul').addEventListener('click', function(event) {
 console.log(this); // ul
 console.log(event.srcElement); // span
 console.log(event.target); // span
 console.log(event.currentTarget); // ul
})

jQueryだと大丈夫。実際にイベントハンドラを付けたulも
イベントハンドラで取得したいliも
実際にクリックされたspanも簡単に取得できる

$('#ul').on('click', 'li', function(event) {
 console.log(this); // li
 console.log(event.target); // span
 console.log(event.currentTarget); // li
 console.log(event.delegateTarget); // ul
})

619 :Name_Not_Found:2018/02/11(日) 18:39:00.92 ID:???.net
>>615
> classをjsの判断に使ったらcssで他の箇所に容易に再利用できなくなる

なんで? 再利用させたいならばjQueryプラグインになるだろうけど
jQueryプラグインは特定のクラスに結びつくものじゃない

620 :Name_Not_Found:2018/02/11(日) 18:47:24.99 ID:???.net
>>608
詳しい説明ありがとうございました。

621 :Name_Not_Found:2018/02/11(日) 19:12:11.35 ID:???.net
>>618
>spanなどが入っている場合
HTML構造がそうなってるならspanだったらparentNode拾ってくればいいだけでは
classを使う必要性がない

622 :Name_Not_Found:2018/02/11(日) 19:34:32.90 ID:???.net
spanじゃなくて、divの中にspanだったら
こんどはparentNodeのparentNodeを取ってくればいいだけ。
またその他の要素が入っていたら、頑張ってJavaScriptを
メンテナンスすればやれないことはない
気合と金と時間さえあれば歩いて九州から北海道だって行ける!

623 :Name_Not_Found:2018/02/11(日) 19:35:14.22 ID:???.net
>>621
今はどれだけ簡単にできるかって話をしてるんだから
そこでparentNodeを取ってくればーと言った時点で、
簡単にはできないってことになるんだよ

624 :Name_Not_Found:2018/02/11(日) 19:36:00.78 ID:???.net
やっぱりjQueryのdelegate相当のことをやろうとしたら
素のDOM APIでは大変そうですね

625 :Name_Not_Found:2018/02/11(日) 19:36:44.02 ID:???.net
やっぱりjQuery良く出来てるわー
一年経って減るどころか増えてるからぐうの音もでないだろうね

626 :Name_Not_Found:2018/02/11(日) 19:37:35.56 ID:???.net
html構造 javascriptも使うしCSSも使う
class名 一般的にはCSSが使う

html構造変わったらjavascriptコードも変わるのが当たり前
class変わってもjavascriptコードが変わることはあまりない
javascriptでclassをトグル切り替えするとかその程度

627 :Name_Not_Found:2018/02/11(日) 19:41:05.71 ID:???.net
>>623
1個ifが追加で入れば「簡単じゃない」「難しい」になるのかい?

逆に、デザイナがCSSいじるとき
javascriptが利用しているclass名に拘束される面倒さは「簡単じゃない」に繋がらないのかい

そういう話をしているんだけど再利用ならjQueryプラグインが云々で何を言いたいのかさっぱり

628 :Name_Not_Found:2018/02/11(日) 19:41:30.90 ID:???.net
> html構造変わったらjavascriptコードも変わるのが当たり前

そう、それがDOM APIの常識だった。
だけど、jQueryはそれを打ち破った。

なにせCSSと同じくセレクタを使って要素を絞り込むわけだから、
CSSと同じ効果が得られた

そして同じセレクタに同じデザインを適用するCSSと
同じセレクタに同じ振る舞いを持たせるjQueryという関係が出来上がった

考えてみれば、セレクタ=コンポーネント、
同じコンポーネントが同じデザインとう振る舞いを持つのは当然ではないか

そして混沌としてHTMLとJavaScriptの世界に
汎用性がもたらされた

629 :Name_Not_Found:2018/02/11(日) 19:43:30.58 ID:???.net
生DOMはいい加減自分を操作するために親を経由するとかそういうのやめてほしい
やるとしても適当に関数作って内部でやっとけばいいのに

630 :Name_Not_Found:2018/02/11(日) 19:43:59.66 ID:???.net
>>627
> 1個ifが追加で入れば「簡単じゃない」「難しい」になるのかい?

そうだよ。知らなかった?

複雑度っていうのは条件分岐一つで大きく膨れ上がる。
ifが1つ増えれば2倍、2つ組み合わさればなれば、2倍の2倍で4倍。
3つだと8倍。一つ増えるだけででテストしなければいけない場合は
指数関数的に増加する

if一つだから簡単だと思っているやつは
考えが浅いというわけさ

631 :Name_Not_Found:2018/02/11(日) 19:45:04.61 ID:???.net
>>627
> javascriptが利用しているclass名に拘束される面倒さは「簡単じゃない」に繋がらないのかい

デザイナがいじるのはデザインであってclass名じゃないからね

632 :Name_Not_Found:2018/02/11(日) 19:48:13.86 ID:???.net
>>631
同じスタイルを適用したくても
javascriptがclass名で決め打ち処理入れてるから
CSSをコピペしたり別のclass名を作ったりしなきゃいけない、と嘆かないデザイナ?

633 :Name_Not_Found:2018/02/11(日) 19:49:27.45 ID:???.net
>>632

違うものに同じデザインを適用したいってことないでしょw

634 :Name_Not_Found:2018/02/11(日) 19:49:37.98 ID:???.net
Webデザイナと連携したことないけど何かいろいろ闇があるんですか?

635 :Name_Not_Found:2018/02/11(日) 19:50:03.87 ID:???.net
切り分けたい時もあるし切り分けたくない時もある
切り分けられないを強要するライブラリということだ

636 :Name_Not_Found:2018/02/11(日) 19:50:10.81 ID:???.net
あるわい!

違うものであってもデザインが同じなら
クラス名も同じにするんだい!

デザインが赤なら、クラス名もredにするだろ!

637 :Name_Not_Found:2018/02/11(日) 19:50:42.82 ID:???.net
デザインが同じでも、本質的に別物なら
それは違うクラス名を与えるべきだよ

638 :Name_Not_Found:2018/02/11(日) 19:51:48.94 ID:???.net
CSSに他classのスタイルを継承する文法があれば筋が通るんだけどね

639 :Name_Not_Found:2018/02/11(日) 19:52:51.35 ID:???.net
デザインが同じなら同じクラス名にしたいっていうのは

このボタンの色は青でフォントサイズ2emですね。
こちらの見出しも青でフォントサイズも2emですね。

ならボタンと見出しでデザイン一緒ですから
同じクラス名にしましょうって考える人?

640 :Name_Not_Found:2018/02/11(日) 19:54:32.31 ID:???.net
JavaScriptを使う人はHTMLとCSSのことも理解していなければ
だめだってわかる典型的な例だな

なぜかJavaScript使う人でHTMLやCSSが苦手な人が多い

641 :Name_Not_Found:2018/02/11(日) 19:54:58.82 ID:???.net
>>616
なお実行順序の管理

642 :Name_Not_Found:2018/02/11(日) 20:05:18.62 ID:???.net
違うものに同じスタイルを適用したいからって
クラス名を同じにするとか愚の骨頂
素人同然だわ

643 :Name_Not_Found:2018/02/11(日) 20:07:44.45 ID:???.net
HTML仕様的にはclassはスタイルの為のものであってJavascriptの為のものではないはずだが
idはscriptから参照するためという目的が明示されてるが
併記されているclassにはそれがない
同じclassが同じ振る舞いであるべきかどうかは定かではないと言っておきたい

644 :Name_Not_Found:2018/02/11(日) 20:08:40.11 ID:???.net
> HTML仕様的にはclassはスタイルの為のものであってJavascriptの為のものではないはずだが

思い込みな。何処かに書いているというのなら言ってみてくれ
ちなみに、idはスタイルのためのものかい?w

645 :Name_Not_Found:2018/02/11(日) 20:10:55.73 ID:???.net
>>644
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176
ここからリンクされている
http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-class
これ

「role」としてid, class双方に「style sheet selector」が明示されているが
scriptはというとidのみ

646 :Name_Not_Found:2018/02/11(日) 20:12:24.83 ID:???.net
どうせ適当な事を言うだけ言って逃げるだろうから
書いておくわ

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes

> 要素のクラスを空白区切りで並べたリストです。クラスは CSS の
> クラスセレクター や JavaScript の Document.getElementsByClassName() メソッドと
> いった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。

https://dev.w3.org/html5/spec-preview/global-attributes.html#classes

> Assigning classes to an element affects class matching in selectors in CSS,
> the getElementsByClassName() method in the DOM, and other such features.

647 :Name_Not_Found:2018/02/11(日) 20:12:29.22 ID:???.net
CSSがなんたるかどう書くべきかを理解しているデザイナとしか仕事しないのならいいけどね

648 :Name_Not_Found:2018/02/11(日) 20:13:27.58 ID:???.net
>>645

なんで今さらHTML4.01なんか持ち出してきたの?
わざと?

649 :Name_Not_Found:2018/02/11(日) 20:14:27.71 ID:???.net
>>646
後者引用の文章は、classの割り当てはgetElementsByClassName()に影響すると言っているのみであって
classとは何であるかを説明しているものではないようだが

650 :Name_Not_Found:2018/02/11(日) 20:15:02.57 ID:???.net
ほう、やっぱり意図的にHTML4.01を持ってきたようだ

https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#classes

Note: Assigning classes to an element affects class matching in selectors in CSS,
the getElementsByClassName() method in the DOM, and other such features.

651 :Name_Not_Found:2018/02/11(日) 20:15:04.30 ID:???.net
>>645
w3 vs mozilla、ファイッ!

652 :Name_Not_Found:2018/02/11(日) 20:15:41.23 ID:???.net
>>649
クラスは色んな使い方として用いられると書いてあるが
スタイル専用なんてどこに書いてあるか?

653 :Name_Not_Found:2018/02/11(日) 20:16:34.19 ID:???.net
https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#classes を翻訳してみた

> 3.2.5.7class属性を
> すべてのHTML要素にはclass属性が指定されている場合があります。
>
> 属性が指定されている場合は、要素が属するさまざまなクラスを表すスペース区切りのトークンのセットである値を指定する必要があります。
>
> クラスHTML要素がの値とき、それはすべてのクラスで構成さに割り当てたが返さclass属性がされた空間に分割します。重複は無視されます。
>
> 要素にクラスを割り当てると、CSSのセレクタでのクラスマッチングgetElementsByClassName()、DOMでのメソッドなどの機能に影響し ます。
>
> 作成者がclass属性で使用できるトークンには追加の制限はありませんが、作成者はコンテンツの所望の表現を記述する値ではなく、コンテンツの性質を表す値を使用することが奨励されています。
>
> IDLは、DOMの仕様で定義され、属性を反映したコンテンツ属性を。 [DOM]classNameclassListclass

スタイル専用のものと書いてない

654 :Name_Not_Found:2018/02/11(日) 20:18:48.53 ID:???.net
同様にIDがJavaScript専用とかも書いてない

実際CSSで使えるわけだしね

655 :Name_Not_Found:2018/02/11(日) 20:25:27.63 ID:???.net
>>648
MDNでclassのことを確認したときに参照として書いてあったのでブックマークしておいたからだ
シンプルで分かりやすかったから記憶に残っていたんだが
>>646の後者のURLを見ると目的が明示されなくなっているんだな
詳しく読んでくるがその前に>>643は取り消す、横から済まなかった

656 :Name_Not_Found:2018/02/11(日) 20:27:38.57 ID:???.net
>>655
お前の知識は古いから話にならないってだけだよ

657 :Name_Not_Found:2018/02/11(日) 20:31:28.79 ID:???.net
仕様文書の読み方よく知らないんだけど
こういうのって打ち消されない限り以前
のが有効だったりしないの?

658 :Name_Not_Found:2018/02/11(日) 20:35:45.25 ID:???.net
どちらを採用するかって話
HTML5を採用するなら、HTML5の仕様が全て
他の仕様書に書いて有ることは何の参考にもできない

659 :Name_Not_Found:2018/02/11(日) 20:37:35.49 ID:???.net
過去を継承的に考えるのか過去を取り消
し的に考えるのかってことね

660 :Name_Not_Found:2018/02/11(日) 20:42:23.47 ID:???.net

HTL4.01という仕様を元に

必要なことを付け足し、必要ないものを削除し
そして以前のものを継承させて完成させたのがHTML5だろ

HTML4.01で引き継ぐ所は全部引き継いてるんだから
HTML5だけを見ればいい。なくなった部分は廃止されたって意味だ。

661 :Name_Not_Found:2018/02/11(日) 20:48:30.15 ID:???.net
HTMLの意味論にどこまで意義があるかはわからないけど
目的が抹消された例は結構あるな
理由はわからんが<dl>, <dt>, <dd>は定義リストじゃなくなった

662 :Name_Not_Found:2018/02/11(日) 20:49:54.81 ID:???.net
<i>とか<b>とか

663 :Name_Not_Found:2018/02/11(日) 20:49:59.62 ID:???.net
どーてーりすと?

664 :Name_Not_Found:2018/02/11(日) 23:12:13.10 ID:IlEpejin.net
>>639
議論に関係ないが、こういう人いるわ……
わりと疲れる

665 :Name_Not_Found:2018/02/11(日) 23:44:24.67 ID:???.net
jQuery のソースコードを読むと、
Android 4.0, IE 9, IE 8 などの分岐処理がある

こんなの自分で対応できないだろ。
アホらしい

666 :Name_Not_Found:2018/02/12(月) 05:32:37.11 ID:???.net
つうかここでjQueryはあれに向いてる、これもできると言ってる奴らのレベルが低すぎる
一昔前JSとWebAPIだけであらゆることができると豪語してた奴ら未満

俺達はきちんとその時点でできることできないこと、得意なこと苦手なことを研究して
この先何が必要か考えES Discasにも参加したし、ブラウザにissueも投げた
JS大好きマンだが渋々C++でパッチも書いたこともある

結局自らの敵は自らで、jQueryがそういう用途に最適化された設計がされていない、
するつもりもあまりない、そういう用途で使おうと思ってる人が少ないって言うことが最大の敵なんだよ

いつまでもDOM APIと張り合って、使うべきか使わないべきかみたいなレベルの低い争いを続けてるようじゃ、
今あるjQueryマンセーじゃ未来はないよ

667 :Name_Not_Found:2018/02/12(月) 05:45:10.35 ID:???.net
そういう話じゃない。

668 :Name_Not_Found:2018/02/12(月) 09:56:53.54 ID:???.net
すげえ、驚くほど話が噛み合わない

669 :Name_Not_Found:2018/02/12(月) 10:09:58.32 ID:???.net
HTMLの最後でjs読み込むのとwindow.onLoadで処理させるのと基本どっちを選ぶべきなの?

670 :Name_Not_Found:2018/02/12(月) 10:35:10.82 ID:???.net
>>666
そうあってほしいと考えているわけですね

でもね、最初からjQueryはDOMライブラリだって言ってましたー
その他の用途には、それ用のライブラリを使いますー

671 :Name_Not_Found:2018/02/12(月) 13:00:09.27 ID:???.net
>>670
jQueryがそういう用途に最適化された設計がされていないことについてはどう考える?

672 :Name_Not_Found:2018/02/12(月) 13:00:37.00 ID:???.net
>>671
そういう用途って?

673 :Name_Not_Found:2018/02/12(月) 13:01:19.23 ID:???.net
>>672

>>666に書いてあるだろ

674 :Name_Not_Found:2018/02/12(月) 13:01:44.19 ID:???.net
>>673
いやだからどこに?

675 :Name_Not_Found:2018/02/12(月) 13:03:42.86 ID:???.net
「いつまでもDOM APIと張り合って」って
書いているところから読み取れないかな?

jQueryはなんでもできるんだろ?
あれもこれもできるんだろ?

だがjQueryはあれもこれもの用途に
最適化された設計になっていない

所詮DOM API代わりのDOM用ライブラリにすぎない

676 :Name_Not_Found:2018/02/12(月) 13:04:38.97 ID:???.net
当たり前ですよね?
jQueryはDOM用ライブラリですよ?

なんでDOM用ライブラリをなんでもできるライブラリに
しないといけないんですか?

どんな機能にも対応している神ライブラリとでも
思っていたんですか?
アホですねw

677 :Name_Not_Found:2018/02/12(月) 13:05:51.12 ID:???.net
ムキー! お前らがjQueryはなんでもできるライブラリだって言っていただろ
その公約を守ってないからjQueryはクソライブラリだ!
お前らが言っていたことができないからクソだ

678 :Name_Not_Found:2018/02/12(月) 13:06:20.30 ID:???.net
>>669
window.onload
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload

load イベントは文書のローディング工程の終了時に発生します。
このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、
全ての画像とサブフレームのロードは完了しています

画像のロード完了を待つ必要があるかな?
漏れなら、画像など無視するから、<body>のラストで、JS を読み込む

679 :Name_Not_Found:2018/02/12(月) 13:06:28.15 ID:???.net
お前らが言っていた = 妄想
自分の妄想が実現されてないからクソだって言ってたのか
アホだな

680 :Name_Not_Found:2018/02/12(月) 13:16:21.54 ID:???.net
window.onloadは発動が遅いから、
それよりも早く発動するDOMContentLoadedってのができた。
そしてjQueryはDOMContentLoaded相当のタイミングで発動する
readyメソッドっていうのをDOMContentLoadedができるより前から実装していた


でもbodyの最後で実行していれば、readyはいらんのよね。
なぜか昔はJavaScriptは、<head>の中に書くもんだってお作法があった
今はbodyの最後で書いてもよいとなったから、実はjQueryでもreadyは使う必要がない。

更に言うならば、<head>で書いたとしても、
$(document).on(イベント, セレクタ) の形式を使っていればreadyはいらないんだよね。
なぜならdocumentはその時点で存在しているから

bodyの最後で書くのは最速に思えるかもしれないけど、
1ページの長さが極端に長かった場合、bodyの最後に到達するまでは
JavaScriptの処理が発動しないことになる。

でも、<head>で $(document).on(イベント, セレクタ) の形式で書いていれば
bodyの最後に到達しなくてもイベントを捉えることができる。

イベントを捉えてももちろんまだ該当の要素が読み込まれていなければ反応はしないが
jQueryの正しいやり方で書いていれば、要素が0個でもエラーにはならない。

というわけで要素が画面に表示された直後からJavaScriptの処理が働くように
するには、<head>で $(document).on(イベント, セレクタ) の形式で書くやり方なんだが
思考に慣れが必要ではあるだろうな

681 :Name_Not_Found:2018/02/12(月) 13:16:25.33 ID:???.net
漏れって久々に見た

682 :Name_Not_Found:2018/02/12(月) 13:55:03.15 ID:???.net
>>676
上でコンポーネント化の話などが挙がってるし、
逆に色々話題が出たときこれはjQueryでは向いてないという話になったことがない
なんやかんや無理やりjQueryが使えると思い込んでる

683 :Name_Not_Found:2018/02/12(月) 14:09:36.78 ID:???.net
思い込みが酷すぎて怖い
一緒に仕事したくないタイプ

684 :Name_Not_Found:2018/02/12(月) 14:12:37.63 ID:???.net
>>682
向いていないという話が出なかったら
向いていると言っているんだ!って思い込んでんのか?

例えば日付処理にjQueryは向いてない
ほら言ってやったぞ?どうするんだ?

685 :Name_Not_Found:2018/02/12(月) 14:54:03.36 ID:???.net
>>684
餅ついてよく読め
脊髄反射するな

686 :Name_Not_Found:2018/02/12(月) 17:03:04.48 ID:???.net
>>685
jQueryはDOMライブラリである。
誰もjQueryが何にもでも使えるとは言ってない

ここまではいいな?

687 :Name_Not_Found:2018/02/12(月) 17:42:29.63 ID:???.net
>>686
よかろう

688 :Name_Not_Found:2018/02/12(月) 17:57:43.89 ID:???.net
> なんやかんや無理やりjQueryが使えると思い込んでる

誰もjQueryが何にでも使えるとは言ってないので
(エスパーでもない限り他人が思ってることなんてわからないので)
思い込んでる事とわかるのは自分自身(>>682)だけである

ここまではよい

689 :Name_Not_Found:2018/02/12(月) 22:13:26.66 ID:???.net
ああ、スレ建てたやつがライブラリ禁止のテンプレ消したのか

690 :Name_Not_Found:2018/02/13(火) 01:39:28.88 ID:???.net
example.com?q=文字列
をサーバーサイドで受け取る時に文字列中に¥rや¥nも渡す事は出来ますか?

691 :Name_Not_Found:2018/02/13(火) 02:54:43.50 ID:???.net
%0Aや%0D

692 :Name_Not_Found:2018/02/13(火) 09:34:16.09 ID:???.net
>>688
一番の問題はそう思われてるってことだと思うぞ
jQuerer含むライブラリスタが過剰にライブラリを推してるのは事実
度々スレ分離したり議論になってるのにまだ自分たちがどう思われてるのかが分かってないのか

693 :Name_Not_Found:2018/02/13(火) 09:53:45.83 ID:???.net
> 一番の問題はそう思われてるってことだと思うぞ

jQueryのアンチが変なふうに思い込んでるのは
アンチが悪いってことで終わりじゃね?

694 :Name_Not_Found:2018/02/13(火) 10:38:11.42 ID:???.net
ライブラリの書き方はライブラリ使わないと通じない
ライブラリを使わない書き方はライブラリ使ってても使ってなくても通じる

ってところか?

695 :Name_Not_Found:2018/02/13(火) 10:42:49.53 ID:???.net
クチャラーに自覚したらと諭したら
俺は普通に食べてるだけ
耳障りに聞こえるのはお前が悪いと言われたって感じか

696 :Name_Not_Found:2018/02/13(火) 22:29:27.55 ID:AUT9CmqZ.net
react.jsやangular.jsが役立つ大規模案件、とは具体的にどの程度の規模のサイトですか?
今まで小さな企業でしか勤めたことがなく、大規模案件と言われてもイメージが湧きません

697 :Name_Not_Found:2018/02/13(火) 22:39:43.45 ID:???.net
>>696
てことは一生知る必要がないんじゃないか

698 :Name_Not_Found:2018/02/13(火) 22:43:02.36 ID:???.net
前もって勉強したいじゃん?

699 :Name_Not_Found:2018/02/13(火) 23:09:02.10 ID:???.net
すいませんageてしまいましたね
今のままの小さい仕事しかせずにjavascriptと言えばjqueryでチョロチョロ、みたいなキャリアで本当に将来生き残れるのかという不安があるのです
あとは、自分がjqueryしかできないから会社も大きな仕事が取れないんじゃないかとか考えてしまったりですね

700 :Name_Not_Found:2018/02/14(水) 00:01:20.48 ID:???.net
どの位大規模かというと、最近YouTubeがPolymerを導入した
だが、そのバージョンはv0.いくつのもの、今の最新はv3
そのくらい年単位で開発する案件に使うもの

そこからわかると思うがフレームワークは前もって勉強する必要はない
実際使うべきときには役に立たないから
大手も使うと決めたときに改めて勉強会を開くなりして対応してる

701 :Name_Not_Found:2018/02/14(水) 00:30:16.57 ID:???.net
離脱したくても離脱しづらくなるから使うなら見合った理由が必要
大規模だから使うというより
少数の比較的小規模な会社が
使い続けてく方が多い印象がある

702 :Name_Not_Found:2018/02/14(水) 00:33:55.45 ID:???.net
HTMLに影響強く出るのはあんまりやだな

703 :Name_Not_Found:2018/02/14(水) 00:36:13.70 ID:???.net
jQueryってもう役目が終わってるんだよ
いい加減目を覚ましたほうが良い
作者も見放してReactやってるじゃん

704 :Name_Not_Found:2018/02/14(水) 00:46:01.50 ID:???.net
jQuery 73.2%(前年比 +1.4%)、React 0.6%(前年比 +0.5%)
jQueryの役目が終わってからjQueryの役目が終わったというように

https://w3techs.com/technologies/overview/javascript_library/all

w3techsによると2017年1月の時点で71.9%のサイトが
JavaScriptのライブラリとしてjQueryを使用していることが判明したが
それから1年たった2018年1月現在、73.2%に1.4%も増えていることが判明した。

またAngularは0.5%、だがReactが伸びてきており0.5%
とAngularを逆転したことがわかる

だがjQueryには大幅なさをつけられており取って代わるのは
いつになるのか動向が注目される

705 :Name_Not_Found:2018/02/14(水) 01:35:49.34 ID:???.net
>>704
これからの自分たちがどうしていくかの話をしてるのに
他の人が今何をやってるのかを気にするって意味がわからんな

良く使われてるのは所謂「枯れた技術」とは言えるけど
熟れた物ってこれから先腐っていくこととほぼイコールじゃん

706 :Name_Not_Found:2018/02/14(水) 01:36:52.26 ID:???.net
HTTPがまだ周りでよく使われているからHTTPSにしないって言ってるのとかと同じだぞ?

707 :Name_Not_Found:2018/02/14(水) 01:39:09.20 ID:???.net
>>705
せやな、一年前に、これからはjQueryは減っていくとか
これからは腐っていくとか予想を立てた人恥ずかしいよな

これから?来年にはまたjQueryのシェア増えるんじゃね?

AngularもReactも熟れる前にくされなきゃ良いけど
Angularは一回腐れたよな

708 :Name_Not_Found:2018/02/14(水) 01:41:28.87 ID:???.net
HTTPSは費用と処理と通信のコストがあるからなあ

709 :Name_Not_Found:2018/02/14(水) 01:42:14.75 ID:???.net
>>706
> HTTPがまだ周りでよく使われているからHTTPSにしないって言ってるのとかと同じだぞ?
わかったわかった。HTTPSは最初からある程度使われいたからな

何かのフレームワークの使用率が10%を超えたら考えよう。
それでいいだろ?

710 :Name_Not_Found:2018/02/14(水) 01:52:21.16 ID:???.net
>>699
中小規模の会社が請ける規模の案件なら
素のJSだけでも十分やってけるよ
昔と比べて格段に安定して書けるようになってきたから
万が一必要になったらその時必要な分だけ調べれば済む

711 :Name_Not_Found:2018/02/14(水) 01:59:06.49 ID:???.net
大規模な会社がReact使っているかと言ったらそうじゃないからな
なにせ0.5%しか使われていない

712 :Name_Not_Found:2018/02/14(水) 11:54:19.76 ID:???.net
Ruby のHTMLのテンプレートエンジン、erb では、
HTMLとRubyの構文が交互に来るから、わかりにくい。
PHP なんかもそう

<% @items.each do |item| %>
<li><%= item %></li>
<% end %>

もしRuby に、JSX があれば最強だろう

713 :Name_Not_Found:2018/02/14(水) 12:19:02.69 ID:???.net
JSXもクソじゃん。条件分岐とループごときに
言語の機能を使うようじゃダメ
mustacheが最強

714 :Name_Not_Found:2018/02/14(水) 13:04:34.95 ID:???.net
ここまで見てきて分かったのは
仕様というのは作って環境というのは動かしていくもんだと考えてる開発者と
仕様というのは与えられて環境というのは落ち着いたものに浸かるもんだと考えてる開発者じゃ
話合うわけ無いってことだな

715 :Name_Not_Found:2018/02/14(水) 13:08:40.64 ID:???.net
問題

「作って環境というのは動かしていくもん」と
「与えられて環境というのは落ち着いたものに浸かるもんだ」の
違いを完結に述べよ

716 :Name_Not_Found:2018/02/14(水) 13:39:11.48 ID:???.net
>>715
簡潔に言えば仕様標準化と実装に関わっているかどうかってことで言えるんじゃない?
企業で言うとミーティングやカンファレンスに社員を出張させているかどうか
別にそれは社会貢献のためではなくて自分たちのやりたいように環境を動かすためにそうしてる
環境というが実際は人
その場にいる仕様や実装書いてる人に直接会って、
こここういうバグが有るんですよとか、こういうところで困ってるんですよとか話ができるってことが重要
やっぱりそれはオンラインでプルリクエスト送るのとはぜんぜん違う
仕様や実装を作ってるのは人間で、意外と少数だから、向こうも幅広い意見を汲み取ろうとはしてるけれど
どうしても自分たちの近い範囲が得をする恣意的なものになってしまう
そのために皆わざわざ録画で見れるものを会場まで行く

717 :Name_Not_Found:2018/02/14(水) 15:23:42.02 ID:???.net
会場のふいんきを感じ取れて満足した
まで読んだ

718 :Name_Not_Found:2018/02/14(水) 19:44:59.89 ID:???.net
>>696です
ひとまず自分のやりうる業務のことを考えたらjqueryやes6の習熟でひとまずは大丈夫だと感じました
まずはjqueryを使い倒してみて、jqueryでは不十分だと感じられるようになった段階で改めて考えてみることにします
ありがとうございました

719 :Name_Not_Found:2018/02/14(水) 23:18:13.39 ID:???.net
ES2017位までは追いかけても損は無いよ

720 :Name_Not_Found:2018/02/15(木) 02:17:15.83 ID:???.net
オブジェクト型の分割代入やasyncジェネレータなど
既にモダンブラウザで使える重要なES2018の機能もあるよ

721 :Name_Not_Found:2018/02/15(木) 13:13:52.45 ID:???.net
初めてのJavaScript 第3版、オライリー、2017

ES2015 の本。
これを読めば、クラスとか、素人はあまりの難しさに愕然とするだろう

722 :Name_Not_Found:2018/02/15(木) 13:18:59.62 ID:???.net
素人が騒然とするのは当たり前だろ?


いや、お前がプロで、難しくて騒然としたっていうなら
それはそれで面白いことだがw

723 :Name_Not_Found:2018/02/15(木) 15:15:21.53 ID:???.net
そもclassはクソ。
https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3

724 :Name_Not_Found:2018/02/15(木) 16:13:48.62 ID:???.net
Maybeモナド的な機能がほすぃ

725 :Name_Not_Found:2018/02/15(木) 17:07:52.68 ID:???.net
JSのクラス化って何が利点になるの

726 :Name_Not_Found:2018/02/15(木) 17:14:12.43 ID:???.net
人間のメンタルモデルとコードを一致させられるから
理解しやすくなる。可読性の向上

ひねくれた方法で「実現できる」じゃだめなんだ
普通に書いて普通に読めなければいけない

727 :Name_Not_Found:2018/02/15(木) 18:38:34.26 ID:???.net
設計で方法論に従うことができる。
しかしテストでパターン数爆発で大抵死ぬ。

728 :Name_Not_Found:2018/02/15(木) 19:06:50.48 ID:???.net
自動テストさせちゃえ

729 :Name_Not_Found:2018/02/15(木) 23:02:20.37 ID:???.net
JSにテストなんて必要ない、トライアンドエラーがベスト
テストしたいんならよりし易い言語で書いてコンパイルすべき

730 :Name_Not_Found:2018/02/15(木) 23:17:37.27 ID:???.net
> テストしたいんならよりし易い言語で書いてコンパイルすべき

ではその、よりし易い言語がなにで
どういう理由で、よりし易いのか言えるんでしょうな?

731 :Name_Not_Found:2018/02/15(木) 23:56:25.01 ID:???.net
726ではないが、結局selenium動かしたり
casperでもぞもぞしたりするなあ

732 :Name_Not_Found:2018/02/16(金) 09:35:25.15 ID:???.net
svgの制御についての質問はここでしてもいいですか

733 :Name_Not_Found:2018/02/16(金) 11:04:46.77 ID:???.net
OKOK

SVG操作系javaScriptライブラリまとめ
https://jslob.repop.jp/2017/07/svgjavascript.html

734 :Name_Not_Found:2018/02/16(金) 12:18:40.76 ID:???.net
>>733
ナイスまとめ!

735 :Name_Not_Found:2018/02/16(金) 13:18:36.03 ID:???.net
昔foreignObjectを使って要素のミラーを作るというのを試した記憶があるのですが
今その情報を教えて頂けますか?
「あああ」をミラーしたら「あああ」が2つになって、大本を 「いいい」に変更するとコピー先も「いいい」になるという機能です

736 :Name_Not_Found:2018/02/16(金) 13:20:06.33 ID:???.net
参照渡しやんけ

737 :Name_Not_Found:2018/02/16(金) 13:20:47.53 ID:???.net
ぐぐれば?

738 :Name_Not_Found:2018/02/16(金) 17:13:54.49 ID:???.net
地図上に車のアイコンを置いて決まったルート上(svgのパス上)を動かすアニメーションを考えていて、進行方向に合わせてアイコンの向きを変えたいのですが、何を基準に計算をして向きを調整すれば良いかわからず困っています。
svg関連で角度の計算に使える関数やよい方法があれば教えていただけますか。

動きとしては↓こちらのサイトのようなものです。
https://itstudio.co/sample/svganime/anime7.html

739 :Name_Not_Found:2018/02/16(金) 17:30:02.88 ID:???.net
>>738
その犬の動きのほうがよく分からんw

740 :Name_Not_Found:2018/02/16(金) 17:45:07.03 ID:???.net
三角関数あんじゃん

741 :Name_Not_Found:2018/02/16(金) 19:03:04.44 ID:???.net
ここの奴ら役に立たんな
もうお前らには一切聞かんわ

742 :Name_Not_Found:2018/02/16(金) 19:39:44.83 ID:7Rrckydw.net
>>738
SVGの線上となるとアレだけど
動かすルートが決まっているなら接線の傾き求めればいいじゃない

743 :Name_Not_Found:2018/02/16(金) 19:58:08.01 ID:???.net
そいでそいで?

744 :Name_Not_Found:2018/02/16(金) 20:21:32.71 ID:???.net
>>742
接線か、なるほど気づきませんでした
接線の求め方から勉強してみます。。

745 :Name_Not_Found:2018/02/16(金) 23:25:19.42 ID:???.net
決まったルートがあるならatanだけで済む気がするんだが

746 :Name_Not_Found:2018/02/17(土) 00:43:38.95 ID:???.net
>>739
すみません。アニメーション自体はサイトのようなもので、これに角度の変化を付け加えたいという意味でした。
そしてよく見たらサイトのも微妙にrotateで傾けてますね。。折り返しの際に逆を向いてくれないので考えているものとは違いますが。

747 :Name_Not_Found:2018/02/17(土) 01:07:44.05 ID:Y6pp8OiO.net
>>746
反転はtransformのscaleを使うのが容易いかも

748 :Name_Not_Found:2018/02/17(土) 16:14:43.08 ID:???.net
var test = {
a: 1,
b: 5,
c: 6
}

ってあって
test.aからtest.cまでの値をループで取得しようと思ったらどうすればいいですか?

749 :Name_Not_Found:2018/02/17(土) 16:16:29.54 ID:???.net
3Dモデルでないと不自然になるよ

750 :Name_Not_Found:2018/02/17(土) 16:19:34.31 ID:???.net
>>748
『javascript test.aからtest.cまでの値をループで取得しようと思ったらどうすればいいですか?』
のGoogle検索結果を見ていけばわかる

751 :Name_Not_Found:2018/02/17(土) 16:26:59.42 ID:???.net
for(let [key, value] of Object.entries(test)){
console.log(key + ':' + value);
}
こうするとちょっとPHPっぽい

752 :Name_Not_Found:2018/02/17(土) 17:13:27.27 ID:???.net
>>748
for (let v of Object.values(test)) {
console.log(v);
}
とか
Object.values(test).forEach(v => {
console.log(v);
});

753 :Name_Not_Found:2018/02/17(土) 17:23:12.09 ID:???.net
こっちのが汎用的だったか
Object.entries(test).forEach(([key, value], index) => {
console.log(key, value, index);
});

754 :Name_Not_Found:2018/02/17(土) 17:51:17.23 ID:???.net
なんで標準のJavaScriptを使うと
冗長になるのか教えてほしいものだ。

lodashを使ったほうが短いとか意味分からん
_.forOwn(test, (value, key) => {
 console.log(key + ':' + value);
});

755 :Name_Not_Found:2018/02/17(土) 18:17:17.64 ID:???.net
どの言語も普通は標準よりライブラリ使った方が短くならね?

756 :Name_Not_Found:2018/02/17(土) 18:54:43.59 ID:???.net
だよなw
いつものlodashくんがスレチ話するためのエクスキューズのつもりなんだろw

757 :Name_Not_Found:2018/02/17(土) 21:34:02.04 ID:???.net
自作の関数作ればもっと短くなるよね
はいlodash敗北

758 :Name_Not_Found:2018/02/17(土) 21:39:19.11 ID:???.net
ほんとlodashの名前が出るだけで
必死になるなw

759 :Name_Not_Found:2018/02/17(土) 22:26:40.80 ID:???.net
for( var key of test )とかfor( var key in test )じゃダメなん?

760 :Name_Not_Found:2018/02/17(土) 22:58:02.30 ID:???.net
ここに違いが
https://lodash.com/docs/4.17.4#forIn
https://lodash.com/docs/4.17.4#forOwn

761 :Name_Not_Found:2018/02/17(土) 23:23:30.35 ID:???.net
>>759
前者はそもそもエラーなので論外
後者は普通にあり
entriesやvaluesは使えない環境も多いしね
個人的にはObject.keysを使うことが多いかな
よっぽど大量にループさせるんならfor..in使うけど

762 :Name_Not_Found:2018/02/17(土) 23:59:58.10 ID:???.net
使えない環境はあるがけして多くはない
そんなことを言ったら何もできない
いつまでレガシーブラウザを延命させる気なんだ

763 :Name_Not_Found:2018/02/18(日) 05:22:16.55 ID:???.net
for..inで十分にできて、key / valuesが key / test[key] になる程度の違い
構造は明示されてて
構造が未知だったり完全に信頼できなかったりしない
javascriptはゴルフ絶対主義なんか

764 :Name_Not_Found:2018/02/18(日) 06:20:37.10 ID:???.net
for-inのデメリットは.hasOwnProperties()のチェックを入れるかどうかの問題が発生するから

もちろんオブジェクトにそのチェックが不要だという保証があるなら.hasOwnProperties()で調べる必要はない

765 :Name_Not_Found:2018/02/18(日) 06:23:06.86 ID:???.net
>>748を見れば一目瞭然だな

766 :Name_Not_Found:2018/02/18(日) 06:44:57.56 ID:???.net
hasOwnPropertiesやっててよかったとか
今までに一度もないなw

767 :Name_Not_Found:2018/02/18(日) 08:22:54.79 ID:???.net
for..inは式ではなく文なのがちと煩わしい
とはいえ素のJavaScriptで
Object.values(test).filter(x => x % 2 === 0).map(x => x * 2)
みたく書くと無駄に何度も配列作っちゃうから、そういう意味ではlodashが羨ましい

768 :Name_Not_Found:2018/02/18(日) 09:25:19.82 ID:???.net
プロゴルファー?

769 :Name_Not_Found:2018/02/18(日) 11:31:30.39 ID:???.net
何度も配列作らなくてもforEach内の処理で十分な場合が多い
filterとかしなくてもif returnで良いんだし

770 :Name_Not_Found:2018/02/18(日) 12:02:31.01 ID:???.net
はいはい、俺様専用

771 :Name_Not_Found:2018/02/18(日) 13:05:05.05 ID:???.net
>>769
処理分離したいし破壊的代入はなるべく避けたいじゃん?

772 :Name_Not_Found:2018/02/18(日) 14:10:15.91 ID:???.net
破壊的代入したって頑張ればできるだろ
ほんの少しづつ頑張ればいいだけだよ
小さいものを積み重ねても大きくはならない

773 :Name_Not_Found:2018/02/18(日) 14:12:21.99 ID:???.net
>>771
今回がそもそもfor-inとの対比の話だからな
値を列挙して利用したいというだけだから
配列をどう処理していきたいかみたいな一般論とは話が違う

つまりfor-ループの{}内の置き換えだから、それは素直に考えるとforEachでいいじゃないかと
列挙したい物を連続してフィルタリングしたりする書き方したいか?ということ

774 :Name_Not_Found:2018/02/18(日) 14:23:07.60 ID:???.net
そもそも、すべての属性を取得するような、
メタプログラミングみたいな設計自体がおかしい

もし、テストツール以外で、こういう設計をしていたら、おかしいと思え!

775 :Name_Not_Found:2018/02/18(日) 14:45:12.60 ID:???.net
いやです

776 :Name_Not_Found:2018/02/20(火) 16:33:41.72 ID:rZ442w9v.net
childNodes[n] や item(n) では最後の要素は -1 では取得できないってことでいいですよね?
n の変更でアクセスする方法ってないんでしょうか?
lastChildとかつうと位置が変わった時に書き換えるのが面倒なんですけど。

777 :Name_Not_Found:2018/02/20(火) 18:00:12.11 ID:???.net
length-1

778 :Name_Not_Found:2018/02/20(火) 18:35:21.09 ID:rZ442w9v.net
>>777
ありがとうございます。

別の質問なんですけど
table の tbody に入っているデータを
localStorageに保存したあとで

ページを開き直した後に
localStorageから呼び出して
同じ形式で再表示したいんですけどどうすれば良いんでしょう?

storage.data = document.getElementByID("toboyのID")
で保存して
appendChild(storage.data)
とかやってもうまく行かないんですけど

forループかなんかつかって1つづつ要素を createChild とかして appendChild() するしかないんですか?

779 :Name_Not_Found:2018/02/20(火) 18:39:48.19 ID:rZ442w9v.net
訂正
storage.data = document.getElementByID("toboyのID")

storage.data = document.getElementById("tbodyのID")

780 :Name_Not_Found:2018/02/20(火) 18:45:12.12 ID:???.net
文字列値以外も保存できたんか?

781 :Name_Not_Found:2018/02/20(火) 19:45:12.02 ID:???.net
文字列もそうだけどそもそもlocal Storageの使い方大丈夫か?
=使ってるようだが…
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

782 :Name_Not_Found:2018/02/20(火) 20:25:36.91 ID:???.net
= でいい
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

783 :Name_Not_Found:2018/02/20(火) 20:31:51.05 ID:rZ442w9v.net
>>781
プロパティ構文、ブラケット構文、メソッド構文とあるようなので問題ないようです。

>>780
あぁ、それ本に書いてたなぁと思って調べたら
オブジェクトはJSON.stingiy/parseつかえってかいてたので試したけど
駄目っぽいですね。

一つ一つデータをオブジェクトかなにかで保存して
それを取り出して一つ一つcreateElement/appendChildしていくしか無いっぽいですかね。

だれか妙案あれば引き続きよろしくお願いします。

784 :Name_Not_Found:2018/02/20(火) 21:14:37.44 ID:???.net
>>782
知らんかった!恥ずかしい

>>783
こんなかんじでどうじゃろ
var storage = localStorage;
//保存
storage.data = document.getElementById("tbodyのID").innerHTML;
//復元
document.getElementById("tbodyのID").innerHTML = storage.data;

785 :Name_Not_Found:2018/02/20(火) 21:20:22.46 ID:rZ442w9v.net
>>784
あぁ、それ良いかもですね!
あとで試してみます。

786 :Name_Not_Found:2018/02/21(水) 07:32:20.17 ID:???.net
LocalStorage って、HTML を保存するものじゃないだろ

どちらも文字列の、key : value 型だろ

787 :Name_Not_Found:2018/02/21(水) 08:10:00.57 ID:???.net
ふーん、じゃ>>784がダメならオブジェクトをJSON.stringifyして保存するのも禁止な。

788 :Name_Not_Found:2018/02/21(水) 09:33:02.16 ID:???.net
イベントリスナ無視していいなら
innerHTMLを出し入れしてもただの文字列でしょ、問題はないんじゃね
なんか問題あるっけ

789 :Name_Not_Found:2018/02/21(水) 11:24:19.58 ID:???.net
ない。>>786がinnerHTMLの戻り値が文字列だと理解してないだけ。だからバカにされている。

790 :783:2018/02/22(木) 21:10:28.01 ID:???.net
普通、HTML タグなど、保存しないだろ。
なんで、そんな表示情報を保存するねんw

保存するのは、アプリに必要なデータだろ

key : value
アプリに必要な、データの項目と値

791 :Name_Not_Found:2018/02/23(金) 00:15:24.12 ID:???.net
今回はtableの保存だからな
HTMLのままが駄目と言っちゃ
縦横長+配列に分割することになるんだろうけど
そうなったらJSON化もあんまりスマートでないのでIDB使おうかとかも言えるしな

まあ、大きなアプリで沢山入出力するなら
そこ抽象化して丁寧にやるのもいいけど
簡素なものには適当な対応でHTML突っ込んで戻すくらいで良いんじゃないかと思うよ

792 :Name_Not_Found:2018/02/23(金) 02:35:44.73 ID:???.net
>>790
で?復元時にはバラバラにしたデータからまた元のhtmlの文字列組み直すのか?それとも一つずつcreateElement繰り返して挿入か?w
どっちにしろバカなんじゃねーのオメー
えんぴつを使わないアメリカかよwww

793 :Name_Not_Found:2018/02/23(金) 03:19:50.24 ID:???.net
>>792
でも君プログラムのアーキテクチャについて無知じゃん

794 :Name_Not_Found:2018/02/23(金) 03:21:44.81 ID:???.net
っていうか、たったそれだけのことで悩んでどうするんだって気がするけどねw

値からテーブルを作るコードはデータの部分を除いてたったの6行でできる。
(アロー関数を使えばもっと減らせる)

https://jsfiddle.net/1uopxycn/

var data = [
 [{text: 1, colspan:2},{text: 3}],
 [{text: 1},{text: 2},{text: 3}],
 [{text: 1},{text: 2},{text: 3, style: 'color:red'}],
];

var rows = data.map(function(row) {
 return $('<tr/>').append(row.map(function(attrs) {
  return $('<td/>', attrs);
 }));
});
$('#table').append(rows);

795 :Name_Not_Found:2018/02/23(金) 04:55:47.88 ID:???.net
スマートかどうか、仕様的に許されたことかどうか、この2つは別問題

1行で終わる話

796 :Name_Not_Found:2018/02/23(金) 09:06:27.41 ID:???.net
テーブルの部分をコンポーネントにしてそっちに配列読み込みの機能を持たせるべきだと思う

797 :Name_Not_Found:2018/02/23(金) 09:14:57.35 ID:???.net
ネズミ倒すのに戦車が必要とか組織再編が必要とか言い出す兵隊、降格です。

798 :Name_Not_Found:2018/02/23(金) 09:17:30.10 ID:???.net
javascriptを使ってネズミを駆除

799 :Name_Not_Found:2018/02/23(金) 09:22:25.98 ID:???.net
$('#table').append(data.map(function(row) {
 return $('<tr/>').append(row.map(function(attrs) {
  return $('<td/>', attrs);
 }));
}));

800 :Name_Not_Found:2018/02/23(金) 09:42:12.16 ID:???.net
つーかHTMLをそのままデータにすると柔軟性がなくなるよ。
後からHTMLをかえたくなったときとかね

テンプレートにデータを流し込んでビューを作るってことを
やっている人なら理解できると思う

そもそもデータとして参照する時HTMLを解析しなければいけなくなる

仕様的に許されているからOKと考えるんじゃなくて
後々のメンテナンス性なんかも考えらるようでなければダメ

801 :Name_Not_Found:2018/02/23(金) 09:44:05.49 ID:???.net
ちなみにjQueryの例を出したけどデータが多くなるとさすがに重くて
lodashとかにあるテンプレートエンジンの機能を使って
文字列として処理したほうが速い
attrsの部分がちょっと大変だけどね

802 :Name_Not_Found:2018/02/23(金) 11:56:08.52 ID:zjNZIwXS.net
innerHTMLつかった書き換えはセキュリティ上よくないからあんま使うなってよんだけど

803 :Name_Not_Found:2018/02/23(金) 12:17:35.43 ID:???.net
そりゃどういう時どうして危険か理解できないなら使って問題ないか問題か自分で判定できないだろうから一律使用しないという方針にするしかないな。哀れw

804 :Name_Not_Found:2018/02/23(金) 12:42:38.11 ID:???.net
javascriptはセキュリティ上よくないから使っちゃいけないな

ある意味、真理ではあるが

805 :Name_Not_Found:2018/02/23(金) 13:09:29.48 ID:???.net
tableじゃ無くてflexboxにすると多少抽象度と、コードのシンプルさと、パフォーマンスが担保できると思う

806 :Name_Not_Found:2018/02/23(金) 13:49:22.23 ID:???.net
アクセシビリティを担保できなくなる

807 :Name_Not_Found:2018/02/23(金) 13:58:04.89 ID:???.net
もうtext/plainでいいよ

808 :Name_Not_Found:2018/02/23(金) 14:41:00.06 ID:???.net
それが一番簡単でアクセシビリティも高い

809 :Name_Not_Found:2018/02/23(金) 15:40:23.48 ID:???.net
テーブルセルの幅の取り方の挙動をflexで再現できたらいいのになっておもうことがある
区切り線付きの横並びの要素とかで

810 :Name_Not_Found:2018/02/23(金) 16:15:33.24 ID:???.net
gridで無理なんか?知らんけど。

811 :Name_Not_Found:2018/02/23(金) 18:08:07.84 ID:???.net
基本的にアプリは、MVC で作る

Model(データ)と、View は分離させる。
View は、しょっちゅう変わるから、Modelは、View に依存させない

>>802
異なるドメインから読み込んだものや、素性の知れない者が作ったものを、
innerHTML で読み込んで実行すると、何されるか分からないので、危険

自分自身で作ったものだけで、ハッキングされていないなら、まあ大丈夫かな

812 :Name_Not_Found:2018/02/23(金) 18:11:48.00 ID:???.net
>>809
Houdini Layout API

813 :Name_Not_Found:2018/02/24(土) 16:35:23.24 ID:ZwKHpr8s.net
javascriptの知識一通り合ったらjQueryってすぐおぼえられるもんなん?
20時間くらいでいける?

814 :Name_Not_Found:2018/02/24(土) 16:39:50.42 ID:???.net
>>813
ただのライブラリだからすぐに覚えられる20時間もいらん。
本気で1時間やればもうDOM APIは使いたくなくなる。

815 :Name_Not_Found:2018/02/24(土) 16:46:08.13 ID:???.net
DOM APIつかってループで繰り返し要素を作ったり変更したり
したことがあるならjQueryの簡単さに感動するだろうな

816 :Name_Not_Found:2018/02/24(土) 16:59:21.24 ID:???.net
正規表現リテラルって
別に普通にシングルクォートで囲ってパターン文字列として書いてもいいんですよね

817 :Name_Not_Found:2018/02/24(土) 17:04:45.85 ID:???.net
だめ

818 :Name_Not_Found:2018/02/24(土) 19:00:58.00 ID:ZwKHpr8s.net
jQueryってDOM操作特化なの?

819 :Name_Not_Found:2018/02/24(土) 19:16:49.06 ID:???.net
>>818
そうだよ。ライブラリってのは普通何か目的があって
その目的をうまくやるために作られる。
なんにでも使えるライブラリとかそいういうのゴミだから

820 :Name_Not_Found:2018/02/25(日) 11:42:32.95 ID:+FLdsO/Y.net
>>784
できました。
ありがとうございます。
とりあえずはコレでいきたいと思いますが、
他の方の指摘にありますし
データ処理には興味あるので勉強としてデータを構造的に保存する方法も模索していこうと思います。


>>796
データは2次元配列に格納していけばよいこいうことでしょうか
コンポーネントというのはどういうことなんでしょう?

>>805
flexboxにするいうのは
<p>かなんかに各データポイントをいれて
display: flex; flex: columnにして
それを行方向に積み重ねていくって感じでしょうか?

>>811
JavaScriptデザインパターン
https://www.amazon.co.jp/dp/toc/487311618X/

この本に書いてそうなので読んでみます。
ヒントありがとうございます!

821 :Name_Not_Found:2018/02/25(日) 12:33:31.82 ID:???.net
画像を真ん中に配置したいのですが真ん中に配置されずに困っています

var imgTag = document.createElement('img');
imgTag.setAttribute('src', fugafuga);
imgTag.setAttribute('title', hogehoge);

setAttributeを使用し画像を真ん中に設置する方法はありません出ようか?

822 :Name_Not_Found:2018/02/25(日) 13:09:17.86 ID:???.net
>>821
setAttributeなら
style属性に
"margin-right:auto; margin-left:auto"
でいいんじゃない?

外部スタイルシートなら
cssに
.someName {
whatever: anything
}
JSで
imgTag.className ='someName'

823 :818:2018/02/25(日) 14:14:52.80 ID:???.net
>>822
多分ID変わってます
ありがとうございます
頑張ってみます!

824 :Name_Not_Found:2018/02/25(日) 14:29:05.50 ID:???.net
>>820
書名紛らわしいが、一般に「JavaScriptパターン」のほうが良書と評価されてるよ。ご参考まで。

825 :Name_Not_Found:2018/02/25(日) 21:12:43.79 ID:tH4r9gsg.net
macOS High Sierra 10.13.2
safari 11.0.2です。

実現したい機能:Youtubeの自動再生ボタン(動画を再生した後に次の動画に自動遷移する機能)をUserScriptで自動クリックしてオフにする。

Youtubeの自動再生機能はデフォルトではオンで、オフにする事もできるのですが、その設定はCookieで保存されるようです。
しかし私は普段、プライベートモードでブラウジングをします。
そこで上記の機能をTampermonkeyのUserScriptで実現しようとしました。
私はjavascriptに関しては完全な初心者なので、ググって出てきたソースを改変しましたが、機能しませんでした。
おそらく、的外れなことをしているんだと思います。
以下のソースについてアドバイス、ここがおかしい等のツッコミをいただけたら幸いです。
// ==UserScript==
// @name Youtube自動再生ブロック2
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @grant none
// ==/UserScript==

(function() {
'use strict';
setInterval(function() {
var button = document.querySelector("style-scope ytd-compact-autoplay-renderer");
if (!button || button.style.display == "none") return;
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
button.dispatchEvent(evt);
}, 1000);
})();

826 :Name_Not_Found:2018/02/25(日) 21:50:46.55 ID:???.net
>>825
>自動再生ボタンをUserScriptで自動クリックしてオフに

意図がわからん
ボタンを自動クリックしたら再生が始まってしまうではないか?

最近のブラウザは勝手に自動再生しないように環境設定できるのがあるぞ

827 :Name_Not_Found:2018/02/25(日) 22:46:33.87 ID:???.net
ツベのプレイヤーって特殊だよね
javascriptで操作できんのか

828 :Name_Not_Found:2018/02/25(日) 23:39:34.21 ID:tH4r9gsg.net
822です。レスありがとうございます。
>>826私の意図している”自動再生”は、ページを開いた時に再生ボタンをクリックをしなくても動画が再生される機能のことではなく、
動画を再生し終えた後に10秒ほどのカウントダウンがあり、さらにその後別の動画に自動リダイレクトされる機能の事です。
質問文がわかりにくかったようで、申し訳ないです。
スクショを用意しました。
https://imgur.com/a/UDsCL

829 :Name_Not_Found:2018/02/26(月) 00:20:30.30 ID:???.net
>>828
ほらよ。直してやったで

// ==UserScript==
// @name Youtube自動再生ブロック2
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @grant none
// ==/UserScript==

(function() {
'use strict';
setInterval(function() {
var button = document.querySelector("paper-toggle-button[checked]");
if (!button || button.style.display == "none") return;
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
button.dispatchEvent(evt);
}, 1000);
})();

830 :Name_Not_Found:2018/02/26(月) 00:20:55.28 ID:???.net
ついでにjQueryを使ったバージョンな。
覚えるとサクッとできるぞ。

// ==UserScript==
// @name Youtube自動再生ブロック2
// @namespace http://tampermonkey.net/
// @version 0.2
// @description try to take over the world!
// @author You
// @match https://www.youtube.com/*
// @grant none
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// ==/UserScript==

(function() {
'use strict';
setInterval(function() {
$("paper-toggle-button[checked]").click();
}, 1000);
})();

831 :Name_Not_Found:2018/02/26(月) 00:23:17.60 ID:???.net
補足しておくと最初のやつはセレクタがよく分からんやつだった。
適切と思われるものに直した後、checkedがついているときだけoffにするようにした

またjQueryバージョンは、buttonの存在チェックをしていないが、
jQueryっていうのは、セレクタで見つかった要素全てにメソッドを実行する(この場合はclick)
というものだから、要素が見つからなければ何もしないので存在チェックが不要になる

832 :Name_Not_Found:2018/02/26(月) 00:30:44.50 ID:???.net
なお、一行でも書ける
setInterval(() => $("paper-toggle-button[checked]").click(), 1000);

833 :Name_Not_Found:2018/02/26(月) 01:05:40.91 ID:anD7k8Wx.net
822です。
>>829,>>830,>>831,>>832
動作を確認できました。助かりました。
欲しい機能をさらって実現出来たら最高ですよね!
本当にありがとうございました。
Javascript勉強します。

834 :Name_Not_Found:2018/02/26(月) 01:28:47.36 ID:???.net
document.querySelector("paper-toggle-button").checked = false

これでもいける?

createEvent("MouseEvents");
evt.initMouseEvent();
button.dispatchEvent(evt);

このあたり何やってるんだろう
質問者じゃないけど詳しい人教えて

835 :Name_Not_Found:2018/02/26(月) 01:39:57.14 ID:???.net
>>834
行けるかもしれないけど実装次第だろうね

まずpaper-toggle-buttonというタグ(カスタムタグ?)は
動き見てると非同期で表示されてる感じがする。

なので、ページ読み込んだすぐには存在しておらずsetIntervalで
1秒おきにチェックしてるおり、paper-toggle-buttonが
nullの場合になにもしないようになってる。
こういう所、jQueryは存在しなくてもエラーにならない設計なので便利

クリックは実際のマウスクリックをエミュレートしており、
実際にマウスでクリックしたのと同じ動きをする。
YouTube側の実装がcheckedだけを見てるなら、それで動くかもしれないけど
他にクリックされた時に何かしている可能性があるからクリックを
エミュレートするほうが確実

本気で解析すればわかると思うけど、こういうハックでそんな面倒なことしたくない
ささっと解決したいね。

836 :Name_Not_Found:2018/02/26(月) 04:45:38.01 ID:???.net
やりすぎ防犯パトロール、特定人物を尾行監視 2009年3月19日19時7分配信 ツカサネット新聞
http://headlines.yahoo.co.jp/hl?a=20090319-00000026-tsuka-soci

この記事で問題になった通称やりすぎ防パトは、創価学会と警察署が引き起こしていたようです

掻い摘んで説明すると

・創価学会は、町内会や老人会、PTA、商店会等の住民組織に関し、学会員が役員になるよう積極的に働きかける運動を
 90年代末から開始し、結果、多くの住民組織で役員が学会員という状況が生まれた

・防犯パトロールの担い手は地域の住民と住民組織で、防犯活動に関する会議や協議会には、住民組織の代表に役員が出席する為
 防犯活動や防パトに、創価学会が間接的に影響力を行使可能となった

・防パトは住民が行う為、住民が不審者や要注意人物にでっち上げられるトラブルが起きていたが
 創価学会はその緩さに目をつけ、住民組織を握っている状況を利用し、嫌がらせ対象者を不審者や要注意人物にでっち上げ
 防パトに尾行や監視、付き纏いをさせるようになった

・防パトは地元警察署との緊密な連携により行われる為、創価学会は警察署幹部を懐柔して取り込んでしまい
 不審者にでっち上げた住民への嫌がらせに署幹部を経由して警察署を加担させるようになった

・主に当該警察署勤務と考えられる創価学会員警察官を動かし、恐らく非番の日に、職権自体ないにもかかわらず
 私服警官を偽装させて管轄内を歩いて回らせ、防犯協力をお願いしますと住民に協力を求めて回り
 防犯とは名ばかりの、単なる嫌がらせを住民らに行わせた(防犯協力と称し依頼して回っていた警察官らの正体は恐らく所轄勤務の学会員警察官)
 ※これに加えて防犯要員が同様のお願いをして回る

・こうして防犯パトロールを悪用し、住民を欺いて嫌がらせをさせつつ、創価学会自体も会員らを動員し、組織的な嫌がらせを連動して行った

つまり警察署に勤務する学会員警察官、警察署幹部、創価学会が通称やりすぎ防犯パトロールの黒幕

詳細は下記スレをご覧下さい(現在スレが荒されてますので、テンプレと87の連絡先さえ確認して頂ければokです)
やりすぎ防犯パトロールは創価学会と警察署の仕業だった
https://rio2016.5ch.net/test/read.cgi/bouhan/1516500769/1-87

837 :Name_Not_Found:2018/02/26(月) 04:46:12.86 ID:???.net
おいおい、、、、頼むからもうcreateEvent系は使うな
コンストラクタでスマートに作れるだろ

838 :Name_Not_Found:2018/02/26(月) 05:36:10.88 ID:???.net
じゃあ作ってくれよ

839 :Name_Not_Found:2018/02/26(月) 06:28:00.10 ID:???.net
clickイベントを発行するだけなら.
document.querySelector("paper-toggle-button").click()
でいける
jQueryではなく標準JavaScriptでサポートしてる

ただし<input type="image">の_xや_yを指定したいとかなら、
createEvent()で細かく指定する必要がある

840 :Name_Not_Found:2018/02/26(月) 08:39:38.20 ID:???.net
jquwryは他所でやれ

841 :Name_Not_Found:2018/02/26(月) 09:31:38.10 ID:???.net
jq広めてどんな得があるというのか
本が売れるとか?アフィが捗るとか?

842 :Name_Not_Found:2018/02/26(月) 11:31:45.54 ID:???.net
変に謎関数を自作されるより既存のちゃんとしたライブラリ使ってくれる方が後の人が助かる

843 :Name_Not_Found:2018/02/26(月) 11:37:17.85 ID:???.net
とりあえずjqueryは他いけな

844 :Name_Not_Found:2018/02/26(月) 12:02:37.73 ID:???.net
>>839
イベントは
new Event(nameString,optionObject)
の形で作れ
createは非推奨

845 :Name_Not_Found:2018/02/26(月) 16:24:03.79 ID:???.net
>>820-824
Stoyan Stefanov 著
JavaScriptパターン ―優れたアプリケーションのための作法、2011
オブジェクト指向JavaScript、2012

JavaScriptデザインパターン、Addy Osmani, 2013

846 :Name_Not_Found:2018/02/26(月) 17:35:05.56 ID:???.net
>>845
JavaScriptパターン > JavaScriptデザインパターン >>>>> オブジェクト指向JavaScript

847 :Name_Not_Found:2018/02/27(火) 00:25:56.22 ID:???.net
>>841
jQueryはすでに広まってるよ
どんな特があるかは、広めて特があるんじゃなくて使うと特がある。
今回みたいなのはささっと実装できるという得がね
俺の得じゃなくて、使うみんなが得をする

848 :Name_Not_Found:2018/02/27(火) 00:30:54.05 ID:???.net
>>821
> var imgTag = document.createElement('img');
> imgTag.setAttribute('src', fugafuga);
> imgTag.setAttribute('title', hogehoge);

だと

$('<img>', {src: fugafuga, title: hogehoge});

ね?

849 :Name_Not_Found:2018/02/27(火) 03:07:57.09 ID:yvlj/jpz.net
>>846
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法

これは?

850 :Name_Not_Found:2018/02/27(火) 03:37:44.33 ID:???.net
グッドパーツは世界的に超有名な本だけどさすがに古いから読む場合は現在どうなってるか気を付けながら読んで

851 :Name_Not_Found:2018/02/27(火) 04:52:43.68 ID:???.net
The Good Partsなんて出たときから歴史を振り返る見て楽しむ本であって
それで勉強するような本ではない

852 :Name_Not_Found:2018/02/27(火) 12:57:13.86 ID:snOiXd7a.net
配列に関しての質問いいでしょうか?

hoge[10].parentNode.insertBefore(elmDiv, hoge[10].nextSibling)

上記のような配列を指定して要素を追加する記述において、hoge[10]の部分を”一番最後の配列”に指定するメソッドは存在するんですかね?
配列の値が毎度変動するため、(1〜10の時もあれば、1〜30の時もある)
それができるとものすごく楽なのですが・・・調べてみてもあらかじめ配列の数が決まっている場合に最後の値を取得するメソッドしか出てこないんですよね。。

853 :Name_Not_Found:2018/02/27(火) 13:01:21.36 ID:???.net
hoge.length - 1で何かまずいのか?

854 :Name_Not_Found:2018/02/27(火) 14:31:14.67 ID:???.net
JSではlengthゲッタに副作用を持たせる事ができるし
ロジック的にhogeが正当な混じりけのないNodeListだと確認もする
保証された方法がないのでセキュアでない

855 :Name_Not_Found:2018/02/27(火) 15:14:56.35 ID:???.net
ゲッタ・・・

856 :Name_Not_Found:2018/02/27(火) 15:16:07.33 ID:yvlj/jpz.net
本読んで勉強してたらXMLHttpRequestの項目が合って
コードをうって試して見るんだけど
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
というエラーが出てうまく生きません。

サーバーの概念とか全くよく分かってないのですが
コレは自分が今使ってるPCをサーバーとみなして処理とかできないってことなんでしょうか?
いまいちよくわかりません。
現在は自分のPCのあるフォルダにJSとHTMLを置いて
HTMLを同じ自分のPC上でクロムで開いています。

857 :Name_Not_Found:2018/02/27(火) 15:26:14.60 ID:???.net
ローカル環境では自由にXHRはできない、特にChromeはその制約がややきつい
なぜなら、readme.htmlとか開いただけでPCの全データを外部に送信されたりしたら困るだろう?

セキュリティを無効にする方法もあるが、
基本的には「live-server」などの簡易ローカルサーバを立てることが推奨

ちなみに今ではXHRはもう使われない
Fetch APIを使う

858 :Name_Not_Found:2018/02/27(火) 15:41:08.05 ID:???.net
単純にhtmlを
http://localhost/some_file.html じゃなくて
file:///C:/WEBFOLDER/some_file.html とかで開いてしまってて、
他方htmlの中では http://localhost/some_data.json にXHRしてる、・・・とかじゃねーの
当然だがしっかりCORSに引っかかる

まあ本読んで勉強してますなんかおかしいです、っつーなら
本出したとこに電話して聞けよとか

859 :Name_Not_Found:2018/02/27(火) 16:27:33.21 ID:yvlj/jpz.net
なんとなく構造がわかりました。
live-serverで検索してみたけど難しそうなので今回は諦めます。
有益な情報有り難うございました。

860 :Name_Not_Found:2018/02/27(火) 18:02:52.83 ID:???.net
いくらJSとはいえlengthが配列の長さじゃないかもしれないと疑いだしたらキリがなくない?

861 :Name_Not_Found:2018/02/27(火) 20:37:30.61 ID:???.net
>>859
live-serverなんて何も考えなくても1分あれば準備できる最もお手軽なサーバーだぞ

862 :Name_Not_Found:2018/02/27(火) 20:43:48.29 ID:???.net
npm i serve -g
でインストール以降、
serve .
これだけ。

863 :Name_Not_Found:2018/02/27(火) 21:43:46.27 ID:???.net
CORS だろ。
サーバーを立てていないと、異なるドメインにアクセスできない

Python, Ruby など、何かの言語に、最初から入っている、
サーバーを起動させて開発をやれば?

864 :Name_Not_Found:2018/02/27(火) 21:51:16.55 ID:???.net
htmlとjsだけなんだから
Windows環境でも使えて日本語環境もばっちりの
apache httpdでいいじゃん・・・

865 :Name_Not_Found:2018/02/27(火) 21:53:05.05 ID:???.net
> ちなみに今ではXHRはもう使われない
> Fetch APIを使う

これはウソ。前提としてXHRを使えば以下の問題は全て解決している

まずFetch APIにはIE11が対応してない。

Fetch APIに対応していたとしてもStreams APIに対応していなければ
プログレスの取得やキャンセルが実装できない。
https://developer.mozilla.org/en-US/docs/Web/API/Streams_API
Firefox、IE、が対応していない。Safariは不明
Chromeも59からなので少し前の機種は使えないかもしれない
また仕様上アップロードのProgressは取ることはできない

以上のような制限があるので、苦行の道を進みたい人ぐらいしかFetch APIを使ってない。
嘘だと思うのなら勉強サイト以外でFetch APIを使ってるサイトを探してみると良い
まず見つからない

866 :Name_Not_Found:2018/02/27(火) 22:03:42.47 ID:???.net
ブラウザ互換性は重要だが正直言えばそろそろIEは切り捨てても赦して欲しい
仕事ではそうもいかんけど

867 :Name_Not_Found:2018/02/27(火) 22:05:13.09 ID:???.net
仕事でそうはいかないのをわかってるなら
どの辺で切り捨てようというのだ
趣味サイトならいくらでもお好きにどうぞじゃん

868 :Name_Not_Found:2018/02/27(火) 22:13:06.82 ID:wA1MMf5K.net
最初から読み込んでいるJavascriptで制御している開閉ボタンつきサブメニュー部分を
ここだけajaxで更新した時、その開閉ボタンが開閉しなくなるので
なんとかしたいんですが、何かいい方法ないでしょうか?
うまく何がしたいか言葉に表せないのですが、以下の記事とだいたい同じことがしたいです。
http://petitviolet.hatenablog.com/entry/20130418/1366288852

869 :Name_Not_Found:2018/02/27(火) 22:18:13.74 ID:???.net
>>868
どうせ簡単な話だろうが、めんどくさい
サンプルコードかけ

870 :865:2018/02/27(火) 22:32:13.89 ID:???.net
>>869
わかりやすい説明じゃなくてすいません
$(function(){
$("#menu")
.empty()
.load("./menu_output.php");
});
↑こんな感じで#menuだけ更新、
menu_output.php の中に最初から読み込んでいる
$("button").click(function () {
$("p").slideToggle();
});
で動かしてる部分があり、更新し直す前はトグルできるが
更新した後はトグルができない、更新後もトグルできるようにしたいということです

871 :Name_Not_Found:2018/02/27(火) 22:55:04.12 ID:???.net
$(document).on("click", "button", function () {
$("p").slideToggle();
});

って書き直せば動く。documentの部分は
たぶん"#menu"でもいい

872 :Name_Not_Found:2018/02/28(水) 00:27:19.48 ID:???.net
>>871
うまくできました!
ありがとうございます。

873 :Name_Not_Found:2018/02/28(水) 01:35:15.70 ID:???.net
スレ違い質問
http://mevius.5ch.net/test/read.cgi/hp/1517028608/769
に対する回答こちらに書かせてもらいます。

1秒(1000ミリ秒)後別タブでやほおを開き10秒後(10000ミリ秒)後もとのタブをアマゾンに遷移
<a href="javascript:setTimeout((function(){window.open('https://www.amazon.co.jp', '_self')}), 10000)" onclick="setTimeout((function(){window.open('https://www.yahoo.co.jp')}), 1000)">[テキスト]</a>

注意)
・onclickのタイムアウトの値1秒(1000ミリ秒)超える値設定するとChromeではブラウザにブロックされた。迷惑広告対策か。
・当然だけどhrefのタイムアウトの値がonclickのタイムアウトの値を下回ってると元のページが先に遷移しちゃうからyahoo開く処理は破棄される

874 :Name_Not_Found:2018/02/28(水) 03:14:34.55 ID:???.net
>>867
ここはお仕事相談所ではなくて
純粋にJSを勉強しようと思う人のための質問スレだからね

875 :Name_Not_Found:2018/02/28(水) 09:06:05.99 ID:???.net
>>870
jsじゃないから他所いけ

876 :Name_Not_Found:2018/02/28(水) 09:48:06.70 ID:???.net
jQueryというライブラリを使ってるだけでJavaScriptだよ

877 :Name_Not_Found:2018/02/28(水) 14:54:28.28 ID:???.net
料理の為の質問スレと言っても
料理技術を磨きたいっていうのと、とりあえず今日食うものをどうにかしたいっていうのは違う
ここはどちらかと言うと前者で、中食買ってきてレンジでチンみたいなのはお断り

878 :Name_Not_Found:2018/02/28(水) 17:55:22.17 ID:???.net
nativeのjsスレですよー

879 :Name_Not_Found:2018/02/28(水) 18:05:34.10 ID:???.net
nativeオンリーならDOM関連の質問は全部jQueryスレに行ってほしい
jQueryならサラッと書ける回答を素のJSで書くのダルい
もちろん、質問者自身が素のJSで書くことを望んでるなら別にいいんだけどさ

880 :Name_Not_Found:2018/02/28(水) 18:41:59.13 ID:???.net
だるいなら回答やめればいいんじゃね

881 :Name_Not_Found:2018/02/28(水) 20:19:31.72 ID:???.net
だるいって言うのはまあ良いんじゃない
でもできないって言うのはやっぱり良くないと思うから
初心者には素のJSで教えるべきだよ
基本的にライブラリは背景を理解しとかないとね

これは電子レンジでチンすればできるものということしか知らないのと
暖める必要があるから電子レンジを使うということを知っているのと
電子レンジの温める仕組みと性質を理解してるのではやはり状況対応度が違う

882 :Name_Not_Found:2018/02/28(水) 20:36:18.20 ID:???.net
jquery宣伝してるやつは>>829-830書いたやつだろ

jqueryならこう書けると称して
jquery関係なく処理変更で行数減らしたやつ

883 :Name_Not_Found:2018/02/28(水) 21:02:42.15 ID:???.net
>>878
ブラウザ固有のDOM APIなどはnativeのJavaScriptではないので
その理屈はとおらない

884 :Name_Not_Found:2018/02/28(水) 21:05:54.42 ID:???.net
>>882
質問に回答する人 >>>>>>> 何も書かないで文句だけ言う人

これだけは理解しような。
書けばいいんやで、誰よりも早く

885 :Name_Not_Found:2018/02/28(水) 21:24:00.39 ID:???.net
回答だけが欲しいなら専門サイトでやれ
ここは5chだぞ
発言に優劣は無いし急かされる理由もない

886 :Name_Not_Found:2018/02/28(水) 21:27:16.25 ID:???.net
俺は回答がしたいだけやで?w

887 :Name_Not_Found:2018/02/28(水) 23:08:12.41 ID:???.net
ライブラリ禁止なんてどこに書かれてんの?

888 :Name_Not_Found:2018/02/28(水) 23:26:20.17 ID:???.net
javascript自体勉強したいんだけどコード書くような本は全部jqueryなんだよなぁ

889 :Name_Not_Found:2018/02/28(水) 23:30:02.91 ID:???.net
>>888
nodejsとかブラウザを使わないような本なら
jQueryは出てこないと思うよ

890 :Name_Not_Found:2018/02/28(水) 23:58:02.30 ID:S6UN6FH7.net
なんか変な争い始まってんなwwww
個人的にはどっちでもいいが
求められてないのにちなみにjQueryでは。。。とかあえて別にかくコメもうざかったりするが。

891 :Name_Not_Found:2018/03/01(木) 00:12:45.81 ID:???.net
+ JavaScript & jQuery 質問用スレッド vol.8 +
http://mevius.5ch.net/test/read.cgi/hp/1510321470/
ありますやん

892 :Name_Not_Found:2018/03/01(木) 05:48:18.21 ID:???.net
>>890
それは当たり前のように横暴に書かないということで
一応色んな人に配慮してる書き方のつもりなのでは?

893 :Name_Not_Found:2018/03/01(木) 09:14:37.23 ID:???.net
エラーが出てないのにe.preventDefaultが機能しない
のって経験上何か思い当たる?

894 :Name_Not_Found:2018/03/01(木) 10:01:16.14 ID:???.net
stopPropagation()と勘違いしてる

895 :Name_Not_Found:2018/03/01(木) 12:18:04.61 ID:???.net
アロー関数式とfunction式って挙動に何か違いあるの?

896 :Name_Not_Found:2018/03/01(木) 12:26:33.76 ID:???.net
>>895
thisの扱いが違う

897 :Name_Not_Found:2018/03/01(木) 12:35:10.71 ID:???.net
分かった、じゃあ(function(){〜}).bind(this)と()=>{〜}の違いは?

898 :Name_Not_Found:2018/03/01(木) 13:11:25.38 ID:???.net
>>897
クロージャーを作るかどうか

899 :Name_Not_Found:2018/03/01(木) 13:14:34.52 ID:???.net
嘘乙。

900 :Name_Not_Found:2018/03/01(木) 19:50:57.79 ID:???.net
アロー関数ってリテラルやろ?
だったらfunnction命令と違ってかならず
呼び出す前に定義をかかないといけない。
と適当に書いて見る。
適当に突っ込んどいてくれ。

901 :Name_Not_Found:2018/03/01(木) 20:09:16.53 ID:???.net
>>900
>>895はfunction式って言ってるんだから巻き上げが起こらないのはどっちも同じだよ

基本的にfunction式にthisをbindしたものと同じと考えて相違ないと思う

902 :Name_Not_Found:2018/03/01(木) 20:54:20.28 ID:???.net
同じじゃないぞ
var aaa;

aaa = (function bbb(){}).bind(this);
aaa.name;
=> "bbb"

aaa = ()=>{};
aaa.name;
=> "aaa"

chromeなに勝手に無名関数に名前付けてんだよ…

903 :Name_Not_Found:2018/03/02(金) 01:20:32.20 ID:???.net
>chromeなに勝手に無名関数に名前付けてんだよ…
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/name
Inferred function names
Variables and methods can infer the name of an anonymous function from its syntactic position (new in ECMAScript 2015).

狐とクロムだけが対応してる仕様てことじゃないの?

904 :Name_Not_Found:2018/03/02(金) 04:22:09.61 ID:???.net
>>902
aaa = (function bbb(){}).bind(this);
aaa.name;
=> "bound bbb"

ってなったが?

905 :Name_Not_Found:2018/03/02(金) 04:23:26.12 ID:???.net
aaa = function (){}
aaa.name
=> "aaa"

906 :Name_Not_Found:2018/03/02(金) 06:44:12.48 ID:???.net
>>904
へぇ、ブラウザ何?

907 :Name_Not_Found:2018/03/02(金) 06:48:59.74 ID:???.net


908 :Name_Not_Found:2018/03/02(金) 09:32:42.74 ID:???.net
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name

Bound function names
Function.bind() produces a function whose name is "bound " plus the function name.

function foo() {};
foo.bind({}).name; // "bound foo"

909 :Name_Not_Found:2018/03/02(金) 10:32:50.96 ID:LbN5BTkq.net
DHCってもともとは翻訳会社なんだぜ
知らんと思うが

910 :Name_Not_Found:2018/03/02(金) 10:37:50.11 ID:???.net
ドコサヘキサエン酸だっけ?

911 :Name_Not_Found:2018/03/02(金) 10:41:55.31 ID:???.net
>>908
これなんでこうなってんの?
bind()が名前に影響及ぼさなきゃならんの?
適当にisBoundとかのプロパティ設定するんじゃだめなの?

912 :Name_Not_Found:2018/03/02(金) 11:11:37.76 ID:???.net
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
bind() 関数は、新たな関数(束縛された関数 = a bound function; BFとも)を生成して返します。
BF は 特殊関数オブジェクト (exotic function object; ECMAScript 2015からの用語) であり、
元の関数オブジェクトをラップします。BF を呼び出すとラップされた関数が実行されます。

新しい別の関数を生成してるからオリジナルとは別の名前が付けられるってことじゃないの?

913 :Name_Not_Found:2018/03/02(金) 11:41:17.42 ID:???.net
ならnewは?

914 :Name_Not_Found:2018/03/02(金) 11:45:47.54 ID:???.net
newで返すのはオブジェクトであって関数じゃない

915 :Name_Not_Found:2018/03/02(金) 11:47:20.00 ID:???.net
f = (function bbb(){}).bind(this).bind(this).bind(this).bind(this).bind(this).bind(this);
f.name => "bound bound bound bound bound bound bbb"

916 :Name_Not_Found:2018/03/02(金) 11:49:46.76 ID:???.net
>>911
自分でbindメソッドを実装してみれば?
元と同じ名前ではダメな理由がわかるよ

917 :Name_Not_Found:2018/03/02(金) 12:27:15.55 ID:???.net
>>902はchromeだけどなんでnameにbound足されてないの?google舐めてんの?

918 :Name_Not_Found:2018/03/02(金) 12:30:11.12 ID:???.net
お前のバージョンが古いんだろ

919 :Name_Not_Found:2018/03/03(土) 00:58:06.31 ID:???.net
google先生に喧嘩売ってるやついるよwwww
ぎゃっはっはっは

920 :Name_Not_Found:2018/03/03(土) 11:45:17.59 ID:???.net
>>850
>>851
そうなのか。
good partsはちょっと古いけど、アマゾンレビューにも古いからどうとか書いてなくて(最近のレビューないけど)
ページ数もそんななくて手頃だし評判もいいので次コレ読もうと思ってたんだけど。
どうするかなぁ

921 :Name_Not_Found:2018/03/03(土) 18:56:11.20 ID:???.net
jqueryでpreventDefaultする時も、falseを返す必要ありますか?

922 :Name_Not_Found:2018/03/03(土) 20:28:51.66 ID:eXUXKasV.net
XMLHttpRequestって同期モードだとresponseTypeを変更できないみたいだけど、同期モードだとテキストしか受信できないってこと?
同期モードでバイナリを受信する方法はないの?

923 :Name_Not_Found:2018/03/03(土) 21:39:40.98 ID:???.net
同期モードは使うな

924 :Name_Not_Found:2018/03/03(土) 21:39:59.73 ID:???.net
>>921
ない

925 :Name_Not_Found:2018/03/03(土) 21:45:27.59 ID:???.net
>>924
しなくていいんですね
ありがとうございました

926 :Name_Not_Found:2018/03/03(土) 23:26:58.99 ID:???.net
Web APIの仕様書で
URL:/xxx_get
とあるものは、ブラウザのURLに/xxx_getをつければ値が返ってくるのですが、

URL:/xxx_set
Request:cmd={xxx_no}&id={xxx_id}
とあるものは、どうやってアクセスすればよいのでしょうか?

ド素人の質問で恐縮ですが教えて下さい。

927 :Name_Not_Found:2018/03/03(土) 23:39:19.73 ID:???.net
自分の仕事は自分でなんとかしろや

928 :Name_Not_Found:2018/03/04(日) 00:22:23.84 ID:???.net
JavaScriptの質問ではないような気が

929 :Name_Not_Found:2018/03/04(日) 00:48:05.25 ID:???.net
>>928
scriptタグの中に何か指定するのかな、じゃあJavaScriptかなと思いました。

930 :Name_Not_Found:2018/03/04(日) 02:15:30.65 ID:???.net
それサーバー側のプログラミングの問題じゃないの?
サーバーのプログラミング組んだ人に聞かないと駄目なんじゃない?

まぁ俺自信が完全な素人やから参考にしないで

931 :Name_Not_Found:2018/03/04(日) 02:19:13.06 ID:YlpsNuwL.net
URLに
?cmd={xxx_no}&id={xxx_id}
つければいいのじゃないのかな

932 :Name_Not_Found:2018/03/04(日) 03:05:28.92 ID:???.net
>>931
説明不足ですみません、httpのPOSTです。xmlで返ってきます。
GETならば、URLに?cmd={xxx_no}&id={xxx_id}をつければよいみたいですが。

サンプルがありまして、jqueryを読み込んでいて、scriptタグの中に以下の記述があります。

function xxx_setup(id) {
$.ajax({
type: "POST",
url: "cgi/xxx",
data:"cmd=1&id="+ id
});
}

宛先であるURLにデータを送る方法、つまりPOST?の方法が分かりません。

933 :Name_Not_Found:2018/03/04(日) 03:29:40.00 ID:???.net
なんでそんなdataなんだろうな。動くと言えば動くんだろうが
ってかPOSTしてるじゃん
その関数を実行すれば動くだろうさ

934 :Name_Not_Found:2018/03/04(日) 03:36:50.56 ID:???.net
なんでそんなdataなんだっていうのは、
data: {cmd: 1, id: 1}
こっちの書き方で良くて、見やすく文字列加工がいらないから

あとpostなら$.ajaxじゃなくて、$.post使えばいいのに
なんでみんな長い$.ajaxを使うんだろうな?

$.post("cgi/xxx", {cmd: 1, id: 1});

でいい。

んで、お前が分かってないのは、そんな所じゃなくて、
相手のサーバー(ホスト名)は何なんだってところだろ?
そんなのドキュメントでも見ろとしか
urlは見ての通りパスしか書いてないから、そのHTMLを追いてる
サーバーのホスト名になる

で、さらに次は、postしたあとの結果の受け取り方どうするのかわかってるのか?
そこも分かってなさそうなんだが。

935 :Name_Not_Found:2018/03/04(日) 03:39:57.88 ID:???.net
あとな、POSTならHTMLのformから送れる

まあこんな感じだな

<form action="cgi/xxx" method="post">
<input type="hidden" name="cmd" value="1">
<input type="hidden" name="id" value="1">
<input type="submit">
</form>

まあ、答えたはしたがこのレベルじゃないな。


GETっていうのはサーバーからデータを受け取るもの
POSTっていうのはサーバーにデータを送信することだよ
お前に必要なのはこのレベルの説明だろ?

936 :923:2018/03/04(日) 03:47:02.43 ID:???.net
>>933
>>926で書いたサンプルは一部でして、idには他で値を入れてます。

そのPOSTする方法が分からないのです。
ボタンとかを作ってクリックしてあげる必要があるのでしょうか。
以下のサイトを参照しています。
https://qiita.com/busyoumono99/items/9b5ffd35dd521bafce47

URLは、192.168.xx.xx/cgi/xxx_set なのですが、どのようにして送信するのでしょうか?

937 :Name_Not_Found:2018/03/04(日) 03:53:05.36 ID:???.net
なんじゃこのファッキンな記事・・・

938 :Name_Not_Found:2018/03/04(日) 03:54:58.99 ID:???.net
>>936
だから関数を実行すればいい。
実行する方法はいくらでもある。
この仕事をする上で、その方法を知らないわけがない。

つまりだな。
手術の真っ最中にメスって何って聞いてるようなもんだ

939 :Name_Not_Found:2018/03/04(日) 04:03:49.56 ID:???.net
>>938
url: "cgi/xxx", の箇所を、url: "192.168.xx.xx/cgi/xxx_set", にして、
ボタンとかを作って押してあげるでよいのでしょうか

940 :Name_Not_Found:2018/03/04(日) 04:17:37.77 ID:???.net
勉強すればわかる

941 :Name_Not_Found:2018/03/04(日) 08:13:55.01 ID:KR/1MVGQ.net
XMLHttpRequestって同期モードだとresponseTypeを変更できないみたいだけど、同期モードだとテキストしか受信できないってこと?
同期モードでバイナリを受信する方法はないの?

942 :Name_Not_Found:2018/03/04(日) 09:14:34.58 ID:???.net
>>934
jsスレです

943 :Name_Not_Found:2018/03/04(日) 10:20:17.95 ID:???.net
>>937
そのコメントで興味をもって見てみたが
MicroSoftのあたりで見るのをやめたw

944 :Name_Not_Found:2018/03/04(日) 13:33:21.42 ID:???.net
>>941
Promiseじゃだめなの?

945 :Name_Not_Found:2018/03/04(日) 13:40:12.03 ID:???.net
これか?
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
XHRによる画像の読み込み
PromiseとXMLHttpRequestで画像を読み込む別の例は、MDN GitHub js-examplesリポジトリにあり、動作を確認することができます。それぞれの行のコメントでプロミスとXHRの構造がよくわかるはずです。

946 :Name_Not_Found:2018/03/04(日) 15:08:04.99 ID:???.net
非同期使えばいいだろ

947 :Name_Not_Found:2018/03/04(日) 16:05:19.90 ID:???.net
>>932

url: "cgi/xxx/cmd=1&id=" + id,

or

data: {
cmd: "1",
id: id
}

948 :Name_Not_Found:2018/03/04(日) 16:18:38.47 ID:???.net
どうせcgi/xxx/cmd=1&id=undefinedになってるというオチ

949 :Name_Not_Found:2018/03/04(日) 16:53:04.97 ID:???.net
var xhr = new XMLHTTPRequest()
xhr.open('POST', 'cgi/xxx', true);
xhr.setRequestHeader('Content-Type','application/x-www-urlencoded;charset=UTF-8');
xhr.send("cmd=1&id="+ id )

かな

950 :923:2018/03/04(日) 18:49:59.11 ID:???.net
>>947
>url: "cgi/xxx/cmd=1&id=" + id,
urlにホスト名を記述していないのに、なぜ宛先に届くのかが分かりません。

GETの場合は、URLで指定しているので分かります。
POSTの場合は、サーバにデータを送信するのに、サーバのアドレス(ホスト名)をどこに指定すればよいのか?が分かりません。
関数を実行するには、ボタンとかを作って押すというので正しいのでしょうか

951 :Name_Not_Found:2018/03/04(日) 18:53:12.82 ID:???.net
>>949
宛先であるホスト名は、192.168.xx.xx なのですが、
>xhr.open('POST', 'cgi/xxx', true);
これでどうやってホスト名に送るのでしょうか?

952 :Name_Not_Found:2018/03/04(日) 18:59:58.41 ID:???.net
cgi/xxxがアドレスじゃないんか?

953 :Name_Not_Found:2018/03/04(日) 19:05:08.53 ID:???.net
http://js.studio-kingdom.com/jquery/ajax/ajax
ここにかいとるよ

954 :Name_Not_Found:2018/03/04(日) 19:52:50.61 ID:???.net
>>952
アドレスは、192.168.xx.xx/cgi/xxx です。

955 :Name_Not_Found:2018/03/04(日) 20:12:52.77 ID:???.net
趣味で知識ゼロからサイト作ってる人?

956 :923:2018/03/04(日) 20:13:14.05 ID:???.net
>>953
>サーバへのデータ送信について
の箇所を読みましたが、疑問がはれません。

GETのときは、ブラウザのURLに192.168.xx.xx/cgi/xxx_get などと指定してアクセスすれば値が返ってくる。←単純明快
POSTのときは、ブラウザのURLに指定する?しない?
どうやら、XMLHTTPRequest()を作って送るみたいだ。どうやれば実行される?
実行されたとして、どうやって192.168.xx.xx/cgi/xxx へメッセージを送っているのか?

GETのときは、192.168.xx.xx をブラウザのURLで指定したけど、
POSTのときは、192.168.xx.xx をどこにも指定しないでどうやって送るのだろうか?

957 :Name_Not_Found:2018/03/04(日) 20:17:40.57 ID:???.net
一回試しにうごかしてみりゃいいやん

958 :923:2018/03/04(日) 20:18:22.02 ID:???.net
>>955
Web系の知識ゼロの底辺SEがWeb APIを使おうとして悪戦苦闘中です。

959 :Name_Not_Found:2018/03/04(日) 20:20:18.34 ID:???.net
>>957
いまの環境だと試せないので明日試します。

960 :Name_Not_Found:2018/03/04(日) 20:21:43.00 ID:???.net
そのWeb APIの仕様書が何の仕様書でどう書かれてるかは知らんけど
通信先URLが、ホスト名が指定されていない cgi/xxx だけであっても、
だから絶対に機能しないとはいえない

961 :Name_Not_Found:2018/03/04(日) 20:40:15.72 ID:???.net
GETの時
xhr.open('GET',encodeURIComponent('sample.sample?query1=some2&query2=some2'))
xhr.send(null)

POSTのとき
xhr.open('POST', 'sample.sample')
xhr.setRequestHeader('content-type','application/x-www-urlecoded;charset=UTF-8');
xhr.send(encodeURIComponent('query1=some1&query2=some2'))

962 :Name_Not_Found:2018/03/04(日) 20:48:33.84 ID:???.net
<img src="img.png">

963 :Name_Not_Found:2018/03/04(日) 22:10:50.78 ID:???.net
>>961
GETのときは、ブラウザのURL欄に192.168.xx.xx/cgi/xxx_get と指定するので、そこにあるデータを取得するのは分かります。
POSTのときは、GETのときのようにブラウザのURL欄に指定することはしないみたいなので、どこに192.168.xx.xx を指定しているのでしょうか?

この構文の中に 192.168.xx.xx/cgi/xxx のアドレスが含まれているようではなさそうですし。。

964 :Name_Not_Found:2018/03/04(日) 22:22:22.30 ID:???.net
カレントディレクトリじゃねぇの?

965 :Name_Not_Found:2018/03/04(日) 22:38:24.22 ID:???.net
>GETのときのようにブラウザのURL欄に指定
?

966 :Name_Not_Found:2018/03/04(日) 22:51:38.22 ID:???.net
相対パスと絶対パスの話じゃないの

967 :Name_Not_Found:2018/03/04(日) 22:56:01.92 ID:???.net
悪戦苦闘って言葉を使っていい状況じゃないな

968 :Name_Not_Found:2018/03/04(日) 23:20:19.62 ID:???.net
>>964
カレントディレクトリはどこのカレントディレクトリでしょうか?
サーバーの?それともクライアントの?

969 :923:2018/03/04(日) 23:22:18.24 ID:???.net
>>965
>>926でRequestを設定しなくてよい方は、ブラウザにURLを入れて実行したら値が表示されたので、
これがGETなのかなと思っていて、そのことを言っています。

970 :Name_Not_Found:2018/03/04(日) 23:27:43.92 ID:???.net
>>966
>>931
>url: "cgi/xxx",
このパスはサ−バのカレントディレクトリからのパスを指していると思うのですが、
192.168.xx.xx を指定しなくても送信できるのでしょうか?
宛先が分からないのではないでしょうか?

971 :Name_Not_Found:2018/03/04(日) 23:34:14.51 ID:???.net
>>967
そうですよね。前途多難です

972 :Name_Not_Found:2018/03/04(日) 23:43:47.70 ID:???.net
'URL'にすきなもんおきゃいいだけだろ
ばかなのかこいつ

973 :Name_Not_Found:2018/03/04(日) 23:48:27.75 ID:???.net
おまえらなんでキレながら丁寧に教えてんの?
ツンデレなの?

974 :Name_Not_Found:2018/03/05(月) 00:12:14.87 ID:???.net
べっべつに教えてるわけじゃないんだからっ
ただの独り言なんだからっ

975 :Name_Not_Found:2018/03/05(月) 00:14:45.16 ID:???.net
いや、俺はjQuery以前の問題なんでさっさと手を引いたよ
流石にこの程度じゃjQueryの素晴らしさを他の人に
伝えることは難しいからね。

つまり1+1の答はなんだ?っていう話題で
jQueryを使うと〜という話をするのは難しいということ
せめてAjaxの話にまでくれば良いんだけどね

976 :Name_Not_Found:2018/03/05(月) 00:30:57.02 ID:sxVFIZX2.net
>>968

>>962

977 :Name_Not_Found:2018/03/05(月) 00:32:37.38 ID:???.net
jQueryニキに見放されるとは
もうおまえこの業界でいきていけんぞ

978 :Name_Not_Found:2018/03/05(月) 01:16:26.77 ID:???.net
見放すとは失敬な。お前らに任せるって言ってるんだよw
jQueryの話題じゃねーもの

979 :Name_Not_Found:2018/03/05(月) 01:48:34.87 ID:???.net
HTMLのformでGETとPOST勉強してこい

980 :Name_Not_Found:2018/03/05(月) 02:38:27.82 ID:???.net
フォームデータを送信する
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data

981 :Name_Not_Found:2018/03/05(月) 04:57:30.71 ID:NlfT2vVU.net
http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#executeAsyncScript

↑このexecuteAsyncScriptのExampleにあるarguments[arguments.length-1]が指してるのはどの関数に渡されてる引数のこと?

982 :Name_Not_Found:2018/03/05(月) 13:03:34.23 ID:???.net
どこにあるか見つからんのやけど
とりあえずコレ嫁
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments

983 :Name_Not_Found:2018/03/05(月) 15:21:02.11 ID:???.net
jQuery でフォーム送信は、form.submit(); かな?
「jquery form submit」で検索!

Ajax で同期処理は、非推奨だから使うな。
非同期のみ使え

JavaScript のXHR は、ややこしいので使うな。
素人は、jQueryのAjaxなどを使え

「jquery ajax example」で検索!

984 :Name_Not_Found:2018/03/05(月) 16:09:55.80 ID:???.net
jQueryは甘え

985 :Name_Not_Found:2018/03/05(月) 16:33:51.61 ID:???.net
ライブラリもフレームワークも甘え
高級言語自体甘え

986 :Name_Not_Found:2018/03/05(月) 16:54:38.46 ID:???.net
c++は甘えですか

987 :Name_Not_Found:2018/03/05(月) 17:39:31.56 ID:???.net
自分で作ったライブラリは甘えですか

988 :Name_Not_Found:2018/03/05(月) 19:06:45.69 ID:???.net
甘えんぼさんばっかりだね

989 :Name_Not_Found:2018/03/05(月) 20:33:23.50 ID:???.net
GreasemonkeyのAPIであるGM_xmlhttpRequestって戻り値がundefinedになる仕様なのですが
return出来ないとなると即時関数内にまとめて処理を書くしかないんでしょうか?
処理を分離したいのですが良い方法はありませんでしょうか?

GM.xmlHttpRequest({
method: "GET",
url: "http://www.example.com/",
onload: function(response) {
処理
}
});

990 :Name_Not_Found:2018/03/05(月) 21:04:32.82 ID:???.net
別の関数作ってGM.xmlHttpRequestのonLoadでそれ呼ぶようにすれば?

991 :923:2018/03/05(月) 23:32:10.86 ID:???.net
>>980を参考にフォームデータを送信してみました。
Requestのデータにcmdだけを設定するものがあったので、まずはそれを試してみました。

<form action="http://192.168.xx.xx/cgi/yyy" method="post">
<input name="cmd" value="1">
<button>test</button>
</form>

すると、ブラウザでは<error> xxxxxxxx </error> タグが入ったものが返ってきました。
ステータスコードは、302 Foundでした。とりあえずはサーバからResponseが返ってきました!
302の意味は「今ちょっとここにないよ」みたいなので、設定が足りないのだと思います。(何となく心当たりがあります)

992 :Name_Not_Found:2018/03/06(火) 12:32:36.52 ID:nWSEmP07.net
http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#executeAsyncScript

↑このexecuteAsyncScript関数のExampleにあるarguments[arguments.length-1]が指してるのはどの関数に渡されてる引数のこと?

993 :Name_Not_Found:2018/03/06(火) 14:06:53.36 ID:???.net
>>992
Promiseオブジェクトのresolve関数だろう

executeAsyncScript関数の定義の中身が
Promiseになっててarguments[arguments.length-1]
でresolve関数が実行されるようになってるのだろう

Unlike executing synchronous JavaScript with #executeScript, scripts executed wit
h this function must explicitly signal they are finished by invoking the provided call
back. This callback will always be injected into the executed function as the last a
rgument, and thus may be referenced with arguments[arguments.length - 1].
てかいてるやん。

994 :Name_Not_Found:2018/03/06(火) 14:46:32.29 ID:???.net
次スレよろ

995 :Name_Not_Found:2018/03/06(火) 16:06:32.24 ID:???.net
>>992
おまえってさ
何日か前にXHRのバイナリがなんとかで質問してたやつ?
解答ないと質問コピペで繰り返して
解答あってもスルーする糞野郎だろ?
しねよ

こいつの質問には今後一切答えないように

996 :Name_Not_Found:2018/03/06(火) 16:36:19.03 ID:???.net
了解!

997 :Name_Not_Found:2018/03/06(火) 17:09:39.66 ID:???.net
そりゃ的外れな回答されても反応に困るわな

998 :Name_Not_Found:2018/03/06(火) 18:32:22.56 ID:???.net
的はずれな回答されたなら
またコピペ質問してるはずだろ
こいつならw

999 :Name_Not_Found:2018/03/06(火) 18:48:25.16 ID:???.net
誰も立てないから立ててきた
https://mevius.5ch.net/test/read.cgi/hp/1520329583/

1000 :Name_Not_Found:2018/03/06(火) 18:57:02.64 ID:???.net
的外れなら「的はずれなんだよボケ。俺はこうしたいの。オマエ馬鹿なのか。バカは返答するな」って言ってもらわんと方向修正できんやろ。
コピペで質問返されてもな。

1001 :980:2018/03/06(火) 22:08:15.01 ID:???.net
>>983
に書いてある

素人は、jQuery のAjax を使え!!

1002 :Name_Not_Found:2018/03/06(火) 22:12:59.80 ID:???.net
次スレ

+ JavaScript の質問用スレッド vol.132 +
https://mevius.2ch.net/test/read.cgi/hp/1520329583/

1003 :Name_Not_Found:2018/03/06(火) 23:33:28.43 ID:???.net
jsコード上でxhrでapi叩くのと
formを作ってsubmit()させるのとじゃ効果が違くね?

1004 :2ch.net投稿限界:Over 1000 Thread
2ch.netからのレス数が1000に到達しました。

総レス数 1004
304 KB
掲示板に戻る 全部 前100 次100 最新50
read.cgi ver 2014.07.20.01.SC 2014/07/20 D ★