本記事では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のクラスの使い方、をみていきましょう。
