We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

JavaScript はウェブサイトにインタラクティブ機能(ゲーム、ボタンが押されたときやデータがフォームに入力されたときの反応、動的なスタイルの変更、アニメーションなど)を追加するプログラミング言語です。この記事は、このエキサイティングな言語を始めるのに役立ち、可能性についてのアイディアを提供します。

そもそも JavaScript とは何か

JavaScript (略して "JS" ) は成熟した動的プログラミング言語であり、 HTML 文書に適用すると、ウェブサイトに動的な対話操作を提供できます。Mozilla プロジェクト、Mozilla Foundation、Mozilla Corporation の共同設立者である Brendan Eich によって考案されました。

JavaScript の用途は多彩です。小さいものでは、カルーセル、画像ギャラリー、レイアウトの変更、ボタンのクリックに対する応答などから始めることができます。もっと経験を積むと、ゲーム、2D および 3D のアニメーショングラフィック、包括的なデータベース駆動型アプリケーションなどを作成することができます。

JavaScript はとてもコンパクトですが、一方でとても柔軟性があります。開発者は JavaScript 言語のコアの上に多種多様なツールを作成し、最小限の労力で膨大な様々な機能を利用できるようにしました。例えば以下のようなものがあります。

  • ブラウザーのアプリケーションプログラミングインターフェイス(API)。ウェブブラウザーに組み込まれた API により、動的な HTML の作成、 CSS スタイルの設定、ユーザーのウェブカメラからの動画ストリームの収集や操作、3D グラフィックやオーディオサンプルの生成などの機能を提供する、ウェブブラウザーに組み込まれた API。
  • 開発者が Twitter や Facebook のような他のコンテンツプロバイダのサイトから機能を組み込むことを可能にする、サードパーティの API。
  • すばやく HTML サイトやアプリケーションを構築できるサードパーティのフレームワークやライブラリ。

この記事は JavaScript の軽い紹介でしかないと思いますので、この段階にいる人に対して JavaScript のコア言語間の関係や、上記の様々なツールの違いを詳しく話して混乱させようとは思っていません。それは後で MDN の他の部分の JavaScript 学習エリアで詳しく学ぶことができます。

以下では、コア言語のいくつかの側面について紹介します。またブラウザーの API 機能についてもいくつか説明します。楽しみましょう!

"Hello world" の例

上記の章は本当にエキサイティングに聞こえるかもしれませんし、そうに違いありません — JavaScript は最も活気のある Web 技術の 1 つで、使い始めれば、ウェブサイトは力と創造性の新しい次元に入るでしょう。

しかし、 JavaScript を使いこなせるようになるのは HTML や CSS よりも少し困難です。小さなものから始め、小さく確実な手順で作業を続ける必要があるかもしれません。始めるにあたって、"hello world!" を表示する例(基本的なプログラミング例の標準)を作りながら、基本的な JavaScript をページに追加する方法を紹介しましょう。

重要: このコースの他の部分にあわせて進めてきていない場合は、このサンプルコードをダウンロードして作業を進めてください。

  1. 最初に、テストサイト行って、「scripts」という名前(かぎ括弧は除く)の新しいフォルダーを作成してください。それから、作成した scripts フォルダーの中で main.js という新しいファイルを作成してください。それを scripts フォルダーに保存してください。
  2. 次に、 index.html ファイルの </body> 閉じタグの前に新しい行を追加し、以下の新しい要素を追加してください。
    <script src="scripts/main.js"></script>
  3. これは CSS の <link> 要素の時の作業と基本的に同じです。これは JavaScript をページに適用するので、(CSS の時と同じく、ページ上の何に対しても) HTML に影響を与えることができます。
  4. main.js ファイルに次のコードを追加してください。
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. 最後に、 HTML と JavaScript を書いたファイルを保存したことを確認し、ブラウザーで index.html を読み込んでください。

: <script> 要素を HTML ファイルの末尾付近に置いたのは、ブラウザーが HTML をファイルに現れる順番で読み込むからです。もし JavaScript が最初に読み込まれ、その下の HTML に影響を与えると見られる場合、 HTML の準備ができる前に JavaScript が読み込まれ、正しく動作できない場合があります。したがって、 HTML ページの末尾付近に JavaScript を置くことは良い取り組みです。

何が起きたか

