【JavaScript】(ES6)アロー関数の定義

JavaScript
スポンサーリンク

初心者の独学でのプログラミング学習はとてもツライ…

プログラミングをマスターしたい!

今のIT業界はプログラミングエンジニアが不足していると言われています。
高収入の職業とも言われる分野もありますし、AI、機械学習、ディープラーニング、IOTといった注目される分野が目白押しです。

でも、いざ初心者がプログラミングをマスターしようとすると…

  • 本を読んだりネットの記事で自力で勉強しているけど限界を感じる
  • プログラミングスクールに定期的に通うのは面倒だ
  • 地方に住んでると家の近くにプログラミングスクールなんてない
  • どのプログラミング言語を学べばいいのか悩む
  • 実際の就職や転職にプログラミングが活かせるのか心配だ

など、プログラミングを自分で勉強しようとすると悩みが尽きません。

プログラミングに詳しい友人に教えてもらおうと思っても、そんな友人なんて滅多にいません。いたとしても細かく教えてくれるほど時間に余裕がある人はいないでしょう。

そんな独学でプログラミングをマスターするのに限界を感じてる方に、オンラインプログラミングスクールをがおすすめです。

おすすめのオンラインスクールはこちら

ここでは、JavaScriptのES6から追加されたアロー関数(Arrow Function)についてみていこうと思います。

アロー関数を使うことで、匿名関数(関数リテラル)の表記をシンプルに記述することができます。

具体的なコードでみていきましょう。

スポンサーリンク

アロー関数の定義

アロー関数は、次のような形で使います。

(引数, …) => {…関数の本体…}

functionキーワードを使いません。アロー(=>)で関数の本体と繋ぎます。関数本体が1文の場合は波括弧{}は省略できます。

ES5のコードと比較しながら見て行きましょう。

次のような年齢を計算するコードを用意してみます。

constで定数のリストとしてbirthYearsに5つのデータが入っています。

ES5のコードとしてvarで変数の宣言をして、この定数からmap()を使って配列の要素を取り出してそれぞれの要素処理を処理する匿名関数を定義しています。

map()は配列データに使うメソッドで、各要素1つずつに対してコールバック関数を実行してその結果を新しい配列として返すことができるメソッドです。

map()についてはこちらを参照してください。

Array.prototype.map()
map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

ここでは配列から誕生年のデータを取り出して、年齢を計算するコールバック関数を実行しています。

JavaScriptコンソールに表示するとこうなります。

順に計算された値が配列として格納されています。

これをES6のアロー関数を使って書くとこうなります。

ES5のコードと見比べると、スッキリしていると思います。

map()の中に、引数とその処理(上のコードでのreturn文以下の処理)が矢印(=>)でむずばれているだけで、returnキーワードなども不要です。今回は1行でかけるコードなので波括弧{}も必要ありません。

結果は次のように先ほどと同じになります。

上のコードでは引数が一つのアロー関数でしたが、2つの引数を使ったコードを書いてみましょう。

先ほどのコードと合わせて、続けて書いています。letで変数を宣言済みなので、同じ変数を続けて利用しています。

まず、2つの引数を丸括弧()を使って利用しています。引数は配列の要素とインデックスを取っています。これを矢印で繋げて、バッククォートを使ったテンプレート文字列でそれぞれの要素を表示するようにしています。

テンプレート文字列はこちらを参照してください。

【JavaScript】(ES6)テンプレート文字列
JavaScriptのES6のテンプレート文字列について扱います。テンプレート文字列は、クォートの代わりにバッククォートで囲み、ドル記号と波括弧のプレースホルダーを設置して使います。startsWithなどの文字列メソッドも扱います。

配列のインデックスは0から始まるので1から始まるように1を加えています。コロンに続けて計算式を記述し、それぞれをプレースホルダーで配置しています。

このコードをもっと複雑でreturn文を含んだ複数の処理を行うものとして扱うのがその下の書き方です。こちらは矢印に続けて波括弧{}でブロックを作っています。そのブロックの中で、Date().getFullYear()を使って現在の西暦を取得するメソッドを使って定数を作成しています。さらに、その定数と配列の要素から計算した年齢を処理し、それをreturn文で、テンプレート文字列を使った出力を返します。これをconsolo.log()で表示しています。

