0%

Programmingプログラミングナレッジ

Posted:2019.05.30

javascriptのfunction式を新しい形で記述できるアロー関数に慣れる

ES6(ES2015)から新たに使えるアロー関数ですが、慣れるまでは少しわかりにくいと感じるかと思います。アロー関数は内容によって書き方も変えることができ、しっかりと覚えておかないと混乱してしまいます。今回はそんなアロー関数についてまとめていきたいと思います。

 

省略記法でコーディングのスピードアップ

アロー関数のメリットはやはり省略して記述できることではないでしょうか。これまでの関数とアロー関数を比べると具体的には下記のような違いがあります。

const func = function(argument) {
 alert( 'これまでの関数' );
}

const func = (argument) => {
 alert( '新しいアロー関数' );
}

 

「function」の記述を省略でき、その代わりに「=>」で表現できるのが、見た目で大きく違うポイントですね。

( 引数... ) => { 関数 }

 

では実際のコード例でアロー関数への変換を見ていきます。アロー関数は条件によってさらに短く簡潔に書くこともできます。まずはこれまでのfunction式になります。

const taxIn = 1.08
const calculation = function(price) {
 return price * taxIn;
}
console.log( calculation('500') )

 

1. アロー関数に変換

先述の通りアロー関数では、functionを省略し、代わりに=>の記号で表記します。これでも少しスッキリしますね。

const taxIn = 1.08
const calculation = (price) => {
 return price * taxIn;
}
console.log( calculation('500') )

 

2. returnと波括弧を省略

さらにアロー関数では関数の内容がreturn文だけ、つまり返り値だけの場合はreturnの表記と波括弧を省略することができます。より簡潔になりました。

const taxIn = 1.08
const calculation = (price) => price * taxIn; 
console.log( calculation('500') )

 

3. 引数の丸括弧を省略

その上、引数が一つしかない場合は引数を囲む丸括弧を省略できます。かなり短くなりました、慣れていないと逆にわかりにくいかもしれませんね。

const taxIn = 1.08
const calculation = price => price * taxIn; 
console.log( calculation('500') )

 

また、アロー関数における注意点としては、thisを束縛しない点がこれまでのfunction式と異なる点や、IEなどのレガシーブラウザで使用する場合にはそのままでは認識されないのでBabelなどでトランスパイルする必要があります。これらの点に気をつけていれば、とても簡潔にコードが書けるようになるので、ぜひ積極的に取り入れていき慣れていきたいですね。

 

(参考にさせて頂いたサイト)
アロー関数 – JavaScript | MDN

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】