JavaScript を使用して、見出しの文字列が "Hello world!" に変更されました。最初に querySelector() と呼ばれる関数を使用して見出しの参照を取得し、 myHeading と呼ばれる変数に格納しています。これは CSS のセレクターを使用するのととてもよく似ています。要素に対して何かをしたくなったら、まずその要素を選択する必要があります。

その後、 myHeading 変数の textContent プロパティ(見出しの内容を表す)の値を "Hello world!" に設定します。

: 上の例で使用した機能はどちらもドキュメントオブジェクトモデル (DOM) API の一部であり、これを使って文書を操作することができます。

言語の短期集中コース

どのように動作するかをよりよく理解できるように、 JavaScript 言語の基本機能のいくつかを説明しましょう。これらの機能はすべてのプログラミング言語に共通しているので、これらの基本をマスターすれば、何かをプログラムできるようになります。

重要: この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 ブラウザー開発ツールを探るを参照してください。

変数

変数 は、値を格納できる入れ物です。まず、 var というキーワードと、その後に任意の名前を指定することで、変数を宣言します。

var myVariable;

: 行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくは Your Guide to Semicolons in JavaScript を参照してください。

: 変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります(変数の命名規則についてはこの記事を参照してください)。自信がない場合は、有効かどうか変数名を調べることができます。

: JavaScript は大文字と小文字を区別します。 myVariablemyvariable とは異なる変数です。コードで問題が発生している場合は、大文字・小文字をチェックしてください。

変数を宣言したら、以下のように値を割り当てることができます。

myVariable = 'Bob';

好みに応じて、両方の操作を同一の行で行うことができます。

var myVariable = 'Bob';

変数の値は、名前で呼び出すだけで取得することができます。

myVariable;

変数に値を代入した後で、変更することもできます。

var myVariable = 'Bob';
myVariable = 'Steve';

なお、変数は様々なデータ型の値を保持することもできます。

データ型 説明
String 文字列と呼ばれる一連のテキスト。値が文字列であることを示すには、引用符で囲む必要があります。 var myVariable = 'Bob';
Number 数。数字には引用符がありません。 var myVariable = 10;
Boolean 真偽値。 truefalse は JS では特別なキーワードであり、引用符は必要ない。 var myVariable = true;
Array 単一の参照で複数の値を格納できる構造です。 var myVariable = [1,'Bob','Steve',10];
配列の各メンバーはこのように参照してください。
myVariable[0], myVariable[1], など。
Object 基本的には何でも格納できます。 JavaScript のすべてがオブジェクトであり、変数に格納することができます。学ぶ際にはこれを覚えておいてください。 var myVariable = document.querySelector('h1');
上記の例も同様です。

ではなぜ変数が必要なのでしょうか。何か面白いプログラミングをするには変数が必要です。値が変更できなければ、挨拶のメッセージをパーソナライズしたり、画像ギャラリーに表示されている画像を変更するなどの動的な操作ができないのです。

コメント

CSS と同じように、JavaScript のコードではコメントを付けることができます。

/*
挟まれているすべてがコメントです。
*/

コメントに改行が含まれていない場合、次のように 2 つのスラッシュの後ろに記載する方が簡単です :

// これはコメントです

演算子

演算子は、2 つの値 (または変数) に基づいて結果を生成する数学的な記号です。次の表では、JavaScript コンソールで試してみるいくつかの例とともに、最も単純な演算子をいくつか見ることができます。

演算子 説明 シンボル
追加/連結 2 つの数字を加えるか、2 つの文字列を結合します。 + 6 + 9;
"Hello " + "world!";
減算、乗算、除算 基本的な数学の計算を実施します。 -, *, / 9 - 3;
8 * 2; // JavaScript で乗算はアスタリスク
9 / 3;
代入 すでに出てきました。変数に値を割り当てます。 = var myVariable = 'Bob';
等価 2 つの値と型が互いに等しいかどうかを調べ、 true / false (真偽値)の結果を返します。 === var myVariable = 3;
myVariable === 4;
否定、非等価 その後にあるものと論理的に反対の値を返します。たとえば truefalse に換えます。等価演算子と一緒に使用されると、否定演算子は 2 つの値が等しくないかどうかをテストします。 !, !==

基本的な式は true ですが、それを否定しているので比較結果は false になります。

var myVariable = 3;
!(myVariable === 3);

