JavaScriptで関数を使う方法【初心者向け】
JavaScriptで【関数（function）】を使う方法をプログラミング初心者向けに解説した記事です。基本的な構文だけでなく、引数や返り値の書き方も合わせて紹介。関数内で定義されている変数「ローカル変数」も解説。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
山本 理仁
テックアカデミーではフロントエンドコースを担当。
JavaScriptの使い方を初心者向けに紹介した記事です。
今回は、JavaScriptで関数を使う方法にについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
関数を使うことによって、プログラムが不必要に長くなることを防いだり、同じことを何度も記述する必要がなくなったりします。
それに伴ってプログラムの見通しがよくなり、より複雑なプログラムを書けるようにもなりますよ。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回の記事の内容は動画でもご覧いただけます。
記事の最後にありますので、動画の解説のほうがわかりやすいという方はご覧ください。
関数とは
関数とは、繰り返し使う処理をまとめて書いておき、プログラムの好きな位置で実行できるというものです。
JavaScriptのプログラミングに慣れてきて、数十～数百行くらい書くようになると、「1つのプログラムの中で全く同じ記述を繰り返し書いていた」といったことがあります。
同じ記述を繰り返す状態は、「プログラムが冗長である」と言い、望ましくありません。
プログラムを読み返す時、読みづらくなりがちです。
そのため、繰り返し使う処理をまとめて書いておき、プログラムの好きな位置で実行できる「関数」を使います。
まとめて書くことができるため、プログラムの見通しがよくなります。
また、プログラムを修正する時、修正漏れを防ぐことができます。
繰り返し使う処理に対して関数を使うことで様々なメリットがあります。
関数って自分で作ることもできるんですか？
そうなんだ。最初からJavaScriptに入っている関数だけじゃなくて、それらを組み合わせたりして、自分で作成することもできるんだよ。ユーザーが定義するのでユーザー定義関数とも言われてるよ。
定義しておくと、後から使えて便利そうですね！
その通り！関数も変数と同じように名前を付けて定義するんだ。さっそく関数を書いてみよう！
関数の定義
では、関数の定義の仕方についてみていきましょう。
＜関数：基本のかたち＞
関数を定義するときにまず必要となってくるのが、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>
money変数の値だけが異なることに注目してください。
if文やdocument.writeの部分は全く同じですね。
const money = ○○○○; // この数値部分だけが異なる。
これが冗長なプログラムです。
読み返したとき、「ここは意図して同じ記述を繰り返したんだったか、それとも似ているが実は異なる記述をしたんだったか…」と、不必要に悩むことになります。
そこで関数を使います。
同一の処理を関数としてまとめ、切り出す
改めて、関数にしたい部分(=繰り返し使いたい部分)を確認してみましょう。
if (money > 5000) {
document.write("お金持ち");
} else if (money > 3000){
document.write("普通");
} else {
document.write("貧乏");
}
関数で切り出すときは、functionで定義し、関数名をつけます。
ここでは関数名をjudgeとします。
関数名は好きな名前でよいですが、今回は、”moneyに応じて、「お金持ち」「普通」「貧乏」のどれかを判断(=ジャッジ, judge)する関数” なので、judgeという名前にしました。
※好きな名前でよいからといって、「aaa」など適当な名前をつけてしまうと、その関数が何を意味するのか後々わからなくなってしまいます。
関数名だけで処理の内容を思い出せるような名前が良いでしょう。
今回は「判断する」という部分のみに着目して「judge」という名前にしましたが、「money」や「お金持ちの度合い」のニュアンスも加味して、「getRichRankByMoney」といった名前も考えられます。
名前が長すぎるのも良くありませんが、少なくともどういった役割を持つ関数なのか分かるような関数名をつけましょう。
また、前述のように “moneyに応じて” 処理を行いますので、moneyを引数とします。
function judge(money) {
if (money > 5000) {
document.write("お金持ち");
} else if (money > 3000){
document.write("普通");
} else {
document.write("貧乏");
}
}
上記のように記載することで、”moneyに応じて、「お金持ち」「普通」「貧乏」のどれかを判断する、judgeという関数” が定義されます。
関数は、定義しただけでは動作しません。
処理をまとめただけで、実行はしていないです。
関数を実行するには、以下の構文で記述します。
(「ここで実行」という部分に注目してください。)
<script>
function 関数名(引数) { // ここで定義。
処理
:
}
関数名(引数); // ここで実行。
関数名(引数); // 繰り返し実行することもできる。
</script>
前述の例に当てはめると、以下のように記述できます。
<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というものを使います。
以下の例は、moneyの値に応じて、「お金持ち」「普通」「貧乏」のいずれかをreturnしています。
<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>
この例では、returnされる値を、judge関数の呼び出し元でresultという変数に代入し、document.writeで出力しています。
returnを使わない例と比べると、judge関数の中でdocument.writeするか、judge関数の呼び出し元でdocument.writeするかの違いだけなので、出力は変わりません。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
ローカル変数とは
最後に、ローカル変数についてみていきましょう。
ローカル変数とは、関数内などで定義されている変数のことで、さらに、その関数などの中でのみ有効になるという性質を持ちます。
「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>
前述の return を使った例を、上記のように書き換え（紛らわしくないように、緑の部分をresultからresに変えてあります）、function judgeの外からdocument.writeを呼び出してみます。
しかし、以下のように何も出力されません。
ローカル変数は、関数の外からアクセスできません。
関数を定義するときは、まとめたい処理や、引数や戻り値を柔軟に組み合わせます。
プログラムを書いていくときは、よりシンンプルでわかりやすくを心掛けましょう。
JavaScriptで関数を使う方法については以上です。
今回は関数の定義のしかた、引数や戻り値といった点を主に紹介しましたが、別の書き方としてアロー関数というものもあるので、合わせてご覧くださいね。
また、JavaScriptの他にPHPで関数を使う方法の記事もあるので、合わせてご覧ください。
関数の中で、変数を定義したんですが、外側では使えないんですか？
そうなんだよね。今は、難しく考えなくてもいいけど、変数にはスコープ(有効範囲)があるんだ。
有効範囲があるのはどうしてでしょうか？せっかく定義したので、どこからでも使えた方が便利じゃないでしょうか？
確かに。でも定義した変数がどこからでも有効になるっていうのは、後々面倒なことになったりするんだよね。なので、有効範囲が決められてるんだ。
動画で解説！JavaScriptで関数を使う方法【初心者向け】
JavaScriptで関数を使う方法を動画で解説します。
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
