アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。MDNアロー関数が導入された理由は「関数を短く書きたい」「thisを束縛したくない」の2つです。この記事では、関数をアロー関数に変換するステップを解説しています。thisの束縛については追記します。ステップで普通の関数をアロー関数にしていくステップに分けて、アロー関数にしていく過程を解説していきます。こちらが普通の関数ですね。与えられた数字を二倍にして返す関数doubleがあるとします。number;}【世界で2万人が受講】JavaScriptエンジニアのためのES6完全ガイドで解説されているコードを元にしています。「さっそくアロー関数にする」まずはアロー関数にします。number;}ステップ1でやったことは簡単。実はこれでもうアロー関数の完成です。ここで終わり、と言っても過言ではないです。JavaScriptのプロジェクトではこれよりも更に短縮されたりするので、以降解説を続けます。ステップ2「中括弧をとる」ステップ2です。中括弧を取ってスッキリさせました。さっきより見やすいですね。number;ステップ2では、returnが消えていますよね。アロー関数においては、returnする対象が1つであれば、中括弧とreturnを省略してもOKです。中括弧を外した場合では、暗黙的にreturnが返されるというわけですね。ステップ3「引数の丸括弧を削除する」ステップ3、最後です。number;引数の丸括弧を消しました。これが一番省略された形のアロー関数ですね。注意点としては、引数の丸括弧を削除できるのは「引数が1つの場合のみ」です。以下のように引数が2つである場合は、丸括弧の省略はできません。number2;}また引数が存在しない場合でも丸括弧はできません。「引数が1つの場合のみ」ですね。以上で関数をアロー関数に変換するステップ終了です。アロー関数を使って読みやすくなる処理アロー関数を使うことで読みやすくなる処理を紹介します。number;});アロー関数にすると一気にこうなり、読みやすくなりました。number);引数が1つなので、中括弧が省略できます。number);最初の関数よりもはるかに読みやすくなりました。JavaScriptでの重要な要素の1つであるアロー関数、使いこなせると便利ですね。終わりに【世界で2万人が受講】JavaScriptエンジニアのためのES6完全ガイドという講座を多く参考にしています。ES6で追加された関数などの使い方が詳しく、分かりやすく解説されているのでまだ慣れていない方はチェックしてみてください。DCL)とはReactを学ぶのに役立つ学習リソースをまとめてみた【AWS】DynamoDBの基礎知識をカンタンに解説するこの記事を書いた人kirohiエンジニア+マーケターのハイブリッドになりたい。センター英語99点から英検準一級を取得した後、プログラミングを学びながらブログを書いています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。【黒背景】Chromeの画面を暗く拡張するDarkReader...書いている人kirohi大学生/Webエンジニア。英語を勉強したり、コードを書いたりしています。