From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../build_your_own_function/index.html | 262 ++++++ .../building_blocks/conditionals/index.html | 782 +++++++++++++++++ .../javascript/building_blocks/events/index.html | 597 +++++++++++++ .../building_blocks/functions/index.html | 407 +++++++++ .../building_blocks/image_gallery/index.html | 142 ++++ .../ja/learn/javascript/building_blocks/index.html | 56 ++ .../building_blocks/looping_code/index.html | 933 +++++++++++++++++++++ .../building_blocks/return_values/index.html | 201 +++++ 8 files changed, 3380 insertions(+) create mode 100644 files/ja/learn/javascript/building_blocks/build_your_own_function/index.html create mode 100644 files/ja/learn/javascript/building_blocks/conditionals/index.html create mode 100644 files/ja/learn/javascript/building_blocks/events/index.html create mode 100644 files/ja/learn/javascript/building_blocks/functions/index.html create mode 100644 files/ja/learn/javascript/building_blocks/image_gallery/index.html create mode 100644 files/ja/learn/javascript/building_blocks/index.html create mode 100644 files/ja/learn/javascript/building_blocks/looping_code/index.html create mode 100644 files/ja/learn/javascript/building_blocks/return_values/index.html (limited to 'files/ja/learn/javascript/building_blocks') diff --git a/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html new file mode 100644 index 0000000000..e12ce6f478 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/build_your_own_function/index.html @@ -0,0 +1,262 @@ +--- +title: 独自の関数を作る +slug: Learn/JavaScript/Building_blocks/Build_your_own_function +tags: + - Article + - Beginner + - CodingScripting + - Functions + - Guide + - JavaScript + - Learn + - Tutorial + - build + - invoke + - 'l10n:priority' + - parameters +translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
+ +

前の記事で扱った重要な理屈をたくさん使って、この記事では実践的な練習を行ないます。ここではあなたが自力で独自関数を作成するための練習を行なっていきます。同時に、関数を扱う上で役に立つ細々の説明もしていきます。

+ + + + + + + + + + + + +
前提知識:基本的なコンピューターの知識、HTML と CSS への理解、JavaScript の第一歩 、関数 — 再利用可能なコードブロック。
目的:独自の関数を作成する練習、役に立つ関連事項についてつっこんだ説明。
+ +

Active learning: 関数を作ってみよう

+ +

これから作ってみる独自の関数を displayMessage()。これは独自のメッセージボックスをウェブページ上に表示し、ブラウザー組込みの alert() 関数の特製の代替品として動作します。既に見たものですが、忘れた事にしましょう。以下をブラウザーの JavaScript コンソールから打ち込みます、どのページでも構いません:

+ +
alert('This is a message');
+ +

alert 関数は引数を一つ取ります — アラートボックスに表示される文字列です。文字列を色々変えてメッセージを変化させてみて下さい。

+ +

alert 関数には制限があります: メッセージを変更することはできますが、色やアイコンなど、それ以外の部分を簡単には変えられません。もっと楽しくできるやつを作りましょう。

+ +
+

注記: この例題は全てのモダンブラウザー上で問題なく動くはずですが、古いブラウザーではちょっとおかしな見た目になるかもしれません。この課題は Firefox、Opera、Chrome のようなモダンなブラウザー上で行なうのが推奨です。

+
+ +

基本的な関数

+ +

最初に、基本的な関数を組み立てていきましょう。

+ +
+

注記: 関数に名前を付ける方針としては、変数名に名前をつける方針と同じルールに従うべきです。問題はありません、すぐに見分けがつくからです — 関数ならすぐ後に括弧が付きますが、変数には付きません。

+
+ +
    +
  1. function-start.html ファイルにアクセスして、ローカルコピーを作成するところから初めます。HTML は単純です — body にはボタン一つしかありません。特製メッセージボックス用の基本的な CSS スタイルと、JavaScript を追加していく用の空の {{htmlelement("script")}} 要素が含まれています。
    2. +
  2. 次に、<script> 要素の中に以下を追加して下さい: + 
    function displayMessage() {
+
+}
    + キーワード function から始めますが、これは関数を定義するという意味です。この後には、関数につけたい名前、カッ括弧の組、中括弧の組と続きます。関数に渡したい引数は括弧の中に、関数を呼び出したときに走らせたいコードは中括弧の中に書きます。
    3. +
  3. 最後に、以下のコードを中括弧の中に追加します: + 
    const html = document.querySelector('html');
+
+const panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+const msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+const closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
    +
    4. +
+ +

これは見ていくにはそこそこの量のコードですから、一つ一ついっしょに進んでいく事にしましょう。

+ +

最初の行では {{domxref("document.querySelector()")}} と呼ばれる DOM API 関数を使って {{htmlelement("html")}} 要素を選択し、html という名前の定数に要素への参照を保存したので、これを使っていろいろやっていきます:

+ +
const html = document.querySelector('html');
+ +

次の部分では別の DOM API 関数 {{domxref("document.createElement()")}} を使い、{{htmlelement("div")}} 要素を作成、これへの参照を panel という定数に保存しています。この要素は我々のメッセージボックスの外枠となっていきます。

+ +

次にまた別の DOM API 関数 {{domxref("Element.setAttribute()")}} を使って、我々のパネルの class 属性とその値 msgBox を設定します。これは要素のスタイルを指定しやすくするためです — ページの CSS を見ると、メッセージボックスとその中身に適用するスタイルとして .msgBox クラスセレクターがあるのがわかるでしょう。

+ +

最後に、前に保存した html 変数の DOM 関数 {{domxref("Node.appendChild()")}} を呼んでいますが、この関数は一つの要素を別の要素の子として組み入れる働きをします。panel という<div> 要素を子として、<html> 要素の中に追加したいのです。作成した要素は作成したページにぽんと現われたりはしません — どこに置くのかも指定しなければなりません。なのでこのようにする必要があります。

+ +
const panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+ +

次の 2 つのセクションでは既に見た同じ createElement() と appendChild() 関数を使用して、2 つの新しい要素、つまり {{htmlelement("p")}} と {{htmlelement("button")}} を作成し、<div> パネルの子要素としてページに挿入します。段落の中にメッセージを挿入する {{domxref("Node.textContent")}} プロパティ (要素のテキスト内容を表す) とボタンの中に 'x' を使います。このボタンは、ユーザーがメッセージボックスを閉じるときにクリック/アクティブ化する必要があります。

+ +
const msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+const closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+ +

最後に、{{domxref("GlobalEventHandlers.onclick")}} イベントハンドラーを使用して、ボタンをクリックするとパネル全体をパネルから削除してメッセージボックスを閉じるようにします。
+
+ 簡単に説明すると、onclick ハンドラーはボタン (または実際にはページ上の任意の要素) で使用できるプロパティで、ボタンをクリックしたときに実行するコードを指定する関数に設定できます。後のイベントの記事で、これらについてさらに詳しく学びます。onclick ハンドラーは、ボタンがクリックされたときに実行されるコードを含む無名関数と等しくなります。関数内の行は {{domxref("Node.removeChild()")}} DOM API関数を使用して、HTML要素の特定の子要素 (この場合は <div> パネル) を削除することを指定します。

+ +
closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
+ +

基本的には、このコードブロック全体が HTML のブロックを生成してページに挿入しています。

+ +
<div class="msgBox">
+  <p>This is a message box</p>
+  <button>x</button>
+</div>
+ +

作業するコードがたくさんありました。今のところどのように動作しているか正確に覚えていないことをあまり心配しないでください！ ここでは、関数の構造と使用法を中心に説明しますが、この例では何か面白いことを示したかったのです。

+ +

関数の呼び出し

+ +

これで、<script> 要素に書かれた関数定義がうまくいきましたが、それは何もしません。

+ +
    +
  1. 関数の下に次の行を含めて呼び出してみてください: + 
    displayMessage();
    + この行は関数を呼び出し、すぐに実行させます。コードを保存してブラウザーを再読み込みすると、小さなメッセージボックスがすぐに 1 回だけ表示されます。それを一度呼ぶだけです。
    2. +
  2. +

    サンプルページでブラウザーの開発者ツールを開き、JavaScript コンソールに移動してもう一度その行を入力すると、もう一度表示されます。これは楽しいことです - 私たちは今好きな時に呼び出すことができる再利用可能な関数を持っています。

    + +

    しかし、ユーザーとシステムのアクションに応じて表示されるようにすることをお勧めします。実際のアプリケーションでは、このようなメッセージボックスは、新しいデータが利用可能であること、エラーが発生したこと、ユーザーがプロファイルを削除しようとしている (「これは本当ですか？」)、またはユーザーが 新しい連絡先や操作が正常に終了しました...などが起こったときに呼び出されるでしょう。

    + +

    このデモでは、ユーザーがボタンをクリックするとメッセージボックスが表示されます。

    +
    3. +
  3. 追加した前の行を削除します。
    4. +
  4. 次に、ボタンを選択し、そのボタンへの参照を定数に格納します。関数定義の上のコードに次の行を追加します: + 
    const btn = document.querySelector('button');
    +
    5. +
  5. 最後に、前の行の下に次の行を追加します: + 
    btn.onclick = displayMessage;
    + 関数内の closeBtn.onclick... 行と同様に、ここではボタンがクリックされたことに応答してコードを呼び出します。しかしこの場合、コードを含む無名関数を呼び出す代わりに、関数名を直接呼び出しています。
    6. +
  6. ページを保存して再表示してみてください。ボタンをクリックするとメッセージボックスが表示されるはずです。
    7. +
+ +

関数名の後ろに括弧が含まれていないのはなぜでしょうか。これは、ボタンがクリックされた後にのみ、関数をすぐに呼びたくないからです。行を次の行に変更しようとすると

+ +
btn.onclick = displayMessage();
+ +

保存して再読み込みすると、ボタンをクリックせずにメッセージボックスが表示されます。このコンテキストの括弧は「関数呼び出し演算子」と呼ばれることがあります。現在のスコープですぐに関数を実行する場合にのみ使用します。同様の点で、匿名関数内のコードは関数スコープ内にあるため、すぐには実行されません。
+
+ 最後の実験を試した場合は、最後の変更を取り消してから実行してください。

+ +

パラメーターを使用して関数を改善する

+ +

その機能はそれほど便利ではありません — 毎回同じ既定のメッセージを表示したくはないのです。いくつかのパラメーターを追加して機能を改善し、いくつかの異なるオプションで呼び出すことができるようにしましょう。

+ +
    +
  1. まず、関数の最初の行を更新します。 + 
    function displayMessage() {
    + +
    このようになります:
    + + 
    function displayMessage(msgText, msgType) {
    + 関数を呼び出すと、括弧内に 2 つの変数値を指定して、メッセージボックスに表示するメッセージとそのメッセージのタイプを指定できます。
    2. +
  2. 最初のパラメーターを使用するには、関数内の次の行を更新します: + 
    msg.textContent = 'This is a message box';
    + +
    このようになります
    + + 
    msg.textContent = msgText;
    +
    3. +
  3. 最後に関数呼び出しを更新して、更新されたメッセージテキストを追加する必要があります。次の行を変更します。 + 
    btn.onclick = displayMessage;
    + +
    このブロックのようになります:
    + + 
    btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};
    + 私たちが呼び出している関数の括弧内にパラメーターを指定したい場合、直接呼び出すことはできません - 直接のスコープにないため、すぐに呼び出されないように無名関数の中に入れる必要があります。ボタンがクリックされるまで呼び出されません。
    4. +
  4. 再読み込みしてコードをもう一度試してみてください。それでもパラメーター内のメッセージを変えてボックスに表示されるメッセージを変えることができます。
    5. +
+ +

より複雑なパラメーター

+ +

次のパラメーターに移りましょう。これにはもう少し作業が必要です。msgType パラメーターの設定によって、別のアイコンと異なる背景色が表示されるように設定していきます。

+ +
    +
  1. まず始めに、この演習に必要なアイコン (warning と chat) を GitHub からダウンロードしてください。HTML ファイルと同じ場所にある icons という新しいフォルダーに保存します + +
    メモ: iconfinder.com にある warning と chat のアイコンは Nazarrudin Ansyari によってデザインされたものです。ありがとう！ (実際のアイコンのページは移動か削除されています。)
    +
    2. +
  2. 次に、HTML ファイル内の CSS を探します。私たちは、アイコンの道を作るためにいくつかの変更を行います。まず .msgBox の幅を次のように更新します + 
    width: 200px;
    + このようにします + + 
    width: 242px;
    +
    3. +
  3. 次に、.msgBox p { ... } ルール内に次の行を追加します + 
    padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;
    +
    4. +
  4. これでアイコンの表示を処理するために、displayMessage() 関数にコードを追加する必要があります。関数の終了中括弧 (}) のすぐ上に次のブロックを追加します。 + 
    if (msgType === 'warning') {
+  msg.style.backgroundImage = 'url(icons/warning.png)';
+  panel.style.backgroundColor = 'red';
+} else if (msgType === 'chat') {
+  msg.style.backgroundImage = 'url(icons/chat.png)';
+  panel.style.backgroundColor = 'aqua';
+} else {
+  msg.style.paddingLeft = '20px';
+}
    + ここで、msgType パラメーターが 'warning' に設定されている場合、警告アイコンが表示され、パネルの背景色は赤に設定されます。'chat'に設定されている場合、チャットアイコンが表示され、パネルの背景色が青色に設定されます。msgType パラメーターがまったく設定されていない (または別のものに変更されている) 場合、コードの else { ... } 部分が有効になり、段落には単にデフォルトのパディングが与えられ、背景パネルの色もしくはアイコンのどちらかが未設定の状態となります。これは msgType パラメーターが指定されていない場合、省略可能なパラメーターであることを意味するデフォルトの状態を提供します。
    5. +
  5. 更新された関数をテストしましょう。この displayMessage() 呼び出しを更新して： + 
    displayMessage('Woo, this is a different message!');
    + これらのうちの 1 つにしましょう。 + + 
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');
    + 私たちの (今はそうではない) 小さな機能がどのように役立つかがわかります。
    6. +
