【初心者必見】Nodeのアロー関数とfuntion関数の書き方の違い
みなさんアロー関数の知識はありますか？
この記事はNode.jsのアロー関数について聞いたことはあるけど、いまいちアロー関数とfunctionの違いについてよく分かってない方へ、
アロー関数とfunction関数の違いについての紹介です。
この記事でわかること
- アロー関数の記述とfuntion関数の記述の違い
この記事を最後まで読めば「アロー関数」と「funtion関数」の違いの理解が深まりますので、最後まで読んで「アロー関数」についてマスターしましょう。
それでは順に見ていきましょう。
アロー関数とfuntion関数の違いの全体の流れ
結論から言うとアロー関数とfuntion関数の違いは次の流れになります。
- アロー関数とは
- アロー関数の特に注意して覚えておくこと
- function関数
- アロー関数
- アロー関数を1行で書く
- アロー関数のreturnの省略の書き方
- Node.jsのアロー関数の例（setTimeout）
- JavaScriptでのアロー関数例
- オブジェクトのアロー関数例
アロー関数とは
アロー関数とは
const result = function() {
return 'Node.jsでfunction関数';
}
アロー関数とは関数を「function」での記述より、短くかけて現在は主流の書き方になります。
「=>」を使ってアロー関数を記述します。
アロー関数を使う理由は少しでもコードを少なく書けることができるからです。
ソースコードはできる限りわかりやすく短く書くことが推奨されます。
スポンサードサーチ
アロー関数の特に注意して覚えておくこと
- アロー関数はthisを指しません。
- アロー関数はnewができません。（アロー関数はコンストラクタになることができません。）
function関数
function関数
const result = function() {
return 'Node.jsでfunction関数';
}
通常のfunction関数の記述です。
スポンサードサーチ
アロー関数
アロー関数
const result = () => {
return 'Node.jsでアロー関数';
}
アロー関数で()=>を記述してfunctionを省略することができます。
アロー関数に慣れていない方は()の前にfuntionがあり()の後の=>は決まり文句だと思っておけばいいと思います
引数があるアロー関数
const result = (arg) => {
return 'Node.jsでアロー関数' + arg;
}
funton関数同様に引数を使用してアロー関数を記述することができます。
アロー関数を呼び出し
const result = () => {
return 'Node.jsでアロー関数';
}
const initResult = result();
アロー関数を1行で書く
アロー関数を1行で書く
const result = () => return 'Node.jsでアロー関数を1行で書く';
※アロー関数は引数が一つだった場合「（）」を省略することができます。
引数を入れて、アロー関数を1行で書く
const result = (arg) => return 'Node.jsで引数を入れて、アロー関数を1行で書く' + arg;
引数を入れて、アロー関数を1行で書くを呼び出し
const result = (arg) => return 'Node.jsで引数を入れて、アロー関数を1行で書く' + arg;
const initResult = result('引数');
スポンサードサーチ
アロー関数のreturnの省略の書き方
アロー関数のreturnの省略の書き方例
const result = (arg) => arg;
関数内で実行する処理が returnのみであれば、return も省略して記述することができます。
Node.jsのアロー関数の例（setTimeout）
アロー関数の例
const second = 1000;
const timer = {
timerMessage: '時間になりました',
on: function () {
console.log(this);
// function関数
setTimeout(function () {
console.log(this.timerMessage);
}, second);
// アロー関数
setTimeout(() => {
console.log(this.timerMessage);
}, second);
},
};
timer.on(); // 1秒後にtimerMessageの時間になりましたが呼ばれる
アロー関数で分からなければ参考にしてみてください。
JavaScriptでのアロー関数例
JavaScriptでのアロー関数例
<button id="javascript">アロー関数</button>
// function関数
const button = document.getElementById('javascript');
button.addEventListener("click", function () {
// addEvent処理
});
// アロー関数
const button = document.getElementById('javascript');
button.addEventListener("click", () => {
// addEvent処理
});
xxxxx
オブジェクトのアロー関数例
オブジェクト関数
const nodeMethod = {
value_1: 'node function関数',
value_2: 'node アロー関数',
// アロー関数
methodFunction: () => {
return nodeMethod.value_1 + '_' + nodeMethod.value_2;
},
};
console.log(nodeMethod.methodFunction()); // 'node function関数_node アロー関数'
※アロー関数ではthisがオブジェクトを指さないため、「変数名.関数名」で参照しましょう。
const nodeMethod = {
value_1: 'node function関数',
value_2: 'node アロー関数',
// 従来の関数
methodFunctionOne: function () {
return this.value_1 + '_' + this.value_2;
},
// アロー関数
methodFunctionTwo: () => {
return this.value_1 + '_' + this.value_2;
},
};
console.log(nodeMethod.methodFunctionOne()); // 'node function関数_node アロー関数'
console.log(nodeMethod.methodFunctionTwo()); // undefined
オブジェクト関数ではfunctionを使用しましょう。
アロー関数はthisを指さない挙動が思い通りにならない例です。
上記の結果ではundefinedを返します。
まとめ
- アロー関数は=>を書くことでfunctionを省略することができる（const result = (arg) => arg）
- アロー関数はthisを指さない
- アロー関数はnewでコンストラクタになることができない
実装やエラーが解決できない場合
プログラミングの実装やエラーでどうしてもわからない場合はメンターに相談するのが一番です。
考えている、見えている範囲が狭くなり、解決から遠くに行って何時間も、何日も経っていることなんてよくある話です。
そういう時は聞ける先輩や、メンターに相談することが大事です。
僕にも相談可能なので気軽に相談してください。
Twitterからの連絡だと確実ですよ。
オンラインスクールやプログラミングスクールといったプログラミングを学べる方法もあるので、そちらもぜひ活用してもいいと思います。
Web開発で分からない時
オンライン完結型スクール DMM WEBCAMP PRO
アプリ開発で分からない時
プログラミング×稼げる副業スキルはテックキャンプ
プログラミングについて分からない時
【コエテコ様限定】※ご案内を受けた以外のメディアが使用しても成果は承認されません。
僕への個人でもメンターでも、スクールでもお好きな方を活用ください。
