---
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
---
<div>{{LearnSidebar}}</div>

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

<h2 id="Prerequisites" name="Prerequisites">前提条件</h2>

<p>このモジュールを始める前に、<a href="/docs/Learn/HTML/Introduction_to_HTML">HTML</a> や <a href="/docs/Learn/CSS/Introduction_to_CSS">CSS </a>の基本に慣れておくべきです。また前のモジュールの <a href="/docs/Learn/JavaScript/First_steps">JavaScript の第一歩</a> も終了させておくべきです。</p>

<div class="note">
<p><strong>注記 </strong>: もしあなたが作業しているコンピュータ・タブレットやその他のデバイスで自分でファイルを作れない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったようなオンラインコーディングプログラムで (ほとんどの場合) 試すことができます。</p>
</div>

<h2 id="Guides" name="Guides">ガイド</h2>

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

<h2 id="Assessments" name="Assessments">評価</h2>

<p><span class="short_text" id="result_box" lang="ja"><span>以下の評価は、上のガイドで取り上げた JavaScript の基礎についての理解をテストします。</span></span></p>

<dl>
 <dt><a href="/ja/docs/Learn/JavaScript/Building_blocks/Image_gallery">イメージギャラリー</a></dt>
 <dd><span id="result_box" lang="ja"><span>JavaScript の基本的な構成要素を見てきましたので、JavaScript で動く画像ギャラリーという、</span></span><span lang="ja"><span>多くの Web サイトで見ることができるかなり一般的なアイテムを構築することで、ループ、関数、条件文、イベントに関する知識をテストします</span></span>。</dd>
</dl>