+ +
+

メモ: サンプルをうまく動作させることができない場合は、コードを GitHub の完成バージョンと比較して (see it running live もみて) チェックしてください。もしくは私たちにヘルプを依頼してください。

+
+ +

スキルをテストしよう!

+ +

この記事の最後まで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を維持しているか検証するテストを見ることができます— Test your skills: Functions. を見てください。このテストは次の記事でカバーするスキルが必要ですので、試す前にこれを読んでおくとよいでしょう。

+ +

まとめ

+ +

最後までたどり着きました。おめでとうございます！この記事では、実用的なカスタム関数を構築するプロセス全体を紹介しました。もう少し動けば、実際のプロジェクトに移植することができます。次の記事では、別の重要な関連概念である戻り値を説明して関数をまとめます。

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/javascript/building_blocks/conditionals/index.html b/files/ja/learn/javascript/building_blocks/conditionals/index.html new file mode 100644 index 0000000000..70d662df26 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/conditionals/index.html @@ -0,0 +1,782 @@ +--- +title: コードでの意思決定 — 条件文 +slug: Learn/JavaScript/Building_blocks/conditionals +tags: + - Article + - Beginner + - CodingScripting + - Conditionals + - JavaScript + - Learn + - Switch + - conditions + - else + - if + - 'l10n:priority' + - ternary +translation_of: Learn/JavaScript/Building_blocks/conditionals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
+ +

どのプログラミング言語でも、コードは様々な入力に応じた決定を迫られ、その結果として動作を起こします。例えば、ゲームではプレイヤーの残機が 0 になった場合、ゲームオーバーとなります。天気アプリは朝に起動された場合は日の出の画像を表示し、夜に起動された場合は星や月の画像を表示します。この記事では、JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。

+ + + + + + + + + + + + +
前提条件:基本的なコンピューターの知識および HTML と CSS への理解、JavaScript の第一歩。
目的:JavaScript における条件分岐構造をどのように使用するかを理解する。
+ +

すべては条件次第..

+ +

人類 (と他の動物たち)は 小さいもの (「クッキーを 1 つ食べるべきか、2 つ食べるべきか...。」) から大きいもの (「故郷に残って親父の農場を継ぐべきか、アメリカで宇宙物理学を学ぶべきか...。」) まで、生活に関わるすべての決定を下します。

+ +

JavaScript では、条件文を使ってそのような決定を下すことが可能です。条件文は、選ばなければならない選択肢 (例えば「クッキーを 1 つまたは 2 つ食べる」) からそれを選んだ場合の結果を導き出します (おそらく「1 つクッキーを食べる」を選んだら、「まだちょっとお腹が空いている」という結果となるでしょうし、「2 つクッキーを食べる」を選んだら「お腹いっぱい。だけどクッキーを全部食べてママに怒られる」という結果となってしまうでしょう。)

+ +

+ +

if ... else ステートメント

+ +

それでは、JavaScript で最もよく使われる条件文から始めましょう。それは if ... else ステートメントです。

+ +

if ... else の基本的な構文

+ +

if...else の基本的な構文は以下の{{glossary("pseudocode", "擬似コード")}}のようになっています。

+ +
if (条件式) {
+  条件式が true の場合に実行されるコード
+} else {
+  それ以外の場合に実行されるコード
+}
+ +

ここでは...

+ +
    +
  1. if キーワードの後ろに括弧が並んでいます。
    2. +
  2. 判断に用いる条件式はその括弧の中にあります (たいていの場合は「この値はもう一方より大きい」や、「この値は存在する」などです)。この条件には、前回のモジュールで習った比較演算子を使用し、true または false を返します。
    3. +
  3. 中にコードが書いてある (実際のコードはどんなものでも構いません) 中括弧のペアは、条件式が true の場合に実行されます。
    4. +
  4. 続いて else キーワードがあります。
    5. +
  5. さらに他のコードが書いてある (こちらもどんなコードでも構いません) 中括弧のペアは条件式が true ではない場合に実行されます。
    6. +
+ +

このコードは (英語を使う人には) とても読みやすいものになっています。このコードは「もし ( if ) 条件式 ( condition ) が true を返したら A のコードを実行し、それ以外ならば ( else ) B のコードを実行する」と読めます。

+ +

else とそれに続く中括弧は必ずしも書く必要がないことを覚えておきましょう。次のコードも全く問題のないコードです。

+ +
if (条件式) {
+  条件式が true の場合に実行されるコード
+}
+
+普通に実行されるコード
+ +

ここで注意しておかなければならないことがあります。それは 2 つ目のコードブロックは、条件分岐の管理下になく、条件式が true か false かに関係なく、常に実行されることです。これはまったく悪いことではないのですが、条件に応じてどちらか一方のみ動かしたいと思っている場合には、気を付けておかないと思った通りの動作をしないでしょう。

+ +

最後の確認点として、if...else ステートメントが中括弧なしで書かれているのを見ることがあります。以下のような省略した書き方です。

+ +
if (条件式) 条件式が true の場合に実行されるコード
+else それ以外の場合に実行されるコード
+ +

これは正常なコードですが、あまり推奨されません。中括弧でコードブロックを分割して、複数の行とインデントを使って書いたほうが読みやすく、コードがどうなっているかを把握しやすいためです。

+ +

実際の例

+ +

構文をもっとよく理解するため、実際の例を考えてみましょう。例えば両親にお使いを頼まれた子供を想像してください。「欲しがってたおもちゃがあるよね。お使いを頼まれてくれたら、お小遣いを追加であげるよ。」と親が頼みます。JavaScript では以下のようなコードで表現できます。

+ +
let shoppingDone = false;
+
+if (shoppingDone === true) {
+  let childsAllowance = 10;
+} else {
+  let childsAllowance = 5;
+}
+ +

このコードは常に shoppingDone 変数が false なので、かわいそうな子供は追加のお小遣いを受け取れません。両親が子供がお使いを完了した場合に shoppingDone 変数を true にセットしてあげるかどうかはプログラム次第です (つまり私たち次第です。)

+ +
+

注: GitHub で上記のコードの完全なバージョンが公開されています (ライブ実行でも確認できます。)

+
+ +

else if

+ +

先ほどの例では実行結果は 2 つだけでしたが、もっと選択肢がある場合はどうでしょうか？

+ +

else if を使って、追加の選択肢を if...else に繋ぐ方法があります。追加の選択肢は if() { ... } と else { ... } の間に、コードブロックを続けて追加する必要があります。具体的な例として、天気予報のアプリケーションの一部を見てみましょう。

+ +
<label for="weather">今日の天気を選択してください: </label>
+<select id="weather">
+  <option value="">--選択してください--</option>
+  <option value="sunny">晴れ</option>
+  <option value="rainy">雨</option>
+  <option value="snowing">雪</option>
+  <option value="overcast">曇り</option>
+</select>
+
+<p></p>
+ +
const select = document.querySelector('select');
+const para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  const choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = '今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！';
+  } else if (choice === 'rainy') {
+    para.textContent = '雨が降っています。レインコートと傘を忘れないようにして、できる限り室内で過ごしましょう。';
+  } else if (choice === 'snowing') {
+    para.textContent = '雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。';
+  } else if (choice === 'overcast') {
+    para.textContent = '雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。';
+  } else {
+    para.textContent = '';
+  }
+}
+
+
+ +

{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. HTML に、天気を選ぶことが可能な {{htmlelement("select")}} 要素があり、1 つの段落がありますね。
    2. +
  2. JavaScript では、{{htmlelement("select")}} と {{htmlelement("p")}} の各要素について、参照を取得して保持し、<select> 要素にはイベントリスナーを設定しています。もし、要素の値が変わったら setWeather() 関数が動きます。
    3. +
  3. この関数が実行されると、まずは choice という変数に、<select> 要素の現在選択されている値を入れます。そして、条件文を使い、choice の値に応じた文字列が段落に設定されます。最初の if() {...} のブロックを除いて、どのように else if() {...} のブロックで判定しているか注目してください。
    4. +
  4. 一番下の else {...} 選択肢は、「最後の手段」となるオプションで、この中のコードは、どの条件にも一致しなかった場合 (true とならなかった場合) に実行されます。今回の場合選択されていない場合に、段落を空にしています。何も選択されていない場合というのは、ユーザーが再度最初に表示されていた「--選択してください--」というオプションを選んだ場合です。
    5. +
+ +
+

注: GitHub で上記のコードの完全なバージョンが公開されています (ライブ実行でも確認できます。)

+
+ +

比較演算子に関するメモ

+ +

比較演算子は条件文の中で使われます。JavaScript での数学入門 — 数値と演算子についてで初めて出てきましたね。演算子には以下のようなものがありました。

+ + + +
+

注: もし記憶があいまいならば、上記のリンク先を見て復習しましょう。

+
+ +

真偽 (true/false) の値を判定する場合には少しの配慮が必要であることを付け加えさせてください。おそらく何度か躓くであろう、よくあるパターンです。false、undefined、null、0、NaN、空文字列 ('') 以外の値は条件文で使った場合に true となります。ですから、その値が true であるか判定したい場合や、その値が存在するか (例えば、undefined ではないこと) 判定したい場合は単に変数名を使用するだけです。

+ +
let cheese = 'チェダー';
+
+if (cheese) {
+  console.log('やった！チーズトーストを作るチーズがあるよ。');
+} else {
+  console.log('今日はチーズトーストのチーズがないよ。');
+}
+ +

先ほどの子供のお使いの例に戻ると、以下のようにも書くことができます。

+ +
let shoppingDone = false;
+
+if (shoppingDone) { // '=== true' を明示的に指定する必要はありません
+  let childsAllowance = 10;
+} else {
+  let childsAllowance = 5;
+}
+ +

入れ子の if ... else

+ +

if...else ステートメントを入れ子にして、他の if...else ステートメントの中で使用することは全く問題ありません。例えば、天気予報アプリケーションで気温に応じて表示する内容を切り替えたい場合以下のように書くことができます。

+ +
if (choice === 'sunny') {
+  if (temperature < 86) {
+    para.textContent = '外の気温は ' + temperature + ' 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう';
+  } else if (temperature >= 86) {
+    para.textContent = '外の気温は ' + temperature + ' 度です — かなり暑いです！外出する場合にはアイスクリームを持って出かけましょう。';
+  }
+}
+ +

内側の if...else ステートメントは、外側の if ステートメントとは完全に独立して作用します。

+ +

論理演算子: AND と OR と NOT

+ +

複数の条件を入れ子の if...else ステートメントを書かずに判定したいなら、論理演算子の出番です。条件文の中で使用する場合、AND と OR は以下の作用をもたらすでしょう。

+ + + +

AND の例を示すため、先ほどのコードを書き直すと以下のようになります。

+ +
if (choice === 'sunny' && temperature < 86) {
+  para.textContent = '外の気温は ' + temperature + ' 度です — とてもいい天気です。海水浴や、公園に出かけてアイスクリームを食べましょう';
+} else if (choice === 'sunny' && temperature >= 86) {
+  para.textContent = '外の気温は ' + temperature + ' 度です — かなり暑いです！外出する場合にはアイスクリームを持って出かけましょう。';
+}
+ +

例では、最初のブロックは choice === 'sunny' と temperature < 86 のどちらも true となった場合にのみ実行されます。

+ +

今度は OR の例を見てみましょう。

+ +
if (iceCreamCarOutside || houseStatus === '火事') {
+  console.log('すぐに家から出ましょう。');
+} else {
+  console.log('それでは家にいましょう。');
+}
+ +

論理演算子の最後は NOT です。! 演算子で表され、式を否定するのに使用します。それでは先ほどの OR と組み合わせてみましょう。

+ +
if (!(iceCreamVanOutside || houseStatus === '火事')) {
+  console.log('それでは家にいましょう。');
+} else {
+  console.log('すぐに家から出ましょう。');
+}
+ +

このコード例では、OR ステートメントが true となれば、NOT 演算子がそれを否定します。そのため、式全体は false となります。

+ +

論理ステートメントは思うがままに、いくつでも繋げることが可能です。次の例では両方の OR ステートメントが真を返した場合に AND ステートメントが真となり、if の中のコードが実行されます。

+ +
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'スティーブ')) {
+  // コードを実行
+}
+ +

