diff options
Diffstat (limited to 'files/ja/web/javascript/reference/statements/function/index.html')
-rw-r--r-- | files/ja/web/javascript/reference/statements/function/index.html | 158 |
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> |