path: root/files/ja/learn/javascript/first_steps/what_is_javascript/index.html

---
title: JavaScript とは
slug: Learn/JavaScript/First_steps/What_is_JavaScript
tags:
  - 3rd party
  - API
  - Article
  - Beginner
  - Browser
  - CodingScripting
  - Core
  - JavaScript
  - Learn
  - Script
  - comments
  - external
  - inline
  - 'l10n:priority'
  - what
translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>

<p class="summary">MDN 初心者向け JavaScript コースへようこそ！ この最初の記事では、高水準から JavaScript を見ていき、「JavaScript とは何か？」「これを使うと何ができるか？」などの質問に答えます。JavaScript の用途にきっちりと親しめるようになります。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提知識:</th>
   <td>基本的なコンピューターリテラシー、HTML および CSS の基本的な理解。</td>
  </tr>
  <tr>
   <th scope="row">到達目標:</th>
   <td>JavaScript とは何か、何ができるか、どのようにウェブサイトに適用できるかについて親しむ。</td>
  </tr>
 </tbody>
</table>

<h2 id="高水準の定義">高水準の定義</h2>

<p>JavaScript はウェブページにて複雑な機能をできるようにするプログラミング言語です —ウェブページが読み込まれるたびに、単にあなたが見ている静的な情報を表示する以上のことをしています— 更新されたコンテンツの定期表示や、インタラクティブな地図や、2D/3D グラフィックのアニメーションや、ビデオジュークボックスのスクロールなど — たぶん JavaScript が組み込まれています。ウェブ技術をケーキだとするとこれは 3 つ目の層で、他の 2 つ (<a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a>) は学習エリアの他の部分でもっと詳しく扱ってきました。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>

<ul>
 <li>{{glossary("HTML")}} はマークアップ言語で、これを使ってウェブコンテンツに構造と意味を与えます。例えば段落や見出しや表を定義したり、ページに画像や動画を入れたりします。</li>
 <li>{{glossary("CSS")}} は HTML コンテンツに適用するスタイリング規則の言語です。例えば背景とフォントの色を設定したり、複数カラムにコンテンツをレイアウトしたりします。</li>
 <li>{{glossary("JavaScript")}} は動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語です。(ええ、すべてできるわけではないですが、JavaScript の数行でできることは素晴らしいです。)</li>
</ul>

<p>この 3 層は素晴らしい構成です。例としてシンプルなテキストラベルを見てみます。HTML を使って構造と意図をマークアップできます:</p>

<pre class="brush: html notranslate">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>

<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>

<p>次に、CSS を加えて、見栄えをよくします:</p>

<pre class="brush: css notranslate">p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}</pre>

<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>

<p>最後に、JavaScript を加えて動的なふるまいを実装します:</p>

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

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('名前を入力して下さい');
  para.textContent = 'Player 1: ' + name;
}
</pre>

<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p>

<p>テキストラベルの最新バージョンをクリックしてみて、何が起きるのか見てみます (このデモは GitHub でも見られます— <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">ソースコード</a>または<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">ライブ実行</a>を参照してください)。</p>

<p>JavaScript はそれ以上のことができます — もっと詳しく見てみましょう。</p>

<h2 id="So_what_can_it_really_do" name="So_what_can_it_really_do">実際に何ができるのか</h2>

<p>JavaScript は次のことを実現する一般的なプログラミング機能で構成されています。</p>

<ul>
 <li>有用な値を変数に格納する。上の例では、ユーザーに新しい名前を問いかけて、<code>name</code> と名付けられた変数に入力された新しい名前を格納しています。</li>
 <li>連なった文字 (プログラミングでは「文字列」と呼ばれます) に対する操作。上の例では「Player 1: 」という文字列と <code>name</code> 変数を繋げて「Player 1: Chris」というような新しいラベルを生成しています。</li>
 <li>ウェブページで起きる事柄に対処する。先ほどの例では {{Event("click")}} イベントを使用して、ボタンがクリックされたことを検出し、ラベルを更新するコードを実行しました。</li>
 <li>他にもたくさんのことができます！</li>
</ul>

<p>さらにワクワクするのは、JavaScript からすぐに使えるように構築されている機能です。それは <strong>Application Programming Interface</strong> (<strong>API</strong>) と呼ばれ、JavaScript のコードにさらなる強力な力を与えてくれることでしょう。</p>

