関数はめちゃくちゃ使います。本当によく使います。料理で言うと塩くらい使います。
関数とは、多くのプログラミング言語に標準で搭載されている機能で、いくつかの処理をまとめて入れることができる箱のようなものです。
ものすごく簡単にいうと「やりたいこと」が入った小さな入れ物です。
なぜ小さな入れ物なのかというと、今後クラスやオブジェクトといった、関数さえも格納してしまう大きな入れ物も登場するためです。
今回はそんな「やりたいこと」が入った小さな入れ物、関数についての説明とその使い方を紹介していきます。
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。
それでは本文へ、レッツゴー！
基本構文
まずは関数の基本構文だけ軽く目を通しておきましょう。かるーくで大丈夫です。
関数の使い方として、まずは関数を定義し、そしてそれを実行するという2つの記述が必要になります。
細かい用語の説明や使い方は、次の「実際に関数を使ってみよう！」で説明します。
関数の定義
function 関数名(引数){
実行したい処理;
}関数の実行
関数名(引数);実際に関数を使ってみよう！
さて、一番シンプルなconsole.log()を使って関数を見ていきましょう。
まずはせっかちさんのために、これからの説明をまとめたサンプルコードを貼り付けておきますね。
サンプルコード
<script>
/*
野生のコンソール
無条件で勝手に出現するので、
これを関数で制御していく。
*/
console.log('おっす！そこの君！')
/*--------------------------------
関数の定義方法
function 関数名(引数){
実行したい処理;
}
関数名：ローマ字でできるだけわかりやすい名前をつけてあげるとベター
引数：関数実行時に関数に当てはめることができる変数
---------------------------------*/
/*
関数名：hello
引数：arg
で関数定義
*/
function hello(arg){
console.log(arg);
}
/*--------------------------------
関数の実行
関数名(引数);
---------------------------------*/
/* 関数は何度でも実行できるぞ！ */
hello('おっす！そこの君！');
hello('何回も使いまわせるぞ！');
hello('関数の力ってすげー！');
</script>サンプルコードの解説
それでは、上記のサンプルコードの解説に入っていきましょう。
console.log('そこの君！おっす！');さて、ここに1匹のconsole.log()がいます。彼はコンソールに「そこの君！おっす！」と出力します。
ここで問題発生！
彼はWEBページ起動時に無条件で自動的に発火するのです。
先ほど「まずは関数を定義し、そしてそれを実行する」と説明しました。
つまり、関数は任意のタイミングで発火させることができるのです。
今回は登場しませんが、スクロールしたら実行や、クリックしたら実行するなど、今後発火タイミングを制御していくことができるようになります。
満を持して関数の登場
もう一度、関数定義の構文を見てみましょう。
function 関数名(引数){
実行したい処理;
}そして、先ほどのconsole.log()を関数に放り込んでみます。
function hello(arg){
console.log(arg);
}関数名とは
関数名とは、文字のごとく「その関数につける名前」です。
この名前は自由です。極端な話ポチでもタマでもOK。あなた色に染めてください。
ただできればローマ字を使うべきだし、何の関数か分かりやすい名前にするのがベター。
今回は「hello」という名前にしました。
引数とは
関数の能力として、実行時に好きな値を当てはめることができる能力を持っています。
引数とは、関数の実行時に、関数に当てはめることができる変数のことです。
console.log(‘そこの君！おっす！’);
だと、「そこの君！おっす！」と叫ぶことしかできません。
その叫ぶセリフを「引数」にすることで、実行時に好きなセリフを叫ばせることができるようになります。
引数の名前は何でもOK
「e」とか「val」とか「arg」とかよく見かけます。
e：element（要素）
val：value（値）
arg：argument（引数）
いざ実行！
関数の実行の構文をあらためて見てみましょう。
関数名(引数);今回の関数名は「hello」で、引数はコンソールで叫びたいワードでしたね。
それでは実際に関数を実行してみましょう。
hello('おっす！そこの君！');これで、関数が実行され「おっす！そこの君！」とコンソールに出力されます。
そしてこれだけじゃない！
一度定義した関数は何度も使い回すことができるのです！
hello('おっす！そこの君！');
hello('何回も使いまわせるぞ！');
hello('関数の力ってすげー！');引数の使い方ステップアップ！
先ほど引数「arg」を設定し、console.log();で叫んでもらう内容を引数に設定しました。
引数は複数設定したり、逆に1つも設定しなかったりすることができます。
引数を設定しない
引数を入れる()内を空っぽにしておけばOKです。
()自体は省いてはいけない点に注意！
サンプルコード
引数がないので、叫ばせるセリフを変更することができません。
<script>
/*--------------------------------
引数を設定しない関数
引数を入れる()内を空っぽにしておくだけでOK
ただし、()自体は省略してはいけない。
---------------------------------*/
/* 関数定義 */
function hello2(){
hello('引数を設定していない関数だぞ！');
}
/* 関数実行 */
hello2();
</script>複数の引数を設定する
()内に記入する引数を,で区切ることで、好きなだけ引数を設定することができます。
1つ目に設定した引数を「第一引数」、2つ目に設定した引数を「第二引数」と呼びます。
サンプルコード
身長と体重を引数に設定することで、BMIを計算してくれる関数「calcBMI」を用意しました。
第一引数「weight」に体重（kg）、第二引数「length」に身長（m）を入れて実行することで、BMIを計算してコンソールに出力してくれます。
<script>
/*--------------------------------
複数引数を設定するした関数
()内に記入する引数を,で区切る
---------------------------------*/
/* 関数定義 */
function calcBMI(weight, length){
const BMI = weight / ( length * length );
console.log(BMI);
}
/* 関数実行 */
calcBMI(60, 1.7);
</script>まだまだ出てくる関数の亜種
さて、関数にはまだまだあります。
関数リテラル、アロー関数、コールバック関数・・・。
ただ、これらを使えるようになるためには、今回の基本的な関数の使い方を覚える必要があります。
今回は長くなったので、別の記事で紹介します。
【JavaScript】関数リテラル、無名関数、アロー関数とは？その違いと使い方
最後に、今回覚えたことをまとめて終わりにしましょう。
お疲れ様でした！
関数のまとめ
関数とは
- 関数とは「やりたいこと」が入った小さな入れ物
- 関数を定義して、関数を実行するという2つのプロセスが必要
- 一度定義した関数は何度でも実行できる
- 関数は任意のタイミングで実行できる
関数の基本構文
関数定義
function 関数名(引数){
実行したい処理;
}- 関数名は定義した関数の名前になるもので、任意の名前を設定できる
- 引数は、関数実行の際に当てはめることができる変数のことで、任意の数設定することができる
関数実行
関数名(引数);- 引数がない場合、()内を空っぽにする。()は省略不可
