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

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

ただいまの
回答率

90.35%

  • JavaScript

    17472questions

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

thisについて

解決済

回答 3

投稿

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

退会済みユーザー

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/04 17:06

    ご丁寧なご回答ありがとうございます。

    >>>
    そしてJavaScriptの場合、このthisが結構頻繁にころころ変わるため、初学者を苦しめる要因でもあると思います。
    つまり今回の場合で言えば、click関数をつけた要素がthisになる、ということですね。
    実際コーディングしていくと、thisがclick関数をつけた要素自体を指してくれているほうが便利なことが多いです。
    (クリックされたら要素の色を変える、とかの場合ならなおさらクリックされた要素=thisという状況が望ましいですよね)

    複雑になるといったいどれがイベントを起こしているのかよくわからなくなることがあるんですよね。
    何か文法上などの見つけるコツなどありませんでしょうか?

    thisがclick関数をつけた要素自体を指してくれているほうが便利なことが多いです。
    とは自分でthisを何にするか決めることができるのですか?
    勝手に決まってしまうのかと思いました。
    ホバーならホバーでアニメーションが起こる要素など決まっているのではないのですか?



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

    イベントファンクションのついている要素が必ずthisと決まっているということでしょうか?
    下記のように().イベントファンクションとなっている、.つながりの始めの()が必ずthisなのでしょうか?
    (this).click()
    (this).hover()
    (this).mouseover()

    キャンセル

  • 2017/01/04 17:13

    >とは自分でthisを何にするか決めることができるのですか?
    >勝手に決まってしまうのかと思いました。
    すみません、書き方が悪かったですね。
    これは自分で決めることはできません。自動的に決まってしまいます。

    >イベントファンクションのついている要素が必ずthisと決まっているということでしょうか?
    そうですね。基本的にはこの解釈で間違いないです。

    少し気になったのは、質問者さんの解釈がjQueryベースに寄っているところです。
    jQueryなどのライブラリを使うと色々と便利にしてくれますが、この「便利にしてくれる」ところで、本来ならそうならないはずの挙動を書き換えている、という可能性もありえます。
    (今回の例ではそれに当たりませんが、可能性の話です)

    なので、興味が出てきたら生のJavaScript自体も学ぶともう少し理解が深まると思いますよ。

    それから、
    >何か文法上などの見つけるコツなどありませんでしょうか?
    コツということですが、イベントをつける場合は基本的にはイベントの設定をした要素自体が`this`になると覚えておいていいと思います。
    逆にそれ以外で`this`を意識する必要があるのはclassなどを利用した場合です。

    もしまだclassを利用した設計をしたことがないのであれば、当面はイベントをつけた要素=`this`という解釈でいいと思います。

    キャンセル

  • 2017/01/04 17:52

    イベントファンクションのついている要素が必ずthisと決まっているということでしょうか?
    下記のように().イベントファンクションとなっている、.メソッドとつながっている始めの(要素名)が必ずthisということですね。
    (this).click()
    (this).hover()
    (this).mouseover()

    という認識でよいのですね。

    classはおそらくJSの新しい機能のことなんでしょうが、私はcssのクラスしか知らないので、
    JSのclassをやるまでは上記の認識でよいですね。


    >>>
    少し気になったのは、質問者さんの解釈がjQueryベースに寄っているところです。
    jQueryなどのライブラリを使うと色々と便利にしてくれますが、この「便利にしてくれる」ところで、本来ならそうならないはずの挙動を書き換えている、という可能性もありえます。
    (今回の例ではそれに当たりませんが、可能性の話です)
    なので、興味が出てきたら生のJavaScript自体も学ぶともう少し理解が深まると思いますよ。

    jqueryやreactだけなど、ライブラリだけをなさっている人もかなりいると聞きますので、
    jqueryだけでほとんど行ってしまっても問題ないと思っていたのですが、そうではないのでしょうか?

    もちろんJSのたにぐちまことの初級本を読んではいますが、これで十分ではないのでしょうか?
    今は生のJSで書くとものすごく大変なのでほとんどライブラリを使うと聞いたのですが、
    そうでもないのですか?

    生のJSで書いていくことに大きな意味があるのでしょうか?

    キャンセル

  • 2017/01/04 18:08

    その質問には、@webpageさんの今後のやりたいことによるのでなんともむずかしい話ですが、個人的な話をすれば、やはり生のJSを学ぶことはとても大事だと思っています。

    ライブラリやフレームワークを使うのは、ご自身がおっしゃっている通り「ものすごく大変だから」です。
    つまり、大変だから楽をしているのであって、できないことを代替えしてもらっているわけではない、ということです。

    例えば、作りたい機能がjQuery内にない場合、やはり自作せざるを得ません。
    そういうときに「できません」となるかどうかの違いかなと思います。

    このあたりはどういうスタンスでJSを使っているかにもよるので一概に生のJSをさらわないとダメ!とは言えませんが、今後JSをがっつり使っていきたいと考えているのであれば、生のJSを学ぶことは重要な意味を持つと考えています。

    キャンセル

  • 2017/01/04 18:24

    今WEBのフロント周りを中心に行っています。
    ただワードプレスを使った作業ができないのと、AIで将来ワードプレスはクライアントでも使えるようになてしまったり、選択してワンクリックでWEBができてしまうようになるのではと思っているので、あまり将来性がないことなのでやりたくありません。
    その代わりサーバサイドを足すか、ハイブリットアプリ制作の仕事を足そうかなと思っています。

    jqueryでまずだいたいのことをできるようになったら、reactかvueかriotに昇格しようと思っているのですが、これらでもできない事なんてあるのでしょうか?

    仕事でこれらでできない要望が来て生のJSでガリガリ書くようなことも結構あるのですか?

    キャンセル

  • 2017/01/04 18:25

    イベントファンクションのついている要素が必ずthisと決まっているということでしょうか?
    下記のように().イベントファンクションとなっている、.メソッドとつながっている始めの(要素名)が必ずthisということですね。
    (this).click()
    (this).hover()
    (this).mouseover()

    という認識でよいのですね。



    上記はOKなのですね

    キャンセル

  • 2017/01/04 18:30

    そうですね。イメージとしてはそれで正しいです。

    んー、そのあたりについては正直なんとも言えないです。
    今後どういうレイヤーで仕事していくか、によるので。
    ただ経験上、なにかしらのフレームワークを使っていて、その内部をまったく見ずに解決する、というのは少なかったです。
    どうしても挙動がおかしくて内部を調べてみたり、あるいは(若干でも)フレームワークの一部を変更するケースがありました。
    そしてこれらはやはり、内部の構造やどうしてそれらが動いているかの仕組みを知らないと手が出せない部分だと思います。

    とはいえ、必須で発生していたわけではないので、必要が出てきてから、くらいでいいと思います。
    老婆心ながら言うのであれば、そのときは必ず来るであろうということですかね。
    なので今のうちからやっておいて損はないかなと。

    キャンセル

  • 2017/01/04 21:19

    JSでの仕事ですと、WEBのフロントが一番多く次はnodeでサーバサイド、そしてそろそろハイブリットアプリ制作の仕事がネイティブに匹敵するくらい仕事が増えてきているのですかね?
    ハイブリットアプリ制作の仕事はおそらく今後WEBを超えて一番多くなるのではないでしょうか?
    しかもwebと違ってできる人もまだ少ないのでもうかりそうですね。

    jqueryやreactを使ったとしても、それで問題なくできることばかりではなく、
    なぜかうまくいかないのでこれらの関数が生のJSでどのように作られているのかを確認して、
    自分で修正したりすることも決して珍しくはないのですね。
    それですと、生のJSでガリガリ書けないと結局対処できないのでしょうか?

    するとまず簡単なjqueryで好きなことを実現できたら、react、vueにはいかずに生のJSのみで同じように好きなことを実現できるようになり、そもそもこれができればその他は必要ないと考えても良いのですかね?

    jqueryを使わずいきなり生のJSからというのはさすがに難しそうですよね。

    キャンセル

  • 2017/01/04 21:22

    また、今はbabelを使ってES6でもかけるので、文法なども古いJSと違いとても良いという話を聞きます。
    私のような初心者も初めからES6で始めてしまった方が良いのでしょうか?
    ただ初心者用のサイトや本はES6でもうありますか?

    そしてES6になったからと言って、やはりライブラリを使わないととんでもない量の記述をしないとjqueryのようにちょろっと書いただけで色々できるというわけでは相変わらずないのですよね。

    キャンセル

  • 2017/01/04 22:24

    たにぐちまことのよくわかるjavascriptの教科書を読んだ私くらいでは下記でいきなりES6に移るというのは難しいですかね?
    改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで 大型本 – 2016/9/30

    大丈夫そうなら重そうな本なので持ち歩きが厳しそうですが、こちらを買って、
    すぐにこちらに移っても良いかなと思いました。

    また先ほどES6があれば、記述量もだいぶ減ったのでjqueryなしでES6だけでも十分短くかけるのでこちらのみで他は必要ないとも聞きました。
    もしそうならすぐに切り替えてしまおうかなと思っています。

    キャンセル

  • 2017/01/04 22:36

    うーん、確かに難しいところですね。
    ただ確かに、今後はどんどんES6で書いていくケースが増えていくでしょうし、bableを使って記述すること前提ならES6から入ってもいいかもしれません。

    まぁどの言語、どのタイミングにも言えることですが、調べ物をしていると新しい情報と古い情報が混ざって出て来るので、それがどちらのことなのか、を見極める力は必要です。

    ひとつ注意してほしいのは、今回の質問の主旨であった`this`については依然としてハマる可能性があります。たとえES6になったとしても。

    ES6で書くかどうかはあくまで文法の違いでしかありません。
    どの言語も共通して言えるのは、ときとともにトレンドが変わり、変わったことによって記述方法が冗長になったり、あるいは要望が増えるにつれてその記述法を簡単にしていく、便利にしていく、ということです。
    これはJSに限ったことではありません。

    なにが言いたいかというと、ES6うんぬんが大事ではなく、JSという言語のコンセプトや思想など、つまり本質を学ばないと、ただの書き方を覚えるだけになってしまう、ということです。
    そのあたりも含めて、生JSを書くと見えてくるものがあるので、生JSを書くことを勧めた、というのもあります。

    逆を返せば、ある程度そうした本質を学んでおけば、ES6へは比較的すぐに移行できると思います。

    キャンセル

  • 2017/01/05 08:00

    コンピューターサイエンスと一緒で9割の基礎は変わらず、1割だけ書き方が変わっただけなのですね。
    改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
    を即購入してこちらにすぐに移行しても良いし、今のまま一年くらいES5で行ってからES6に行ってもどちらでもありという状況のようですね。
    ありがとうございます。

    キャンセル

  • 2017/01/05 08:19

    基礎だけやったら、
    改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用
    に移ってもいいですね。

    またES6の本やサイトで初心者用が見当たらない気がするのですが、
    良い本やサイトをもしご存知でしたら教えていただければありがたいです。

    >>>
    先ほどES6があれば、記述量もだいぶ減ったのでjqueryなしでES6だけでも十分短くかけるのでこちらのみで他は必要ないとも聞きました。

    こちらはどうですか?やはりちょっと短くなった程度で、やっぱりjqueyのほうが圧倒的に短くて簡単なのは相変わらずですかね?

    キャンセル

  • 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で質問しよう!

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

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

  • JavaScript

    17472questions

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