論理 OR 演算子を使用するうえでよくある間違いは、判定しようとしている変数を一度だけ書いて、その後に判定したい値を || (OR) 演算子で区切って指定する誤りです。次のような例です。

+ +
if (x === 5 || 7 || 10 || 20) {
+  // コードを実行する
+}
+ +

この場合、if(...)  の条件式は常に真となります。なぜなら 7 (もしくはその他 0 以外の数値) が常に true と評価されるためです。この条件式は「もし x が 5 であるか 7 が真であるならば (7 は常に真です)」となります。これは求めているものではありませんよね！このコードの誤りを修正するためには、OR 演算子の隣に常に完全な条件を書かなければなりません。

+ +
if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // コードを実行する
+}
+ +

switch ステートメント

+ +

if...else ステートメントは条件の判定を上手くこなしていましたが、欠点がないわけではありません。いくつかの選択肢しかない場合には申し分ないのですが、AND / OR の条件が複雑になるにつれて (例えば、複数の論理演算子を使ったりする場合など)、相当量のコードを書かなければなりません。ある選択肢に応じて値を変数に設定したり、特定の条件に応じて何かを表示したりするとき、選択肢がたくさんあると、if...else ステートメントを書くのは面倒です。

+ +

switch ステートメントはそんなときの味方です。switch ステートメントは一つの式または値を受け取り、それに合致する値が見つかるまで選択肢を探します。そして合致した選択肢に対応するコードを実行します。まずは擬似コードを見て、雰囲気をつかみましょう。

+ +
switch ( 式 ) {
+  case 選択肢1:
+    このコードを実行する
+    break;
+
+  case 選択肢2:
+    代わりにこのコードを実行する
+    break;
+
+  // 以下に選択肢を好きなだけ並べる
+
+  default:
+    既定でこのコードを実行する
+}
+ +

上記のコードには...

+ +
    +
  1. switch キーワードに続き、一組の括弧があります。
    2. +
  2. 括弧の中には、式または値があります。
    3. +
  3. case キーワードに続き、選択肢となる式または値、それにコロン (:) が並んでいます。
    4. +
  4. もしその選択肢にマッチすれば、コードが実行されます。
    5. +
  5. break ステートメントとセミコロン (;) があります。もし前の選択肢にマッチして入ればブラウザーはコードの実行をここでやめ、switch ステートメントの後ろにあるコードに移動します。
    6. +
  6. case 節 (上記 3. から 5. ) は好きなだけ書くことができます。
    7. +
  7. 上記 3. から 5.の case 節と全く同じコードパターンで書かれている default キーワードがあります。違いは default の後ろに選択肢が書かれていないことです。また、後ろに続くコードがないので、ここには break ステートメントが必要ありません。もし、選択肢のどれにもマッチするものがない場合に既定のオプションとして実行されます。
    8. +
+ +
+

注: 評価する式の値が不明な値にならないのであれば、default 節は書く必要はありません。しかし、式が不明な値となり、それに対処する必要があるのなら、default 節を書くことで対応が可能です。

+
+ +

switch を使用する例

+ +

それでは実際の例を見てみましょう。先ほどの天気予報アプリを switch ステートメントを使用して書き直してみました。

+ +
<label for="weather">今日の天気を選択してください: </label>
+<select id="weather">
+  <option value="">--選択してください--</option>
+  <option value="sunny">晴れ</option>
+  <option value="rainy">雨</option>
+  <option value="snowing">雪</option>
+  <option value="overcast">曇り</option>
+</select>
+
+<p></p>
+ +
const select = document.querySelector('select');
+const para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  const choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = '今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！';
+      break;
+    case 'rainy':
+      para.textContent = '雨が降っています。レインコートと傘を忘れないようにしましょう。';
+      break;
+    case 'snowing':
+      para.textContent = '雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。';
+      break;
+    case 'overcast':
+      para.textContent = '雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。';
+      break;
+    default:
+      para.textContent = '';
+  }
+}
+ +

{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
+

注: このサンプルを GitHub で見ることができます。(実行可能なデモもあります。)

+
+ +

三項演算子

+ +

例題に進む前に、ちょっとした構文をご紹介しましょう。三項演算子 (もしくは条件演算子) は条件式を判定し、その結果に応じて 2 つの値または式のうち、どちらか一方を返します。これはある状況においてはとても便利です。単純に true/false で判定可能な 2 つの選択肢のうちより片方を選ぶという場合には、if...else ブロックを書くよりも多くのコードを節約できます。この擬似コードは以下のようなものになります。

+ +
( 条件式 ) ? こちらのコードを実行する : 代わりにこちらのコードを実行する
+ +

それでは実際に例を見て見ましょう。

+ +
let greeting = ( isBirthday ) ? 'スミスさん、誕生日おめでとうございます！良い一日を。' : 'スミスさんおはようございます。';
+ +

この例では isBirthday という変数があり、この変数が true の場合、お客に誕生日を祝福するメッセージを送ります。そうでなければ、通常の挨拶を送ります。

+ +

三項演算子を使用する例

+ +

三項演算子を変数の代入にのみ使用する必要はありません。関数や、複数行に渡るコードを実行する場合にも (それ以外にも好きなように) 使用できます。次の例は三項演算子を使用してサイトにテーマを適用しています。

+ +
<label for="theme">テーマを選んでください: </label>
+<select id="theme">
+  <option value="white">白</option>
+  <option value="black">黒</option>
+</select>
+
+<h1>私のウェブサイト</h1>
+ +
const select = document.querySelector('select');
+const html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+
+ +

{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

上記の例では、テーマ (黒または白) を選択することができる {{htmlelement('select')}} 要素と、サイトのタイトルが書かれた単純な {{htmlelement('h1')}} 要素があります。さらに update() という関数があり、その関数は引数 (入力値) として 2 つの色を取ります。この関数が呼ばれると、ウェブサイトの背景色は 1 つ目の引数に、文字の色は 2 つの目の引数に設定されます。

+ +

さらに、三項演算子を含む onchange イベントリスナーがあります。select.value === 'black' という条件式で始まっています。この式が true であるならば、update() 関数を引数に 'black'、'white' を指定して実行します (つまり、背景色を黒、文字色を白に設定します)。この式が false であるならば、update() 関数を引数に 'white'、'black' を指定して実行します (つまり、背景色を逆にします)。

+ +
+

注: この例は GitHub でも公開しています (または、動くデモもあります。)

+
+ +

アクティブ学習: 単純なカレンダー

+ +

この例では、単純なカレンダーアプリケーションの作成を手伝ってもらいます。現在、以下の内容がコードに書かれています。

+ + + +

あなたには、onchange ハンドラーの内部に条件式を書いてもらいます。// 条件式をここに書く というコメントのすぐ下に...

+ +
    +
  1. 選択されている月を取得します (これは choice 変数に格納されています。この値は <select> 要素で選択された後の値で、例えば 1 月なら、"1" といった値です。)
    2. +
  2. days という変数に、選択された月の日数を設定します。そのためには、1年の各月の日数を調べる必要があるでしょう。うるう年はこの例題の目的から外れるため、無視してください。
    3. +
+ +

ヒント:

+ + + +

もし間違ってしまっても、「リセット」ボタンを押すことでいつでも元に戻せます。詰まってしまったら、「答えを見る」ボタンで答えが見られます。

+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

+ +

アクティブ学習: もっとたくさんの色から選ぶ！

+ +

この例では、先ほどの三項演算子の例を switch ステートメントに変換し、単純なウェブサイトに、より多くの選択肢を与えます。{{htmlelement("select")}} 要素を見てください。今回は先ほどの 2 つではなく、5 つの選択肢があります。// ここに SWITCH ステートメントを書く というコメントの真下に switch ステートメントを追加してください。

+ + + +

もし間違ってしまっても、「リセット」ボタンを押すことでいつでも元に戻せます。詰まってしまったら、「答えを見る」ボタンで答えが見られます。

+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}

+ +

スキルをテストしましょう!

+ +

この記事の最後まで来ましたが、最も大事な情報を覚えていますか？先に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: Conditionals を見てください。

+ +

まとめ

+ +

これで JavaScript での条件構造について今知っておくべきことはすべてです！簡単な例を通してそのコンセプトが理解できたと思います。もし理解できないことがあれば、何度も記事を読み返しましょう。私たちに連絡をしても構いません。

+ +

関連情報

+ + + +

{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/javascript/building_blocks/events/index.html b/files/ja/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..7c40419c10 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,597 @@ +--- +title: イベントへの入門 +slug: Learn/JavaScript/Building_blocks/Events +tags: + - Beginner + - CodingScripting + - JavaScript + - イベント + - イベントハンドラー + - ガイド + - 学習 + - 記事 +translation_of: Learn/JavaScript/Building_blocks/Events +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+ +

イベントは、あなたがプログラムを書いているシステムで生じた動作、出来事を指します。システムからあなたへ、イベントとして何かあった事を知らせてくるので、必要であればそれに何らかの反応を返す事ができます。例えば、ユーザーがウェブページ上でボタンを押したとき、ある情報を表示するように反応させたいと思うかもしれません。この記事では、イベントに関する重要な概念を取り上げ、ブラウザーの中でのイベントの振る舞いを見ていきます。ここでは、全てを説明するのではなく、この段階で知っておくべき内容を取り上げます。

+ + + + + + + + + + + + +
前提条件:コンピューターに関する基本的な知識があること。HTML と CSS について理解していて、JavaScript の第一歩の記事を理解していること。
目的:イベントの基本的な理論を理解すること。ブラウザーでの振る舞いを理解し、プログラミング環境が変わると、イベントの振る舞いが変わることを理解すること。
+ +

運命的なイベントの連続

+ +

先ほど説明しましたが、イベントはあなたがプログラムしているシステムの中で生じた動作や出来事です。つまり、あるイベントが起きたときに、システムはある種の信号を発します。さらに、ある種のアクションが自動的に実行されるためのメカニズムも提供します。例えば、空港では、飛行機が離陸するために滑走路がクリアになった時に、信号がパイロットに送られます。その結果、パイロットは飛行機の操縦を開始します。

+ +

+ +

ウェブの場合は、イベントは、ブラウザーのウィンドウの中で発火されます、そしてその中に属する特定の項目に紐付く傾向にあります — これは単一の要素、要素の集合、現在のタブでロードされた HTML 文書、ブラウザー画面全体といったものです。発生するイベントはたくさんの異なる種類があります。例をあげると。

+ + + +

ここや MDN Event リファレンスを覗いてみれば、とてもたくさんの応答可能なイベントがあるのが判るでしょう。

+ +

それぞれの利用可能なイベントにはイベントハンドラーがあり、これはイベントに発火した時に実行される (通常はユーザー定義の JavaScript 関数) コードのブロックのことです。イベントの発火に対する応答としてコードのブロックが実行されるように定義する事を、イベントハンドラーを登録すると言います。イベントハンドラーは時にイベントリスナー と呼ばれる事を付記しておきます—我々の目的から見ると言い変えてもほとんど問題ないのですが、厳密に言えば一緒に動作する別のものです。イベントリスナーはイベントの発生を監視し、イベントハンドラーは発生したイベントの応答として動作するコードです。

+ +
+

メモ: 大事な事ですがウェブのイベントは JavaScript 言語の主要部分の一部ではありません — ブラウザーに組み込まれた JavaScript API の一部として定義されたものです。

+
+ +

簡単な例

+ +

ここで何を言ってるのか説明するため、簡単な例を見てみましょう。このコースでこれまでに例の多くに使われているイベントやイベントハンドラーを見てきました、しかし、知識を固めるために整理をしましょう。続く例では、押すと背景色がランダムに変化する {{htmlelement("button")}} が一つあります:

+ +
<button>Change color</button>
+ + + +

JavaScript はこのようになります:

+ +
const btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random() * (number+1));
+}
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

このコードでは、btn という変数に {{domxref("Document.querySelector()")}} 関数を使って取得したボタンへの参照を格納しています。それとは別にランダムな数値を返す関数も定義しています。コードの 3 つ目の部分はイベントハンドラーです。btn 変数は<button>要素を指していますが、この種のオブジェクトにはたくさん発火し得るイベントがあるので、色々なイベントハンドラーが使えます。onclick イベントハンドラプロパティに、ランダムな RGB色を生成し <body> の background-color を設定するコードを抱えた匿名関数を代入する事で、click イベントが発火されるのを待ちかまえます。

+ +

このコードは <button> 要素でクリックイベントが発火すれば常に実行されます、要はユーザーがクリックしたらいつでも。

+ +

この例の出力は以下のようになります:

+ +

{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}

+ +

ただのウェブページではありません

+ +

