JavaScriptの関数〜 function から アロー関数まで身につける〜

JavaScript学習ガイド

こんにちは、Reiです。

コードを書いていると、
同じ処理を何度も書く場面が出てきます。

例えば、

・同じ計算を何度も行う
・同じメッセージを表示する
・同じデータ処理を使い回す

といった処理です。

こうした処理をまとめて再利用できる仕組みが
「関数（Function）」 です。

関数を使うことで、
処理を一つのまとまりとして整理できるようになります。

JavaScriptではいくつかの書き方がありますが、
まずは基本となる書き方から整理していきましょう！

基本の関数「 function 」

JavaScriptで最も基本的な関数の書き方が
function を使う方法です。

functionは次の形で書きます。

function 関数名(引数) {
  処理
}

関数名の後ろに ( ) を書くと、
その関数を呼び出すことができます。

( ) の中に書いた値は「引数」として関数に渡され、
関数の中でその値を使って処理を実行することができます。

関数の処理が終わると、
return に書かれた値が呼び出し元に返されます。

コードサンプルで理解を深める

function sayHello(name) {
  return `こんにちは、${name}さん`;
}

console.log(sayHello("田中"));

このコードでは、次の順番で処理が進みます。

① 関数を呼び出す
console.log(sayHello(“田中”));
console.log の中で、
sayHello(“田中”) が実行され、関数が呼び出されます。

② 引数を受け取る
呼び出し時に渡した “田中” が
関数の引数 name に代入されます。

③ 処理を実行
こんにちは、${name}さん
name を使って挨拶文を作ります。

④ returnで結果を返す
return によって、
「こんにちは、田中さん」という結果が関数の外に返されます。

⑤ 返された結果を使用する
console.log(“こんにちは、田中さん”)
返された値を用いて別の処理に利用する。

このように、定義した関数は
関数名を書いて呼び出すことで実行されます。

呼び出し側では、
返された値を使って表示したり、
別の処理に利用することができます。

なぜ関数を使うの？

関数を使う理由は、
同じ処理を何度も使い回せるからです。

例えば、

sayHello("田中")
sayHello("佐藤")
sayHello("鈴木")

と書くだけで、同じ処理を何度でも実行できます。

もし関数を使わなければ、
同じコードを何度も書く必要があり、修正するときに修正漏れが起きやすくなります。

そのため、関数を使うことで
コードを短く、読みやすくすることができるのです！

いまどきの書き方「アロー関数」

最近のJavaScriptでは、
アロー関数 がよく使われます。

アロー関数は次の形で書きます。

const 関数名 = (引数) => {
  処理
}

矢印のような記号=> を使うのが特徴です。
処理の流れは、function で書いた関数と同じになります。

コードサンプルで理解を深める

先ほどの関数を書き直すと、次のようになります。

const sayHello = (name) => {
  return `こんにちは、${name}さん`;
};

console.log(sayHello("田中"));

処理の内容は同じですが、
書き方が少しコンパクトになります。

また、関数の呼び出し方は先ほどとまったく同じです。

sayHello("田中")

と書けば、同じように関数が実行されます。

なぜ const を使うの？

アロー関数では、
関数を「変数に代入する形」で定義します。

そのため、次のように const を使います。

const sayHello = () => {}

理由は、
関数を書き換えできないようにするためです。

constで定義すると、
同じ名前の関数をもう一度作ろうとしたときに
JavaScriptがエラーを出してくれます。

そのため、
意図しない上書きを防ぐことができます。

アロー関数の省略

アロー関数は、さらに短く書くことができます。

1行なら return を省略できる

処理が1行の場合、return と { } を省略することができます。

const sayHello = (name) => `こんにちは、${name}さん`;

とてもシンプルにすることができます。

引数が1つなら ( ) を省略できる

引数が1つだけの場合、引数に使用している ( ) も省略できます。

const sayHello = name => `こんにちは、${name}さん`;

()がなくなると = の左右に変数名がある書き方に
最初は違和感を感じるかもしれません。

コードを書いているうちに自然と慣れてくるので、
まずは「こういう書き方もあるんだな」くらいの感覚で覚えておきましょう！

アロー関数の書き方まとめ

アロー関数には、
状況に応じていくつかの書き方があります。

代表的なパターンをまとめてみました。

パターン書き方特徴
基本形(num) => { return num * 2 }基本的な書き方
引数1つnum => { return num * 2 }引数の( )を省略
1行処理(num) => num * 2returnと{}を省略
引数なし() => “Hello”()は省略不可
オブジェクト返却() => ({name:”React”})()で囲む必要あり

最初は少しややこしく感じるかもしれませんが、
よく使われるのは、
・基本形
・1行省略
の2つです。

まずはこの2つを覚えておきましょう！

関数の中に関数を作る

JavaScriptでは、
関数の中に別の関数を書くこともできます。

const processOrder = (price) => {
  const getShippingFee = (amount) =>
    amount > 5000 ? 0 : 500;
  const shipping = getShippingFee(price);
  return price + shipping;
};

console.log(processOrder(3000));

このコードでは、getShippingFee という関数を processOrder の中で使っています。

この関数は
外から直接呼び出すことはできません。

getShippingFee(3000)

と書くとエラーになります。

このように
特定の処理の中だけで使う関数
を作ることで、コードを整理しやすくなります。

実際の開発でも、
大きな処理の中に小さな処理を分けて書くことがあります。

例えばReact開発においては、
コンポーネントという関数の中に
ボタンクリック時などのイベント処理用に小さな関数を書くことがあります。

よくあるミス「return 忘れ」

初心者がよく遭遇するミスがあります。

それが returnの書き忘れ です。

const add = (a, b) => {
  const result = a + b;
};

console.log(add(10,20));

このコードでは undefined が出力されます。

なぜ undefined になるの？

JavaScriptでは、returnがない関数は undefined を返します。

つまり、
計算は行われていても結果を外に返していない状態というのを示しています。

関数を書くときは、結果を return しているかを必ず確認するようにしましょう。

まとめ

ここまで、JavaScriptの 関数の基本 を見てきました。
関数は、コードを整理し、再利用するための重要な仕組みです。

＼＼　今回のまとめ　／／

・ 関数は処理をまとめて再利用する仕組み
・ function は基本となる関数の書き方
・ アロー関数は Reactでよく使われる書き方
・ 1行処理では return を省略できる
・ 引数が1つなら ( ) を省略できる
・ 関数の中に関数を書くこともできる
・ return がない関数は undefined を返す

関数を理解すると、
JavaScriptのコードがぐっと読みやすくなります。

少しずつコードを書きながら、
関数の使い方に慣れていきましょう！

次は、オブジェクトや配列から値を取り出す
「分割代入（Destructuring）」を見ていきます。

コメント

タイトルとURLをコピーしました