<p>API がなければ難しかったり、不可能であるようなコードを、すぐに使えるブロックのように、開発者がプログラムを作ることを可能にします。家を作るときの既製の家具と同じことを、プログラミングでしてくれるのです。自分で設計し、使用する木材を選定し、正しい形で板を切り出して、正しいサイズのネジを見つけて、自分で組み立てるよりも、既に切り出されたボードとネジを使って本棚を組み立てるだけの方がずっと簡単ですよね。</p>

<p>API は大まかに 2種類に分けられます。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>

<p><strong>ブラウザー API </strong>はウェブブラウザーに組み込まれていて、コンピューターを取り巻く環境からデータを取り出したり、複雑で便利なことをしてくれたりします。例えば、</p>

<ul>
 <li>{{domxref("Document_Object_Model","DOM (Document Object Model) API")}} は HTML と CSS の操作を可能とします。HTML を生成し、削除し、変更し、動的にページの見た目を変更することなどが可能です。もし (先ほどの簡単な例で見たように) ページ内でポップアップウィンドウを見たり、新しいコンテンツが表示されたりしたのなら、DOM が使用されていることでしょう。</li>
 <li>{{domxref("Geolocation","Geolocation API")}} は地理的な情報を取得します。これは <a href="https://www.google.com/maps">Google マップ</a>があなたの所在地を見つけて地図上にプロットする場合に使用されています。</li>
 <li>{{domxref("Canvas_API","Canvas")}} と {{domxref("WebGL_API","WebGL")}} の API は 2D や 3D グラフィックでのアニメーションを可能とします。このウェブ技術を使用してすごいことをやってのける人たちがいます。<a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> や <a href="http://webglsamples.org/">webglsamples</a> などのページを見てください。</li>
 <li><a href="/ja/Apps/Fundamentals/Audio_and_video_delivery">音声と動画の API</a>、たとえば {{domxref("HTMLMediaElement")}} や {{domxref("WebRTC API", "WebRTC")}} などは適切な音声・動画をウェブページで再生することや、ウェブカメラの動画を撮って他の人のコンピューターで流すといった、マルチメディアの可能性を示してくれます (我々が作った<a href="http://chrisdavidmills.github.io/snapshot/"> Snapshot demo</a> を見てみてください)。</li>
</ul>

<div class="note">
<p><strong>注</strong>: 上記の多くは古いブラウザーでは動作しません。試すには Firefox、Chrome、Edge、Opera といったモダンなブラウザーを使うのがよいでしょう。プロダクションコードを提供する (顧客に実際のコードを納品する) 段になったら、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing">クロスブラウザーテスト</a>を読んでみるとよいでしょう。</p>
</div>

<p><strong>サードパーティ API </strong>はブラウザーには組み込まれておらず、さらに普通はウェブ上のどこかからそのコードと情報を探さなければなりません。例えば、</p>

<ul>
 <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a> を使用して、ウェブサイトに最新のツイートを表示させることができます。</li>
 <li><a href="https://developers.google.com/maps/">Google マップ API</a> と <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a> を使用して、ウェブサイトに専用の地図を埋め込み、付加機能を付けることもできます。</li>
</ul>

<div class="note">
<p><strong>注</strong>: このような API は先進的ですが、このモジュールでは扱いません。詳しく知りたければ <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a> で扱っています。</p>
</div>

<p>ワクワクすることはもっとたくさんあります！ ですが、まだ興奮しすぎないでください。24 時間程度の勉強だけでは、Facebook や Google マップや Instagram は作れません。まずはやらなければならない基本がたくさんあるのです。さあ、先に進みましょう！</p>

<h2 id="What_is_JavaScript_doing_on_your_page" name="What_is_JavaScript_doing_on_your_page">JavaScript は何をするのか</h2>

<p>まずは実際にコードを見てみましょう。そしてページで JavaScript を動かすと何が起きるのか見てみましょう。</p>

