【JavaScript】関数 - 一連の処理をまとめる
JavaScriptの関数をご紹介します。
関数
関数は『処理のまとまり』です。
関数は定義のみでは、処理が行われず『関数の呼び出し』によって実行します。
基本構文
関数は定義と呼び出しがあります。
定義
function 関数名() {
// 処理........
}関数名は自由に決めることできますが、変数名と同様に次のルールを満たす必要があります。
- アルファベット（大文字/小文字）、アンダーバー（_）、数字のみ
- 頭文字に数字は使えない。
- 予約語（JavaScriptの記法等で使用する単語）は使えない。
呼び出し
関数は定義のみでは実行されません。
関数を呼び出すことで実行されます。
関数名()サンプル
function sample() {
console.log("sample関数を実行しました。");
}
sample();sample関数を実行しました。１〜３行目が関数の定義です。
関数はsample、処理の内容はコンソールにsample関数を実行しました。を出力します。
５行目は関数の呼び出しです。
コンソールから、console.log("sample関数を実行しました。");を実行したことが分かります。
また、複数の関数を定義することができ、何度でも呼び出すことができます。
function sample() {
console.log("sample関数を実行しました。");
}
function example() {
console.log("example関数を実行しました。");
}
sample();
example();
sample();
example();
sample();
example();sample関数を実行しました。
example関数を実行しました。
sample関数を実行しました。
example関数を実行しました。
sample関数を実行しました。
example関数を実行しました。example関数を追加し、sample関数とexample関数を3回ずつ呼び出しています。
呼び出す度に実行するので、コンソールにはsample関数を実行しました。とexample関数を実行しました。が交互に３回ずつ出力されています。
メリット
関数のメリットはコード量削減、可読性向上、柔軟性向上などがあります。
コード量削減
コード量を削減できる場合があります。
例えば、関数を使わない次のコードをご覧ください。
console.log("おはようございます。");
console.log("2024年01月01日。");
console.log("現在の気温は10度。");
console.log("湿度は50%。");
console.log("降水確率は10%です。");
console.log("こんにちは。");
console.log("2024年01月01日。");
console.log("現在の気温は10度。");
console.log("湿度は50%。");
console.log("降水確率は10%です。");
console.log("こんばんは。");
console.log("2024年01月01日。");
console.log("現在の気温は10度。");
console.log("湿度は50%。");
console.log("降水確率は10%です。");おはようございます。
2024年01月01日。
現在の気温は10度。
湿度は50%。
降水確率は10%です。
こんにちは。
2024年01月01日。
現在の気温は10度。
湿度は50%。
降水確率は10%です。
こんばんは。
2024年01月01日。
現在の気温は10度。
湿度は50%。
降水確率は10%です。１７行のコードですが、関数を使うと１５行に削減できます。
function weather() {
console.log("2024年01月01日。");
console.log("現在の気温は10度。");
console.log("湿度は50%。");
console.log("降水確率は10%です。");
}
console.log("おはようございます。");
weather();
console.log("こんにちは。");
weather();
console.log("こんばんは。");
weather();おはようございます。
2024年01月01日。
現在の気温は10度。
湿度は50%。
降水確率は10%です。
こんにちは。
2024年01月01日。
現在の気温は10度。
湿度は50%。
降水確率は10%です。
こんばんは。
2024年01月01日。
現在の気温は10度。
湿度は50%。
降水確率は10%です。２行削減できました。
この例ではコード量が少ないため、効果を体感しづらいかもしれませんが、何千、何万行あるプログラムの場合、コード量を大きく削減できます。
また、このように同じ処理をまとめることを共通化、まとめたものを共通処理と呼ぶことがあります。
可読性向上
上記のコードを比較すると関数を使用したコードの方が読みやすいと思います。
関数を使用しない場合、次の同じコードを３回読まなければなりませんが、使用した場合は１度で済みます。
console.log("2024年01月01日。");
console.log("現在の気温は10度。");
console.log("湿度は50%。");
console.log("降水確率は10%です。");柔軟性向上
柔軟性はアプリケーションやシステム等の改修のし易さです。
ここではコードに修正を加える場合のメリットを代表例として解説します。 上記コードを下記内容で修正する場合を考えてみましょう。
console.log("現在の気温は10度。");
を
console.log("現在の気温は7度。");
に変更。関数を使用しない場合は、該当箇所が３箇所あり、その全てを修正しなければなりません。
しかし、関数を使用した場合は、１箇所を修正するだけです。
function weather() {
console.log("2024年01月01日。");
console.log("現在の気温は7度。");
console.log("湿度は50%。");
console.log("降水確率は10%です。");
}
console.log("おはようございます。");
weather();
console.log("こんにちは。");
weather();
console.log("こんばんは。");
weather();おはようございます。
2024年01月01日。
現在の気温は7度。
湿度は50%。
降水確率は10%です。
こんにちは。
2024年01月01日。
現在の気温は7度。
湿度は50%。
降水確率は10%です。
こんばんは。
2024年01月01日。
現在の気温は7度。
湿度は50%。
降水確率は10%です。このように関数を使った方がスマートにプログラムを組むことができるケースがあります。
デメリット
デメリットは、『メリットを理解せず使ってしまうと複雑なプログラムになる』ということです。
例えば、関数を使用してもコード量が減らない場合や、本来意味が異なるコードを共通化してしまうなどで、使うタイミングが重要です。
デメリットを回避するにはメリットを理解して関数を使うようにしましょう。
