path: root/files/ja/learn/javascript/building_blocks/functions/index.html

---
title: 関数 — 再利用可能なコードブロック
slug: Learn/JavaScript/Building_blocks/Functions
tags:
  - API
  - Article
  - Beginner
  - Browser
  - CodingScripting
  - Custom
  - Functions
  - Guide
  - JavaScript
  - Learn
  - Method
  - anonymous
  - invoke
  - 'l10n:priority'
  - parameters
translation_of: Learn/JavaScript/Building_blocks/Functions
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>

<p class="summary">コーディングにおいて、不可欠なコンセプトが<strong>関数</strong>です。関数を使用することで、特定のタスクをこなすコードを定義し、保持しておいて、いつでも簡単なコマンドで呼び出すことを可能にしてくれます。同じコードを何度も打たなければならないよりとっても簡単です。この記事では関数の書き方や、関数を実行する方法、定義の仕方、スコープ、引数といった関数に関する基礎を学びます。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提知識:</th>
   <td>基本的なコンピューターの知識、HTML と CSS への理解、<a href="/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a>。</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>JavaScript の関数についての基礎を理解する。</td>
  </tr>
 </tbody>
</table>

<h2 id="Where_do_I_find_functions" name="Where_do_I_find_functions">関数はどこにありますか？</h2>

<p>JavaScript の中で、関数はあらゆるところに見つかるでしょう。実際、これまでのところすべての場面で関数を使用してきました。これについてはあまり触れてきませんでした。しかし、今こそ明確に関数について話し始め、本当に構文を探索する時期です。</p>

<p>一対のかっこ — <code>()</code> — の機能である JavaScript の構造を使用するほとんどの場合、そして <a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for ループ</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while と do ... while ループ</a>、または <a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if..else 文</a>のような一般的な組み込みの言語構造を使用<strong>していない</strong>場合、あなたは関数を使用していることになります。</p>

<h2 id="Built-in_browser_functions" name="Built-in_browser_functions">ブラウザー組み込み関数</h2>

<p>このコースではブラウザーに組込まれた関数をたくさん使ってきました。毎回テキスト文字列を操作したときには、こんな風に:</p>

<pre class="brush: js notranslate">let myText = 'I am a string';
let newString = myText.replace('string', 'sausage');
console.log(newString);
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement made</pre>

<p>あるいは毎回配列を操作したときには:</p>

<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs'];
let madeAString = myArray.join(' ');
console.log(madeAString);
// the join() function takes an array, joins
// all the array items together into a single
// string, and returns this new string</pre>

<p>また毎回乱数を作成したときには:</p>

<pre class="brush: js notranslate">let myNumber = Math.random();
// the random() function generates a random
// number between 0 and 1, and returns that
// number</pre>

<p>...関数を使っていたのです!</p>

<div class="note">
<p><strong>メモ</strong>: これらの機能に慣れるために、必要なときにはこういった行をあなたのブラウザーの JavaScript コンソールにいつでも入力してみてください。</p>
</div>

<p>JavaScript言語にはたくさんの組込み関数があるので、いろいろあるあなたのやりたい事を、全部をあなた自身で書かなくてもすみます。実は、あなたが呼び出して起動(走らせたり実行する事の別の言い方)するコードのいくつかは、JavaScript では書けない、ブラウザー組込み関数です — こういった関数の多くは背後のブラウザーのコードを呼び出していて、これらは JavaScript のようなウェブ言語ではなく、大半が C++のような低レベルのシステム言語で書かれています。</p>

<p>ブラウザー関数のいくつかは JavaScript言語の核に含まれない事を心に留めておいてください — いくつかはブラウザー API の一部として定義されていて、もっと多くの機能を提供すべくデフォルトの言語の上で構築されています(詳しくは<a href="/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">私たちのコースのこの以前のセクション</a>を見てください)。ブラウザー API のもっと詳しい使い方については、後の方のモジュールで見ていく事になるでしょう。</p>

<h2 id="Functions_versus_methods" name="Functions_versus_methods">関数とメソッド</h2>