<p>ブラウザーをウェブページに読み込んだときの話を簡単に説明します (<a href="/ja/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> の記事で最初に出てきました)。ウェブページをブラウザーで見たとき、実行環境 (ブラウザーのタブ) の中で、コード (HTML、CSS そして JavaScript) が実行されます。これは素材 (コード) を加工して製品 (ウェブページ) を出力する工場のようなものです。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>

<p>JavaScript のごく一般的な用途は、(先ほど例示した) Document Object Model API を介して動的に HTML と CSS を変更し、ユーザーインターフェイスを更新することです。なお、ウェブドキュメント上のコードは通常、ページ上に現れる順序で読み込まれて実行されます。もし JavaScript がロードされ、影響を受ける HTML および CSS がロードされる前に実行しようとすると、エラーが発生する可能性があります。この回避策については、記事の後半の「<a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies">スクリプトの読み込み方針</a>」セクションで学習します。</p>

<h3 id="ブラウザーのセキュリティ">ブラウザーのセキュリティ</h3>

<p>ブラウザーのそれぞれのタブは、コードを実行するための入れ物を個別に持ちます (この入れ物を技術的用語では「実行環境」と呼びます)。つまり、それぞれのタブ内でコードは完全に分かれて実行されており、あるタブで動いているコードは他のタブや他のウェブサイトのコードに、直接的には干渉できません。これは良いセキュリティ対策です。互いに干渉することが出来てしまえば、ウェブの悪党たちは、他のタブで開いているウェブサイトから情報を盗み出したり、もっとひどいことをするためにコードを書き始めることでしょう。</p>

<div class="note">
<p><strong>注</strong>: 他のウェブサイトや、タブに安全にデータや実行可能なコードを送る方法はあります。けれども、このコースでは扱わない高度な技術です。</p>
</div>

<h3 id="JavaScript_running_order" name="JavaScript_running_order">JavaScript の実行順序</h3>

<p>ブラウザーが JavaScript のブロックを見つけたとき、たいていは先頭から最後に向かって順番に実行されます。つまりどの順番で実行されるかということに気を配らなければなりません。例えば、最初の例で見た　JavaScript のブロックに戻りましょう。</p>

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

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('名前を入力して下さい');
  para.textContent = 'Player 1: ' + name;
}</pre>

<p>このコードでは文章段落を選択して (1 行目)、イベントリスナーを登録して (3 行目) 段落がクリックされたとき、<code>updateName()</code> というコードブロック (5 行目から 8 行目) が実行されるようにしています。<code>updateName()</code> というコードブロック (再利用可能なコードブロックで「関数」と呼びます) は、ユーザーに新しい名前を尋ねて、表示内容を変更するため、段落にその名前を挿入します。</p>

<p>もし、最初の 2行を入れ替えた場合、動かなくなってしまいます。代わりに<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザーの開発者コンソール</a>に <code>TypeError: para is undefined</code> というエラーが出るでしょう。この意味は <code>para</code> オブジェクトがまだ存在しないため、イベントリスナーを設定できないということを表しています。</p>

<div class="note">
<p><strong>注</strong>: これはとてもよくあるエラーです。オブジェクトに対して何かをする前にはそのオブジェクトへの参照が存在していることに気を配らなければなりません。</p>
</div>

<h3 id="Interpreted_versus_compiled_code" name="Interpreted_versus_compiled_code">インタープリターとコンパイルコード</h3>

<p>もしかしたら、<strong>インタープリター</strong>と<strong>コンパイル</strong>という用語をプログラミングの文脈で聞いたことがあるかもしれませんね。インタープリターでは、コードが上から下に実行されてコードの実行結果がすぐに返ってきます。ブラウザーが実行する前にコードを何らかの形に変換する必要はありません。コードはプログラマーに親しみやすいテキストで受け取って、それから直接処理されます。</p>

<p>反対に、コンパイル言語はコンピューターで実行する前に他の形式に変換 (コンパイル) しなければなりません。例えば C/C++ は機械語にコンパイルされてから、コンピューターで実行されます。プログラムは、元のプログラムソースコードから生成されるバイナリーフォーマットで実行されます。</p>

<p>JavaScript は軽量なインタープリター型プログラミング言語です。ウェブブラウザーは元のテキストの形で JavaScript コードを受け取り、それからスクリプトを実行します。技術的な見地からは、たいていの JavaScript インタープリターは <strong>just-in-time compiling</strong> というテクニックを使ってパフォーマンスを向上させています; スクリプトが使われるときに、JavaScript コードが速いバイナリーフォーマットにコンパイルされて、可能な限り高速に実行されます。しかし、JavaScript は、事前ではなく実行時にコンパイルされるために、インタープリター言語と考えられています。</p>

<p>ここで詳細は話しませんが、どちらの方式も長所と短所があります。</p>

