aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/javascript/reference/statements/function/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/web/javascript/reference/statements/function/index.html')
-rw-r--r--files/ja/web/javascript/reference/statements/function/index.html158
1 files changed, 158 insertions, 0 deletions
diff --git a/files/ja/web/javascript/reference/statements/function/index.html b/files/ja/web/javascript/reference/statements/function/index.html
new file mode 100644
index 0000000000..8db65175e7
--- /dev/null
+++ b/files/ja/web/javascript/reference/statements/function/index.html
@@ -0,0 +1,158 @@
+---
+title: 関数宣言
+slug: Web/JavaScript/Reference/Statements/function
+tags:
+ - Function
+ - JavaScript
+ - Language feature
+ - Statement
+translation_of: Web/JavaScript/Reference/Statements/function
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>関数宣言</strong> (関数文) は、指定された引数を使用して関数を定義します。</p>
+
+<p>また、 {{jsxref("Function")}} のコンストラクターと{{jsxref("Operators/function", "関数式", "", 1)}}を使用して関数を定義することもできます。</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-function.html","shorter")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">function <var>name</var>([<var>param</var>[, <var>param</var>,[..., <var>param</var>]]]) {
+ [<var>statements</var>]
+}
+</pre>
+
+<dl>
+ <dt><code><var>name</var></code></dt>
+ <dd>関数の名前です。</dd>
+</dl>
+
+<dl>
+ <dt><code><var>param</var></code> {{optional_inline}}</dt>
+ <dd>関数に渡す引数の名前です。引数の最大数はエンジンによって異なります。</dd>
+</dl>
+
+<dl>
+ <dt><code><var>statements</var></code> {{optional_inline}}</dt>
+ <dd>関数の本体を構成する文です。</dd>
+</dl>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<p>関数宣言で作成された関数は <code>Function</code> オブジェクトであり、<code>Function</code> オブジェクトのすべてのプロパティ、メソッド、動作を備えています。関数の詳細については {{jsxref("Function")}} を参照してください。</p>
+
+<p>関数は式を使用して作成することもできます ({{jsxref("Operators/function", "関数式", "", 1)}}を参照)。</p>
+
+<p>既定では、関数は <code>undefined</code> を返します。他の値を返すには、関数に返す値を指定する {{jsxref("Statements/return", "return")}} 文が必要です。</p>
+
+<h3 id="Conditionally_created_functions" name="Conditionally_created_functions">条件付きで作成される関数</h3>
+
+<p>関数は条件付きで宣言できます。つまり、関数文を <code>if</code> 文の中に入れ子にすることができますが、結果は実装によって一貫性がないので、このパターンを本番コードでは使用すべきではありません。条件付きの関数の作成には、代わりに関数式を使用してください。</p>
+
+<pre class="brush: js notranslate">var hoisted = "foo" in this;
+console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
+if (false) {
+ function foo(){ return 1; }
+}
+
+// In Chrome:
+// 'foo' name is hoisted. typeof foo is undefined
+//
+// In Firefox:
+// 'foo' name is hoisted. typeof foo is undefined
+//
+// In Edge:
+// 'foo' name is not hoisted. typeof foo is undefined
+//
+// In Safari:
+// 'foo' name is hoisted. typeof foo is function
+</pre>
+
+<p>真と評価される条件でも結果はまったく同じです。</p>
+
+<pre class="brush: js notranslate">var hoisted = "foo" in this;
+console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
+if (true) {
+ function foo(){ return 1; }
+}
+
+// In Chrome:
+// 'foo' name is hoisted. typeof foo is undefined
+//
+// In Firefox:
+// 'foo' name is hoisted. typeof foo is undefined
+//
+// In Edge:
+// 'foo' name is not hoisted. typeof foo is undefined
+//
+// In Safari:
+// 'foo' name is hoisted. typeof foo is function
+</pre>
+
+<h3 id="Function_declaration_hoisting" name="Function_declaration_hoisting">関数宣言の巻き上げ</h3>
+
+<p>JavaScript の関数宣言は、それを囲む関数やグローバルスコープの先頭に巻き上げられ、関数を宣言する前に使うことができます。</p>
+
+<pre class="brush: js notranslate">hoisted(); // logs "foo"
+
+function hoisted() {
+ console.log('foo');
+}
+</pre>
+
+<p>{{jsxref("Operators/function", "関数式", "", 1)}}は巻き上げられないことに注意してください。</p>
+
+<pre class="brush: js notranslate">notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+ console.log('bar');
+};
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Using_function" name="Using_function">function の使用</h3>
+
+<p>以下のコードは、商品 <code>a</code>, <code>b</code>, <code>c</code> の販売個数が与えられた場合に、販売個数の合計を返す関数を宣言しています。</p>
+
+<pre class="brush: js notranslate">function calc_sales(units_a, units_b, units_c) {
+ return units_a * 79 + units_b * 129 + units_c * 699;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">仕様書</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("javascript.statements.function")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Operators/function", "関数式", "", 1)}}</li>
+ <li>{{jsxref("Statements/function*", "function* 文", "", 1)}}</li>
+ <li>{{jsxref("Operators/function*", "function* 式", "", 1)}}</li>
+ <li>{{jsxref("Functions/Arrow_functions", "アロー関数", "", 1)}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Statements/async_function", "非同期関数", "", 1)}}</li>
+ <li>{{jsxref("Operators/async_function", "非同期関数式", "", 1)}}</li>
+</ul>