JavaScriptで関数を使う方法【初心者向け】
JavaScriptで【関数（function）】を使う方法をプログラミング初心者向けに解説した記事です。基本的な構文だけでなく、引数や返り値の書き方も合わせて紹介。関数内で定義されている変数「ローカル変数」も解説。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
JavaScriptの使い方を初心者向けに紹介した記事です。
今回は、JavaScriptで関数を使う方法について解説します。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。（動画は2つに分かれています）
目次
本記事は下記の流れで説明していきます。
関数とは
関数とは、同じ処理をまとめて定義し、何度も使い回しができるかたちにしたものです。
プログラムが大きくなると、同じ内容の処理をあちこちで使うことになってきます。その際、同じものを繰り返し記述したり、コピー&ペーストすることは可能です。しかし、プログラムが冗長になってしまい、見た目にも美しくありません。
その時、同じ処理をひとつの関数というかたちで一箇所で定義します。そして、その処理を書くかわりに、その関数を呼び出すというかたちで置き換えるのです。すると、プログラムがすっきりスマートになります。
さらに、その処理の部分に共通の変更点が生じた際にも、変更が一箇所で済むというメリットもあります。
ですので、同じような処理が何度も出てくるなというときには、関数というかたちで一箇所にまとめて、まとめて定義するということを考えてください。
関数って自分で作ることも出来るんですか？
そうなんだ。最初からJavaScriptに入っている関数だけじゃなくて、それらを組み合わせたりして、自分で作成することも出来るんだよ。ユーザーが定義するのでユーザー定義関数とも言われてるよ。
定義しておくと、後から使えて便利そうですね！
その通り！関数も変数と同じように名前を付けて定義するんだ。さっそく関数を書いてみよう！
[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中
関数の定義
では、関数の定義の仕方についてみていきましょう。
＜関数：基本のかたち＞
関数を定義するときにまず必要となってくるのが、function（関数の意）です。それに続けて関数につける名前を書き、{ }のなかに処理を書きます。一番シンプルに書くとこのようになります。
<script>
function 関数名( ) {
処理
}
</script>
＜関数：引数や返り値を入れて＞
さらに、関数に対して引数（ひきすう）を渡したい場合、( )のなかに引数名を入れていきます。引数は幾つ入れてもよく、必要な分だけ「,」で区切って入れます。これによって、同じ処理をするにしても、渡した引数に応じて処理をする内容を少しずつ変えることができるようになります。
また、この関数を処理した結果というものを呼び出し元で取得したい場合は、returnというキーワードを使って、その後に関数のなかで処理した結果である返り値というのを渡してあげれば、関数を呼び出している元に渡って、関数の処理結果というのを改めて呼び出しもとから使えるようになります。
<script>
function 関数名(引数1,引数2,…) {
処理
return 返り値;
}
</script>
関数を使って実際にプログラムを書いてみよう
まずは関数を使わず、変数だけで書いてみよう
まずは、関数を使わず書くのがいかに大変かを実感するために、変数のみを使って書いてみましょう。
変数をmoneyと定義し、変数moneyに入る値に応じて、document.writeで出力する文字列を「お金持ち」「普通」「貧乏」の3通りにわけるという処理を書いてみます。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
const money = "○○○○"; // 「1000」や「5000」などの数値を入れる
if (money > 5000) {
document.write("お金持ち");
} else if (money > 3000) {
document.write("普通");
} else {
document.write("貧乏");
}
</script>
</body>
</html>
上記のプログラムが基本となり、変数moneyに入る値に応じてその都度処理が「お金持ち」「普通」「貧乏」と変わります。しかし、関数を使わない場合は、処理をしたい分だけ同じプログラムを書かなければなりません。
・変数moneyに10000を代入する→「お金持ち」と出力される
<script>
const money = 10000;
if (money > 5000) {
document.write("お金持ち");
} else if (money > 3000){
document.write("普通");
} else {
document.write("貧乏");
}
</script>
・変数moneyに4000を代入する→「普通」と出力される
<script>
const money = 4000;
if (money > 5000) {
document.write("お金持ち");
} else if (money > 3000){
document.write("普通");
} else {
document.write("貧乏");
}
</script>
・変数moneyに2000を代入する→「貧乏」と出力される
<script>
const money = 2000;
if (money > 5000) {
document.write("お金持ち");
} else if (money > 3000){
document.write("普通");
} else {
document.write("貧乏");
}
</script>
むむむ……。↓この一行しか変わっていないのに、どうしてそれ以下の同じプログラムを毎回書かなければいけないんだろうという気持ちになってきますね。
const money = ○○○○;
正直めんどう……。プログラムも冗長になって見づらいし……。
そんなとき、関数を使えば共通の処理の部分をまとめて関数として切り出すことができるのです。
同一の処理を関数としてまとめ、切り出す
それでは、いよいよ毎度書いていた以下のプログラムを関数にまとめて切り出しましょう。
if (money > 5000) {
document.write("お金持ち");
} else if (money > 3000){
document.write("普通");
} else {
document.write("貧乏");
}
関数で切り出すときは、functionで定義し、関数名をつけます。
ここでは関数名をjudgeとします。変数moneyに入る値に応じて、「お金持ち」「普通」「貧乏」のどれかを判断したいからです。
※適当な名前をつけてしまうと、その関数が何を意味するのか後々わからなくなってしまいます。どういった役割を持つ関数なのかということが、きちんとわかりやすい関数名になるように注意をしてください。
また、このままでは、関数に渡される情報が何なのか分かりにくいので、引数の名前をmoneyとします。引数moneyに入る値に応じて、出力する値、文字列を変えるということを関数として切り出すのです。
function judge(money) {
if (money > 5000) {
document.write("お金持ち");
} else if (money > 3000){
document.write("普通");
} else {
document.write("貧乏");
}
}
こうしておけば、これまで何回も書いたりコピペしてきた処理を削除して、judgeという関数で置き換えることができます。
プログラムはこれだけで済んでしまいます。
<script>
function judge(money) {
if (money > 5000) {
document.write("お金持ち");
} else if (money > 3000){
document.write("普通");
} else {
document.write("貧乏");
}
}
//引数moneyに10000を渡す→「お金持ち」と出力される//
judge(10000);
//引数moneyに4000を渡す→「普通」と出力される//
judge(4000);
//引数moneyに2000を渡す→「貧乏」と出力される//
judge(2000);
</script>
非常にすっきりしましたね。
両者はもちろん同じ内容のプログラムですので、ブラウザではこのように出力されます。
返り値returnを使う
また、document.writeを使わず、判断結果の文字列を返すこともできます。その場合、返り値returnというものを使います。resultという変数に、判断結果の文字列「お金持ち」「普通」「貧乏」を代入して、最後にreturnでresultの変数に入っている値を返すというようなかたちです。
<script>
function judge(money) {
let result;
if (money > 5000) {
result = "お金持ち";
} else if (money > 3000){
result = "普通";
} else {
result = "貧乏";
}
return result;
}
//関数の戻り値を入れる変数//
let result;
//引数moneyに10000を渡す→「お金持ち」と出力される//
result = judge(10000);
document.write(result);
//引数moneyに4000を渡す→「普通」と出力される//
result = judge(4000);
document.write(result);
//引数moneyに2000を渡す→「貧乏」と出力される//
result = judge(2000);
document.write(result);
</script>
このように書けば、judgeした結果の、resultという変数に入ってる値をdocument.writeで出力するというような処理の仕方になります。
これもさきほどと結果は変わらないはずです。
ローカル変数とは
最後に、ローカル変数についてみていきましょう。
ローカル変数とは、関数内などで定義されている変数のことで、さらに、その関数などの中でのみ有効になるという性質を持ちます。
「const 変数名」や「let 変数名」で宣言するとき、ローカル変数の場合は、関数の中などで宣言をおこないます。
よって、この記事で学んだ関数judgeでいえば、関数内に書いたlet result; がローカル変数に当たります。
<script>
function judge(money) {
let result;
if (money > 5000) {
result = "お金持ち";
} else if (money > 3000){
result = "普通";
} else {
result = "貧乏";
}
return result;
}
const res = judge(10000);
document.write(result);
</script>
ためしに、上記のように書き換え（紛らわしくないように、緑の部分をresultからresに変えてあります）、function judgeの外からdocument.writeを呼び出してみます。
しかし、このように何も出力されません。
ローカル変数には、関数の外からアクセスできないのです。
このように、関数を定義するときは、まとめたい処理や、引数や返り値というものを柔軟に組み合わせておこないます。プログラムを書いていくときは、よりシンンプルでわかりやすくを心掛けましょう。
JavaScriptで関数を使う方法については以上です。
JavaScriptの他にPHPで関数を使う方法の記事もあるので、合わせてご覧ください。
関数の中で、変数を定義したんですが、外側では使えないんですか？
そうなんだよね。今は、難しく考えなくてもいいけど、変数にはスコープ(有効範囲)があるんだ。
有効範囲があるのはどうしてでしょうか？せっかく定義したので、どこからでも使えた方が便利じゃないでしょうか？
確かに。でも定義した変数がどこからでも有効になるっていうのは、後々面倒なことになったりするんだよね。なので、有効範囲が決められてるんだ。
[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。