ここで言及しておくべき事は、イベントは JavaScript 固有のものではないという事です — ほとんどのプログラミング言語はいくつかのイベントモデルを持ち、その動作する方法はしばしは JavaScript の方式とは異なっています。実際、ウェブページの JavaScript のイベントモデルは他の環境で用いられている JavaScript のイベントモデルと異なっています。

+ +

例えば、Node.js は開発者に JavaScript でネットワークとサーバーサイドのアプリケーションを構築することを可能にするとても有名な JavaScript ランタイムです。Node.js event model はイベントを待ち受けるリスナー、イベントを定期的に発生させるエミッターに依拠しています —たいして違ってないように聞こえますが、コードは極めて異なっていて、イベントリスナーを登録する on() や、一度実行したら登録を解除するイベントリスナーを登録するための once() のような関数を使っていきます。HTTP connect event docs が使い方の良い例を教えてくれます。

+ +

その他の例として、WebExtensions と呼ばれる技術を使って、クロスブラウザーアドオン (ブラウザーの機能拡張) を JavaScript で作成できます。イベントモデルは Web イベントモデルと似ていますが、ほんの少し違いがあります (イベントリスナーのプロパティはキャメルケース (例 onmessage でなく onMessage) で命名されていて、addListener 関数で結び付ける必要があります。例として runtime.onMessage page を確認してください。

+ +

学習の今の段階で、そのような他の環境について何か理解する必要はありません。イベントは異なるプログラミング環境では異なることがあるとだけ認識してください。

+ +

ウェブイベントの使用方法

+ +

関連づけたいイベントが発火した時に走らせたいイベントリスナーコードを ウェブページに追加する方法はいろいろあります。このセクションでは様々なメカニズムを見ていき、どれを使うべきなのか議論していきます。

+ +

イベントハンドラープロパティ

+ +

イベントハンドラーコードを代入するためのいろいろなプロパティがあり、そういったものをここまでのコースで最もたくさん見てきました。上記の例に戻りましょう。

+ +
const btn = document.querySelector('button');
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

onclick プロパティがこの例で使用されているイベントハンドラープロパティです。ボタンで利用可能なプロパティ(例えば btn.textContent や btn.style)のうちの 1 プロパティに過ぎませんが、特別な種類のものです(コードを代入すると、そのコードはボタンでイベントが発火した際に実行される)。

+ +

ハンドラープロパティには、名前付き関数の関数名 (Build your own function でみられるような) を設定することもできます。こう書いても動作は同じです:

+ +
const btn = document.querySelector('button');
+
+function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;
+ +

利用できるイベントハンドラープロパティにはとてもたくさんの種類があります。実験してみましょう。

+ +

まずは、random-color-eventhandlerproperty.html のローカルコピーを作成し、ブラウザーで開いてくださいこれはこの記事ですでに遊んだ簡単なランダム色のサンプルです。さて、btn.onclick のところを以下の異なる値に変えてみて、結果を順に見てみてください:

+ + + +

いくつかのイベントはとても汎用的なのでほとんどどこでも使えます(例えば onlick ハンドラはほぼ全ての要素に登録できます)が、いくつかはもっと限定的で、特定の状況でしか使えません(例えば onplay  は{{htmlelement("video")}}のような特定の要素でのみ意味を持ちます)。

+ +

インラインイベントハンドラー — 使っちゃだめ

+ +

あなたのコードでこんな形を見た事があるかもしれません:

+ +
<button onclick="bgChange()">Press me</button>
+
+ +
function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +
+

メモ: こちらに GitHub上のサンプルがあります (また、こちらで実際に動くところを見られます)。

+
+ +

Web 上で見かける最初期のイベントハンドラー登録方法には、上の例のようなイベントハンドラーHTML属性(インラインイベントハンドラーとも言う)があります — 属性値がイベント発生時に実行したい JavaScript コードそのものです。上の例では{{htmlelement("script")}}要素の中で定義された関数を起動していますが、直接JavsScript そのものを属性の中に入れる事もできます。例えば:

+ +
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+ +

多くのイベントハンドラープロパティと等価な HTML属性を見付けるでしょうが、使うべきではありません — こういうのは悪い方法とみなされています。ちょっとした事を手早く片づけたい時、イベントハンドラー属性を使うのが簡単に思えるかもしれませんが、あっという間に手がつけられない、効率の悪いものになってしまいます。

+ +

そもそも、あなたの HTML と JavaScript を混在させると、読みにくくなってしまうため、良いアイデアではありません — あなたの JavaScript は一ヶ所にまとめる方が良いです。別の一つのファイルになっていれば、それを複数の HTML ドキュメントに適用できますから。

+ +

(HTML と JavaScript が)一つのファイルになっているとしても、インラインイベントハンドラーは良いアイデアではありません。ボタン一つならいいですが、ボタンが 100 あったら? ファイルに 100 の属性を追加したならば、あっという間に管理していくのは悪夢と化す事でしょう。JavaScript を使えば、ページにボタンがいくつあろうが、全部のボタンにイベントハンドラーを追加するのは簡単です、こんな具合です:

+ +
const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i < buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}
+ +

ここにある他のオプションは NodeList オブジェクトの組み込みメソッドの forEach() で使えることに注意してください:

+ +
buttons.forEach(function(button) {
+  button.onclick = bgChange;
+});
+ +
+

注: プログラムロジックをコンテンツから分離しておくと、あなたのサイトはサーチエンジンにとってより好ましいものになります。

+
+ +

addEventListener() と removeEventListener()

+ +

最新のイベント機構は Document Object Model (DOM) Level 2 Events 仕様で規定されていて、ブラウザーに新しい関数が追加されました — addEventListener()です。この関数はイベントハンドラープロパティと同じ方向性ですが、文法は明確に異なります。ランダム色の例をこんな風に書き換える事ができます:

+ +
const btn = document.querySelector('button');
+
+function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

メモ: こちらに GitHub上のサンプルがあります (また、こちらで実際に動くところが見られます)。

+
+ +

addEventListener() 関数のカッコの中で、二つの引数を指定しています — ハンドラーを登録したいイベントの名前と、それに反応して実行させたいコードを含んだ関数です。匿名関数を使って、実行したいコードを全部 addEventListener() 関数の引数に書いてしまっても全く問題ありません。こんな具合です:

+ +
btn.addEventListener('click', function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});
+ +

この方式は、ここまでで見てきた古い方式に勝る点がいくつかあります。まず第一に、逆を行なう関数 removeEventListener()があり、以前に追加したリスナーを削除できます。例えばこうすると、このセクションの最初のコード部で追加したリスナーを削除します:

+ +
btn.removeEventListener('click', bgChange);
+ +

単純で小さなプログラムではたいした事ありませんが、大きくて複雑なプログラムでは、古く使われないイベントハンドラーを除去しておくと効率が良くなります。さらに、これは例えば同じボタンに状況の違いによって異なる動作をさせる事ができるようになります — ただ適切なイベントハンドラーを追加したり削除するだけで良いのです。

+ +

第二に、同じリスナーに複数のハンドラーを登録できます。
+ 次では二つのハンドラの両方は適用されません:

+ +
myElement.onclick = functionA;
+myElement.onclick = functionB;
+ +

二行目で最初に設定した onclick の値が上書きされるからです。
+ ですがこれなら動きます:

+ +
myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);
+ +

要素がクリックされると、どちらの関数も走ります。

+ +

さらには、この方式ではもっとたくさんのパワフルな機能やオプションが使えます。それらはこの記事の範疇を少しばかり超えているので、知りたければ addEventListener() と removeEventListener() のリファレンスページを見てください

+ +

どの方式を使えば良い?

+ +

三つの方式のうち、イベントハンドラーHTML属性は絶対使うべきではありません — 前に書いたように、時代遅れで悪いやり方です。

+ +

他の二つはまあまあどっちでも良いです、少なくとも単純な用途では:

+ + + +

三番目の方式の最大の利点は、必要なときに removeEventListener() 関数でイベントハンドラーコードを削除できる事、必要なときは要素に同種のリスナーを複数追加できる事です。例えば、ある要素に対して addEventListener('click', function() { ... }) を別の関数を第二引数に指定して何回か呼ぶ事ができます。これはイベントハンドラープロパティでは、プロパティは後からセットした値で上書きされてしまうので、できません。e.g.:

+ +
element.onclick = function1;
+element.onclick = function2;
+etc.
+ +
+

注: もし仕事で IE8 より古いブラウザーをサポートするよう言われているなら、そのような古代のブラウザーは新しいものとは違ったイベントモデルを使っているため、困難にぶつかるかもしれません。でも怖がらないで。大半の JavaScript ライブラリ(例えば jQuery)には、ブラウザー間の差異をとっぱらえる関数が備わっています。勉強中のあなたがこの点について心配しすぎる必要はありません。

+
+ +

その他、イベントに関する概念

+ +

このセクションでは、イベントに関連するより進んだ概念について軽くさらっていきます。今の時点で完全に理解する必要があるほど重要ではありませんが、ときどき見かけることになるであろうコードのパターンがなぜそうなっているのか、理解する助けになるかもしれません。

+ +

Event objects

+ +

ときどきイベントハンドラー関数内で event、evt、単に e などと名付けられた引数を見かけるかもしれません。
+ これらはイベントオブジェクトと呼ばれ、イベントの追加機能や情報を提供する目的でイベントハンドラーに自動的に渡されます。例えば、またランダム色の例をちょっと書き換えてみましょう:

+ +
function bgChange(e) {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

注: こちら に GitHub上のサンプルがあります (また、こちらで実際に動くところが見れらます)。

+
+ +

イベントオブジェクト e が関数に含まれていて、関数内で e.target — これはボタンそのもの — の背景色スタイルを設定しているのがわかるでしょう。イベントオブジェクトの target プロパティは、常にイベントが生じた要素への参照となっています。ですからこの例ではページではなくボタンの背景色がランダムに変わります。

+ +
+

注: イベントオブジェクトには好きな名前を使えます — イベントハンドラー関数のカッコの中に使いたい名前を書くだけです。e/evt/event が開発者の間でとても良く使われていますが、これらが短くて覚えやすいからです。標準に従うのはいつだって良いやり方です。

+
+ +

複数の要素に同じイベントハンドラを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.target はとてつもなく有用なものです。複数の要素に同じイベントハンドラーを割り当てて、どれかでイベントがあったときに何かさせたいような場合、e.target はとてつもなく有用なものです。例えばクリックすると見えなくなるタイルが 16 個あるとします。e.target を使ってそれをただ消せるなら、もっと難解な手段で選びだすのよりも使いすいでしょう。続く例では (完全なソースコードは useful-eventtarget.html を見てください; ここで ライブ実行 も見られます)、16 個の {{htmlelement("div")}} 要素を JavaScript で生成します。そしてこれらを全部 {{domxref("document.querySelectorAll()")}}を使って選択し、ループで一つ一つに onclick ハンドラを追加して、それぞれがクリックされた時にランダムな色が表われるようにしています:

+ +
const divs = document.querySelectorAll('div');
+
+for (let i = 0; i < divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}
+ +

結果はこうです(クリックして遊んでみてください):

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 400) }}

+ +

あなたが使うであろうイベントハンドラーのほとんどでは、イベントオブジェクトには標準的なプロパティと関数(メソッド)({{domxref("Event")}}を参照してください)だけがあります。もっと上級者向けハンドラーでは、動作に必要な追加データを保持するために特殊なプロパティを付与するものもあります。例えば Media Recorder API には dataavailable イベントがあり、オーディオやビデオの録音や再生が終わって何か(保存したり再生したり)する準備ができたところで発火します。これに紐付く ondataavailable ハンドラーのイベントオブジェクトには録音・録画データを保持する data プロパティがあり、これを使って何かしらを行なえます。

+ +

標準の動作を抑制する

+ +

ときにはイベントに付随する標準動作を止めたい場合があるでしょう。一番よくあるのは、ウェブのフォーム、例えばカスタマイズした登録フォームです。詳細を入力し終えてサブミットボタンを押した時、普通の動作ではデータがサーバーの指定のページに送られて処理され、ブラウザーは"成功しました"ページ(や他に指定されていない場合、同様なページ)にリダイレクトされたりなんやらします。

+ +

ユーザーが適切なデータを送信しなかった場合に問題が発生します — 開発者としてあなたはサーバーへのデータ送信を抑止し、どこに問題があってデータを適切なものにするにはどうすればいいのか示す、ユーザーへのエラーメッセージを表示したいことでしょう。ブラウザーの中にはフォームデータの自検証機能を備えたものもありますが、多くはないので、それには頼らず自前の検証機能を実装すべきです。簡単な例を見てみましょう。

+ +

まず、あなたにあなたの姓と名を入力させる単純な HTML フォームです。

+ +
<form>
+  <div>
+    <label for="fname">First name: </label>
+    <input id="fname" type="text">
+  </div>
+  <div>
+    <label for="lname">Last name: </label>
+    <input id="lname" type="text">
+  </div>
+  <div>
+     <input id="submit" type="submit">
+  </div>
+</form>
+<p></p>
+ + + +

 さあちょっとした JavaScript です — ここでは onsubmit イベントハンドラー(フォームがサブミットされるとサブミットイベントが発火します)の中で、テキストフィールドが空かどうかテストするだけのとても簡単なチェックを実装します。もし空なら、イベントオブジェクトの preventDefault() 関数— これでフォームの送信を抑制します — を呼び、それからフォームの下にあるパラグラフに、何が問題なのかユーザーに伝えるためのエラーメッセージを表示します:

+ +
const form = document.querySelector('form');
+const fname = document.getElementById('fname');
+const lname = document.getElementById('lname');
+const para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}
+ +

言うまでもなく弱っちいフォームの検証です — 例えばフォームに空白や数字が入っていても止められません — が、例としては十分です。結果はこうなります。

+ +

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

+ +
+

メモ: ソースコード全体については、preventdefault-validation.html (及び ライブ実行も) をご覧ください。

+
+ +

イベントのバブリングとキャプチャリング

+ +

ここで最後に説明していくのは、滅多には遭遇しませんが、理解できていないととても苦痛になるかもしれない事柄です。ある一つの要素で同じイベントに紐付く二つのハンドラが活性化された時に何が起きるのかを説明するのが、イベントのバブリングとキャプチャリングという二種類のメカニズムです。わかりやすくするために次の例を見てください — show-video-box.html 例を新しいタブで開いてください (ソースコード もまた別のタブに)。ライブでも下で見られます:

+ + + +

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

+ +

これは内に {{htmlelement("video")}} 要素を含む {{htmlelement("div")}} を表示したり隠したりするとても簡単な例です。

+ +
<button>Display video</button>
+
+<div class="hidden">
+  <video>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+  </video>
+</div>
+ +

{{htmlelement("button")}} がクリックされると、<div> のクラス属性を hidden から showing に変更するので、ビデオが表示されます(例の CSS にこの二つのクラスが含まれており、それぞれはボックスの位置をスクリーンの外、内にします)。

+ +
btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}
+ +

では二つばかり onclick イベントハンドラーを追加します — 最初のは <div> に、二つ目は <video>にです。ビデオの外側の <div> 領域がクリックされた時にはボックスがまた隠れるようにし、ビデオそのものがクリックされたらビデオが再生されるようにしたいというわけです。

+ +
videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};
+ +

が、ここで問題が — 今度はビデオをクリックすると再生が始まりますが、それと同時に<div>が隠されるようになってしまいました。ビデオが <div> の中にあるので(ビデオは div の一部ですから)、ビデオのクリックは上に挙げた両方のイベントハンドラーを実際に動かします。

+ +

バブリングとキャプチャリングの説明

+ +

親要素を持つ要素 (このケースでは {{htmlelement("video")}} です) においてイベントが発火すると、モダンブラウザーは二つの異なる段階に分けて動作します — キャプチャリングする段階とバブリングする段階です。

+ +

キャプチャリングの段階で行われることは……

+ + + +

バブリングの段階では、全く逆の事が起きます。

+ + + +

+ +

(大きな図を見るにはクリックしてください)

+ +

モダンブラウザーのデフォルトでは、全てのイベントハンドラーはバブリング段階に登録されます。ですのでこの例の場合では、ビデオをクリックするとクリックイベントは <video> 要素から外側の <html> 要素に進んで (バブリングして) いきます。従って:

+ + + +
+

記: 両方のイベントハンドラーが存在する場合バブリングとキャプチャリングでは、キャプチャフェーズが最初に走り、バブリングフェーズが続きます。

+
+ +

stopPropagation()で問題を解決する

+ +

困った動作ですが、解決する方法があります! 標準的なイベントオブジェクトには stopPropagation()という関数があって、ハンドラーのイベントオブジェクトで起動されると、このハンドラーは実行されますが、イベントが上位に伝播しないようにするので、これ以上のハンドラーは実行されなくなります。

+ +

よって我々の今の問題は、先のコードブロック、第二のハンドラー関数をこのように変更して解決できます:

+ +
video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};
+ +

show-video-box.html ソースコードのローカルコピーを作成してみて、自分で修正してみるか、修正された結果は show-video-box-fixed.html で見ることができます (こちらでソースコードも見られます)。

+ +
+

メモ: なんだってキャプチャリングとバブリングなんてあるのか? それはね、むかーしむかしの悪き時代、ブラウザーに今ほど互換性がなかった頃、ネットスケープはキャプチャリングだけを、IE はバブリングだけを使っていたのさ。W3C が動作について標準化と合意を作ろうと決めた時、結局どっちもシステムに入れることにし、モダンブラウザーはそのように実装されたのさ。

+
+ +
+

メモ: 上で述べたように、デフォルトでイベントハンドラーはバブリング段階に登録され、そしてほとんどの場合はこれが妥当です。もし本当にイベントをキャプチャリング段階の方に登録したいのであれば、addEventListener()を使って、省略可能な第三引数に true を指定すれば実現できます。

+
+ +

イベントの移譲

+ +

バブリングではイベント移譲という機能も活用できます — イベント移譲という概念は、たくさんある子要素のどれかしらがクリックされた際に何らかのコードを実行したいという場合に、個々の子要素一つ一つにイベントリスナーを設定するのではなく、親要素のイベントリスナーを設定すれば子要素のイベントリスナーからバブリングしてくるという事実に依拠しています。

+ +

良い例としては、一連のリストアイテムです — どれかがクリックされたらメッセージをポップアップさせたいときには、親の <ul> 要素の click イベントリスナーに設定すれば、イベントはリストアイテムからバブリングしてきます。

+ +

この概念はより深く David Walsh のブログで、たくさんの例とともに解説されています。— How JavaScript Event Delegation Works を見てください

+ +

スキルをテストしよう!

+ +

この記事の最後に来ましたが、最も大事な情報を覚えていますか? 次に移動する前に、さらなるテストでこの情報を保持しているか検証できます — Test your skills: Events を見てください。

+ +

結論

+ +

ウェブイベントについて、今の学習初期段階で知るべき事は全部わかったはずです。上で述べたように、実のところイベントは JavaScript のコアには属しません — それらはブラウザーの Web API に属するものです。

+ +

また重要な事は、JavaScript の使われ方によって異なるイベントモデルがありうる事も理解しておいてください — Web API とブラウザーの WebExtension や Node.js (サーバーサイド JavaScript) のような領域とでは。今あなたがそれらの領域について理解しなくてよいと思っていますが、ウェブ開発の事を学んでいくのにイベントの基礎を理解するのが役立つのは確かです。

+ +

理解できない事があれば、気楽にまた記事を読み返したり、私達 に質問してください

+ +

関連情報

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/javascript/building_blocks/functions/index.html b/files/ja/learn/javascript/building_blocks/functions/index.html new file mode 100644 index 0000000000..636278ee2e --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/functions/index.html @@ -0,0 +1,407 @@ +--- +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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
+ +

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

+ + + + + + + + + + + + +
前提知識:基本的なコンピューターの知識、HTML と CSS への理解、JavaScript の第一歩。
目的:JavaScript の関数についての基礎を理解する。
+ +

関数はどこにありますか？

+ +

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

+ +

一対のかっこ — () — の機能である JavaScript の構造を使用するほとんどの場合、そして for ループ、while と do ... while ループ、または if..else 文のような一般的な組み込みの言語構造を使用していない場合、あなたは関数を使用していることになります。

+ +

ブラウザー組み込み関数

+ +

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

+ +
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
+ +

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

+ +
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
+ +

また毎回乱数を作成したときには:

+ +
let myNumber = Math.random();
+// the random() function generates a random
+// number between 0 and 1, and returns that
+// number
+ +

...関数を使っていたのです!

+ +
+

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

+
+ +

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

+ +

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

+ +

関数とメソッド

+ +

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

+ +

これまで利用してきた組込み関数は両方です: 関数でありメソッドでもあります。組み込みオブジェクトとそのメソッドと同様に、組み込み関数の一覧をこちらで確認できます。

+ +

このコースのここまででもたくさんのカスタム関数を見てきました — ブラウザーの内部でではなくあなたのコードの中で定義された関数です。独自の名前の直後にカッコがついてるものを見かけたら、それはカスタム関数を使っているという事です。繰返しの記事で出てきた random-canvas-circles.html の例(ソースコードはこちら)では、独自に作った draw() 関数が含まれていました。こんなやつです:

+ +
function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (let i = 0; i < 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();
+  }
+}
+ +

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

+ +
draw();
+ +

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

+ +
function random(number) {
+  return Math.floor(Math.random()*number);
+}
+ +

ブラウザー組込みの Math.random() は 0 から 1 までの間の 10進数の乱数を作成するだけなので、私たちにはこの関数が必要でした。私たちは 0 から指定した数にわたる乱数が欲しかったのです。

+ +

関数の呼び出し

+ +

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

+ +
function myFunction() {
+  alert('hello');
+}
+
+myFunction();
+// calls the function once
+ +

匿名関数

+ +

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

+ +
function myFunction() {
+  alert('hello');
+}
+ +

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

+ +
function() {
+  alert('hello');
+}
+ +

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

+ +
const myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}
+ +

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

+ +

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

+ +
const myGreeting = function() {
+  alert('hello');
+}
+ +

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

+ +
myGreeting();
+
+ +

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

+ +
let anotherGreeting = myGreeting;
+ +

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

+ +
myGreeting();
+anotherGreeting();
+ +

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

+ +
function myGreeting() {
+  alert('hello');
+}
+ +

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

+ +
myButton.onclick = function() {
+  alert('hello');
+  // I can put as much code
+  // inside here as I want
+}
+ +

関数の引数

+ +

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

+ +
+

メモ: 引数は、パラメーター、プロパティ、アトリビュート（属性）などと呼ばれる場合もあります。

+
+ +

例えばブラウザー組込み関数 Math.random() は引数を必要としません。呼ばれるといつも 0 から 1 までの乱数を返します:

+ +
let myNumber = Math.random();
+ +

ですがブラウザー組込みの文字列関数 replace() は二つの引数が必要です — 主文字列から探すべき部分文字列と、部分文字列を置換する文字列です:

+ +
let myText = 'I am a string';
+let newString = myText.replace('string', 'sausage');
+ +
+

メモ: 複数の引数を指定するときは、カンマで区切って書きます

+
+ +

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

+ +
let myArray = ['I', 'love', 'chocolate', 'frogs'];
+let madeAString = myArray.join(' ');
+// returns 'I love chocolate frogs'
+let madeAString = myArray.join();
+// returns 'I,love,chocolate,frogs'
+ +

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

+ +

関数のスコープと競合

+ +

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

+ +

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

+ +

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

+ +

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

+ +
<!-- Excerpt from my HTML -->
+<script src="first.js"></script>
+<script src="second.js"></script>
+<script>
+  greeting();
+</script>
+ +
// first.js
+let name = 'Chris';
+function greeting() {
+  alert('Hello ' + name + ': welcome to our company.');
+}
+ +
// second.js
+let name = 'Zaptec';
+function greeting() {
+  alert('Our company is called ' + name + '.');
+}
+ +

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

+ +
+

注: この例を GitHub でライブ実行 できます(ソースコードはこちら).

+
+ +

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

+ +

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

+ +

+ +

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

+ +

アクティブラーニング:  スコープで遊んでみよう

+ +

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

+ +
    +
  1. まず function-scope.html の例のローカルコピーを作成します。これには a() と b() という 2 つの関数と、x、y、z の 3 つの変数が含まれます。これらの変数のうち 2 つは関数内で定義され、もう 1 つはグローバルスコープ内で定義されます。また output() という 3番目の関数も含まれています。この関数は単一のパラメータを取り、ページの段落に出力します
    2. +
  2. ブラウザーとテキストエディターでサンプルを開きます
    3. +
  3. ブラウザーの開発者ツールで JavaScript コンソールを開きます。JavaScript コンソールで、次のコマンドを入力します。 + 
    output(x);
    + 変数x の出力値が画面に表示されるはずです。
    4. +
  4. コンソールに次のように入力してみてください + 
    output(y);
+output(z);
    + どちらも、"ReferenceError: y is not defined"の一行のエラーが返されるはずです。なぜでしょうか？ 関数スコープのため、つまり y と z は a() と b() 関数の中でロックされているので、global スコープから呼び出されたときには output() はそれらにアクセスできません。
    5. +
  5. しかし、別の関数の中から呼び出されたときはどうでしょうか？ a() と b() を次のように編集してみてください： + 
    function a() {
+  let y = 2;
+  output(y);
+}
+
+function b() {
+  let z = 3;
+  output(z);
+}
    + コードを保存してブラウザーに再ロードしてから、JavaScript コンソールから a() と b() 関数を呼び出してみてください。 + + 
    a();
+b();
    + ページに y と z の値の出力が表示されます。output() 関数が他の関数の中、つまり表示される変数が定義されているのと同じスコープでそれぞれ呼び出されているので、これはうまくいきます。output() 自体はグローバルスコープで定義されているので、どこからでも利用できます。
    6. +
  6. 今度は次のようにコードを更新してみてください： + 
    function a() {
+  let y = 2;
+  output(x);
+}
+
+function b() {
+  let z = 3;
+  output(x);
+}
    + 保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：
    7. +
  7. + 
    a();
