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

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

ただいまの
回答率

88.13%

thisについて

解決済

回答 3

投稿

  • 評価
  • クリップ 3
  • VIEW 1,181
退会済みユーザー

退会済みユーザー

this イベントが発生したオブジェクトと聞いたのですが、
つまり下記のようにイベントファンクションでイベントを起こす要素が必ずthisになると考えてよいでしょうか?

$('textaret').click(function() {
であれば
$('必ずここがthis').click(function() { 

また、イベントの起きている要素というのもはっきりする場合とよくわからない場合があるのですが、どのように特定していますか?

初心なので、恐縮ですが、初心者にもわかるように解説いただける方にお願いします。
また、無意味にマイナス評価する人がまれにいますが、そのような迷惑行為はやめてください。通報をしておきます。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • ikedas

    2017/01/04 15:54

    マイナス評価は無意味にされているのではなく、質問の意味がわかるように書かれていないからされているのだと思います。teratailに参加なさってもう2年になるのですから、「初心者」を自称すれば他人が自分に合わせてくれる、という考えは相当無理があると思いますよ。

    キャンセル

  • Lhankor_Mhy

    2017/01/04 17:02

    ご意見も分かるんですが、「ちょっとマイナス評価つけすぎじゃないの……?」と思うこともあるんですよねえ。目障りな質問をフィードから消すためにやってるんでしょうけれど、あまり良いことではないような気もしてます。本当はNGユーザー登録とかあるといいんですけどね。

    キャンセル

  • think49

    2017/01/04 19:25

    +/-評価は「評価された理由」が明示されないので質問者に意図が伝わりづらいのだと思います。評価と一緒にコメントで指摘すればいいのですが、逆ギレされたり、無視して自己都合を押し付けられたりと不快な思いをする場合も多いのでコメントせずに評価する人が多い傾向にあるのかなと。通報して運営に認められるとシステムで定型文による指摘をしてくれますが、定型文の種類が不足しているのか、不適切な定型文による指摘が多くてそれがまた質問者に伝わらない原因になっていると思います。

    キャンセル

回答 3

checkベストアンサー

+3

thisは確かに分かりづらいですよね。
thisのイメージをつかむには、コンテキスト、つまり「文脈」を理解するといいと思います。

今、その関数を実行しているのは誰か、を考えるということです。
日本語でも「ここ」と言われた場合、家の中か、駅のホームか、オフィスか学校か。
「今いる場所=文脈」によって意味が変わりますよね。

例えば上記の例で言えば「ここのトイレはどこですか?」と聞けば、大概の人は今その場にいる場所のトイレの場所を教えてくれるでしょう。
まさか自分の家のトイレの場所を教える人はいないと思います。

そして仮にthisがなかった場合、結構めんどくさいことになります。
すでに駅構内にいるのに「○○駅のトイレはどこですか?」なんて聞く人はいません。
しかし、thisがなかった場合はこれと同じような回りくどい指定をしないとならなくなります。

こうしためんどくささを解消するのがthisの役割です。

そしてJavaScriptの場合、このthisが結構頻繁にころころ変わるため、初学者を苦しめる要因でもあると思います。

つまり今回の場合で言えば、click関数をつけた要素がthisになる、ということですね。
実際コーディングしていくと、thisclick関数をつけた要素自体を指してくれているほうが便利なことが多いです。
(クリックされたら要素の色を変える、とかの場合ならなおさらクリックされた要素=thisという状況が望ましいですよね)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/05 08:49

    長くなって恐縮なので、別の質問にしますね。
    おそらくプログラミングでないといわれますが

    キャンセル

  • 2017/01/05 10:06

    そうですねw 主題と離れてきているので別の質問にしたほうがよさそうです。

    最後にお答えすると、そのあたりは「色々やってみる」でいいと思います。
    持論になってしまいますが、「学習は違いを見つけること」と思っています。

    つまり、色々な視点から見ることで物事が立体的に見えてきて、本質が理解できる、というようなイメージです。
    なので、「学問に王道なし」の通り、色々と触ってみるのがいいと思っています。
    (つまり、興味が出たもの、やりたいと思ったものから着手するってことです)

    キャンセル

  • 2017/01/05 11:24

    ありがとうございました。
    別質問にしましたのでよかったら見てください。

    ES6の生のJSだけでも、jqueryでも自分の好みでよさそうですね。

    キャンセル

+1

質問の意味がさっぱりわからないので閲覧者にもわかるよう説明してほしいのですが・・・
clickないで指定したthisは自分自身でまちがいありません。

<script>
$(function(){
  $('textarea').click(function() { 
    console.log($(this).val());
  });
});
</script>
<textarea>x</textarea>
<textarea>y</textarea>
<textarea>z</textarea>

 イベントに関する追記

ちょっと複雑な書き方になると、document全体からtextareaタグ(セレクタ)に対して
複数のイベントを拾う場合こうなります

<script>
$(function(){
  $(document).on('mouseover click change','textarea',function(e) { 
    console.log($(this).val());
    console.log(e.type);
  });
});
</script>
<textarea id="XXX">x</textarea>
<textarea id="YYY">y</textarea>
<textarea id="ZZZ">z</textarea>


イベントはあくまで所定のトリガーから発生したまさに「イベント」でしかなく
thisは自分自身を指定するためのオブジェクトでしかないです

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/04 12:08

    上記のように明らかにこの要素が色がかわったり、動いたりホバーしたりする場合は、
    その要素がイベントが起きているとわかりますが、
    もっと微妙な場合よくわからなくなりませんか?

    またイベントという概念も、ホバーなどはわかりやすいですが、
    見た目も大きな変化がないようなものもイベントなのか、イベントという単語の概念もはっきりしません。

    キャンセル

  • 2017/01/04 12:20

    イベントの拾い方など追記しました

    キャンセル

+1

イベントの起きている要素というのもはっきりする場合とよくわからない場合があるのですが、どのように特定していますか?

↓これらを参照します。

イベントを発生させたオブジェクトへの参照します。
Event.target - Web API インターフェイス | MDN

イベントは DOM を横断するので、イベントの現在のターゲットを識別します。イベントが発生した要素を特定する event.target とは対照的に、常にイベントハンドラがアタッチされた要素を参照します。
Event.currentTarget - Web API インターフェイス | MDN

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る