+ JavaScript & jQuery 質問用スレッド vol.8 +
■ このスレッドは過去ログ倉庫に格納されています
JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください
■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
※必ず「問題の事象が再現されること」を確認してください。
必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
+ JavaScript & jQuery 質問用スレッド vol.7 + [無断転載禁止]©2ch.net
http://mevius.2ch.net/test/read.cgi/hp/1467906819/ jQueryは見つからなかったときの設計が素晴らしいと思う
このおかげでいちいちnullチェックをしなくてすむ 該当する要素が無ければ、length: 0
というObject が返される
要素数0、つまり該当する要素なし
Ruby では、nil が返るから、メソッドチェーンで、
nil からメソッドは呼ぶことができないというエラーになる。
ただし、nil 許容演算子を使えば、エラーにならない
jQueryではエラーにならない。
単に、そこからメソッドを呼ばないだけ >>443
例外処理を別に書かなくてはならなくて、逆に困る >>444
それはお前の思考回路が関数型についてこれてないだけ >>445
アホか
書き方が分からないわけではない jQueryが古いというより今どき沢山のDOMを組み合わせて何かを為すって言うのが古い
Canvasだってあるわけだし、DOMでやるにしてもコンポーネントやシャドーやHoudiniもある
jQueryは排他的で独自すぎるから小さいライブラリをたくさん組み合わせて何かをしたい時に合わない >>446
誰が書き方がわかるかどうかの話をしたんだ？
書く必要がないということに気づいてないから
関数型についてこれないって言ったんだよ >>447
jQueryが排他的？どこにjQueryほど他のライブラリと
組み合わせることが可能なライブラリがあるっていうんだ？
AngularやReactは排他的だがな。
その証拠にAngularとReactを組み合わせることができない >>448
Canvas使って文字を書きましょうってこと >>449
お前のいう書く必要かない「関数型プログラミングの書き方が分からないわけではない」 だからjQueryを使うと要素がない時に例外処理を
書かなくていいから、楽だって話をしてるんだが >>456
お前の中で例外処理が「該当要素がなければ、何もしない」しかないからそういう発想になるんだろ
要素に限らず、jQueryは基本的にエラーを発生させず、出来る事がない場合は「何もしない」
「何もしない処理」が複数回発生し、それが期待通りの動作でなかった場合に原因を特定するのに時間がかかる
エラーで止まるのは、むしろ良い事だ >>457
叫ぶなｗ まず理由を書け。
何もしない処理が複数回発生するということは、
「期待した処理が行われなかった」ということだろう？
なぜ期待した動作をしてないならば、してないとすぐに分かるはずだが
なぜ特定するのに時間がかかるのか？
なぜエラーで止まるのは良いことなのか？
その理由を書こう
しかし不思議だ。jQueryは要素に対して処理を適用するものなのに
該当要素がないときに該当要素（無いはずなのに）に対して
処理を行うとはどういう意味なのか？哲学的なものを感じるなｗ
例えば検索結果がないときに「検索結果が見つかりません」と表示するとき
どう書いているのだろうか？classを書き換えればいいだけなのに
それとも他になんか想定してる例でもあるならいってくれ >>458
> なぜエラーで止まるのは良いことなのか？
エラーが発生したら、エラー行周辺を読めば原因を特定可能なんだが、そこまで説明しないとわからないのか…
例外を発生させたことがなくて、発想出来ないのかね >>459
おいｗ それはレベルが低い
エラーで止まらないバグの方が普通なんだよ
まずな、お前がそもそも論点がわかってないんだよ。
要素がないならエラーにならなくて良いはずなんだが、
なんでエラーにしたいんだって話をしてるのがわからないのか？
要素がない → 何もしないのが正しい動き → jQueryはそうなる
要素がない → 何もしないのが正しい動き → DOM APIだとエラーになる → 何もしないようにする処理を追加
こういう話をしてるんだよ
やっぱりお前わかってな無いだろ >>460
なぜレベルが低いのか、理由を説明して見ろ >>461
例外を異常時の緊急停止機能のような安全装置のように思っているから
例外で止まる（キャッチしてない例外）というのは単なるプログラムのバグに過ぎない
一部メモリ不足とかアプリケーション側で対応できないものがあるが
（例えばRubyだとStandardError以外の例外、JavaだとJava.lang.Error以外の例外）
それらを除き、例外が起きるというのは考慮漏れというプログラミング上の単純なミスに過ぎない
仕様とか設計とかそういうレベルではなく、単純な考慮漏れ。
今回の話はその中でもnullエラーという極めて単純なもの
nullエラーを防ぐには、nullになりそうな箇所を一つ一つ潰すというやり方の他に
Nullオブジェクトパターンという設計レベルで解決する方法がある
なぜNullはダメか
https://www.kaitoy.xyz/2015/07/26/why-null-is-bad/
jQueryはこのNullオブジェクトパターンを採用している
要素が見つからないかもしれないと常に考えてプログラミングすることで例外をなくすのではなく
要素が見つからなくても問題なく扱えることで例外をなくしている
こちらはバグはないほうが良いと言ってるのに、
バグがあったら止まるほうが良いだろうと言ってるからレベルが低い 細かいけど訂正
× それらを除き、例外が起きるというのは考慮漏れというプログラミング上の単純なミスに過ぎない
○ それらを除き、例外で止まるというのは考慮漏れというプログラミング上の単純なミスに過ぎない jQueryの場合は要素がない場合に
「問題があるのに例外を握りつぶすことで例外が出ない」のではなく
「例外とすべき問題自体が存在しなくなるから例外が出ない」ってことなんだが、
なんで例外の話が出てくるんだ？
そこがjQueryの設計思想をわかってないって言われてるんだろ >>440でエラー発生すべきか、発生させないべきか、という問題 >>469
どちらもエラーは返ってこないけど？
DOM APIはnullが返ってきて、
jQueryは空のjQueryオブジェクトが返ってくる
DOM APIはnullが返ってくるから、メソッドを呼び出そうとするとエラーになるので
nullチェックをしてnullだったら「なにもしないという処理」を書かないと例外で落ちる
jQueryは空のjQueryオブジェクトだから、何も書かずとも「何もしないという処理」に
なってるので例外で落ちることはない 正解者もいないようなのででは解答
このコードがどういうときに有用かは>>153で書いたとおり
set は使わなくても別にもう一つ関数を作れば同じことができるが
関数を作らずとも引数の再設定という方法がある。意外と便利だよ
func() {
set -- "$@" $(($#+2))
while [ $# -gt 1 ]; do
eval "echo \"$1 \$((\$$#-$#))\""
shift
done
}
func apple orange banana >>475
それは日本語を読めない人が使う言葉じゃない >>476
じゃあ代わりに誰か他の人、>>474がどういう意味かを書いてみて
おそらく誰にもわからないから、誰も書かないだろう jqueryオブジェクトのnext()って次のノードがある場合と無い場合で処理を分けたいんですが
どうすればいいですか？ >>477
Q「〜べきですか」
A「〜だったよ(べきなんて知りません)」 >>478
発想が手続き脳になってると思われる
まず、何に対して処理を適用するのかをしっかり認識すること
言い換えると処理を分けた後に、何に対して処理をするのか？ということ
その処理を適用する対象を最初に持ってくる
例えば<li>のリストが有って「次のノードがある場合に、現在のノードを赤くする」であれば
処理を適用する対象は、現在のノードなのだから
$('li').filter(function() { return $(this).next().is('li') }).css('color', 'red')
↑処理を適用する対象を一番最初に持ってくる
そしてあとはfilterで条件を書く
でもこれよりも以下のほうがより直感的だろう
$('li:not(:last-of-type)').css('color', 'red')
つまりだな。「やりたいこと」っていうのがその文章に
書かれてないから手続き型脳だなって思ったわけ。 >>479
誰も「べき」なんて言ってないね。
どこからでてきたんだろう？ >>469がべきって言ってるな。その>>469がおかしいね。
>>440は関数を実行したにもかかわらず存在しなかった場合は何が返ってきますか？って
聞いてるのに、何が返ってくるかを答えないで、べき論をしはじめた。
何が返ってきているかの答えは>>470が答えている。 $("要素名") ← セレクタ打ち込むのがめんどくさいんだが楽な方法ない？
jQueryで一番いやなところがここなんだよな >>483
$(document.getElementById(ID名))
$(document.getElementsByTagName(要素名))
$(document.querySelectorAll(要素名))
どれでも好きなものをどうぞ 流石に余計長くなってたらダメだろｗ
セレクタは必要最小限の情報になってるので
これ以上短くはできないと思うよ
メソッド名は$の1一文字だし、これ以上短くはできないと思うな。 メソッド名が長いのがDOM APIの二番目にいやなこと
DOM APIの一番嫌な所はループでいちいち回さないといけない所 >>482
>>440への回答だなんて誰もいってないし、もうアホとしか はぁ？じゃあべき論とか言い出すなっての、
両方ともエラーを返してない現実があるってのに
エラーを返すべきではないかとか言われても、
お前DOM APIとjQueryの方法から否定されてんでｗで終わるだろ ライブラリに初心者用とかあるんか？
初心者でも使えるという意味なら
そのとおりだが、上級者も使ってる 数学において数式に番号を付ける際、
y=f(x) ---------------- (1)
みたいな感じで横に伸びる線を書くことはよくありますが、HTML上でこれを実現したいです。
素朴に思いついたものとしては
<ul>
<li>y=f(x)<hr style="display:inline" /><span style="float:right">(1)</span></li>
</ul>
ですが、これは正しく機能しません。
どうすれば良いですか？
要望としては
- ブラウザのサイズに応じて自由に(無限に)伸縮する横線で、
数式番号(上の例で言えば(1))へ繋がる横線(くっついていても、いなくてもどちらでもいい)
- きちんと一行に収まる。改行していびつな形になるのはダメ
です。 >>491
この子は teratail で有名なアスペ君だから注意ね
https://teratail.com/questions/149753
> infologicmation
> 結局自己解決できました。
> 一応、参考までに私が作ったテストコードを載せておきます。
>
> ...中略...
>
> このサイトなら良い指針やアドバイスが得られると思って、わざわざ時間を掛けて質問文を作ったにもかかわらず、アスペみたいな見当違いの的外れの回答が送られたり、
> そんなのの相手に無駄に労力割かされたり散々な目に会ったのに、結局は自力で解決するという結末で、本当に不毛なことをさせられたと実感してます。
> teratailはもっと経験豊かな人が居るんじゃないんですか？どうなってんの？178viewもありながら(確認時点で)…
>
> 当然、ベストレビュアーは無しとします。 私たち日本人の、日本国憲法を改正しましょう。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。 全部のjavascriptファイルにinitializeメソッド実装してるプロジェクトあるんだけど
それをどこから読んでるか全くわからんのだけどjavascriptとかhtmlの機能で
自動で呼ばれるなんて仕様ないよね？ 質問です。
jQueryで、指定した要素がy座標で中央らへんになるようにページをスクロールしたいのですが、どうすればよいでしょうか？
var top = $(this).offset().top;
$('html, body').animate({ scrollTop: top }, 'fast');
とすることでなんとなくスクロールはできましたが、上端になったり下端になったり安定しません。 >>497 です。
試行錯誤の結果、あまりよくわかってませんがbodyにpadding: 50vh 0;を設定したうえで
var top = ( $(this).offset().top ) - 400;
$('html, body').animate({ scrollTop: top }, 0);
とすると一応、$(this)がどこにあっても真ん中に表示されるようになりました。
あとfastだと上にスクロールする動きが変だったので速度は0に。
これで一応自己解決した、ということになるでしょうか。
とりあえず自分の環境に合わせて400としましたが、ほんとはちゃんと画面の高さ/2で計算したほうがいいでしょうね。 画面の高さを取得する方法があるからそれ調べると良い。
あと画像などすべてのコンテンツが終わった後に呼び出さないと高さがずれると思う WordPressスレと迷ったのですが、こちらで質問させてください
WordPressにおけるfancyboxに関してです
現在、HTMLのウェブサイトをWordPressに移行しています
fancybox3を使っていたのでそのまま使おうとしたのですが、WordPressで使われているjqueryが古いのか反映されきれないオプションがあります
<a href="<?php echo content_url(); ?>/uploads/03-1.png" data-fancybox="03">テキスト</a><a href="<?php echo content_url(); ?>/uploads/03-2.png" data-fancybox="03"></a><br>
テキストをクリックするとまず画像が一枚表示され、他の画像もグループ化することによって順に表示されるようにしたいのです
HTMLのサイトでは上記の表記で問題なく動いています
easy fancyboxではテキストをクリックすると画像が呼び出される方法およびグループ化された画像を順に表示させる方法が分かりませんでした
WordPressでは固定ページでテンプレートにすべてコンテンツを入れているのでそれが原因なのでしょうか
色々調べたのですが、やり方が間違っているのかそもそも出来ないのか分からず、解決策をお持ちの方がいらっしゃれば教えてくださると嬉しいです
よろしくお願いします 途中で切れてしまいました 申し訳ないです
解決策をお持ちの方がいらっしゃいましたらお教えくださるとうれしいです
よろしくお願いします >>497-499
vh, vw は「Ctrl +-」で、文字・画像などが拡大縮小できなくなるから、使いづらい >>499
$().onで呼び出してるので大丈夫かとは思いますがありがとうございます！
画面の高さはjQuery的に言うと$(window).heightですかね、思ってたよりずっと単純明快でしたね 大勢に向けたサイトでなく、少数に向けたWebツールなのですが
Spaceキーを押すことで、対象をtoggleしようとしています
しかし、リマップソフトなどでSandS（SpaceキーをShiftキー代わりに使う）を設定している場合（主に僕ですが）は
Spaceを1度押すだけでキーイベントが2回発火してしまうようです
つまりtoggleが2回行われ、元に戻ってしまいます
ならいっそ4回押されるごとに、と変数を使ってみてもたまに半端にカウントがずれてしまいます
どうすれば1回だけの発火に抑えてうまくtoggleさせられるでしょうか…？ 一応keyupでなくkeypressにすると1回のみのカウントになりますが、
keypressはどうもIMEがオフの状態でないと発火しないようで…
（あくまでIMEはオンである必要があるので…） jQueryオブジェクトは何度も使う場合は変数に代入しておいたほうが、探させる処理の負担を減らせるようですが
$(this)も変数に代入しておいたほうがいいですか？（$thatとか？）
それとも「既に代入された結果が$(this)であるため、その必要はない」ですか？ …と思いましたが()がある時点で引数がある、つまり関数なのでたとえthisといえど毎回処理してるということになりそうですね
やはり代入しておくほうが速い…？ jQuery のソースコードでは、冒頭部分で、よく使うものを変数に入れてる
var arr = [];
var document = window.document;
var getProto = Object.getPrototypeOf;
var slice = arr.slice;
var concat = arr.concat;
var push = arr.push;
var indexOf = arr.indexOf;
var toString = class2type.toString;
var hasOwn = class2type.hasOwnProperty;
var fnToString = hasOwn.toString;
var ObjectFunctionString = fnToString.call( Object );
変数をループの外に出す、テクニックも使っている。
ただし、ループ中に、変数が変化しないに限る
length = elems.length;
for ( ; i < length; i++ ) { }
こう書くと、毎回メソッドが呼ばれてしまうから。
for ( ; i < elems.length; i++ ) { }
JavaScript のthis は、that に代入することが多いけど、
jQuery のthis は、必ずインスタンスを指すように修正されているから、
that に代入することは少ない >>503
ディスプレイの高さでも、色々ある
タスクバーのような、固定部分を引いた画面の高さ (ピクセル単位)とか。
window.screen.availHeight
固定部分を含むのか、含まないのか >>509
Windowsのタスクバーを左でなく上（あれ、いやタスクバーはそもそも元々下か。とりあえず左や上）
に置いてる身としてはそのへんも気になりますね…今回はとりあえず大体でしたが >>507
速いが、そもそも何度も同じjQueryオブジェクトを使うと
言うところに根本的な問題がある。
正しくjQueryを使っていれば、何度も同じjQueryオブジェクトを使うことはない >>511
例えば
$that = $(this);
let val = $that.val();
let xxx = $that.attr('xxx');
let yyy = $that.attr('yyy');
....(略)
のようなものを想定していましたが、何かもっと良い方法がありましたか？
（このくらいならjQueryを使わないでthis.valueなどとしたほうがほんとは速いのでしょうけれど、
へたに混ぜると細かな差異に振り回されないか不安で…） var c = $('#car');
と、jQuery Object を変数に入れても、メソッドチェーンでも同じ
$('#car').before(何々).prepend(何々).append(何々).after(何々);
return で、そのインスタンス(jQuery Object)を戻しているから、同じ
$('#car').attr({src: 何々, title: 何々}).css({top: 50, left: 100}); >>513
あ、すみません、実際には続けてではなく離れた場所でやる場合です…
あと
$that = $(this);
$that.val( $that.val() + 'ついか' );
$that.attr( 'xxx', $that.attr('xxx') + 'ついか' );
この場合はどうですか？ $thatなんかいらない
$(this).val(function(i, value) {
return value + 'ついか';
}).attr('xxx', function(i, attr) {
return attr + 'ついか';
}); >>515
jQuery久々ですが、そういえばそういうの見かけた覚えがあります…
ドキュメント見たら普通に書いてありましたね
現代風にするとこうでしょうか…？
$(this).val( (i, value) => {
return value + 'ついか';
}).attr('xxx', (i, attr) => {
return attr + 'ついか';
});
indexは省略しても動くようですが、省略しないほうがいいんですかね？ 長いと怒られましたので二つに分けます
かなり初歩的な質問になってしまうと思いますがよろしくお願いします。
最近勉強を始めHTMLCSSでサイトを作ろうとしておりました。
その中に画像のスライダーを入れたく思い、JSもしくはjQueryで組もうと
いろんなサイトを参考にしてたのですがうまくいきません。
現状、画像が縦に並んでる状態です。
jQueryをDLしてプラグインするのは難しそうだったので
head内からファイルで読み込む方法を選択しました。
明記できない部分が多かったので消去してますが
下記のコードで直す点があれば教えていただきたいです。
下記以外のコードでも試しましたができなかったので
もっと根本的なところが間違ってるとも思うのですが <!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="■■.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js";></script>
<title>■■</title>
<style>
</style>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
//ここに指定するクラスと、先ほど<div>に指定したクラスを一致させること
});
</script>
</head> <body>
<div class="flexslider">
<ul class="slides"><!-- 必ずクラスは slides -->
<li>
<img src="1.jpg" /><!-- 表示させたい項目を<li>に囲んで並べる -->
</li>
<li>
<img src="2.jpg" />
</li>
</ul>
</div>
</div>
</body>
</html>
長くなりましたがどうぞよろしくお願いいたします 使っている、jQuery のバージョンが古くない？
それに、jQueryを2つも読み込んでいるのも、おかしい
それに、jQueryよりも先に、jquery.flexslider-min.js を読み込んでいるのも、おかしい。
たいてい、jQueryを一番先に読み込む
参考にしているソースコードが古いのでは？
「javascript jquery slider」で検索！ ありがとうございます
やはり根本的に間違えてるようですね
指摘いただいたところを直し
教えていただいた情報でやり直してみます jQueryにて
…
<div.aaa>
<div.iii>
<div.aaa>
<div.iii> ★
<div.iii> ★
<div.iii> ★
<div.aaa> ←$(this)
<div.iii>
…
$(this)から見て、違うクラス（あるいは特定のクラス）の連続した兄たち ★★★
（thisと同じクラスの兄に挟まれた兄弟）
を絞り込むにはどうすればよいでしょうか？ >>539
すみません、色々複雑になってはいますがひとまずその場で閉じているということで…
こうですね
<div.aaa></div>
<div.iii></div>
<div.aaa></div>
<div.iii></div> ←★
<div.iii></div> ←★
<div.iii></div> ←★
<div.aaa></div> ←$(this)
<div.iii></div> >>531
開始タグと終了タグの対応関係がおかしい
オレオレ用語で説明を省略しすぎ >>531
以前ちょっと使っただけだから忘れたが
prevAll(セレクタ)とかprevUntil(セレクタ)とかはどうか >>533
prevUntilを使って兄要素を全部取得、eachで直近の兄のクラスを取り、直近の兄以降のクラス判定をして格納、って感じかな >>533
prevUntil便利そうですね…！こういうのを探してました、ありがとうございます！
>>534
each…
あれ、
$a = $(this).prevAll('.aaa').first();
//ここlastにしてハマりかけましたがprevの場合は後ろから数えるんですね…
$i = $(this).prevUntil($a, '.iii');
でも行けそう？
間にあるのが.iiiだけなら
$i = $(this).prevUntil($a);
でもいいのかな？
やってみます >>535
そうそう、書き忘れたが$(this)に近い方からになるので感覚的に逆
ついでにお気づきだろうが、後ろならnextAll(セレクタ)、nextUntil(セレクタ)ね そのサイトを閲覧している間（タブを最前面にしている間）だけ動くスクリプトって作れますか？
ブックマークレットでもなんでもいいんですけど、自分用に
「このタブを閲覧しているときだけ動くストップウォッチ」
的なものが欲しくて…
つまり他のタブを閲覧中は止まるようにしたいのです
拡張機能も見かけましたがどちらかというと「今まで何時間見たか」を計るやつっぽくて
そうではなくストップウォッチ的に頻繁にスタートとリセットを繰り返しながら計測したく…
「マウスカーソルがbodyに乗ってる間だけ時計が進む」みたくすれば可能でしょうか？ >>537
visibilitychangeイベントとdocument.hidden >>538
まさにこれですね！ありがとうございます！ ■ このスレッドは過去ログ倉庫に格納されています