<h3 id="Server-side_versus_client-side_code" name="Server-side_versus_client-side_code">サーバーサイドコードとクライアントサイドコード</h3>

<p><strong>サーバーサイド</strong>と<strong>クライアントサイド</strong>という言葉も聞いたことがあるかもしれません。特にウェブ開発でよく聞かれます。クライアントサイドコードはユーザーのコンピューター上で実行されるコードです。ウェブページを見ているとき、ページのクライアントサイドコードがダウンロードされて、ブラウザーで実行されて表示されます。この JavaScript モジュールのことを明示的に<strong>クライアントサイド JavaScript </strong>と言います。</p>

<p>反対に、サーバーサイドコードはサーバー上で実行され、結果がブラウザーにダウンロードされて表示されます。ウェブで人気のあるサーバーサイドの言語は、PHP、Python、Ruby や ASP.NET など。そして JavaScript です！ JavaScript はサーバーサイドの言語としても使われます。人気のある Node.js 環境がその例です。サーバーサイドの JavaScript については <a href="/ja/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> のトピックを見てください。</p>

<h3 id="Dynamic_versus_static_code" name="Dynamic_versus_static_code">動的コードと静的コード</h3>

<p>クライアントサイドの JavaScript と、サーバーサイドの言語を説明するのに<strong>動的</strong>という言葉を使います。これはウェブページやウェブアプリが必要に応じてコンテンツを生成し、異なる状況において異なる表示ができるという能力を指しています。サーバーサイドのコードは、データベースからデータを取得して動的にコンテンツを生成します。一方、クライアントサイドの JavaScript はクライアント上のブラウザーで HTML のテーブルを生成したり、そのテーブルにサーバーから指示を受け、データを追加したり、ウェブページ上でユーザーにテーブルを表示したりするなどして、動的にコンテンツを生成します。それぞれの文脈で、少し異なる意味合いではありますが、関連しています。そしてどちらの方式も (サーバーサイドもクライアントサイドも) たいていは同時に使用されます。</p>

<p>動的に更新されるコンテンツを含まないウェブページは<strong>静的</strong>と表現されます。静的なウェブページとは常に同じコンテンツを表示するページのことです。</p>

<h2 id="How_do_you_add_JavaScript_to_your_page" name="How_do_you_add_JavaScript_to_your_page">ページに JavaScript を追加する方法</h2>

<p>JavaScript は CSS と同じような方法で、HTML ページに適用することができます。CSS では {{htmlelement("link")}} 要素を使用することで外部のスタイルシートを適用することができ、また、{{htmlelement("style")}} 要素を使用することで HTML 内部に書かれたスタイルシートを適用することが出来ました。しかし、JavaScript で HTML に書く必要があるのは {{htmlelement("script")}} 要素だけです。どのように書くのか見てみましょう。</p>

<h3 id="Internal_JavaScript" name="Internal_JavaScript">内部の JavaScript</h3>

<ol>
 <li>まずは <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a> ファイルを自分のコンピューターにコピーします。どこか適当な場所に保存してください。</li>
 <li>テキストエディターとウェブブラウザーでそのファイルを開いてください。クリックできるボタンが 1 つあるウェブページを作る HTML だということがわかりますね。</li>
 <li>次に、テキストエディターで <code>&lt;/head&gt;</code> タグの直前に以下のコードを追加します。
  <pre class="brush: html notranslate">&lt;script&gt;

  // JavaScript をここに書きます

&lt;/script&gt;</pre>
 </li>
 <li>それでは {{htmlelement("script")}} 要素内に JavaScript を書いて、もうちょっと面白いことをしてみましょう。「// JavaScript をここに書きます」と書いてあるすぐ下に、以下のコードを追加してください。
  <pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() {
  function createParagraph() {
    let para = document.createElement('p');
    para.textContent = 'ボタンが押されました!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for(let i = 0; i &lt; buttons.length ; i++) {
    buttons[i].addEventListener('click', createParagraph);
  }
});</pre>
 </li>
 <li>ファイルを保存してブラウザーを更新してください。ボタンを押す度に新しい段落が作られて、下に表示されるようになりましたね。</li>
</ol>