ここでは「myVariable が 3 とは等しくない」ことをテストします。 myVariable は 3 と等しいので、 false を返します。

var myVariable = 3;
myVariable !== 3;

他にも演算子はもっとたくさんありますが、今のところはこれで十分です。全体の一覧については、式と演算子を参照してください。

: データ型を混在させると、計算を実行するときに奇妙な結果になる可能性があるため、変数を正しく参照し、期待通りの結果を得るように注意してください。例えばコンソールに "35" + "25" と入力してみてください。期待通りの結果にならないのはなぜでしょうか。引用符は数字を文字列に変換するので、数字を加算するのではなく、文字列を連結する結果になったのです。 35 + 25 を入力すれば、正しい結果が得られます。

条件文

条件文は、ある式が true を返すかどうかをテストし、その結果次第でそれぞれのコードを実行するコード構造です。条件文のよくある形は if ... else 文です。例えば以下の通りです。

var iceCream = 'チョコレート';
if (iceCream === 'チョコレート') {
  alert('やった、チョコレートアイス大好き!');    
} else {
  alert('あれれ、でもチョコレートは私のお気に入り......');    
}

if ( ... ) の中の式が条件です — ここでは等価演算子を使用して、変数 iceCreamチョコレートという文字列とをを比較し、2 つが等しいかどうかを調べています。この比較が true を返した場合、コードの最初のブロックが実行されます。比較が真でない場合、最初のブロックはスキップされ、 else 文の後にある 2番目のコードブロックが代わりに実行されます。

関数

関数 は、再利用したい機能をパッケージ化する方法です。プロシージャが必要なときは、毎回コード全体を書くのではなく関数名を使って関数を呼び出すことができます。すでにいくつかの関数の仕様を見てきました。例えば以下のようなものです。

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

これらの関数、 document.querySelectoralert は、必要にときにいつでも使えるようブラウザーに組み込まれています。

もし何かが変数名のように見える場合、その後に括弧 () があれば、おそらく関数です。関数は普通、仕事に必要な小さなデータである引数を取ります。これは括弧の中に入り、複数の引数がある場合はカンマで区切ります。

例えば、 alert() 関数はブラウザーのウィンドウにポップアップボックスを表示しますが、ポップアップボックスに何を書き込むかを関数に指示するために、文字列を引数として渡す必要があります。

嬉しいことに、自分の関数を定義することができます。次の例では、引数として 2 つの数値をとり、それらを乗算するという単純な関数を書きます。

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

上記の関数をコンソールで実行し、いくつかの引数を指定してテストしてみてください。例えば :

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

: return 文は result の値を関数から関数の外に戻して、利用できるようにすることをブラウザーに指示します。これは、関数内で定義された変数が、その関数内でしか利用できないために必要です。これは変数の<code>スコープ</code>と呼ばれています(変数のスコープのより詳しい説明をお読みください)。

イベント

ウェブサイトを実際にインタラクティブにするにはイベントが必要です。これらはブラウザーの中で起きることを検出し、反応のコードを実行するコード構造です。最も分かりやすい例は click イベントで、マウスで何かをクリックするとブラウザーによって起動されるものです。これを実行するには、コンソールに以下のように入力してから、現在のウェブページ上をクリックしてください。

document.querySelector('html').onclick = function() {
    alert('痛っ! つつくのはやめて!');
}

要素にイベントを割り当てる方法はたくさんあります。ここでは <html> 要素を選択し、 onclick ハンドラーのプロパティに、クリックイベントで実行したいコードを含む匿名(つまり名前がない)関数を代入します。

なお、

document.querySelector('html').onclick = function() {};

は以下のものと同等です。

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

短くしただけです。

ウェブサイトの例を膨らませる

ここまで JavaScript の基本を少し見てきましたが、何ができるのかを見るために、例のサイトにいくつかクールな機能を追加してみましょう。

画像の切り替えの追加

このセクションでは、 DOM API 機能をもっと使用して、サイトに画像を追加しましょう。画像をクリックすると JavaScript を使用して 2 つの画像を切り替えることができます。

  1. まずサイトに掲載したいと思う別な画像を見つけてください。最初の画像と同じサイズか、できるだけ近いものを使用してください。
  2. この画像を images フォルダに保存してください。
  3. この画像の名前を 'firefox2.png' (引用符なし)に変更してください。
  4. main.js ファイルに移動し、次の JavaScript を入力します。(もし "hello world" の JavaScript がまだ残っている場合は、削除してください。)
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  5. index.html をブラウザーに読み込みます。画像をクリックすると、もう一方の画像に変わります。