+b();
    + a() と b() の両方の呼び出しは x の値、つまり 1 が出力されます。これは x がグローバル変数であり、すべてのコード内どこでも利用可能であるため、output() の呼び出しが x と同じスコープではなくてもうまく動きます。
    8. +
  8. 最後に、次のようにコードを更新してみてください： + 
    function a() {
+  let y = 2;
+  output(z);
+}
+
+function b() {
+  let z = 3;
+  output(y);
+}
    + 保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：
    9. +
  9. + 
    a();
+b();
    + 今度は a() と b() の両方の呼び出しで、迷惑な "ReferenceError: variable name is not defined" エラーが返されます — これは output() 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。
    10. +
+ +
+

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

+
+ +
+

注: ReferenceError: "x" is not defined というエラーは、あなたが遭遇する最も一般的なエラーの 1 つです。このエラーが発生し、問題の変数が定義されていると確信できる場合は、変数のスコープを確認してください。

+
+ + + +

関数の中の関数

+ +

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

+ +
function myBigFunction() {
+  let myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+
+ +

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

+ +
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);
+}
+ +

スキルをテストしよう!

+ +

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

+ +

まとめ

+ +

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

+ +

関連情報

+ + + + + +

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

+ +

このモジュール

+ + diff --git a/files/ja/learn/javascript/building_blocks/image_gallery/index.html b/files/ja/learn/javascript/building_blocks/image_gallery/index.html new file mode 100644 index 0000000000..2c8dc3c470 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/image_gallery/index.html @@ -0,0 +1,142 @@ +--- +title: イメージギャラリー +slug: Learn/JavaScript/Building_blocks/Image_gallery +tags: + - Assessment + - Beginner + - CodingScripting + - Conditionals + - Event Handler + - JavaScript + - Learn + - Loops + - events +translation_of: Learn/JavaScript/Building_blocks/Image_gallery +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

JavaScript の基本的な構成要素を見てきたところで、これからたくさんのウェブサイトで見かける項目、JavaScript で動作するイメージギャラリーをつくってみることで、あなたが得た繰り返し、関数、条件とイベントの知識を試してみましょう。

+ + + + + + + + + + + + +
前提条件:この評価を行う前に、このモジュールにある記事すべてを実施していること。
目標:JavaScript の繰り返し、関数、条件とイベントが理解できていることを確認する。
+ +

出発点

+ +

この評価を始めるために、サンプルが入っているサイトから ZIP ファイル を取得して、コンピュータのどこかに展開しておきます。

+ +
+

注: 別の方法として, この評価を行うために JSBin や Thimble のようなサイトを使うことができます。これらのオンラインエディターに HTML、CSS、JavaScript を貼り付けることができます。利用するオンラインエディターが JavaScript/CSS パネルに分かれていなければ、 HTML ページの中の <script>/<style> 要素にそれらを貼り付けてください 。

+
+ +

プロジェクト概要

+ +

HTML、CSS と画像および数行の JavaScript のコードが提供されています。必要な JavaScript を書いて、これを動くプログラムにする必要があります。HTML のボディは次のようになっています:

+ +
<h1>Image gallery example</h1>
+
+<div class="full-img">
+  <img class="displayed-img" src="images/pic1.jpg">
+  <div class="overlay"></div>
+  <button class="dark">Darken</button>
+</div>
+
+<div class="thumb-bar">
+
+</div>
+ +

例ではこのように見えます:

+ +

+ + + +

例にある CSS ファイルで最も興味深い部分:

+ + + +

JavaScriptに必要なもの:

+ + + +

もっとアイデアを加えると、最終的な例 のようになります (ソースコードをのぞかないように！)

+ +

完成へのステップ

+ +

次のセクションですべきことを説明します。

+ +

画像をループさせる

+ +

すでに thumbBar という変数に thumb-bar <div> の参照を格納するようにしています。新しい <img> 要素を作って、その src 属性にプレースホルダーとして値 xxx をセットしてください。そして、新しい <img> 要素を thumbBar に追加してください。

+ +

必要なこと:

+ +
    +
  1. "Looping through images" コメントの下のセクションのコードを全 5 画像をループする繰り返し処理のなかに置いて下さい — 各画像を表現する5つの数についてループするだけです。
    2. +
  2. 各ループの反復で、プレースホルダー xxx の値を画像のパスに等しい文字列で置き換えてください。それぞれの場合で src 属性の値をこの値に設定します。いずれの場合も画像は画像ディレクトリーにあり、pic1.jpg、pic2.jpg というようなファイル名になっています。
    3. +
+ +

onclick ハンドラーをそれぞれのサムネール画像に追加する

+ +

各ループの反復で、現在の newImage に onclick ハンドラーを追加する必要があります — このハンドラは現在の画像の src 属性の値を見つけます。displayed-img <img> の src 属性の値をパラメータとして渡されたものの src 値へ設定します。

+ +

替わりに、サムネイルバーへ一つのイベントリスナーを追加することも出来ます。

+ +

暗くする/明るくするボタンを処理するハンドラーを書く

+ +

暗くする/明るくする <button> が残っています。btn という変数に <button>  への参照を格納するコードはすでにご紹介しています。それらに onclick ハンドラーに追加する必要があります:

+ +
    +
  1. <button> にセットされている現在のクラス名をチェックしますーこれもまた、getAttribute() を使えば取得できます。
    2. +
  2. クラス名が "dark" なら、<button> のクラスを (setAttribute() を使って) "light" に変更します。テキストも "Lighten" にします。そして、オーバーレイ <div> の {{cssxref("background-color")}} を "rgba(0,0,0,0.5)" にします。
    3. +
  3. クラス名が "dark" でなければ、<button> のクラスを "dark" に変更します。テキストを "Darken" に戻します。そしてオーバーレイ <div> の {{cssxref("background-color")}} を "rgba(0,0,0,0)" にします。
    4. +
+ +

次のコードは上記の 2 と 3 で示された変更を行う基本的なものです。

+ +
btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;
+ +

ヒントとコツ

+ + + +

課題

+ +

組織されたコースの一部としてこの評価を行う場合、採点のため先生/メンターにあなたの成果を提出してください。もし、自習なら、このエクササイズに関するディスカッションのスレッド や Mozilla IRC の #mdn IRC チャネルで尋ねれば、採点ガイドが簡単に得られるでしょう。まずエクササイズに挑戦してください。ーごまかしても何も得られません！

+ +

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/javascript/building_blocks/index.html b/files/ja/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..74ec4ff45f --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/index.html @@ -0,0 +1,56 @@ +--- +title: JavaScript の構成要素 +slug: Learn/JavaScript/Building_blocks +tags: + - Article + - Assesment + - Beginner + - CodingScripting + - Conditionals + - Functions + - Guide + - JavaScript + - Landing + - Loops + - Module + - events + - 'l10n:priority' +translation_of: Learn/JavaScript/Building_blocks +--- +
{{LearnSidebar}}
+ +

このモジュールでは、条件付きステートメント、ループ、関数、イベントなど一般的に発生するコードブロックの種類に注目し、JavaScript の重要な基本機能をすべてカバーしていきます。コースの中で既にこれらを目にしているのですが、説明を省いてきました。ここではすべて明示的に説明を行います。

+ +

前提条件

+ +

このモジュールを始める前に、HTML や CSS の基本に慣れておくべきです。また前のモジュールの JavaScript の第一歩 も終了させておくべきです。

+ +
+

注記 : もしあなたが作業しているコンピュータ・タブレットやその他のデバイスで自分でファイルを作れない場合は、JSBin や Glitch といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。

+
+ +

ガイド

+ +
+
コード内で決定を下す — 条件
+
どんなプログラミング言語でも、コードは異なる入力に応じて決定を下し、それに応じてアクションを実行する必要があります。例えば、ゲームではもしプレイヤーのライフが 0 だった場合、ゲームオーバーになります。お天気アプリでは、朝に見た場合には朝日の画像を表示し、夜に見た場合には星と月を表示します。この記事では、条件の構造が JavaScript でどのように機能するかを説明します。
+
ループコード
+
場合によっては、一度にタスクを複数回実行しなければならないことがあります。 例えば名前のリスト全体を調べる場合です。プログラミング時に、ループはこのような処理を非常にうまく実行します。ここでは JavaScript のループ構造を見ていきます。
+
関数 — 再利用可なコードブロック
+
コーディングのもう一つの重要な概念は関数です。 関数を使用すると、定義されたブロック内に単一のタスクを実行するコードを格納し、同じコードを複数回入力するのではなく、単一の短いコマンドを使用して必要となる時にコードを呼び出すことができます。この記事では、基本的な構文、関数、スコープ、パラメータを呼び出す方法と定義する方法など、関数の背後にある基本的な概念について説明します。
+
独自の関数を構築する
+
前の記事で扱った必須の理論の多くを用いて、この記事では実用的な体験を提供しています。ここでは、独自のカスタム関数を構築するための練習をします。 また進むにつれ、関数を扱うためのさらに便利な詳細についても説明します。
+
関数の戻り値
+
関数について知っておくべき最後の必須コンセプトは戻り値です。一部の関数は完了後に意味のある値を返しませんが、他の関数は返します。値が何であるか、コードでそれらを使用する方法、独自のカスタム関数で有用な値を返す方法を理解することが重要です。
+
イベントへの入門
+
イベントとは、プログラミング中のシステムで発生するアクションまたは事象のことで、システムによって通知され、必要に応じて何らかの方法で応答できるようにするものです。例えば、ユーザが Web ページ上のボタンをクリックすると、情報ボックスを表示することでそのアクションに応答することができます。この最後の記事では、イベントを取り巻くいくつかの重要な概念について説明し、それらがブラウザでどのように機能するかを見ていきます。
+
+ +

評価

+ +

以下の評価は、上のガイドで取り上げた JavaScript の基礎についての理解をテストします。

+ +
+
イメージギャラリー
+
JavaScript の基本的な構成要素を見てきましたので、JavaScript で動く画像ギャラリーという、多くの Web サイトで見ることができるかなり一般的なアイテムを構築することで、ループ、関数、条件文、イベントに関する知識をテストします。
+
diff --git a/files/ja/learn/javascript/building_blocks/looping_code/index.html b/files/ja/learn/javascript/building_blocks/looping_code/index.html new file mode 100644 index 0000000000..dd5e724fca --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/looping_code/index.html @@ -0,0 +1,933 @@ +--- +title: ループコード +slug: Learn/JavaScript/Building_blocks/Looping_code +tags: + - Article + - Beginner + - CodingScripting + - DO + - Guide + - JavaScript + - Learn + - Loop + - break + - continue + - for + - 'l10n:priority' + - while +translation_of: Learn/JavaScript/Building_blocks/Looping_code +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
+ +

プログラミング言語は、繰り返し実行するタスクを素早く終わらせるのがとても得意です。基本的な計算処理から、同じような作業がたくさんあるのならどんな状況でもこなします。今度は JavaScript でそういった目的を果たすために使用するループ構造を見てみましょう。

+ + + + + + + + + + + + +
前提条件:基本的なコンピューターの知識および HTML と CSS への理解、JavaScript の第一歩。
目的:JavaScript でループの使い方を理解する。
+ +

ループの中にとどまる

+ +

ループ、ループ、ループ。朝食用シリアルや、ジェットコースター、音楽でもおなじみですが、プログラミングにおいても、とても重要な概念です。プログラミングにおけるループとは同じことを何度も何度も繰り返すことで、反復や繰り返しとも言われます。

+ +

それでは、農家のケースについて考えてみましょう。彼は家族を養うため十分な食料があるか確認しようとしています。それを実現するため、以下のようなループを使用するでしょう。

+ +


+

+ +

ループにはたいてい以下のような機能があります。

+ + + +

{{glossary("pseudocode", "疑似コード")}}では、以下のようになるでしょう。

+ +
loop(food = 0; foodNeeded = 10) {
+  if (food >= foodNeeded) {
+    exit loop;
+    // 十分な食料が集まりました。家に帰りましょう
+  } else {
+    food += 2; // 1 時間経って 2 つの食料を集めました
+    // ループはさらに続きます
+  }
+}
+ +

最初に、必要な食料が 10 に設定され、農家が現在持っている食料は 0 に設定されます。ループの繰り返しごとに、農家の持っている食料が必要な食料の数に等しいかを調べています。もしそうであれば、ループを抜けられます。そうでなければ、農家は 1 時間ごとに 2 つの食料を集めるのを繰り返します。

+ +

どうしてこんなことをするの？

+ +

これで、恐らくループの背後にあるコンセプトが理解できたことでしょう。けれど、「それが JavaScript のコードを書くのにどう役立つの？」と思っているかもしれませんね。先ほどループは同じことを繰り返すことだと言いいましたが、それは素早く繰り返し同じ作業を完了させるのに最適なことなのです。

+ +