<p>オブジェクトの<strong>メソッド</strong>の一部を、プログラマーは<strong>関数</strong>として呼び出します。構成された JavaScript オブジェクト内部の働きについては、まだ知る必要はありません — この後のモジュールで、オブジェクト内部の働きや自分でオブジェクトを作る方法について教える段階になってから覚えれば大丈夫です。今のところは、ウェブのあちこちにある関連したリソースを見ていると、メソッドと関数が混在している事があるとわかってもらいたいだけです。</p>

<p>これまで利用してきた組込み関数は両方です: 関数でありメソッドでもあります。組み込みオブジェクトとそのメソッドと同様に、組み込み関数の一覧を<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects">こちらで</a>確認できます。</p>

<p>このコースのここまででもたくさんのカスタム関数を見てきました — ブラウザーの内部でではなくあなたのコードの中で定義された関数です。独自の名前の直後にカッコがついてるものを見かけたら、それはカスタム関数を使っているという事です。<a href="/docs/Learn/JavaScript/Building_blocks/Looping_code">繰返しの記事</a>で出てきた <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> の例(<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">ソースコード</a>はこちら)では、独自に作った <code>draw()</code> 関数が含まれていました。こんなやつです:</p>

<pre class="brush: js notranslate">function draw() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (let i = 0; i &lt; 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}</pre>

<p>この関数は、{{htmlelement("canvas")}} 要素の内にランダムな円を 100描きます。同じ事をやりたい時には、いつでもこんな具合に関数を起動するだけです</p>

<pre class="brush: js notranslate">draw();</pre>

<p>繰り返しをする毎に何度も同じコードを書き上げるのではなく。関数にはあなたが書きたいどんなコードでも含められます — 関数の中から他の関数を呼ぶことだってできます。例に挙げた上の関数では、<code>random()</code>関数を 3 回呼んでいて、random関数は以下のコードで定義されています:</p>

<pre class="brush: js notranslate">function random(number) {
  return Math.floor(Math.random()*number);
}</pre>

<p>ブラウザー組込みの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> は 0 から 1 までの間の 10進数の乱数を作成するだけなので、私たちにはこの関数が必要でした。私たちは 0 から指定した数にわたる乱数が欲しかったのです。</p>

<h2 id="Invoking_functions" name="Invoking_functions">関数の呼び出し</h2>

<p>もうよくご存知でしょう、でも念のため … 定義した後で実際に関数を使うには、関数を走らせ — あるいは起動し — なければなりません。これはコードのどこかに関数の名前、直後にカッコの組を書けばできます。</p>

<pre class="brush: js notranslate">function myFunction() {
  alert('hello');
}

myFunction();
// calls the function once</pre>

<h2 id="Anonymous_functions" name="Anonymous_functions">匿名関数</h2>

<p>ちょっと違う形式で定義されて起動される関数を見かける事があるでしょう。ここまでは関数をこのように作ってきました:</p>

<pre class="brush: js notranslate">function myFunction() {
  alert('hello');
}</pre>

<p>でも名前のない関数を作る事もできます:</p>

<pre class="brush: js notranslate">function() {
  alert('hello');
}</pre>

<p>これは<strong>匿名関数</strong>と呼ばれます — 名前がないんです! それだけでは何もしません。匿名関数はよくイベントハンドラで使われていて、例えば以下では関連づけられたボタンがクリックされるたび、関数の中のコードが走ります:</p>

<pre class="brush: js notranslate">const myButton = document.querySelector('button');

myButton.onclick = function() {
  alert('hello');
}</pre>

<p>上の例では、ページの中に選択してクリックするための{{htmlelement("button")}}要素が存在しなければならないでしょう。あなたはこのような例をここまでのコースで見てきましたし、ここから先の記事でもっと学習し、使い方を見ていく事になります。</p>

<p>匿名関数を変数の値として代入する事もできます:</p>

<pre class="brush: js notranslate">const myGreeting = function() {
  alert('hello');
}</pre>

<p>この関数は次のように起動できます:</p>

<pre class="brush: js notranslate">myGreeting();
</pre>

<p>関数に名前をつけたような効果があります。また関数を複数の変数の値として代入する事もできます:</p>

<pre class="brush: js notranslate">let anotherGreeting = myGreeting;</pre>

<p>結果、この関数はどちらの方法でも起動できます</p>

<pre class="brush: js notranslate">myGreeting();
anotherGreeting();</pre>

<p>ですがこれは混乱するだけなので、やらないように! 関数を作成するときはこの形式でやった方が良いです:</p>

<pre class="brush: js notranslate">function myGreeting() {
  alert('hello');
}</pre>

<p>匿名関数は主にイベント発火 — ボタンがクリックされたとか — のレスポンスとして、一連のコードを走らせるだけのような場合に、イベントハンドラとして使われます。くりかえしですが、こんな具合です:</p>

<pre class="brush: js notranslate">myButton.onclick = function() {
  alert('hello');
  // I can put as much code
  // inside here as I want
}</pre>

<h2 id="Function_parameters" name="Function_parameters">関数の引数</h2>

<p>関数には実行する時に<strong>引数</strong>が必要なものがあります — 関数のカッコとカッコの間に書かなければならない値で、関数が正しい仕事をするのに必要とされます。</p>

<div class="note">
<p><strong>メモ</strong>: 引数は、パラメーター、プロパティ、アトリビュート（属性）などと呼ばれる場合もあります。</p>
</div>

<p>例えばブラウザー組込み関数 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> は引数を必要としません。呼ばれるといつも 0 から 1 までの乱数を返します:</p>

<pre class="brush: js notranslate">let myNumber = Math.random();</pre>

<p>ですがブラウザー組込みの文字列関数 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> は二つの引数が必要です — 主文字列から探すべき部分文字列と、部分文字列を置換する文字列です:</p>

<pre class="brush: js notranslate">let myText = 'I am a string';
let newString = myText.replace('string', 'sausage');</pre>

<div class="note">
<p><strong>メモ</strong>: 複数の引数を指定するときは、カンマで区切って書きます</p>
</div>

<p>引数には省略可能 — 書かなくても良い — なものもある事に触れておくべきでしょう。省略された場合、関数はだいたいデフォルトに規定された動作を行ないます。例えば、配列の <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> 関数のパラメータは省略可能です:</p>

<pre class="brush: js notranslate">let myArray = ['I', 'love', 'chocolate', 'frogs'];
let madeAString = myArray.join(' ');
// returns 'I love chocolate frogs'
let madeAString = myArray.join();
// returns 'I,love,chocolate,frogs'</pre>

<p>もし結合/区切り文字を指定する引数が省略された場合、デフォルトとしてカンマが使われます。</p>

<h2 id="Function_scope_and_conflicts" name="Function_scope_and_conflicts">関数のスコープと競合</h2>

<p>{{glossary("スコープ")}}という言葉について説明しておきましょう — 関数を扱う際にはとても大切な概念です。関数を作成するとき、関数の中で定義されている変数や関数は、内部でそれぞれ独自の<strong>スコープ</strong>というものを持ちます。これはそれぞれが独自の小部屋に閉じ込められていて、別の関数の内部から、あるいはこの関数の外部のコードから触れられくなる事を意味しています。</p>

<p>あなたのすべての関数の外側、一番の外側を、<strong>グローバルスコープ</strong>と呼びます。グローバルスコープで定義された値はすべて、コードのどこからでもアクセスできます。</p>

<p>JavaScript がこう作られているのにはいくつも理由があります — が、主な理由はセキュリティと組織化のためです。時には変数にコードのどこからでもアクセスされないようにしたい場合もあるでしょう — どこかから呼び込んだ外部スクリプトが、あなたのコードをおかしくして問題を起す場合があるかもしれません。別の場所でたまたま同じ名前の変数を使っていて、衝突していたために。これは悪意をもってわざとやっている場合や、単なる偶然の場合もあります。</p>

<p>そうですね、例えばある HTML ファイルが二つの外部 JavaScript ファイルを呼び出しているとして、そのどちらも同じ名前の変数と関数を定義しているとします:</p>

<pre class="brush: html notranslate">&lt;!-- Excerpt from my HTML --&gt;
&lt;script src="first.js"&gt;&lt;/script&gt;
&lt;script src="second.js"&gt;&lt;/script&gt;
&lt;script&gt;
  greeting();
&lt;/script&gt;</pre>

<pre class="brush: js notranslate">// first.js
let name = 'Chris';
function greeting() {
  alert('Hello ' + name + ': welcome to our company.');
}</pre>

<pre class="brush: js notranslate">// second.js
let name = 'Zaptec';
function greeting() {
  alert('Our company is called ' + name + '.');
}</pre>

<p>あなたが呼び出したいのはどっちも <code>greeting()</code>関数ですが、あなたには <code>first.js</code> ファイルの <code>greeting()</code> 関数しかアクセスできません(2 つ目は無視されます)。加えて、<code>second.js</code> ファイルで <code>let</code> キーワードで <code>name</code> 変数に 2度目の定義をしようとするとエラーになります。</p>

<div class="note">
<p><strong>注</strong>: この例を <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">GitHub でライブ実行</a> できます(<a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">ソースコード</a>はこちら).</p>
</div>