<div class="note">
<p><strong>注</strong>: もし上記の例が上手く動いていないとしたら、もう一度最初から手順を確認してください。コピーしてコードを書いたファイルは <code>.html</code> というファイル名ですか？ {{htmlelement("script")}} 要素を <code>&lt;/head&gt;</code> タグの直前に追加しましたか？ JavaScript を上の例の通りに書きましたか？<strong> JavaScript は大文字小文字を区別しますので、見えている通りに書かなければなりません。正しく書いていなければ、動いてくれません。</strong>文字化けしているなら、テキストエディターの文字エンコーディングの設定が UTF-8 になっていることを確認してください。</p>
</div>

<div class="note">
<p><strong>注</strong>: GitHub にあるこちらのバージョン、<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">動くバージョンもあります</a>) を見ることもできます。</p>
</div>

<h3 id="External_JavaScript" name="External_JavaScript">外部の JavaScript</h3>

<p>これで JavaScript が動きましたね。しかし、JavaScript を外部のファイルに書きたいときはどうすればよいでしょうか？ 次の例を見てみましょう。</p>

<ol>
 <li>まず、先ほどの HTML ファイルと同じディレクトリーに新しいファイルを作ります。これを <code>script.js</code> と名付けます。.js という拡張子であることを確認してください。それで JavaScript であると認識されるのです。</li>
 <li>{{htmlelement("script")}} 要素を以下のコードで置き換えます。
  <pre class="brush: html notranslate">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
 </li>
 <li><code>script.js</code> に、次のスクリプトを追加します。
  <pre class="brush: js notranslate">function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'ボタンが押されました!';
  document.body.appendChild(para);
}

const buttons = document.querySelectorAll('button');

for(let i = 0; i &lt; buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}</pre>
 </li>
 <li>HTML ファイルを保存して、ブラウザーを更新してください。同じページが見えますね！ 同じように動いていますが、今回は外部の JavaScript ファイルです。コードを整理して、複数の HTML ファイルから再利用できるようにするには、このようにするのが良いでしょう。大きなスクリプトの塊がないほうが、HTML も読みやすくなります。</li>
</ol>

<div class="note">
<p><strong>注</strong>: GitHub でこちらのバージョンも見られます。<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> です (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">動いているバージョンもあります</a>)。</p>
</div>

<h3 id="Inline_JavaScript_handlers" name="Inline_JavaScript_handlers">インラインの JavaScript ハンドラー</h3>

<p>たまに JavaScript のコードが HTML の途中に書かれているのを見かけます。こんな感じで。</p>

<div id="inline_js_example">
<pre class="brush: js example-bad notranslate">function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'ボタンが押されました！';
  document.body.appendChild(para);
}</pre>

<pre class="brush: html example-bad notranslate">&lt;button onclick="createParagraph()"&gt;押してください&lt;/button&gt;</pre>
</div>

<p>このバージョンのデモを下のボタンを押して確認してください。</p>

<p>{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}</p>

<p>このデモは先ほどのセクションのものと同じ機能を持っていますが、{{htmlelement("button")}} 要素に <code>onclick</code> 属性を付けてボタンが押されたときに関数が実行されるようにハンドラーを直接書いています。</p>

<p><strong>書けはしますが、このようにはしないでください。</strong>この書き方は HTML を JavaScript で汚してしまう悪い書き方です。さらに、<code>onclick="createParagraph()"</code> という属性を JavaScript を適用したいボタンすべてに書かなければなりませんので、とても非効率です。</p>

<p>純粋な JavaScript では、1 つの命令ですべてのボタンが取得できます。先ほど使用した、すべてのボタンを取得するためのコードは以下の通りでした。</p>

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

for(let i = 0; i &lt; buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}</pre>

<p>これは <code>onclick</code> 属性を用いて書くより少し長いように見えますが、どれだけそのページにボタンを追加し、削除し、いくつあろうとも期待通りに動くでしょう。コードを変更することなく。</p>

<div class="note">
<p><strong>注</strong>: 自分の <code>apply-javascript.html</code> ファイルを編集して、いくつかボタンを追加してみて下さい。再度読み込むとどのボタンを押しても段落が作られるのがわかるでしょう。素敵でしょ！</p>
</div>

<h3 id="Script_loading_strategies" name="Script_loading_strategies">スクリプトの読み込み方針</h3>

<p>スクリプトを適切なタイミングで読み込むためには、いくつかの問題があります。 それは見掛けほど簡単ではありません！ 一般的な問題は、ページ上のすべての HTML が、現れた順に読み込まれることです。JavaScript を使用してページ上の要素（またはより正確には、<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">Document Object Model</a>）を操作している場合、何かをしようとする HTML の前に JavaScript が読み込まれ、解析されてもコードは機能しません。</p>