これらを実行するとこうなります。

それぞれの結果が確認できると思います。

このように、アロー関数を定義するには3つの方法が考えられます。

1つの引数と1行のコードが置かれる最も簡単な形式です。単に引数と処理コードを矢印で繋ぐだけです。

引数を複数持つと括弧を使用して矢印で繋ぎます。

複数行のコードと追加するとreturnキーワードを使用する必要がある処理は、波括弧{}で括って矢印で繋ぎます。

スポンサーリンク

まとめ

JavaScriptのES6から追加されたアロー関数(Arrow Function)の定義について扱いました。

アロー関数を使うと、匿名関数(関数リテラル)の表記をシンプルに記述することができます。

引数と関数の処理本体を矢印(=>)で繋ぐだけで記述することができます。引数の数や複数行のコードの処理が必要な場合に丸括弧、波括弧が必要になるだけです。

自宅学習はオンラインプログラミングスクールを活用!

自宅学習にはオンラインプログラミングスクールがおすすめ!

オンラインプログラミングスクールは独学でプログラミングを学習する時のデメリットを解消する仕組みが備わっています。

気になるところは…

学習がオンラインで完結するのはもちろんですが、独学ではできない質問サポートがあるかどうか。わからないことを現役のエンジニアが質問に答えてくれるといいですよね。

受講者個人に担当のメンターがつき、マンツーマンで学習の相談に乗ってくれることも必要で、ITエンジニアの世界についても伺えたりもすると幅が広がります。

オンライン面談だけでなく、チャット機能を使って気軽に質問を投げかけることができることも大切です。

また、オリジナルプロダクトの開発とサポートがコースの中に組み込まれていて、独学ではなかなか難しい実践的なスキルの習得にもつなげたい。

プログラミングをマスターした後の実際の仕事につながる転職サポートでがあると、ITエンジニアの世界に飛び込むのに不安が解消されます。

そんな豊富なメニューが揃っているおすすめのオンラインプログラミングスクールがこちらにあります。

おすすめのオンラインプログラミングスクールはこちら

TechAcademyはおすすめのオンラインプログラミングスクール!

オンラインのプログラミングスクールでは、テックアカデミーの充実度が目を見張ります。

オンラインで受講が完結するので、自宅学習でプログラミングをマスターしたい人にはテックアカデミーがおすすめです。

メンター制度も現役のプロが対応してくれます。大学生などが対応しているスクールに比べて本気度と専門性が違います。メンター制度の無いスクールもありますし、担当では無いメンターが対応するスクールもあったりするので、相談の質が違いますね。

チャットサポートもあるので、それが無いスクールに比べて相談の気軽さの違いがあります。

プロダクト開発のサポートで実践力が養われるだけでなく、どの講座を利用しても転職サポートが受けられるのはありがたい。

用意されているコースも、初心者向けのプログラミングコースから、Python、Java、PHP、iPhoneアプリ、AndroidといったITエンジニアのベースとなる主要な言語だけでなく、AI、データサイエンス、ブロックチェーン、webアプリケーションと行った実践的なコースまで用意しています。

他にも、webデザインやUI/UXデザイン、動画編集、webディレクションやwebマーケティングといったプログラミング以外での役立つコースまであります。

このようなたくさんの選択肢から自分にあったコースを選ぶことがでるのがテックアカデミーです。

コースの期間も短期間でマスターしたり、長期の受講でじっくり取り組むコースを選ぶこともできます。

複数講座のセットコースを利用することで大幅な割引が受けらるので、お得に受講することもできます。

無料体験もありますので、プログラミング学習でオンラインスクールを考えている人はTechAcademyをぜひ利用してみてください。

テックアカデミーの公式サイトはこちら

JavaScript
スポンサーリンク
CodeGraffitiをフォローする

とにかく進め!Pythonプログラミング入門 〜 コードグラフィティ
タイトルとURLをコピーしました