<p>あなたのコードの部品を関数の中に隔離するとこのような問題を避けられるので、これが一番良いやりかたと考えられています。</p>

<p>これは動物園みたいなものです。ライオン、シマウマ、トラ、ペンギンはそれぞれの檻の中にいて、それぞれの檻の中のものにしか触れられません — 関数のスコープと同じ事です。もし彼等が他の檻の中に侵入できたら問題が起きることでしょう。良くて、知らない住人に囲まれて気まずい思いをする — 寒くて水だらけのペンギンの檻に入ったライオンやトラは酷い気分になるでしょう。最悪の場合、ライオンやトラはペンギンを食べてみようとするかも!</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p>

<p>動物園の管理人はグローバルスコープみたいなものです — 管理人はすべての檻の鍵を持っていて、エサを補充し、動物にうんざりし、などなど。</p>

<h3 id="Active_learning_Playing_with_scope" name="Active_learning_Playing_with_scope">アクティブラーニング:  スコープで遊んでみよう</h3>

<p>スコープを示すための実際の例を見てみましょう。</p>

<ol>
 <li>まず <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a> の例のローカルコピーを作成します。これには <code>a()</code> と <code>b()</code> という 2 つの関数と、<code>x</code>、<code>y</code>、<code>z</code> の 3 つの変数が含まれます。これらの変数のうち 2 つは関数内で定義され、もう 1 つはグローバルスコープ内で定義されます。また <code>output()</code> という 3番目の関数も含まれています。この関数は単一のパラメータを取り、ページの段落に出力します</li>
 <li>ブラウザーとテキストエディターでサンプルを開きます</li>
 <li>ブラウザーの開発者ツールで JavaScript コンソールを開きます。JavaScript コンソールで、次のコマンドを入力します。
  <pre class="brush: js notranslate">output(x);</pre>
  変数x の出力値が画面に表示されるはずです。</li>
 <li>コンソールに次のように入力してみてください
  <pre class="brush: js notranslate">output(y);