たいてい、コードはループの連続する反復のたびごとにわずかに異なるものになります。つまり、似ているけれどわずかに異なる多数のタスク全体を完了出来るのです。もしたくさんの異なる計算をしなければならないとしたら、同じことを何度も何度もするのではなく、それぞれ異なることをしたいですよね。

+ +

ループがどれだけ素晴らしいものかを説明する例を見てみましょう。100 個のランダムな円を {{htmlelement("canvas")}} 要素に描きたいとします (更新ボタンを押して、例を何度となく実行し、結果が異なることを見てみましょう。)

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+ +

今はコードをすべて理解する必要はありません。ですが、コードの一部で 100 個の円を実際に描いている箇所を見てみましょう。

+ +
for (let i = 0; i < 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();
+}
+ + + +

基本的な考えがわかりましたか？このコードをループを使用して 100 回実行しますが、毎回ページ内のランダムな場所に円を描いています。必要なコードは 100 個の円を描くときも、1000 個でも 10,000 個でも同じです。1 か所だけ変更すればいいのです。

+ +

ここでループを使用しないとすれば、次のコードを描きたい数だけ繰り返し書かなければなりません。

+ +
ctx.beginPath();
+ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();
+ +

これはとてもつまらなく、素早くメンテナンスするのが難しいコードです。ループが一番良いです。

+ +

標準的な for ループ

+ +

ここからは、具体的なループの構造を見ていきましょう。最初は、特によく使うことになるであろう for ループについてです。構文は以下の通りです。

+ +
for (初期化処理; 条件; 最後の式) {
+  // 実行するコード
+}
+ +

ここでは...

+ +
    +
  1. for キーワードに続き括弧があります。
    2. +
  2. 括弧の中にはセミコロンで区切られて以下の項目があります。 +
      +
    1. 初期化処理: これはたいていの場合、繰り返し回数分増やしていく変数の初期化処理となります。この変数をカウンター変数と呼ぶことがあります。
      2. +
    2. 条件: 既に取り上げた通り、これはループが繰り返しをやめるべき条件を定義します。ほとんどの場合は比較演算子を伴って、終了条件を満たしているかを判定します。
      3. +
    3. 最後の式: これはループの 1 回が終了する度に評価される (または実行される) コードです。大体、カウンター変数を増やし(または減らし)、条件が true では無くなるポイントに近づけていきます。
      4. +
    +
    3. +
  3. そして中括弧があり、中括弧の中のコードブロックが各ループの繰り返しで実行されます。
    4. +
+ +

それでは実際の例を見て、これらを明確に分かるようにしてみましょう。

+ +
const cats = ['ビル', 'ジェフ', 'ピート', 'ビッグルズ', 'ジャスミン'];
+let info = '私の猫の名前は、';
+const para = document.querySelector('p');
+
+for (let i = 0; i < cats.length; i++) {
+  info += cats[i] + '、';
+}
+
+para.textContent = info;
+ +

これで次の結果が得られます。

+ + + +

{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}

+ +
+

注: このコードは GitHub でも見られます (動くデモもありますよ)。

+
+ +

これは配列のすべての要素に対して、繰り返し何かを実行するループの使用例です。JavaScript ではとてもよく見られるパターンです。

+ +
    +
  1. i をカウンター変数(イニシャライザーやイテレーター変数ともいう)として、0 から開始します (let i = 0)。
    2. +
  2. i が cats 配列の長さより小さくなくなるまで実行すると、ループには指定されています。これは重要です、条件にはループが継続するための条件が示されています。今回は、i < cats.length が真となるため、ループは継続します。
    3. +
  3. ループの内側では、現在繰り返し対象となる項目 (cats[i] は cats[i に入っているそのときの値] となります) を info 変数に対してカンマとスペースとともに結合しています。つまり... +
      +
    1. 初回の実行時には、i = 0 なので cats[0] + ', ' ("ビル、") が info に対して結合されます。
      2. +
    2. 2 回目の実行時には、i = 1 なので cats[1] + ', ' ("ジェフ、") が info に対して結合されます。
      3. +
    3. このように、ループ内の処理が実行されるたび、1 が i に加算され (i++)、次の処理が開始されます。
      4. +
    +
    4. +
  4. i が cats.length の値 (ここでは 5) と等しくなったときにループは終了し、ブラウザーはループの後に続くコードを実行します。
    5. +
+ +
+

注: 条件を i <= cats.length ではなく、i < cats.length としているのは、コンピューターが数値を 1 からではなく、0 から数えるためです。コードでも i を 0 から始め、i = 4 (配列内の要素の最後のインデックス) となるまで加算していきます。配列内の要素が 5 つなので  cats.length は 5 となりますが、i = 5 とすると、(配列に 5 のインデックスの要素がないので) undefined となってしまいます。なので、cats.length と同じ値まで (i <=) ではなく、i の最大値を 1 減らして cats.length より小さくなる (i <) まで加算しています。

+
+ +
+

注: 条件の指定でよくある間違いは「以下」(<=) ではなく、「等しい」(===) を使ってしまうことです。もし、i = 5 となるまでループを実行したければ、終了条件は i <= cats.length と指定しなければなりません。i === cats.length と指定した場合、ループは 1 度も実行されずに終了してしまいます。なぜなら、ループの最初では i が 5 ではないため、そこで終わってしまうからです。

+
+ +

残る小さな問題は、出力された文が完全ではないことです。

+ +
+

私の猫の名前は、ビル、ジェフ、ピート、ビッグルズ、ジャスミン、

+
+ +

ループの最後の結合処理を変更して文の最後が「、」で終わらないようにしたいと思います。まったく問題ありません。ループの中に条件ブロックを挿入して、これに対処しましょう。

+ +
for (let i = 0; i < cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += cats[i] + 'です。';
+  } else {
+    info += cats[i] + '、';
+  }
+}
+ +
+

注: このコードは GitHub でも見られます (動いているデモもあります)。

+
+ +
+

重要: for ループ (他のループも同様) では、カウンター変数を増加、もしくは場合により減少させて、最終的に条件が true では無くなるポイントに達するようにする必要があります。もしそうで無い場合、ループは永遠に回り続け、ブラウザーが強制的に停止するか、クラッシュしてしまうでしょう。これは無限ループといいます。

+
+ +

break でループを終了する

+ +

すべての繰り返し処理が終了する前にループを終了したいとき、break 文を使用して終了させることができます。前回の記事、switch 文で、入力した値が switch 文の case にマッチしたとき、switch 文を抜け、それ以降のコードを実行するために break 文を使用しました。 

+ +

これはループでも同様で、break 文を使用することで即時にループを抜けて、ブラウザーに続きのコードを実行させることができます。

+ +

それでは、連絡先 (電話番号を持っている) の配列の中から特定の連絡先を検索してみましょう。まずは HTML です。検索するテキスト入力用の {{htmlelement("input")}} 要素と、検索内容を送信 (submit) する {{htmlelement("button")}} 要素、検索結果を表示する {{htmlelement("p")}} 要素を備えます。

+ +
<label for="search">連絡先の名前: </label>
+<input id="search" type="text">
+<button>検索</button>
+
+<p></p>
+ +

現在の JavaScript について：

+ +
const contacts = ['クリス:2232322', 'サラ:3453456', 'ビル:7654322', 'メアリー:9998769', 'ダイアン:9384975'];
+const para = document.querySelector('p');
+const input = document.querySelector('input');
+const btn = document.querySelector('button');
+
+btn.addEventListener('click', function() {
+  let searchName = input.value.toLowerCase();
+  input.value = '';
+  input.focus();
+  for (let i = 0; i < contacts.length; i++) {
+    let splitContact = contacts[i].split(':');
+    if (splitContact[0].toLowerCase() === searchName) {
+      para.textContent = splitContact[0] + ' の電話番号は ' + splitContact[1] + ' です。';
+      break;
+    } else {
+      para.textContent = '連絡先が見つかりません。';
+    }
+  }
+});
+ + + +

