プログラミング学習初心者のための情報メディア
地域によっては、外出自粛要請がでています。
不要不急な外出は控えて、自宅でオンライン動画をつかって学習しませんか？
世界最大級の学習プラットフォームUdemy(ユーデミー)で使える、期間限定の割引クーポンを配布します。
2020/7/9（木）より30日間。
下記リンクを経由すると、Udemyコースが割引価格で受講できます。
より良いコースにしていきたいため、ぜひレビューをお願いいたします。
良い週末をお過ごしください。
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
JavaScriptの「this」は他の言語と比較し挙動に少々癖があります。呼び出し方によってどの値を指すかが変わるためです。
思ったような値が得られない時は、thisの呼び出し方に問題があるかもしれません。
この記事では呼び出し方の違いによるthisの挙動を説明します。
まずはよく使われるオーソドックスな呼び出し方を見ていきましょう。
value = 1;
var obj = {
value: 2,
func: function() { console.log(this.value) }
}
function func() { console.log(this.value) }
var test = obj.func;
console.log(this.value); //①
obj.func(); //②
test(); //③
func(); //④
上記①②③④では何が表示されるでしょうか。少し考えてみてください。
答えは下記のようになります。
> 1 //① > 2 //② > 1 //③ > 1 //④
正解できましたか？
①②③④はいずれもthis.valueの呼び出しをしていますが、この通り表示される値が違います。なぜこのようになるのか、順を追って説明していきます。
①ではthisをグローバルコンテキスト（関数やオブジェクトの外側）で呼び出しています。この場合、thisにはグローバルオブジェクトが入ります。
グローバルオブジェクトはJavaScriptが実行される環境により変わるのですが、ブラウザの場合はWindowオブジェクトとなります。
下記のようにconsole.logでthisを表示させればグローバルオブジェクトが何なのか確認できます。
console.log(this); //> [object Window]が表示される
今回は1行目でvalue = 1;としたことで、このグローバルオブジェクトにvalueという値が定義され1が代入されていたため1が表示されました。
このように、グローバルコンテキストでthisを呼び出すと、グローバルオブジェクトが入ります。
②は「objオブジェクトのfunc」をメソッド呼び出しています。
このように「〇〇.func();」といった具合で関数呼び出しの前に「〇〇.」がつく場合、関数「func」のスコープ内でのthisが指すのは前置きの〇〇が示すオブジェクトです。
この例ではobjのfunc関数スコープ内でthisが呼び出されているので、このthisが指すのは自分自身であるobjオブジェクトですね。
そしてobjは自身のvalueを持つため、結果的にthis.valueはこれを呼び出して2が入ります。
③は同じくobjの中で定義されたfuncを実行しているのですが、testにobj.funcを代入したあとでtest();と前置きなしで呼び出されていますね。
このように、グローバルコンテキストで前置きなしに関数だけが呼び出されている場合の関数内thisは、次項の「関数呼び出し」のケースにあたりグローバルオブジェクトを指すため1が表示されます。
④はグローバルコンテキストで定義された関数funcを呼び出しています。メソッド呼び出しではないので、「〇〇.」のような前置きはありません。
この場合の関数内thisもグローバルオブジェクトを指します。
グローバルオブジェクト（ブラウザで実行の場合はWindowオブジェクト）のvalueは一行目で定義されている通り1なので、1が表示されるわけです。
基礎編で見たように、thisの挙動は呼び出し方によって変わります。thisに何を入れたいかを明示的に指定するためのいくつかの方法を紹介します。
ES6からはアロー関数が使用できるようになりました。関数としての基本的な挙動は通常の関数(function)と変わらないのですが、関数スコープ内のthisについては挙動が異なります。
アロー関数の中で呼び出されたthisは、関数の呼び出され方に関わらず、その関数が最初に定義された時点で指していた対象を指し続けるのが特徴です。
例を見てみましょう。
value = 5;
function func1() { console.log(this.value) }
var func2 =()=> { console.log(this.value) }
var obj1 = {
value: 1,
func1
}
var obj2 = {
value: 2,
func2
}
obj1.func1(); //1が表示される
obj2.func2(); //5が表示される
func1は従来の関数、func2はアロー関数です。この時点では両方ともグローバルコンテキストで定義されているため、thisはグローバルオブジェクトを指します。
その後に2種類のオブジェクト：obj1とobj2が定義され、それぞれfunc1とfunc2を保有していますね。
obj1のメソッド呼び出しでは、基礎編で触れたようにthisはobj1を指すので、obj1が持つvalueの値である1が表示されます。
これに対し、obj2のメソッド呼び出しではfunc2がアロー関数なので、thisが指すのはobj2でなく定義された時点で指していたグローバルオブジェクトのままです。
結果として、ojbのvalue（値は2）でなく、グローバルのvalue（値は5）が表示されます。
このように、アロー関数を使うと呼び出され方によらずthisが指す対象を定義当初のまま固定できるのです。
関数をグローバルコンテキストで前置き無しに呼び出すとその関数内でのthisはグローバルオブジェクトを指すのでした。
しかし、関数をコンストラクタ呼び出しすると、関数自体がインスタンスとなりthisは自身を指すようになります。
function Obj() { console.log(this) }
Obj(); //> [object Window]が表示される
var obj = new Obj(); //> [object Object]が表示される
1行目の関数を2行目で呼び出した場合はthisはグローバルオブジェクトであるWindowオブジェクトになりますが、3行目のようにコンストラクタ呼び出しをするとObjectオブジェクトとなっていることが分かりますね。
実際に通常の関数呼び出しとコンストラクタ呼び出しの挙動を比較してみましょう。
function MyObject(num){
this.value = num;
console.log(this.value);
this.show = function() { console.log(this.value) };
}
MyObject(5); //5が表示される
var myObj = new MyObject(3); //3が表示される
console.log(this.value); //5が表示される
myObj.show(); //3が表示される
6行目が通常の関数呼び出し、7行目がコンストラクタ呼び出しです。
関数MyObjectではthis.valueに引数の値を代入しますが、通常呼び出しではグローバルオブジェクトのvalueに、コンストラクタ呼び出しでは自身（MyObjectのインスタンス）のvalueに値を入れています。
そのため6行目・8行目ではグローバルvalueが呼ばれるので5が、7行目・9行目ではMyObjectインスタンスのvalueが呼ばれるので3が表示されるわけです。
関数呼び出しにおいてthisに何を入れるか明示的に指定できるのがapply関数とcall関数です。
使い方を見てみましょう。
value = 0;
var obj1 = { value: 1 };
var obj2 = { value: 2 };
function func() { console.log(this.value) }
func(); //0が表示される
func.call(obj1); //1が表示される
func.apply(obj2); //2が表示される
4行目の関数funcのthisはグローバルオブジェクトを指すので、6行目のように呼び出すとグローバルのvalueである0が表示されますね。
一方、7行目・8行目のようにcallやapply関数を使って呼び出すと引数に指定したオブジェクトをthisとして指定することができるので、それぞれobj1・obj2のvalueである1と2を表示します。
call・applyでは関数に渡す引数を設定することもでき、その方法によりこれらを使い分けます。詳しくはドキュメント（MDN）を参照してください。
JavaScriptでのthisについて、呼び出し方による挙動の違いを説明しました。
最初は理解しにくいので、実際にコードを書いて試していくのがおすすめです。
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
プログラミング学習は、学習コストの投資に対するリターンの期待値が高いです。そのため、人生をより良く、より楽しくしたい方には、プログラミング学習をとてもおすすめしています。
しかしながら、間違った学習方法により、挫折してしまう人も多いです。
プログラミング学習を成功させるポイントは沢山あるのですが、
ここでは、ポイントを3つピックアップしてお伝えいたします。
今後どのように活躍したいかによって、学ぶべきスキルが異なります。あなたが思い描く将来像によって、力を入れて学習するスキルを変えてください。
一概には言えないので、あくまで例となりますが、
といった具合です。
一つの言語を習得すると、他の言語の習得もハードルが下がります。
汎用性があり、分野を問わず使う機会が多いため、現時点で何を学習したらいいか分からない方はまず、HTML、CSS、JavaScriptから始めてください。
新卒でIT企業に就職される方は「やる気があります、何でもやります」で採用してもらえる可能性も高いです。
しかし、中途採用の場合は基本的には即戦力採用です。実務未経験でITエンジニアとして就職するには、実力が分かるポートフォリオを作ることが重要です。
架空でも良いのでウェブサービスを作って採用担当者に実力を示すことや、ソースコードを現場の担当者に書類選考の資料として見せるなど、ポートフォリオ作りを意識して、そこから逆算して基礎学習を行ってください。
言い換えると、創りたいものがあるから、それを作るための学習をするということです。このように考えると、モチベーションが続きやすいです。
プログラミング学習に限ったことではないのですが、新しいスキルを身につける時に、適切なアドバイザーを見つけることはとても大切です。
私も経験があるのですが、行き詰まったときに自力で解決するのはとても時間が掛かる場合があります。
しかし、経験者に聞いたら3分で解決するというのはよくあることです。
一番の理想は、就職して実務経験を通して先輩に教わることです。
なぜなら、お金を貰いながらスキルアップできるからです。
私も、先輩に沢山教わりましたし、教える側の仕事もたくさんしました。
就職したときに、先輩や上司に当たる方も採用した新人が成果を出してくれないとプロジェクトが回らないため、親身に教えてくれる人が多いです。
とはいえ、就職するためには勉強が必要なので、そのときにも聞けるアドバイザーを探してください。
まずは友人、知人、親族を探します。見つからない場合は、お金を払ってでもアドバイザーを確保したほうが、結果が出るまでが早いです。
SNSなどで、無料で相談に載ってくれる先輩エンジニアの方もいたりします。
しかし、基本的には本業の合間に対応しているので、遠慮して聞かないといけない、返信まで1、2週間かかるなど、ゴールに向かって遠回りをしている方もいらっしゃいましたので、注意してください。
プログラミング学習を成功させるポイント3つ
を紹介いたしました。
私は、プログラミングを学習して仕事にしてきたおかげで、今、本当に仕事が楽しくて仕方がない状況です。
ぜひ、皆さんもプログラミング学習を成功させて、転職などご自身の目指す目標を達成してください。
おすすめの教材については、動画の説明欄に記載していますので、参照してください。
あと、動画が役に立ちましたら、チャンネル登録もよろしくお願いします。
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