output(z);</pre>
  どちらも、"<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>"の一行のエラーが返されるはずです。なぜでしょうか？ 関数スコープのため、つまり <code>y</code> と <code>z</code> は <code>a()</code> と <code>b()</code> 関数の中でロックされているので、global スコープから呼び出されたときには <code>output()</code> はそれらにアクセスできません。</li>
 <li>しかし、別の関数の中から呼び出されたときはどうでしょうか？ <code>a()</code> と <code>b()</code> を次のように編集してみてください：
  <pre class="brush: js notranslate">function a() {
  let y = 2;
  output(y);
}

function b() {
  let z = 3;
  output(z);
}</pre>
  コードを保存してブラウザーに再ロードしてから、JavaScript コンソールから <code>a()</code> と <code>b()</code> 関数を呼び出してみてください。

  <pre class="brush: js notranslate">a();
b();</pre>
  ページに <code>y</code> と <code>z</code> の値の出力が表示されます。<code>output()</code> 関数が他の関数の中、つまり表示される変数が定義されているのと同じスコープでそれぞれ呼び出されているので、これはうまくいきます。<code>output()</code> 自体はグローバルスコープで定義されているので、どこからでも利用できます。</li>
 <li>今度は次のようにコードを更新してみてください：
  <pre class="brush: js notranslate">function a() {
  let y = 2;
  output(x);
}

