質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

578閲覧

jQueryのイベントをアロー関数で記述するとエラーが発生してしまいます。

taka_oct092018

総合スコア133

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2022/05/20 06:33

問題の箇所は行番号28と40です。
function()に置き換えると正常に作動します。
アロー関数ではどのように設定すればいいのでしょうか。
よろしくお願い致します。

$(() => { let duration, // スクロールのスピード。(ミリ秒) flagDirection, // スクロールの方向。(左:-1, 右:1) interval, // スクロールのインターバル。(ミリ秒) nextBtn, // 次へ進めるためのボタン。 prevBtn, // 前へ戻るボタン。 timer, // タイマー。 ulSlide; // #slide内のul要素。 duration = 700; flagDirection = -1; interval = 3000; nextBtn = $('#nextBtn'); prevBtn = $('#prevBtn'); ulSlide = $('#slide ul'); /* * 画像を一枚分左右にスライドさせる関数。 * @param : no parameters * @returns : no return values */ function slideTimer() { if (flagDirection === -1) { // ul要素の位置を画像一枚分左へ移動させる。 ulSlide.animate({ 'left' : '-=1000px' }, duration, () => { // 問題の箇所 行番号28 ********** // 最初の画像をul要素内末尾に移動させる。 $(this).append($('#slide li:first-child')); // ul要素の位置を画像一枚分左へ移動させる。 $(this).css('left', -1000); }); } else { // ul要素の位置を画像一枚分右へ移動させる。 ulSlide.animate({ 'left' : '+=1000px' }, duration, () => { // 問題の箇所 行番号40 ********** // 最後の画像をul要素内先頭に移動させる。 $(this).prepend($('#slide li:last-child')); // ul要素の位置を画像一枚分左へ移動させる。 $(this).css('left', -1000); // フラグを左方向へリセット。 flagDirection = -1; }); } } // リストの順番を変更。(3番めを1番目にする) ulSlide.prepend($('#slide li:last-child')); // ul要素の位置を画像一枚分左へ移動させる。 ulSlide.css('left', -1000); // 変数intervalの値ごとにslideTimer()関数を実行。 timer = setInterval(slideTimer, interval); // 前へ戻るボタン。 prevBtn.click(() => { // スクロール方向の切り替え。右。 flagDirection = 1; // タイマーを停止して再スタート。 clearInterval(timer); timer = setInterval(slideTimer, interval); // 初回の関数実行。 slideTimer(); }); // 次へ進めるためのボタン。 nextBtn.click(() => { // スクロール方向の切り替え。左。 flagDirection = -1; // タイマーを停止して再スタート。 clearInterval(timer); timer = setInterval(slideTimer, interval); // 初回の関数実行。 slideTimer(); }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

コールバックにアロー関数を使うとjQueryが準備するthis が使えなくなってしまいますので、this が必要ならアロー関数は使わない方がよいです。

アロー関数にするなら this を使わないよう書き換える必要があります。この場合は $(this)ulSlide に置き換えればいいのかもしれません。

投稿2022/05/20 06:53

int32_t

総合スコア20884

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taka_oct092018

2022/05/21 09:00

int32_t様 返信ありがとうございます。 jQueryではアロー関数の使用は控えます。
guest

0

汎用性が最重要なjQueryですからアロー関数を使うのは避けたほうが良いと思います。
ES6レベルであればjQueryがなくても大抵のことはできますし

投稿2022/05/20 06:44

yambejp

総合スコア114843

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2022/05/20 07:20

あえてやるならthisをコールバックにbindすることでしょうけど 書き方も汚くなるのでjQueryの良さが半減するし悪手ですね
taka_oct092018

2022/05/21 08:58

yambejp様 返信ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問