<p>上のコード例では、内部の例と外部の例は、HTML 本文が解析される前に JavaScript が読み込まれて文書の head で実行されています。これによりエラーが発生する可能性があるため、いくつかの構文を使用して回避しています。</p>

<p>内部の例では、コードの周りにこの構造を見ることができます。</p>

<pre class="brush: js notranslate">document.addEventListener("DOMContentLoaded", function() {
  ...
});</pre>

<p>これはブラウザーの "DOMContentLoaded" イベントをリッスンするイベントリスナーで、HTML body が完全に読み込まれて解析されたことを示します。このブロック内の JavaScript はそのイベントが発生するまで実行されないため、エラーは回避されます (コースの後半で<a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントについて学習</a>します) 。</p>

<p>外部の例では、より現代的な JavaScript 機能の <code>defer</code> 属性を使用して問題を解決し、<code>&lt;script&gt;</code> 要素に達した後も HTML コンテンツのダウンロードを続行するようブラウザーに指示します。</p>

<pre class="brush: js notranslate">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>

<p>この場合、スクリプトと HTML の両方が同時に読み込まれ、コードが機能します。</p>

<div class="note">
<p><strong>注</strong>: 外部のケースでは、<code>defer</code> 属性が問題を解決したため、<code>DOMContentLoaded</code> イベントを使用する必要はありませんでした。<code>defer</code> は外部スクリプトに対してのみ機能するため、内部の例では <code>defer</code> による解決策を使用しませんでした。</p>
</div>

<p>この問題に対する昔ながらの解決策は、すべての HTML が解析された後に読み込まれるように、body の下部に（たとえば <code>&lt;/body&gt;</code> タグの直前に）script 要素を置くことでした。この解決策（および上記の <code>DOMContentLoaded</code> による解決策）の問題点は、HTML DOM が読み込まれるまでスクリプトの読み込みと解析が完全にブロックされることです。JavaScript がたくさんある大規模なサイトでは、これは大きなパフォーマンス上の問題を引き起こす可能性があり、サイトを遅くします。</p>

<h4 id="async_and_defer" name="async_and_defer">async と defer</h4>

<p>実際には、スクリプトのブロッキングの問題を回避できるモダンな機能が 2 つあります — <code>async</code> と <code>defer</code>(すでに見てきました)。これらの 2 つの違いを見てみましょう。</p>

<p><code>async</code> 属性を使って読み込むスクリプトは(下記を見てください)、ページのレンダリングをブロックせずにスクリプトをダウンロードし、スクリプトのダウンロードが終了すると直ちに実行します。複数のスクリプトが特定の順序で実行されるという保証はありませんが、ページの残りの部分の表示を停止することはありません。ページ内のスクリプトが互いに独立して実行され、ページ上の他のスクリプトに依存しない場合は、<code>async</code> を使用することをお勧めします。</p>

<p>たとえば、次のスクリプト要素があるとします。</p>

<pre class="brush: html notranslate">&lt;script async src="js/vendor/jquery.js"&gt;&lt;/script&gt;

&lt;script async src="js/script2.js"&gt;&lt;/script&gt;

&lt;script async src="js/script3.js"&gt;&lt;/script&gt;</pre>

<p>スクリプトが読み込まれる順序に依存することはできません。<code>jquery.js</code> は <code>script2.js</code> と <code>script3.js</code> に前後して読み込まれます。この場合、<code>jquery</code> に依存するこれらのスクリプトの関数は、スクリプトの実行時に <code>jquery</code> が定義されないため、エラーを生成します。</p>

<p>読み込むバックグラウンドスクリプトがいくつもあって、それらをできるだけ早く実行したい場合に <code>async</code> を使用するべきです。例えば、ゲームを実際に開始するときに必要になるいくつかのロードすべきゲームデータファイルがあるとして、今のところは、スクリプトのロードによってブロックされずに、ゲームのイントロ、タイトル、ロビーを表示したいだけ、という場合です。</p>

<p><code>defer</code> 属性つきのスクリプト(下記のようなもの)は、ページに現れた順序でスクリプトを実行し、スクリプトとコンテンツがダウンロードされるとすぐにスクリプトを実行します。</p>

<pre class="brush: html notranslate">&lt;script defer src="js/vendor/jquery.js"&gt;&lt;/script&gt;