function b() {
  let z = 3;
  output(x);
}</pre>
  保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：</li>
 <li>
  <pre class="brush: js notranslate">a();
b();</pre>
  <code>a()</code> と <code>b()</code> の両方の呼び出しは <code>x</code> の値、つまり 1 が出力されます。これは <code>x</code> がグローバル変数であり、すべてのコード内どこでも利用可能であるため、<code>output()</code> の呼び出しが <code>x</code> と同じスコープではなくてもうまく動きます。</li>
 <li>最後に、次のようにコードを更新してみてください：
  <pre class="brush: js notranslate">function a() {
  let y = 2;
  output(z);
}

function b() {
  let z = 3;
  output(y);
}</pre>
  保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：</li>
 <li>
  <pre class="brush: js notranslate">a();
b();</pre>
  今度は <code>a()</code> と <code>b()</code> の両方の呼び出しで、迷惑な "<a href="/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: <em>variable name</em> is not defined</a>" エラーが返されます — これは <code>output()</code> 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。</li>
</ol>

<div class="note">
<p><strong>注</strong>: 同じスコープルールはループ (<code>for() { ... }</code> など) と条件ブロック (<code>if() { ... }</code>など) には適用されません。それらは非常によく似ていますが、同じものではありません。混乱しないように注意してください。</p>
</div>

<div class="note">
<p><strong>注</strong>: <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> というエラーは、あなたが遭遇する最も一般的なエラーの 1 つです。このエラーが発生し、問題の変数が定義されていると確信できる場合は、変数のスコープを確認してください。</p>
</div>

<ul>
</ul>

<h3 id="Functions_inside_functions" name="Functions_inside_functions">関数の中の関数</h3>

<p>別の関数内であっても、どこからでも関数を呼び出すことができます。これは、コードをきれいにする方法としてよく使われます。大きな複雑な関数がある場合は、いくつかのサブ関数に分解すれば分かります。</p>

<pre class="brush: js notranslate">function myBigFunction() {
  let myValue;

  subFunction1();
  subFunction2();
  subFunction3();
}

function subFunction1() {
  console.log(myValue);
}

function subFunction2() {
  console.log(myValue);
}

function subFunction3() {
  console.log(myValue);
}
</pre>

<p>関数内で使用されている値が適切にスコープ内にあることを確認してください。上記の例では <code>ReferenceError: myValue is not defined</code> というエラーが発生します。<code>myValue</code>変数は関数呼び出しと同じスコープで定義されていますが、関数定義内では定義されていないためです。従って実際のコードは関数が呼び出されたときに実行されます。これを動くようにするには、次のように関数に値を渡す必要があります。</p>

<pre class="brush: js notranslate">function myBigFunction() {
  let myValue = 1;

  subFunction1(myValue);
  subFunction2(myValue);
  subFunction3(myValue);
}

function subFunction1(value) {
  console.log(value);
}

function subFunction2(value) {
  console.log(value);
}

function subFunction3(value) {
  console.log(value);
}</pre>

<h2 id="スキルをテストしよう!">スキルをテストしよう!</h2>

<p>この記事の最後に来ましたが、最も大事な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a> を見てください。このテストは次の 2 つの記事でカバーしているスキルを求めていますので、テストの前にそちらを読むほうが良いかもしれません。</p>

<h2 id="Conclusion" name="Conclusion">まとめ</h2>

<p>この記事では関数の背後にある基本的な概念を探り、次に実用的な方法を習得し、独自のカスタム関数を構築する手順を紹介しました。</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/JavaScript/Guide/Functions">関数の詳細ガイド</a> — ここに含まれていないいくつかの高度な機能について説明します。</li>
 <li><a href="/ja/docs/Web/JavaScript/Reference/Functions">関数</a></li>
 <li><a href="/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters">デフォルト引数</a>, <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> — 高度な概念リファレンス</li>
</ul>

<ul>
</ul>

<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>

<h2 id="In_this_module" name="In_this_module">このモジュール</h2>

<ul>
 <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/conditionals">コードでの意思決定 — 条件文</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Looping_code">ループコード</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Functions">関数 — 再利用可能なコードブロック</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">独自の関数を作る</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Return_values">関数の戻り値</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></li>
</ul>