+ JavaScript の質問用スレッド vol.131 +
レス数が1000を超えています。これ以上書き込みはできません。
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にして見えないようにしてください。文句をつける=荒らしです ■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 型の中身をそのまま表示してくれます。) ■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 和訳) >>1
ライブラリ禁止の条項をなくした、という事はいつもの人か ライブラリ禁止は質問者やほかの人のためになるかどうかじゃなくて
アンチが荒らす免罪符とてしか使われてないからな だからテンプレリンクあまりに多すぎだって
こんな沢山のリンク読む人はいない
MSDNだってMDNに統合されるし、リファレンスはMDNだけで十分
WHATWGとかW3CはMDNを読んでもっと詳しく知りたいと思った人が勝手にたどり着く
ES仕様もしかり、ここで紹介しても仕方がない テンプレが無駄に多いのは100スレ続く伝統
技術者のクセ 「伝統」は本当にそれでいいのかを常に見直し更新していくのがプログラマのさだめ
「ずっとこうだから」と言った時点でその人はただのコーダー 前スレに書きましたが、chromeのローカルストレージの実装がLevelDBなので
LevelDBのデータファイルの中身を
node.jsで見ようと思ったのです おまえら大先生なんだから
本質的にJSというよりライブラリの話だなってわかった時点で誘導してあげればいいじゃん?
そんなにけんけんしないで 殆どがライブラリでも解決できる話題なのでここでやる方がいい
誘導が多い=ここでやるべき話題ってことだ 質問者がライブラリの話を始めるのが問題なんじゃなくて
ライブラリ使わずとも数行で実現できることであっても
頑なにライブラリを勧めようとする回答者がいることが問題 いろんな回答があって良いのだからライブラリを使った回答でも良い
その人がライブラリを使わない回答を書く義務もない
ライブラリを使わない回答は他の誰かがやればいい
それをやらないで頑なにライブラリを使った回答をするなと
言うやつが問題
ライブラリを使うなというのではなく、
ライブラリを使わない回答を書け
そうすれば荒れることはない >>20
それなー
わかるんだけど、初心者とかだと特にjQuery使うだろうから
ピュアJSで教えたら、教えた部分だけ浮いちゃったりするんじゃないかなー
とも思う
>>21がごもっともだと思う
こうも書けるよ!って言うだけで良いのだろうなと >>14-17
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
この本では、データアクセス(CRUD)は、Flux の、Store という部分で、
UI とは完全に分離させている
nmp の、immutable パッケージで、データを変更不能にしたり >>23
00年代前半にオレオレライブラリを作ってた記憶が…うっ、頭が ■テンプレ案
http://fiddle.jshell.net/fH4cC/174/show/light/
■諸注意
vol.115でlodashを不必要に推奨して啓蒙する行為が多く確認されており、ライブラリ系の話題はvol.116から禁止されました。
vol.115,116ではライブラリ禁止する発言が見られた直後にライブラリを許可する意図で次スレを立てる行為が確認されています。
本スレッドでライブラリ許可を求める発言が確認された場合は不要な争いを避ける為、スルーすることを推奨します。
ライブラリの話題はライブラリスレへ誘導し、誘導行為への反論はスルーしてください。 JavaScriptでたまに
{ ...abc, }
みたいなの見ますが「...」って何なんでしょうか? >>27
伝統あるテンプレをvol.116から勝手に変えないでください
いい加減怒りますよ?
勝手に変えて良いのであれば、vol.131からライブラリは解禁になりました。
スレの住民の意見をちゃんと取り入れましょう >>28
これ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator
>>1より
> ・動作ブラウザや環境が限られる場合は、それを明記してください
ということなので書くと
比較的最近使えるようになった。リンク先にも書いてあるが
IEではサポートされていない(Edge12から使える)
Chrome、Firefox、Safariも古いやつは使えないが
これらの古いやつはシェア低いので無視していいだろう もう一つ、IEに対応する必要があるのであれば
babelやtypescriptを使って変換するという手もある >>30
スプレッド演算子とかいうやつですか。
調べてみます。ありがとうございます。 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>
); >>34
こういう書き方も好き
(hrefやtaget変数に入れておいて何らかの処理をすることはよくあるので)
const href = '〜';
const target = '_blank';
const attr = {href, target};
return <a {...attr}>あ</a> >>29
テンプレを勝手に書き換えた>>1にもどうぞ文句を入れて下さいよ 質問テンプレートとか、テンプレも結構後から改変されてるよね
残してほしいところだけ「前からあった」といい、変えては困る場所だけ「勝手に変えるな」と彼はいう >>40
5ちゃんねるに申請でもしてこのスレの公式管理人でもなったら?
でないのであれば、俺とお前は立場は一緒、
俺がスレの民意をまとめてその内容でテンプレにしただけの話 >>41
>>27のテンプレも当時のスレの民意をまとめて決めたものだけど、なぜその伝統は無視するの?
>>1は事前に話し合ったわけでもなく、彼が独断で決めただけでしょ
話し合いのあった当時と比べるべくもないよ テンプレ案にjsfiddleを使い始めたのはvol.97からか
http://fiddle.jshell.net/fH4cC/1/show/light/
ライブラリ禁止はvol.116から続く伝統
ライブラリ荒らしとの言い争いも伝統といえなくもないな >>41
> 5ちゃんねるに申請でもしてこのスレの公式管理人でもなったら?
> 俺がスレの民意をまとめてその内容でテンプレにしただけの話
君が>>1なら、>>1のルールを守るのは最低限の礼儀だと思うよ
> ・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事) javascript初歩的な質問で申し訳ありません
var string = "1020304";
string,split("0")
を最初に出てきた0だけで分割して[1,20304]にしたいです
どうすればいいんでしょうか? >>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); 俺だったらstring,split("0",1)にした後
その結果とその文字数+0を差し引いたものを配列として扱うね なんでsplitの2番目の引数指定した時の動作が他の言語と違うんだろうか var string = "1120304"; 場合 >>49だと無理 >>45
/^([1-9]*)0(\d*$)/.exec(string); >>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"; で破綻する ライブラリ荒らしは、ライブラリを禁止にした奴が荒らしかな?
とにかく、スレを一杯立てた奴が荒らしなんだよ
Undescore から、Lodash へ移行したのは、皆が知ってる常識だから、荒らしじゃない。
今でも、Undescore を使っているのは、Backbone だけ
荒らしは、jQuery, Lodash とか、皆が新しい知識を得るのを、邪魔してくる。
荒らしは食えないから、他人の勉強の邪魔をしてくる
とにかく、JavaScript の情報を書いてない奴が荒らし。
推薦書を書いても、ステマやステマやとか、荒らしは皆の邪魔してくる
とにかく、JavaScript の情報を書いてない奴とは、会話しないように。
そいつは荒らしだから >>45
> var string = "1020304";
> 分割して[1,20304]にしたいです
まずstringの文字列の法則と、分割後の array は String なのか、Number なのか
質問に於いての説明が不十分 Vue.js meet upが応募開始10分で100人満員になってた…
Vue.js人気だねー file:///d:\sample.htmlからhttp://localhost/postmethodにajaxでpostすると失敗します。エラーコードは0です。
失敗する原因として、下記が3つ存在することまではたどり着きましたが、試行錯誤のうえ解決に至っていません。
1.サーバがCORSに対応していない。
2.異なるプロトコルにAjaxできない。
3.Chromeのセキュリティポリシー。
他に何か思い当たることはありますか?
やはりfileからhttpにajaxは出来ないのでしょうか?
(そうなるとデバッグが微妙に面倒です) >>56
クロスドメインかセキュリティポリシーだと思う
hosts触って
http:/exasmple.com
でアクセスした時にローカルを見るようにするといい
具たち的にはこんな感じ
https://qiita.com/nbkn/items/e72b283c54403a30b2e1 >>56
プロトコルもホスト名もポート番号すら違って、同一オリジンと見なされるわけがない
CORSについて勉強し直すべき SPAみたいなアプリを作るんですが、内部の状態を全部保存して、次にアプリを表示したときに
復元するのですが、普通の静的型付け言語ならモデルにメソッド追加したりしても、
大抵は元に簡単に戻せるんですが、JavaScriptではどうすればいいんでしょうか??
JSONじゃなくてもいいんですが、自前でシリアライズ・デシリアライズする処理を
かいてるんでしょうか?? メソッドごと保存しようというのは正しくない
まず、仮想DOM的なものを設計して、HTMLでもCanvasでもアタッチ出来るくらいのビューを用意する
そしてそのビューに対してこれからどういう変更を加えるか、加えてきたかのアクションチェーンを設計する
実行はアクションチェーンを読み出しつつ各アクションの種類に応じてswichを使ったりして行う
保存はアクションチェーンオブジェクトと仮想DOMオブジェクトをそのままIndexedDBなんかに保存すれば良い
JSONは循環参照を扱えないのでオススメしない、まあ循環参照だけならほぐしてJSON化可能だが
画像なんかのバイナリも別に保存したいこともあろうからIDBがオススメ
1アクション中のアニメーションだったり、もうちょっと工夫が必要だがそれで概ね上手くいく >>60
なんかいろいろずれてる気がするな
web製作板なのだからウェブアプリってことでいいのか?
SPAみたいなアプリを作ると書いているが、あなたが書いている内容は
SPAとは関係ない話になっている。
まず
> 内部の状態を全部保存して、次にアプリを表示したときに復元するのですが、
と書いてあるがウェブの世界ではSPAでなくとも一般的にサーバーにデータを保存し、
ページを表示した時にサーバーからデータを取ってくる。SPAではそれがページ単位ではなく
何かしらのコンポーネント単位になることもよくある
> 普通の静的型付け言語ならモデルにメソッド追加したりしても、
> 大抵は元に簡単に戻せるんですが、
一般的にシリアライズっていうのはデータのみを保存するのだから
モデルへのメソッドを追加に関しては、静的型付け言語かどうかは関係ない
シリアライズが(簡単に)可能かどうかっていうのはクラスのインスタンス変数を
全て取得する方法を言語やライブラリが提供しているかどうかにかかっている
JavaやRubyはそれが可能なので簡単に実現できるが
JavaScriptはではそういったことは完璧にはできないので出来たとしても制限がある
一般的にできないと考えたほうが良い
とはいっても、JavaScriptのobject(配列や連想配列)≒JSONなのでJavaScriptのクラスが
持っているデータをobjectとして管理していれば、比較的簡単にJSON化できる。
なおJSONではなく他のバイナリデータにシリアライズするライブラリも有ったはず
そして「次にアプリを表示したときに復元する」というのはobjectを表現するデータを
JSON形式でもいいし、そうでない形式でも良いが、サーバーに保存することになる
オブジェクト自身を保存するというより、中身のデータを保存するという感じ
まあつまりは自前でシリアライズ・デシリアライズする処理を書くことに相当するわけだが
繰り返すがJSON形式を用いればそれは大したことじゃない そしてSPAとは関係ない話では有るが、SPAを実装する時は
自力で作るのではなく、何らかのフレームワークを使ったほうが良い
残念ながら俺はSPAフレームワークには詳しくないのだが、
SPAを作りやすくする"フレームワーク"として機能で
オブジェクトをシリアライズ・デシリアライズする機能があるかもしれない。
つまりフレームワークが決めたルールに従って作ることで
モデルを簡単にシリアライズしたりデシリアライズできる。
そういう機能があるかないかはしらないが、自力でSPAアプリを作るのは骨が折れるので
SPAアプリを作るというのが本当の目的であれば、
まずSPA対応のフレームワークの使い方を勉強することをおすすめしたい
ちなみになぜ「SPAアプリを作るというのが本当の目的であれば」なんて
わざわざ言ってるのかというと繰り返すが>>60の内容はSPAアプリを
作る時の話とは関係ないから >>60ですが、そこまでは書きませんでしたが、実際はReactを使います。で、それと他にRedux使うかMobX使うかとか
どうするか色々調べてるところです。例えば、MobXとか使うと元のオブジェクトがラップしてオーブザーバルになるみたいんです。
React使う前にも他にデータバインディングできるライブラリを調べると、元のオブジェクトをラップしたり
とか何種類か方法があるみたいんですが、そららを使うと
JavaScriptのobject(配列や連想配列)≒JSONじゃなくなるっぽいので、一般的にどうすればいいのかなと
思った次第です。 漏れもブラウザで、ローカルHTML・JS ファイルから、
jQuery のAjax で、2ch にアクセスしようとしたけど出来なかった
iframe 内になら取得できるけど、外側のHTMLファイルからは、アクセスできない。
内外で、異なるサイトに扱われるから
そこで、ブラウザから、YQL(Yahoo! Query Language)のサービス・サーバーを利用して、
アクセスする方法があった。
jquery.xdomainajax.js も、YQLを使っていたけど、動かなくなった
異なるサイト同士では、直接アクセスできない。
Node.js とか、Node.jsを含んだ、Electron など、
サーバーを立てて、サーバーを介して通信しないといけない JavaScript一般的にはシリアライズする方法はないので自力でやる必要がある。
そこら辺をフレームワークがカバーしている(かもしれない)
というのが答かな
もともとJavaScriptはクラスなんてものはなかったから
シリアライズすべき変数はなんや?って話なんだよ。
ローカル変数を使われるとクラス(に相当する関数)の外から見る方法はないし、
関数を値として扱えるから、関数のコードをシリアライズするの?って話まででてくるし >>65
YQLなんていずれだめになるだろう
あれは使うべきではない 入門 React ――コンポーネントベースのWebフロントエンド開発、2015
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
Stefanov の本では、Flux を使って、JSON で、localStorage に保存している。
まあ、これは例題だから、実際には、DB を使うのだろう 怖い例題だな
ブラウザ開発者の機嫌次第で一発でふっとびそう >>68
> JSON で、localStorage に保存している。
そこは(どうでも)いいんだよね。
表現形式と保存場所の話だから
シリアライズっていうのはオブジェクト(クラスのインスタンス)を
どうやって保存できる形式に変換するかって話だから
その本ではクラスのインスタンスのシリアライズの話をしてる? >>64ですけど、
>>66
>もともとJavaScriptはクラスなんてものはなかったから
>シリアライズすべき変数はなんや?って話なんだよ
ありがとうございます。
いったんクラスというのも忘れて真剣に考えないとダメっぽいですね。
>>68
そうですね。redux使うと、完全にStoreはシンプルになるので、そのまんまシリアライズ・デシリアライズ
できそうなんで、そこは楽そうなんですが、redux自体がactionやらactionCreaters,Reducersやらで・・ Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
https://github.com/stoyan/reactbook
whinepad という名前で、Excel みたいな表を作っている
インスタンスの保存だけど、メソッドは保存しない。
保存するのは、データだけ >>53
なんか素で勘違いしてそうだからレスするけど
スレをいっぱい立てまくってたのが件のテンプレ改変した人であり前スレとここの>>1だよ スレをいっぱい立てまくっていたのが、荒らしだろ?
それで皆、苦労したんだろ?
このスレは、荒らしが立てたスレか?
まあそれなら、再利用すればよい
とにかく荒らしは、議論させないように、皆の邪魔をする。
jQuery の話をするなとか、Lodash の話もするなとか、DOM の話もするなとか、
荒らしの言う通りやっていたら、スレが細分化されて、議論できなくなる。
そうやって、ここのコミュニティをつぶすつもりだろ
スレを分けるなら、プログラム板のように、
初心者向け・上級者向けに分けるべき その話いい加減にしてくれないかな?
いま問題なく進行してるだろうが >>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など禁止) >新しいスレの内容の条件
>・JavaScriptだけを扱う(AltJSやBabelやTypeScript禁止)
>・ブラウザのDOM APIだけを使う(jQueryなどのライブラリやフレームワーク禁止)
>・サーバーサイド禁止(nodejsなど禁止)
これが、荒らしが作りたいスレだろ?
何も、コミュニティが交流できないように作っている
荒らしの言う通りやっていたら、スレが細分化されて、議論できなくなる
次スレからは、プログラム板のように、
スレを初心者向けと、普通用に分けてくれ 初心者用と普通用ということであれば話題の内容は一緒だ。
どちらもライブラリの話題も対象となる。 というと反対してくるんだろうな
結局ライブラリの話題を禁止したいだけ 初心者用は、主に言語の文法などが、わからない人向け。
普通用は、フレームワーク・ライブラリも含める
プログラム板もそうだし、これで良い また、初心者用のスレを勝手に立てて、ライブラリ禁止とか書いてる
こいつがいつもスレを一杯立てる、荒らしじゃないのか? 初心者専用のスレがほしいって言ったから立ててやっただけだろ
あとは勝手にメンテしろや
俺は最初からいらないって言ってる 初心者って言ってもどのような初心者かわからないんだから
分けるんなら目的に応じて分けないと駄目でしょ
JavaScript.DOM勉強スレ(ただしライブラリ排除ではなく、あくまでDOMや標準APIから学んでいく事をモットーとした勉強のためのスレ)と
JavaScript解法相談スレ(JSをできるだけ深く学習する事なくライブラリやツールを駆使して簡単に問題を解決する事をモットーとしたスレ)
で分けよう
これまでの質問スレは終了 ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる
禁止事項を勝手に作って、スレを一杯立ててる、こいつが荒らし
今まで、Lodash厨が荒らしかと思っていたけど、荒らしじゃなかった。
誰が荒らしか、ようやく分かった >>87
勝手にスレ作って勝手に保守してろ
ここが嫌ならさっさとでていけ ライブラリ禁止とか、DOM禁止とか、jQuery禁止とか、
色々な制限を加えて、皆が議論できないようにしてる
結局、スレのテンプレを勝手に変えて、禁止事項を勝手に作って、
スレを一杯立てている奴が荒らしだな
ライブラリ用スレとか、jQuery用スレとか、
スレを分割して、皆が議論できないようにしたのも、この荒らしか
皆、荒らしと会話しないように。
もし気付かず、荒らしと会話している人がいたら、荒らしと教えてあげて テンプレを勝手に変えた>>1も荒らしということだな
>>1を相手にしないように 既存の配列に他の配列を連結したいのですが、1発でやる方法はないでしょうか?
for (let sourceItem of sourceItems) destItems.push(sourceItem);
現状、ループを回しています。 新しい配列で良いなら
destItems.concat(sourceItems) JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。
https://qiita.com/takeharu/items/d75f96f81ff83680013f
指定した位置に一つ以上追加 - splice
非破壊的な結合 - concat
破壊的な結合 - push pushにこだわるなら
Array.prototype.push.apply(destItems,sourceItems);
あるいは
destItems.push(...sourceItems); 既存の配列を書き換えたいのです。要は破壊的結合で。
destItems.push(...sourceItems);
ああ、pushでそんな書き方できたんですか・・
>>28で教えてもらったスプレッド演算子ってやつですね。
ありがとうございます。 スプレッドって巨大な配列でやろうとするとエラーになるから嫌いなんだよな 配列長の制限値を超えた配列作ろうとすればそりゃエラーになるが
別にスプレッド関係ないわな こんな式を見たのですが、これは何ですか?
var data = ('' == 0 ? '' : ''); >>101
では、このコードを書いた人はどういう意図で書いたのでしょうか?
JavaScript専門家の方の推理を聞かせて下さい。 >>102
・あなたか「書いた人」が転記ミスしている
・「書いた人」が文法をよくわかっていない
文法エラーは関わった人に問題がある以外に考えられないので、第三者が推理するのは時間の無駄です。
大抵はあなたか「書いた人」が頭の中のイメージで転記しているだけで転記ミスしているケースが大半です。 >>101を鵜呑みにして書いてしまいましたが、文法エラーはないですね。
>>100は
var data = '';
と等価で>>100のように回りくどい書き方をする必要は全くありません。
説明用のコードか、難読化の一環なのか知りませんが、コードの意図は書いた人に聞く以外の方法はないでしょう。 >>104は
・あなたが転記ミスをしていないのなら
・「書いた人」が転記ミスしていないのなら
の条件付きの回答です。
その可能性を捨ててはいけないと思います。 >>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
引数の問題だからスプレッド自体に問題が有るわけではないけどな 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が必要だって >>100-105
式 ? a : b
3項演算子は、式が真なら a で、偽なら b だろ
var data = ('' == 0 ? '' : '');
式 ? a : a
式が、真でも偽でも、空文字を返すから、この式は無意味。
単に空文字を代入すれば良いだけ あー、まだ >>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の場合だけ空文字になる 訂正
var data = ('<?= $v ?>' == 0 ? '' : '<?= $v ?>'); もちろん、意味があるコードかもしれないとは言うが
無駄かつ良くないコードだとも言う
普通はこんな書き方はしない。
こんな書き方はしないが意味が無いとは言い切れない >>112
無駄なコードを意味がないコードと表現してるだけだろ
言葉遊びも程々にしろ >>113
「0だったら空文字にしたい」という要望があったとしたら
それを正しく実装しているわけで無駄ではないよ >>116
それは三項演算子ではなく、ただのif文だろ
それと「無駄かつ良くないコードだとも言う」に言及して反論してるのだが、前言撤回もここまで早いと信頼性ゼロだな >>117
少なくともifであることは認めたようだが
あんたにとって三項演算子とifの違いって何? > var data = ('<?= $v' ?>' == 0 ? '' : '<?= $v' ?>');
これはやってることに意味があるが
無駄かつ良くないコードだろ
何を反論してるんだ? >>118
質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら、話はここで終わりだな > 質問の意図が分からんし、「無駄かつ良くないコードだとも言う」の否定に反論がないなら
無駄かつ良くないコードだと言ったのは俺なんだが、
なんで俺が自分が行った言葉に反論しなきゃいけないんだ? 無駄かつ良くないコードだが
ちゃんと動く
っていうことの意味が分からんのかな?
俺ここでよく無駄かつ良くないコードを
修正してるんだが >>119
>>112では「無駄」と認めながら>>116では「無駄ではない」といってるだろ
前後で主張が変化する奴は信用できない 揚げ足ではないような
自己矛盾を抱える人は日本語が分かってない人という典型かな 日本語がわからんやつは困るね。いちいち説明せんといかんのかね
コードが無駄だってだけで動作は無駄じゃないってことだよ
ちゃんと書いてあるだろ 必要なことをやっているけど無駄の多いコードは冗長なコードというべきではないか 1 + 1 // ->
で2が出力されるのですが、これは何でしょうか??? > 必要なことをやっているけど無駄の多いコード
「必要」と「無駄」は対義語
必要なことをやっているなら無駄ではない >>132
なるほど、この場合はコードに無駄が多くて長いが
処理そのものには意味がある(無駄ではない)ってことだな >>133
必要の対義語は不必要ってでてきたけど? >>136
日本語ひどすぎねぇか・・
「必要」かつ「無駄」ってそれぞれ修飾してる語が違うんだけど >>137
俺は無駄なコードを書いている
俺は必要なことをやっている(無駄なコードを書く事は必要である) 必要なことをやっているコードと
必要なことだけで書かれてるコードは違うだろう 意味不明な論理だし、直接的に反論しないところがいやらしいな >>112はいつもの日本語破綻者だしなあ
曖昧に濁して、相手の反応を伺う事で糸口を探してるんだろ > 必要なことをやっているけど無駄の多いコード
そもそも、これは「無駄なコードを残すことに意味がある」と主張したいが為の論理でしょ
「必要」と「無駄」の修飾先が違うのなら、必要なAだけ残して無駄なコード(B)を排除すれば良いだけ
よって、「無駄なコード(B)を書く事に意味はない」と結論される
どちらにしても、論理が破綻してるんだよ カレンダーのマス目に編集ボタンが配置されていて、編集ボタンをクリックすると編集画面が表示されるページを作成しています。ここでお尋ねしたいのが、idの名前の付け方です。
今は、id=btnEdit20171201、id=btnEdit20171202と名前を付けていますが、より良い名前の付け方はありますか? idをつけない、という選択肢もあるんじゃないかな
押したボタンから日付を取得したいなら、カスタムデータ属性なり、button要素でvalue属性を使うなり、手はいくらでもある >>145
>>146も書いているけどそういうIDが必要になるのがおかしい気がするね。
JavaScriptのスレに書いてるってことは、JavaScriptからそれらを参照するつもりなのだろう
本題の前に言っておくと、普通HTMLでは全部小文字でハイフン区切りが多い
btn-edit-20171201 みたいに。なぜかはよく分からんけどアンダースコアはあまり使われない
まあそれでもBEMみたいな変則的なものは有るし、強制ではない
んで、本題。あーだこーだ言いたいが、まあ要するにIDなしでやる方法を知らんのだろう?
なので軽くサンプルを書いてあげよう
https://jsfiddle.net/bfw0m3p6/ >>146,147
ありがとうございます。とても参考になりました。idを振らずにイベントをトリガーしたり、カスタムデータ属性を使う方法などがあるのですね。
編集画面でクリックされた日の年月日を引き継いで表示したりすることを考えると、カスタムデータ属性が面白そうですね! >>148
そのマス目に入れるものが日付だけならtime要素を使うのが良いかもね
https://developer.mozilla.org/ja/docs/Web/HTML/Element/time
<time datetime="2017-12-05">5日</time> ['みかん','りんご','みかん','ばなな','りんご','りんご',]から
一番出現回数の多い「りんご」を得るにはどうすればいいでしょうか? >>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;
}
みたいな感じ(細かい所は省略 >>151
すまん、 reduce の使い方がダメダメだったので取り消す 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 に入れたけど、最大値が複数ある場合の、処理がわからない >>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);
// => ["りんご"]
出現回数が最大のものが複数ある場合を考慮して複数返している >>154
ありがとうございます
やっぱりライブラリ使わないと難しそうですね >>155
別にライブラリ使わなくてもできるよ。
ただ見て分かる通り優れたライブラリを使うとこの程度の問題なら
複雑化の原因になる条件分岐やループを使わずに最小のコード量で実装できる Haxe で書いた通り、まずMap が必要だから、
ES6(2015) + Babel で、ES5 へ変換
>>153
で、Map に入れる所までは書いたから、その後を書けば?
漏れは、最大値が複数ある場合の、処理がわからなかったけど
Lodash も、ES6 もほぼ同じ ES6は必要最小限しか言語機能として搭載しない
という考え方があるから、高度なことはできんよ
>>154の例だとcountByとpickByはない
その他は代替方法があるが少し冗長になる
まあ書いてみると良いよ ES6 が流行れば、Underscore/Lodash がいらなくなる、という記事が一杯あるけど
Ruby, Kotlin だと、ライブラリが無くても、かなり簡潔に書けるけど。
列Aでソートして、それが同じ値なら、さらに列Bでソートするとか
Kotlin 2
https://mevius.5ch.net/test/read.cgi/tech/1509462463/18 >>160
そこに出てくる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とかの構図は変わらない 初歩的な質問で恐縮ですが、お分かりの方ご教授ください。
画像のパスの一部を書き換える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');
}
}; >>155
ライブラリ使わなくても単純に考えればいいのよ
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); >>162
jQueryが得意そうな課題だなw
動かしてないけどこんな感じかな
$(function() {
$('.gallery img').attr('src', function() {
return this.src.replace(/xxx/, 'xxx_s');
});
}); >>162
var images = document.querySelectorAll("div.gallery img"); >>164
>>165
さっそくありがとうございます。
お二方のコード双方動きました。
動くと嬉しいですね〜。 >>166
あ、ごめん。少し無駄があった。
(最初のページロードを待つ部分は単に書くのを省略するとして)
$('.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 文字列の先頭からのマッチングに使うのに適した変数名は何だろう
startWithか?とか思って検索していて、
ES6からStringにstartsWithメソッドが追加されているのに気づきました
こんなメソッド知ってましたか?
Google書籍検索で「JavaScript startsWith」で検索しても、
日本語の本は一冊も出てこないところをみると、
知らない人は決して少なくないと思います
他にもES6で追加されているのに知らないメソッドがある気がします
どう調べればいいですか? >>163
答えが複数ある場合でも、OK だね
ただ、そういう複雑なプログラムを書きたくないから、
便利な関数を検索していた >>163
ありがとうございます
みかんとりんごが同数の場合は、どちらか一つが取れればいいので
こんな感じに書いてみましたが間違ってたらご指摘下さい
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); >>171
何を持って複雑というかだね。
俺は条件分岐やループが多く処理の中で状態が
変化するようなものを複雑だと定義している
だけど人によっては知らない関数を使うことを
複雑だと言う人もいるだろう >>172
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]);
こうすればいいだけだよ >>173
> 何を持って複雑というかだね。
いや、複雑の定義は(いくつか有るとは言え)ソフトウェア業界で決まってるんだから
いくつか有るうちのどれかに従おうよw
オンラインで複雑度を調べるサイトぐぐってみたら
http://jsmeter.info ってのを見つけた
(意味は知らないのあるからちょっと調べてみようかな)
>>163の結果
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 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: 保守容易性(高い方がいい) >>175-176
ライブラリのコードを含めて比較しなければ公正とはいえない >>167
両方動きました!
上級者になると一行で書けるんですね。 >>177
ライブラリの部分は十分にテストされて書かなくていい部分だから
そこを含める必要はないよ
っていうかその話をするとブラウザの部分まで含めろ
OSの部分まで含めろってなるだろ 自分の書くコードをシンプルにするためにライブラリを使うのに
ライブラリを使ってシンプルにするなど許さん!
ライブラリの分まで含めるのが公平だ!なんて言ってるのか?
どんだけ複雑すれば気が済むんだろうか そもそも複雑度ってファイルごと、クラスごと、関数毎に出すものだから
例えライブラリが複雑だとしても、
・使ってるライブラリが複雑です
・それはそれとしてあなたの書いたコードはシンプルです
という結果になるだけの話なんだけどね
対するは、
・ライブラリは使ってません
・それはそれとしてあなたの書いたコードは複雑です
となるだけの話 > 自分の書くコードをシンプルにするためにライブラリを使うのに
そう思っているのはあんただけ
意味も分からずに http://jsmeter.info/ を使っているから、ライブラリを使うためのツールぐらいにしか思えないんだろうな >>182
それで何が言いたいのさ?
否定だけして、お前の意見が何も書いてないぞ プログラム板にも、荒らしが出てるぞ
元々、荒らしは、全部のスレで、いちゃもんを付けてくる。
漏れも、何回も攻撃されてる
プログラミングの話は、一切できないくせに、批判ばっかり書いてるのが荒らし
ただ、Ruby, JavaScript のスレでは、
荒らしにかまうから、喜んで居着いてるだけ
荒らしは一切、無視すべし! 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 ) >>186
あれに付け加えてもいいけど
別のやり方でもうちょっと汎用的な処理を書くとして例えばこういうのはどう?
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] // ["りんご", "みかん"] => 最大個数 >>190くらいなら同時に把握しない要素数が10も無いから
プログラマのワーキングメモリに乗るという意味で普通のコードの範疇だと思う 関数や命令を知っているという前提で、1行の処理を把握するのに
5秒以上かかるようなものは普通のコードではないと思う
コードは読むものであって、解析するものになってはいけない 場合による
行数が短く一つのブロックがスクロール無しに見れることも重要
つかそもそも読む必要はできるだけ少ないほうが良い
今回のような処理の場合ただ最大個数の要素を得るためだけに十行二十行かけるのは極めて愚策
そこからの処理が重要なんだから、普通は外部関数化する
あえてインラインで書くならできるだけ目につかないように短く書いたほうが良い
仮にもしそこに問題がありそうだということになれば、一行捨てて書き直しても良い程度のものだし > つかそもそも読む必要はできるだけ少ないほうが良い
ということは、ライブラリを使って読むものを減らすのが正解なわけか > 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個ぐらい
これぐらいの量を、ひとつづつ意味を考えながら
読んでいかないといけない >>170
にも書いた通り、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回走査してしまう。
一発で取得できないから、無駄を感じる >>196
考え方が逆
そもそも一度限りのかき捨てのコードなんだから読む必要がない
問題があれば捨てればいいだけでその時に例えば>>174のような感じだと
4個も公開変数があるから結局一部を捨てたりということもしづらい
一部を修正しようと思えば結局全ての行とそのほかの部分の絡みを考えないといけない
これもワンラインで書くなり使わない変数を削って一つの塊にすべき
もしくは5行程度なら即時関数にしてスコープ限定してもいいけど
本当にデバッグを考えたら結局コメントだったりわかりやすさが足りない
逆に何度も使うんならライブラリ使ったり書いたりする
もし単関数で取れるライブラリがあればそれで良し
中途半端な気遣い(?)は一番無駄 > そもそも一度限りのかき捨てのコードなんだから読む必要がない
一度限りのかき捨てのコードなんて誰が決めたの?
あなたの思い込みですよね? > 問題があれば捨てればいいだけでその時に例えば>>174のような感じだと
> 4個も公開変数があるから結局一部を捨てたりということもしづらい
公開変数ってなんや?
this.foo なんてのが公開変数やろ?
どうみても>>174はローカル変数や
一部を捨てたりってなんや?
全くもって意味不明だ 初心者です。
この本(http://amzn.asia/386grG8)を文中の課題をやりながら読み終わったので、
次はこちらの本(http://amzn.asia/cDn7CWG)に行こうと思っております。
この話を知人にしたところ、旧版(http://amzn.asia/cv1is9n)を持っているから貸してやろうか?と言われました。
同じ本ですが2010年の旧版です。
javaScriptの学習において そこまで問題がなければ旧版を借りようかと思うのですが、
この界隈の技術の移り変わりは早いので本書も最新版を買うべきでしょうか? 初めてのJavaScript 第3版、オライリー、2017
この本は、ES6(2015)の本だけど、
プログラミングを数年以上やっていないと、難しくて読めない
初心者は、(ECMA Script)ES3, ES5, ES6 と順番に、やった方が良いかも
今のブラウザは、ES5だけど、
ES6ではクラス構文などもできて、極端に難しくなる >>201
間違いなく新しい方が良いけど
古いから役に立たないって訳でもない クラス構文習うよりprototype習うほうが難しくね? >>174, >>185
ありがとうございました! >>201
あってもいいけど物理的な本は必要か?と思う あるていど経験してるとサイト検索で十分だと思うけど
最初のうちは体系立てて勉強できるように、本がいいと思う >>204
プロトタイプは超簡単
「prototype」は難しいが、それはプロトタイプベースとは関係なく
関数をクラスに見立てたJSの旧クラスシステムで必要になるもので本質とは関係がない
でもプロトタイプベースで書けるようになったのはES2015からで
その教え方をしている入門書なりは見たことがない phpマニュアルみたいなサイトないもんかね
あれを一度ガッツリ読むとすんげーレベルアップするんだけどな >>208
> でもプロトタイプベースで書けるようになったのはES2015からで
JavaScriptは最初からプロトタイプベースだよ
「俺は昔のJavaScriptはプロトタイプベースとは認めん!」というのは無しな
それはお前の「オレオレ定義」であって世間一般には通用しないものだから
世間一般にはJavaScriptは最初からプロトタイプベース HPで友達が稼げるようになった情報とか
⇒ http://asaswq3wq.sblo.jp/article/181819223.html
興味がある人だけ見てください。
717PZBPVIE >>210
いやいや、JSのベースがプロトタイプかどうかを言ってるんじゃなくて、
プロトタイプベースらしいプログラミングができる言語だったかを言ってるんだよ
ES2015まではプロトタイプの設定が自由にできなかったんだが
それでプロトタイプベースプログラミングが出来るわけ無いでしょ
だから長らく継承テクニックとしてJSの内部プロトタイプの操作を利用するハックが使われてきたのよ
それでもES2015でいうextendsの効果にもある
関数のプロトタイプを別の関数にするとかいう重要な操作はできなかったわけよ
でも当時でも独自実装であった__proto__を使えばそれは容易にクリアできたわけで
それこそがプロトタイプベースのポテンシャルなわけよ class構文追加でより難しくなるかどうかの話だったと思うが >>214
とりあえず自分が言いたいことは、prototypeプロパティやnew演算子を使った継承周りのテクニックは
確かに簡単とは言いにくく、class構文はその点分かりやすいけれど、
勘違いしてほしくないのは『プロトタイプ』を活用した継承システムは本来簡単なはずなんだってこと
でもJSでは長らく活用が許されてなかったので、プロトタイプベースOOPの文化や学習が整っていないということ >>215
因みにプロトタイプベースらしい書き方ってどんな感じ?
TypeScriptメインだからよくわからんのだ >>216
最初から用意されている1つのクラスシステムに縛られないのがプロトタイプベースの良さと言っても
大きなコードを書けば自ずと抽象化の結果として何らかのクラスシステムを作ることになる
既存のJSの2つのクラスシステムは当然内部的にプロトタイプベースのプロトタイプ設定を利用しているのを見ても分かるが
プロトタイプの自由な設定機能がないとまともなクラスシステムを作るのは困難
一番わかり易い形で具体的に絶対にできないことを挙げるなら上で書いたように関数のプロトタイプ設定
つまり関数へのメソッドの継承が実現できない
因みにプロトタイプベースらしい書き方って言うのも一概には言えないのかもしれないし、
実際はコンストラクタ的な機能を考えたりしてクラスシステムを構築する場合もある
そもそも自分がこれを挙げた理由は継承の概念を理解するのが簡単ということで
本当に単純なプロトタイプの設定だけでOOPが円滑にできるとは言わない
その上で書くと 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構文でない旧クラスシステムで書いたコードと比べたら明らかにそうだよねってこと >>213
いや、だからそれはあんたの「オレオレ定義」であって
世間一般ではJavaScriptはプロトタイプベースのオブジェクト指向だって
最初から言われてる
言われているかどうか。事実の話をしている。
あんたが認めるかどうかじゃない >>218
俺は前者だな
知ってるからかもしれんが
class構文がなかったころと比べたら
まあどっちも理解しやすい >>217
> つまり関数へのメソッドの継承が実現できない
それはクラスベースでは当たり前にある機能で
プロトタイプベースはクラスベースと同じ機能が
なければないと思ってるからだよね?
つまりあんたはクラスベースとプロトタイプベースを
違うものだって考えられてないってこと
プロトタイプベースをクラスベースの書き方を変えただけと思ってるから
クラスベースと同じ機能がない=プロトタイプベースではない
という意味がわからないことになってるんだよ。 ようするに「プロトタイプベースのオブジェクト指向」を
やるのであれば昔のJavaScriptでもそれは普通にできる
プロトタイプベースのオブジェクト指向で
クラスベースの真似事をしようとするから
機能が足りないって思ってしまう
プロトタイプベースでやるならば、
別に最初から機能は不足してない これも一応書いておくか
言いたいことはいろんな形のオブジェクト指向があるということ
https://codezine.jp/article/detail/3708
> 継承は決してオブジェクト指向の必須技術ではありませんが
> (実際、継承を持たないオブジェクト指向言語も存在しています)、 >>222
完全にJS流クラスシステムに毒されてんな
自分はプロトタイプベースのメリットは最初から用意されているクラスシステムに縛られないことって言ったでしょ?
でも旧JSは半分、いや3/4くらい縛られてたわけよ
旧JSでプロトタイプベースっぽい、つまりクラスに縛られない固い言語でない特徴が現れていたのは
オブジェクトとプロパティのゆるさだけで、ここで問題にしている継承周りに関しては
他のクラスベース言語同様に縛られていたし、むしろクラスシステムがクソな分状況が酷かった
だからみんな旧クラスシステムの内部のプロトタイプ操作を利用する
『機能が十分なクラスシステム』をいろいろ考えてたわけじゃん
それでも関数のプロトタイプ設定はできないってことが長年の悩みだったわけだけどね
それと話を整理するけど
プロトタイプベースでも機能は足りるっていうのは話が食い違っている
よく考えてみて
それって、new演算子やprototypeプロパティを使えば、
プロトタイプの設定ということができなくても継承は十分に実現できるって言いたいんでしょ?
でもこちらはそもそもそのnew演算子やprototypeプロパティを使ったJS流旧クラスシステムの複雑さと
本来のプロトタイプベースでの継承実現の簡潔さを比較してるんだよ
話がおかしいよね?
あとそちらこそプロトタイプベースとクラスシステムの関係を分かっていないようだけど
プロトタイプベースでも、デフォルトのクラスシステムがあることとは矛盾しない
それに縛られないってことが重要だからね > それって、new演算子やprototypeプロパティを使えば、
> プロトタイプの設定ということができなくても継承は十分に実現できるって言いたいんでしょ?
いわんよ?
継承はオブジェクト指向に必須ではない。
new演算子やprototypeプロパティを使えば、
プロトタイプベースのオブジェクト指向が実現できる
それだけ 分かった分かった、自分が悪かった
『継承』っていうのをクラスベース的な捉え方してクラス同士の話だけと思っている人がいるようだから話が食い違うんだな
自分が言っているのはプロトタイプ的継承だったり、もっと一般的な「継承」の話だから
例えば>>223でも引用されている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プロパティだって継承のための機能なんだよ
要するに継承が云々言ってきたのは、(ある程度構造化した状態で)プロトタイプチェーンを繋げるのは云々って話だから スクリプト書こうとするとNGワードが出て書き込めない…
質問したいのに〜 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]を書くと上書きされてしまいます。。
任意の配列に複数要素を追加する書き方をご教授願えませんでしょうか…? >>226
まだ話が食い違ってるな。
俺が最終的に言いたいことは、JavaScriptは昔からプロトタイプベースの
オブジェクト指向だってことだけだよ
で君がいいたいことはだいたい分かる。
それに対して反論するならば、
[君がいいたいこと] 昔のJavaScriptは継承がやりにくい
それは事実だろう。だがやりにくいからといってもできる以上
プロトタイプベースであることを否定することにはならない。
つまり継承がやりづらいプロトタイプベースのオブジェクト指向
[君がいいたいこと] 一般的な「継承」ができない(面倒)
大変でもできる。できるのだからオブジェクト指向と言える。
それにそもそも継承はオブジェクト指向の必須要件ですらない
だからプロトタイプベースのオブジェクト指向
わかる? 継承があってもなくても、面倒であってもそうでなくても
JavaScriptは昔からプロトタイプベースのオブジェクト指向なんだよ >>228
本当にNGワード?ブラウザで書き込めるんじゃない?って思わなくはないが、
jsfiddleあたりで動く最低限のサンプルコード書いてから質問すればいい あ、やっぱり動く最低限のサンプルコード書いてもらわないとダメだな
divがネストしてるのかどうかわからんから答えられん 任意の配列とか言ってるのに、1以上から始まってるのが謎だし
じゃあ複数とはいくつまでなのかとか書いてないし情報が足りんだよ
まあ、情けでエスパーして(いつも通りjQueryで)書いてやったが
次はもれなく情報を書くか、jsfiddleにサンプル書くか、その両方をやってからレスしてくれ
https://jsfiddle.net/ft3aegkx/ >>229
>上書き
上書きの意味がよくわからんが、
2回目の追加は、実際は1回目に追加した elmDiv の移動になった
ということか?
追加するたびに createElement(cloneNodeでもOK)で
新たに要素を作成しないとそうなる 要素を2つ、追加したいのなら、
まず要素を2つ、作った(new した)かどうかを確かめる var aaa=undefined;
とのか変数にundefinedを入れるって文法的に正しいのでしょうか?
undefinedって変数未定義のときにwebコンソールとかで出ると
考えているため、変数に代入することはないと思ってんですけど
どうなのでしょうか? 文法的には問題ない NaNとかと同じ
ただ変数に直接入れるような使い方が相応しい場面はかなり少ないと思う undefined は、JS の実行環境が使うもの
プログラマーが使うのは、null すいません、正規表現について教えてください
メールアドレス判定の許可として下記条件にプラスして
/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/
空(何も無い)も許可として追加したいのですが
どのように書いたらよいでしょうか・・ /^(^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$)?$/
出来なくもないけど非常に分かり辛い
文字列長0で分岐させたほうが良さそうな気がする >>240
正規表現をそのまま使うやつは馬鹿
名前をつけて使え
名前というのは関数名のことだ。
function is_email(email) {
正規表現チェック
}
空を許可するんだろう?
function is_email(email) {
emailが空なら return true
正規表現チェック
}
こうすればよかろう 質問です
環境はvagrantでubuntu16.04を使用してます
vue-cliを使ってるんですけどnpm run buildしてlocalhost:8080にアクセスできません。
ポートフォワーディングは8080→8080で設定しています。
http_proxyも設定しています。
ローカルホストからアクセスする方法を教えてください 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');
}
);
});
}); >>247
高速回答ありがとうございます!
もうちょっと考えてみます $(this).attr
でええやろ
dataはキャッシュかなんかですげー使いにくいぞ スコープの問題と分かりました
こういう場合はどう解決すればいいんでしょうか?
グローバル変数にする、DOMにclassをつける、などが思い浮かびましたが違う気がしてなりません
お助け下さい・・・ $(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');
}
);
});
}); >>251
なるほどー!なるほど!ありがとうございます
jsって難しいですね 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');
}
);
});
}); >>249
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で現在地を入れ込むという処理を割り込ませると考える 例えばこんな感じ
$(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だけで動くことを確認して、その続きで
処理を加えていくという作り方ができる 現在地の取得はhttpsにしないとエラーが出るゾ
気づいたら昔作ったサービスが動いてなかったゾ ここは、JavaScript のスレです
Java ではありませんので、スレ違い! 動画サイトを見ていて、動画ページでコメントだけを見たいときとかに、ページを軽くしようとして
$("video").remove();
とか
$("video").parent().remove();
とかするのですが、これだと音声は再生されたままになってしまいます
コントローラーは消えるので音声を止められないし、ミュートだとちょっと重くなりそうなので
ムービー関係のもの全て消す方法ってないでしょうか?
例サイトはYouTubeです >>261
pause() を使うとか、src属性を無効なURLに設定するとか >>261
for (var video of document.querySelectorAll('video')) {
video.pause();
video.parentNode.removeChild(video);
} >>262,264
再生を止めても、裏では動画や音声は読み込まれてるので、やっぱり結構CPUメモリ食べちゃうんですよね
>>263
無効なURLにするの良さげですね
ありがとうございます >>261
一時期軽くしたいと思っていたときは、
そういったものは原則OFFで、必要なときだけ再生するようにしていたな
昔はProximitronでHTMLを書き換えて実現していた、
比較的最近はブラウザの機能でFlashを自動的に再生しないようにしていた
もしかしたらブラウザに動画を自動的に再生しないような
設定があるんじゃないかな?
もし今の俺が同じことをやろうとしたら、ブラウザのプラグインである
TampermonkeyかStylishを使うかな? 実現できるか知らんけど おみとろん懐かしいな
今ならTampermonkeyだろうけど
本気でコメントだけ読みたいならapiを叩くという手もある EcmaScriptという言葉はES5あたりから良く聞くようになったと思いますが
それより前のES3相当のJavaScriptも、
EcmaScriptの標準を参照して作られていたのでしょうか? https://developer.mozilla.org/ja/docs/Web/JavaScript/Language_Resources
ECMAScript は JavaScript の基礎を成すスクリプト言語です。
ECMAScript は標準化団体 ECMA International によって ECMA-262 および
ECMA-402 specifications として標準化されています。
次のような ECMAScript 標準が承認済みおよび策定中です: ショッピングサイトにビットコイン決済を導入した際に、価格表記をビットコイン、マウスを重ねたら円表記が出るシステムを外注したいのですが、JavaScriptで大丈夫でしょうか? >>272
できるよ
マウスオーバーで表示変わるのはJavaScriptの得意とするところだから問題ない
単純なのならCSSでもできる
リアルタイムな相場の取得はAPIでできる
仮想通貨の各取引所がAPIを公開してるからそれ使えばいい
取引所によって取得の仕方や形式が違うからその辺は好みかな
ずっと提供されるかは保証ないからいくつかをフェイルオーバー的に作っておいた方がいい >>273
事細かにありがとうございます。
プログラミングの知識はないのですが、外注に当たって方向性だけでも確認したかったので助かりました HTMLは初級ぐらいでJavaScript(TypeScript)も普通ぐらいには使えるようになって、
Reactも使えるようになったのですが、目的のUI作れません。
WPF/UWPならXAMLとコントロール使って、AndroidならレイアウトファイルとViewコントロールを使って
複雑でないUIならとりあえず普通に作ってアプリ作れるんですが。
自分のレベルだとWebアプリだとかなり死ねます。
例えば、ちょっとこの項目を右寄せ表示するにしてもできねぇーとかのレベルです。
やっぱ、CSSを覚えるしかないのでしょうか??みなさんはバリバリCSS使いこなしてるんでしょうか?? >>275の続きです。
例えば、Material UIなどReact用のコンポーネントはドキュメント見れば普通には使えるようになったんですが、
タブにアイコンつけたいとか、リスト表示でこの項目を右寄せしたいとか
Reactコンポーネントのプロパティに用意されてないことやると、
とたんにダメなレベルで、UIがつくれません。 >>275-276
cssも覚えないと、結局細かい事は何も出来ない
>タブにアイコンつけたい
font-awesomeのver4を使う
>リスト表示でこの項目を右寄せ
text-align:right >>275
> やっぱ、CSSを覚えるしかないのでしょうか??みなさんはバリバリCSS使いこなしてるんでしょうか??
HTMLもCSSも使いこなしてるよ。というかJavaScriptだけでやろうとしたら破綻する
基本的にJavaScriptではデザインは作らない
JavaScriptでやるのは状態に応じてclassを設定するとかそういうことぐらい
そのclassに応じてどういう見た目にするかはすべてCSSで行う
そうしないと面倒なだけだから
逆にCSSを使いこなすと処理とデザインの責任範囲が明確になるから
コードはシンプルになるし、デザインの修正も簡単になる 個人的には細かいこと気になるならCanvasの方がオススメ >>234
>>235
>>236
規制で書き込めなかったけど読ませていただきました。
無事解決しました!ありがとうございました(遅) 「当方のエージェントは、追跡を避けるためメールアドレスを毎週変更している。
かあわいい ついに宇宙一難解なパズルが完成しました・・
その名も
『宇宙一難解なパズルゲーム』!!
http://jagarikin.html.xdomain.jp/pzl.html
htmlでできてるのでブラウザから手軽に宇宙一難解なパズルをプレイできるよ〜 5年ぶりに触り始めたんですけども、
var不要論ってなんすかね? let, constが使えるならvarで宣言する意味はない(少なくともletに置き換えて問題ない)
そして現状、メジャーな環境では使える
それならvarいらんよね、という主張かと コールバックの中の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のミステリーについて教えてください。 >>287
> 関数を実行するだけ
ではない。
asyncFunction() は promise も返す。
2 つめの then は、その promise がresolveされたときに呼ばれることになる >>288
訂正
2 つめの then は、…
→
2 つめの then の中のfunctionは、 … >>289
ありがとうございます。
asyncFunction()
.then(function (value) {
console.log(value); // => 'Async Hello world'
asyncFunction()
}).then(function (value) {
console.log(value); // => 'Async Hello world'
})
この書き方では動かないのは、これではpromiseが返ってこないということです…かね?
説明が下手で本当に申し訳ないです。 Promiseのthenメソッドが返すPromise Tはthenメソッド中でPromise Rを返した場合
Rの解決を待って、その解決値を持ってTが解決されることになる
つまり実質的にT==Rと言うように振る舞わせることが出来る
つまり、
非同期A .then( Aの解決値を得て、別の非同期Bを実行 ) .then( Bの解決値を得て、別の非同期Cを実行 ) .then ......
というようにどんどんthenを繋げて行くことができる
勿論then中でそのチェーンとは独立したPromiseを作成することを繰り返してもいいが、
そうすると所謂コールバック地獄のようにネストが深くなってしまう
それを平坦化するためにこの機能がある >>290
Promiseをreturnするのが自然だけど
気持ち悪いなら別にこう書いたって良い
https://jsfiddle.net/4kks4bns/ 皆さん、ありがとうございました。
ようやく納得がいきました。 この流れで理解できたのか・・・?
なんか質問者も回答者もずれまくってる気がするんだが なぜか納得してるようだが、これで納得できるはずがないので勝手に説明するわ
まず基本(?)系。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;
}); >>297の例では、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に変えても
同じように動かすことができる。同期と非同期の違いを吸収していると考えることができる。 >>287で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()された結果 >>287の
> 以前も別件でfoo.map( ( x ) => x*2 )を
> foo.map( ( x ) => { x*2 } )と書いてしまい、returnでハマりました。
これは単純な勘違いをしているだけ
{ } を省略したら return も省略できる
{ } で囲んだら return が必須
というだけの話
個人的にはアロー関数は、関数っぽく見えないのも利点の一つだと思ってるので
前者の書き方をおすすめする。 { } をつけて returnを書いて、ましてや { } の中に
複数の式や文を書くのはなんか違うと思ってる >>300
ありがとうございます。自分の納得は低レベルでした。
めちゃくちゃわかりやすかったです。精進します。 >>300
お前それforEachさんの中でもおんなじこと言えんの? forEachとか使わないな。
普通はmapとか使う 個人的にforEachは名前をforやeachにしなかったのが結構な失敗だと思ってる >>304
普通って何よ。お前の普通なんて知らんがな。
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);
}); 普通こうやるからなぁ
console.log(['foo', 'bar']); おじいちゃん、配列の要素をそれぞれログするのと配列をそのままログするのは違うでしょ。
前者は
foo
bar
後者は
[ 'foo', 'bar' ]
になるでしょ。
ロシアのえんぴつ的なことが言いたいならそもそもブラウザのデベロッパーツール使えばいいでしょ。
でもそういう話じゃないから。 まあ普通にこうかくだろうな
何度もconst order = ・・・を実行するのは無駄だし
const order = ['小', '中', '大'];
const data = ['大', '小', '小', '中', '中', '大'];
data.sort((a, b) => order.indexOf(a) > order.indexOf(b)); >>309
ごもっともな指摘。
もっとちゃんとした例考えないとな… ちなみに最後の
data.sort((a, b) => order.indexOf(a) > order.indexOf(b));
は、order.indexOfを二回書くの無駄だと思わね?
lodash使うとこう書ける
_.sortBy(data, v => order.indexOf(v)); へぇー思想違うんだなぁ。
考えてみてもこの仕様で困る例が思い付かない。
素のsortでは表現できてlodashのsortByでは無理な比較仕様ってあるのかな 思想? 違いがあるとしたら
まあ何かやりたいことがあって、それを実現するためには
どういうふうに処理したらいいか?と考える人と
やりたいことがそのままコードになってないと気がすまない人の違いかな
俺は「文字の小さい順に並び替えたい」と思ってるから
コードには「文字」「大小を求める」「並び替える」この3つぐらいしか
登場してほしくないんよ。人間の思考の通りのコードになって間違いが少なくなる
一方で、並び替えるには文字と文字をそれぞれ数値化したものを比較する関数を
ソート関数に渡せば実現できるという、やりたいことを処理に置き換えてからコードにするやつもいる
処理を考えてしまうから、こっちのやり方では冗長化してしまうんだよ。それが困ることだな >>312
あり得そうな気がするが、相当なレアケースじゃないかな。事実上困らない >>316
こういうこと?
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]] ライブラリ使う必要ない場面で
ここでしか見ないナントカってのを執拗に勧めるやつまだいたのか
害悪だなぁ ここでライブラリを使うって事は間違ってないと思うよ
ただsortByっていう名前での
結局ライブラリを覚えないと自明ではない振る舞いは好きじゃないし
それがこの一時で便利だとは思わない >>319
sort by というのは例えばRuby標準にも有るしよく知られた単語なんだよ
プログラマにとって、for といえば ループねって
わかるように、sort by というだけで何をするのか知ってるもの
それに対して、オレオレライブラリで勝手な名前を作ると困る
それが何をするのかわからない
同じ覚えることでも、一般的なものを覚えるのと
プロジェクト固有のものを覚えるのとでは、覚える価値が違う
lodashはよく知られたアルゴリズムをよく知られた名前で実装してるので
覚える価値が高い。たとえ使わなくても知っておいたほうが良いものばかりだよ 他の言語にあるって然程重要では無いと思うけどね
特に補完が弱い動的型付け言語のJSでは
いかに他のJS周りの標準と命名規則を揃えて
振る舞いや型を想像付かせるかが大事
JSにsortByのような文化は無いのだから
なんぼRubyやらにそれがあると言われても
多くのJSerはローダッシュのsortByと覚えることになるのよ >>322
> JSにsortByのような文化は無いのだから
世界が狭いな。
あんたはJSの世界に生きてるわけか
俺はプログラマの世界に生きてるんだよ。
JSはそのプログラマの世界の一地域にすぎない >>324
それは日本人に会った時世界の挨拶だからと言ってハグするようなもんだぞ >>326
それは的はずれだな。
今言ってる世界っていうのは、広さの話をしてる
JSの世界っていうのはプログラマの世界の一部 >>328
今は相対的な話をしているので、
プログラマの世界よりも○○の世界が広い言い方をしてくれない困る
そして○○が話と全く関係ない世界だとそれは意味がない JSerの価値観っていう話でさえ既に十分に大袈裟で広い話なのに
JS質問スレにプログラマの世界(しかも一部の>>324が好きな言語限定)とか持ち込まれてもな 好きな言語限定?
いろんな言語の知識を持っていると
好きな言語以外の話も持ち込むよ?
本当にあんた世界が狭いねw すんごく初歩的なことで申し訳なさでいっぱいなんですが教えて下さい
clickイベントリスナをつけた<button>や<input>があって
これをdisabled="disabled"やelement.disabled = trueでdisabledにしたとき
<button>や<input>をclickしてもイベントは発火しない
これ合ってます?この挙動普通? >>331 見てて恥ずかしい奴だな もう口を開くな >>333
断るw いくらでも言うよ?見たくない、聞きたくないなら、
俺に何かをさせるんじゃなく、あんたが自分で行動しなきゃだめだよ 自演しつけえ
お前が低レベルなことはみんなわかってるからw >>318-322,324-331,333,334,336
とりあえずこれ全部低レベルな1人の自演 はい、はずれw
それはいいからどこが低レベルなのか
その理由を言ってみたら?
言えなきゃ言えないやつが低レベルってことだし なぜ自作自演だって見抜いただけで
俺様の世界ってことになるのか? >>340
自演なんだろ?お前の中ではな
って言えば理解できるかい? アジアではこういう考え方が主流なんだから狭い価値観に捕われるなって言うのと
その前にここは日本人による日本人のためのスレなんだから日本の考え方を深く学ぶべきって言うのと
アジア基準が常識とか中途半端で恣意的な価値観だなっていうヤジの3つに分けれてる 質問スレなんだから質問とそれに対する回答だけでいいんだよ
考え方とかどうこうはいらない
自分の考え方と違うなら「こういうやり方もあるよ」と自分なりの答えを書けばいい
どれを採用するかは質問者の自由 「考え」は書くな
「答え」を書け
ただし質問に書いてもいないライブラリやフレームワーク持ち出すのはただのバカだからNGだろ 書いてもいないライブラリやフレームワークが答えの場合だってあるだろ?
ってか答を知らないから質問する訳で
答を質問に書くわけがない お前らwshスレって落ちました?
質問しようとしたらスレッド一覧にない・・・ 関数へ引数の渡し方が、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).〜;
}
}
より簡単な書き方教えてください。 そもそもfunc(A);func(B);で良くねとは思うけど
function func(...args) {
for (let arg of args) {
// $('#hoge-' + arg).〜;
// $('#hage-' + arg).〜;
}
} > 関数へ引数の渡し方が、func(A)、func(B)、func(A, B)、の3種類(のみ)。
> (A, B)の場合は共に実行。
その(A, B)をやめろって話だな >(A, B)をやめろ
そうなのですが、すると
yobidasi(A);
yobidasi(B);
となり、yobidasiの類は20種類あるので40行になってしまいまして。 yobidasi(A), yobidasi(B);
で良いじゃん >>351
forループはオブジェクトのみ推奨って先生が言ってなかったっけ? >>355
その「先生」は担任の先生って言う意味で素人だろw >>357
google先生だろ
SEO少しでもかじったのならすぐピンとくる >>358
オマエ馬鹿だろ JavaScriptって知ってるか? > forループはオブジェクトのみ推奨って先生が言ってなかったっけ?
これがSEOと関係があるとでも?
ないない Objectのみ推奨ってのはfor-inのことだろ >>353
>>351でもいいけど、
とにかく君に一番必要なことは配列を覚えることだな 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です のように出来るとありがたいです。 スクレイピングのサイト巡回を自動化するスクリプトかいてて
テストでクロムの開発者ツールでいろいろためしているんだけど
ログインが必要なサイトで名前とかのフォーム入力まではできたのですけど
それをsubmitするほうほうがわかりません。
「送信」ボタンのセレクターからノード?オブジェクトを取得。
例えば var button = document.querySelector('セレクター')
それにbutton.submit()という感じでsubmit()をつけてみたけど↓みたいなエラーがでます
どうすればいいのでしょうか?
button.submit()
VM775:1 Uncaught TypeError: button.submit is not a function
at <anonymous>:1:8
とコンソールにエラーがでます 配列はfor かfor of
for in はオブジェクとって本に書いてた >>365
自分も初心者だとことわっておくけど
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')) >>366
自己解決しました
formエレメントの要素オブジェクトにsubmitをつけるんですね >>365
Object.keys(accounts)でキーの配列を取得できる
総数が欲しいならObject.keys(accounts).length
ES2017からはObject.entries(accounts)が理想的
ただし順序は保証されない
可能ならオブジェクトは避けるべき >>370,373
ありがとうございます!
一歩先にすすめそうです <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ではとりだせないのですが >>375
そりゃあるだろうけど、それってangularだよな?
angularのやり方でやれば良いんじゃないの?
まあ俺はそのやり方を忘れたけどなw
アレだろ?jsの変数にバインドされてるってやつ >>376
angularってやつなのですか。
聞いたことはありますが全く知らないです。
勉強しないといけないことおおすぎる。。。 obj.getAttribute('qa-value')でとれました!!!!
感動!!! とれるっていうのならそうなんだろうけどさ
angularのやり方じゃねーぞ?
それで良いのか悪いのか知らんけどさ
普通は正しくないやり方だろうな 勝手なやり方をしたら、ダメ!
フレームワークのやり方に従っていないのなら、誤動作を起こす
Angular を勉強すべし >>364
最初配列でやってたのですがA,値,B,値という形もあり、
また通しで見てるとABの方がどっち渡してるか一目でわかりやすいので変えました。
どうもでした。 >>380
jQueryもやりたいんだけど
AngularとjQueryどっちをさきにやればいい? 何を目指すかによる
JavaScript必須なページを作りたいならAngular 今一番やりたいのはスクレイピングで
次にデータ可視化なんで
サイトの仕組みの理解とスクレイピングのスクリプトかくためにJavaScriptの勉強初めたんだけど
jQuery使ってるサイトが多いのであとでjQueryもやろうとおもってたけど
JavaScriptの勉強一通りおわったら
Angurlarやってみることにしました
そのあとD3やるかな
ほんでひつようそうだったらjQueryやるかな
やることおおすぎ。。。 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スイッチを使った場合はグループ化を使えないのでしょうか?
こういう場合どうするのがいいのでしょうか? スクレイピングなら、Angular なんて関係ない。
君が、たまたま、Angular製のページを対象にしただけだろ
JavaScript なら、jQuery は必須
Ruby で、Nokogiri とか、
Selenium WebDriver, PhantomJS とか、
Chromium, Chrome のヘッドレスモードとか >>385
グループ化した部分ってどこ?
グループ化って何のこと? >>385
jQuery を使え
$('tag').text(); >>387
(.*?)のことです
正規表現において一般的な用語だと思いますが 結局、jQuery でも、Ruby のNokogiri でも、
取得する要素を、CSS セレクターで指定するのは同じ
上はjQuery、下はNokogiri
$('tag').text();
doc.css('tag').text
xpath で指定するのではなく、CSSセレクターの方が、簡単に指定できる 正規表現では、データに親子関係のような構造があるものは、うまく取れない
<tag1><tag2></tag2></tag1>
このように要素がネストしていると、<tag1></tag2> が対応してしまうから
jQuery とか、Ruby のNokogiri で、
取得する要素を、CSS セレクターで指定する 失礼、(.*?)だけを取り出したいってことか
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);
入れ子は考慮せず
そこまでやると複雑すぎてどうにもならない >>392
while(s)
じゃなくて、
while(regex.test(s))
のほうがいいかも
DOM(jQueryでもできるはず)で、
let div = document.createElement('div');
div.innerHTML = s;
let elements = div.querySelectorAll('tag');
// で、各elementsのtextContentを取得
というのもありかと
タグの入れ子は考慮せず String.matchで正規表現にgオプションをつけるとキャプチャが取れるのかどうかの話で答えは上の通り「取れない」
RegExp.execを(複数回)使うか正規表現をやめてHTMLパーサを使うかだが正直後者を推奨する var s = '<tag>hoge</tag><tag>poge</tag><tag>fuge</tag>';
根本的に参照が間違っている HTMLタグならHTMLパーサーやXMLパーサーが使えるけど
正規表現はセパレーターがタグ(<>記号で囲まれた文字列)でない場合でも使える 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 jsで初めてプロトタイプベースに触れたけど、最初クラスベースとの違いに混乱して悪態ついたりしたけど今じゃクラスベースより好きだわ。
js以外クラスベースが主流なのは大規模設計手法が確立されてるというエンタープライズ用途のためってことかな?
それにしてもプロトタイプベースのメジャー言語なさすぎじゃ… あ、お題はこれでいいんじゃないか?
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"] すまん空文字列は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"] グローバルスイッチも要らんかった…
これからゲームしようと思ってたけどもう寝とくわ…
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"] クラスベース言語が多いのは皆C++に影響を受けているから
多くの言語は別に人間工学的や信念として選んでいるのではなく揃えるのが無難だからそうしているだけ
C++がクラスベースなのはCの構造体からの自然な発想
CにOOPを組み込むに当たって当然プロトタイプベース的な方向にはなり得ない
JSがプロトタイプベースなのはクラスベースのインタプリタエンジンは実装も大変で
生半可なものではシンプルなプロトタイプベースに比べて性能を出すのが難しいという事実があるから
また、スクリプト言語としてはクラスに縛られるというのは不便となることも多い
クラスかプロトタイプかと言うよりはクラスベースを選んだか、選ばなかったかという違い よっしゃジャバスクリプトの勉強始めるで!
お前らよろしく!!!!!!!!!!! プロトタイプベースは型システムとの相性が良くない, 気がする htmlをStringで参照していることが笑えるw 独学で参考書をペン片手に読んでる。今2冊目。
読み終えたところまでのコード解読はいける。
まだまだ何もできないけど
まずは基礎知識の積み重ねが大事だなと深く感じてる ペン片手は駄目 キーボード片手でないと
とにかくサンプルを試して、自分で改変して仕組みを学び
分からない所は調べてそのうち1%でも理解したような気になるようにする
本はあくまで導入と思うこと いいえ、自分にあったやり方を見つけているのでこの順番が自分にとって最善。 なんで何もできない段階でそれが最善だと分かるのか謎だなぁ。
>>408もいいアドバイスだと思うんだが。
もちろん本でしっかり知識積み重ねるのも大事だとも思うよ。
しかしそもそもどういう意図で>>407書き込んだんだ?
エライエライ頑張れして欲しかったのかな? 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"] やり方なんて自分が一番吸収しやすい方法をみつければいいんだよ
こればかりは人によって違うもの。 まだまだ何もできないのにどうしてそれが最善なの?
その人の最善の方法見つけるには他の方法も試さなきゃダメでは?
合理化とか埋没費用の誤謬とかで既に時間かけた方法に固執してるだけでは? 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ね念のため。 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を使ったほうが僅かに短いよ ほんまや!
速度はどんなもんかperformance.now()で測ってみたけど長さ10のランダム文字列をtagでくくったものを1000個連結したもので確認した限り3つとも5ms前後で目立った差なかったわ。
もっと大きくなると差もあるかも知れないけど実用上はどれも問題ないね。 その人の最適な方法とかいう魔法みたいなものはない
人間の脳はニューラルネットと同じなんだから
Web技術の情報、特に本の内容は糞な場合が多いという事実がある以上
沢山の検索と試行錯誤をして知識を積み重ねていって形にする以外はない
ブロックを積み上げるように体系的に学ぶのは無理
薄い絵の具を塗り重ねて絵を浮かび上がらせる感じしか無い >>421
お前Changelogに○○を最適化しましてって
書いてあったら、それは最適な方法じゃないって
いちいちツッコむのか? その最適化は恐らくoptimizationの訳語としての用法だから最善の方法を見つけ出しそして実装した!という意味ではないだろう。
virtual→仮想と並ぶ近代クソ訳語のひとつ。 他者を認められない受け入れられないというのも
自分の、個人の考え方やり方なんだよね >>424
初心者と今活躍してる業界人とじゃけして平等ではないからな
色んな人に教えて自身でも色々失敗してきた経験を元に
無駄をしないようアドバイスしてるのであってそういうのは素直に聞くべき onclick="javascript:ac_tracer(
って何でしょうか?ボタン画像を挟む<a>タグ内にあります。 イベントハンドラの設定方法のひとつです。
今回の場合onclickなのでクリックイベントのハンドラ。
クリックするとそこに書かれたJavaScriptコードが実行されます。 ありがとうございます。
このac_tracerというのは何でしょう? >>429
ブラウザの検証機能でコードを見るのが早い >>429
昔昔あるところに太郎という人が居ました
この太郎というのは何でしょう? >>429
銭湯に行ったらオッサンが湯につかっていました。このオッサンは何でしょう? あるところにおじいさんとおばあさんがいました。
さて私は誰でしょう? >>429
関数です。
ただし、ac_tracerという名前の関数はJavascriptに元々用意されているものでも、web開発者が利用するDOM APIのものでもないため、ユーザー定義関数、つまり誰かが何かの目的のために作った関数です。
つまり、作った人に聞くか、ac_tracerの定義部分を含むコードを読まなければ、この関数が何なのかエスパーを除き誰にも分かりません。 >>433
> この太郎というのは何でしょう?
人の名前では? >>440
そうだねイベントハンドラの設定方法のひとつだね >>435
> あるところにおじいさんとおばあさんがいました。
> さて私は誰でしょう?
そんなことよりよ、桃太郎の
おじいさんとおばあさん、子供がいないらしいぜ?
ってことは、おじいさんとおばあさんじゃないよな?
子供ができたら、やっとおとうさんとおかあさんになるはずだ
孫も子供もいないのにおじいさんとおばあさんというのはおかしすぎる
っていうか、子供いないのに孫を養子に取ることってできるのかよ?
孫悟空の孫じゃないぞ。子供の子供という意味の孫だ 歳的な意味での爺婆だし
子供と言っても当然手続きもして無かろうし家系図にも組み込まれてないだろうし
桃太郎から見たらお父さんお母さんでも
全く関係ない第三者が伝聞として話したり聞く際にはふさわしくないと思う >>442
でもお前甥も姪もいないのにおじさんじゃん。 >>442
【お祖父さん】 祖父(そふ)の敬称。
【お爺さん】 男の老人の敬称、また親しんで言う語。 localStorageやsessionStorageなどwebStorageには文字列値しか保存できないとMDNで読んだ
でも[ 3, 6, 1, 23 ]や[ 'apple', 'orange', 'kiwi' ]など単純な配列は
特に変換することなしに、そのままsetItem()/getItem()できているようにみえる
値を取り出してすぐ直接push()やslice()などで操作できるしindexOf()もできてる
これはどういう理屈でこういう挙動になるんでしょうか?ブラウザが勝手にやってくれてる?配列関数が優秀?
試したのはMacのSafariとWindowsのFirefoxでsessionStorage利用 http://sdsoffice.com/tools/homepage-patrol-v2b.html
上記サイトのwebサイトを巡回してくれるJavaScriptを利用をしようと思います。
windows8.1(64bit) + IE11の環境で、上記サイト上で実行させるには問題ないのですが、
htmlファイルとしてローカルに保存して、ローカルで実行するとエラーとなります。
(巡回してくれない)
windows7(64bit) + IE11の環境でしたら、ローカルでも問題なく動きます。
windows8.1でエラーになる原因がわかりません。
お詳しい方、力になっていただけないでしょうか?
よろしくお願いいたします。 別フレームに指定の複数のページをランダム時間(何分から何分の間ランダム)で表示する。
の参考資料とかありませんか?
十数年前「html」だったのか「javascript」か覚えていないけど
色んな例を組み合わせて作って偶然動いたことがあったのでどこかに保存しておいたんだけどなくなってしまったので・・・
よかったら教えてください。 >>448
そもそも普通は、crossOrigin (CORS)アクセス禁止だろ
自分のPC 上の、HTML ファイルから、他のドメインにアクセスできないだろ。
iframe 内に、他のドメインのページを読み込んでも、
iframeの内外で、異なるサイトになるから、アクセスできない
自分のPC で、サーバーを立てて、それを経由しないとアクセスできない。
または、ネット上のそういうサーバーを利用するとか
以前使えていた、Yahoo Query Language (YQL) も、使えなくなった aからbまでの間でランダムは
a+(0からb-a)までランダムと表せられる
つまりa+Math.random()*(b-a)となる >>449
「iframe ランダム表示」で検索!
iframe 内に、他のドメインのページを、ランダムに読み込む あるある質問かもしれませんが
Javascriptのソースコードからコメントをすべて除去するツールなり方法ってどんなものがあるでしょうか?
単独のフリーソフトでも良いですし
atomのbeautify等、構文解析するプラグイン等にオマケでついていてもおかしくないと思うのですが
windows7を使っています <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>タグの中に書いて実行すれば、毎回違うサイトが読み込まれる >>449
「jquery plugin カルーセル」で検索!
jQuery Plugin を探す方が、簡単かも >>453
「javascript コメント 削除 ツール」で検索! >>456
ありがとうお陰でbeautifierの反対語にminifierという言葉があることを知ってatom minifierを入れて解決しました >>449
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> 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> >>459
setInterval使わずにsetExternalWebsiteの最後で毎回setTimeoutすればいいだけやで 問題にはならんと思うんだけどどんどん再起が深くなっていくのが気持ち悪い >>461
それってスタックオーバーフローしないの? >>464
積まれないんすね、ありがとうございます
関数ポインタみたいなのがどんどん積まれていくのかと思った >>452 >>445 >>454 (459)
丁寧に教えてもらってありがとうございます。すごく参考になりました。
ランダム時間なのですがsetIntervalを使っていたの思い出しました。
{
var min = 5000 ;
var max = 10000 ;
setInterval("hyoji()",(max + 1 - min))+ min;
}
としました。
やってないと忘れるものですみませんでした。 webpackやgulpについて質問したいのですが、その類のスレッドってありますかね??。
なければここで質問してもよろしいでしょうか? function(t, i) {
t.target = i, e.apply(this, arguments)
}
こういう構文があったんですが
「 t.target = i;
e.apply(this, arguments);
」
つまりこういう構文を略して書く書き方って認識であってますか? >>461-465
1. function f() { setTimeout(f, 5000); }
2. setTimeout(f, 5000);
まず、2の実行では、setTimeout()は実行されるけど、f()はまだ実行されない。
つまり、キューに、fが積まれるだけ
次に5秒後、キューからfが削除されて、1が実行される。
その時に、setTimeout()で、またキューに、fが積まれる
つまり、キューには常に、fが1個しか積まれていない
>>468
わかりにくいから、そんなカンマの使い方をしない方が良い。
勘違い・バグを誘発する
普通に、; で文を区切るべき >>467
いいよ。他に該当のスレなんて有るわけないし >>450
ありがとうございました。
ローカルファイルで他サイトの呼び出しの規制に引っかかっているわけですね。
今回の案件だけ個別に許可はできないものでしょうか?(ブラウザのセキュリティ上難しい?) >>472
ブラウザじゃなくてサーバー側のセキュリティな 制限をかけてるのがブラウザで
サーバはブラウザがかけてる制限を任意に解除できるだけじゃないのか
違いは無設定の鯖に対してどういう挙動になるか
というか>>448はCORS関係なんか?
みたところ子ウィンドウを開いて、子のlocation.hrefで移動させてるだけ
IE自身のセキュリティ設定、イントラネットのセキュリティポリシーな気がするんだが グローバル変数を1つ宣言するのと
関数を1つ宣言するのとでは
グローバルの汚染度は変わらないですよね? >>475
変数というのは「変えられる値」関数というのは、変えられない。
(まあ正確に言えば、JavaScriptでは関数もオブジェクトなので変えようと思えば変えられるが、
普通そういう使い方はしないしそういう使い方はグローバル変数と同様になってしまうから
ダメなやり方であるという考え方をする)
グローバル汚染というのは、値がどこから書き換えられるかわからないから問題なので、
グローバル変数はアウトだが、グローバル関数(グローバルクラス含む)は問題ない >>476-477
無名関数を使うとかなら、変わると言われても納得なんですけど
function ffff(){}と定義するのとvar ffff = function(){}と定義するのでは変わらないし
どちらの場合も変数名ffffに対する文字列値の再代入も関数再定義も特別の構文なしにできてしまうし
同じ名前の関数宣言があってもエラーも何も出ないのを考えると
宣言時には入れ物はどちらも変数であって(というかポインタと考えたほうが)
中身が、関数か、文字列や数値や配列やオブジェクトか、の違いでしかない、という風に思うんです
そうなると、1個グローバル変数を使うのと1個グローバル関数を使うのとでは、もはや変わりが無いように思うんですが ニュアンス的には幾らかの違いがあるけど、汚染度と言う視点だと無いよ
つか、関数もオブジェクトだから変えられるという言い用はJSer失格 だからnamespace的に1つのオブジェクトに全部押し込めて汚染度下げたりしてたわけですし >>471
ではこちらで質問させていただきます。
gulpであればgulp-uglifyを、webpackであればUglifyJsPluginを使って
minify化しようと思うのですが、どちらもjsに記述している変数名がiやfに変わってしまいます。
どちらのnpmもオプションに変数名が変わらない様な設定があるかと思ったのですが無いようでした。
変数名が変わるのは困るので、ただ単に改行、コメント削除、空白削除をしたいのですが、何か方法はありますでしょうか。 >>483
HTMLに直接変数名が書いてあり、その変数を外部jsファイルで使用する時に使えなくなると思ったのですが。
ということは、そもそもjsの書き方がおかしいということでしょうか?
例を出せと言われてもすぐには出せませんが・・・・ > HTMLに直接変数名が書いてあり
そんなことはしない。HTMLにJavaScriptの変数は出てこない uglify=難読化、minify=軽量化、全然別だ
uglifyやってんなら、そりゃそうなる ところでnpmに gulp-minify (-cssや-htmlがつかない)があって
minify()で普通に無駄な空白類やコメントの削除してくれるらしいが >>482
uglify-js@3だが、mangleオプションにreservedをつければいいんじゃない? あ、すべての変数名を変えたくないのか
magleオプションをなくすような設定ができるのかね gulp-uglifyは詳しくないけど、
サードパーティー製のライブラリで使用しているグローバル変数(いわゆるネームスペース)を
スクリプト内で参照している場合に、その変数名をminifyしない設定があるのでは? >>485
多分私の説明が下手でうまく伝わっていない気がするのでちょっと考え直して
再度ご質問します。ありがとうございました。
>>486
その違いが知りませんでした。
勉強になります。ありがとうございます。
>>487
gulp-minifyですか。ちょっと試してみます。
>>489
uglify-jsも知りませんでした。
これも検証してみます。
>>490
ごめんなさい。話に追いついていけません。。。 >>491
だからHTMLに直接変数名を書くことが
間違いだって話だよ
他のやつもやる必要のないことを書くな >>494
その理屈だと、腐った環境やクソなコーディング規約に
したがって開発しろって言ってるように見えるが? だからHTMLに直接変数名を書くことが
腐った環境やクソなコーディング規約だって話だ ページごと、ユーザーごとのパラメータをHTMLに書くことはあるぞ
どうせlocalStorageかHTMLに書くかAjaxで取得するかくらいしかないし 今話をしてるのはJavaScriptの変数の話だ
分かってないなら黙ってろ HTML内で
var userData = {}
外部JSファイル内で
(function(){
something(userData.何か);
})();
こういうことだろ >>497
常に何から何までXHRで済ませられるわけじゃないしな >>499
細かいことだがそれ(function(){ })(); で囲う意味ある? window.now = performance.now;
now();
こう書くと"オブジェクトの呼び出しが無効です"と怒られるんすよ
なんででしょうね thisの問題ですね。
now()で呼び出したときもthisがperformanceを指すように以下のようにbindしときましょう。
window.now = performance.now.bind(performance); とりあえずthisを拘束すればいいという考えはあまり良いとは思えないな
エイリアスという点では今は
fn = ( ...args ) => performance.now( ...args )
と書く方が良い
bind構文が実装されて記述が容易になるとともに
bindを常日頃から使う文化が広がったらbind構文の方が基本になると思う より「ハック」っぽくないのはどちらかっていう意味ね ハックっぽいかなぁ?
>>503はbindした新しい関数返してるだけで別になんにもハックしてなくない?
bindなんてES5から入ってるし実装されてるかどうか気にするレベルにないのでは… Google Maps (Javascript) API に関することはここでいい?
他に適当な質問スレがあれば教えてください。 >>474
Windows8.1はダメなので、IE自体の問題のような感じです。
開発者ツールでみると
else { //* not MSIE browser
wid1.location.href=wz1;
}
で止まっているのですが、Windows7では不具合なく動いているので、どこがおかしいかわからないのです。 フォーム内のあるアイテムの入力文字数が
たとえば 5文字あるいは10文字あるいは空白の場合だけ入力できるようにするにはどうすればよい? サロゲートペアと結合文字の問題があるからな
サロゲートペアで結合文字のものもある
例えばアクセント付付点8分音符「"𝅘𝅥𝅮𝅻𝅭"」は一文字でlengthは10だ >>492
ありがとうございました。
無事にこちらの方法で変数名を変えずに圧縮することができました。 >>508
ありがとう。しかしそっちはちと寂しかったです。 基本的なことだと思うんだけど、分かってないので
click event についてなのですが
event発生のタイミングって、カーソルのpushが対象から抜けた時ですよね
表現がヘンで伝わってるか不安だけど
ブラウザゲームっぽいの作ってまして
touchしたときにevent発生させることってできるんでしょうか? タッチならタッチ専用のイベントが有る
タッチ専用のイベントは有るがマウスにも対応しようとしたら
いろいろ面倒なので、統合的に使えるライブラリを探したほうが良いかもね
俺の知識は古いので何が最善かまで言えない マウスならmousedown、タッチならtouchstart
まあ両方やっとけばいい タッチは300ms問題とかもあったはず。ライブラリ使うべき。 300ms問題はtapやで
だからtouchstart使うんや >>517
えっ!あっそか
と思ってやってみました (jqueryでね)
$('#hoge').on('click', function () {
console.log('ムフフ');
});
を
$('#hoge').on('mousedown', function () {
desktop版firefox お〜動くー!
iOS safari あれ?挙動が click と同じだなぁ あー、思い出した FastClick.js だ
300ms問題を解決するライブラリ >>522
そういうこと。
ブラウザによって挙動が違ってよく分からんw
そういやタッチとマウスを統一的に扱えるようにした
Pointer Eventsってどうなったんだろうね
https://caniuse.com/#search=pointer%20events
結局Chromeは実装したみたいだけど 皆様ありがとう!
スマホはmouseじゃないからなのか
ぐぐってやってみて、ちゃんと動くようになったのが
var clickEventType = ((window.ontouchstart!==null) ? 'mousedown':'touchstart');
$('.slotBtn').on(clickEventType, function () {
socket.emit($(this).attr('id'));
});
// thankYou!!! タッチパネルつきパソコンはどうなるのか?って考えると
両方onしたほうがいいのかもしれないけどな
イベント2つ扱うときはこういう書き方な
$('.slotBtn').on("mousedown touchstart", function () {
socket.emit($(this).attr('id'));
});
あとどうでもいいけど、イベントハンドラ内のthisみたいに
必ず要素が一個であると断定できる時は、this.id と最近は書いてる 内部でvarしない関数定義もしない即時関数って、即時関数にする意味なんかある? >>526
mousedown と touchstart 併記したら
safariのやつが2つとも反応しちゃうんですよ
this.id の件了解!きっとこの方が速いんですよね >>527
$('.slotBtn').on(clickEventType, socket.emit(this.id));
ってことですね
習慣でいたるところに… 例えばbuttonの中に生の文字と<img>があってbuttonにイベントリスナつけたとき >>530
それ動くの?
>>527で言ってるのは例えばこんな感じの記述
(function(){
document.getElementsByClassName('slotBtn')[0].addEventListener('mousedown', function(){
call.some.function();
}, false);
})(); >>534
関数そのものを渡さなきゃいけない
function(){}を渡すのはいいが、
socket.emit(this.id)ではsocket.emit(this.id)を実行した結果が渡される
って感じか? >>533
やってないんで、やらんで良かった
コードさんきゅです、理解できた >>534
それだとその行にきた段階でリスナー登録じゃなく socket.emit() が実行される
もとのやつでいい そのうえ
画面のスクロールとかスクロールバー付き要素のスクロールとか
2本以上の指のタッチとか
アホかってほどいっぱい面倒なもんが出てくるからな ただ単にタッチを検出したいだけなら
touchstartとかでいいが
タッチを利用したカルーセルのような
インターフェースを作りたいのなら
自作するより使ったほうが楽
理由は>>539が書いているとおり >>515
自分も作るけど使い分けなくて便利だからPointer Events使ってる
来年にはFxとSafariでも使えそうな雰囲気だし
今はChromeとEdgeだけでもいいでしょ >>541
カルーセル作りたいなら、の意味がわからん touch, mouse を透過的に扱うのは、
Electron, Cordova, React などのフレームワーク
>>533
ECMA5 では、ブロックスコープが無かったから、
関数でスコープを作る >>544
内部でvarしない関数定義もしない場合、スコープ作る必要ある? 前提知識として学ばないといけないことが多すぎ複雑すぎなのが嫌なのに
ライブラリの構造とか使い方とか
さらにさらにバージョンごとの差異とか
そんなん使ってられませんわ JSの仕組み自体はシンプル・イズ・ザ・ベストなのに >>543
> カルーセル作りたいなら、の意味がわからん
考えることがたくさんあるからだよ
要件次第だが
カルーセルで横スクロールする時、
縦スクロールしたらページはスクロールするか?とか
ピンチ、ピンチアウト機能と両立できるか?とか
スクロールはスムーズか?とか
(スムーズにするためのCSSの機能があるが使えない機種がある) カルーセルの基礎構造って
・操作に応じて横方向に画像が切り替わりループするスライド
・スライドを操作する「<」「>」ボタンや「□■□□」のようなナビゲーションを兼ねたボタン
これだけじゃないのか
touchendが使えればtouch*、でなきゃclickやmousedown、だけで普通にpure jsで書けね 初心者が失礼します
http://fast-uploader.com/transfer/7073696781713.jpg
このコードで28行目の関数の引数eventはクリックしたときに引き渡されると思うんですが何が引数として引き渡されているのでしょうか?
event.clientXとevent.clientYでそれぞれ左上から縦横の位置を示してるのはわかるんですが、
じゃぁ.clientXと.clientYをとったときのeventってなんなんだろうって疑問になります。
この引数はいったい何でいつどんな変数が入ってるのでしょうか? イベントオブジェクトの一種、マウスイベントオブジェクト
clickされたときにブラウザがイベントオブジェクト作って引数eventとして引き渡してくれる
.clientXや.clientYはマウスイベントオブジェクトが持っているプロパティ
だからevent.clientXでマウスX座標が取れる
https://developer.mozilla.org/ja/docs/Web/API/MouseEvent/clientY >>542
pointer events って便利そうだけど
今、動作するのは chrome と edge だけってことですか?
作ってるサービスの対応ブラウザとしては、できるだけ多くを相手にしたいです。
自分が作ってる中で
押したらすぐ反応して欲しい部分は、プレイ画面中のボタンだけなんです
ある機械の状態をWebRTCでリアルタイムに流してて、ボタンはその機械を操作するものです
これスレと関係なかった >>554
なるほど、リスナーに引数を持つ関数を登録するとブラウザが自動で引数にイベントオブジェクトを入れてくれるんですね。
ありがとうございます。 スレ違だろうなぁ、でも他に
知見のある人のいるスレが見つけられない m_m
もう諦めてるんですが
画面サイズから video を90度回して縦方向いっぱいに計算して表示してるのですが
スマホ画面の上とか下に出てくるじゃまなやつのせいで動画が
ちっちゃくなってしまうのは、どうにもならないですか >>558 ありがとう!
これも、なんぞそれ!?
ってことで調べながらやってみてます
が、90度回してる影響かうまくいってないです 下で「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> click()の関数名がまずいっぽいね
click1()に変えたら動いたよ そういうのもあるし、onclick属性とは
HTMLのonなんたらで処理呼び出すのやめなよ >>561
ありがとうございます!
>>562
最初は別ファイルからインポートしてたんですけど
はじめてスクリプト埋め込んだのでなんで動かないのかわからなかったので
とりあえず動かなくなる地点を探そうとして
順番に埋め込むところを移動させていました。 >>562
reactさんをバカにするのはやめるんだ >>565
細かい話をするとreactとJSXも関係ない。別にJSX使わなくても全部関数で書ける。
で、JSXで書いて、reactが生成する生DOM確認してみた?onclick属性使われてるよ。 >>566
reactとJSXは関係ない。
だからreactは持ち出してくるなって話なんだが? >>567
根拠なくon*属性にハンドラ書くの否定するなという話なんだが? reactがHTMLのon*使ってるかどうかはon*が良いか悪いかの指標にはならん |ヽ∧_
ゝ __\ やめなよ
||´・ω・`| >
/  ̄ ̄ 、ヽ _______
└二⊃ |∪=| |─── /
ヽ⊃ー/ノ  ̄ ̄ ̄ ̄
 ̄`´ ̄ こう言う文字列を作成して
var str ='文字列';
var func = '<button onclick="func(¥'' + str + '¥')">実行</button>';
funcをhtmlのページに埋め込みました。
そのhtmlを表示すると、文字列strが英数字なら問題ないのですが、文字列中にシングルクォーテーションとかダブルクォーテーション
が混じっているとエラーが出ます。
正しい解決方法を教えてください。 埋め込みました、て・・・document.writeしたりelement.innerHTMLに入れたりしてんだろ
なんでcreateElementしてaddEventListenerしてappendChildしないんですか >>577
もろもろエスパーするとこれはサーバーサイドテンプレート…
expressかなにかでやってる? やっぱたぶんサーバーサイドテンプレートなんだろうな。
質問するのになんで隠すのか分からんが。
ほらよ>>573
出力確認のためのconsole.logもつけたから良く確認するように。
var str = 'こんにちは\'赤"ちゃん'; // 念のため言っとくがこの場合ここシングルクォートにエスケープ必要
console.log(str); // こんにちは'赤"ちゃん
str = str.replace(/'/g, "\\'"); // ブラウザJSのコンテキストでシングルクォートエスケープ処理
console.log(str); // こんにちは\'赤"ちゃん
str = str.replace(/"/g, '"'); // HTMLのコンテキストでダブルクォートエスケープ処理(文字参照に変換)
console.log(str); // こんにちは\'赤"ちゃん
var func = '<button onclick="alert(\'' + str + '\')">実行</button>';
console.log(func); // <button onclick="alert('こんにちは\'赤"ちゃん')">実行</button> あ、すまん確認のためfuncをalertに変えてたんだった。alertはfuncに置換してくれ babelって今は末尾再帰最適化をサポートしてくれないんですか?
せっかく気軽に再帰で開発できると思ったのに…… >>582
プラグインになっただけじゃねーの?
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 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には大幅なさをつけられており取って代わるのは
いつになるのか動向が注目される 軽く使えるDOM操作ライブラリってほとんどないから jqueryに大幅な差というよりangularやreactが木っ端なだけだろ 自前でwebサービス立ち上げてる会社以外reactもangularも出番ないんですもの。 自社でがっつりやるなら自社で組む手があるからなぁ
他所のポリシーに合わせる必要なくなる >>573
jQuery を使え
<button id="btn1">押して</button>
$('#btn1').click (function() {
// ここに処理を書く
console.log("クリックされた");
}); >>585
取って代わるてw
使われ方が全く違うだろ > 使われ方が全く違うだろ
ちゃんとした考え方できる人はそうわかるんだけどね。
今のところjQueryがなくなることはない。
jQueryの代替技術はない
だけど一部のjserどもが、jQueryはオワコン
これからはAngular、Reactやで!
jQuery使わなくて頑張ればコストがかかるだけでできる!
などと言い始めたからね。 jQueryがまだ下り坂になってないのは
この一年でシェアが更に増えたことからも明らかだよな >>592
addEventListenerとattachEventの違いの吸収のように
UA間で異なる仕様が少なくなっていくにつれて
jquery自体が不要になっていくんじゃないの
例えばアニメーションだって5年前とは比較にならんほどcss対応進んだし どっちかっていうとこれからはピュアなjavascript >>594
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独自のものだから標準にとらわれず自由にメソッドを追加できる >>595
> どっちかっていうとこれからはピュアなjavascript
ピュアなjavascriptがループとか条件分岐なしに
書けるようになればね・・・
結局、言語の設計方針レベルの問題だから
ループなしにセレクタに一致する要素群に対して
一括でイベントハンドラを設定できるようにはならんと思うよ >後から追加される要素に対しても
よくわからないんだが
適切にHTML構造作ってバブリング考えてリスナ組み立てればいいだけでないの >>598
jQueryだと
$('.class').on('click', function() { this はクリックされた要素 } );
これを
$(document).on('click', '.class', function() { this はクリックされた要素 } );
こう書き換えるだけでいい。
イベントハンドラの中身も書き換えなくて済む
これとまったく同じことをjQueryを使わずに書こうとしたら
ほんとうに大変だよ class名でイベントリスナ貼り付けるの好きだよねjquery使い >>600
IDでイベントハンドラを付ける意味が無いからね。 jQueryは動的ページと相性が良くて動的ページっていうのはある要素が条件によって
存在したりしなかったりするわけだけど、jQueryを使うといちいち要素が
存在しているかしていないかをチェックする必要がない
その動きはCSSと一緒。
CSSでも特定の要素が存在しなくてもエラーにならない
そして要素が1つであっても複数であっても、それを気にする必要がない。
まったく同じコードで処理できる。
同じことをDOM APIだけでやろうとするとループが必要になってしまう。
そのループを避けるため、ID指定で一つの要素だけ取得しようとするが
そもそもループが存在しないjQueryではID指定に拘る必要がない。 >これとまったく同じことをjQueryを使わずに書こうとしたら
>ほんとうに大変だよ
後から追加した要素のイベントを検出するのは、
JavaScriptで同じ事をやろうと思えば出来るんですか?
jQueryではどんな手法でやっているんですか? そもそもそんなハッキーな状況に軽やかに対応しないといけないって言うのが理想的ではないんじゃないか
やっぱり中に何があるかわからんけど、取り敢えず外から操る、それを楽にしたいでは無くて
コンポーネント化に努める方向で気にしなくていい事を増やした方が良いだろう
グローバル変数は楽し小さなケースでは良いけど、やっぱり色々考えると推奨されないのと同じ >>603
まずイベントバブルを利用してdocumentにイベントハンドラを設定する
その後、発生したイベントの発生元が、指定したセレクタに一致するか比較する
そうすればできる。
最近のブラウザなら、指定したセレクタに一致するか比較するのは簡単に
できるようになっているらしいが、jQueryはそれができない時代から
独自で実装していた >>604
> そもそもそんなハッキーな状況に軽やかに対応しないといけないって言うのが理想的ではないんじゃないか
JavaScriptを使ったページで、要素が動的に増えたり減ったりするのは
よくあると思うけど? >>604
> コンポーネント化に努める方向で気にしなくていい事を増やした方が良いだろう
そうそれ! jQueryが得意な所
IDを使ってしまうとコンポーネント化とは逆の方向になってしまう。
コンポーネントというのは使いまわしできるもので、
同じコンポーネントが一つのページに複数存在したりするものだからね。
それがjQueryと相性がいい。
同じコンポーネントというのは同じクラスであるということ
クラスに対してイベントハンドラを設定することで
コンポーネントに対しての処理が書きやすくなる。
> グローバル変数は楽し小さなケースでは良いけど、やっぱり色々考えると推奨されないのと同じ
即時関数を使ってグローバル変数を無くすってのはよくあるけど、
jQueryを使うと即時関数を使わなくてもグローバル変数はなくなってしまう。
実際に書いてみればわかるがこんな感じになるから
$(".class").on('click', function() {
// ここはローカル変数
}); 結局、ここ数年のWeb界隈を見るに、既存のDOM構造の地位を脅かすようなモデルが現れてないからね
それらと相性がいいjQueryは、好みはともかく、現実的にはまだしばらくは覇権でしょう jQueryは設計センスが良すぎてとても真似できない
これとlodashであと10年戦う 懐かしいな。もう一年前になるのか。
jQueryはオワコン、下降傾向にあるって言ってたやつ
一年経って減るどころか1.4%も増えたで?
その増えた量はReactよりも多い
どんな気分?w angularやreactとかは大規模複数人開発案件でないとメリットがデメリットを上回らないからjQueryはなくならないと思う。
jQueryにマウント取ってるreactファンボーイが頭おかしいだけ。
しかも攻撃理由がreact等のvirtualDOMとjQueryの生DOM操作は相性悪い→jQueryはオワコン だからな。最高に頭悪い。
飛行機ができたから電車オワコンと言ってるようなもの。
原爆できたから軍隊にナイフ要らないと言ってるようなもの。 >>607
直近の親要素にaddEventListenerすれば済むことでは
classをjsの判断に使ったらcssで他の箇所に容易に再利用できなくなる >イベントバブルを利用してdocumentに
とりあえずグローバル変数、とりあえずsingletonみたいな感じで気持ち悪い
最低限にまとめろよ jQueryの是非は置いておいても
angularもreactもJSXもダメすぎる、あんなものが覇権取れるわけない >>612
直近の親要素に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
}) >>612
> classをjsの判断に使ったらcssで他の箇所に容易に再利用できなくなる
なんで? 再利用させたいならばjQueryプラグインになるだろうけど
jQueryプラグインは特定のクラスに結びつくものじゃない >>615
>spanなどが入っている場合
HTML構造がそうなってるならspanだったらparentNode拾ってくればいいだけでは
classを使う必要性がない spanじゃなくて、divの中にspanだったら
こんどはparentNodeのparentNodeを取ってくればいいだけ。
またその他の要素が入っていたら、頑張ってJavaScriptを
メンテナンスすればやれないことはない
気合と金と時間さえあれば歩いて九州から北海道だって行ける! >>618
今はどれだけ簡単にできるかって話をしてるんだから
そこでparentNodeを取ってくればーと言った時点で、
簡単にはできないってことになるんだよ やっぱりjQueryのdelegate相当のことをやろうとしたら
素のDOM APIでは大変そうですね やっぱりjQuery良く出来てるわー
一年経って減るどころか増えてるからぐうの音もでないだろうね html構造 javascriptも使うしCSSも使う
class名 一般的にはCSSが使う
html構造変わったらjavascriptコードも変わるのが当たり前
class変わってもjavascriptコードが変わることはあまりない
javascriptでclassをトグル切り替えするとかその程度 >>620
1個ifが追加で入れば「簡単じゃない」「難しい」になるのかい?
逆に、デザイナがCSSいじるとき
javascriptが利用しているclass名に拘束される面倒さは「簡単じゃない」に繋がらないのかい
そういう話をしているんだけど再利用ならjQueryプラグインが云々で何を言いたいのかさっぱり > html構造変わったらjavascriptコードも変わるのが当たり前
そう、それがDOM APIの常識だった。
だけど、jQueryはそれを打ち破った。
なにせCSSと同じくセレクタを使って要素を絞り込むわけだから、
CSSと同じ効果が得られた
そして同じセレクタに同じデザインを適用するCSSと
同じセレクタに同じ振る舞いを持たせるjQueryという関係が出来上がった
考えてみれば、セレクタ=コンポーネント、
同じコンポーネントが同じデザインとう振る舞いを持つのは当然ではないか
そして混沌としてHTMLとJavaScriptの世界に
汎用性がもたらされた 生DOMはいい加減自分を操作するために親を経由するとかそういうのやめてほしい
やるとしても適当に関数作って内部でやっとけばいいのに >>624
> 1個ifが追加で入れば「簡単じゃない」「難しい」になるのかい?
そうだよ。知らなかった?
複雑度っていうのは条件分岐一つで大きく膨れ上がる。
ifが1つ増えれば2倍、2つ組み合わさればなれば、2倍の2倍で4倍。
3つだと8倍。一つ増えるだけででテストしなければいけない場合は
指数関数的に増加する
if一つだから簡単だと思っているやつは
考えが浅いというわけさ >>624
> javascriptが利用しているclass名に拘束される面倒さは「簡単じゃない」に繋がらないのかい
デザイナがいじるのはデザインであってclass名じゃないからね >>628
同じスタイルを適用したくても
javascriptがclass名で決め打ち処理入れてるから
CSSをコピペしたり別のclass名を作ったりしなきゃいけない、と嘆かないデザイナ? >>629
違うものに同じデザインを適用したいってことないでしょw Webデザイナと連携したことないけど何かいろいろ闇があるんですか? 切り分けたい時もあるし切り分けたくない時もある
切り分けられないを強要するライブラリということだ あるわい!
違うものであってもデザインが同じなら
クラス名も同じにするんだい!
デザインが赤なら、クラス名もredにするだろ! デザインが同じでも、本質的に別物なら
それは違うクラス名を与えるべきだよ CSSに他classのスタイルを継承する文法があれば筋が通るんだけどね デザインが同じなら同じクラス名にしたいっていうのは
このボタンの色は青でフォントサイズ2emですね。
こちらの見出しも青でフォントサイズも2emですね。
ならボタンと見出しでデザイン一緒ですから
同じクラス名にしましょうって考える人? JavaScriptを使う人はHTMLとCSSのことも理解していなければ
だめだってわかる典型的な例だな
なぜかJavaScript使う人でHTMLやCSSが苦手な人が多い 違うものに同じスタイルを適用したいからって
クラス名を同じにするとか愚の骨頂
素人同然だわ HTML仕様的にはclassはスタイルの為のものであってJavascriptの為のものではないはずだが
idはscriptから参照するためという目的が明示されてるが
併記されているclassにはそれがない
同じclassが同じ振る舞いであるべきかどうかは定かではないと言っておきたい > HTML仕様的にはclassはスタイルの為のものであってJavascriptの為のものではないはずだが
思い込みな。何処かに書いているというのなら言ってみてくれ
ちなみに、idはスタイルのためのものかい?w どうせ適当な事を言うだけ言って逃げるだろうから
書いておくわ
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. CSSがなんたるかどう書くべきかを理解しているデザイナとしか仕事しないのならいいけどね >>642
なんで今さらHTML4.01なんか持ち出してきたの?
わざと? >>643
後者引用の文章は、classの割り当てはgetElementsByClassName()に影響すると言っているのみであって
classとは何であるかを説明しているものではないようだが ほう、やっぱり意図的に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. >>642
w3 vs mozilla、ファイッ! >>646
クラスは色んな使い方として用いられると書いてあるが
スタイル専用なんてどこに書いてあるか? 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
スタイル専用のものと書いてない 同様にIDがJavaScript専用とかも書いてない
実際CSSで使えるわけだしね >>645
MDNでclassのことを確認したときに参照として書いてあったのでブックマークしておいたからだ
シンプルで分かりやすかったから記憶に残っていたんだが
>>643の後者のURLを見ると目的が明示されなくなっているんだな
詳しく読んでくるがその前に>>640は取り消す、横から済まなかった >>652
お前の知識は古いから話にならないってだけだよ 仕様文書の読み方よく知らないんだけど
こういうのって打ち消されない限り以前
のが有効だったりしないの? どちらを採用するかって話
HTML5を採用するなら、HTML5の仕様が全て
他の仕様書に書いて有ることは何の参考にもできない 過去を継承的に考えるのか過去を取り消
し的に考えるのかってことね ?
HTL4.01という仕様を元に
必要なことを付け足し、必要ないものを削除し
そして以前のものを継承させて完成させたのがHTML5だろ
HTML4.01で引き継ぐ所は全部引き継いてるんだから
HTML5だけを見ればいい。なくなった部分は廃止されたって意味だ。 HTMLの意味論にどこまで意義があるかはわからないけど
目的が抹消された例は結構あるな
理由はわからんが<dl>, <dt>, <dd>は定義リストじゃなくなった >>636
議論に関係ないが、こういう人いるわ……
わりと疲れる jQuery のソースコードを読むと、
Android 4.0, IE 9, IE 8 などの分岐処理がある
こんなの自分で対応できないだろ。
アホらしい つうかここでjQueryはあれに向いてる、これもできると言ってる奴らのレベルが低すぎる
一昔前JSとWebAPIだけであらゆることができると豪語してた奴ら未満
俺達はきちんとその時点でできることできないこと、得意なこと苦手なことを研究して
この先何が必要か考えES Discasにも参加したし、ブラウザにissueも投げた
JS大好きマンだが渋々C++でパッチも書いたこともある
結局自らの敵は自らで、jQueryがそういう用途に最適化された設計がされていない、
するつもりもあまりない、そういう用途で使おうと思ってる人が少ないって言うことが最大の敵なんだよ
いつまでもDOM APIと張り合って、使うべきか使わないべきかみたいなレベルの低い争いを続けてるようじゃ、
今あるjQueryマンセーじゃ未来はないよ HTMLの最後でjs読み込むのとwindow.onLoadで処理させるのと基本どっちを選ぶべきなの? >>663
そうあってほしいと考えているわけですね
でもね、最初からjQueryはDOMライブラリだって言ってましたー
その他の用途には、それ用のライブラリを使いますー >>667
jQueryがそういう用途に最適化された設計がされていないことについてはどう考える? 「いつまでもDOM APIと張り合って」って
書いているところから読み取れないかな?
jQueryはなんでもできるんだろ?
あれもこれもできるんだろ?
だがjQueryはあれもこれもの用途に
最適化された設計になっていない
所詮DOM API代わりのDOM用ライブラリにすぎない 当たり前ですよね?
jQueryはDOM用ライブラリですよ?
なんでDOM用ライブラリをなんでもできるライブラリに
しないといけないんですか?
どんな機能にも対応している神ライブラリとでも
思っていたんですか?
アホですねw ムキー! お前らがjQueryはなんでもできるライブラリだって言っていただろ
その公約を守ってないからjQueryはクソライブラリだ!
お前らが言っていたことができないからクソだ >>666
window.onload
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload
load イベントは文書のローディング工程の終了時に発生します。
このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、
全ての画像とサブフレームのロードは完了しています
画像のロード完了を待つ必要があるかな?
漏れなら、画像など無視するから、<body>のラストで、JS を読み込む お前らが言っていた = 妄想
自分の妄想が実現されてないからクソだって言ってたのか
アホだな 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(イベント, セレクタ) の形式で書くやり方なんだが
思考に慣れが必要ではあるだろうな >>673
上でコンポーネント化の話などが挙がってるし、
逆に色々話題が出たときこれはjQueryでは向いてないという話になったことがない
なんやかんや無理やりjQueryが使えると思い込んでる 思い込みが酷すぎて怖い
一緒に仕事したくないタイプ >>679
向いていないという話が出なかったら
向いていると言っているんだ!って思い込んでんのか?
例えば日付処理にjQueryは向いてない
ほら言ってやったぞ?どうするんだ? >>682
jQueryはDOMライブラリである。
誰もjQueryが何にもでも使えるとは言ってない
ここまではいいな? > なんやかんや無理やりjQueryが使えると思い込んでる
誰もjQueryが何にでも使えるとは言ってないので
(エスパーでもない限り他人が思ってることなんてわからないので)
思い込んでる事とわかるのは自分自身(>>679)だけである
ここまではよい ああ、スレ建てたやつがライブラリ禁止のテンプレ消したのか example.com?q=文字列
をサーバーサイドで受け取る時に文字列中に¥rや¥nも渡す事は出来ますか? >>685
一番の問題はそう思われてるってことだと思うぞ
jQuerer含むライブラリスタが過剰にライブラリを推してるのは事実
度々スレ分離したり議論になってるのにまだ自分たちがどう思われてるのかが分かってないのか > 一番の問題はそう思われてるってことだと思うぞ
jQueryのアンチが変なふうに思い込んでるのは
アンチが悪いってことで終わりじゃね? ライブラリの書き方はライブラリ使わないと通じない
ライブラリを使わない書き方はライブラリ使ってても使ってなくても通じる
ってところか? クチャラーに自覚したらと諭したら
俺は普通に食べてるだけ
耳障りに聞こえるのはお前が悪いと言われたって感じか react.jsやangular.jsが役立つ大規模案件、とは具体的にどの程度の規模のサイトですか?
今まで小さな企業でしか勤めたことがなく、大規模案件と言われてもイメージが湧きません >>693
てことは一生知る必要がないんじゃないか すいませんageてしまいましたね
今のままの小さい仕事しかせずにjavascriptと言えばjqueryでチョロチョロ、みたいなキャリアで本当に将来生き残れるのかという不安があるのです
あとは、自分がjqueryしかできないから会社も大きな仕事が取れないんじゃないかとか考えてしまったりですね どの位大規模かというと、最近YouTubeがPolymerを導入した
だが、そのバージョンはv0.いくつのもの、今の最新はv3
そのくらい年単位で開発する案件に使うもの
そこからわかると思うがフレームワークは前もって勉強する必要はない
実際使うべきときには役に立たないから
大手も使うと決めたときに改めて勉強会を開くなりして対応してる 離脱したくても離脱しづらくなるから使うなら見合った理由が必要
大規模だから使うというより
少数の比較的小規模な会社が
使い続けてく方が多い印象がある jQueryってもう役目が終わってるんだよ
いい加減目を覚ましたほうが良い
作者も見放してReactやってるじゃん 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には大幅なさをつけられており取って代わるのは
いつになるのか動向が注目される >>701
これからの自分たちがどうしていくかの話をしてるのに
他の人が今何をやってるのかを気にするって意味がわからんな
良く使われてるのは所謂「枯れた技術」とは言えるけど
熟れた物ってこれから先腐っていくこととほぼイコールじゃん HTTPがまだ周りでよく使われているからHTTPSにしないって言ってるのとかと同じだぞ? >>702
せやな、一年前に、これからはjQueryは減っていくとか
これからは腐っていくとか予想を立てた人恥ずかしいよな
これから?来年にはまたjQueryのシェア増えるんじゃね?
AngularもReactも熟れる前にくされなきゃ良いけど
Angularは一回腐れたよな HTTPSは費用と処理と通信のコストがあるからなあ >>703
> HTTPがまだ周りでよく使われているからHTTPSにしないって言ってるのとかと同じだぞ?
わかったわかった。HTTPSは最初からある程度使われいたからな
何かのフレームワークの使用率が10%を超えたら考えよう。
それでいいだろ? >>696
中小規模の会社が請ける規模の案件なら
素のJSだけでも十分やってけるよ
昔と比べて格段に安定して書けるようになってきたから
万が一必要になったらその時必要な分だけ調べれば済む 大規模な会社がReact使っているかと言ったらそうじゃないからな
なにせ0.5%しか使われていない Ruby のHTMLのテンプレートエンジン、erb では、
HTMLとRubyの構文が交互に来るから、わかりにくい。
PHP なんかもそう
<% @items.each do |item| %>
<li><%= item %></li>
<% end %>
もしRuby に、JSX があれば最強だろう JSXもクソじゃん。条件分岐とループごときに
言語の機能を使うようじゃダメ
mustacheが最強 ここまで見てきて分かったのは
仕様というのは作って環境というのは動かしていくもんだと考えてる開発者と
仕様というのは与えられて環境というのは落ち着いたものに浸かるもんだと考えてる開発者じゃ
話合うわけ無いってことだな 問題
「作って環境というのは動かしていくもん」と
「与えられて環境というのは落ち着いたものに浸かるもんだ」の
違いを完結に述べよ >>712
簡潔に言えば仕様標準化と実装に関わっているかどうかってことで言えるんじゃない?
企業で言うとミーティングやカンファレンスに社員を出張させているかどうか
別にそれは社会貢献のためではなくて自分たちのやりたいように環境を動かすためにそうしてる
環境というが実際は人
その場にいる仕様や実装書いてる人に直接会って、
こここういうバグが有るんですよとか、こういうところで困ってるんですよとか話ができるってことが重要
やっぱりそれはオンラインでプルリクエスト送るのとはぜんぜん違う
仕様や実装を作ってるのは人間で、意外と少数だから、向こうも幅広い意見を汲み取ろうとはしてるけれど
どうしても自分たちの近い範囲が得をする恣意的なものになってしまう
そのために皆わざわざ録画で見れるものを会場まで行く >>693です
ひとまず自分のやりうる業務のことを考えたらjqueryやes6の習熟でひとまずは大丈夫だと感じました
まずはjqueryを使い倒してみて、jqueryでは不十分だと感じられるようになった段階で改めて考えてみることにします
ありがとうございました オブジェクト型の分割代入やasyncジェネレータなど
既にモダンブラウザで使える重要なES2018の機能もあるよ 初めてのJavaScript 第3版、オライリー、2017
ES2015 の本。
これを読めば、クラスとか、素人はあまりの難しさに愕然とするだろう 素人が騒然とするのは当たり前だろ?
いや、お前がプロで、難しくて騒然としたっていうなら
それはそれで面白いことだがw 人間のメンタルモデルとコードを一致させられるから
理解しやすくなる。可読性の向上
ひねくれた方法で「実現できる」じゃだめなんだ
普通に書いて普通に読めなければいけない 設計で方法論に従うことができる。
しかしテストでパターン数爆発で大抵死ぬ。 JSにテストなんて必要ない、トライアンドエラーがベスト
テストしたいんならよりし易い言語で書いてコンパイルすべき > テストしたいんならよりし易い言語で書いてコンパイルすべき
ではその、よりし易い言語がなにで
どういう理由で、よりし易いのか言えるんでしょうな? 726ではないが、結局selenium動かしたり
casperでもぞもぞしたりするなあ svgの制御についての質問はここでしてもいいですか 昔foreignObjectを使って要素のミラーを作るというのを試した記憶があるのですが
今その情報を教えて頂けますか?
「あああ」をミラーしたら「あああ」が2つになって、大本を 「いいい」に変更するとコピー先も「いいい」になるという機能です 地図上に車のアイコンを置いて決まったルート上(svgのパス上)を動かすアニメーションを考えていて、進行方向に合わせてアイコンの向きを変えたいのですが、何を基準に計算をして向きを調整すれば良いかわからず困っています。
svg関連で角度の計算に使える関数やよい方法があれば教えていただけますか。
動きとしては↓こちらのサイトのようなものです。
https://itstudio.co/sample/svganime/anime7.html ここの奴ら役に立たんな
もうお前らには一切聞かんわ >>735
SVGの線上となるとアレだけど
動かすルートが決まっているなら接線の傾き求めればいいじゃない >>739
接線か、なるほど気づきませんでした
接線の求め方から勉強してみます。。 決まったルートがあるならatanだけで済む気がするんだが >>736
すみません。アニメーション自体はサイトのようなもので、これに角度の変化を付け加えたいという意味でした。
そしてよく見たらサイトのも微妙にrotateで傾けてますね。。折り返しの際に逆を向いてくれないので考えているものとは違いますが。 >>743
反転はtransformのscaleを使うのが容易いかも var test = {
a: 1,
b: 5,
c: 6
}
ってあって
test.aからtest.cまでの値をループで取得しようと思ったらどうすればいいですか? >>745
『javascript test.aからtest.cまでの値をループで取得しようと思ったらどうすればいいですか?』
のGoogle検索結果を見ていけばわかる for(let [key, value] of Object.entries(test)){
console.log(key + ':' + value);
}
こうするとちょっとPHPっぽい >>745
for (let v of Object.values(test)) {
console.log(v);
}
とか
Object.values(test).forEach(v => {
console.log(v);
}); こっちのが汎用的だったか
Object.entries(test).forEach(([key, value], index) => {
console.log(key, value, index);
}); なんで標準のJavaScriptを使うと
冗長になるのか教えてほしいものだ。
lodashを使ったほうが短いとか意味分からん
_.forOwn(test, (value, key) => {
console.log(key + ':' + value);
}); どの言語も普通は標準よりライブラリ使った方が短くならね? だよなw
いつものlodashくんがスレチ話するためのエクスキューズのつもりなんだろw 自作の関数作ればもっと短くなるよね
はいlodash敗北 ほんとlodashの名前が出るだけで
必死になるなw for( var key of test )とかfor( var key in test )じゃダメなん? >>756
前者はそもそもエラーなので論外
後者は普通にあり
entriesやvaluesは使えない環境も多いしね
個人的にはObject.keysを使うことが多いかな
よっぽど大量にループさせるんならfor..in使うけど 使えない環境はあるがけして多くはない
そんなことを言ったら何もできない
いつまでレガシーブラウザを延命させる気なんだ for..inで十分にできて、key / valuesが key / test[key] になる程度の違い
構造は明示されてて
構造が未知だったり完全に信頼できなかったりしない
javascriptはゴルフ絶対主義なんか for-inのデメリットは.hasOwnProperties()のチェックを入れるかどうかの問題が発生するから
もちろんオブジェクトにそのチェックが不要だという保証があるなら.hasOwnProperties()で調べる必要はない hasOwnPropertiesやっててよかったとか
今までに一度もないなw for..inは式ではなく文なのがちと煩わしい
とはいえ素のJavaScriptで
Object.values(test).filter(x => x % 2 === 0).map(x => x * 2)
みたく書くと無駄に何度も配列作っちゃうから、そういう意味ではlodashが羨ましい 何度も配列作らなくてもforEach内の処理で十分な場合が多い
filterとかしなくてもif returnで良いんだし >>766
処理分離したいし破壊的代入はなるべく避けたいじゃん? 破壊的代入したって頑張ればできるだろ
ほんの少しづつ頑張ればいいだけだよ
小さいものを積み重ねても大きくはならない >>768
今回がそもそもfor-inとの対比の話だからな
値を列挙して利用したいというだけだから
配列をどう処理していきたいかみたいな一般論とは話が違う
つまりfor-ループの{}内の置き換えだから、それは素直に考えるとforEachでいいじゃないかと
列挙したい物を連続してフィルタリングしたりする書き方したいか?ということ そもそも、すべての属性を取得するような、
メタプログラミングみたいな設計自体がおかしい
もし、テストツール以外で、こういう設計をしていたら、おかしいと思え! childNodes[n] や item(n) では最後の要素は -1 では取得できないってことでいいですよね?
n の変更でアクセスする方法ってないんでしょうか?
lastChildとかつうと位置が変わった時に書き換えるのが面倒なんですけど。 >>774
ありがとうございます。
別の質問なんですけど
table の tbody に入っているデータを
localStorageに保存したあとで
ページを開き直した後に
localStorageから呼び出して
同じ形式で再表示したいんですけどどうすれば良いんでしょう?
storage.data = document.getElementByID("toboyのID")
で保存して
appendChild(storage.data)
とかやってもうまく行かないんですけど
forループかなんかつかって1つづつ要素を createChild とかして appendChild() するしかないんですか? 訂正
storage.data = document.getElementByID("toboyのID")
↓
storage.data = document.getElementById("tbodyのID") >>778
プロパティ構文、ブラケット構文、メソッド構文とあるようなので問題ないようです。
>>777
あぁ、それ本に書いてたなぁと思って調べたら
オブジェクトはJSON.stingiy/parseつかえってかいてたので試したけど
駄目っぽいですね。
一つ一つデータをオブジェクトかなにかで保存して
それを取り出して一つ一つcreateElement/appendChildしていくしか無いっぽいですかね。
だれか妙案あれば引き続きよろしくお願いします。 >>779
知らんかった!恥ずかしい
>>780
こんなかんじでどうじゃろ
var storage = localStorage;
//保存
storage.data = document.getElementById("tbodyのID").innerHTML;
//復元
document.getElementById("tbodyのID").innerHTML = storage.data; >>781
あぁ、それ良いかもですね!
あとで試してみます。 LocalStorage って、HTML を保存するものじゃないだろ
どちらも文字列の、key : value 型だろ ふーん、じゃ>>781がダメならオブジェクトをJSON.stringifyして保存するのも禁止な。 イベントリスナ無視していいなら
innerHTMLを出し入れしてもただの文字列でしょ、問題はないんじゃね
なんか問題あるっけ ない。>>783がinnerHTMLの戻り値が文字列だと理解してないだけ。だからバカにされている。 普通、HTML タグなど、保存しないだろ。
なんで、そんな表示情報を保存するねんw
保存するのは、アプリに必要なデータだろ
key : value
アプリに必要な、データの項目と値 今回はtableの保存だからな
HTMLのままが駄目と言っちゃ
縦横長+配列に分割することになるんだろうけど
そうなったらJSON化もあんまりスマートでないのでIDB使おうかとかも言えるしな
まあ、大きなアプリで沢山入出力するなら
そこ抽象化して丁寧にやるのもいいけど
簡素なものには適当な対応でHTML突っ込んで戻すくらいで良いんじゃないかと思うよ >>787
で?復元時にはバラバラにしたデータからまた元のhtmlの文字列組み直すのか?それとも一つずつcreateElement繰り返して挿入か?w
どっちにしろバカなんじゃねーのオメー
えんぴつを使わないアメリカかよwww >>789
でも君プログラムのアーキテクチャについて無知じゃん っていうか、たったそれだけのことで悩んでどうするんだって気がするけどね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); スマートかどうか、仕様的に許されたことかどうか、この2つは別問題
1行で終わる話 テーブルの部分をコンポーネントにしてそっちに配列読み込みの機能を持たせるべきだと思う ネズミ倒すのに戦車が必要とか組織再編が必要とか言い出す兵隊、降格です。 $('#table').append(data.map(function(row) {
return $('<tr/>').append(row.map(function(attrs) {
return $('<td/>', attrs);
}));
})); つーかHTMLをそのままデータにすると柔軟性がなくなるよ。
後からHTMLをかえたくなったときとかね
テンプレートにデータを流し込んでビューを作るってことを
やっている人なら理解できると思う
そもそもデータとして参照する時HTMLを解析しなければいけなくなる
仕様的に許されているからOKと考えるんじゃなくて
後々のメンテナンス性なんかも考えらるようでなければダメ ちなみにjQueryの例を出したけどデータが多くなるとさすがに重くて
lodashとかにあるテンプレートエンジンの機能を使って
文字列として処理したほうが速い
attrsの部分がちょっと大変だけどね innerHTMLつかった書き換えはセキュリティ上よくないからあんま使うなってよんだけど そりゃどういう時どうして危険か理解できないなら使って問題ないか問題か自分で判定できないだろうから一律使用しないという方針にするしかないな。哀れw javascriptはセキュリティ上よくないから使っちゃいけないな
ある意味、真理ではあるが tableじゃ無くてflexboxにすると多少抽象度と、コードのシンプルさと、パフォーマンスが担保できると思う テーブルセルの幅の取り方の挙動をflexで再現できたらいいのになっておもうことがある
区切り線付きの横並びの要素とかで 基本的にアプリは、MVC で作る
Model(データ)と、View は分離させる。
View は、しょっちゅう変わるから、Modelは、View に依存させない
>>799
異なるドメインから読み込んだものや、素性の知れない者が作ったものを、
innerHTML で読み込んで実行すると、何されるか分からないので、危険
自分自身で作ったものだけで、ハッキングされていないなら、まあ大丈夫かな javascriptの知識一通り合ったらjQueryってすぐおぼえられるもんなん?
20時間くらいでいける? >>810
ただのライブラリだからすぐに覚えられる20時間もいらん。
本気で1時間やればもうDOM APIは使いたくなくなる。 DOM APIつかってループで繰り返し要素を作ったり変更したり
したことがあるならjQueryの簡単さに感動するだろうな 正規表現リテラルって
別に普通にシングルクォートで囲ってパターン文字列として書いてもいいんですよね >>815
そうだよ。ライブラリってのは普通何か目的があって
その目的をうまくやるために作られる。
なんにでも使えるライブラリとかそいういうのゴミだから >>781
できました。
ありがとうございます。
とりあえずはコレでいきたいと思いますが、
他の方の指摘にありますし
データ処理には興味あるので勉強としてデータを構造的に保存する方法も模索していこうと思います。
>>793
データは2次元配列に格納していけばよいこいうことでしょうか
コンポーネントというのはどういうことなんでしょう?
>>802
flexboxにするいうのは
<p>かなんかに各データポイントをいれて
display: flex; flex: columnにして
それを行方向に積み重ねていくって感じでしょうか?
>>808
JavaScriptデザインパターン
https://www.amazon.co.jp/dp/toc/487311618X/
この本に書いてそうなので読んでみます。
ヒントありがとうございます! 画像を真ん中に配置したいのですが真ん中に配置されずに困っています
var imgTag = document.createElement('img');
imgTag.setAttribute('src', fugafuga);
imgTag.setAttribute('title', hogehoge);
setAttributeを使用し画像を真ん中に設置する方法はありません出ようか? >>818
setAttributeなら
style属性に
"margin-right:auto; margin-left:auto"
でいいんじゃない?
外部スタイルシートなら
cssに
.someName {
whatever: anything
}
JSで
imgTag.className ='someName' >>819
多分ID変わってます
ありがとうございます
頑張ってみます! >>817
書名紛らわしいが、一般に「JavaScriptパターン」のほうが良書と評価されてるよ。ご参考まで。 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);
})(); >>822
>自動再生ボタンをUserScriptで自動クリックしてオフに
意図がわからん
ボタンを自動クリックしたら再生が始まってしまうではないか?
最近のブラウザは勝手に自動再生しないように環境設定できるのがあるぞ ツベのプレイヤーって特殊だよね
javascriptで操作できんのか 822です。レスありがとうございます。
>>823私の意図している”自動再生”は、ページを開いた時に再生ボタンをクリックをしなくても動画が再生される機能のことではなく、
動画を再生し終えた後に10秒ほどのカウントダウンがあり、さらにその後別の動画に自動リダイレクトされる機能の事です。
質問文がわかりにくかったようで、申し訳ないです。
スクショを用意しました。
https://imgur.com/a/UDsCL >>825
ほらよ。直してやったで
// ==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);
})(); ついでに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);
})(); 補足しておくと最初のやつはセレクタがよく分からんやつだった。
適切と思われるものに直した後、checkedがついているときだけoffにするようにした
またjQueryバージョンは、buttonの存在チェックをしていないが、
jQueryっていうのは、セレクタで見つかった要素全てにメソッドを実行する(この場合はclick)
というものだから、要素が見つからなければ何もしないので存在チェックが不要になる なお、一行でも書ける
setInterval(() => $("paper-toggle-button[checked]").click(), 1000); 822です。
>>826,>>827,>>828,>>829
動作を確認できました。助かりました。
欲しい機能をさらって実現出来たら最高ですよね!
本当にありがとうございました。
Javascript勉強します。 document.querySelector("paper-toggle-button").checked = false
これでもいける?
createEvent("MouseEvents");
evt.initMouseEvent();
button.dispatchEvent(evt);
このあたり何やってるんだろう
質問者じゃないけど詳しい人教えて >>831
行けるかもしれないけど実装次第だろうね
まずpaper-toggle-buttonというタグ(カスタムタグ?)は
動き見てると非同期で表示されてる感じがする。
なので、ページ読み込んだすぐには存在しておらずsetIntervalで
1秒おきにチェックしてるおり、paper-toggle-buttonが
nullの場合になにもしないようになってる。
こういう所、jQueryは存在しなくてもエラーにならない設計なので便利
クリックは実際のマウスクリックをエミュレートしており、
実際にマウスでクリックしたのと同じ動きをする。
YouTube側の実装がcheckedだけを見てるなら、それで動くかもしれないけど
他にクリックされた時に何かしている可能性があるからクリックを
エミュレートするほうが確実
本気で解析すればわかると思うけど、こういうハックでそんな面倒なことしたくない
ささっと解決したいね。 やりすぎ防犯パトロール、特定人物を尾行監視 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 おいおい、、、、頼むからもうcreateEvent系は使うな
コンストラクタでスマートに作れるだろ clickイベントを発行するだけなら.
document.querySelector("paper-toggle-button").click()
でいける
jQueryではなく標準JavaScriptでサポートしてる
ただし<input type="image">の_xや_yを指定したいとかなら、
createEvent()で細かく指定する必要がある jq広めてどんな得があるというのか
本が売れるとか?アフィが捗るとか? 変に謎関数を自作されるより既存のちゃんとしたライブラリ使ってくれる方が後の人が助かる >>836
イベントは
new Event(nameString,optionObject)
の形で作れ
createは非推奨 >>817-821
Stoyan Stefanov 著
JavaScriptパターン ―優れたアプリケーションのための作法、2011
オブジェクト指向JavaScript、2012
JavaScriptデザインパターン、Addy Osmani, 2013 >>842
JavaScriptパターン > JavaScriptデザインパターン >>>>> オブジェクト指向JavaScript >>838
jQueryはすでに広まってるよ
どんな特があるかは、広めて特があるんじゃなくて使うと特がある。
今回みたいなのはささっと実装できるという得がね
俺の得じゃなくて、使うみんなが得をする >>818
> var imgTag = document.createElement('img');
> imgTag.setAttribute('src', fugafuga);
> imgTag.setAttribute('title', hogehoge);
だと
$('<img>', {src: fugafuga, title: hogehoge});
ね? >>843
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法
これは? グッドパーツは世界的に超有名な本だけどさすがに古いから読む場合は現在どうなってるか気を付けながら読んで The Good Partsなんて出たときから歴史を振り返る見て楽しむ本であって
それで勉強するような本ではない 配列に関しての質問いいでしょうか?
hoge[10].parentNode.insertBefore(elmDiv, hoge[10].nextSibling)
上記のような配列を指定して要素を追加する記述において、hoge[10]の部分を”一番最後の配列”に指定するメソッドは存在するんですかね?
配列の値が毎度変動するため、(1〜10の時もあれば、1〜30の時もある)
それができるとものすごく楽なのですが・・・調べてみてもあらかじめ配列の数が決まっている場合に最後の値を取得するメソッドしか出てこないんですよね。。 JSではlengthゲッタに副作用を持たせる事ができるし
ロジック的にhogeが正当な混じりけのないNodeListだと確認もする
保証された方法がないのでセキュアでない 本読んで勉強してたらXMLHttpRequestの項目が合って
コードをうって試して見るんだけど
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
というエラーが出てうまく生きません。
サーバーの概念とか全くよく分かってないのですが
コレは自分が今使ってるPCをサーバーとみなして処理とかできないってことなんでしょうか?
いまいちよくわかりません。
現在は自分のPCのあるフォルダにJSとHTMLを置いて
HTMLを同じ自分のPC上でクロムで開いています。 ローカル環境では自由にXHRはできない、特にChromeはその制約がややきつい
なぜなら、readme.htmlとか開いただけでPCの全データを外部に送信されたりしたら困るだろう?
セキュリティを無効にする方法もあるが、
基本的には「live-server」などの簡易ローカルサーバを立てることが推奨
ちなみに今ではXHRはもう使われない
Fetch APIを使う 単純にhtmlを
http://localhost/some_file.html じゃなくて
file:///C:/WEBFOLDER/some_file.html とかで開いてしまってて、
他方htmlの中では http://localhost/some_data.json にXHRしてる、・・・とかじゃねーの
当然だがしっかりCORSに引っかかる
まあ本読んで勉強してますなんかおかしいです、っつーなら
本出したとこに電話して聞けよとか なんとなく構造がわかりました。
live-serverで検索してみたけど難しそうなので今回は諦めます。
有益な情報有り難うございました。 いくらJSとはいえlengthが配列の長さじゃないかもしれないと疑いだしたらキリがなくない? >>856
live-serverなんて何も考えなくても1分あれば準備できる最もお手軽なサーバーだぞ npm i serve -g
でインストール以降、
serve .
これだけ。 CORS だろ。
サーバーを立てていないと、異なるドメインにアクセスできない
Python, Ruby など、何かの言語に、最初から入っている、
サーバーを起動させて開発をやれば? htmlとjsだけなんだから
Windows環境でも使えて日本語環境もばっちりの
apache httpdでいいじゃん・・・ > ちなみに今では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を使ってるサイトを探してみると良い
まず見つからない ブラウザ互換性は重要だが正直言えばそろそろIEは切り捨てても赦して欲しい
仕事ではそうもいかんけど 仕事でそうはいかないのをわかってるなら
どの辺で切り捨てようというのだ
趣味サイトならいくらでもお好きにどうぞじゃん 最初から読み込んでいるJavascriptで制御している開閉ボタンつきサブメニュー部分を
ここだけajaxで更新した時、その開閉ボタンが開閉しなくなるので
なんとかしたいんですが、何かいい方法ないでしょうか?
うまく何がしたいか言葉に表せないのですが、以下の記事とだいたい同じことがしたいです。
http://petitviolet.hatenablog.com/entry/20130418/1366288852 >>865
どうせ簡単な話だろうが、めんどくさい
サンプルコードかけ >>866
わかりやすい説明じゃなくてすいません
$(function(){
$("#menu")
.empty()
.load("./menu_output.php");
});
↑こんな感じで#menuだけ更新、
menu_output.php の中に最初から読み込んでいる
$("button").click(function () {
$("p").slideToggle();
});
で動かしてる部分があり、更新し直す前はトグルできるが
更新した後はトグルができない、更新後もトグルできるようにしたいということです $(document).on("click", "button", function () {
$("p").slideToggle();
});
って書き直せば動く。documentの部分は
たぶん"#menu"でもいい >>868
うまくできました!
ありがとうございます。 スレ違い質問
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開く処理は破棄される >>864
ここはお仕事相談所ではなくて
純粋にJSを勉強しようと思う人のための質問スレだからね jQueryというライブラリを使ってるだけでJavaScriptだよ 料理の為の質問スレと言っても
料理技術を磨きたいっていうのと、とりあえず今日食うものをどうにかしたいっていうのは違う
ここはどちらかと言うと前者で、中食買ってきてレンジでチンみたいなのはお断り nativeオンリーならDOM関連の質問は全部jQueryスレに行ってほしい
jQueryならサラッと書ける回答を素のJSで書くのダルい
もちろん、質問者自身が素のJSで書くことを望んでるなら別にいいんだけどさ だるいって言うのはまあ良いんじゃない
でもできないって言うのはやっぱり良くないと思うから
初心者には素のJSで教えるべきだよ
基本的にライブラリは背景を理解しとかないとね
これは電子レンジでチンすればできるものということしか知らないのと
暖める必要があるから電子レンジを使うということを知っているのと
電子レンジの温める仕組みと性質を理解してるのではやはり状況対応度が違う jquery宣伝してるやつは>>826-827書いたやつだろ
jqueryならこう書けると称して
jquery関係なく処理変更で行数減らしたやつ >>875
ブラウザ固有のDOM APIなどはnativeのJavaScriptではないので
その理屈はとおらない >>879
質問に回答する人 >>>>>>> 何も書かないで文句だけ言う人
これだけは理解しような。
書けばいいんやで、誰よりも早く 回答だけが欲しいなら専門サイトでやれ
ここは5chだぞ
発言に優劣は無いし急かされる理由もない javascript自体勉強したいんだけどコード書くような本は全部jqueryなんだよなぁ >>885
nodejsとかブラウザを使わないような本なら
jQueryは出てこないと思うよ なんか変な争い始まってんなwwww
個人的にはどっちでもいいが
求められてないのにちなみにjQueryでは。。。とかあえて別にかくコメもうざかったりするが。 >>887
それは当たり前のように横暴に書かないということで
一応色んな人に配慮してる書き方のつもりなのでは? エラーが出てないのにe.preventDefaultが機能しない
のって経験上何か思い当たる? アロー関数式とfunction式って挙動に何か違いあるの? 分かった、じゃあ(function(){〜}).bind(this)と()=>{〜}の違いは? アロー関数ってリテラルやろ?
だったらfunnction命令と違ってかならず
呼び出す前に定義をかかないといけない。
と適当に書いて見る。
適当に突っ込んどいてくれ。 >>897
>>892はfunction式って言ってるんだから巻き上げが起こらないのはどっちも同じだよ
基本的にfunction式にthisをbindしたものと同じと考えて相違ないと思う 同じじゃないぞ
var aaa;
aaa = (function bbb(){}).bind(this);
aaa.name;
=> "bbb"
aaa = ()=>{};
aaa.name;
=> "aaa"
chromeなに勝手に無名関数に名前付けてんだよ… >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).
狐とクロムだけが対応してる仕様てことじゃないの? >>899
aaa = (function bbb(){}).bind(this);
aaa.name;
=> "bound bbb"
ってなったが? aaa = function (){}
aaa.name
=> "aaa" 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" DHCってもともとは翻訳会社なんだぜ
知らんと思うが >>905
これなんでこうなってんの?
bind()が名前に影響及ぼさなきゃならんの?
適当にisBoundとかのプロパティ設定するんじゃだめなの? 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 を呼び出すとラップされた関数が実行されます。
新しい別の関数を生成してるからオリジナルとは別の名前が付けられるってことじゃないの? f = (function bbb(){}).bind(this).bind(this).bind(this).bind(this).bind(this).bind(this);
f.name => "bound bound bound bound bound bound bbb" >>908
自分でbindメソッドを実装してみれば?
元と同じ名前ではダメな理由がわかるよ >>899はchromeだけどなんでnameにbound足されてないの?google舐めてんの? google先生に喧嘩売ってるやついるよwwww
ぎゃっはっはっは >>847
>>848
そうなのか。
good partsはちょっと古いけど、アマゾンレビューにも古いからどうとか書いてなくて(最近のレビューないけど)
ページ数もそんななくて手頃だし評判もいいので次コレ読もうと思ってたんだけど。
どうするかなぁ jqueryでpreventDefaultする時も、falseを返す必要ありますか? XMLHttpRequestって同期モードだとresponseTypeを変更できないみたいだけど、同期モードだとテキストしか受信できないってこと?
同期モードでバイナリを受信する方法はないの? >>921
しなくていいんですね
ありがとうございました Web APIの仕様書で
URL:/xxx_get
とあるものは、ブラウザのURLに/xxx_getをつければ値が返ってくるのですが、
URL:/xxx_set
Request:cmd={xxx_no}&id={xxx_id}
とあるものは、どうやってアクセスすればよいのでしょうか?
ド素人の質問で恐縮ですが教えて下さい。 >>925
scriptタグの中に何か指定するのかな、じゃあJavaScriptかなと思いました。 それサーバー側のプログラミングの問題じゃないの?
サーバーのプログラミング組んだ人に聞かないと駄目なんじゃない?
まぁ俺自信が完全な素人やから参考にしないで URLに
?cmd={xxx_no}&id={xxx_id}
つければいいのじゃないのかな >>928
説明不足ですみません、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?の方法が分かりません。 なんでそんなdataなんだろうな。動くと言えば動くんだろうが
ってかPOSTしてるじゃん
その関数を実行すれば動くだろうさ なんでそんなdataなんだっていうのは、
data: {cmd: 1, id: 1}
こっちの書き方で良くて、見やすく文字列加工がいらないから
あとpostなら$.ajaxじゃなくて、$.post使えばいいのに
なんでみんな長い$.ajaxを使うんだろうな?
$.post("cgi/xxx", {cmd: 1, id: 1});
でいい。
んで、お前が分かってないのは、そんな所じゃなくて、
相手のサーバー(ホスト名)は何なんだってところだろ?
そんなのドキュメントでも見ろとしか
urlは見ての通りパスしか書いてないから、そのHTMLを追いてる
サーバーのホスト名になる
で、さらに次は、postしたあとの結果の受け取り方どうするのかわかってるのか?
そこも分かってなさそうなんだが。 あとな、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っていうのはサーバーにデータを送信することだよ
お前に必要なのはこのレベルの説明だろ? >>930
>>923で書いたサンプルは一部でして、idには他で値を入れてます。
そのPOSTする方法が分からないのです。
ボタンとかを作ってクリックしてあげる必要があるのでしょうか。
以下のサイトを参照しています。
https://qiita.com/busyoumono99/items/9b5ffd35dd521bafce47
URLは、192.168.xx.xx/cgi/xxx_set なのですが、どのようにして送信するのでしょうか? >>933
だから関数を実行すればいい。
実行する方法はいくらでもある。
この仕事をする上で、その方法を知らないわけがない。
つまりだな。
手術の真っ最中にメスって何って聞いてるようなもんだ >>935
url: "cgi/xxx", の箇所を、url: "192.168.xx.xx/cgi/xxx_set", にして、
ボタンとかを作って押してあげるでよいのでしょうか XMLHttpRequestって同期モードだとresponseTypeを変更できないみたいだけど、同期モードだとテキストしか受信できないってこと?
同期モードでバイナリを受信する方法はないの? >>934
そのコメントで興味をもって見てみたが
MicroSoftのあたりで見るのをやめたw これか?
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
XHRによる画像の読み込み
PromiseとXMLHttpRequestで画像を読み込む別の例は、MDN GitHub js-examplesリポジトリにあり、動作を確認することができます。それぞれの行のコメントでプロミスとXHRの構造がよくわかるはずです。 >>929
url: "cgi/xxx/cmd=1&id=" + id,
or
data: {
cmd: "1",
id: id
} どうせcgi/xxx/cmd=1&id=undefinedになってるというオチ 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 )
かな >>944
>url: "cgi/xxx/cmd=1&id=" + id,
urlにホスト名を記述していないのに、なぜ宛先に届くのかが分かりません。
GETの場合は、URLで指定しているので分かります。
POSTの場合は、サーバにデータを送信するのに、サーバのアドレス(ホスト名)をどこに指定すればよいのか?が分かりません。
関数を実行するには、ボタンとかを作って押すというので正しいのでしょうか >>946
宛先であるホスト名は、192.168.xx.xx なのですが、
>xhr.open('POST', 'cgi/xxx', true);
これでどうやってホスト名に送るのでしょうか? >>949
アドレスは、192.168.xx.xx/cgi/xxx です。 >>950
>サーバへのデータ送信について
の箇所を読みましたが、疑問がはれません。
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 をどこにも指定しないでどうやって送るのだろうか? >>952
Web系の知識ゼロの底辺SEがWeb APIを使おうとして悪戦苦闘中です。 >>954
いまの環境だと試せないので明日試します。 そのWeb APIの仕様書が何の仕様書でどう書かれてるかは知らんけど
通信先URLが、ホスト名が指定されていない cgi/xxx だけであっても、
だから絶対に機能しないとはいえない 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')) >>958
GETのときは、ブラウザのURL欄に192.168.xx.xx/cgi/xxx_get と指定するので、そこにあるデータを取得するのは分かります。
POSTのときは、GETのときのようにブラウザのURL欄に指定することはしないみたいなので、どこに192.168.xx.xx を指定しているのでしょうか?
この構文の中に 192.168.xx.xx/cgi/xxx のアドレスが含まれているようではなさそうですし。。 >GETのときのようにブラウザのURL欄に指定
? >>961
カレントディレクトリはどこのカレントディレクトリでしょうか?
サーバーの?それともクライアントの? >>962
>>923でRequestを設定しなくてよい方は、ブラウザにURLを入れて実行したら値が表示されたので、
これがGETなのかなと思っていて、そのことを言っています。 >>963
>>928の
>url: "cgi/xxx",
このパスはサ−バのカレントディレクトリからのパスを指していると思うのですが、
192.168.xx.xx を指定しなくても送信できるのでしょうか?
宛先が分からないのではないでしょうか? 'URL'にすきなもんおきゃいいだけだろ
ばかなのかこいつ おまえらなんでキレながら丁寧に教えてんの?
ツンデレなの? べっべつに教えてるわけじゃないんだからっ
ただの独り言なんだからっ いや、俺はjQuery以前の問題なんでさっさと手を引いたよ
流石にこの程度じゃjQueryの素晴らしさを他の人に
伝えることは難しいからね。
つまり1+1の答はなんだ?っていう話題で
jQueryを使うと〜という話をするのは難しいということ
せめてAjaxの話にまでくれば良いんだけどね jQueryニキに見放されるとは
もうおまえこの業界でいきていけんぞ 見放すとは失敬な。お前らに任せるって言ってるんだよw
jQueryの話題じゃねーもの jQuery でフォーム送信は、form.submit(); かな?
「jquery form submit」で検索!
Ajax で同期処理は、非推奨だから使うな。
非同期のみ使え
JavaScript のXHR は、ややこしいので使うな。
素人は、jQueryのAjaxなどを使え
「jquery ajax example」で検索! ライブラリもフレームワークも甘え
高級言語自体甘え GreasemonkeyのAPIであるGM_xmlhttpRequestって戻り値がundefinedになる仕様なのですが
return出来ないとなると即時関数内にまとめて処理を書くしかないんでしょうか?
処理を分離したいのですが良い方法はありませんでしょうか?
GM.xmlHttpRequest({
method: "GET",
url: "http://www.example.com/",
onload: function(response) {
処理
}
}); 別の関数作ってGM.xmlHttpRequestのonLoadでそれ呼ぶようにすれば? >>977を参考にフォームデータを送信してみました。
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の意味は「今ちょっとここにないよ」みたいなので、設定が足りないのだと思います。(何となく心当たりがあります) >>989
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].
てかいてるやん。 >>989
おまえってさ
何日か前にXHRのバイナリがなんとかで質問してたやつ?
解答ないと質問コピペで繰り返して
解答あってもスルーする糞野郎だろ?
しねよ
こいつの質問には今後一切答えないように 的はずれな回答されたなら
またコピペ質問してるはずだろ
こいつならw 的外れなら「的はずれなんだよボケ。俺はこうしたいの。オマエ馬鹿なのか。バカは返答するな」って言ってもらわんと方向修正できんやろ。
コピペで質問返されてもな。 >>980
に書いてある
素人は、jQuery のAjax を使え!! jsコード上でxhrでapi叩くのと
formを作ってsubmit()させるのとじゃ効果が違くね? このスレッドは1000を超えました。
新しいスレッドを立ててください。
life time: 105日 1時間 34分 55秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。