進め方
JavaScriptの関数について初心者の方でもわかりやすいように、この記事では解説します。以下の内容で進めていきます。
- 関数とは
- 関数を使う
- まとめ
関数とは
一言でいうと
一連の処理をひとまとめにしたものです。
なにがいいのか
一連の処理にまとめることで、その処理を使いまわせます。使いまわせることによって毎回同じ処理を書く必要がなく簡単に呼び出せることや、コードの修正する必要があるときに関数を直すだけで済むので管理が楽になります。
また、関数にまとめることでコードの量が減り可読性が高くなることや、関数名から処理の内容が想像しやすくなります。
注意すること
むやみに関数を作りすぎると似たような処理が多くなり、どれを使えばいいのかわかりづらく、可読性が低くなります。なるべく関数は使いまわせる形で分かりやすい関数名にしましょう。
種類は２パターン
自作関数
自分で定義したものです。上でご説明したのは自作関数のことを言っています。
組み込み関数
元から用意されているものです。実際プログラムを書いていて結構使います。
関数を学習するキーワード
引数
呼び出すときに関数に渡す変数。渡した変数は関数内で使えるようになる。引数はあってもなくてもよい。
戻り値
関数を呼び出したときに関数で処理された結果を入れた値。戻り値は必ず１変数になる。複数返したい場合はオブジェクトに入れて返す必要がある。戻り値もあってもなくてもよい。
匿名関数
関数名を省略して宣言した関数。詳しい書き方は下でまとめて書きます。
即時関数
定義と同時に処理される関数。関数を１回しか使わない場合に使う。
関数を使う
引数・戻り値による種類
最初に覚えるのはこの引数と戻り値による関数の4パターンです。
引数あり・戻り値なし
呼び出し時に引数を渡します。
//変数宣言
function dispStr(str){
console.log(str);
}
//呼び出し
dispStr('Hello!');引数なし・戻り値あり
呼び出し結果を使います。宣言にはreturn値が必要です。
//変数宣言
function getNum(){
var num = 1;
return num;
}
//呼び出し
var num = getNum();
console.log(num); //1引数あり・戻り値あり
//変数宣言
function addCount(count){
result = count + 1;
return result;
}
//呼び出し
var one = 1;
two = addCount(one);引数なし・戻り値なし
//変数宣言
function func(){
//処理
}
//呼び出し
func();宣言の種類
次に関数の宣言方法の4パターンです。先ほどの無名関数、即時関数もここでご紹介します。
- 基本の書き方
- 変数に入れる書き方
- 無名関数
- 即時関数
//基本の書き方
function funcName(){
//処理内容
}
//変数に入れる書き方
var func = function funcName(){
//処理内容
};
//無名関数
var func = function(){
//処理内容
};
//即時関数
(function() {
})("");まとめ
関数を初めて見た方はこの記事を一通り見終わって、種類が多く戸惑うかもしれません。しかし実際にコードを書いていると、書き方に慣れてきますので自分で書いてみてください。特に動いていることを確認できるのは以下のメソッドを関数内に書くことです。
//コンソールに表示
console.log(変数);
//アラートを画面に表示
alert(変数);関数の呼び出しは関数名を指定して呼び出すので、あまり使う場面がないと思うかもしれません。実際はイベントというものから呼び出すことが多くなります。イベントとはブラウザからクリックやスクロールなどの操作を感知するものです。自分何か作成しようと思ったときには必ず必要になってくるので、関数についてはしっかり理解しておきましょう。
