プログラミング入門ナビ編集部はじめにJavaScriptの「this」は他の言語と比較し挙動に少々癖があります。呼び出し方によってどの値を指すかが変わるためです。思ったような値が得られない時は、thisの呼び出し方に問題があるかもしれません。この記事では呼び出し方の違いによるthisの挙動を説明します。thisの呼び出し方:基礎編まずはよく使われるオーソドックスな呼び出し方を見ていきましょう。//3func();//4上記1234では何が表示されるでしょうか。答えは下記のようになります。//4正解できましたか?1234はいずれもthis.valueの呼び出しをしていますが、この通り表示される値が違います。このようになるのか、順を追って説明していきます。グローバルコンテキストでの呼び出し1ではthisをグローバルコンテキスト(関数やオブジェクトの外側)で呼び出しています。この場合、thisにはグローバルオブジェクトが入ります。グローバルオブジェクトはJavaScriptが実行される環境により変わるのですが、ブラウザの場合はWindowオブジェクトとなります。下記のようにconsole.logでthisを表示させればグローバルオブジェクトが何なのか確認できます。1;としたことで、このグローバルオブジェクトにvalueという値が定義され1が代入されていたため1が表示されました。このように、グローバルコンテキストでthisを呼び出すと、グローバルオブジェクトが入ります。オブジェクトのメソッド呼び出し2は「objオブジェクトのfunc」をメソッド呼び出しています。このように「〇〇.func();」といった具合で関数呼び出しの前に「〇〇.」がつく場合、関数「func」のスコープ内でのthisが指すのは前置きの〇〇が示すオブジェクトです。この例ではobjのfunc関数スコープ内でthisが呼び出されているので、このthisが指すのは自分自身であるobjオブジェクトですね。objは自身のvalueを持つため、結果的にthis.valueはこれを呼び出して2が入ります。3は同じくobjの中で定義されたfuncを実行しているのですが、testにobj.funcを代入したあとでtest();と前置きなしで呼び出されていますね。このように、グローバルコンテキストで前置きなしに関数だけが呼び出されている場合の関数内thisは、次項の「関数呼び出し」のケースにあたりグローバルオブジェクトを指すため1が表示されます。関数呼び出し4はグローバルコンテキストで定義された関数funcを呼び出しています。メソッド呼び出しではないので、「〇〇.」のような前置きはありません。この場合の関数内thisもグローバルオブジェクトを指します。グローバルオブジェクト(ブラウザで実行の場合はWindowオブジェクト)のvalueは一行目で定義されている通り1なので、1が表示されるわけです。基礎編で見たように、thisの挙動は呼び出し方によって変わります。thisに何を入れたいかを明示的に指定するためのいくつかの方法を紹介します。アロー関数呼び出しES6からはアロー関数が使用できるようになりました。関数としての基本的な挙動は通常の関数(function)と変わらないのですが、関数スコープ内のthisについては挙動が異なります。アロー関数の中で呼び出されたthisは、関数の呼び出され方に関わらず、その関数が最初に定義された時点で指していた対象を指し続けるのが特徴です。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は自身を指すようになります。Object]が表示される1行目の関数を2行目で呼び出した場合はthisはグローバルオブジェクトであるWindowオブジェクトになりますが、3行目のようにコンストラクタ呼び出しをするとObjectオブジェクトとなっていることが分かりますね。実際に通常の関数呼び出しとコンストラクタ呼び出しの挙動を比較してみましょう。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が表示されるわけです。apply・call関数を使った呼び出し関数呼び出しにおいてthisに何を入れるか明示的に指定できるのがapply関数とcall関数です。使い方を見てみましょう。}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について、呼び出し方による挙動の違いを説明しました。最初は理解しにくいので、実際にコードを書いて試していくのがおすすめです。プログラミング入門ナビ編集部はじめにJavaScriptを学習していると、比較的初歩の段階でfor文を学びますね。繰り返し処理をするための機能で、配列データを順番に取り出して表示したり、別の値を格納していくなどの便利な使い方が可能です。使い方に慣れるまではつまずきやすい部分でもあります。ここでは初心者がうっかりしてしまいがちなfor文での失敗例とその対処方法を紹介します。合計点を求めるプログラムを書くとしましょう。配列scoresに各教科の点数が入っていて、これを順番に取り出して合計点totalに加算していくためのコード例は下記です。scores[i];}console.log(total);こちらを実行すると、合計点が表示されるのを期待するところですが、実際は下記の結果となってしまいます。NaNNaNとは「Not-A-Number」のことで、「非数」という特別な値です。これは数字が与えられる想定の処理に対し、数字ではない値が与えられた場合に返されます。NaNになる原因は?なぜNaNになってしまうのでしょうか?どこで問題が起きているかわからない場合は、各所で値を表示させておかしな値が入っている箇所がないか確認するのが定石で、これをプリントデバッグと呼びます。下記の通り、for文内にログ出力処理を追加しましょう(4行目)。scores[i];}console.log(total);こうすることでscoresの配列から取り出した値をコンソールに表示させて確認できます。実行結果は下記の通りです。NaN上から順番に、配列内の点数が表示されています(1〜5行目)。下のNaNは元から出ていたものですね(7行目)。ここで、6行目にundefinedが表示されているのにお気付きでしょうか。for文の中で1〜6行目の値がtotalに足し合わされていきますが、undefinedは数字ではないため、これが足し合わされた後にtotalにはNaNが入ってしまったわけです。対処方法なぜ5個しか要素が入っていないはずの配列から6回も値が取り出されているのでしょうか。一度for文の繰り返し条件を見てみましょう。i++)scoresの要素数は5個なので、scores.lengthには5が入ります。iは0からスタートし「0、1、2、3、4、5」の合計6回繰り返されるわけです。配列の要素はsocres[0]が1番目、scores[1]が2番目というふうに対応しています。n番目の要素を取り出すにはscores[n-1]のように、1つ減らした数字を使って取り出す必要があるのです。そのため、要素が5個の場合はscores[4]が最後の要素となり、scores[5]は未定義なので取り出そうとするとundefinedが返ります。実際に取り出してみた例が下記です。最後の列で、数字とundefinedを足そうとしてNaNが返っているのが分かりますね。//NaNこれに対処するには、繰り返しをi=4で止めるように修正しましょう。scores.length以下」としていたのを「iがscores.length未満」に変更します(下記3行目)。scores[i];}console.log(total);実行してみると、無事総合点が表示されました。305まとめJavaScriptのfor文でNaNが出てしまう原因と対処方法についてご紹介しました。実はJavaScriptに限らず、他の言語の繰り返し処理でも同様のミスをしてしまいがちです。起っている現象としては全く同じで、繰り返し条件の間違いにより無いはずの配列要素にアクセスしてしまうことが原因なので、つまずいたら1度チェックする癖をつけましょう。プログラミング入門ナビ編集部プログラミング学習は、学習コストの投資に対するリターンの期待値が高いです。そのため、人生をより良く、より楽しくしたい方には、プログラミング学習をとてもおすすめしています。間違った学習方法により、挫折してしまう人も多いです。プログラミング学習を成功させるポイントは沢山あるのですが、ここでは、ポイントを3つピックアップしてお伝えいたします。将来なりたい姿に合わせて適切なスキルを選ぶ今後どのように活躍したいかによって、学ぶべきスキルが異なります。あなたが思い描く将来像によって、力を入れて学習するスキルを変えてください。大大企業や公的機関などの規模の大きな法人に向けたビックスケールのプロジェクトの開発がしたい:JavaやC#iPhoneアプリを創りたい:SwiftAndroidアプリを作りたい:Kotolinといった具合です。一つの言語を習得すると、他の言語の習得もハードルが下がります。汎用性があり、分野を問わず使う機会が多いため、現時点で何を学習したらいいか分からない方はまず、HTML、CSS、JavaScriptから始めてください。自分の実力&即戦力であることを示すポートフォリオを作ることを意識する新卒でIT企業に就職される方は「やる気があります、何でもやります」で採用してもらえる可能性も高いです。中途採用の場合は基本的には即戦力採用です。実務未経験でITエンジニアとして就職するには、実力が分かるポートフォリオを作ることが重要です。架空でも良いのでウェブサービスを作って採用担当者に実力を示すことや、ソースコードを現場の担当者に書類選考の資料として見せるなど、ポートフォリオ作りを意識して、そこから逆算して基礎学習を行ってください。言い換えると、創りたいものがあるから、それを作るための学習をするということです。このように考えると、モチベーションが続きやすいです。気兼ねなく聞ける環境を確保するプログラミング学習に限ったことではないのですが、新しいスキルを身につける時に、適切なアドバイザーを見つけることはとても大切です。私も経験があるのですが、行き詰まったときに自力で解決するのはとても時間が掛かる場合があります。経験者に聞いたら3分で解決するというのはよくあることです。理想は、就職して実務経験を通して先輩に教わることです。お金を貰いながらスキルアップできるからです。私も、先輩に沢山教わりましたし、教える側の仕事もたくさんしました。就職したときに、先輩や上司に当たる方も採用した新人が成果を出してくれないとプロジェクトが回らないため、親身に教えてくれる人が多いです。いえ、就職するためには勉強が必要なので、そのときにも聞けるアドバイザーを探してください。友人、知人、親族を探します。見つからない場合は、お金を払ってでもアドバイザーを確保したほうが、結果が出るまでが早いです。SNSなどで、無料で相談に載ってくれる先輩エンジニアの方もいたりします。基本的には本業の合間に対応しているので、遠慮して聞かないといけない、返信まで1、2週間かかるなど、ゴールに向かって遠回りをしている方もいらっしゃいましたので、注意してください。気兼ねなく聞ける環境を確保するを紹介いたしました。私は、プログラミングを学習して仕事にしてきたおかげで、今、本当に仕事が楽しくて仕方がない状況です。皆さんもプログラミング学習を成功させて、転職などご自身の目指す目標を達成してください。おすすめの教材については、動画の説明欄に記載していますので、参照してください。あと、動画が役に立ちましたら、チャンネル登録もよろしくお願いします。プログラミング入門ナビ編集部はじめにスマホが世の中に浸透して早10年余り。毎日の生活で、必ず1つは何かしらのアプリを使っているのではないでしょうか?すっかり馴染み深くなったスマホアプリですが、自分で開発できたら自信にもつながりそうですよね。実は簡単なものならば初心者でも作れるのです。この記事では、スマホアプリの2つの主流であるAndroidアプリとiOSアプリについて開発に必要なスキルを紹介します。どんなアプリを作りたいかによって適切な手法が異なるので、まずはその分類を確認してみましょう。ゲームならばUnityがおすすめゲームが好きで、よくスマホのゲームアプリをプレイする方もいらっしゃるのではないでしょうか。最初からゲームアプリを作ってみたい!という気持ちが強ければ、Unityで作ってみることをおすすめします。Unityはスマートフォンや据え置き型ゲームなど、様々なプラットフォームの垣根を超えて開発及び実行ができるゲーム開発環境兼ゲームエンジンです。この後紹介するAndroidアプリやiOSアプリの開発スキルを用いてもゲームアプリを開発することは可能ですが、それぞれAndroidとiPhoneでしか動かせないアプリになってしまいます。Unityで開発しておけば、同じゲームでも様々なハードウェアへ簡単に移植することができ大変便利です。Unityについてはこちらの記事でも解説していますので参考にしてください。Unityエンジニアになるには?未経験でもなれる?スキルの身につけ方を解説!|プログラミング入門ナビハイブリッドアプリ例えばFacebookやAmazonなど、比較的大規模なWebサービスのスマホアプリはハイブリッドアプリと呼ばれ、スマートフォン自体が持つ機能(GPSやカメラ等)と、Web技術(HTML5・CSS・JavaScript等)を組み合わせて開発されています。簡単にいうと、AndroidやiOSのWebViewという機能上でWebアプリを実行し、スマホに最適化して表示するわけです。様々な機能を使いこなさなければならないため、こちらは上級者向けといえます。初心者からのスタートならば、次項のネイティブアプリ開発にチャレンジするのがおすすめです。ネイティブアプリここでのネイティブとは、スマートフォン本来の機能、という意味で使われています。ToDo管理アプリを思い浮かべてみましょう。タスクを入力するのにスマートフォンのキーボードやタップの入力機能を使用し、期限が近づいたタスクを知らせるにはスマートフォンのアラーム機能を使えば良さそうですね。このようにスマホ本来の機能で完結することが多いため、ネイティブアプリならば比較的簡単に開発することができますが、AndroidとiOS向けで必要なスキルは全く異なります。将来的にはどちらも開発できるようになるのがベストですが、まずはどちらでもいいからスマホアプリを開発したいということであれば、自分が持っている端末に合わせると実機で確認できるのでおすすめです。Android向けスマホアプリ開発に必要なスキルここからまずはAndroidアプリ開発に必要なスキルを見ていきましょう。言語(1):Java次に挙げるKotlinの登場まではAndroidアプリの開発言語としてJavaが主流でした。Machine:Java仮想マシン)上で動くのが特徴で、その環境用のJVMさえあればどんな環境でも動かせることから、Androidに限らず多くの用途で活用されています。)に対処できる言語としてAndroidのデベロッパーであるGoogle社から2017年にサポート開始され、2019年には正式に推奨言語にすると発表されたのがKotlin(コトリン)です。シンプルで使いやすい言語であることからエンジニアからの評判も高く、案件数も増加傾向にあるのでぜひこの機会に学んでみることをおすすめします。StudioはGoogle社が提供する公式のAndroid専用開発ツールです。Android開発に特化しているため、作業効率化に役立つ機能がたくさんあります。開発現場では使わない手はありませんのでこれを機会に使い方に慣れておくと良いでしょう。iOS向けスマホアプリ開発に必要なスキル次にiOSアプリ開発に必要とされるスキルを見てみましょう。言語:Swift従来、iOSアプリの開発言語はObjective-Cが主流でしたが、2014年にSwiftが発表されてからはこちらが主流となりました。従来のObjective-Cとも共存できるとされているので、古いコードとの互換性もあります。開発環境:XCodeXCodeはApple社が提供する開発ツールで、iOSアプリを開発するために便利な機能を多く持っています。開発現場ではiOS開発のスタンダードツールとなっているので、将来iOSアプリ開発の案件に携わりたい方は早いうちから使い方を覚えておくと良いでしょう。Macbookでしか使えない点には注意が必要です。まとめスマホアプリを開発するために必要なスキルについて説明しました。簡単なネイティブアプリならば初心者の方でも開発しやすいですし、自分のスマホで動かせるものが作れると自信にもつながるのでおすすめです。ProglusでもAndroidアプリ開発コース・iOSアプリ開発コースの開講を検討しています。プログラミング入門ナビ編集部はじめにプログラミング学習、継続できていますか?教材でしっかりと基礎を学ぶのはもちろん大切ですが、それだけでは何となくモチベーションが続かない...そんな方は「競技プログラミング」にチャレンジしてみてはいかがでしょうか。「でも、競技プログラミングって凄腕エンジニアの人たちが参加するんじゃないの...?初心者レベルが参加したって歯も立たなそう...」と思われるかもしれません。確かに、少し前まではそのような風潮がありましたが、プログラミングを学ぶ人口が増えるにつれ初心者でも楽しく参加できるような仕組みが整ってきています。この記事では、競技プログラミングをおすすめする理由と初心者の参加方法について説明します。競技プログラミングとは競技プログラミングとはその名の通り、プログラミングの技術を競うコンテストです。同じ問題を解き、コーディングにかかる時間や完成したプログラムのパフォーマンスを競います。Googleやドワンゴ等の有名なIT企業が主宰したり、インターネット上の競技プログラミング特化サイトで定期的に開催されることが多いです。近頃では新卒学生のスキル判定基準として採用に用いられることもあります。初心者が競技プログラミングをするメリット上級者だけのものと思われがちな競技プログラミングですが、初心者にこそおすすめの理由があります。期待できる主なメリットは下記です。競技プログラミングにはレーティングというものがあり、初心者レベルからスタートして上位に入ることで上がっていきます。課題を解いていくのとは違いゲーム感覚で続けられるので、モチベーションを保つうえで良い刺激になるでしょう。解けなくても、どうすれば解けたのか?の答え合わせをするだけで良い勉強になります。実行速度やメモリ使用量を意識できるようになるプログラミング学習を始めたばかりの時はとりあえず動けば良いという考えになりがちですが、競技プログラミングでは実行速度やメモリ使用量のことも意識しつつ、パフォーマンスの高いプログラムを組まなければなりません。教材で取り扱うような初歩的なプログラミングでは規模が小さいので、多少のコードの違いではパフォーマンスに大きな差は出ませんが、実際のエンジニアが働く現場では大規模なシステムを取り扱います。この時に少しでも効率の悪いコードを入れてしまうとシステム全体のパフォーマンスに関わるため、早いうちからこれを意識できるようにしておくのは重要なことです。就職でアピールしやすい近年は企業の採用活動でも競技プログラミングに注目する動きがあり、有名なコンテストで良い点を納めているというだけで内定が決まる例もあります。そこまでは目指せないとしても、競技プログラミングサイトに参加してレーティングは○○を持っている、というような話ができればアピールになります。初心者ならばなおのこと、実務経験でのアピールができない分、こういったものを活用してスキルレベルを提示するのも良いでしょう。高いスコアである必要はなく、プログラミングに関わりを持とうとする姿勢も評価対象になり得ます。参加には注意点も...先述の通り、初心者が競技プログラミングに参加するのは大いにおすすめなのですが、いくつか注意点もあります。自分なりの目標を決めてチャレンジすること競技プログラミングでは、頂点に近づけば近づくほどやはり初心者にとって縁遠い世界となっているのが事実です。世の中には天才エンジニアと呼ばれる人々がいて、初心者に限らず、エンジニアを何年もやっているような人でも敵いません。競技プログラミングで良い順位を取ることが目的になってしまわないよう、自分なりの目標を立てて参加しましょう。順位に一喜一憂して振り回されることなく、「エンジニアへ転職すること」等、自分が定めた最終目標に到達するための手段として楽しむことを心がけてください。競技用であると意識すること競技プログラミングで「良い点を取れるコード」が、実際のエンジニア現場にとって「良いコード」とは限りません。この2者では目的が違っているためです。競技プログラミングではコーディングの速さや実行速度・メモリの使用効率の良さが最優先とされます。そのため、業務現場で重要とされる再利用性や、誰が読んでも分かりやすい可読性等は一切無視され、何をやっているコードなのか非常に分かりにくいことが多いです。ハイレベルに近づくほどこの傾向が高くなりますので、初心者レベルでは問題にならないことが多いですが、上級者のコード等を参考にする際は、この点を意識するようにしましょう。代表的な競技プログラミングサイトここで、多くの人が参加する代表的な競技プログラミングサイトを紹介していきます。AtCoderAtCoderは、日本初の競技プログラミングサイトです。登録者数は20万人近くに上り、そのうち半分が日本人です。毎週末にコンテストが開催され、レベルごとに分かれているので初心者でも参加しやすいのが特徴です。日本の名だたるIT企業が主宰するコンテストもAtCoder上で開催されることが多く、優秀なエンジニアと企業の橋渡しの場ともなっています。Jamは、Googleが主宰するプログラミングコンテストで、2003年から開始されました。4万人近くが一挙に参加する年に1度の大きな大会です。数ラウンドに分かれており、勝ち進んだ25名により最終決戦となります。この一歩前のラウンドで残った1,000人には特製Tシャツが贈られ、エンジニアの中では勲章のように扱われるようです。TopcoderTopcoderは、60万人が参加する世界最大規模の競技プログラミングサイトです。このサイトでトップレベルのレーティングを持つユーザーは「レッドコーダー」と呼ばれ一目を置かれる存在となっています。競技プログラミングに参加するには?では、初心者が競技プログラミングに参加するにはどうすれば良いのでしょうか。基本的な言語スキルを身につけるほとんどの競技プログラミングサイトでは、同じ問題について複数の言語で回答できるようになっています。AtCoderを例にとればC言語、C++、Python、Java、JavaScript等様々な言語での回答が可能です。言語の性質の違いから、競技プログラミングで本格的に上位を目指したい場合はC言語やC++が有利ですが、そうでなければ長い目で見て使い道の多いJavaScriptがおすすめです。言語を決めて一通りの基本スキルを身につけましょう。登録してビギナー問題を解いてみるある程度基本を身につけたら、早速上記で紹介している競技プログラミングサイトや、その他自分がやってみたいコンテストに登録してみましょう。ビギナーレベルであればかなりシンプルな問題が多いので、最近プログラミングを始めたばかりの方でも練習問題代わりに解くことができるでしょう。解けない問題が出てきたら学習を深めるチャンスです。そこで投げ出さず、プログラミング学習に使っている教材なり、書籍なりを確認して解き方を確認しましょう。この往復活動がモチベーションを保ちつつ楽しく学習を進めるコツです。まとめ競技プログラミングの魅力と初心者へおすすめする理由を説明しました。ある程度以上のレベルでは数学的知識が無いと十分に競えない問題もありますが、ここで負けじと数学の学習を始めてスキルを磨くも良し、見切りをつけてまたプログラミング学習に専念するも良しです。モチベーション継続の場としてうまく活用し、プログラミングのスキルアップにつなげていきましょう。・About・プライバシーポリシ。