&lt;script defer src="js/script2.js"&gt;&lt;/script&gt;

&lt;script defer src="js/script3.js"&gt;&lt;/script&gt;</pre>

<p><code>defer</code> 属性を持つすべてのスクリプトは、ページに現れた順序で読み込まれます。したがって、2番目の例では、<code>jquery.js</code> が <code>script2.js</code> と <code>script3.js</code> の前に読み込まれ、<code>script2.js</code> が <code>script3.js</code> の前に読み込まれることは確実です。ページコンテンツがすべて読み込まれるまでは、実行せず、これはスクリプトが DOM配置に依存している場合に便利です(例: ページの要素を変更する場合)</p>

<p>要約すると、</p>

<ul>
 <li><code>async</code> と <code>defer</code> の両方とも、ページのその他の部分 (DOM など) がダウンロード中な時でも、ブラウザーにスクリプトを別々のスレッドでダウンロードするよう指示して、このためページ読み込みはスクリプトでブロックされません。</li>
 <li>依存関係なしでスクリプトを単独ですぐに実行できる場合は、<code>async</code> を使用します。</li>
 <li>スクリプトが他のスクリプトや DOM配置に依存している場合は、<code>defer</code> を使用してスクリプトを読み込み、対応する <code>&lt;script&gt;</code> 要素をブラウザーで実行して欲しい順序で配置します。</li>
</ul>

<h2 id="コメント">コメント</h2>

<p>HTML や CSS と同様に、JavaScript でもコード内にブラウザーが実行しない「コメント」を書くことができます。仲間の開発者 (または、6 カ月後のコードを忘れた自分自身) に対して動作方法を書くことができます。コメントはとても便利ですしたくさん書きましょう。大きなプログラムを書くのならなおのことです。コメントの書き方は 2 種類あります。</p>

<ul>
 <li>1 行で収まるコメントは 2 つのスラッシュ (//) のあとに続けて書きます。
  <pre class="brush: js notranslate">// これはコメントです</pre>
 </li>
 <li>複数行に渡るコメントは /* から */ の間に書きます。
  <pre class="brush: js notranslate">/*
  これも
  コメントです
*/</pre>
 </li>
</ul>

<p>先ほどのデモでコメントを書くならば、以下のようにします。</p>

<pre class="brush: js notranslate">// 関数: HTML の body タグ内の一番下に新しい段落を追加します。

function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'ボタンが押されました！';
  document.body.appendChild(para);
}

/*
  1. ページ内のボタンへの参照をすべて取り出して配列に入れる。
  2. すべてのボタンをループで回し、クリックイベントのリスナーを追加する

  どのボタンが押されても、createParagraph() 関数が実行されるようにする。
*/

const buttons = document.querySelectorAll('button');

for (let i = 0; i &lt; buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}</pre>

<div class="note">
<p><strong>メモ</strong>: 一般的にコメントは多いほうが少ないよりも優れていますが、変数が何であるかを説明する (変数名はおそらくもっと直感的にするべきです) ため、または非常に単純な操作を説明する (コードが複雑すぎるかもしれません) ために、多くのコメントを追加する場合は注意が必要です。</p>
</div>

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

<p>さて、JavaScript の世界に足を踏み入れましたね。なぜ JavaScript を使い、何ができるのかということに慣れるため、まずは理論から始めました。進むにつれ、少しでしたが例を見て、何よりも JavaScript がどのようにウェブサイトの他のコードに組み込まれているかを学習しました。</p>

<p>JavaScript が少し大変だと思いましたか。でも心配は無用です。このコースを受講することで一歩ずつ、理解しながら前に進んで行きましょう。次の記事で、まっすぐに飛び込んで自分で JavaScript のページを作って<a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">実践に飛び込んでいきましょう</a>。</p>

<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>

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

<ul>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript とは</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript への最初のダイブ</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/What_went_wrong">何が間違っている? JavaScript のトラブルシューティング</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/Variables">必要な情報を保存する — 変数</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/Math">JavaScript での演算の基本 — 数値と演算子について</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/Strings">テキストを扱う — JavaScript での文字列</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods">便利な文字列メソッド</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/Arrays">配列</a></li>
 <li><a href="/ja/docs/Learn/JavaScript/First_steps/Silly_story_generator">評価: バカ話ジェネレーター</a></li>
</ul>