【入門編10】JavaScriptの関数やアロー関数について理解しよう

JavaScript入門

本記事ではJavaScriptの関数について解説します。

JavaScriptで関数で使えると、複雑で長いコードも分かりやすくすることが可能です。

ぜひこの機会に関数の使い方を覚えてくださいね。

JavaScriptの関数とは?

JavaScriptに限らず、多くのプログラミング言語では「関数」が使えます

関数とは、受け取ったデータを元に特定の処理を行うもののことです。

プログラムの中であるまとまった一連の処理があれば、それを関数にできます

特定の処理を関数にすることで、プログラム全体が分かりやすくなるメリットがあります。

関数に与えるデータのことを「引数」と呼びます

また、関数から返ってくるデータのことは「返り値」と呼びます

関数の基本的な使い方

それでは関数の基本的な使い方をみていきましょう。

ここでは以下の項目に分けて、関数について解説していきます。

  • 関数を作成する
  • 関数に引数を与える
  • 関数の戻り値を利用する

関数を作成する

まず関数の作成方法をみていきましょう。

○コード例

<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
const output_hello = function(){
    document.write("Hello World!");
}
output_hello();
</script>
</body>
</html>

○実行結果

関数を作るときは、

関数名 = function(){
// 関数の中の処理
}

というように書くのが基本です。

関数には必ず関数名を付けなくてはいけません

今回は「output_hello」という関数名にしています。

{}の中には、関数が呼び出されたときの処理を書きます。

今回は「Helo World!」を表示するのみの処理を行っています。

関数を作るだけでは、関数は動きません。

関数の外から関数を呼び出す必要があります。

関数を呼び出すときは「関数名();」と記述してください。

上記の例では、output_hello();と記述しています。

このように記述することでoutput_hello関数を呼び出すことが可能です。

これがJavaScriptの関数の基本的な使い方となります。

関数に引数を与える

つづいて、関数に引数を与える方法を解説します。

関数に引数を与えることで、関数内でそれを活用することが可能です。

○コード例

<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
const output_number = function(number){
    document.write(number);
}
output_number(4);
</script>
</body>
</html>

○実行結果

関数に引数を与えるときは、「関数名(引数名)」と書く必要があります。

今回は「4」という引数を関数に与えています。

関数のfunctionの()の中に、変数名を書けば、その変数に引数が格納されます。

これで関数内で「4」が表示されるようになりました。

○コード例

また、引数は複数与えることも可能です。

<script>
const output_hello = function(number1,number2){
    document.writeln(number1);
    document.writeln(number2);
}
output_hello(4,6);
</script>

○実行結果

上記の例では「4」と「6」の引数を与えています。

引数を2つ以上与える場合は「,」区切りで記述してください。

後はnumber1とnumber2にそれぞれの引数が代入され、両方の値が表示されるようになりました。

関数の戻り値を利用する

関数の戻り値を利用する方法を紹介します。

○コード例

<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
const output_hello = function(){
    return "Hello World!";
}
const data = output_hello();
document.write(data);
</script>
</body>
</html>

○実行結果

関数がデータを返却するようにしたい場合は戻り値を使います

戻り値を活用する場合は、関数内で「return文」を記述してください。

上記の例では return文によって「Hello World!」という文字列が返却されています。

返却された文字列は、data変数に格納されます。

JavaScriptのアロー関数とは?

最後にJavaScriptのアロー関数について解説します。

アロー関数とは、従来とは異なる関数の書き方のことです。

アロー関数の使い方は簡単。

関数の「function()」の部分「() =>」に変えるだけです。

これでも同じように処理が動きます。

アロー関数を使った方が、コードの文字数が減ります

そのため、通常の関数よりもアロー関数の方が現場で使われることが多いですね。

具体的なアロー関数の使い方もみていきましょう。

○コード例

<!DOCTYPE html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
const output_hello = ()=>{
    document.write("Hello World!");
}
output_hello();
</script>
</body>
</html>

○実行結果

「function()」の部分「() =>」に変更しています。

これでも同じように「Hello World!」と表示ができます。

関数の呼び出し部分に関しては、今までと変わりません

まとめ

本記事ではJavaScriptの関数について解説しました。

関数の使い方や、引数戻り値の活用方法がお分かり頂けたかと思います。

今回は短めの関数を作りましたが、もっと長い関数を作ることも可能です。

また、関数の中に関数を作ることもできます

関数を使いこなすことができれば、一人前のプログラマーといえるでしょう。

次回はJavaScriptのクラスの使い方、をみていきましょう。

手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

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