この記事で分かること
- 関数とは何か（役割とメリット）
- 関数の定義方法（
functionの基本構文） - 引数の使い方と複数引数の扱い方
returnで値を返す仕組み- イベント（
onload/onclick）から関数を呼び出す方法 - 実例で理解する関数の動作
JavaScriptでは、繰り返し使う処理をひとまとめにして再利用できるようにしたものを関数と呼びます。
関数を使うことでコードが整理され、読みやすく、メンテナンスしやすくなります。
JavaScriptにはあらかじめ用意された関数もありますが、ユーザーが自由に関数を定義することもできます。
関数の基本構文
function 関数名(引数) {
処理内容;
}
- 関数名：任意の名前（命名規則に従う）
- 引数：関数に渡す値（省略可）
- 処理内容：関数が実行する処理
関数名の付け方
function の後に関数名を指定します。
どんな処理をする関数なのか分かりやすい名前にすると、後から読み返したときに理解しやすくなります。
引数とは？
引数とは、関数に渡す値のことです。
引数を使うことで、同じ関数でも渡す値によって処理結果を変えることができます。
- 引数は
()の中に指定する - 複数ある場合はカンマで区切る
- 不要な場合は空のままでOK
関数の中身（処理内容）
関数が実行する処理は { } の中に記述します。
関数の中から別の関数を呼び出すこともできます。
例：関数 msg2 の中で msg3 を呼び出す
function msg2() {
alert("この関数は onclick によって呼び出されました。");
msg3();
}
return｜関数の処理を終了し、値を返す
return は、関数の処理を終了し、呼び出し元に値を返すための命令です。
function myFunc() {
alert("OK");
return 1; // 呼び出し元に1を返す
}
i = myFunc(); // i には 1 が入る
関数の呼び出し
function は「関数を定義するだけ」なので、読み込まれただけでは実行されません。
実際に動作させるには、イベントや別の関数から呼び出す必要があります。
呼び出し方は簡単で、関数名() と書くだけです。
サンプル：ページ読み込み時とボタンクリック時に関数を呼び出す
function msg1() {
alert("ページをロードすると関数 msg1 が呼び出されます。");
}
function msg2(a) {
alert("ボタンをクリックすると関数 msg2 が呼び出されます。\n引数は " + a + " です。");
msg3();
}
function msg3() {
alert("関数 msg3 は関数 msg2 の内部から呼び出されます。");
}
HTML側
<body onload="msg1()">
<form id="sample_form">
<input type="button" value="Click!" onclick="msg2(2)">
</form>
</body>
このサンプルでは、
- ページ読み込み時（
onload）にmsg1が実行 - ボタンクリック時に
msg2が実行 msg2の中でmsg3が呼び出される
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- 基本文法を順序立てて理解したい
関数は JavaScript の基礎であり、書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
関数・イベント・条件分岐など、基本を丁寧に理解できます。
この本で解決できること：
- 関数の仕組みを視覚的に理解できる
- イベントとの組み合わせ方が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
関数の仕組みを深く理解し、実務レベルの基礎力を身につけられます。
この本で解決できること：
- 関数の動作原理を体系的に理解できる
- 実務で使えるレベルのコードが書けるようになる
- 現代的な JavaScript の書き方が身につく
動画で理解を深めたい方へ（Udemy講座）
関数はコードの基礎ですが、実際の動きを動画で見ると理解が一気に深まります。
Udemy では初心者向けに丁寧に解説された講座が多数あります。
初心者のためのJavaScript 完全入門
関数・条件分岐・イベントなど、JavaScriptの基礎を体系的に学べる人気講座です。
この講座で解決できること：
- 関数の動きを視覚的に理解できる
- イベントとの連携方法が分かる
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、関数の理解をさらに深めたい方に最適です。
この講座で解決できること：
- 関数の応用的な使い方を理解できる
- 実務レベルのコード設計が身につく
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- 関数の使い分けで混乱しやすい
- コードの意図が理解できない
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、つまずきやすい部分を丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
関数に関するよくある質問（FAQ）
関数は定義しただけでは実行されないの？
はい。関数は「定義」しただけでは動かず、関数名() で呼び出す必要があります。
引数はいくつでも指定できる？
技術的にはいくつでも指定できますが、3つ以上になる場合はオブジェクトで渡す方が読みやすくなります。
return がない関数はどうなる？
return を書かない場合、関数は undefined を返します。
関数の中から別の関数を呼び出してもいい？
はい。関数内で他の関数を呼び出すことはよくあるパターンです。
まとめ
- 関数は「繰り返し使う処理」をまとめたもの
- 引数を使うと処理内容を柔軟に変えられる
returnで値を返すことができる- 関数は定義しただけでは実行されない（呼び出しが必要）
