+ JavaScript の質問用スレッド vol.129 + [無断転載禁止]©2ch.net
レス数が1000を超えています。これ以上書き込みはできません。
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
■規則/推奨ルール
・メール欄を空欄にし、名前にレス番を入れることを強く推奨(なりすまし防止)
・質問内容は具体的に。言葉だけでなく、出来る限り再現性を確認したサンプルコードの掲示。
・質問テンプレートの利用推奨。
・質問への「答え」だけでなく「意見」を出しても良い。
■禁止行為
・丸投げ質問
・迷惑スクリプトの質問
・オレオレ用語の使用(一般的な用語を使用する事)
・煽り、批判等の他人を不快にさせる行為(批判の代わりに「AよりBが良い」のような代案を出す事)
・回答者同士のレスは原則禁止(>>6を参照)
・ライブラリの話題の投稿(>>6を参照)
■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/ JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 ■FAQ
http://fiddle.jshell.net/vSqKr/44/show/light/
◆開発者ツール(Developer Tools)の基本的な使い方 (全部はhttp://fiddle.jshell.net/vSqKr/44/show/light/#Browser-Developer-Tools )
▼諸注意
- 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。
- IE9- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと 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 和訳) ■質問テンプレート
【環境】OS, ブラウザをバージョンと共に記入してください。(ex: IE8, Firefox4)
【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。
【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用)
【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。
【サンプルコード】現象を再現可能な最小限のコードを書いてください。
1レスに収まらないならコード投稿サイトを利用してください。
http://jsdo.it/ http://jsbin.com/ http://jsfiddle.net/ http://ideone.com/
■前スレ
+ JavaScript の質問用スレッド vol.128 +©2ch.net
http://peace.2ch.net/test/read.cgi/hp/1454390682/
■過去スレ全集
http://www2.atpages.jp/mirror/2ch/javascript/
http://usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ)
■テンプレ案
http://fiddle.jshell.net/fH4cC/174/show/
■関連スレ
CSS・sass・less・stylus 初心者スレッド＝15th＝
http://peace.2ch.net/test/read.cgi/hp/1453131115/
Canvasについて語ろう
http://peace.2ch.net/test/read.cgi/hp/1305093769/ JavaScriptで一番有名なDOM用ライブラリであるjQueryのスレです。
jQueryを使うとJavaScript単体では面倒な処理でもほんの数行で実現可能になります。
このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
JavaScriptだけだと面倒だけどjQueryでもっと簡単に書けませんか？というのもOKです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と
聞くスレではありません。そいうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。
前スレ
jQuery ライブラリ 総合質問所 vol.4
http://peace.2ch.net/test/read.cgi/hp/1400313626/ >>8
ライブラリスレなら前スレのURLを間違えてるよ
+ JavaScript & jQuery 質問用スレッド vol.5 + [無断転載禁止]©2ch.net
http://peace.2ch.net/test/read.cgi/hp/1452081417/ 前スレ>>1000
> LexicalBindingのthis
言い換えても無駄ｗ
一般的な用語で言え thisがよくわからないと言っている人の
疑問の一つがこれなんだよ。
function Klass() {
$("#id").on('click', function() {
// ここのthisはなに？ Klassのインスタンスじゃないの？
}
}
ってことなんだよ。
function Klass() {
var event = {}
$("#id").on('click', function(event) {
// でもこう書くと、eventはKlassのeventじゃないの？って疑問は起きない。
}
}
何故かと言うと、Klassのeventはonclickのevent引数で隠されていると知っているから（よほどの初心者でもない限り）
thisもそれと同じように考えればいいという話をしている。
function Klass(this) {
var event = {}
$("#id").on('click', function(this, event) {
// こう考えればeventと同じように呼び出し元が渡す変数で、
// thisが何かなんて疑問は起きない。
}
} アロー関数には "function” というキーワードは存在しないから、
先に行った、"全てのfunction" にはthisが存在する。という
定義には当てはまらない。（ドヤァｗ）
function Klass(this) {
var event = {}
$("#id").on('click', (event) => {
// この場合でもthisが何かなんて疑問は起きない。
});
} newの説明もつけ加えるならば、クラスもfunctionなのだから
thisという引数がある。
function Klass(this) {・・・}
このKlassを、Klass()と呼び出せば、ドットがないので
Klassのthisはグローバルオブジェクトのwindow。
obj.klass = Klass などして、obj.Klass() と呼び出せばthisはobj。
ここまでは一緒。
今まで出てきてないnewの話を「追加」するならば、
new Klass() と実行すると、Klassのインスタンスになるってだけだよ。
ルールをまとめると、ある関数を呼び出す時
・ドットの左側がある・・・this引数にドットの左側のオブジェクトが入る
・ドットの左側がない・・・this引数にグローバルオブジェクト（window）が入る
・callやapplyを使っている・・・ドットの左側と無関係に、callやapplyの第一引数がthis引数に入る。
・newを使っている・・・インスタンスオブジェクトが作ら、そのオブジェクトが入る。 "全てのfunction" には thisという引数がある。と言った通り補完してみればわかるだろう。
呼び出し元側は脳内で補完してくれ。ドットの前がthis、ただしcallとapplyを使えばそれをすげ替えられる。
function appendFunction (this, fn1, fn2) {
return function (this) {
fn1.call(this);
fn2.call(this);
};
}
var a = 0;
var obj = {
a: 10,
hoge: function(this){
this.a++;
}
}
obj.hoge();
console.log(obj.a);
console.log(a);
obj.hoge = appendFunction( obj.hoge, function (this) { console.log(1); });
obj.hoge();
console.log(obj.a);
console.log(a); thisの話は >>401- ぐらいに書いた。
一言で言うならば 全ての "function" にはthisという名前の引数があると考えればいい。
return function (this) {
fn1.call(this);
fn2.call(this);
};
つまりこういうことだ。もしこのthisがvalueとかいう名前だとしよう。
return function (value) {
fn1.call((value);
fn2.call((value);
};
valueは何か？と聞かれたら、呼び出し元で渡したもの。と答えるだろう？
thisも同じだ。thisは呼び出し元で渡すものだ。だからここだけ見てもわからない。
obj.foo() と呼び出すと、.（ドット）の左側がthisとして渡される。
ドットの左側がなければグローバルオブジェクト（this）だ
ただし、ドットの左側がthisになるという挙動は変更することができ、
callやapplyを使うことで、ドットの左側ではなく任意のオブジェクトをthisとして渡すことが出来る。
ここまで理解すればお前の疑問も解けるだろう？ JavaScriptで一番有名なDOM用ライブラリであるjQueryのスレです。
jQueryを使うとJavaScript単体では面倒な処理でもほんの数行で実現可能になります。
このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
JavaScriptだけだと面倒だけどjQueryでもっと簡単に書けませんか？というのもOKです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか？と
聞くスレではありません。そいうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。
前スレ
jQuery ライブラリ 総合質問所 vol.4 jqueryのバージョンが多すぎてどれを使えばいいか分かりません jQueryでカレンダーのプラグインがほしいです
表示方法としては端っこに小さく表示するということです
FullCalendarを導入してみたのですがサイズ変更をしてみると幅が狭くなったのですが縦が少し変になってしまいました(スクロールしないと月末が見れない)
小さなサイズで月末まで一目で見れるプラグインってありますか ■教えていただきたいこと
自サイト内で、別サイトを読み込み、印刷したいのですが、
以下２点以外の方法はありますでしょうか？
もしくは、「Tryしたこと１」でAirPrintから印刷できるようにするにはどうしたらよろしいでしょうか？
■Tryしたこと１
自サイトからfancyboxでポップアップを出して、その中に別サイトを読み込んたのですが、
AirPrintから印刷できなかったため、この手法は却下。
■Tryしたこと２
iframeで別サイトを埋め込む方法を検討したのですが、
埋め込み先のサイト側が、htaccessでX-Frame-Optionsヘッダに
DENYやSAMEORIGINを設定していた場合、読み込むことができないため却下。
以上、よろしくお願いいたします。 enchant.jsについての質問です。
「ゼロから始めるenchant.js入門」という本に載っているバーチャルキーパッドを動かすプログラムを作成したのですが、なぜかバーチャルキーパッドが反応しなくて困っています...ソースコードをお手本からコピーしても動きませんでした。どなたか解決方法をお願い致します。
http://jsdo.it/qa/407 [Ex Code Prettify]の使い方について質問です。
http://www.cyokodog.net/blog/ex-code-prettify-doc/
デモエリア、HTML、CSSを表示したいのですが、
CSSを書くと、デモエリア以外にもそれが反映されてしまいます。
たとえばCSSに
* {text-decoration: underline;}
と書くと、HTML部分やCSS部分など、ページ全体全てに下線がついてしまいます。
CSSに書いたものをデモエリアにのみ反映させることは不可能でしょうか？ google map を利用したアプリを趣味で作成しているものです。 google map で現在地は取得できましたが、常にリダイレクトしないと更新されない状態です。 リダイレクトしないで、更新する方法がありましたらどうかご教授願いますでしょうか。 Node.jsを勉強していてふと気になったので、質問しました。
以下のコードはドットインストールにあった、POSTされたデータをpostsという配列に組み込んで表示するというものなのですが、
readableイベント内で、read()を使って、リクエストされたデータをreq.dataに入れるときに、=ではなく+=を使っています。=でもいいのかと思いきや、
=の場合はconsole.log(req.data)の結果がBufferという謎の文字列になってしまいます。
これは一体どういうことなのでしょうか？
どなたか解説をお願いいたします。
http://ideone.com/1Tc7fB >>26 本の作者に聞いてください
>>29 不可能です
>>30 ありません 荒らしにかけちゃすげえ情熱だな
人生もったいないぞ 前スレの話し相手がいなくなって暇なのだろう
寂しがり屋だな 片っ端から乱立したのageてさすがにやりすぎだろ
爆破予告とか猫殺す前に病院行けよ http://fiddle.jshell.net/fH4cC/179/show/light/ で立てようとしてるが、未だに規制で立てらなかった
代行依頼も利用しようとしてるが、ストーカーが別スレにコピペして荒らしだと思われているようで受け入れてもらえない
何とも念入りな荒らしだな... 比較的、平和な>>44へ追記しておいた
+ JavaScript の質問用スレッド vol.129 +©2ch.net
http://peace.2ch.net/test/read.cgi/hp/1456250334/ ここが一番書き込みの勢いが高いから来たけど本スレはここでいいですか？
vue.jsの質問害したいんですがここでいいですか？
最適なスレがございましたら誘導してください。 >>26
2chよりも、jsdo.it 内で、質問すれば？
>>33
これら2つは、異なるもの
a = x
a += x
a += x は、a = a + x
と同じ意味だから、追加している .
.
板違い（？）の上に、話をさえぎってしまいゴメンナサイ！(*_ _)人
でも、この板のユーザーさんにも有意義な告知かと思うのでカキコませてください。
★ 謝礼は十分いたします ★ アメブロなどのサイト制作ができる方！！
アメブロなどを使用してのサイト制作のできる方を早急に求めています！
私はリケジョやPC女子からはほど遠く、サイト作成にはまったく疎いのでとても不自由しています…(> <；)
そこで私に代わりサイトを作成してくださる方を求めてこの場をお借りしました。
■サイトの内容…
アダルト系、違法性、その他公序良俗に反するものではありませんのでご安心ください。
■サイト制作の仕様ベース…
アメーバブログで十分です。願わくばwordpressなどのブログ形式のサイトを希望します。
それに準ずるもので使い慣れたものがあれば別のものでも構いません。
■条件はありません…
技術さえお持ちでしたら、学歴・職歴等は一切問いません。
フリーター、ニート、高齢ニート、コミュニケーション障害をお持ちの方、引きこもりの方、中年失業者、長期無職等、歓迎！
■作業形態…
作業は在宅でやって頂くことになりますので、時間の指定は一切ありません。別のお仕事の傍らに…でもOKです。
■詳細をお知りになりたい方は…
下記メールアドレスまでご連絡ください。詳しく書いた返信文を差し上げます。
※真剣な告知です。冷やかしはご遠慮ください。
井 上
inoue1952w★gmail.com
迷惑メール対策のため＠部分を★にしてあります。
実際に送信する際には★を＠マークに変えてください。
.
. 何なの？出会い系サイトに登録して迷惑メール大量受信されたいの？ こういう質問はするべきじゃないんでしょうが
callとapplyの意味が冗談抜きで理解できません
thisを呼び出す？みたいな言葉はなんとなくわかるんですが一体何がどうなるのか全くわかりません で、質問は？
ここはあなたのお悩み相談所じゃありませんが >>57
thisに関しては上の方に書いたよ。関数の隠れ引数みたいなものだって。
まあどんな所で使えばいいかわからないんだろうけどね。ぶっちゃけ殆ど使わないよｗ
たとえば、alert()ってあるよね？ 正確に言うとwindow.alert()
のwindow.alertっていう関数を別の変数に入れて実行しても動く。
var a = window.alert; a(); ← これは動く
でもこれは動かない。
document.a = window.alert; document.a();
なぜならaという関数の中では、thisはwindowであることが前提となっているから。
こういうときに強制的に、thisを変更するのがcallとapply
document.a.call(window); とすれば動くわけよ。
単純な処理ではこんなことしないのでcallやapplyは使わない。
だけどフレームワークやライブラリみたいなものになると使いたいことがでてくる。
例えばjQuery
$("button").on('click', function() {
// ここのthisはDOMのbutton要素になる
});
こういう仕組みを作りたいと思った時。on関数っていうのは引数のコールバック関数を
ライブラリ内の変数の何処かに保存しておきたくなるわけだけど、そのコールバック関数を呼び出す時に
コールバック関数のthisをbutton要素にしたい。と思ったとするだろう？
そういうときにcallやapplyを使えば、保存した変数がどこであっても、自由にthisを設定できる。
もしcallやapplyが存在しなければ、この仕様を作るためには、
button.dummy = コールバック関数; button.dummy() なんてことをしなければならなくなるわけ。 少し例を変えたほうがいいかな。
window.dummy = window.alert;
window.dummy(); ← これは動く
document.dummy = window.alert;
document.dummy(); ← これは動かない。
なぜならdummy関数の中ではthisはdocumentだから
jQueryのコールバック関数の中で、thisをbutton要素にしたいのなら
callやapplyがなかったとしたら、
button.dummy = コールバック関数
button.dummy() としなければならない。
button要素にdummy関数なんてものを生やす必要が出てくる。
callやapplyがあるおかげで
コールバック関数.call(button) とするだけで良くなる。 犬オブジェクトでは、鳴くことができる。
犬.鳴く
でも、猫オブジェクトには、鳴くメソッドがないけど、猫にも鳴かせたいとき、
this に猫オブジェクトを設定して、鳴かせてみよう
猫.鳴く 犬オブジェクトでは、鳴くことができる。
犬.鳴く ワン！
でも、猫オブジェクトには、鳴くメソッドがないけど、猫にも鳴かせたいとき、
this に猫オブジェクトを設定して、鳴かせてみよう
猫.鳴く ワン！
鳴く（関数）が一緒なので当然こうなります。 板違い（？）の上に、話をさえぎってしまいゴメンナサイ！(*_ _)人
でも、この板のユーザーさんにも有意義な告知かと思うのでカキコませてください。
★ 謝礼は十分いたします ★ アメブロなどのサイト制作ができる方！！
アメブロなどを使用してのサイト制作のできる方を早急に求めています！
私はリケジョやPC女子からはほど遠く、サイト作成にはまったく疎いのでとても不自由しています…(> <；)
そこで私に代わりサイトを作成してくださる方を求めてこの場をお借りしました。
■サイトの内容…
アダルト系、違法性、その他公序良俗に反するものではありませんのでご安心ください。
■サイト制作の仕様ベース…
アメーバブログで十分です。願わくばwordpressなどのブログ形式のサイトを希望します。
それに準ずるもので使い慣れたものがあれば別のものでも構いません。
■条件はありません…
技術さえお持ちでしたら、学歴・職歴等は一切問いません。
フリーター、ニート、高齢ニート、コミュニケーション障害をお持ちの方、引きこもりの方、中年失業者、長期無職等、歓迎！
■作業形態…
作業は在宅でやって頂くことになりますので、時間の指定は一切ありません。別のお仕事の傍らに…でもOKです。
■詳細をお知りになりたい方は…
下記メールアドレスまでご連絡ください。詳しく書いた返信文を差し上げます。
※真剣な告知です。冷やかしはご遠慮ください。
井 上
inoue1952w★gmail.com
迷惑メール対策のため＠部分を★にしてあります。
実際に送信する際には★を＠マークに変えてください。 下記のソースはランダムに中身を１つ選んで表示するというものです。
これを中身をランダムに被りなく３つ取り出すようにしたいのですがどう書くといいのでしょうか？
var msg = new Array();
msg[0] = 'aaaa';
msg[1] = 'bbbb';
msg[2] = 'cccc';
msg[3] = 'dddd';
msg[4] = 'eeee';
msg[5] = 'ffff';
var no = Math.floor(Math.random() * msg.length);
document.write(msg[no]); >>65
配列から取り出した要素を消すor取り出した要素を覚えて置いて一致したら再度ランダムに取得する >>65
lodashのsampleSizeを使うと一発で取れる。
https://lodash.com/docs#sampleSize
var msg = [
'aaaa',
'bbbb',
'cccc',
'dddd',
'eeee',
'ffff',
];
console.log(_.sampleSize(msg, 3))
//例 ["cccc", "dddd", "bbbb"] >>59>>60
今更だけどありがとう・・・！
このレスがきっかけでようやく理解できました >>68
var msg = [
'aaaa',
'bbbb',
'cccc',
'dddd',
'eeee',
'ffff',
];
この書き方は初めて知りました。
しかし、肝心の
console.log(_.sampleSize(msg, 3))
が上手く表示されませんでした。
すみません。 Cの「関数のポインタ」みたいに
var _a = window.alert;
_a('test');
は出来るのに
var _w = document.write;
_w('test');
が出来ないのは何故ですか？ >>72
object.method() と実行した時、
methodの中では、thisはobjectだけど、
var _method = object.method;
_method() と実行する時、つまり.（ドット）の前がない場合は
_methodの中ではthisはグローバルオブジェクト（ブラウザではwindow、nodeではglobal）と
仕様で決められているから。
_a('test) も _w('test') も thisは両方windowになっている。 >>71
lodashっていうライブラリを読み込まないとだめだよ。
https://lodash.com/
ドキュメント見たりググればわかるけど、このコード実行前に、
HTMLの書いたscriptタグでlodash.jsを読み込む必要がある。 >>73
ありがとうございます。
呼ばれた先にthisに依存する参照があるという事ですね。 >>75
そうそう。関数の内部でthisを使ってるかどうかは、中を見ないと分からないが、
呼び出し方によってthisが変わるわけで、中でthisを参照していれば
当然呼び出し方によって、動いたり動かなかったりする。 質問というかJavaScriptの感想を教えてくれ
1.習得に必要な期間
受講生は他のプログラムに触れたことがあり、一日５時間勉強にあてられる
最終目標は簡単なプログラムを何も見ずに作れる程度
2.JavaScriptの利便性
今後も使われることは増える可能性があるか >>77
簡単ってなんだ？テトリスぐらいか？
可能性は無限だからがんばれ JavaScriptは今後毎年仕様が追加されて使いやすくなっていく。
今からでも学ぶ価値があるし、
将来性も高い。
デスクトップアプリも作れるようになってるしね。
慣れたらtypescriptに手を出してもらいたい。
ちょっと追加の言語仕様を学ぶ必要はあるけど、
ライブラリの必要パラメータとかある程度教えてくれるようになるから
周辺ライブラリの学習に役立つ。 prototypeを使ったクラスメソッド定義の際
prototype={}が駄目な理由ってなんですか？
というかconstructorの必要性が分かりません 他の言語使えるヤツなら3日で覚えるだろこんなクソ言語 >>82
他の言語の経験が活かせて3日で覚えられるということは、
クソ言語ではないということですよ。
似ているということなんだから。 グローバル変数をローカルで使用する時のみ変更するって事できますか？
var hoge['ichi'] =0;
function test1(){
hoge.ichi =1
console.log(hoge.ichi);
}
function test2(){
console.log(hoge.ichi);
}
test1();;←1になる
test2();←0に戻ってる えっ？
グローバルからは、アクセス禁止にするっていうこと？
純粋に変数じゃ無理じゃないの？
どっちにしても、オブジェクトにしないと行けないと思う >>87
何をいっているかわからないがクロージャーを使うのはどう？
function hoge() {
var ichi = 0;
return [function () {
ichi = 1;
},
function () {
console.log(ichi);
}];
}
var _a = hoge(), func1 = _a[0], func2 = _a[1];
func1(); //ichi <- 1
func2(); // console.log(1) >>77です。
お答えいただけて嬉しい限りです。
参考にさせていただきました。
ありがとうございました。 ES2015のクラス定義について聞きたいんですが
アロー関数のようにthisを束縛した状態でメソッド定義する方法ご存じないですか?
以下のようにするしかないんですかね？面倒くさいんですが、、、、
class RadioOther{
constructor(props) {
this.onRadChange = this.onRadChange.bind(this);
}
onRadChange() {
...
}
...
} >>92
何をしたいのか全くわからん。
これでいいだろ。
class RadioOther{
constructor(props) {
// 不要
}
onRadChange() {
...
}
...
} >>93
setIntervalとかにメソッドを登録するとthisの指す先が変わってくるので
それをなんとかしたいって話です。
>>92 の方法が一番簡単なんですかね。でももっとclass定義の仕方として
良いやり方がないかなと >>92
やろうとしていることがJavaScriptの良いところを殺してしまっている感じ
ここは本スレじゃないから>>91で質問し直した方がいい気がする >>94
クラス関係ないじゃん。
setInterval(this.onRadChange.bind(this), 2000)
だろ。 >>94
_this = this
で参照を保存しておけば？ var Object ={};がありまして
このObjectの中にあるプロパティとメソッドの返り値をconsole.log()で表示したいです
どうすればいいでしょうか？ 言い忘れました
このObjectの中にある全てのプロパティとメソッドを
です >>86
こういうjsしかできない奴だ本気で引くわ
普通に冗長なクソ言語たぞ >>104
まあまあ、LLにそんな目くじら立てるなよjk
余裕が無いぜぇw for (;;)
ソースコードでこういう文があったんですが
コレってどういう意味ですか？ breakされるまで繰り返されるって事ですかありがとうございます >>106-107
そんなコードは窓から投げ捨ててしまえ 窓から投げ捨てるって久しぶりに見た
もしかして2000年代半ばからずっと服役してたの？ 今でも少女や赤ちゃんや犬が窓から投げ捨てられる事件が絶えないから
見ないって事は無いね >>110
ネットで流行る前からある表現だから、
ネットでの流行り廃りを基準にされても困る。 たぶんここが本スレだと信じて質問です。
Windows7-Pro ブラウザはFirefox50.1とChrome55.0
モニタリングシステム構築の予行としてPC内で周期的にダミーデータを発生させて、それを
クライアント（Webブラウザ）で周期的に読み取って表示させたいです。
つまり本来の構成は、
測定装置（データ）→ PC[サーバー] → JavaScriptで読み取りブラウザ表示
なのですが、予行演習として
PC[ダミーデータ生成] → JavaScriptで読み取りブラウザ表示
をしたいです。 データ生成と読み取りの周期は1秒か1分とかの間隔です。
このとき問題になると思ったのが、ファイル生成（上書き）の周期と読み取りの周期が
タイミング的に重なった場合のバッティング（かち合い）で、回避策はありますでしょうか？
※要は書き込んでる最中やデータ更新中はブラウザが読み取るのを回避したい
PHPは必要とあらば（基本レベルですが）使用可能です。バージョンは5.6.28です。
宜しくお願い致します。 ネットワークを介してタイミングを合わせるのはキビしいので
サーバー側から能動的、定期的にデータを送信→ブラウザ側でイベント発生
の流れが無難かと
Server-sent eventsかWebSocketsになるんかな >>115
普通にファイルにロックかければいいいよ 何もしていない普通の一般人の自宅に隠しカメラを取り付け
それをネットでリアルタイム配信
仲間という人間に対する盗聴盗撮生ネット配信の会
しかけたカメラの映像
乗っ取っているＰＣの画像をリアルタイムで生配信中
集団で仲間の私生活を覗いて楽しんでいる
そんなことが今この国では行われています 質問なのですが、アコーディオンで閉じるボタンをつけるには
どういう方向にいじっていけばいいのでしょうか？
これで開閉するようにはなったのですが、これの下に更に閉じるボタンをつけて
それを押すと全体が閉じるようにしたいです。
<script type="text/javascript">
function layer_toggle(obj) {
if (obj.style.display == 'none') obj.style.display = 'block';
else if (obj.style.display == 'block') obj.style.display = 'none';
}
</script>
<a href="#" onclick="layer_toggle(document.getElementById('more1’));return false;" class="open">クリック開閉</a>
<div id="more1” style="display: none;">
中身
</div>
✕閉じる （←ここに入れたい） JSDocで、「これはわざと未使用の関数ですよ（だから未使用っつー警告出すなよ）」
というのを宣言したいんだけど、どうしたらいいの？ selectタグのリストを選んだ時にページの他の部分が書き換わるのってどうやって作ってると思う？
selectタグの中にはonclickとかonchangeは書いてなかった
イベントリスナーとかで何処かで登録してる感じなのか？
jqueryは使ってたみたいだけどそのタグの部分はidとかnameはあったけどそのままの名前でつこうてるのはなかった
解析の定石みたいなのあったら教えて
環境はie11です > selectタグの中にはonclickとかonchangeは書いてなかった
それが普通 >>123
ChromeかFirefoxを使え。jQueryで設定したイベントリスナーを
簡単に調べることができる。
Chrome
http://qiita.com/zaru/items/b7732ebad9b732518359
補足 見る方法は変わってないが、今はjQueryで設定されたイベントリスナーを直接見れるようになってる
Firefox
https://developer.mozilla.org/ja/docs/Tools/Page_Inspector/How_to/Examine_event_listeners
jQueryはよく使われているので、ブラウザが直接対応してくれてる。
もしこれが自分で作ったライブラリとかであれば、面倒なことになるだろう。
これもまたオレオレライブラリではなく、有名なライブラリを使ったほうがいい理由の一つ レスありがとうございます
閉じた環境なんでChromeとかはインスコとかは出来ないけど
jsの飛んでるところを見つけれました
jqueryのonchangeだったと思うけど
onchangeとかを直接呼んでも動かなかったけど
blur呼んだらイベントが反応しました
やっぱブラウザとかは新しいのが欲しいですねぇ… >>116-117さん有難うございます
（すいません、本業が忙しくて返事できませんでした）
先ほどレスしようとしたのですが、Rock54のNGワードに引っ掛かりましたので、
別途テキストファイルでレス文をUpします。
http://uproda.2ch-library.com/9621868KS/lib962186.txt そういうときはNGっぽいものを変更すれば良いんだよ。
大抵はURLに問題がある
Server-sent eventsは初めて見ましたので今勉強しています（なるほどプッシュ通知の一種か）。
WebSocketsはリアルタイム通信で使うとのことですが、この種のものに
「Milkcocoa」 https://mlkcca.com/ があるそうなのでこれも候補にしています。
ファイルロックを含め、また勉強してみます。
なお、基本的なところで、XMLHttpRequestを https://allabout.co.jp/gm/gc/24097/#2 と
http://qiita.com/sirone/items/412b2a171dccb11e1bb6 を元に試しにテキスト読み込みJSを
作ったのですが、Firefoxだと問題無いのですが、GoogleChromeだとセキュリティの見地から
ややこしいことになってますねw
あと、XMLHttpRequestでテキストファイルでは
http://anago.open 2ch.net/test/read.cgi/software/1339905697/317i のように
xhr.responseType = "text"が必要でした（これが無いと「整形式になっていません」が出る）
以上、有難うございました。 この書き方では、aaaの直下のdiv だけが取得できますが、
var div_ary = document.querySelectorAll( "#aaa > div" );
こう書くと、aaaのすべての子孫の、divが取得されます
var aaa = document.getElementById("aaa");
var div_ary = aaa.querySelectorAll("div");
element.querySelectorAll つまり、レシーバーがelement の書き方で、
レシーバーの直下のみを取得する、書き方はできますか？ 【環境】Mac Chrome
【期待する結果】
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
・↑のような要素が連続して配列されている場合に、要素の3番目だけに要素を追加して
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
<div class=“unko”>unko</div>
<div class=“hoge”>hoge</div>
という結果に出力したいんだけど、どうすればいいでしょうか…？
【サンプルコード】
//追加
var elmDiv = document.createElement('div’);
//省略
var hoge = document.getElementsByClassName(‘hoge’);
hoge[0].appendChild(elmDiv);
↑のhoge[0]の数字を3にしても３番目に追加できないんですが何か間違ってるんでしょうか・・・ >>130ですが、
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
<スクリプト>
スクリプトを書き出す場所を配列の下にするとうまくいくんですが、
<スクリプト>
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
こういう形だとうまくいかないんですよね。。
後者の形で任意の配列への要素の追加はできないものなのでしょうか？ >>130
【JavaScript】要素を追加するinsertBeforeとappendChildについて
http://www.task-notes.com/entry/20161020/1476974565
配列のインデックスは、[0]から始まるから、3番目なら、配列[2]になる
また、ソースコードには、半角しか使えない。
全角の「”’」などは使えない >>131
<div></div>
<スクリプト>
これなら、DOMが構築された後に、スクリプトが実行される。
<スクリプト>
<div></div>
これは、DOMが構築される前に、スクリプトが実行されるから、
スクリプト実行時には、<div>は存在しない
DOMが構築された後に、処理を行う。
addEventListener とか
HTMLの読み込みが完了してから実行
http://qiita.com/cervomansan/items/0873026853686503fc3a
初心者は、jQuery を使った方がよいかも 初心者ならなおのことjQueryじゃなくて普通のDOM使ったほうが良いだろ
簡単な命令だけを使って手続き型で書けばいいから
初心者にも理解しやすい
jQueryだとリストで考えないといけないから慣れが必要
そういうのは開発コストを重要視するプロが使うもの
難しい反面、短いコードで記述できる jQueryで書いた場合
$('.hoge:nth-of-type(3)').before('<div class="unko">unko</div>');
または
$('.hoge:nth-of-type(3)').before($('<div/>', {class: "unko", text: "unko"}));
または
$('<div/>', {class: "unko", text: "unko"}).insertBefore('.hoge:nth-of-type(3)'); Array.prototype.forEach()が使えるのは、IE9 からとか、
こんな事を一々、素人が気にしていられない
漏れはプログラマーだから、冗長になるけど、for ループを使っておくとか出来るけど、
素人には、jQuery の方が楽
insertAfter()は、jQueryにはあるけど、JSには無いとか、愕然とするやろ！
insertBefore()だと、想定外の所に、要素が追加される
>>129
それと、わかる人がいれば、お願いします。
これも、jQueryなら簡単 >>136
var div_ary = aaa.querySelectorAll(":scope > div"); >>133
回答のほどありがとうございます！
window.onload = function () {};
で解決しました！
重ねて回答してくださった皆さんに感謝です！
よかった〜 >>137
それってscoped cssってやつ？
http://caniuse.com/#search=scoped
なんか仕様から消えちゃったみたいだけど
>>136
> Array.prototype.forEach()が使えるのは、IE9 からとか、
> こんな事を一々、素人が気にしていられない
気にしていられないの意味はなんかね？
動くかどうか気にしない。だから動かないこともあるってこと？
プロは許されないけど、素人なら許されるでしょ
素人なら自分が使ってるブラウザの標準DOMとか
JavaScriptだけでテストして動けばOK。
プロはそういう訳にはいかないからjQuery使うんだけど
（自分で頑張って全てのブラウザでテストするっていうのは
コスト意識がないのでプロ失格なので注意な） すみません、再度質問したいことがありまして。。
appnadChildのように要素を親要素の中に挿入するのではなく、要素の次に別のノードを追加する形にしたいのですが。。 親要素の中に追加要素を割り込ませるのではなく、純粋に指定した要素の次に追加要素を配置できるメソッドってあるんでしょうか
<div></div>
<div>
<div>要素</div>
</div>
<div></div>
という形ではなく、
<div></div>
<div></div>
<div>要素</div>
<div></div>
という形にすることってできますかね。。 insertBeforeの場合、
<div id=“hogege”>
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
<div>追加</div>
<div class=“hoge”>hoge</div>
<div class=“hoge”>hoge</div>
</div>
と言うように包括する親要素が必要なんですよね。。
純粋に指定した要素の次に追加要素を配置できるメソッドがあればお教え頂きたいです。。orz 追加場所.parentNode.insertBefore(追加, 追加場所)
これで追加場所の上に追加されるよ
<html>以外は親要素が必ずあるから insertAfterみたいなことがやりたいなら
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)
bodyで包括されてるんだし、わざわざ新規に親要素を作る必要はないわな >>141
> 親要素の中に追加要素を割り込ませるのではなく、純粋に指定した要素の次に追加要素を配置できるメソッドってあるんでしょうか
ない。DOMで用意されてるのは基本的な命令だけなので、
そのような特殊な条件の場合は自分でそういうコードを書かないといけない。
それが面倒だからjQueryがある。 結局、自分で関数を作っていくと、jQueryと同じものを作ることになる
しかも、自分で作ったものは、jQueryよりも質が悪いから、
jQueryを使った方がよい、という結論になるw わかっててあえてやる車輪の再開発は楽しいし勉強になるけどな
仕事ではぐっとこらえないとあかん jQueryのように「セレクタで取ってきたリストに一括して処理する」という
関数型チックな設計で再開発するとjQueryがよくできてるのがわかるよね。 >>143>>144
返信遅れてすみません
やってみたらできました！
親要素ってなんでもいいんですね、勘違いしてました…
本当にありがとうございました！ JavaScriptを学び始めて１週間程度の初心者です。<br>
この春、集中的に学ぼうと思うのですが、何を中間目標にすべきなのでしょうか？<br>
HTMLとCSSはそれなりに使えます。 jQuery, jQuery UI, jQuery Mobile http://itpro.nikkeibp.co.jp/atcl/idg/14/481709/030700305/?ST=cio-appli&;P=2
> また、ECMAScript 2015仕様のJavaScriptには「let」ステートメントと「var」
> ステートメントの両方があるが、両方は必要ないとCrockford氏は述べた。
> varは関数レベルで変数を宣言し、letはブロックレベルで宣言する。
> Crockford氏は、varはJavaプログラマーを困惑させるとの理由から、letの方を好む。
> また、constステートメントを好む。constは、letと同様にブロックレベルだが、代入ができない。
babel使ったらすぐにconst使えるで var str = '"ttp://〜"';
テスト用文字列の中に、大量の「ttp://〜」がある時、
// がコメントに解釈されて困っています。
たぶん、/* があっても困るでしょう
JSには、ヒアドキュメントも無いので、どうすれば？
別の文字に置換すると、テストにはならないし
ファイルから読み込ませれば、良いのかな？
でも、Edgeで出来ますか？ >>158
自己レス。漏れの勘違いでした
var str = '"ttp://〜"';
こう書いても、// はコメント扱いにはならなかった。
ちゃんと、変数に読み込めた 全くの初心者ですみません
javascriptを始めたいのですが開発環境など調べてもわからないことが多く、
おすすめの開発環境を教えていただきたいのですが 個人的なおすすめはVSCodeだけど
まずはメモ帳とブラウザで遊んで見ることから始めてみると良い
ブラウザの開発者ツールを開きながら弄ってみて
https://jsfiddle.net/9qLv6j66/ jsで巨大なデータを読み込むと停止したような状態になるけど、ブラウザによって変化するものなの？ >>164
ブラウザによって変化するものではない
あまりに巨大ならフレームこさえてその中で読むといい このスレは重複スレで本スレは「プログラム板」に移行したから人がいないよ
>>164はscript要素でhoge.jsを読み込んでいるのか、jsコード内でXHRやfetchを使ってデータを読み込んでいるのか(コードを書く)を書いて移行先で質問すると良いかと
JavaScript の質問用スレッド vol.122
http://echo.2ch.net/test/read.cgi/tech/1472426483/ ありがとうございます。
jsでAjax型、PHP経由4096BITSの暗号化データを読み込んだあとに複合化を行いjson形式にもどしたいのだけれども。
暗号化データが96〜512ギガとあまりにも巨大で半分諦めています。
何か良い方法があれば良いのですが・・ だから、このスレには人がいないと言ってるんだけどね >96〜512ギガ
こんな大きなデータは、無理だろ。
そもそも、メモリが4GBぐらいしかないから、スワップしてHDDに読み込むのか？ >>168
4096Bitずつ読み出しながら変換かければ。
変換した後に何をするかよって対応が異なる。
特定のデータを探したいならデータを捨てればいいけど >>172
スライスで読み込むと途中で止まります。
読み込み、復号化、保存、をこまめにやろうが、処理後のデータを捨てようが開放しようがダメでした。
完全に詰んだ状態です。 さすがにjsじゃ無理だろ
メモリ管理をほぼ自力で制御できる言語じゃないと無理っぽいが >>173
止まったところからやり直せばいいじゃん
range指定して読み込め WEB+DB vol.97 の特集が、React
WEB+DB vol.94 の特集が、Kotlin, Electron サイト内でCTRL＋Cやメニュー等からコピーを選択したときに、それを常時監視して何をコピーしたのか把握をしたいと考えています。
コピーキーの発火タイミングやコントロール及びコピーされたものをAES等で暗号化してからAjaxでサーバーに吐き出す処理を行うことはjsだけで可能でしょうか？ 把握したいだけなら選択状態に関するイベを監視してればよくね？ >>175
>>172
ファイルはバイナリスライスで均等にチョン切ってから読み出し、ブロブやb64にしてゴニョゴニョすしてクリアできました。
あとは暗号化でBITSの高いものはjsだと負荷かかりすぎて現実的に難しいみたいです。
何か方法がないものか。 分割処理でローカルストレージみたいに一時的に保存するなら処理できるはず
ただしjsで巨大なファイルを分割できても結合は不向きな
PHPに渡してやるのが手っ取り早い importとかincludeみたいなのをかっこよく書きたい
jqueryとか使えばかっこよく書ける？ importとかincludeって、DOMと関係ないじゃないｗ かっこ良く書くのは良いけど、数行の記述でもJQ読み込ませるゆとりみたいにはなるなよ。 javascriptってオブジェクトを破棄(DELETE)する命令って無いよね？
そのオブジェクトに関する参照を全て切っていくしか破棄の手段は無いって認識であってる？ >>190
結局、変数の寿命をなるだけ短くしていくのが一番良いよね あれ、なかったっけ？
実際に破棄しているかどうかはともかく、明示的にプロパティを削除するメソッドがなかった？ >>190
> そのオブジェクトに関する参照を全て切っていくしか破棄の手段は無いって認識であってる？
つまり、そのオブジェクトを参照している人がいるのに、そのオブジェクトを削除したいってこと？ >>192
プロパティを削除する命令はあるけど、KEYを削除するだけでVALUEの実態が削除されるわけじゃないね
>>193
オブジェクトを明示的に削除することによって、それらを(別の箇所から)参照してたものにNullが入るような動作は無理なのかなと思って var a = 配列
ここで、a を使って処理する
a = null;
こういうように、null を代入しているような、ソースコードを見た事がない。
こう書いても書かなくても、たぶん、同じように処理されるのだろう
つまり、書いた次の行では、解放されない。
関数(スコープ)を出た所以降で、解放されるのかも？
まあ、そもそも実装の話だし、ソースコード・言語で、どうこう出来ない >>196
＞null を代入しているような、ソースコードを見た事がない。
javaだと割としょっちゅう見たよねこれ懐かしい >>196
nullなりなんなりで参照を解かないとオブジェクトが削除されないじゃん
関数内での一次的なものでスコープ外れて自動的に参照もとろも無くなるケースばかりじゃないでしょ いや、そんなケースばかりだよ
例えば死なないクロージャがどんどんできていく状況なら
変数より先にそのクロージャをどうにかしないといけない
グローバル変数に溜まっていくことも稀
大きなblobはnullを入れても明示的/暗黙的にblobURL化されていたりして
リークして困ることが実際は多い >>194
オブジェクトを明示的に削除して参照が勝手にnullになるような言語ってどんなの？ >>200
一言で言えばバグだよね？
バグなら、バグの大本を修正すれば良いのでは？
バグが有るんだからnullにした所で
メモリリークを防げるだけで、
nullにアクセスした時点で落ちるでしょ fetchで取得したhtmlをxpathでいじりたくてDOMParserに渡したのですが
どうも<img src=画像>とかを読み込んでみたいなんですけどこれを止める方法ってありますか? >>202
殆どの場合はメソッドを呼ぶ行為でリークするからnullにするとか関係ない
それに別に仕様で決まっているわけでもないからバグとも言い切れない
改善に改善を重ねたDOMでは極一部の極端なケースで、
逆に参照が残ってるのに削除されるようなアルゴリズムが採用されてるしな
幾つもの言語や階層をまたがって、パフォーマンスも維持するためには完璧は不可能なんだよ >>205
意味がわからん。
参照が残ってるってことは
メソッド呼び出しする可能性があるということだぞ
お前のバグで、メソッド呼び出すことがないのだろうが、
お前のバグのことなんか言語は知らんってｗ 幾つかのブラウザでBlobを扱うAPIのメソッドはメモリリークを起こすが、
その実装はバクと言い切れず仕方ない面もあるという話をしてるんだけど、
まだわからないか? >>207
そのバグをJavaScriptのコードで修正できるわけがないじゃん。
JavaScriptのコードで修正しようと思っても出来ないからこそ
バグなんだから。 >>208
そうだね。
で、何が言いたいかって言うと、メモリリークで実際頭悩ませるのは
こういうバグチックなことのほうが多いってこと。
例えどんなコードでも不要になったらnullを代入を徹底するようにしても、
その労力に見合う程の効果があるか疑問ってこと。
経験上、こういう細かな１行で解決できることは少ない。
バグにしろ、アルゴリズムの不備にしろ、小さくはあるけど、
ヘルパー関数レベルで別手段に書き換えて対処する事が最も多い。 >>206
参照先でそれがnullかオブジェクトかを判断してメソッド呼べばいいじゃん
有れば使う、無ければ使わないって実装だってあるでしょ >>210
メソッドを呼んでなにかの処理をしたい場面で、
そのメソッドを呼ばなくて、正しく動くわけがないだろ
アホなのかな？ >>211
「何かの処理をしたい場面で」したい場面ってなに？プログラムに意思なんてないでしょう
プログラムにしたがって処理をして、処理対象が無ければ処理をしないなんてごく普通のことだとおもうけど
絶対にそれがあるという前提でプログラムしているなら無ければ困るケースが起こるだろうけどね
君は想像力ゼロなのかい？ >>212
> 処理対象が無ければ処理をしないなんてごく普通のことだとおもうけど
場合によるだろ
想定外の事態なのだから通常はエラーにするほうが正しい。
なんでそんなこともわからんのだ？ >想定外の事態なのだから通常はエラーにするほうが正しい。
なぜ想定外の事態だと決め付けるのかな？
そして「処理をしない」＝何もしないとなぜ脳内で決め付けるのかな？
処理対象がない->処理をしない(出来ない)->エラー処理or別の処理
ケースは色々あるでしょうに
きみまともなプログラムした事ない人でしょ？ ないかもしれない場面で、ない事を確認して処理を変えるのは正しい
正しく動いていればないことはありえない場面で、ない事を確認して処理を変えるのは間違いで、例外を投げるのが正しい
今は後者の話をしているので、例外を投げる以外の選択肢はない、と言いたいのでは？ >「正しく動いていればないことはありえない場面で、ない事を確認して処理を変えるのは間違いで」
まだ決め付けてるの？だれも最初からそんな事言ってないんだけどね
君が勝手に「自分の想定」を加えてわけのわからない断定をしてるだけでしょう >「今は後者の話をしているので、例外を投げる以外の選択肢はない、と言いたいのでは？」
勝手に後者の前提で話を始めたのは誰かな？
そしてさ、君プログラムわかってる？
例外、例外というが、その例外はどうするの？まさか投げっぱなしでプログラムをとめるの？
開発中ならともかく普通はその例外をキャッチして相応の処理なり表示なりするでしょう？
状況によってはロールバック的な処理は当然必要だよね
わかるかい？要するにこれって状況に応じて別の処理をしてるんだよ
例外はその検出手段にすぎない
君、大きな勘違いしているようだけどIF文で戻りをチェックすることと例外を出す事は本質的には変わらないんだよ
それをどのレイやでキャッチするか、その手法の違いなんだよ また自分より下を作ろうと必死なやつわいてるのかよ。 >>218
話がずれてるぞｗ
バグでメモリが解放されないものを
無理やり解放する方法（そんなものはないけど）を
使って解放した所で、お前のバグは治らないって話だ。
単にお前のバグが見つけづらくなるだけの話
例外で何もしなければ、例外は起きてないと主張しているのと一緒 バグでメモリが開放されないのは良くあるし、
無理やり開放する方法は稀だが、ちょっと手間をかけて回避する方法ならあることも多いよ。 >>222
バグはイレギュラーな存在なので、
そのイレギュラーなものに汎用的に対応できる方法などない
回避策はバグ次第なのだから、通常のメモリ解放処理でメモリリークするものが
強制的に解放する方法（そんなものないが）で動くとも思えない
そんなものを用意したら新たなバグを増やすだけ >>221
あれ？草まで生やして必死に話を逸らして何がしたいんだい？
「例外＝別の処理をしない」って件を早く釈明しなよ
だいじょうぶ？ >「例外で何もしなければ、例外は起きてないと主張しているのと一緒 」
例外で何もしないっていう主張をしてるのは君でしょう？
例外をハンドリングして通常とは別の処理をするという考えすら頭になかったレスしかしてないじゃん
で？
「例外＝別の処理をしない」って件を早く釈明しなよ
まだかな？ しかし、このバグバグと連呼してるアレな人は本当にプログラムの基本すらわかってない様子だね
彼いわく、
「参照がある＝処理できるべき！」
「参照先の確認をして別の処理をするのは不要！」
「例外だせばいい！」
だもんなぁ
そもそもプログラムなんて全が自分のプログラムの範囲で値が確証されているものだけじゃないのにね
ファイルや通信、その他もろもろ不確定要素なんてあるのが当たり前なのに
実行前に確認or例外をキャッチして別処理なんてごく普通のことじゃん
だいたい、参照がある＝処理できて当たり前って考えがそもそもおかしい
参照だけ残ってても中身が変化してれば意味無いのにね
ライブラリ開発とかしたことないんだろうな Tue Apr 11 01:05:14 +0000 2017
すいませんこの文字列を日本時間に直したいのですがどうすればいいでしょうか Tue Apr 11 01:05:14 +0000 2017
こういうフォーマットから、日時オブジェクトを作成するのは、ブラウザ依存じゃないの？
たぶん、全社共通のフォーマットというのは無い >>231
ISOいくつなん？
RFC822っぽいけど惜しいね >>232
ISO8601。あ、俺が言ってるのは、全社共通フォーマットはあるよ、って話。 >>233
そういう意味か
Tでつなげるの大嫌いなんだけど、あれ策定したやつ誰なん？
ちょっとみんなの前でドゲザさせたいわ 土下座するのはお前
たくさん種類がある空白を使わなくていいように
あえてそうしてることくらい分かるだろ 俺ならこうするかな？
2017-04-01@12:00:00$
2017-04-01@12:00:00+09:00$
もしくはこういう形なら統一感あっていいかも
D2017-04-01T12:00:00Z
D2017-04-01T12:00:00+09:00Z
>>235
おまえはばかだなぁ またやってるのかよ。
質問者に正解の答えもしくは誘導できたらそれで終了のスレで自分より無能な下を作ろうと必死なやつはワッチョイ隔離スレでやってくれ。 ・質問への「答え」だけでなく「意見」を出しても良い。 漏れは、2chの日時表示から、正規表現で、Date型へ変換した
var str = "2016/09/09(土) 09:00:08.09 ";
var re = /(\d+)\/(\d+)\/(\d+)/; // 日付
var ary = str.match(re);
var re2 = /(\d+):(\d+):(\d+)\.(\d+)/; // 時刻
var ary2 = str.match(re2);
// Date 型へ変換する。
// ary[2]は、-1。ary2[4]は、10倍
var dt = new Date(ary[1], parseInt(ary[2]) - 1, ary[3],
ary2[1], ary2[2], ary2[3], parseInt(ary2[4]) * 10);
console.log(ary, '\n', ary2, '\n', dt, '\n',
dt.getMilliseconds() + "ミリ秒");
出力
Fri Sep 09 2016 09:00:08 GMT+0900 (東京 (標準時))
何かのライブラリに、変換できる関数があるかも？
無ければ自分で作る。
jQuery UI にも、DatePicker というのがある JavaScriptで日付用ライブラリとして有名なのはmoment >>237
何度も書いてるが意味わからんよそれ
誰かの発言で上下が変わったり無能になったりする訳でもないし
本当に無能だと思えば取り合わないだけでしょう @と$は本質的に全く変わってないじゃん。
頭にDは無駄。
Tは、Tまで読み飛ばすシーンがあるから必要なのであって、先頭文字は必要ない。
時刻Zは時刻+00:00の糖衣構文だから、09:00Zはありえない。
なんでこうなったかを考えない奴居るんだな >>242
なんでTにしたん
もっと違う記号あったやろ
アンダーラインとかでもええのに
なんでTにしたん >>243
SQLでいちいちワイルドカードになったら嫌じゃない？
標準式の方(‐:なし)で時刻だけもらった時に、20時17分で有ることを担保するために、時刻だけには印ついててほしいもわかるし。
日付表記みたいにWとか新しい形が出てこないと限らないから、有意な文字を当てるのは変じゃないと思う >>242
TimeだからTなんじゃない？
逆にTではまずい理由も特にない
「分かりにくい」って単に慣れの問題だし、Zも終端子としては分かりやすい
英語圏にとってはアルファベットが親しみやすいんだろうよ
慣れろ 教則本を取り組みながら勉強中の超初心者なんですが、
update（メソッド？）というのが何の説明もなく唐突に出てきて、
検索しても出てこないので意味が分かりません。
どういう意味ですか？ function push() {
var v = Math.floor(Math.random() * 10);
var r = data.push(v);
update(r);
}
という感じです すみません、解決しました
普通に読み進めていったらupdate関数が定義されていました； >>253
細かい説明は後からどんどん付け足していくのが英語文化、というのを覚えておくといいかもな 随分と優しい説明だな。
ここは特殊な2ちゃんスレなのだから、もっと屑扱いしてやらんと育たんぞ。 そりゃマサカリもただじゃないからな
投げてやる相手くらいは選ぶさ 学生のとき作った認証関連の某自作ライブラリが10万DLこえたのに驚愕
まあ海外からの評価が異様に高いのが人気に繋がったのか・・
まだ一度も突破テスト等で破られてないみたいのが奇跡 自信があるならグーグルやマイクロソフトに売り込んでみよう
結果はここで報告してくれよな >>258
すげーじゃないか。ここで晒してみてよ。 minifyとかコンパイルとか一般的になって来てるなら、
もうバイナリにコンパイルしちゃえば？
という気もするのですが、世界がそうならないのは何故ですか？ >>262
重要なのは互換性。
今までのものが今まで通り動くことだから。
バイナリにコンパイルして動かなくなったら
意味はない それがWebAssemblyじゃないの。
でもあれって直接DOM操作はできないんだっけ ま、まあ、コンパイル済のJavaアプレットは残念な出来栄えだったしなあ… オブジェクトのディープコピーを簡単にする方法でおすすめ教えて？ jquery.extend() に、deep を指定する >>269
それだと変数以外の情報全部失われるでしょ
>>270
それだとjqueryじゃない環境で動かないでしょ もう今更話すことでもないでしょ。この部分は昔から進歩がないんだから。
長年ESコミュニティで提案されているStructure Cloneが実るまではね。
ただこれに近い非同期版がDOM仕様にあるので、非同期で良い場合はMessageChannelを使う
同期が良ければぶっちゃけワンライナーで簡単なのはJSON、
ちょっと手を加えてObject.assignを使えば簡潔な関数を作ることも可能
どれも一長一短があるので好きにしたら良い DOMからエスケープ前の文字列を取得したいんですが
具体的には©のような文字列です。その場合ってどうすればいいんでしょう
Node.nodeValueだとエスケープ後の文字列になっちゃいます >>273
innerHTML or XMLHttpRequest or fetch >>268
> オブジェクトのディープコピーを簡単にする方法でおすすめ教えて？
JavaScript標準でやれないことをやりたくなった時が
ライブラリを導入するべき時だよ
例えばlodashを使う
https://lodash.com/docs/4.17.4#cloneDeep ライブラリ導入したくないなら必要な部分だけパクってこい その必要な部分だけを取ってくる方法が
lodashのカスタムビルドである
https://lodash.com/custom-builds JavaScriptとcssって再利用しにくいよね
ライブラリAがjQuery1.xに依存
ライブラリBがjQuery3.xに依存
でもAB同時に使いたい
とか
名前空間サポート無いせいでjs classやcss classが被ったり > ライブラリAがjQuery1.xに依存
> ライブラリBがjQuery3.xに依存
> でもAB同時に使いたい
いや、JavaScriptにかぎらず、
それができる言語を知りたいぐらいなんだが？ > 名前空間サポート無いせいでjs classやcss classが被ったり
AngularやReactなんかではscoped cssが使えるから
かぶることもない >>282
他の言語知らないやつ多すぎだよな。まあ許してやれ。 他の言語知っているのなら、他の言語の例を言うようにｗ 1画面内でバージョンの異なるjQueryを共存させるには
http://rei19.hatenablog.com/entry/2013/03/25/000818
$が、1.9.0 で、$132が、1.3.2
var $132 = $.noConflict(true);
(function($){
// ライブラリ本体のjavascript・・・
})($132)
Underscore.js でも、_ を別名にできる 初心者です。テーブルでA1はHTML内で5に指定、A2に<input type ="number" value ="1">があって、A1セルとA2セルを足したい場合
rowsとcellsで指定するとA2がNaNになり結果が5NaNになるんですがどうしたらいいですか？
この場合inputの初期値0は効かないのでしょうか？A2をparseIntで囲ってもだめでした NAN は、数字ではないって事
ソースコードを書いてから、質問してくれ。
ソースコードが長い場合は、JSFiddle などに貼ってくれ わかりにくくてすみません。レスありがとうございます
ツールの使い方がわからず、ボタンを押しても反応がないですが、、
個々のファイルにしてブラウザで確認するとgoukei=6になります
最終的にjqueryのblurとかでinputの値が変更されたら該当列全ての値を足して一番下に表示させるのが目標です
https://jsfiddle.net/itioku/Ldvn08jL/ >>280
つーかnpm使ってれば自然にそうなるでしょ？
npmで外部パッケージ化すればいい。
外に公開しなくてもnpm linkすればいい >>288-290
F12開発者ツールを起動して、1行ずつデバッグするとか、変数をwatchすれば？
それか、あちこちに、console.log() を書いて、どこでおかしくなるのか、変数を見る >>290
そりゃセルの中に要素作ってるんだから考えてやらないと
値とるだけなら
table.rows[4].cells[4].innerText
↓
table.rows[4].cells[4].firstChild.firstChild.value
でとりあえず取れるけど 出力が全部stringだとわかっている時
改行有りのテキストの出力時に""がつくと微妙に先頭がずれます
"を無くして表示したいのですが可能でしょうか >>295 訂正
console.logでconsole画面に
を忘れていました よくよく調べたらchromeだと"は付きませんでした
firefoxだと例えば
console.log("あ\nい\nう\nえ\nお");
とすると
"あ
い
う
え
お"
と出力されます
もう諦めてchrome使うことにしますお騒がせしました >>293
教えていただいた方法で実現できました！ありがとうございました
＞そりゃセルの中に要素作ってるんだから考えてやらないと
これからもめっちゃ役に立ちそうです！ >>299
イベントハンドラはHTMLに書いたら動かないって事でしょうか？
今のところはjsfiddleが動かなくて困る事はないですが、心にとめておきます
数値取得方法もそんなやり方もあるのですねありがとうございます！ 初心者です
オンクリック属性について教えていただきたいです
//=====================================
var arr =["A","B","C","D","E"];
var element =document.getElementById("testBox");
for(var i=0; i<arr.length; i++)
{
var span =document.createElement("span");
var str = arr[i];
span.onclick= function(){alert(str);};
element.appendChild(span);
span.textContent = arr[i];
}
//=====================================
クリックするとそれぞれの配列の内容が表示されるようにしたいのですが、どれを押しても配列最後の文字列が表示されてしまいます
どこを直したらいいでしょうか
よろしくお願いします jsでhtmlを生成
オンクリックをforで動的に変更生成させてやってみれ
短く早くかけるぞ >>302
ありがとうございます
軽く検索してみましたが、初心者過ぎて回答の内容が理解できませんでした
せっかくレス下さったのにすみません
回答いただいた内容でもう一回調べてきます >>302
多分教えていただいたこととは違うと思うんですけど、分けたらできました
ありがとうございました
//=====================================
var arr =["A","B","C","D","E"];
var element =document.getElementById("testBox");
for(var i=0; i<arr.length; i++)
{TestFunc(arr[i]);}
function TestFunc(value)
{
var span =document.createElement("span");
span.onclick= function(){alert(value);};
element.appendChild(span);
span.textContent = value;
} >>304
できたら取りあえずはそれで良しだがその書き方なんとかしろよw
もっと簡潔にすっきり記述できるよう努力しなさい。 >>305
はい
もう少しｊｓの理解が進んだら、記述の簡略化も調べてみます
アドバイスありがとうございました function onSpanClick(event) {
alert(this.textContent);
}
function createSpan(value) {
var span = document.createElement("span");
span.textContent = value;
span.onclick = onSpanClick;
return span;
}
var a = [...];
var element = document.getElementById("...");
a.map(x => createSpan(x))
.forEach(x => element.appendChild(x));
模範解答な 初心者と言えど、しかしまあ汚い記述だ。
まるで漢字を使わずに平仮名で書いた作文だぞこれ。
jq使いのドダスゲー小僧よりマシだとは思うけど・・・ >>308
先生の解答待ってますよ
まあろくなもんが出て来ないだろうけど 無駄に関数作るな。これが本当の模範解答な
function onSpanClick(event) {
alert(this.textContent);
}
let a = [...];
let element = document.getElementById('...');
for (let x of a) {
let span = document.createElement('span');
span.textContent = value;
span.addEventListener('click', onSpanClick);
element.appendChild(span);
} 少しミスってたので修正
function onSpanClick(event) {
alert(this.textContent);
}
let arr =["A","B","C","D","E"];
let element = document.getElementById('testBox');
for (let value of arr) {
let span = document.createElement('span');
span.textContent = value;
span.addEventListener('click', onSpanClick);
element.appendChild(span);
}
そしてjQuery版
function onSpanClick(event) {
alert(this.textContent);
}
let arr =["A","B","C","D","E"];
let element = $('#testBox');
for (let value of arr) {
let span = $('<span>').text(value).click(onSpanClick);
element.append(span);
} jQuery版を少し改良
$(document).on('click', '#testBox span', function (event) {
alert(this.textContent);
});
let arr =["A","B","C","D","E"];
for (let value of arr) {
$('#testBox').append($('<span>').text(value));
} 更にw
$(document).on('click', '#testBox span', function (event) {
alert(this.textContent);
});
let arr =["A","B","C","D","E"];
$('#testBox').append(arr.map(v => $('<span>').text(v))); もちろんこれでも良い
let arr =["A","B","C","D","E"];
$('#testBox').append(arr.map(v => $('<span>').text(v).click(function() {
alert(this.textContent);
}))); >>307 >>311-315
コピペしました
これらを参考に、いずれは簡便な方法での書き換えもやってみたいと思います
自分で調べただけでは目に留まらなかったやり方が知れて嬉しいです
ありがとうございました
しつこくでてきてすみません
お礼言いたかっただけなのでこれで消えます ここにいる連中は煽りと自分より下を作り出すのには必死なカスばかりだけど根は親切 >>316
jq読ませないと動かないことは知ってるよな？w まだ自分も模範解答が暗号にしかみえない初心者だけどすごいな！先輩すげーっす >>314
いかにもweb屋って感じの現代アートだな
保守性を重視するサーバーサイドの人間から見たら吐き気がするよ
jQueryつかって短くなんて正直なところ誰にでもできるんだよでもそれは目指すべきところじゃない
アドバイスするけどまずは処理に名前をつけるという基本から学んでみるといい
SOLIDな美しいプログラムへの最初の一歩だ >>320
jq使いはコピペPGばかりだしなw
人の書いたPGをいかに早く見つけて書き直すかが仕事のできる指標となる。 >>320
> アドバイスするけどまずは処理に名前をつけるという基本から学んでみるといい
こうですかな？（ニヤニヤ
function onSpanClick(event) {
alert(this.textContent);
}
function createSpan(value) {
return $('<span>').text(v).click(onSpanClick);
}
let arr =["A","B","C","D","E"];
$('#testBox').append(arr.map(v => createSpan(v));
関数に分けるなんて誰にでもできることをやってさーせんｗ
超かんたんっすねーｗｗｗ 素晴らしい!
昔はこの手の向上心溢れる香ばしい若者が常にスレにいて
盛り上げてくれてたんだよ! ちなみに今のトレンドは極力jqueryに頼らないってことですよね。 >>326
それね、jQueryの代わりにAngulerやReactを使おうって話であって
単純にjQueryをやめましょうって話じゃないんだよ
AngulerやReactは導入と学習コストが
数十倍かかるから簡単なアプリには向かない
AngulerやReactを使うとDOM APIがほぼ不要になる。
jQueryでもほぼ不要。だからDOM APIは
どうしても必要って所でだけ使えばいいよ
あとはAngulerやReactを導入するメリットが
コストを上回れば導入すればいいし
そうでなければjQueryがよい 標準のdomが提供するapiで要件を満たせるからいちいちjqueryを導入する必要ないって話 >>328
各ブラウザのバグ対策やってる？
Andriodとかの。
Angulerでも最終的にはDOM APIが使われているわけで、
要件を満たせるかどうかしか考えないのなら
何もいらないってことになる。
どんなプロジェクトにも隠れた要件として
少ないコストで開発するというのが入っている。
そこまで考えよう。
そうすると大規模以外jQueryが適切と言うことになる >>323
そうだ
その調子で頑張れ
脱初心者ももうすぐだ
ウェブ屋ってこういう基礎の基礎もまともにできない人ばかりだから(これは本当に酷い状況)
そういう人たちに比べると君は確実に一歩先に進んでるよ UIは寿命が短いから使い捨てるのが常識だろ
保守性とかどうでもよくて短く速く書ける奴が正義 誰かが書いたコードの関数名をパクってみたけど、
やっぱり>>323は無駄すぎだね
これが関数に分ける場合の最適解かな。
function createSpan(value) {
return $('<span>').text(v).click(function() {
alert(value);
});
}
let arr =["A","B","C","D","E"];
$('#testBox').append(arr.map(v => createSpan(v));
ただcreateSpanという名前は良くない。
中の実装がspanじゃなくなったらどうするの？という話
textBoxという名前に合わせて、こっちも適切な名前にするべきだろう。
またこの実装は、画面に表示されるテキストと実際の値を分けることが
できるというメリットが有る。
あと書いてなかったけど>>314にもメリットはあってイベントハンドラが一つだから
（この程度じゃ大差ないだろうけど）軽いというのと、動的にspanが増えたときでも
新たにイベントハンドラを作成しなくてすむ >>330
俺jQueryもAngularもlodashもbabelも使えるんで
初心者に見えないのは当然だと思うよｗ >>331
> UIは寿命が短いから使い捨てるのが常識だろ
ほんとこれなｗ
http://anond.hatelabo.jp/20170501085956
> しかし、どれほど技術が移り変われど変わらないものもある。
>
> あなたがクソと罵り選択肢からも除外されたjQueryである。
> 一年後の未来であってもjQueryはそこにあった。もちろんクソと野次られながら。
>
> クソレガシーこと枯れた技術の利点はそこにある。
Backbone.jsは手伝った程度だがあっさり消えてくれた。
Angularは1と2でぜんぜん違うものだった（どっちもやった）
RequreJSはやったがすぐにwebpackに変わった。
そのwebpackも2になってまた少し違うものになった。
gruntはやったがgruntと何かのライブラリをくっつける
gruntプラグインが全然メンテされずで余計な複雑度を入れるだけだった
（すぐにnpm runを使った方法に乗り換えた。世間も俺と同じ流れを辿ってくれた）
そういった中、jQueryは昔からずっと変わらず。シンプルで便利な存在だった。
一部のアプリはjQueryでは荷が重いのはわかるが、大抵のウェブサイトはjQueryで十分だよ。
画面はUIは原則HTMLとCSSで作るものだ。JavaScriptはそれを支える脇役でいい >>332
実際にはcreateSpanにはその画面によりふさわしい名前がつくだろう
お題が本質的に意味のない練習コードだからそういう名前がついただけ
それとイベントをアドホックな匿名関数で誤魔化すのは良くない
GUIで処理の起点になるイベントが匿名というのは読む人を混乱に陥れる
もしそれが深くネストしたブロックにあるならば最悪だ >>333
その発言自体が君の初心者臭を生き生きと表現しているね
高級なスポーツ用品を揃えて、調子に乗ってしまうタイプのデブが同僚にいるんだが、なんというかまあ、そんな感じだな
まずは基礎体力を付けたまえ >>336
ん？ なんならC/C++、Ruby、Pythonなんかも使えると言ってもいいけど？
というか言語を使えることは当たり前の話だけど。
俺が得意なのは大規模アプリの設計。
何をもって初心者と思ったのか、俺の発言の一部だけを見て判断しないよにね。 >>335
> それとイベントをアドホックな匿名関数で誤魔化すのは良くない
なぜ？ 納得ができる説明があんたにできるのかな？
俺が思うからそうなんだ〜じゃなくてね。 >>338
まずはレスをしっかりと読もう
読解力も立つ初心者には必要な力だよ >>337
強がらなくていいよ
君の書いたコードスニペットを見ればだいたい察しはつくからね jqソースの解答は他所でやれよ。
ここはjsのスレでライブラリ、パッケージを読み込まないと使えないjpはすれ違いだぞ ここの質問を移動する意味は無いだろ
つーか質問者が感謝してるんだからそれでいいだろ >>327
>AngulerやReactを使うとDOM APIがほぼ不要になる。
それってHTMLコードもほぼ不要になる？ >>346
ならんよｗ
まあ正確に言うと、拡張されたHTMLやHTMLっぽい何かを使うから、
純粋なHTMLではない＝HTMLを使っていないと言えなくもないが。
俺はjQueryを使っていても、DOMツリーを組み立てなくても
HTMLからそのままDOMツリーを生成したほうが楽だと思っていて
基本はHTML側に書くのだけれど、汎用のダイアログとかはJavaScriptに
直接HTMLを書いていたね。
それと同じでUIを作るのはHTMLが一番効率がいいよ
そこを変えようとは思わないほうが良い ここもわっちょいありのプログラムjsスレみたいに変えないとダメかもな 何のためにスレが分けてあるのか理解できない池沼なんだろ >>346-348
AngularJS は宣言型。
繰り返す要素を、ng-repeat で宣言できる
<要素 ng-repeat="{repeat_expression}">
処理
</要素>
articles はコレクションで、article は展開される各要素。
これで、すべての要素を展開できる
<tr ng-repeat="article in articles">
<td>{{article.author}}</td>
</tr> というか、そもそもHTMLやCSS自体が宣言型やねんｗ javascriptに関するブラウザの質問なのですが
chromeでjsshellという拡張機能を使いjqueryスクリプトで特定のページの要素とかをhideしています
それで一応hideして消すことはできたのですが
問題はそのページを更新した時に一瞬だけチラッとだけ表示されてそのあとhideされます
たぶんページを読み込んでからそのjqueryのスクリプトを実行していると思うのですが
hideされた後にページを表示するとか
そういうチラって見えなくなる方法ありますか？困ってます教えてください >>354
結論から言うとStylishを使ったほうが良いだろう。
JavaScriptで一瞬の表示もさせずに特定の要素を消すならば、
HTMLの<head>や<body>等の最初あたりでコードを実行しなければダメだ。
DOMが完成してからであればどうしても一瞬表示されてしまう。
jsshellがDOMが完成する前のタイミングでコードを実行できるかは知らないが、
Greasemonkeyの互換であるTampermonkeyでは対応している。
だがページの最初の方でコードで実行することが出来たとして、
そのコードが実行された後に登場する要素を一瞬の表示もなく消すのは大変だ。
一番ラクな方法はCSSを使う方法だろう。JavaScriptで要素を消すためのCSSを出力する。
だが、そんなことをするぐらいなら、Stylishを使えばいい。
特定のページごとに自分が指定したCSSを適用してくれる。 >>355
ありがとうございます
Stylishとう言うのを調べてみようかと思います
しかしCSSではループとか配列みたいなことができないと思うのですができるのでしょうか？
やりたいことは
こういう配信履歴から特定ユーザーを表示しないようにするのですが
http://livetube.cc/tag.%E9%9B%91%E8%AB%87
hoge=$("#contentBox > div > div > table > tbody > tr");
hoge.each(function(){
var txt=this.children[4].innerText;
if(txt.match(/非表示したい名前/)){
$(this).hide();
}
});
配信履歴は静的なページなので後から要素が追加されなさそうなのでTampermonkeyを調べてみます
これも候補にあったのですが敷居が高そうなので試してませんでした >>357
何がしたいのかわからんが、監視はMutationObserverでできる >>358
そんなのがあったんですか
javascriptのintervalでずっとループさせてました
それがCPUとか使って重かったので困ってました
MutationObserverって試してみます
ありがとうございました
動的に追加されたコメントが表示されないようにですね 今、Tampermonkeyで試したのですが
実行のタイミングをdocument-bodyにしたのですが消えませんでした
document-endでは消えます
しかしjsshellと同じくチラッと見えてしまいます
http://livetube.cc/tag.%E9%9B%91%E8%AB%87
hoge=$("#contentBox > div > div > table > tbody > tr");
hoge.each(function(){
var txt=this.children[4].innerText;
if(txt.match(/非表示したい名前/)){
$(this).hide();
}
}); 自己解決しました
tbodyをdisplay:noneにして
さっきのコードの後に$('tbody').fadeIn("slow");とやったら
気にならなくなりました JavaScriptのjquery記述に関する質問は専用スレがあるよ
また変なのわいてるの？ 国旗限定のjpg画像を認識するライブラリー作ってるんだけどファイルが巨大になりすぎて行き詰まった。 >>365
今やるなら畳み込みニューラルネット一択だと思うよ
サイズも極めて小さくて済む 正規表現リテラルでURLを書く時に / をエスケープせずにする方法ってありませんか? >>370
おまいの説明だけだとﾊﾟﾀｰﾝありすぎて回答にこまる
失敗した記述を載せれ /http:\/\/aaaaaaa\.com\/\d\/(\d*)\// 送信してしまいました
↑のようなURLから数値を取り出したい時にとても見辛いので / のエスケープだけでも無くならないかなと new RegExp と String.raw の相性が割と良かった
http://qiita.com/liburari/items/65c1395bd856fb37192e
ES2015（ES6）で、テンプレートリテラルが加わると同時に、
文字列をエスケープせず、そのまま扱うための仕組みも加わりました >>373
正規表現使うということはエスケープは必須 >>374
単純な文字列だと"http://aa\\.com"
rawだと String.raw`http://aa\.com` まで綺麗になるってことですね
ありがとうございましたm(__)m
>>375
/ は正規表現じゃなくて phpだと /http/ を |http| とかに変えられるのでそこまで見辛くはないんです >>376
phpの話はよそでやれよ。
ここはjsすれだぞ。 じゃあPHPを抜いてやろうｗ
/ は正規表現じゃなくて /http/ を |http| とかに変えられればそこまで見辛くはないんです 正規表現のことを話してるやつと別なはなしをしてるやつがいてﾜﾛﾀ JavaScriptには型はないのですか？
↑
C言語の話ではない。
JavaScriptにはC言語みたいな型はないのですか？
↑
これもC言語の話ではない。
JavaScriptにはPHPみたいな正規表現のエスケープ文字を変える方法ないのですか？
↑
むきー！ここはJSのスレだ！PHPの話すんな！←基地外 newRegExp( オレオレ形式の見やすい正規表現){
return new RegExp( オレオレ形式を JS 正規表現に変換した結果 )
}
みたいな関数でも作っとく / でくくるから / にエスケープが必要になるんでしょ
/ 以外でくくればいいじゃん コピペPGには正規表現は酷
プログラムの基礎がないから組み立てるにしろ抜き出すにしろ何しろ時間がかかって触れたくないのよ ES2015から正規表現クラスも拡張できるようになってて、
シンボルメソッドさえ適切に定義してやれば正規表現を受け付けるメソッドはそれらを受け入れるように改良されてるよ どなたかfor文の中で\nを使って改行する方法を教えて頂けませんでしょうか。 var omaiha=10,panpipg="";
for(var ikenuma=0;ikenuma<omaiha;ikenuma++){
panpipg+="￥n"+"改行。「￥」は半角";
} window.fetchでshift-jisのデータをダウンロードしてresponse.text()で文字列にすると文字化けしてしまうのですがどのようにすれば文字化けしないようにできますか？ var server = "vipper.2ch.net"
var board = "news4vip"
var url = `http:/${server}/${board}/subject.txt`
fetch(url).then(response => response.text()).then(text => // textが文字化け) blobで取ってEncode/DecodeAPI使え >>394
エンコードデコードAPIがぐぐってもどれかわかないです(´；ω；`) マジレスすると>>396はブラウザがサポートしてないから使えない 2chは、文字コードを指定していないから、やっかい。
JSでは、UTF-8 と扱われて文字化けする
結局、jQueryから、YQL (Yahoo! Query Language)のサービスを使って、
2chのHTMLを取得できた。
YQLで、shift-jis からUTF-8へ、文字コードを自動変換しているのかな？
jQuery → YQL → 2ch
VBScriptについて必死に話し合うスレ
http://echo.2ch.net/test/read.cgi/tech/1416826139/924 >>402
JavaScriptの質問というか、それ以前のhtml設定すらわからんぼんくらに余計なこと教えるなよw EncodingはHTML5系の中でも古参の部類
これをサポートされてないから〜とか言ってると何にもできない 何言ってんだこいつ？
古いかどうかではなくサポートされているかどうかが重要
「Encodingがサポートされてないから何もできない」には何の根拠もない
事実Encodingがサポートされてなくてもいろんなことができる Encoding サポートされてない？
少なくとも今の FF と Chrome ではサポートされているはずだが
var decoder = new TextDecoder(‘shift_jis’) はい、サポートされていません。
Safariで動きません。iPhoneで動きません。
これじゃ使えませんね いくつものブラウザで使えないとダメと言うのは早慶過ぎると思うよ
それに質問者はアレでしょ?
別スレでnode+ブラウザレンダリング部のアプリ環境について質問してた人と同じでしょ
ならそれのレンダリング部がwebkit2ならもうちょっと使えないし、chromiumなら使えるでしょ
一般的にもどうしても必要ならポリフィル噛ませばいいだけでchとfxでサポートされてるんなら十分API自体は使えると思うよ window.fetchってユーザーエージェント書き換えられないの？
それじゃ2ちゃんのdat取得できないかな... 漏れは、
>>401
に書いてある方法で、取得できた
VBScriptについて必死に話し合うスレ
http://echo.2ch.net/test/read.cgi/tech/1416826139/877-883
ピラフは、PowerShell から、2chのHTMLを取得している。
ソースコードは877、使い方は883 jQuery 1.9 - $.ajax()
http://js.studio-kingdom.com/jquery/ajax/ajax
このページが難しい
この辺が関係ありそう。
dataType,
contentType, converters, dataFilter, scriptCharset jQueryでShiftJISエンコードされたCSVを処理する
http://qiita.com/svartalfheim/items/36100328a37c8221d0dd
overrideMimeTypeが実装されているブラウザ（IE10+,Chrome,Firefox）であれば、
以下のようにajax側でmimetypeをオーバーライドすれば対応できます
$.ajax({
beforeSend : function(xhr) {
xhr.overrideMimeType("text/plain; charset=shift_jis");
},
url : 'dummy.csv',
dataType : 'text'
}).done(function(text) {
//処理
}); まあフロント側fetchでやらずにバックグラウンドで相応のAPI使って取得して受け渡すべきだと思うけどな JQ回答必要な場合は専用すれでやりましょう。
スレのルール守ろうね。 >>415
JQ回答必要かどうかなんてわからんだろw JSで直接、XHR を使うのは、難しい
jQueryでいいよ またあほうがわいてるのかw
自分の思い通りにならなくて住民に噛みつくなよ
適切なスレあるならそっちでやれよ。ゆとりかよw jQ使わない俺天才！
jsパケジ無し>jsJQ使い dataTransfer.filesとtarget.filesを連続して使い分けたい処理があるのですが振り分け方で良い方法ありませんか？
D&Dとinput fileによるローカルからのファイル読み込みで一ヶ所にまとめる必用がありifなどで振り分けられたらと考えています。 >>428
↓これだな
>>431
ver jqhasanryuu = dataTransfer.files || target.files;
これやろうとするのはコピペPGか三流ぐらいだろ。 とあるソースのイベントハンドラ内の記述に
var _this = evt.target ? this : evt.srcElement; // evtはイベント
というものがあったのですが、
このthisはグローバルオブジェクトではなくイベントを発生させたオブジェクトになるのですか？
調べたんですがいまいち要領を得ません >>435
>>436はわざと適当なこと言ってるようにしか見えんが（笑）
jQueryのイベントハンドラはDOMのイベントハンドラと挙動を合わせてあるので
thisはjQueryもDOM APIも同じイベントを発生させた要素になる
そしてそのコードはjQueryとは関係ないだろう。古いIE用のコードだからね
http://blog.skyld.org/2011/04/js-ie-attachevent.php
> JavaScript（クロスブラウザ対応版）
>
> function testFunc(evt){
> //IE以外はthisで、IEはevt.srcElementでターゲット要素を取得
> var _this = evt.target ? this : evt.srcElement;
> alert(_this.value);
jQueryはブラウザ間の挙動の違いを吸収するものだから、そんなコードは不要になる。
DOM APIを使ってるから必要になるコード（IE9以上対応でよければ不要）
でaddEventListener（jQueryも）でイベントハンドラ内のthisが要素への参照となるってことはここに書いてある
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler
> addEventListener() を使って要素にハンドラー関数を設定したとき、ハンドラーの中の this の値は要素への参照となります。
> これはハンドラーに渡された event 引数の currentTarget プロパティの値と同じです。
ついでに下の方にはIEの場合（attachEventを使った場合）はthisがwindowになると書いてある。
> attachEvent の欠点が 1 つあります。this の値がイベントを起こした要素ではなく、window オブジェクトへの参照になってしまうことです。 ES3 では、関数がネストしている場合に、
thisがグローバルオブジェクト(window)を指すから、皆、この挙動に悩まされた
JSのthisは、変態と呼ばれて、嫌われていた
一方、jQueryのthisは、処理中の要素を指すから、簡単 >>438
ありがとうございます
addEventListenerを使うときはそう書くのですね
Event.targetのページに
var target = e.target || e.srcElement;
と書いてあったのでこう書くと思ってました どうかご教授願います。
全くの素人です。
function test(str){
var s = str
s = str.split('_');
for(var i = 0;i < s.length;i++)
{
console.log(s[i]);
}
};
上記のコードでエラーが出てしまいますが、どのようにすればエラーは無くせますか？
よろしくお願い致します。 >>443
google chromeのデベロッパーツールだと以下のエラーメッセージでした。
よろしくお願い致します。
Uncaught TypeError: str.split is not a function 引数はなんなのさ
ちゃんと文字列になってる？
そしてvar s = strって何だ… PHP（やPerl）とJavaScriptでは<form> </form>タグ内で
送信ボタン押し時の関数あるいはデータ送り先ファイルの書き位置が違うって今日やっと知ったｗ
上に書くPHP、ボタン所に直接書くことが多いPHPと ボケてたあ
上に書くPHP、ボタンの所に直接書くことが多いJavaScript だった
あとでPerlも調べたらやっぱり上の方のaction=に書いてあった >>442
function test(str){
var s = str.split('_');
var slen= s.length;
for(var i=0;i<slen;i++){
console.log(s[i]);
}
} >>442
forだけどlength使って最大数を扱うと実効速度がjQueryなみ、もしくは数十倍〜数千倍は遅くなるよ。
手前で処理させておくのが常識。 >>444
引数が文字列じゃないとそれがでる
あと>>448のコードに直して。 blogspotでcookie拒否してるとページリロードが延々と繰り返される
これスクリプトで殺せる方法ってないですかね？やっぱ無理かな >>439
> ES3 では、関数がネストしている場合に、
> thisがグローバルオブジェクト(window)を指すから、皆、この挙動に悩まされた
JavaScriptの仕様は今と一緒だろ。
イベントハンドラ内においてthisがどうなるかがバラバラっていうのなら
あながち間違いじゃないが、そもそもthisというのは呼び出し方で決まるもので
関数内のthisがどうなるかはわからないのは当然。今もそれは変わってない。 >>449
> forだけどlength使って最大数を扱うと実効速度がjQueryなみ、もしくは数十倍〜数千倍は遅くなるよ。
https://jsperf.com/array-length-vs-cached
誤差の範囲。リストの中で一番さが大きいIE11でも
変数に入れた所で1.5倍しか早くならない。
最新ブラウザならほぼ変わらない Edgeでやってみたけど、やっぱり差は1%未満だったな。
それにしてもEdgeの方がChromeよりも倍ぐらい速いというか
Firefoxも速いからChromeが遅いのか。
なんだだろう？ >441
Event.targetのページ https://developer.mozilla.org/ja/docs/Web/API/Event/target
に書いてあるとおり IE6-IE8 サポートのための書き方だな。
IE6-IE8をサポートするなら確実にjQueryを使ったほうが良いよ。
サポートしなかったとしてもjQuery使ったほうが楽だけど
いずれにしろその書き方はする必要はない。
特定のブラウザ専用のコードはなるべく書かない
単一のコードにしておくべき var slen= s.length;
for(var i=0;i<slen;i++){
console.log(s[i]);
}
Array.length を、一旦変数に入れてから使うのは、
確か、jQuery のソースコード中でも、やっていたかな？ forの方が速いんだろうけどめんどいからいつも
str.split('_').forEach(x => console.log(x));
で済ませちゃう
誤差程度と信じたい >>458
それみやすくて良いね。
優先順位にもよるけど自分が書く場合はこれ
速い>みやすい>短い
職場なら
みやすい>みじかい>速い
個人で書くときはjQueryは遅くなるので論外
記述量が増えれば増えるほど遅くなるw >>455
少ししかなければコンマ数秒の違いだけど、データベースの使えない処理でスライス非同期など大きなデータを扱うと違いが明らかになります。 >>459
増えれば増えるほど遅くなるから
あまり増やさず簡潔に書くのがコツだよ
jQueryに限らずあらゆるプログラムの鉄則でもある >>459
> 優先順位にもよるけど自分が書く場合はこれ
> 速い>みやすい>短い
見やすいっていうのは、可読性、メンテナンス性と
いうことだと思うけど
可読性やメンテナンス性を落としてでも速くしたいってこと？
また、見やすくするっていうことは、読むべきコードを減らすことでもあるから
結果として見やすい＝短いに、なるけど
（もちろん誰も関数名や変数名を1文字にしろとはいってない。単語の数が減るということ） >>460
> 少ししかなければコンマ数秒の違いだけど、データベースの使えない処理でスライス非同期など大きなデータを扱うと違いが明らかになります。
少しと大きなデータの境界線は？
大きなデータ＝数十万件のデータを扱うと違いが明らかになります
といったら笑いを取れると思うよｗ 自分の場合はFILE APIで動画ファイルをいじるときは速度を意識すること増えたぞ >>455
今はどのブラウザが速いの？
重い処理を行ったとき実感ではEdgeが速い気がするけど >>465
主に分割や暗号化だよ。
最近動画ファイルをローカルサイドで処理してくれよ的な案件がやたら多くて実効速度を意識することが増えた。 速度なんて後から考えれば良いわ
最初から全部を全部可読性の低い速いコードで書く必要なんて無い >>466
HTML5なら実測もベンチもEdgeが圧勝
特にHTML5以降だとFFは塵ブラウザ扱いですわ >>467
jsで動画読み込めるの？
何十Mバイトもあるとフリーズしない？？ >>467
確かにここ1〜2年はクライアントからブラウザ側で処理して欲しいと頼まれることが増えた。
おまけに処理速度重視でと注文つけてくるから困る。
多いのはサムネイル生成と動画の分割アップロードばかりだけどな。 >>470
大きなファイルを一度に読み込んだら止まるので工夫が必要 今まではphp経由でサーバーで処理していたけどブラウザ元で処理させたいので改造してくれみたいな・・・
誰が書いたのか知らない小汚いコード見せられんだよなw
一から書いた方がマシなことが度々あるぞw spaを使っている場合のopenid connectを使ったユーザ認証に悩んでいます。
https://developers.google.com/identity/protocols/OpenIDConnect
を参考に
最初にリダイレクトでgoogleのユーザー認証画面が出た際に
コールバック先としてspaのurlに飛んだ後に
spa側でプロキシ的にサーバサイドにコールバックで渡されたパラメータ
state,
sessionState,
prompt,
code,
authuser
等を渡してサーバサイドでトークンの交換処理を走らせようとすると
"error": "redirect_uri_mismatch",
とリダイレクトurlがミスマッチとでてしまいます。
確かにspaのurlをリダイレクト先にしているのでこのエラーが出るのは分かるのですが
実際はどうやってspaにおけるユーザー認証をしたらいいんでしょうか？
できるだけサーパサイドで認証をしたいんですが
どうするのが一番いいのか教えていただけないでしょうか？ >>468
> 速度なんて後から考えれば良いわ
そうそう。その通り。問題がある部分だけ対処すれば良いわけで、
何も考えずに、速度優先とかアホがやること
>>471
> おまけに処理速度重視でと注文つけてくるから困る。
処理速度重視というのをどんな場合でも処理速度優先って
意味だって思ってたらだけだぞ。処理速度が問題があるかどうかを
ちゃんと考えることが本当に処理速度を重視しているってことだから。
クライアントの隠れた注文。「開発コスト重視」という注文を無視してはいけない。
クライアントは開発コスト重視という注文をしなかったから開発コストは無視して
処理速度だけ重視しましたなんて言ったら怒られるからねｗ >>466
トータル的にEdgeが最速
>>470
読み込みできるけど巨大なファイルになると直読みは不可能 >>478
昨年だけど↓の処理を仕事で書いたよ。
4ギガ以上のzipファイルを暗号化してからアップロード
そのあとダウンロードしてから復号化処理＆保存 465です。
>>470
その位なら大丈夫。
100M単位になると動きが怪しくなるので >>472さんのいう通り手前で止まらないようにする処理が必要になります。
>>471
動画を扱うプログラムを書いたことあるなら理解されてると思いますが、どうしても実効時間が長くなりますよね。
jqは外して回避されていますか？ jQueryはDOMを扱うライブラリなのに、
動画と何の関係があんの？ >>482
jq使うとネイティブよりも重くなるからだよ >>481
ブラウザの種類によって一度に読み込める限度とか？
一度にどのくらいまで読めますか？ PCのスペックも関係あるんじゃね？
370Mの動画の情報は問題なく読めたけど中身を処理したら止まったぞw 皆TypeScript派？
自分はES201X+flow派。 >>484
> jq使うとネイティブよりも重くなるからだよ
そんなことはわかってる。
論点はDOM=ユーザーインターフェースに関連する処理は
どちらにしろ人間の方が操作に追いつかないから
速くする意味が無いってところだ。
DOMで一体何をしたいんだよ？
tableの1セルを1ピクセルとみなして動画でも表示させる気か？ ABやTAの処理は確かV8だと一年くらい前にメモリを浪費したりすることの無いように実装された
ただし未だこれらを扱う周辺APIはメモリリークを起こしてしまう
まあURL.createForとか必要なAPI不足の面もあるよね >>490
物事を良いか悪いかでしか判断できない病んでるような人？ >>479
ここでこの処理の流れを説明できる人少なそう >>484
>>487
重くなるというよりjQueryはWPのプラグイン開発のときぐらいしか扱わないな。
法人サイトでもWP使うこと多いけどjs習得している者からしたらアホだなとしか思えん。
セキュリティリスクも高まるしな。
今まで穴丸出しのサイト何度見たことやら。 速度優先では、可読性が悪くなるから、バグが増えて、開発費が増える。
プロジェクトも赤字になるから、自分の給料が減って、会社も倒産するだろ
速度を優先する場合は、0.1秒とか速くなった分だけ、
売上が1億円増えるとか、利益が増えないと、仕事としては成立しないだろ
利益と品質の関係(線)を、グラフに描いて、その交点を求めて、
それ以上に利益が多いエリアしか、成立しない
数値計算に、jQueryなんて関係しない。
一々、DOMにアクセスするのか？
DOMから切り離すとか、
DOM にアタッチしていない、Document.createDocumentFragment() とか使えば？ >>474
リダイレクトエラーなら、リダイレクトしなければいい
サンプルを見るとか、そのサービスを提供している会社に聞けば？ >>496
> 速度気にするなら速いパソコンを使えよ
ユーザーに1Ghz以上のコンピュータを要求する気か？ >>494
jQueryを使える = jsを習得しているなんだがｗ >>494
jQueryは単にDOM関連の処理を短くかけるだけなので
セキュリティリスクに何の影響も与えない
セキュリティ的に問題があるjQueryを使って書いたコードを
同じ意味でjQueryを使わずに書いて
セキュリティリスクがなくなるっていうのなら、
そのコードを見てみたいものだｗ 例えば生のJavaScriptを使って書くと
有名なXSS脆弱性が発生する >>495
自信満々に極端な主張して気持ちが悪いw 速さやファイルサイズ等に関しては既に結論が出ているのにな
まるでjQuery教の信者みたいですな・・
というかピークは2013年頃で今は衰退中なんだよね 皆もそろそろvue.jsとwebpackに移行しなよ >>504
とかいいつつ結構未だにビジネスユースはjqueryぽいね。
reactではないのか jqueryは4〜5年前ならクロスブラウザ問題で活躍できたけど今はそれほど重宝されていないよな。
うちの会社の場合だと規模の小さなサイトやwordpress関連で扱う程度。
まあwordpressがjqueryを処分しない限り完全消滅とかはないだろけど下火なのは間違いない。
大手サイトでも採用しない風潮が強まってきている。 >>500
横槍すまん。
古いjqバージョン使ってると好ましくはないでしょうね。
アプデされる仕組みなら回避できると思うけど更新しないサイトはごまんとあるのが現実だからね。 > 古いjqバージョン使ってると好ましくはないでしょうね。
なんで？ >>506
> 大手サイトでも採用しない風潮が強まってきている。
幾つかのニュースサイトやブログを見てみたけど、
jQueryを使ってるものはあっても、reactやangularを
使ってるところなんてなかったぞ
例えばCNNはjQueryを使っていた。
facebookは開発元だからreact使ってるだろうけど、
IT系とか関係がありそうなのをのぞいて、
jQueryを使ってない大手サイトってどこよ？
そしてそこは何を使ってるんだ？ >>499
自分はjQueryに慣れすぎてネイティブの書き方忘れてしまった。
というかコピベプログラマーだからjQuery無しとかググり無しなら厳しいですわ >>513
もっとリストアップしないと証明できないぞ 「大手サイトでも採用しない」というのが証明できないぞ 確かにjQueryを使う必要性は薄れてきてはいる。
けど学習コスパが良いから覚えて損はないだろ。
>>513
>>511
この人はjQuery教の信者なのか？ 大手サイトでも採用しない風潮が強まったっていったんですー
採用しないなんて言ってないんですー
風潮があるだけですー
その風潮が強まっただけですー
1%が2%になっただけでも強まったって言って良いんですー
最終的にjQueryを使っていても、
採用しない風潮が強まったのは事実なんですー >>517
> 確かにjQueryを使う必要性は薄れてきてはいる。
それは明らかにあなたの感想ですよね？
どこかにデータでもあるんですか？ >>516
そんな熱心に知りたいのなら割合を調べると良い
上場企業ページ
ポータルサイト
ecサイト
検索サイト
他多数
実際の利用率が種別でもわかるよ。 >>519
そんなことも知らないのかよ。
ぐぐれよ・・・
面倒臭いやつだな。 >>520
あなたが調べた上で、大手サイトで使用率が減ったって言ったんじゃないんですか？
調べたならデータ出せるでしょう？
なぜ俺に調べろと？
あなた、調べてデータに基づいて言ってるんですよね？ >>522
520だけど初書き込みなんですが？？
余計なアドバイスしてごめんなさい。 データに基づいてっていうのならデータはあるんだわ
https://w3techs.com/technologies/overview/javascript_library/all
2016/05から2017/05のjQuery使用率の推移。直近の一年でも2%増えているんだわ
https://w3techs.com/technologies/history_overview/javascript_library/all
70.1% 70.2% 70.4% 70.6% 70.7% 70.9% 71.4% 71.8% 71.9% 72.0% 72.1% 72.2% 72.3% 72.5% AngularJSの使用率は、0.4%とjQueryとは比べ物にはならないが、
これでも10位と検討している。
だがReactはその他に含まれてるｗ
> The following JavaScript libraries have a market share of less than 0.1%
>
vSemantic UI
> Zepto
> React
> Sizzle
> DHTMLX
> Ember.js
> MochiKit
> p5.js
> DOMAssistant
> UIZE
> Midori
> Google Closure Library
> Webix
> SproutCore
> Glow
> JavaScriptMVC スレ伸びていたので覗き見ﾁﾗ
jQueryはバージョン1以外は使用する価値ないと思うけど
クロスブラウザ対策も容易になって存在感無いでしょう
確かバージョン別の使用率は1が90％以上だったはず https://w3techs.com/technologies/history_overview/javascript_library/all/q
ここからわかるのは、何も使用してないってのが減ってjQueryを
使用するようになってきてるってことなんだよな。
Bootstrapも増えてるけど、これjQueryと組み合わせるのが主な使い方ｗ
ちなみに一つのサイトで複数使うことがあるから合計は100%になるわけじゃない
何も使ってないサイトが25%あるから、あと10年はこのペースで
jQuery採用が増えていく可能性がある。 新規のものだとjQuery使ってないなぁ
SPA案件も無いしVue.jsだったりinfernoだったり使ってる
コンポーネント作れれば何でもい >>527
jQueryを使っている人とお前の考えが大きくずれてんのよ。
お前はクロスブラウザのために使ってると考えてるだろ？
だから間違った結論に至ってる。
jQuery使ってる人にとっては、クロスブラウザなのは当たり前
開発効率が高いという価値があるから使ってるんだよ。 >>506
風潮というより必要性が以前より無くなっただけかと
バージョン1から受けられるメリットは凄かったが以降は別に無くても構わないといった状態だからな 結局さ「無くても構わない」って状況だから
jQueryが使われるのさ。
無くす理由がないから、開発効率が高いjQueryが使われる
jQueryをなくしたければ「無くても構わない」じゃなくて
jQueryよりも開発効率が高いを売りにしないと。 >>533
精神疾患持ち？
物事白黒つけたくなるのは勝手だけど第三者からみても異常としか思えん。 >>536
そのレスは、このスレの話題となんか関係あるのか？
どう見ても関係ないが、そういう内容のレスをした理由はなんだ？ >>532
>>535
>>527
だな。
皆1ばかり使って必要性が感じられない。 >>536
>>537
真性というか境界性パーソナリティ障害者持ちに合致した輩が張り付いてるみたい。 jQueryはUXのために使ってる
ヌルヌルEaseInOutExpoでアニメーションさせるためには
既存資産が豊富なjQueryが良い 今だとスマホとかのバグ対応のために
jQuery使ってる人も多そうだね。
該当機種を持ってなければ気づきようがない問題を
自分で対処するとか大変すぎるしね。 真性乙ってところか。
おまいらボダには当たり障りなく接してやれよ。 >>547
そいつに触れるな。
意気揚々としだだろ >>547
今検索したら↓
二極思考、極端な主調、思い込みの激しさ、自分の考えが正しい、敵味方で区別、善し悪しで極端な評価
性格的なものなのか病気なのかは医者でないからわからんが、レスみる限り該当している奴はおるわな・・ ↓例えばこういうこというやつ
> jQueryはWPの寄生虫みたいなものだろ jquery賛成派と否定派の対立はいつ迄も続くのであった… 直近の会話で参考になったのはこのデータぐらいだな
思い込みではない客観的なデータ
> https://w3techs.com/technologies/overview/javascript_library/all
>
> 2016/05から2017/05のjQuery使用率の推移。直近の一年でも2%増えているんだわ
> https://w3techs.com/technologies/history_overview/javascript_library/all
> 70.1% 70.2% 70.4% 70.6% 70.7% 70.9% 71.4% 71.8% 71.9% 72.0% 72.1% 72.2% 72.3% 72.5% >>552
jQueryのバージョン使用率はどのくらいですか >>549
境界性パーソナリティ障害者という見たいですね >>554
>>552
1が92.6％
2が6.4％
3が1％
何を意味するかは一目瞭然 JQはwordpressの仕様変更するまで使えるだろ IE自爆してくれて本当に助かった
Chromeだけ対応すりゃいい時代最高だわ スマホ含めずIE9以下のアクセスは1割以下なんだがそろそろ切ろうかと思っている。 >>556
> 何を意味するかは一目瞭然
どこのデータかは明示されてないけど、それが本当なら、
まだIE8以下対応が重要だってことですね。
IE8以下対応が重要なら、最近のフレームワークに
乗り換えられないのも納得です。
1と2の違いはブラウザサポートの違いだけで完全に互換性があるので
対応ブラウザを減らすだけで、2に置き換えられるってのも
とりあえず1を使ってるという理由でしょうね。 >>561
> Chromeだけ対応すりゃいい時代最高だわ
ブラウザのシェアって何％切ったら切り捨てる？ みんなが切り捨てれば否応無く切り捨てられるようになる >>567
いやでござる。アップデートしたくないでござる
Windows 10にしたくないでござる。
強制アップデートいやでござる
何も変えたくないでござある。
今までと同じでバグ修正だけしてろでござる jQueryの1と2で機能は同じなのに、あえて対応ブラウザを減らす意味ってあるの？ >>565
会社によって考え方違うだろうな
うちの場合は2.5％以下としているよ jQueryは前ほど使うメリットないんだよな
バージョン1のときは大変お世話になりました >>572
前ほど使うメリットがないってことは、
メリットが減っただけで、未だメリットはあるってこと？ そう。減っただけ。
メリットがなくなってしまったわけじゃない。
またjQueryの代替とされるものは使うのが大変 >>574
メリットデメリットは普通にあるだろ
以前よりは無くなったというだけ 確かに。ネットワーク速度とかCPU速度とか改善されたので
jQueryが重いというデメリットはなくなりましたね。
というか重いという話だとフレームワークのほうが重いけどｗ うちの会社では法人サイトの保守管理を5000件ほどしているけど、jq使用しているのは1ばかりだな jQueryの1と2を比較すると
機能: 同じ
対応ブラウザ: 1の方が多い（古いブラウザ対応）
ファイルサイズ: 2.2.2の方が11KB少ない （1.12.4=97KB、2.2.4=86KB）
速度: おそらく2の方が速いが体感上はかわらない
ってことで、対応ブラウザを取るか11KBとるかなんだよね。
2の方が優れているってわけじゃく、むしろ1の方が対応ブラウザが多いというメリットが有る
スマホ専用サイトは古いブラウザが存在しないから11KBを取るのもありだけど
PCサイトだと、古いブラウザ対応の方が重要になる >>574
まとめるとこんな感じかな
メリット
クロスブラウザ対応
コード量が減る
プラグインが豊富
デメリット
HTTP通信が増える
ネイティブのJavaScriptより遅い
コンフリクトなど
ネットは速くて軽いのが絶対的な正義だから、俺みたいなサーバー側の立場からしても無駄なく処理してもらいたい
ホント昼休み時間は腹が立つぞ スレチにも程がある
ここはJavaScriptの質問スレでjQuery関連は専用スレがあるんだからこっち来るな スレチではないだろjqueryを使うか使わないかという話だし。
俺は基本的にtypescript+reactだけど趣味でしか使ってないな。
結局php案件とかだとreact使うメリットないし、
jqueyになるんじゃないかな。
phpの案件率圧倒的だし >>581
メリットのコード量が減ることによってHTTP通信も減るよ。
デメリットのコンフリクトはよくわからない。
> ネットは速くて軽いのが絶対的な正義だから、俺みたいなサーバー側の立場からしても無駄なく処理してもらいたい
CDNを使うのがいいだろうね。自分で書いたコードは通常CDNで配信されずサーバーから配信するしかないが、
jQueryのような汎用のライブラリにするとCDNが使えるから、サーバーの仕事も減る
そうやって自分が書くコードを減らして、ライブラリ側に持っていくことで
速度も速くなる >>583
PHPというか、リアルタイム性が必要なサイトは
少ないってことなんだよね。
今は無理してAjax使おうとかしているやつがいるけど、
実際はページをそのまま返せば十分だったりする
動的にページは生成するが、表示された後、
一部だけを変更したいって要望は少ない。 メリット
クロスブラウザ対応
ブラウザのバグ対応
コード量が減る（可読性、メンテナンス性向上）
ライブラリ以外のHTTP通信が減る
jQuery部分にCDNが使用可能
フレームワークより軽い
プラグインが豊富
noConflictメソッドによるコンフリクト対応
デメリット
ライブラリ部分のHTTP通信が増える（約11KB）
ネイティブのJavaScriptより遅い（影響は少ない） jQueryに異常なほど反応する人は何なの？
jQuery使うと死ぬの？ ここはJavaScriptのスレでjQueryのスレは別に用意されているだが・・
基地外荒らしなのか？ jQの話題は自重した方が良さそうだな
スレチや荒らしが顔真っ赤にしてレスしまくるだけだ DLの速さで言えば、CDNから配信される、jQuery1系でよい
1系の方が、使っているサイト数が多いから、最初にどこかのサイトで読み込めば、
ブラウザ内にキャッシュされるから、次からはDLしない
それで、Googleは多くのサイトで、AngularJS を使えと言ってる。
キャッシュされると、DLは1度で済むから プロジェクトによって何を使うかは異なるんだから
プロジェクトに合わせろよ CDNって使ったほうがいいのかな。
何かそれが原因でサイトが止まるのが怖い。複数サイトでキャッシュが共有できるのはメリットなんだろうけど >>596
jQueryもキャッシュされるとDLは一度ですむと思いますが？ >>594
Riot.jsは個人的には好きなプロダクトなんだが
ネイティブスマホアプリ化の導線がないのがつらい
ReactならReact Native
Vue.jsならWeex
結局Reactのシンタックスが気持ち悪いと感じる人はVue.jsにいくしかなくなる
Vue.jsはwebpackとセットで覚えなきゃいけないから
Riot.jsをシンプルに使ってた人は、めんどくさいな、と感じるかもしれん >>601
> 結局Reactのシンタックスが気持ち悪いと感じる人はVue.jsにいくしかなくなる
ReactやAngularの問題点はそこじゃなくて、
例えばブログサイトやニュースサイトなど
HTMLでページが作られてる状態で、
ページの一部にだけ取り込むことが難しいところなんだよ ひでーなこれｗ
ここまでの間違い。バカなのかわざとなのか
晒し上げのネタにちょうどいいやｗ
604 名前：Name_Not_Found[sage] 投稿日：2017/05/27(土) 01:28:41.74 ID:???
>>602
具体的に説明。
影響があるのは何Mといった大きなjQueryの内容を使うスクリプトやサーバー管理者です。
一件のjQueryを読み込む程度なら気にする必要はありませんが、アクセス数の多いウェブサイトだと必然的にjQueryのリクエストも増えます。
その結果、サーバー稼働率・負荷上昇に繋がります。
サーバー性能が良ければさほど気にする必要はありません。
ですが少しでも快適にするためには無駄を省く必要はありますよ。
ちなみにCDNは接続できない地区またはブロックされることもあります。日本でも繋がりにくいときもありますので業務用としてはお薦めできません。 よくそこまでめちゃくちゃにかけるねｗ
多分わざとネタ書いてそっちを盛り上げて
移動させようとしているんだろうけど、
こうもあからさまだと、笑えてくるｗ CDNが接続できないとか何いってんだって感じだなｗ
探せばそういうのあるかもしれんけど、
繋がりにくいとかありえんわ。
そんなに不安ならGoogleのCDNでも使ってりゃいいだろ
https://developers.google.com/speed/libraries/#jquery >>612
そんなことしたら中国からの注文なくなるだろ・・・ >>613
Googleドメインはブロックされてるらしいな >>606-615
魚拓しておこう
こんな傑作なスレ中々みれん
無知とアホと気違いのコラボレス 中国の事を言い出したら、レンタルサーバーは使えない
その中の1つのサイトでも、共産党の悪口を書けば、
そのレンタルサーバーは、すべてアクセス禁止になる
日本の行政からでも既に、
すべてのレンタルサーバーは、アクセス禁止になっているし
例えば、生涯学習センターのPCから、
すべてのレンタルサーバー上のサイトは、アクセス禁止になっている 現実問題としてcdnってつかってるの？
あんまり外部リソースに頼ると、リスクは上がると思うんだけど
cdnがアクセス可能 && 自サーバアクセス可能
という条件を満たすってことは障害発生率は上昇はするわけだし >>619
辿るとこの流れ
>>jQuery 質問スレッド vol.7 [無断転載禁止]の↓ レスに対して
>>数行のためにjQueryを読み込みするのは無駄な行為だと先生に注意されたのですが具体的にどの変が無駄なのか教えて欲しいです
詳細
http://echo.2ch.net/test/read.cgi/hp/1478055094/602-604
このレスに反応
>>606 >>608-609
反応した者に反応とされるレス
>>607 >>610-611
>> CDNが接続できないとか何いってんだって感じだなｗ
探せばそういうのあるかもしれんけど、繋がりにくいとかありえんわ。そんなに不安ならGoogleのCDNでも使ってりゃいいだろ
>>612
そんなことしたら中国からの注文なくなるだろ・・・
>>613 >>620
CDNは静的なファイルを配信するだけだからかなり高度に安定してるよ。
高速配信の仕組み上複数台サーバー構成だしね。
アカマイなんて100%可用性SLAを提供しているし、Googleも99.95%
それでも不安というのなら、CDNから読み込めなければローカルの方を使うようにすれば良いんだよ。
例えばjQueryなら、jQueryオブジェクトが存在しなければ、別のところから読み込むように作るだけ >>621
>数行のためにjQueryを読み込みするのは無駄な行為だと先生に注意されたのですが
ワロタｗ
釣り臭いぷんぷんだなｗ
誰がつられてやるかって感じだ。 >>612
どんまい。
>>613
一般的にECサイトでの使用は避けると思いますが、CDNが接続されないときの緊急回避策はありますよ。 >>621
どのレスのどの部分が間違いなの？
初心者にもわかるように頼む CDNのことじゃね？
繋がらないというか遅いときは度々あると思うがブロックのことは自分も知らんかった 中国 "が" ブロックしているのは CDNの問題ではないことに注意なｗ
ブロック？はぁ？何言ってんのって感じだ
屁理屈言ってるやつにだまされないようにしましょう。 >>そんなに不安ならGoogleのCDNでも使ってりゃいいだろ 中国ではGoogle検索はもちろん、Facebook(フェイスブック), YouTube(ユーチューブ), Twitter(ツイッター)も使えません。 中国に対応するのは必須だからCDNは使えませんね。
CDNは全部規制されてますから。添加のGoogleだって規制されてる http://echo.2ch.net/test/read.cgi/hp/1478055094/604
>>ちなみにCDNは接続できない地区またはブロックされることもあります。日本でも繋がりにくいときもありますので業務用としてはお薦めできません。
>>606
>> ひでーなこれｗ
ここまでの間違い。バカなのかわざとなのか
晒し上げのネタにちょうどいいやｗ
>>612
>> CDNが接続できないとか何いってんだって感じだなｗ
探せばそういうのあるかもしれんけど、
繋がりにくいとかありえんわ。
そんなに不安ならGoogleのCDNでも使ってりゃいいだろ
>>613
>>そんなことしたら中国からの注文なくなるだろ・・・
やり取り見てわかったことは↓
別スレの604は「 CDNは接続できない地区またはブロックされることもあります。 」と可能性を主張したのに対して
>>606 は間違いと主張。
>>612 ありえんわと否定。
決定的と思われる発言がこれ「そんなに不安ならGoogleのCDNでも使ってりゃいいだろ」
やり取りを見ていて、おそらくCDNのデメリットを理解されていない。大規模商用サイトの構築経験がない方だとわかります。
デメリットを熟知されているのであればGoogleのCDNと言う説明レスではなく回避策やフォールバック等の説明をするべき。
以降は調べたのか理解されたようですね。 CDNは〜じゃなくて、Googleは接続できない地区がありますって話じゃないの？
Google以外にもCDNあるでしょ？
何をそんなに必死になってるんだろう？ >>635
されることもあると説明しているのに対して否定や無知なレスがついたのがダメだったのかと >>612
ITドカタ系のまとめサイトのエサになる恥ずかしいレスだなw この後に必要になりそうだから書いておくと
http://faq.ymobile.jp/faq/view/401859
> 【ニュースサイトの閲覧】約300KB/1ページ
ニュースサイトで1ページ300KBぐらいで考えてるんだな >>636
うん？ 中国は検閲してるから、Google以外にも
あちこちブロックしてるよね？
それは中国の問題であって >>634
どうでも良いこと長々と・・・
思い込み激しい人いるからそのへんにしておけ CDNが停止している時のフォールバックって
そもそもHTMLの仕様にあってもいいと思うんだけどな。 インターネットで商品を売ってよいのでしょうか？
例えばホームページを作っても接続できない
地区またはブロックされることもあります。 jQueryの話をしていたときが一番勉強になったな >>596
>>606
>>612
同一人物ではないと思うが、同じ人ならヤバイな >>647
javascript歴一ヶ月初心者にもわかりやすく頼む >>649
自分と意見が合わないやつを見つける
自分が多数派、相手が少数派だと信じて疑わない
むしろ相手は一人じゃないかと思えてくる
その感情が行動として現れる webプログラミングってサーバーサイドが基本でしょ?
クライアントサイドでjQuery使うとか使わないとか、そんな事どうでもいいと思うんだが。 >>653
どうでもいいレベルなら、ReactとかAngularとか
jQueryでは手に負えない規模のやり方なんて生まれないってｗ >>そんなに不安ならGoogleのCDNでも使ってりゃいいだろ
>>612
こんなのが社員にいたら地獄だな。 基地外はスルーとして間違いは見逃せないのがネラーだからな
俺も参戦するぜw
>>ちなみにCDNは接続できない地区またはブロックされることもあります。日本でも繋がりにくいときもありますので業務用としてはお薦めできません。
>>612
>>そんなに不安ならGoogleのCDNでも使ってりゃいいだろ
GoogleのCDNで対処できるんですか？良かったら記述方法など教えてください。 やたらスレ伸びてるじゃないか
たいした詳しくもないのに書き込むから墓穴掘ったというところか
>>606
>>612 >>661
墓穴ってどういうこと？
Googleは中国がブロックしているから
GoogleMapは使うなって話？
いまいち何が言いたいのかわからない。 Googleマップは使うな。あれも中国からブロックされるん？
何を使えば良いんだろう。 っていうか、日本語のサイトで中国なんて最初からどうでもいいから
CDN便利よ？ Googleのを使ってる。中国はうざいからブロックするかなｗ 同業者から旅行業者や宿泊業者で取り入れて失敗したと言う話は聞いたことがある
うちは親会社からJavaScriptの書く仕事ばかりだから直接影響はなかったけど、ある程度人気のネット通販やってるところは気を付けないとダメだろうな。
>>662
知ったかぶりして恥かいたということだろ CDNの話をしているところに、いきなりGoogleは中国でブロックされてるんだぞーって
意味不明なこと言い出したやつがいるようにしか見えんけど？ >>659
知ったかぶりするような人だから逃亡したかもしれないね >>665
>>634 まとめられていて一番理解しやすい >>665
669はアンカミスです。
>>667
>>634 まとめられていて一番理解しやすい >>668
さっきからずっとレスしてるけど、
そんなにCDNを否定したいの？ 659だけど回答まだですか〜？
>>ちなみにCDNは接続できない地区またはブロックされることもあります。日本でも繋がりにくいときもありますので業務用としてはお薦めできません。
>>612
>>そんなに不安ならGoogleのCDNでも使ってりゃいいだろ
GoogleのCDNで対処できるんですか？良かったら記述方法など教えてください。 GoogleじゃないCDNで対処できるんじゃね？
さっきからずっと言ってるけど？ こういうことらしいとか言って、自分の書いたレスを見せて何がしたいんだろう？ ブロックの話は所詮中国の問題であって気にする必要はない。
それがだめなら会社の場所表示にGoogleマップも使えないということになる。
安定性ならGoogle CDNが一番安全だろう。次点でMicrosoftか？
いずれにしろ自社サイトで配信よりは信頼性高いだろう。
それでも心配っていうのなら、フォールバック処理を入れればいい
（CDNからの読み込みが失敗したら、自サーバーから配信する）
で話を戻すとjQueryなどの有名なライブラリはCDNで配布されてるから
これを使うことで自サーバーの負荷が減るというメリットも有る。
開発を効率化する鉄則は、自分で書くコードを極力減らすこと。
有名ライブラリなら広く多くテストされているから信頼性も高い
僅かな実行速度の低下と引き換えに、高速配信と信頼性を得ることができる >>531>>533>>589
レス読んでるとこんな間抜けもいるんだな クリックされた要素と、その次の要素をセレクタにしたいと考えています。
thisと次の要素となると思うのですが、どのように指定すればいいのでしょうか？ >>681
こんな感じ？セレクタではないけど
$(this).next().addBack()
サンプル
https://jsfiddle.net/p917sr98/ >>659
もう許してやれよ。
何だか気の毒になってきた・・
知らなかっただけのことでしょ GoogleのCDNで対処できるんですか？良かったら記述方法など教えてください。
673 自分：Name_Not_Found[sage] 投稿日：2017/05/28(日) 03:03:31.38 ID:???
GoogleじゃないCDNで対処できるんじゃね？
さっきからずっと言ってるけど？ いや、そうでなくてどこのを使ってるのか？って
聞いたんだよｗ 俺はほとんどjQuery使わないから出番無いわな
MSなら何度か使ったことある程度 jQuery使わないとしてもReactとかAngularとかVueとかの
Bootstrapとかフレームワーク使うでしょ？ >>691
MS速いですか？
Google以外使ったことないけど昼間遅いときあるから速いなら変更したい >>693
それほんと？
こんなデータもあるんだけど
http://gigazine.net/news/20160419-google-cdn-beta-fastest/
> 以下のグラフは全世界平均の数値が表示されています。時間帯によって
> 各CDNのパフォーマンスが変化していますが、Google Cloud CDNは
> どの時間帯でもページ表示にかかる時間は最速。 MSのCDNってakamaiを使ってるんじゃないかなーって思った。
他のプロジェクトで使ってるし、使わない理由なさそうだし。
だとしたら世界最高レベルのCDNだね >>693
MS使ってたときは速度の不満なかったですよ jQueryとかよく使うライブラリはブラウザに内蔵してくれても良い気がしてきた >>693
GoogleのCDNは中国では繋がらないので商用サイトでは論外です。
>>612>>613 >>698
検索だけでなくCDNも繋がらないの？？ >>701
中国の事情なんか知らんけど、jsDelivrなら大丈夫っぽい
https://magnets.jp/web_design/7244/
> 中国企業とも提携しているようで、中国本土でも使用可能とのこと。 javascriptで文字列データから指定の番号が含まれたデータを検索する記述方法で困っています。
16桁の「1000000000000000」〜「1000000020000000」件分の文字列データから「1000000010000000」を探す場合のjavascriptの記述方法。
1分間に何回ぐらい実行できるか教えてもらえると助かります。 >>703
めんどくせーから問題を単純化しろ
> 1分間に何回ぐらい実行できるか教えてもらえると助かります。
パソコン次第。世界最速の地球コンピュータから100000000000000000000000000000000000000000000000階ぐらいだろ >>701
ブロックされてるから中国からの閲覧者を拾うならGoogleのCDNは避けるべき >>705
その場合どこのCDNがおすすめですか？ >>706
運用サイトによって使い分けするのが良いかもしれませんね。
>>703
4〜5行で書けそうな簡単な内容だから協力してあげるよ。
何のブラウザで試せば良いの？ >>703
どぞ。
var data=[],no16=1000000000000000;
for(var i=0;i<20000000;i++) data[i] = (no16 + i) + "";
var hits="",index = data.indexOf("1000000010000000");
if(index != -1) hits = data[index];
10000回ほどループさせた結果
1検索あたりの平均0.09698秒でした。win10、FF、i7 7700k
実行時間には変数格納処理部分は含めていません。
> var data=[],no16=1000000000000000;
for(var i=0;i<20000000;i++) data[i] = (no16 + i) + ""; >>708
横から失礼
testとindexOfどちらが速いですかね ブラウザは火狐です。
自分で書いたスクリプトでは停止するので困っていました・・
ありがとうございました。 reactでiosとかのtableViewみたいな感じで
スクロールして必要なタイミングでレンダリングするようなtableCellを作りたいんですが、そういうことができるコンポーネントを作る方法か
もしくはライブラリを紹介していただけないでしょうか？
今は単純に全部レンダリングしてるんで毎回数秒待たされることになって気持ち悪いことに。(500cellくらい作っているので) >>714
ネイティブJavaScriptで記述するなら軽く速く動作するものができますが、手っ取り早く実現させるなら遅延読み込みのライブラリなりそのプラグインを組み込んで実現するのもありです。
スクロール
スクロール量の取得
設定された読み込み閾値を確認
tablecellの遅延生成
以上、スクロールする度に繰り返す
デメリットは検索結果に影響を受けることです。 a = [13, 64, 76]
b = ["as", "ft", "jay"]
これから
result = [{number: 13, name: "as"}, {number: 64, name: "ft"}, {number: 76, name: "jay"}]
を関数型プログラミングらしく生成する方法を教えて下さい >>714画像の遅延読み込みのライブラリならみかけるけど改造しないと使えないかも
自分も>>716の方法が良いと思います。もし困難であれば帰宅後に作りましょうか？ >>717
わざわざ関数型にする必要もないと思うが、まぁ参考までに
// mapでインデックス指定(bがaより短い場合エラーになる)
var a = [13, 64, 76] ;
var b = ["as", "ft", "jay"] ;
var f = (y) => (x,i) => new Object({ number : x, name : y[i] });
var result = a.map(f(b));
// zipWithを自作(短い方に合わせて合成)
var a = [13, 64, 76] ;
var b = ["as", "ft", "jay"] ;
var f = (a,b) => new Object({ number : a, name : b });
var result = zipWith(f, a, b);
function zipWith(f, as, bs) {
var length = Math.min(as.length, bs.length);
var zs = [];
for (var i = 0; i < length; i++) {
zs[i] = f(as[i], bs[i]);
}
return zs;
} >>713
わからなかっただけじゃね
まあこのスレには相応しくない荒らし行為というのは間違いない >>716
画像の遅延読み込みはページ読み込みがスムーズになり便利だけどGoogleは画像を読み込んでくれなくことが多くなりますね。
勿論回避策はあるけど今度は付近の説明テキストと関連性が薄れる。
このデメリットは必ず理解しておく必要がありますね。 >>716
>>718
>>721
ありがとうございます。
遅延ロードをヒントにライブラリを漁ったところ
react-lazy-render というのを見つけ、みなさんが提案している方法で実装しているみたいです。
でもメンテされてなくて最新の環境では動かないようなので参考程度にして自作することにします。
ありがとうございました。 >>719
ありがとうございます！
ラムダ式を繋げるんですね >>719
new Object は不要な気がするのだが >>722
気が向いたらお披露目してくれよ！取りあえず頑張れ〜 >>723
自分で書いといてなんだけどぶっちゃけ上みたいなコード書いちゃダメだからね
無理やりmapで望む結果を出しはしたけど、正直全然関数型っぽくないから
使うなら下のzipWithがいいよ
関数を糊として使うちゃんとした関数型プログラミングだから
そしてnew Objectはいらんかったわ、ごめん >>720
三流パンピーがわきだすのは仕方ないこと
>>606
>>704 >>723
関数型プログラミングらしくするなら、
関数型プログラミングしやすくするlodashとかを使ったほうが良いよ。
lodash使いたくなければ、それと同等のコードを書けばいいだけ。
重要なのはインターフェース。関数型プログラミング用に作られた
lodashを参考にして真似るのが良い。
>>719のzipWithもあるから自力実装する必要はない。
前置きはここまでにして、lodashを使って書くとこうなる。
a = [13, 64, 76]
b = ["as", "ft", "jay"]
result = _.zipWith(a, b, function(a, b) {
return {number: a, name: b};
});
もう少し今風に書くならば
result = _.zipWith(a, b, (a, b) => ({number: a, name: b})); 名前・年齢を持っているなら、Person クラスだろ。
DBのレコードだから、典型的なオブジェクト指向
関数型にする必要がない
Rails を参考にすればいい >>717
関数型とか使わずに普通に手作業でやりたく無い理由は何よ？ >>725
すんませんreactの遅延ロードの件ですが
今もメンテナンスしてるreact-lazyloadってやつありました。
自作するまでもなくタグとして挟むだけで何も考えずに使えました。 >>730
関数型を使うとconstだけで作れる
変数というものはなくなり、必ず名前を中身が一致する。
例えばtotal という変数に 1〜100までの値を
forでループして足しこんでいくと、最終的にtotalという変数は
合計値になるかもしれないけど、処理の途中はtotalではない。
つまり変数の名前と中身が一致していない。
一致していないということは、いつ一致するのか？を
ロジックを読み解いて処理内容を把握しないといけない。
コンピュータの気持ちになって動きをトレースしなくてはいけない
関数型では処理ではなくて定義の形で表せる。
const a = b と書いてあればその定義が変わることはない。
なのでロジックを読み解く必要がなくなり可読性が高くなる。 >>732
そこは別に関数型でなくともconst使えばいいだけじゃね。
宣言的記述ができなきゃ結局のところ命令的な記述全部頼らなきゃならんし。 関数型を使うのは、最後のフィルターの部分だろ
C#のLinq, Java8のStream とか、DBからレコードを選択する部分を、関数型で書ける
SQLの、where 何々、ソート順 関数型の特性の一つとして「全ては値」てのがあると思う。
jsだとオブジェクトの参照状態を防ぐために
いちいちObject.assign({},変更前,変更後}
みたいな書き方しなきゃいけないけど、
imuttable.jsを使うと全部値型として扱えるから参照状態を気にせず使える。 >>733
> 宣言的記述ができなきゃ結局のところ命令的な記述全部頼らなきゃならんし。
もともとJavaScriptは関数型ではないからパフォーマンスが落ちることになるけど、
それに目をつぶれば宣言的記述ができないことはないんだよ。
どんなものでも宣言的記述はできる。
そうすると必然的に関数型になって、constだけで十分になる。
パフォーマンスの低下に目をつぶれば、信頼性が高く短いコードで書ける宣言型が優れている angular.jsで教えてください。
{{1+1}}は動いてます
〜〜〜〜〜 HTML
<ons-input id="instance" ng-model="myDomain" modifier="underbar" placeholder="domain name" float></ons-input>
<input type="text" class="text-input" value="{{domain}}"></input>
<ons-button ng-click="onTest()">Test</ons-button>
〜〜〜〜〜 javascript
<!DOCTYPE html>
var app = angular.module('test-app', ['onsen']);
app.controller( 'domainController', [ '$socpe', function( $scope ) {
$scope.onTest =function(){
$scope.domain =$scopoe.myDomain;
};
}]);
buttonクリックイベントでng-modelのmyDomainからscopeのdomainに値を入れて、そのdoaminを下のテキストボックスのvalueにbindさせたい意図なんですが動きません。
しかし、下テキストボックスのvalueを{{myDomain}}とすると正しく動きます。
$scope.domainに代入しているのだから{{domain}}でも動くと思うのですが何がいけないのでしょうか? >>737
まじで？
fib n
| n == 0 = 0
| n == 1 = 1
| otherwise = fib(n-1) + fib(n-2)
上記コードをjsでどうかけるの？ 738です。
>>739
すみません。
転記ミスで
$scope.domain =$scope.myDomain;
と正しく書いています。 >>740
一番素直に置き換えるとしたらこうだろ？
function fib(n) {
return n == 0 ? 0 :
n == 1 ? 1 :
fib(n-1) + fib(n-2);
}
アロー関数使うならreturn省略できるから
もっと元のコードに近くなる
const fib = n => (
n == 0 ? 0 :
n == 1 ? 1 :
fib(n-1) + fib(n-2)
) >>743
まんまでしたわ。
これが宣言的にかけるってことなの？ >>744
まぁフィボナッチ数をこのコードで求めようとしてもスペックによってはnが100程度でタイムアウトするけどね 関数内でその場でfib（numberの配列）を作って
iでループしてfib[i]にi番目のフィボナッチ数が入るようにし最終的にfib[n]を返せば
変数の意味的な矛盾はないままにスタックを消費しない 末尾再帰の形で書けば、ループ文に変換するから、スタックを消費しない。
誰かが、そういうライブラリを作っているかも？
>>738
$scope.domain =$scopoe.myDomain;
ここに、Break Point を置いて、デバッグして中身を見れば？
それと、名前欄に、738 と番号を入れてくれ jsの勉強をしているのですが、どうもうまくいかない処理があっておたずねいたします。
ソリティアのゲームをjsで動かしているサンプル(ttp://www.dhtmlgoodies.com/scripts/game_solitaire/game_solitaire.html)を参考に編集しておりましたところ、
ゲーム終了時の処理がうまくいきません。
サンプルゲームでもゲーム終了の処理がされないのでサンプル自体に問題があるのはわかるのですが…
----以下コード(一部抜粋)----
var gameFinished = true;
for(var no=0;no<acesStackArray.length;no++){
var tmpDivs = acesStackArray[no].getElementsByTagName('DIV');
if(tmpDivs.length<13)return;
}
alert("クリアメッセージ");
} 〜〜略〜〜
var gameFinished = true;
for(var no=0;no<acesStackArray.length;no++){
var tmpLeft = getleftPos(acesStackArray[no]);
var tmpTop = getTopPos(acesStackArray[no]);
var tmpDivs = acesStackArray[no].getElementsByTagName('DIV');
if(leftPos>=tmpLeft-70 && leftPos<=tmpLeft+70 && topPos>=tmpTop-100 && topPos<=tmpTop+100){
var topDivTarget = getTopDiv(cardMoveTarget);
if(topDivTarget!=acesStackArray[no]){
var cardTypeThis = divs[0].id.substr(0,1);
var numericIDThis = divs[0].id.replace(/[^\d]/g,'');
if(tmpDivs.length==0){
if(numericIDThis==1){
divs[0].style.left = '0px'
divs[0].style.top = '0px'
acesStackArray[no].appendChild(divs[0]);
return;
} }else{
var destDiv = tmpDivs[tmpDivs.length-1];
var cardTypeDest = destDiv.id.substr(0,1);
var numericIDDest = destDiv.id.replace(/[^\d]/g,'');
if(cardTypeDest==cardTypeThis && numericIDDest==(numericIDThis-1)){
divs[0].style.left = '0px';
divs[0].style.top = '0px';
destDiv.appendChild(divs[0]);
return;
}
}
}
}
if(tmpDivs.length<13)gameFinished=false;
}
if(gameFinished){
alert("クリアメッセージ");
}
----コードここまで----
tmpDivsがきちんと処理されていないのかと思い数字を弄ってみたところ問題はなかったようで、
ゲーム終了そのものの処理の位置が悪いのでしょうか。
よろしければ修正案をご教授ください。 >>751
jQuery + 必要ならLodashを使うのが良いよ >>749
finishCardを呼び出してる所がondblclickのみになってる
これではダブルクリックでカードを右上に送ったときのみにしか判定されない >>753
finishCardを参照するマウスイベントを追加することで解決いたしました！
助言ありがとうございます！ historyのpushStateでURL(A)を登録し、
replaceStateで遷移先のURL(B)に書き換えた場合、
戻るボタン押下でURL(A)になりますが、ページ自体が切り替わってくれません。
どうしたら切り替わりますか？ >>757
そんなことを細かく説明できるような人はここにはいません。 >>759
勉強がてらちょっと調べてみたけど、どれ使ってもルーティングは自分で実装しないといけないらしい
history.pushState(null,null,location.href);
history.replaceState(null,null,新しいURL);
は定番で
addEventhandler('popstate',function(e) {
e.preventDefault();
if(戻るボタン) {
history.back();
}else{
history.forward();
}})
戻るボタンか進むボタンの判定はよくわからなかったわ >>762
ルーティングって何を指してる？
普通に考えればSPAのフレームワークであれば、
URLのパスに対応するメソッドを定義するだけで、
History APIを使う必要はなくなるはずだけど >>763
SPAのルーティングってMPAでいう画面遷移のイメージ
コンテンツ部分のみを切り替えるSPAはコンテンツ部分を切り替えてもURLは同じなので、
そこをうまいこと変えてくれるんじゃない？ アドバイス欲しいです。
javascriptを使ってウェブサイトのページに簡易検索機能を組み込む作業を行っています。
・データはサーバーサイドで加工してから保存。
・ブラウザのjavascriptで検索。
・検索対象のデータはAjax通信で取得されます。
・var ajaxfile=[]; この変数に数万数十万件のデータが格納されます。
・指定のキーワード1つのみで検索。
・データが大量にあるためできるだけ素早く検索する必要があります。
・一致するデータの変数番号を全て保存します。
記述例など教え頂けると助かります。Ajaxの記述は完成しているので不要です。 数万数十万って格納するだけでめっちゃ時間かかるし
その時点で「できるだけ素早く」の要件満たさないんちゃうか
汎用的な検索ならArray.find()やろうけどこれも遅いやろし ×Array.find()
〇Array.filter() >>764
なんかずれてる気がするんだけど？
コンテンツの一部分だけを変えるのはAjax
コンテンツの一部だけを変えるから、動きが快適になる
だけどAjaxだとコンテンツを変えてもURLは変わらないから
F5で更新したりしたら状態が戻ってしまう。
それじゃ使い勝手が悪いので、コンテンツの一部だけを変えつつも
URLとページの内容を正しく結びつけるために
History APIを使うってのがSPAなんだけど？
端的にいうとSPAはコンテンツが変わるとURLも変わるもの >>765
これで試して負荷がかかるようら別な方法を書き直すよ
そのときは遠慮なく言ってくれ
var ajaxfile=[];
var Keyword="検索キーワード";
var cnt=0,gaitou=[];
var ken = ajaxfile.length;
for(i=0;i<ken;i=i+1){
if(ajaxfile[i].indexOf(Keyword) != -1){
gaitou[cnt] = i; // 該当番号の記録
cnt = cnt + 1;
}
} >>770
そのhistoryAPIを使うまでがspaのルーティングだと思ってたわ
実際angular routerだとそこまでやってくれるしね >>772
そうだよ。フレームワークがHistory APIを使う。
一般開発者は気にしなくていい。
単にURLとどのアクションが対応するかを
定義するだけ。それがルーティングの設定 カンマで区切られたデータを連結するときにできるだけ速い実行方法が知りたいです。
var marmp=["嘉","羹","鶏"];
var renketsu=marmp[0]+marmp[1]+marmp[2];
var marmp.toString();
var imax=marmp.lengths;
for(i=0;i<imax;i++) renketsu += marmp[i];
marmp変数に格納された文字列データが大量にあると仮定
その場合連結するときにどのような書き方をすれば高速な処理ができますか？
例の3つは遅いとされているので別な方法がありましたら教えて欲しいです。 連結はライブラリ通した特殊な書き方をしない限りネイティブ記述では実行速度に影響はありませんよ。例え100Mバイトのデータでも既に格納されている変数なら実行速度は計測不能の0ミリ秒だよ。
var renketsu = marmp.join(',');
この記述方法が無難ですわ >>775
https://jsperf.com/string-concatenation/47
Chromeでやった結果
var foo = str1;
foo += str2 + str3 + str4;
が一番早く
var foo = arr.join(''); が一番遅かった。
Firefoxでは
var foo = str1;
foo += str2;
foo += str3;
foo += str4;
Edgeでは、
var foo = str1;
foo += str2 + str3 + str4; 何が言いたいかわかるかい？
できるだけ速い方法を知るためには、
ブラウザとそのバージョンを限定しないとダメということ
質問する側であれば、あるブラウザのこのバージョンで速い方法は
なんですか？って聞かないとダメ。
違うブラウザ、違うバージョンでは当てはまらない。
そういう無意味な質問を、あんたはしているってことだよ。
JavaScriptではユーザーの環境によって速いコードは変わってくるのだから
そういうのにこだわるのは時間の無駄。
速度なんて問題が起きてから対処すれば良いものと心得よ。
実行速度よりも開発速度のほうが重要
1時間分の給料を使って、0.01ミリ秒改善しました？それで誰が喜ぶと思う？
だからこそ>>776は、遅いjoinを使った方法が無難だとかいているわけ。
で重要な開発速度をメインにすえると、ライブラリを使って開発速度を
改善できるならば、使ったほうが良いという答えになるわけ。
ライブラリを使うとその分のオーバーヘッドが必ず入って確実に（僅かに）遅くなるが
それよりも開発速度が重要だからライブラリがあるわけだよ。 joinの方が宣言的かつ非破壊的にスッキリ書けて好き >>779
それには同意。関数型（風）に書く方がメリットが多く、
今のトレンドだし、だからjQueryやlodashが人気 >>778
大量に、と言ってるんだし、0.001msでも速くするシチュエーションってあるんじゃないの？
夜間バッチとか。 >>781
10時間かかる処理が1分早くなって
何の意味もないでしょｗ >>776
ライブラリ通すと遅くなり話になりませんでした。
jointも試したのですが、他にも良いものがあればと思い書き込みしました。
>>777
試してもらったのにすみません。
>>var foo = str1;
foo += str2 + str3 + str4;
一斉連結できないと意味がないので使えないです。
>>778
説明ありがとうございます。
求めているのは実行速度が正解で開発速度ではありません。
扱うのはどのブラウザでも問題ないです。
>>781
まさにこれです。
14台のパソコンで非同期分散処理を行っていて連結の部分で苦戦している状況です。 > ライブラリ通すと遅くなり話になりませんでした。
だからそりゃそうだろ。
ライブラリは開発速度を上げるものだって
いってるだろ >>783
> 14台のパソコンで非同期分散処理を行っていて連結の部分で苦戦している状況です。
苦戦？ ボトルネックになっているかどうかを調べてないってことか。
話しにならんな。文字列連結のやり方を変えた所で
0.0001%も差は生まれない。
だいたいJavaScriptの話だったよな？
どのブラウザでも問題ない？
14台のパソコンのブラウザで非同期分散処理？
どうやら墓穴ほったようだな。
お前の目的なんて手に取るようにわかる >>783
+=
これは速度優先のときは絶対に使ってはいけない地雷記述です。 +=はjoinとかより早いぞ jsperfで調べてみろ 同じ変数に格納されているなら>>776のfor使わないやり方で良いんじゃないのか？
実行速度計ったことないから何とも言えないけどforで一つずつブンブンまわすより速い気がする。 >>788
b=b+a[i]; //for内での最速連結
Array.prototype.push.apply(a,b); //forの手前でキャッシュを作ると更に速くなる
b+=a[i]; // 遅い
] 大量のデータ処理が必要かつ速度優先ならそもそもJSでやるべきじゃなくね >>782
大量データってあるからね。
俺そういうのはGoで書いてたりする。
でもまぁ、JSを使わなければいけないという状況ならベストは尽くすかな。
14台の連結処理なら、14台の中で自分の分は自分でまとめられないの？
まとめた結果をつなげるのは14台で済むと思う。
あと、文字列オブジェクトをつなげるとつなげたタイミング新しい文字列のインスタンスができるから、もったいないかと。
でも一発では重すぎるなら、marmpのサイズを分割して、多段にjoinかけるほうが無難かなぁ。
let arrbufL=[];
let arrbuf=[];
marmp.forEach(e=>{arrbuf.push(e); if(arrbuf.length>10000){arrbufL.push(arrbuf.join(','));arrbuf=[];} })
let result=arrbufL.join(','); 件数によったら、reduceの方が早いかな。
reduce(function(p, c){
return p+','+c;
}).substring(1); 一般のPCのメモリに乗る程度、たとえば32GBだと
メモリの転送速度から考えると2〜5秒程度だからな。
大量のデータが何テラバイトあるのか？という
質問に答えてもらおうか？ jestって気軽にtestがかけるのが便利なんだけど
ベンチマーク機能みたいなのが見当たらない。
jest使って気軽にベンチマーク取れるのってないかな
自作するしかないか？ >>792
いちいち新しい文字列のインスタンス作るようなことは今はやってなくね？
真っ先に最適化の対象になってるだろう ＞＞802
自明なのは中身が文字列ってことだけでしょう？
中身が文字列だから速いはずという
想像で、ものを言ってますよね？ >>803
前段はそうだが、意味はちょっと違う。
中身が文字列以外が入っていない、要は、左辺が必ず文字列で、右辺もリテラル(を代入だけしたもの)だから。
キャストが起こらないし、単にコンカチして捨てても問題ないから最適化がかけられる。
だから、俺じゃないが誰かが言ってるように、forみたいなループで回す事には向いてない。
初回が文字列であること、途中が文字列であることが全部わかってりゃ最適化かけようもあるけど。
結局、+=するものに(''+hoge)みたいなまじないを書くはめになるぞ。 >>804
いやいや、だから何なのさ？ って話
それはあくまで想像上の話でしょ？
計測しなければ本当のことはわかりませんよね？
今の話の速度に関しては自明じゃないですよね？
（一言「はい」と言ってください） >>804
for使わないのを>>792-793が提示してるが、そもそも関数呼び出し自体重い処理だよね
関数を使わないことで最適化される事もあるし
いくら否定する論理を展開したところで机上の空論なんだよね
実測を否定するなら実測で否定しろ >>804
別に俺は速いと遅いとも言ってないんだよ。
単に自明である部分と
自明でない部分をはっきりさせましょうと
言ってるだけ。 "use strict";
function a() {}
Object.seal(a);
a.b = 1; // これはエラー
var c = a.b; // これをエラーにする方法はありますか？ え？ var hoge と 書くところを var hage って書いても
動くでしょ？ どんな根拠で間違いだってわかるのさ？ >>812
"use strict"; var hage; hoge=1;
これは動きません >>813
そりゃそうだろうね。
定義されてない変数に代入できないというルールなんだから
で、何をエラーにしたいって？
エラーにしたいルールを言いなよ >>805-807
いいえ。
単に計測しなければ、ではない。実装を理解してからね。
計測した？V8だとoptimizeされないよ、現に。
だから、もっと多いデータでやりなさい。出来れば、処理系が文字なのか数字なのか悩むデータ混ぜて。
関数呼び出しは重くないよ。中で変数を作らなきゃそれこそ早い。変数作るととたんに遅くなるけどね。
>>807
に関して言えば、自明でないのはお前が能力不足だからだよ。 >>816
だから自明じゃないでしょって話をしてるんだが？
自明っていうのは俺だけは知ってるって意味じゃないんだよ？
他人も知らなければ自明じゃない。
それにどうやってEdgeの実装を理解するんだ？
お前MS内部の人間か？ >>814
存在しないプロパティへのアクセスがエラーになるようにしたいです >>817
Edgeの話なんかしてないよ。
このスレではV8の最新版の
話をするってことは自明でしょ？ >>809
Object.defineProperty で b プロパティを設定しておき、getterでthrow new Error >>820
a.c と a.d と a.e と ・・・ と a.zzzzzzzzz を
エラーにするにはどうすればいいですか？ >>821
Proxyでトラップしてthrow new Error
未定義のプロパティ参照発覚の為だけに行う対策としてはコストが高いと思うけどね >>822
具体的にどういうコードを書くんですか？ >>817
Edgeの実装ってChakraCore眺めたらだいたいわかんじゃん？
知らなさすぎるだろ。
ってかお前の言ってる検証って、アメリカ人に「こんにちは」って言ったら「コンニチハ」って返事してくれたから、この「アメリカ人は日本語がペラペラに違いない」と判断するような、
単なる(しかも失敗してる)計測だよ。
もう少し考えてやったり話したりしろよ。 >>824
自明なんですよね？
ソースコード読まないとわからないなら
自明ではないですね >>825
え？どういう事？
それで自明でなければ、「インスタンスは別生成される」「いや最適化が効く」「+=では必ずしも効かない」って流れの
「最適化が効く」も、勘違いですらなく単なる思い込みだってこと？ 最初から話は変わっていません。
どういうコードであるかは関係なく、
速度というのは実行してみなければはっきりとしたことはわかりません
なぜならCPUのキャッシュや分岐予測や投機的実行などにより
単純に実行速度を予測するのが不可能だからです。
だからどんなコードでも実行速度は自明ではないのです。 >>827
お前、上がってるテストを全否定してるぞ。
投機的実行やパイプラインのストールまで考えたらとても悩むだろうけど、それ以前に悩んでほしいのが
JITが効くか、最近のなら逆にJIT/AOT出来ないと判断されるかするかって話になって、
そりゃなぜかというとデータ形に保証がないからが一番デカいんじゃん。
あるコードだけの(厳密な意味での実行)時間は自明ではないかもしれないが、
あるコードとあるコードとの時間差は自明だよ。
希望的観測(≒思い込み)を許さず、明らかになっていない事を不定とするならなおさら。
だから見た目無意味に文字列と足したりするんじゃん。 噛みつきたいのはわからんでもないが、知らない事があったなら一旦引き下がって勉強して来たほうがいいんじゃねえかな。
犬でも無いんだから。 >>828
いや、だから自明とかいってないで、
実行結果で語りましょうという話。
すでに実行結果は出てる。
反論があるならば、反論のための実行結果を貼りましょう。 >>828
> あるコードとあるコードとの時間差は自明だよ。
自明ではないから、ブラウザによって
同じJavaScriptのコードでも大きな時間差が
生まれているんですが？ >>822
目的達成できました。ありがとうございます
コストは最初からデバッグ用なので特に問題無いです 達成できたというのなら、
そのコードを書くべきでは？
嘘っぽい >>833
ほとんど答え書いてもらってるようなものですが
"use strict";
function a() {
this.b = 3;
return Object.seal( new Proxy( this, {
get (t,p) { if (p in t) return t[p]; else throw new Error(p+" deny"); }
}));
}
var c = a();
c.b; // OK
c.c; // これはエラー
c.d = 1; // これもエラー a()にnewつけ忘れました
そのままだとchromeでクラッシュするので気をつけてください 流石にjQuery Mobileを使うくらいならBootstrapを使った方がよさげだよね最近だと >>837
そもそもjQuery MobileとBootstrapは目的が違ってる。
jQuery Mobileはウェブサイトをスマホのネイティブアプリのように
見せるJavaScriptのフレームワークとして作られた。
jQueryを内部で使っているだけで、jQueryとは根本的に違うもの
開発された当初は「ウェブサイトをスマホアプリっぽくしたい」という
要望がでるかと思われたがそうはならなかった。スマホアプリっぽく
するよりも（ウェブの技術を使って）スマホアプリを作ったほうが良いとなった。
ただしウェブサイトをスマホでもみることは普通に行われており、
スマホで見た時に見やすく最適化したいという要望はでた。
そこで作られたフレームワークがBootstrap
Bootstrapはダイアログなどの一部の機能にjQueryが使われているが
メインの機能はCSSをベースにしている。だからCSSフレームワークと呼ばれている。
俺はブログやニュース系のような文章メインのものをウェブサイト、
ゲームやGmailなどのJavaScriptが重要な意味を持っているものをウェブアプリ
と区別して呼んでたりするが、ウェブアプリが適しているものは数が少なく
大部分がウェブサイトだと思っている（そしてそれは事実だろう）
ウェブアプリが作りたいのならJavaScriptのフレームワークを使うのが良いだろうが
大部分のウェブサイトはJavaScriptフレームワークは不要でjQueryのようなライブラリで十分だと思っている。
JavaScriptのフレームワークを使うと、ウェブサイトの作り方がJavaScriptベースにガラッと変わってしまうからだ。
いい方向に変わるのではなくて面倒な方向に変わる。jQueryであれば知っての通りHTML+CSSの作り方は変わらない。
そしてスマホ対応したいのであれば、BootstrapのようなCSSフレームワークを使えば良い。 >>840
わかることをあえて説明することで、
意図的に変な方向に話を持っていこうとする輩を牽制し、
俺が持っていきたい方向の誘導しているんだよ。 >>841
つまり意図的に変な方向に持っていこうとする輩だと言うことか。 この人、プログラム板でも暴れてる人じゃないかな
触らぬ神に何とやら >>843
今度から気づいたら今みたいに一言言うんじゃなくて
何も言わずにスルーしてくれると助かる IEはオフライン環境でローカルストレージの読み書き処理はできないですか？ ローカルストレージもセッションストレージもIEデフォルト設定ではローカル環境で使用できないはず。 >>846
Apacheサーバを立てれば出来ると思うよ new Blobで生成したオブジェクトブロブをnew Blob以外の方法で結合させるにはどうすれば良いですか new Blobでいいじゃん
他の方法があったとしても内部でnew Blob呼ばれてるだろうよ すみません説明悪かったです。
var b = new Blob(x[0],x[1],x[2], {type: "application/octet-binary"});
x[0],x[1],x[2]の部分を動的に増やす場合どのように記述すれば良いでしょうか？
xの数は1〜5000と変化します。 >>853
なるほど
明日書き直して試してみますわ
テキストでないから苦労してます 結果は中身が結合されず、テキストデータのみ↓となりました。
[object Blob], [object Blob], [object Blob], [object Blob], Uint8Array()やcharCodeAtなど直前で使ってるか？
もしそうならnew Blobでオブジェクトブロブ化する前にビュー確保して結合調整してみれ >>856
できました。
ありがとうございました。 >>858
使ってるよ。割と良い。
ナマで使うのが辛いなら、serviceworkerに処理突っ込むか、PouchDBで捌くととても楽。 利用したウェブアプリ増えてきてるよな。
流行ってきているのか今年になって7桁依頼6本目だ。
先週も依頼があってwpやめてローカルにデータベース構築して中規模サイトを複数管理できるものを作ってくれと依頼あったが、いくらにするか迷ってる。 612 Name_Not_Found sage 2017/05/27(土) 02:13:51.31 ID:???
CDNが接続できないとか何いってんだって感じだなｗ
探せばそういうのあるかもしれんけど、
繋がりにくいとかありえんわ。
そんなに不安ならGoogleのCDNでも使ってりゃいいだろ
https://developers.google.com/speed/libraries/#jquery 嵐はこちらへどうぞ
jQuery素晴らしい→CDN→Google→中国無視するな [無断転載禁止]©2ch.net
http://mevius.2ch.net/test/read.cgi/hp/1499496390/ >>858
去年あたりから本格的に利用はじめたけど便利だよな おまえらって、githubでプログラム公開してたりするん？ >>867
具体的に頼む。
今chromeのextensionでストレージに
chrome.localStorage使ってるんだけど
ちっとつかいづらい。
単純なkey-value型だけどPromiseとか付いてないから
自分で作って抽象化するのとかめんどくさい。
とは言えunlimitedStorageが使えるのはこいつだけだから
ほぼ一択なんかな。 面倒ならまともに使えるライブラリが公開されるまで待てばいいだけの話し >>869
PouchDBでいいんじゃないの？オーバースペックだろうが。 >>865
ホントこんな救い用のないアホいるのかよ
>>868
ライブラリを5点公開しているよ
うち1つは10万件以上ダウンロードされている >>872
って具体的にあげないのはなんで？
特定されるとなんかまずいこと書き込んでる？ >>873
書いたら書いたで 宣伝乙 って返すだけだろ
お前らのやり口にはうんざりしてんだよ 一部宣伝乙みたいに捉える奴絶対いるからな
わざわざ晒す必要もないだろ JavaScriptでcssの@page を動的に変更する場合どのようにしますか？ >>879
@pageのcssルールを追記するだけ // 別スレの方に誤爆してしまったのでこちらにもう一度書きます
質問
よくあるhoverのmouseoutで子孫要素は無視するやーつの関連なんですが
<div>
<input type="text">
</div>
<div>には十分なpaddingがあるとして
<input>をダブルクリックとかしたときに出るブラウザUIの入力補完サジェストに
マウスを乗せると<div>でmouseoutイベントが発火するのだけれど
これを検知して除外するにはどうしたら良いでしょうか？
event.relatedTargetはnullでした
jQueryのhover()メソッドではmouseout扱いでした サンプル用意しました
https://jsfiddle.net/ecmsjwLc/1/
「お名前」をダブルクリックして出るサジェストにマウスが乗ったとき
これをmouseoutから除外したい、です
よろしくお願いします >>883
この場合はmouseenter/mouseleaveの方が適切な気がするけど、
それは置いといて、
if (evt.relatedTarget) {
$(this).removeClass('hover');
}
とかすればいいんでないの？
サジェストにマウスが乗ったときの正確な仕様は知らんけど >>884
あざます
たぶんなんだけど
サジェストに乗った時は
幅100%の要素からwindowの外に出た時と同じ扱い
のような気がするんですよね、nullだし
documentの外の物というか
>>883のサンプルみたいに、サジェストに対して<div>が十分大きければ
座標判定で逃げることもできるんですが >>885
いわゆるビックプルダウン的なのを作った時に同じことあったわ
同じように、マウス座標で判断した var res="12:34:56".match(/(\d+)/g);
console.log(RegExp.$1);
console.log(RegExp.$2);
console.log(RegExp.$3);
としました。
結果は最初の一行に56が出て、あとの2行は空白。
期待するのは、
12
34
56
でした。
console.log(res);// ["12","34","56"]とすれば容易なのですが
例えば
<あ0>12</あ><あ0>34</あ><あ0>56</あ>
みたいなときにmatch(/<あ0>([\d]+)</あ>/g)すると
['<あ0>12</あ>','<あ0>34</あ>',<あ0>56</あ>]
となるので、あとで<あ0></あ>を切り取ってやるかのか、そもそもmatchじゃなくreplaceすればいいのか
こういう、マッチさせつつマッチした中の重要な一部分を取得したいとき、
普通はどう処理するのか知りたいですよろしくお願いします >>887
あとで切り取るかreplaceすれば良い 質問：
タッチパネルの座標を取得したいんだけどスクロールすると取得座標が合わない
誰か教えて
// var node = イベント（onTouchStart）を登録するHTML要素
// var e = タッチイベント
// var touch 結果を格納する
function onTouch(e){
var _t = e.changedTouches[0];
var _x = _t.pageX;
var _y = _t.pageY;
var rect = node.getBoundingClientRect() ;
var offset_x = rect.left + window.pageXOffset ;
var offset_y = rect.top + window.pageYOffset ;
touch.x = _x - offset_x;
touch.y = _y - offset_y;
} アドバイスお願いします。
定期的かつ頻繁にforで124000回実行
中の処理は特定文字が見つかり次第置き換え。
このような処理が4000〜5000件。
JavaScriptを使って少しでも速く処理させたいと考えています。
適切な方法や書き方教えてください。
お願いします。 >>887
var str = "12:34:56";
var re = /(\d+):(\d+):(\d+)/;
var ary = str.match(re);
console.log(ary);
正規表現 - MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions
正規表現なら、プログラム板の正規表現スレで、聞いた方が良いかも
>>890
速さでは遅延評価する、Lazy.js が速いらしいけど、
Lazy.js > Lo-Dash > Underscore
Lazy.js って使われているの？
version 0.4.2 だけど
Lo-Dash を使えば、ほぼすべての関数で、ネイティブと同等か、速い
.reduce: LoDash vs Underscore.js vs native
https://jsperf.com/reduce-lodash-vs-underscore-js-vs-native
Win10, IE11 でテストしたら、ネイティブの倍、速かった > 速さでは遅延評価する、Lazy.js が速いらしいけど、
http://itpro.nikkeibp.co.jp/article/COLUMN/20070403/267180/
> 遅延評価のほうが遅くなる場合
これ読めばわかるが遅延評価が速くなるのは
遅延評価に適した問題で実務でよく使われる
単純な例では遅くなる方が多いよ >>893
自己レス
Revision 4: published Igor Cescon de Moura on 2017-5-15
で実行したら、ネイティブの3倍速かった >>894
遅くなる場合でも、ほぼ同じぐらいだろ
ブラウザの実装の違いを、平均化するから、ライブラリを使って損はない。
または最初から、フレームワーク内で、Lo-Dash を使っている 何故早くしたいのかにもよるだろう
UXもといレンダリングに影響を与えるということなら
２倍早くできればいいというものでもないからな
そうじゃなくとも最速はSABを使ってのパラレル探索だ
本当はWASMでSIMD使いたいところだが >>897
そのSABとかWASMを使うのに便利なライブラリを
教えてください。 ばか！ そこが一番楽しいところだろ
つうかSAB使うのにライブラリは要らん
特に独立型の単純並列ならAtomicな処理も最小限で済むからね いやね、実験するだけならそれで良いかもしれないけど
実用するなら対応してないブラウザのサポートをどうするのか？って
問題があるんだよ。だからそれを抽象化して対応してない
ブラウザにはエミュレートするような機能があるライブラリが必要なわけ 実際にはフラットケイジング処理でフレンジは皆無なんだけどね ポリフィルライブラリでエミュレートしなくちゃって言うのは、今回のようなパフォーマンス問題の場合には合わないかな
だって今回提案してる機能は、それを使う方が要件が楽に、スマートに実現できると言う物じゃなくて、確実に面倒にはなるけどパフォーマンスが良くなると言うものなのだから、
そもそもそれが同パフォーマンスで広環境向けにエミュレート出来るんなら最初からそっちを使えば良いと言うことになる
どちらかと言えばエンハンスメントかフォールバック式に考えた方が良い
まあただSABの場合はABの移譲として実装しても良いことも多いと思うよ >>890
var i=0;
var max=str.lengths; //124000回
var keyword="キーワード";
for(i=0;i<max;i=i+1)
hit(i);
}
function hit(i){
if(str[i].indexOf(keyword,0)!=-1){
// 特定の文字列が含まれているので置き換え
}
} 遅くなりました890です。
>>903
こちらの方法で改善できました。
ありがとうございます。 ワロタ
関数挟まない方が若干早くなるんじゃないか？ 改善っていうかやり方すらわからなかったんだろうなぁ googleのコード短くするツール使うと
日本語が実体参照？数値参照？みたいなやつに置き換わるのですが
JavaScriptのコード中にそのまま日本語含めるのは好ましくないのでしょうか？ >>911
単純にコードを短くするだけでなく、圧縮時のサイズ等も考慮されるため
圧縮しやすいように全角文字を変換し省くことで、圧縮性を高めています
日本語文字列の使用が好ましくないという事はありません 全角文字を省いたって数値参照？になるから
増やしてから減らしてるだけじゃん。意味ないよ 国際化しないのなら、日本語のコメント・文字列を書いてもよい
ただし、変数名などには、日本語を使うな。
誰も日本語でテストしていないから、バグるかも
国際化対応では、文字列に、ID_何々と付けておいて、
別のファイルで、IDと日本語文字列を対応させる おはようございます
>>912-915
レスありがとうございます
特別に何か不都合があってそうしてるわけではないということですね
これで安心できます プログラム板のスレが落ちて荒らしが移ってきたって言いたいんじゃない
元からどっちにも居着いてたと思うけど >>917
質問スレッドなのにスレルールも守れない人が書き込みしてる スレルール
> ・質問への「答え」だけでなく「意見」を出しても良い。 909です。
>>917
>>890 例えばこの主に対して
読解力が無いまたは技術がない。もしくは簡単ではないと判断したから以下のようなレスをする。
>>891
>>892
それに対して>>903はソース例を回答する。
主から連絡があり解決されるが、
回答もしてない人達がケチをつけはじめる。
回答しているなら意見として良いことだと思うが今回はソース例を出したのが1名だけ。
はたからみるとスレを劣化させる悪質な人達だと思ってしまうといった葉梨です。
917さんと919さんはどう思われますか？ >>921
12400回ループを回すと重いどうにかならん？って質問に
12400回ループを回すコードを差し出してんだから
ネタじゃん そう?
俺は単純な判定に大袈裟な正規表現を使ってたり、
ループ内の処理に問題があったのならあの回答も良いものだと思ったけど
あと日本語変数は全く問題ないよ 何れにせよ主から解決された書き込みがあったのだから正解を導いたレスが正義なんだよな
俺も次回からはコードなり例なり出すようにしようかな 重いって言ってるんだから重いコードを出すか具体的にどう書いたのが書くべき
書かないなら ■禁止行為である「丸投げ質問」
正義を振りかざすな
質問者にとって正義かどうかとスレにとって正義かどうかは別だ わりとマジで書いたコード見せてくれるのが一番早いよなあ
書く方もJSを日本語に変換する手間もないし
脳内のJS→日本語インタプリタってよくバグるし
jsfeddleとかに貼ってくれるだけで十分なんだけどなあ 919だけど
>>921
以下の書き込みは一言余分な箇所がありスレの禁止行為に該当するとは思う。
>>905
>>906 禁止行為に該当したらなんだって言うんだ?
現在進行形で明らかに同一人物が荒らしを続けてるならまだしも 921です。
>>929
スレのルールを無視して荒らすような連中はスルーで良いんじゃないの？ﾜｯﾁｮｲもなければIDも非表示のスレなんだし・・
そのへんは929さんはどう思う？ ＿あいう＿＿かき＿＿＿＿さ＿＿AB＿＿＿
などの文字列１行があります。
＿は全角スペースまたはアンダーバーで数不特定。混在の可能性あり。
よって行の長さも不特定。（30文字までなど制限は加納）
＿で始まるとは限らず文字列で始まる場合や文字列で終わる場合もあり。
これを文字列はそのままで左右入替するにはどうしたらいいでしょうか？
＿＿＿AB＿＿さ＿＿＿＿かき＿＿あいう＿ 正規表現で全角のスペースorアンダーバーかそれ以外の単位で分けて配列に入れる
ひっくり返す >>934
"＿あいう＿＿かき＿＿＿＿さ＿＿AB＿＿＿ ".match(/[ ＿]+|[^ ＿]+/g).reverse().join('')
こうか jQueryで簡単にできなかったら
jQueryは正規表現置換もできない
クソライブラリってことだ jQueryはDOMライブラリだからという言い訳はするなよ
jQueryはどんなことにでも使える汎用ライブラリだって聞いた jQueryは何にでも使えるライブラリである（俺の定義）
もし何にでも使えると主張するライブラリが
それを満たさなければクソライブラリである（俺の定義）
故に俺の定義によればjQueryはクソライブラリである
反論したいなら、俺の定義が間違っていることを客観的に
指摘している情報をもってこいな >>937
[ ＿]と[^ ＿]をsplitで別の配列に入れてそれぞれreverseしてました
もっと簡単に書ける方法があるはずと感じながら・・・感謝です。 おいぃぃぃぃ！今の流れはjQueryを
馬鹿にする流れだろおよおぉぉ！！ jQuery原理主義者はSOHOスレに誘導させない方向で頼む 誰もいかないだろｗ
そんな負け組が集まってるようなスレ jquery原理主義者なんているんだ。jqueryってそんなにいいものなの？
正直つまみ食い的な使いかたしかしてないけど
DOMを直接操作するのと何が違うのかよくわかんない。 React使わされるくらいならjQuery原理主義と謗られても構わん！
と思うくらいにはjQuery好きかも・・・ JavaScriptがデフォルトで遅延評価になる日は来ますか？
現状配列をmapしてfilterして…みたいな使い方だとループを2度回すことになり無駄が多いのが不満です 遅延評価って過程を事前にコンパイルしてできるだけ実行時の過程の処理を省略できるから意味がある訳で
スクリプト言語で実行時にそれをやっても良くはならないよ >>953
そうなんですね
素直にfor文使います
ありがとうございました >>950
> DOMを直接操作するのと何が違うのかよくわかんない。
できることが同じなら短いほうが良いでしょ？
それは可読性やバグ混入率にもつながる
jQueryを使わないで書く方法を見ればわかる。
どれもjQueryの方が短くなってるからｗ jQuery原理主義者はいるぞ。
否定されるとゴキブリのごとくほいほいわいてくるw jQueryはajaxを簡易に使うためくらいにしか使わないな
素のJavaScriptで全部できるし、jQuery使うと無駄に動作が遅くなる >>960
だからメリットがわからないんじゃね？
jQueryは3.0でSlim版っていうのができたが
これはAjax部分を取り除いたもの。
jQuey的にはAjaxはおまけ部分でしか無く
それだけしかお前が使っていないというならば
jQueryを分かってない人がjQueryを批判している図式にしかならないよ Ajaxも素のJavaScriptでできると思いますがねぇ >>955
コードが短くなるって利点は
typeScript使いの俺にはあんまり響かないなぁ
IDEで補完しまくるからそもそもほとんど打ち込まずに構築できるし。
なら極力使わないでいいかなと。
正直reactと言うよりreduxがしんどくなってきてelmに逃げたくなる自分がいる
仕事があるんかなw それってTypeScriptを使ってないとだめだよね？ つまりtypeScriptを導入してないひとには
jQueryはメリットがあるってわけだな なんで抽象化の話が出てくるのかわからない。
関係ないだろ？ いや、関係あるというのなら
どういう風に関係あるのかを説明してくれれば良いんだが >>961
単にajaxだけは素のJavaScriptだとコード量の差が大きいから、その部分だけ簡易にしたいだけで、
他は素のJavaScriptで全然いいやってだけなんだが
jQueryの良さを分かってないというか、別にajaxもjQuery使わずに実装できるし、なくても困らない
なんだフルにjQuery使う実装に固執しないとだめなんだ jQuery原理主義ってなんだ？
jQuery至上主義ならわかるが >>969
現代日本語での「原理主義」は
ファンダメンタリズムのことではなくただのレッテル貼りに使われる蔑称なので
特に意味は気にしなくていいんだよ >>968
> なんだフルにjQuery使う実装に固執しないとだめなんだ
逆だろ？ jQueryを使わないことに固執してるだろ？
理由があってjQueryを使わないわけではなく
jQueryを使わないことが目的になってる
jQueryがDOMよりも使いやすい命令を提供しているのは事実。
それは昔も今も変わってない。
あとはjQueryを使うか、他のフレームワークを使うか
素のDOM APIだけで頑張るかはトレードオフの問題であって
使う理由がなくなったわけじゃないんだよ。
jQueryからDOM APIの置き換えは簡単なんだから
必要になるまではjQueryを使えばいいだろ
その方が簡単に記述できるんだから <!--reactみたいなコメントがずらーっと挿入されてるのはreactなの？ >>971
文盲？頭が悪いんだろうな
jQueryの利点や使いやすい部分は理解しているが、JavaScriptでそれは普通にできてるしjQueryかますと当たり前だけど素より重くなるから使わないって選択肢なんだが
なんでわざわざ自分にとってデメリットになる方法を使わないといけないんだ
メリットあるとこだけ使えばいいだけで、
DOM操作だって、処理さえ理解していれば結局やってる事は同じだろう
DOM扱うのにjQueryが必須とか考えてるんだったら、それはjQueryに振り回されてるバカだ > JavaScriptでそれは普通にできてるし
そりゃjQueryもJavaScriptなんだから
できるできない、可能不可能の話なら可能に決まってるだろｗ
そんなこと始めっからわかりきってるんだよｗ
で、お前、jQueryのメリット書けないの？
やっぱり分かってないじゃん。
あぁ、あれだ。お前、歩いていくのも自動車で行くのも
どっちも目的地にたどり着けるから同じだって
考えてるやつだｗ jqueryってもともとブラウザ間の互換性確保のためのものなんでしょ？
今でも互換性がないDOM操作ってあるの？ >>975
今でもIE8からEdgeまでがメンテ対象なんですよ。 ふふふ
いっそ殺してくれとも思いますよ、ええ > jqueryってもともとブラウザ間の互換性確保のためのものなんでしょ？
違う。jQueryのメリットはそこじゃない。
だからさ、自分で間違って理解しておいて
その間違った自分の理解が間違ってるって
まるで自分で自分の間違いを指摘するような行為ってなんなの？ jQueryのメリットは、
脱jQueryの記事みればわかるよ。
jQueryを使わないことで
コードが2〜3倍に膨れ上がってる jQueryは簡潔に短いコードを書くことを目的としてるんでしょ
開発者によって面倒だったりポリシーであえてレガシーサポート切ったり様々だけど
ブラウザ間の差を吸収するってのはユーザビリティを過度に考慮した開発者の嗜みみたいなもんだ
つまりクロスプラットフォームなんてのはJavaScriptライブラリ全般に言えるっちゅうこと
んまあいくら簡潔っていってもメソッドチェーン多用しすぎ自由度高すぎで
人様の書いたjQueryのコードはあんま読みたくない > メソッドチェーン多用しすぎ
それは疑問がある。
メソッドチェーンができることは正しいがメソッドチェーンを多用することはないだろう？
それはjQueryの使い方を知らないだけではないか？
例えば、メソッドチェーンを使わずに3つのCSSプロパティを適用できる
http://js.studio-kingdom.com/jquery/css/css
$('div').css({
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
});
例えば、メソッドチェーンを使わずに３つのイベントを適用できる
http://js.studio-kingdom.com/jquery/events/on
$("div.test").on({
click: function(){
//クリック処理
$(this).toggleClass("active");
},
mouseenter: function(){
//マウスが要素上に入った時の処理
$(this).addClass("inside");
},
mouseleave: function(){
//マウスが要素上から離れた時の処理
$(this).removeClass("inside");
}
}); 例えばDOM要素を生成する時にメソッドチェーンを使わずに
一気に属性やテキストやイベントを指定できる。
http://api.jquery.com/jquery/#jQuery-html-attributes
$( "<div/>", {
"class": "test",
text: "Click me!",
click: function() {
$( this ).toggleClass( "test" );
}
})
.appendTo( "body" ); 俺も気持ち悪いというか、プログラマ向けではないなと感じるな
classとtext子要素とイベントリスナを同列に扱っているとことか
そこはオプションオブジェクトにattributesやeventListenersと言ったオブジェクトを
生やしてそちらに付与させるのが自然
thisの勝手気ままな使い方も合わせてjQueryはjQueryだから許されてるけど、
設計も使用例も原則真似するのは良くないことだらけ
こりゃjQueryから入っちゃうとJSの学習を阻害するのは間違いないな
その必要のない、JSプログラマにならない人にとっては、とても有益だけどな 気持ち悪いというかDOM自体がこういう同列の書き方だからそれに倣ってるだけだろ jQueryはプログラムしてるというよりは設定してるみたいな感じだからね こういう流れになるからライブラリは他所でやれってテンプレに入ってたのに
いつの間にか消えてんな あーなるほど、DOMと一緒じゃんと考えるわけね
でも俺にとっては全然違うのよ
そもそもon〜は使わずaddを使うとかいうのもあるけど、それより先に
属性設定のアレはただのプロパティでなく特別なアクセサだからね?
もっと言えば継承元も違うしんだよ
そしてclassがclassNameのように属性と一対一で名前が対応しているわけでもない
じゃあjQの実装はどうかと言うと、classと指定できるから
汎用的に属性名を受け付けるために内部的にsetAttributeを使ってるのかなと思う。
もしそこまでならむしろ気持ちがいい良いAPIだが、実際は違う
要素のアクセサをそのまま利用しているわけでも無く、setAttributeをそのまま利用しているわけでもない
独自ルールに基いて内部的に特殊な場合分けをして要素に適応させてる
これは全然自然じゃないのよ、途轍もなく人工物の匂いが立ち込めてる
よって気持ちが悪いと言ったの これは勿論悪いことばかりだけじゃないんだけどね、
大抵のライブラリって実装が透けて見えると言うか、
ピュアJSやWebAPIとの馴染みがあるように設計するのよ
驚き最小と言うか、大胆な事はあまりしない
でもjQの場合別の言語かってくらい常識感覚が違うのよね
実はAngular並かそれ以上の超俺俺大規模フレームワークなのよ、本当は
それがデファクトのように扱われて、JSの代名詞になって、代名詞がJSとなってる自体はやはり良くないと思う
先の件でもDOMのこと全然理解してない人多そうだしねぇ あれだよね、DOMも並列とか、一緒くただとか、
もう完全に見た目でしかコードを見ていないよね
語弊を避けるために強調するがｍ悪いと言っているのではなく
これがデザイナー的発想なのかもしれない
でもプログラマだと内部構造や実体もかなり意識するからね
そういう違いなのかもしれない
俺は上でポリフィル云々という論を述べたけど
そもそもそういうこと考えてjQを使う人も稀なんだろうね
きっと、まずjQがあって、殆どそこから始まる感じなんだろうね >>979
使用量が増えれば増えるだけ実高速度がネイティブより遅くなる
これが正解 >>962
必要な箇所だけ呼び出せるようにすれば無駄な読み込みがなくなって速いよ jqueryはtriggerとonで内部イベント作れる所とか結構好き。 確かにネイティブが最速でjQueryは遅いになるわな クロスブラウザ問題も切り捨て時期に入りversion1の使う理由がなくる。
うちの会社では年内でjQueryをきることが決まったぞ。
遅いし無駄だし何よりもコードが気持ちが悪い 確かversion2と3合わせても使用率が全体の1割りもないんだよな アフィカス必須ツールのjQueryはWordPressの波にのった金魚の糞なんだが・・ JavaScriptのスレだからスレチになるのかなと次スレはﾜｯﾁｮｲ希望です。 気持ち悪いコードを書くjQuery原理主義者は淘汰されますようにw このスレッドは１０００を超えました。
もう書けないので、新しいスレッドを立ててくださいです。。。
life time: 523日 18時間 46分 28秒 ２ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ ２ちゃんねる専用ブラウザからの広告除去
★ ２ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.2ch.net/
▼ 浪人ログインはこちら ▼
https://login.2ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