<img> 要素への参照を変数 myImage に格納します。次にこの変数の onclick イベントハンドラープロパティに、名前のない関数(無名関数)を代入します。そうすれば、この要素がクリックされるたびに以下の動きをします。

  1. 画像の src 属性の値を取得します。
  2. 条件文を使って、src の値が元の画像のパスと等しいかどうかをチェックします。
    1. そうであれば、src の値を 2番目の画像へのパスに変更し、もう一方の画像が強制的に <img> 要素の中に読み込まれるようにします。
    2. そうでない(すでに変更されている)場合、src の値を元の画像のパスに戻して、元の状態に戻ります。

パーソナライズされた挨拶メッセージの追加

次に、もう 1 つの小さなコードを追加し、ユーザーがサイトにアクセスしたときに、ページの表題をパーソナライズされた挨拶メッセージに変更してみましょう。この挨拶メッセージは、ユーザーがサイトを離れて後で戻った時にも保存されるようにします。ウェブストレージ API を使用して保存しましょう。したがって、必要な時にいつでもユーザーと挨拶メッセージを変更できるオプションも用意しましょう。

  1. index.html では、 <script> 要素の直前に次の行を追加します :
    <button>ユーザーを変更</button>
  2. main.js では、次のコードを下記のとおりにファイルの最後に配置します。これは新しいボタンと見出しへの参照を変数に格納します。
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. パーソナライズされた挨拶を設定する以下の関数を追加しましょう。まだ何も起こりませんが、すぐに修正します。
    function setUserName() {
      var myName = prompt('あなたの名前を入力してください。');
      localStorage.setItem('name', myName);
      myHeading.textContent = Mozilla はすばらしいよ、" + myName;
    }
    この関数では prompt() 関数を使用して、 alert() のようにダイアログボックスを表示しています。しかし、 prompt() はユーザーにデータを入力するよう求め、ユーザーが OK を押した後に変数にそのデータを格納します。この場合、ユーザーに名前を入力するよう求めます。次に、 localStorage と呼ばれる API を呼び出すことで、ブラウザーにデータを格納して後で受け取ることができます。 localStorage の setItem() 関数を使って、 'name' と呼ばれるデータを作成し、 myName に格納されたユーザーから入力されたデータを格納します。最後に、見出しの textContent に文字列と新しく格納されたユーザーの名前を設定します。
  4. 次に、この if ... else ブロックを追加します。これは初期化コードと呼ぶことができ、最初の読み込みでアプリを構成します。
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = Mozilla はすばらしいよ、" + storedName;
    }
    このブロックでは、最初に name のデータが存在しているかどうかをチェックするために否定演算子(! で表される論理否定)を使用しています。ない場合は、作成するために setUserName() 関数が実行されます。ある場合は(つまり、以前の訪問時にユーザーが設定した場合)、 getItem() を使用して格納された名前を受け取り、見出しの textContent に文字列と、 setUserName() の中で設定されたユーザーの名前を設定します。
  5. 最後に、以下の onclick イベントハンドラーをボタンに設定します。クリックすると、 setUserName() 関数が実行されます。これでユーザーがボタンを押すことで、好きな時に新しい名前を設定できるようになります。
    myButton.onclick = function() {
      setUserName();
    }
    

サイトにアクセスしてみると、ページがユーザー名を尋ね、パーソナライズされたメッセージを表示します。好きなときにボタンを押すと名前を変えることができます。おまけに、名前は localStorage 内に保存されているため、サイトを閉じた後も名前が保持され、次にサイトを開いたときにパーソナライズされたメッセージが保持されます。

結論

最後までこの記事の手順に従った場合は、最終的に次のようなページが表示されているでしょう(こちらで作成した版を表示することもできます)。

もし行き詰まったら、自分の作業を Github 上の完成したサンプルコードと比べてみてください。

私たちは JavaScript に少し触れただけです。楽しく遊んだり、もっと上達したりしたい場合は、 JavaScript の学習トピックに進んでください。

このモジュール内の文書

ドキュメントのタグと貢献者

このページの貢献者: Almlm, Uemmra3, mfuji09, T.Ukegawa
最終更新者: Almlm,