{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. コードの先頭で、いくつか変数を宣言しています。その中に、連絡先の情報を持った配列があり、各要素は名前と電話番号をコロンで区切った文字列となっています。
    2. +
  2. 次に、ボタン (btn) にイベントリスナーを設定しています。ボタンが押されたときに検索結果が戻ってくるようになっています。
    3. +
  3. テキスト入力欄に入力された値を searchName という変数に格納してから、次の検索に備え、入力欄をクリアし、フォーカスを設定しています。検索に大文字小文字を気にしないよう、文字列に toLowerCase() を実行しているのに注意してください。
    4. +
  4. ここからが本題の for ループです。 +
      +
    1. カウンター変数を 0 から始め、contacts.length より小さくなくなるまで、ループの繰り返しの度に i を 1 増やしていきます。
      2. +
    2. ループの内側では、まず現在の連絡先 (contacts[i]) をコロンの文字で分割し、splitContact という配列に格納します。
      3. +
    3. それから、条件文を用いて、splitContact[0] (連絡先の名前) が入力された searchName にまた toLowerCase() を使って小文字化したものと等しいかを判定します。もし等しければ、連絡先の電話番号を段落 ({{htmlelement("p")}} 要素) に表示し、break を使用してループを終了しています。
      4. +
    +
    5. +
  5.   (contacts.length-1) 回目の繰り返しの後に、もし連絡先の名前が入力された検索語に一致しなければ、段落に「連絡先が見つかりません。」という文字列を表示し、条件が true では無くなるまでループを継続します。
    6. +
+ +
+

注: すべてのソースは GitHub で見ることができます (動いているデモもあります)。

+
+ +

continue で繰り返しをスキップする

+ +

continue 文は break と同じような動作をします。けれど、ループを完全に抜けてしまうのではなく、次の繰り返しまで飛ばします。それでは、今度は入力として数値を受け取り、その数以下で整数の平方である値のみを返すという例を見てみましょう。

+ +

HTML は基本的に先ほどの例と同様で、1 つのテキストボックスと出力用の段落があります。JavaScript もループ自体を除けばほぼ同じですので、違う部分のみを示します。

+ +
let num = input.value;
+
+for (let i = 1; i <= num; i++) {
+  let sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  para.textContent += i + ' ';
+}
+ +

出力結果はこちらです。

+ + + +

{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. 今回の入力内容は数値 (num) です。for ループには、カウンターの初期値として、(今回は 0 ではなく) 1 が与えられ、終了する条件としてカウンターが入力値 (num) より大きくなった場合と指定されており、イテレーターとして、カウンターに 1 ずつ加算するよう指定されています。
    2. +
  2. ループ内部では、各値の平方根を Math.sqrt(i) を使用して求め、求めた平方根を切り捨てた値が、切り捨てる前の平方根と等しいかどうかを調べています (切り捨てには Math.floor() に任意の数値を渡します)。
    3. +
  3. もし、平方根と切り捨てた数値が等しくないのなら (!==)、平方根は整数ではないことを示しています。整数以外には興味がありませんので、continue 文を用いて、その数値をどこにも保持することなく、次のループの繰り返しまでスキップします。
    4. +
  4. もし、その平方根が整数値であるならば、if ブロックは飛ばされるので、continue 文は実行されません。代わりに、現在の i の値を段落の内容の後ろにスペースと一緒に結合します。
    5. +
+ +
+

注: すべてのソースは GitHub でも見ることができます (動いているデモもあります)。

+
+ +

while と do ... while

+ +

for は JavaScript で利用可能な唯一のループのタイプではありません。実際には多くのものがありますが、これらのすべてを理解する必要はありませんが、仕事の同じ機能をわずかに異なる方法で認識できるように、他のものの構造を見ておく価値があります。
+
+ まず、while ループを見てみましょう。このループの構文は次のようになります。

+ +
初期化処理
+while (条件) {
+  // 実行するコード
+
+  最後の式
+}
+ +

これは for ループとよく似ていますが、初期化条件はループの前に設定され、最後の式は実行するコードの後のループ内に含まれます。これら二つの項目は丸括弧の中に含まれません。条件は、for ではなく while キーワードが前に付いた括弧内に含まれています。
+
+ for ループにもある３つの項目が、for ループとおなじ順序で定義されています。これは理にかなっています。条件が true では無くなるポイントに達したかどうかを確認する前に初期化処理を定義する必要があります ; ループ内のコードが実行された後（1回の繰り返しの完了）、最期の式が実行されます。これは、条件がまだ true である場合にのみ発生します。
+
+ 猫のリストの例をもう一度見てみましょう。ただし、while ループを使うように書き直してみましょう：

+ +
let i = 0;
+
+while (i < cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}
+ +
+

注: これは期待どおりに動作します。GitHub でライブ実行してみてください（完全なソースコードを見ることもできます）。

+
+ +

do ... while ループは非常によく似ていますが、while構造にはバリエーションがあります。

+ +
初期化処理
+do {
+  // 実行するコード
+
+  最後の式
+} while (条件)
+ +

この場合、初期化処理は、ループが始まる前に、再び最初に来ています。キーワードは、実行するコードと最期の式を含む中括弧の直前にあります。

+ +

ここでの違いは、条件がほかの全ての後にあり、括弧で囲まれ、その前に while キーワードが付いていることです。do...while ループでは、中括弧内のコードは、チェックが再度実行されるかどうかを確認する前に常に 1 回実行されます (while と for の場合、チェックが最初に来るため、コードは実行されない可能性があります) 。
+
+ do...while ループを使用するように、猫のリストの例をもう一度書き直してみましょう：

+ +
let i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i < cats.length);
+ +
+

注: 再度、これは期待どおりに動作します。GitHub でライブ実行してみてください（完全なソースコードを見ることもできます）。

+
+ +
+

重要: while と do ... while では、すべてのループと同様に、カウンター変数を増加、もしくは場合により減少させて、最終的に条件が false となるようにする必要があります。そうしなければループは永遠に進み、ブラウザーはそれ強制的に停止させるか、クラッシュします。これは無限ループと呼ばれます。

+
+ +

アクティブラーニング: カウントダウンを開始します!

+ +

この練習では、出力ボックスへの簡単な起動カウントダウンを 10 から Blast off まで印字してください。具体的には、

+ + + +
+

Note: あなたがループ(例えば (while(i>=0))からタイピングを始めると、ブラウザが固まってしまうかもしれません。終了条件をまだ入力していないからです。注意して下さい。この問題に対処するにはコメントの中にコードを書き始めて、完了してからコメントを削除することです。

+
+ +

間違えた場合は、「リセット」ボタンを使用してこの例をいつでもリセットできます。あなたが本当に立ち往生したら、"ソリューションを表示"を押して解決策を見てください。

+ + + +

{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}

+ +

アクティブラーニング: ゲストリストに記入する

+ +

この演習では、配列に格納された名前のリストを取得して、それらをゲストリストに入れることが必要です。しかし、これはそれほど簡単ではありません — 彼らは貪欲で失礼で、常にすべての食べ物を食べるので、私たちはフィルとローラを入れさせたくありません！ 私たちは 2 つのリストを持っています。1 つは承認するゲストのためのもの、もう 1 つは拒否するゲストのためのものです。
+
+ 具体的には、

+ + + +

私たちはすでにあなたに次のものを提供しました：

+ + + +

特別ボーナス問題 — 上のタスクを正常に完了すると、カンマで区切られた 2 つの名前リストが残されますが、それらは整頓されません。それぞれの末尾にカンマがあります。それぞれの場合に最後のカンマを切り取り、末尾にピリオドを追加した行をどのように書くかという問題を解決出来ますか？ヘルプのため便利な文字列メソッドの記事を見てみてください。
+
+ 間違えた場合は、「リセット」ボタンを使用してこの例をいつでもリセットできます。あなたが本当に立ち往生したら、"ソリューションを表示"を押して解決策を見てください。

+ + + +

{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}

+ +

どのタイプのループを使用しますか？

+ +

基本的な用途では for、while、do ... while ループはほぼ互換性があります。それらはすべて同じ問題を解決するために使用することができます。どちらを使用するかは、あなたの個人的な好みに大きく左右されます。これは、どれが最も覚えやすいか、最も直感的かということです。それらをもう一度見てみましょう。

+ +

まずは for:

+ +
for (初期化処理; 条件; 最後の式) {
+  // 実行するコード
+}
+ +

while:

+ +
初期化処理
+while (条件) {
+  // 実行するコード
+
+  最後の式
+}
+ +

そして最後は do...while:

+ +
初期化処理
+do {
+  // 実行するコード
+
+  最後の式
+} while (条件)
+ +

少なくとも最初は for から始めることをお勧めします。すべてを覚えておくことが簡単だからです。初期化処理、条件、最後の式をすべて括弧内にきちんと入れなければならないので、それらがどこにあるかや見落としていないことの確認が簡単です。

+ +
+

注: 高度な/特殊な状況やこの記事の範囲を超えて有用な、他のループタイプ/機能もあります。ループ学習をさらに進めたい場合は、高度なループと反復処理ガイドをお読みください。

+
+ +

スキルをテストしよう!

+ +

この記事の最後に到達しましたが、最も大事な情報を覚えていますか？移動する前に、情報を維持しているか検証するテストを見ることができます — Test your skills: Loops を見てください。

+ +

まとめ

+ +

この記事では、背後にある基本的な概念と、JavaScript でコードをループする際に使用できるさまざまなオプションについて説明しました。今はループが反復コードを処理するための良い仕組みである理由がはっきり分かり、自身の例で使用できることを誇らしく思うでしょう。
+
+ あなたが理解できなかったことがあれば、記事をもう一度読んだり、ヘルプを求めて私たちに連絡してください。

+ +

関連情報

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/javascript/building_blocks/return_values/index.html b/files/ja/learn/javascript/building_blocks/return_values/index.html new file mode 100644 index 0000000000..e9a13429b5 --- /dev/null +++ b/files/ja/learn/javascript/building_blocks/return_values/index.html @@ -0,0 +1,201 @@ +--- +title: 関数の戻り値 +slug: Learn/JavaScript/Building_blocks/Return_values +tags: + - リターン + - リターン値 + - 戻り値 + - 返り値 + - 返却値 + - 関数 +translation_of: Learn/JavaScript/Building_blocks/Return_values +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

このコースでの関数の学習を終えるために、最後に議論しておくべき関数についての大事なコンセプトがあります。それは戻り値です。関数によっては意味のある値を返さないものもありますが、値を返すものも当然あります。それらの値が何であるか、あなたのコードの中でどのように利用するのか、またどのように関数に意味のある値を返させるのかについて理解することは重要です。これらについてすべてを以下で紹介します。

+ + + + + + + + + + + + +
前提条件:基本的なコンピューターリテラシー、基本的な HTML と CSS の知識、JavaScript初級レベルの知識、関数の知識
目的:関数の戻り値とその使い方を理解すること
+ +

戻り値とは？

+ +

戻り値は、その名が示すとおり関数の実行が完了した時に返される値です。戻り値についてそこまで意識してこなかったかもしれませんが、これまでに何度も戻り値を見てきているはずです。

+ +

以下の見覚えのある例を見てみましょう (このシリーズの過去の記事より) 。

+ +
let myText = 'I am a string';
+let newString = myText.replace('string', 'sausage');
+console.log(newString);
+// 文字列の replace() 関数は文字列を受け取り、
+// 一方の部分文字列をもう一方の部分文字列に置き換え、
+// 置き換えられた新しい文字列を返します。
+
+ +

replace() 関数が myText という文字列の上で実行され、2 つの引数が渡されています:

+ +
    +
  1. 置換される部分文字列 ('string')。
    2. +
  2. 置換する部分文字列 ('sausage')。
    3. +
+ +

この関数が完了 (実行が終了) した時に、関数は置換された新しい文字列を値として返します。上記のコードでは、この戻り値を newString 変数に代入しています。

+ +

replace() 関数についての MDN のリファレンスページには、戻り値 というセクションがあります。関数によって返される値が何か知り把握することはとても大事です。従って、可能な限りこちらも見るようにしてください。

+ +

関数によっては何も値を返しません (この場合、リファレンスページでは戻り値を void または undefined として記載しています)。たとえば、前の記事で作った displayMessage() 関数では、関数が実行されたときに特定の値は返されていません。ただスクリーンのどこかにボックスの表示を作っているだけです。

+ +

一般的に、戻り値は関数がある種の計算をしている途中の段階で使用されます。 関数で計算する必要があるいくつかの値を含む最終結果を取得したいとします。関数は値を計算した後、結果を返すことができるため、変数に格納できます。この変数は、計算の次の段階で使用できます。

+ +

オリジナル関数での戻り値の使い方

+ +

カスタム関数から値を返すために、必要なことは、return というキーワードを使うことです。直近の random-canvas-circles.html の例でこれを見たでしょう。draw() 関数は 100 のランダムな円を HTML 内に表示します。
+ {{htmlelement("canvas")}}:

+ +
function draw() {
+  ctx.clearRect(0, 0, WIDTH, HEIGHT);
+  for (let i = 0; i < 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();
+  }
+}
+
+ +

ループの繰り返しの中で、現在の円の x 座標、y 座標、半径それぞれのランダムな値を生成するために random() 関数に対して3 回の呼び出しが行われます。random() 関数はひとつの引数 (整数) を受け取り、0 からその受け取った数値までの乱数を返します。以下のようになります。

+ +
function random(number) {
+  return Math.floor(Math.random() * number);
+}
+
+ +

次のように書くことも可能です。

+ +
function random(number) {
+  const result = Math.floor(Math.random() * number);
+  return result;
+}
+
+ +

しかし最初のものの方がよりコンパクトで、効率よく書けています。

+ +

関数が呼び出されるたびに、Math.floor(Math.random() * number) の計算の結果が返されます。この戻り値は、関数が呼び出された場所に現れて、コードが続行されます。

+ +

したがって、以下を実行すると:

+ +
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+
+ +

この時、3 つの random() がそれぞれ 500、200、35 と値を返した場合、このコードは実際には次のように実行されたことになります。

+ +
ctx.arc(500, 200, 35, 0, 2 * Math.PI);
+
+ +

コード上の関数の呼び出しがまず行われ、その戻り値が関数の呼び出しの代わりとなり、その後にコードそのものが実行されます。

+ +

実践: 戻り値を返す関数を作る

+ +

戻り値を返すオリジナルな関数を書いてみましょう。

+ +
    +
  1. まず最初に GitHub から function-library.html ファイルをローカル環境にコピーします。このファイルはシンプルな HTML のページで、文字列入力用の {{htmlelement("input")}} フィールドとパラグラフ（段落）要素を含んでいます。また、{{htmlelement("script")}} 要素があり、この中でページ内の HTML 要素の参照を 2 つの変数で保持させています。このページに対して、テキストボックスに数値を入力したら、入力した数値と関連のある異なる数値を下のパラグラフ要素に表示させるようにしていきます。
    2. +
  2. いくつかの関数を <script> 要素に追加していきましょう。既に記述されている 2 行の JavaScript のコードの下に、以下の関数定義を追加します。 + 
    function squared(num) {
+  return num * num;
+}
+
+function cubed(num) {
+  return num * num * num;
+}
+
+function factorial(num) {
+  if (num < 0) return undefined;
+  if (num == 0) return 1;
+  let x = num - 1;
+  while (x > 1) {
+    num *= x;
+    x--;
+  }
+  return num;
+}
    + squared() 関数と cubed() 関数は大変わかりやすいでしょう。引数として渡された値の 2 乗や 3 乗を返しています。factorial() 関数は渡された数の階乗を返しています。
    3. +
  3. 次に input に入力された数値を出力する処理を追加していきます。イベントハンドラーを既存の関数の下に記述しましょう。 + 
    input.onchange = function() {
+  const num = input.value;
+  if (isNaN(num)) {
+    para.textContent = 'You need to enter a number!';
+  } else {
+    para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                       num + ' cubed is ' + cubed(num) + '. ' +
+                       num + ' factorial is ' + factorial(num) + '.';
+  }
+}
    + +

    ここでは onchange イベントハンドラーを作っています。これは文字列入力での change イベントが発火した時に実行されます。つまり新しい値が input に入力され、送信された時です (たとえば値を入力し、Tab か Return を押して入力からフォーカスを外す時)。この無名関数が実行されると、input に入力された値が num 定数に代入されます。
    +
    + 次に、条件付きテストを行うようにします。もし入力された値が数値でなければ、パラグラフ要素にエラーメッセージを出力します。テストでは、式 isNaN(num) が true を返すかどうか見るようにします。一般的に値が数値でないかをテストする際には isNaN() 関数を使います。この関数では、渡された値が数値でなければ true を返し、数値であれば false を返します。
    +
    + もしテストが false を返した場合、num の値は数値です。したがって、数値の 2 乗、3 乗、階乗の値を示す文が、パラグラフ要素内に出力されます。その出力する文章内で必要とする値を計算するために squared() 関数、cubed() 関数、factorial() 関数を呼んでいます。

    +
    4. +
  4. +

    コードを保存して、それをブラウザーで表示してみましょう。

    +
    5. +
+ +
+

注意: もしサンプルがうまく動作しない場合は、GitHub 上の完成版と比較などしてみてください（実際に動かして確認もできます）。またはお問い合わせください。

+
+ +

あなたの番です!

+ +

この時点で、独自の関数をいくつか書き出してライブラリに追加してみましょう。数値の平方根や立方根はどうですか？また、特定の半径を持つ円の円周はどうでしょうか？

+ +

関数に関する追加のヒント:

+ + + +

スキルをテストしよう!

+ +

この記事の最後まで到達しましたが、最も大事な情報を覚えていますか？移動する前に、この情報を維持しているか検証するテストを見ることができます— Test your skills: Functions を見てください。

+ +

まとめ

+ +

以上、関数は楽しく、非常に便利で、構文や機能についてまだまだ話すことはたくさんありますが、それらはかなり理解しやすいものです。

+ +

もし何か理解できなかったことがありましたら、何度もこの記事を読み込むか、またはお問い合わせください。

+ +

関連情報

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

このモジュール

+ + -- cgit v1.2.3-54-g00ecf