Q&A
マイナス評価は無意味にされているのではなく、質問の意味がわかるように書かれていないからされているのだと思います。teratailに参加なさってもう2年になるのですから、「初心者」を自称すれば他人が自分に合わせてくれる、という考えは相当無理があると思いますよ。
this イベントが発生したオブジェクトと聞いたのですが、
つまり下記のようにイベントファンクションでイベントを起こす要素が必ずthisになると考えてよいでしょうか？
$('textaret').click(function() {
であれば
$('必ずここがthis').click(function() {
また、イベントの起きている要素というのもはっきりする場合とよくわからない場合があるのですが、どのように特定していますか？
初心なので、恐縮ですが、初心者にもわかるように解説いただける方にお願いします。
また、無意味にマイナス評価する人がまれにいますが、そのような迷惑行為はやめてください。通報をしておきます。
ご意見も分かるんですが、「ちょっとマイナス評価つけすぎじゃないの……？」と思うこともあるんですよねえ。目障りな質問をフィードから消すためにやってるんでしょうけれど、あまり良いことではないような気もしてます。本当はNGユーザー登録とかあるといいんですけどね。
+/-評価は「評価された理由」が明示されないので質問者に意図が伝わりづらいのだと思います。評価と一緒にコメントで指摘すればいいのですが、逆ギレされたり、無視して自己都合を押し付けられたりと不快な思いをする場合も多いのでコメントせずに評価する人が多い傾向にあるのかなと。通報して運営に認められるとシステムで定型文による指摘をしてくれますが、定型文の種類が不足しているのか、不適切な定型文による指摘が多くてそれがまた質問者に伝わらない原因になっていると思います。
回答3件
0
ベストアンサー
thisは確かに分かりづらいですよね。
thisのイメージをつかむには、コンテキスト、つまり「文脈」を理解するといいと思います。
今、その関数を実行しているのは誰か、を考えるということです。
日本語でも「ここ」と言われた場合、家の中か、駅のホームか、オフィスか学校か。
「今いる場所＝文脈」によって意味が変わりますよね。
例えば上記の例で言えば「ここのトイレはどこですか？」と聞けば、大概の人は今その場にいる場所のトイレの場所を教えてくれるでしょう。
まさか自分の家のトイレの場所を教える人はいないと思います。
そして仮にthisがなかった場合、結構めんどくさいことになります。
すでに駅構内にいるのに「○○駅のトイレはどこですか？」なんて聞く人はいません。
しかし、thisがなかった場合はこれと同じような回りくどい指定をしないとならなくなります。
こうしためんどくささを解消するのがthisの役割です。
そしてJavaScriptの場合、このthisが結構頻繁にころころ変わるため、初学者を苦しめる要因でもあると思います。
つまり今回の場合で言えば、click関数をつけた要素がthisになる、ということですね。
実際コーディングしていくと、thisがclick関数をつけた要素自体を指してくれているほうが便利なことが多いです。
（クリックされたら要素の色を変える、とかの場合ならなおさらクリックされた要素＝thisという状況が望ましいですよね）
投稿2017/01/04 07:32
編集2017/01/04 07:38
総合スコア2283
ご丁寧なご回答ありがとうございます。
＞＞＞
そしてJavaScriptの場合、このthisが結構頻繁にころころ変わるため、初学者を苦しめる要因でもあると思います。
つまり今回の場合で言えば、click関数をつけた要素がthisになる、ということですね。
実際コーディングしていくと、thisがclick関数をつけた要素自体を指してくれているほうが便利なことが多いです。
（クリックされたら要素の色を変える、とかの場合ならなおさらクリックされた要素＝thisという状況が望ましいですよね）
複雑になるといったいどれがイベントを起こしているのかよくわからなくなることがあるんですよね。
何か文法上などの見つけるコツなどありませんでしょうか？
thisがclick関数をつけた要素自体を指してくれているほうが便利なことが多いです。
とは自分でthisを何にするか決めることができるのですか？
勝手に決まってしまうのかと思いました。
ホバーならホバーでアニメーションが起こる要素など決まっているのではないのですか？
＞＞＞
今、その関数を実行しているのは誰か、を考えるということです。
日本語でも「ここ」と言われた場合、家の中か、駅のホームか、オフィスか学校か。
「今いる場所＝文脈」によって意味が変わりますよね。
イベントファンクションのついている要素が必ずthisと決まっているということでしょうか？
下記のように().イベントファンクションとなっている、.つながりの始めの()が必ずthisなのでしょうか？
（this）.click()
（this）.hover()
（this）.mouseover()
>とは自分でthisを何にするか決めることができるのですか？
>勝手に決まってしまうのかと思いました。
すみません、書き方が悪かったですね。
これは自分で決めることはできません。自動的に決まってしまいます。
>イベントファンクションのついている要素が必ずthisと決まっているということでしょうか？
そうですね。基本的にはこの解釈で間違いないです。
少し気になったのは、質問者さんの解釈がjQueryベースに寄っているところです。
jQueryなどのライブラリを使うと色々と便利にしてくれますが、この「便利にしてくれる」ところで、本来ならそうならないはずの挙動を書き換えている、という可能性もありえます。
（今回の例ではそれに当たりませんが、可能性の話です）
なので、興味が出てきたら生のJavaScript自体も学ぶともう少し理解が深まると思いますよ。
それから、
>何か文法上などの見つけるコツなどありませんでしょうか？
コツということですが、イベントをつける場合は基本的にはイベントの設定をした要素自体が`this`になると覚えておいていいと思います。
逆にそれ以外で`this`を意識する必要があるのはclassなどを利用した場合です。
もしまだclassを利用した設計をしたことがないのであれば、当面はイベントをつけた要素＝`this`という解釈でいいと思います。
イベントファンクションのついている要素が必ずthisと決まっているということでしょうか？
下記のように().イベントファンクションとなっている、.メソッドとつながっている始めの(要素名)が必ずthisということですね。
（this）.click()
（this）.hover()
（this）.mouseover()
という認識でよいのですね。
classはおそらくJSの新しい機能のことなんでしょうが、私はcssのクラスしか知らないので、
JSのclassをやるまでは上記の認識でよいですね。
＞＞＞
少し気になったのは、質問者さんの解釈がjQueryベースに寄っているところです。
jQueryなどのライブラリを使うと色々と便利にしてくれますが、この「便利にしてくれる」ところで、本来ならそうならないはずの挙動を書き換えている、という可能性もありえます。
（今回の例ではそれに当たりませんが、可能性の話です）
なので、興味が出てきたら生のJavaScript自体も学ぶともう少し理解が深まると思いますよ。
jqueryやreactだけなど、ライブラリだけをなさっている人もかなりいると聞きますので、
jqueryだけでほとんど行ってしまっても問題ないと思っていたのですが、そうではないのでしょうか？
もちろんJSのたにぐちまことの初級本を読んではいますが、これで十分ではないのでしょうか？
今は生のJSで書くとものすごく大変なのでほとんどライブラリを使うと聞いたのですが、
そうでもないのですか？
生のJSで書いていくことに大きな意味があるのでしょうか？
その質問には、@webpageさんの今後のやりたいことによるのでなんともむずかしい話ですが、個人的な話をすれば、やはり生のJSを学ぶことはとても大事だと思っています。
ライブラリやフレームワークを使うのは、ご自身がおっしゃっている通り「ものすごく大変だから」です。
つまり、大変だから楽をしているのであって、できないことを代替えしてもらっているわけではない、ということです。
例えば、作りたい機能がjQuery内にない場合、やはり自作せざるを得ません。
そういうときに「できません」となるかどうかの違いかなと思います。
このあたりはどういうスタンスでJSを使っているかにもよるので一概に生のJSをさらわないとダメ！とは言えませんが、今後JSをがっつり使っていきたいと考えているのであれば、生のJSを学ぶことは重要な意味を持つと考えています。
今WEBのフロント周りを中心に行っています。
ただワードプレスを使った作業ができないのと、AIで将来ワードプレスはクライアントでも使えるようになてしまったり、選択してワンクリックでWEBができてしまうようになるのではと思っているので、あまり将来性がないことなのでやりたくありません。
その代わりサーバサイドを足すか、ハイブリットアプリ制作の仕事を足そうかなと思っています。
jqueryでまずだいたいのことをできるようになったら、reactかvueかriotに昇格しようと思っているのですが、これらでもできない事なんてあるのでしょうか？
仕事でこれらでできない要望が来て生のJSでガリガリ書くようなことも結構あるのですか？
イベントファンクションのついている要素が必ずthisと決まっているということでしょうか？
下記のように().イベントファンクションとなっている、.メソッドとつながっている始めの(要素名)が必ずthisということですね。
（this）.click()
（this）.hover()
（this）.mouseover()
という認識でよいのですね。
上記はOKなのですね
そうですね。イメージとしてはそれで正しいです。
んー、そのあたりについては正直なんとも言えないです。
今後どういうレイヤーで仕事していくか、によるので。
ただ経験上、なにかしらのフレームワークを使っていて、その内部をまったく見ずに解決する、というのは少なかったです。
どうしても挙動がおかしくて内部を調べてみたり、あるいは（若干でも）フレームワークの一部を変更するケースがありました。
そしてこれらはやはり、内部の構造やどうしてそれらが動いているかの仕組みを知らないと手が出せない部分だと思います。
とはいえ、必須で発生していたわけではないので、必要が出てきてから、くらいでいいと思います。
老婆心ながら言うのであれば、そのときは必ず来るであろうということですかね。
なので今のうちからやっておいて損はないかなと。
JSでの仕事ですと、WEBのフロントが一番多く次はnodeでサーバサイド、そしてそろそろハイブリットアプリ制作の仕事がネイティブに匹敵するくらい仕事が増えてきているのですかね？
ハイブリットアプリ制作の仕事はおそらく今後WEBを超えて一番多くなるのではないでしょうか？
しかもwebと違ってできる人もまだ少ないのでもうかりそうですね。
jqueryやreactを使ったとしても、それで問題なくできることばかりではなく、
なぜかうまくいかないのでこれらの関数が生のJSでどのように作られているのかを確認して、
自分で修正したりすることも決して珍しくはないのですね。
それですと、生のJSでガリガリ書けないと結局対処できないのでしょうか？
するとまず簡単なjqueryで好きなことを実現できたら、react、vueにはいかずに生のJSのみで同じように好きなことを実現できるようになり、そもそもこれができればその他は必要ないと考えても良いのですかね？
jqueryを使わずいきなり生のJSからというのはさすがに難しそうですよね。
また、今はbabelを使ってES6でもかけるので、文法なども古いJSと違いとても良いという話を聞きます。
私のような初心者も初めからES6で始めてしまった方が良いのでしょうか？
ただ初心者用のサイトや本はES6でもうありますか？
そしてES6になったからと言って、やはりライブラリを使わないととんでもない量の記述をしないとjqueryのようにちょろっと書いただけで色々できるというわけでは相変わらずないのですよね。
たにぐちまことのよくわかるjavascriptの教科書を読んだ私くらいでは下記でいきなりES6に移るというのは難しいですかね？
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで 大型本 – 2016/9/30
大丈夫そうなら重そうな本なので持ち歩きが厳しそうですが、こちらを買って、
すぐにこちらに移っても良いかなと思いました。
また先ほどES6があれば、記述量もだいぶ減ったのでjqueryなしでES6だけでも十分短くかけるのでこちらのみで他は必要ないとも聞きました。
もしそうならすぐに切り替えてしまおうかなと思っています。
うーん、確かに難しいところですね。
ただ確かに、今後はどんどんES6で書いていくケースが増えていくでしょうし、bableを使って記述すること前提ならES6から入ってもいいかもしれません。
まぁどの言語、どのタイミングにも言えることですが、調べ物をしていると新しい情報と古い情報が混ざって出て来るので、それがどちらのことなのか、を見極める力は必要です。
ひとつ注意してほしいのは、今回の質問の主旨であった`this`については依然としてハマる可能性があります。たとえES6になったとしても。
ES6で書くかどうかはあくまで文法の違いでしかありません。
どの言語も共通して言えるのは、ときとともにトレンドが変わり、変わったことによって記述方法が冗長になったり、あるいは要望が増えるにつれてその記述法を簡単にしていく、便利にしていく、ということです。
これはJSに限ったことではありません。
なにが言いたいかというと、ES6うんぬんが大事ではなく、JSという言語のコンセプトや思想など、つまり本質を学ばないと、ただの書き方を覚えるだけになってしまう、ということです。
そのあたりも含めて、生JSを書くと見えてくるものがあるので、生JSを書くことを勧めた、というのもあります。
逆を返せば、ある程度そうした本質を学んでおけば、ES6へは比較的すぐに移行できると思います。
コンピューターサイエンスと一緒で9割の基礎は変わらず、1割だけ書き方が変わっただけなのですね。
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
を即購入してこちらにすぐに移行しても良いし、今のまま一年くらいES5で行ってからES6に行ってもどちらでもありという状況のようですね。
ありがとうございます。
基礎だけやったら、
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用
に移ってもいいですね。
またES6の本やサイトで初心者用が見当たらない気がするのですが、
良い本やサイトをもしご存知でしたら教えていただければありがたいです。
＞＞＞
先ほどES6があれば、記述量もだいぶ減ったのでjqueryなしでES6だけでも十分短くかけるのでこちらのみで他は必要ないとも聞きました。
こちらはどうですか？やはりちょっと短くなった程度で、やっぱりjqueyのほうが圧倒的に短くて簡単なのは相変わらずですかね？
長くなって恐縮なので、別の質問にしますね。
おそらくプログラミングでないといわれますが
そうですねｗ 主題と離れてきているので別の質問にしたほうがよさそうです。
最後にお答えすると、そのあたりは「色々やってみる」でいいと思います。
持論になってしまいますが、「学習は違いを見つけること」と思っています。
つまり、色々な視点から見ることで物事が立体的に見えてきて、本質が理解できる、というようなイメージです。
なので、「学問に王道なし」の通り、色々と触ってみるのがいいと思っています。
（つまり、興味が出たもの、やりたいと思ったものから着手するってことです）
ありがとうございました。
別質問にしましたのでよかったら見てください。
ES6の生のJSだけでも、jqueryでも自分の好みでよさそうですね。
0
イベントの起きている要素というのもはっきりする場合とよくわからない場合があるのですが、どのように特定していますか？
↓これらを参照します。
イベントを発生させたオブジェクトへの参照します。
Event.target - Web API インターフェイス | MDN
イベントは DOM を横断するので、イベントの現在のターゲットを識別します。イベントが発生した要素を特定する event.target とは対照的に、常にイベントハンドラがアタッチされた要素を参照します。
投稿2017/01/04 06:52
総合スコア36074
0
質問の意味がさっぱりわからないので閲覧者にもわかるよう説明してほしいのですが・・・
clickないで指定したthisは自分自身でまちがいありません。
javascript
1<script> 2$(function(){ 3 $('textarea').click(function() { 4 console.log($(this).val()); 5 }); 6}); 7</script> 8<textarea>x</textarea> 9<textarea>y</textarea> 10<textarea>z</textarea> 11
イベントに関する追記
ちょっと複雑な書き方になると、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 03:05
編集2017/01/04 03:19
総合スコア114769
上記のように明らかにこの要素が色がかわったり、動いたりホバーしたりする場合は、
その要素がイベントが起きているとわかりますが、
もっと微妙な場合よくわからなくなりませんか？
またイベントという概念も、ホバーなどはわかりやすいですが、
見た目も大きな変化がないようなものもイベントなのか、イベントという単語の概念もはっきりしません。
イベントの拾い方など追記しました
あなたの回答
tips
プレビュー
