MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

JavaScript の基本

JavaScriptはウェブサイトにインタラクティブ機能を追加するプログラミング言語です (例えばゲーム、ボタンが押されたときの応答、フォームに入力されたデータ、ダイナミックスタイリング、アニメーションなど) 。この記事では、このエキサイティングな言語を使い始めるのに役立ち、可能なことについて考えます。

JavaScript とは何ですか?

JavaScript (略して "JS" ) は HTML ドキュメントに適用すると、Web サイト上で動的な対話性を提供できる動的プログラミング言語 です。 Mozilla プロジェクト、Mozilla Foundation、Mozilla Corporation の共同設立者である Brendan Eich によって考案されました。

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

JavaScript は非常にコンパクトですが、一方非常に柔軟性があります。開発者はコア JavaScript 言語の上に多種多様なツールを作成し、最小限の労力で膨大な様々な機能を解き放つことができます。これらには以下を含みます :

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

この記事は JavaScript の簡単な導入部です。今の段階では JavaScript のコア言語と上記のさまざまなツールの違いについて説明を行いますが、混乱させるようなことは行いません。 後に JavaScript の学習領域、およびその他の MDN の記事で詳細を学ぶことができます。

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

"Hello world" の例

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

しかし、JavaScript は HTML や CSS よりも快適に使うためには少し複雑です。小さなものから始め、小さな一貫した手順で作業を続ける必要があるかもしれません。まず、基本的な JavaScript をページに追加し、"hello world!"  の例を作成する方法を紹介します (プログラミング学習の基本) 。

重要 : 今までのコースを実施していない場合は、このサンプルコードをダウンロードして作業を進めてください。

  1. まず最初に、あなたのテストサイトに移動し、'scripts' (引用符なし) という名前の新しいフォルダを作成してください。そこで新しく作成した script フォルダに main.js という名前のファイルを作成してください。そのファイルを scripts フォルダーに保存してください。
  2. 次に、index.html ファイルの </body> タグの前に新しい行を追加し、以下の新しい要素を追加してください :
    <script src="scripts/main.js"></script>
  3. これは基本的には CSS の <link> 要素と同じ仕事をしていますJavaScript をページに適用し、HTML (CSS と同じくページ上の他のものにも)に影響を与えることができます。
  4. main.js ファイルに次のものを追加します :
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. 最後に、HTML ファイルと JavaScript ファイルを保存し、ブラウザで index.html を読み込みます。そうすると次のように見えるでしょう :

: <script> 要素を HTML ファイルの最下部の近くに置いたのは、HTML がファイルに現れる順番でブラウザによって読み込まれるからです。JavaScript が最初に読み込まれ、その下の HTML に影響すると思われる場合、JavaScript が動作するはずの HTML の前に JavaScript が読み込まれるため、JavaScript が機能しない可能性があります。したがって、HTML ページの下部に JavaScript を置くことが、しばしば最良の戦略です。

何が起きた?

あなたの見出しのテキストが JavaScript を使用して "Hello world!" に変更されました。最初に querySelector() という関数を使用して、見出しの参照を取得し、 myHeading という変数に格納します。 これは CSS セレクタを使用した場合と非常によく似ています。ある要素に対して何かをしたいときは、まずその要素を選択する必要があります。

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

: 上記で使用した両方の機能は、ドキュメントオブジェクトモデル (DOM) APIの一部であり、ドキュメントを操作できます。

言語の基本短期集中コース

JavaScript 言語の基本的な機能のいくつかを説明して、JavaScript 言語の仕組みをより深く理解できるようにしましょう。さらにこれらの機能はすべてのプログラミング言語に共通しています。これらの基本を習得すれば、何かをプログラムできるようになります!

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

は、値を格納できるコンテナです。最初に var キーワードで変数を宣言し、それに続けて任意の名前を指定します :

var myVariable;

: 行の最後にあるセミコロンは、文がどこで終了するかを示します。単一の行で文を区切る必要がある場合にのみ必要ですが、文の末尾に文を入れるのが良い方法であると信じている人もいます。 必要なときと使用しないときのための他の規則があります 詳細は JavaScript のセミコロンガイドを参照してください。

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

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

変数を宣言後、値を与えることができます :

myVariable = 'Bob';

必要に応じて、次の両方の操作を同じ行で行うことができます :

var myVariable = 'Bob';

変数を名前で呼び出すだけで、値を取得できます :

myVariable;

変数に値を与えたら、後でそれを変更することができます :

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

変数には異なるデータ型があることに注意してください :

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

ではなぜ変数が必要なのでしょうか?プログラミングで面白いことをするために変数が必要です。値を変更できない場合は、グリーティングメッセージをパーソナライズしたり、画像ギャラリーに表示されている画像を変更するなど、動的な操作はできません。

コメント

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

/*
Everything in between is a comment.
*/

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

// This is a comment

 

演算子

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

演算子 説明 シンボル
追加/連結 2 つの数字を加えるか、2 つの文字列を結合します。 + 6 + 9;
"Hello " + "world!";
減算、乗算、除算 基本的な数学の計算を実施します。 -, *, / 9 - 3;
8 * 2; // multiply in JS is an asterisk
9 / 3;
代入演算子
すでに見ています : 変数に値を割り当てます。
= var myVariable = 'Bob';
厳密等価演算子
2つの値と型が互いに等しいかどうかを調べ、true / false (真偽値) の結果を返します。
=== var myVariable = 3;
myVariable === 4;
非同値演算子、否定演算子
 
その前にあるものと論理的に反対の値を返します。true false に変換します。等価演算子とともに使用する場合、否定演算子は 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 = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

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

関数

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

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

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

変数名のように見えますが、その後ろにカッコ(  )があるものを見ると、それはおそらく関数です。彼らが仕事をするために必要なデータを取るため、関数はしばしば引数を持ちます。これらは複数の引数がある場合はカンマで区切って括弧の中に入ります。

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

良いニュースはあなた自身の関数を定義することができるということです — この次の例では、引数として 2 つの数値をとり、それらを乗算する単純な関数を書いています :

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

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

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

: return ステートメントは、結果変数を関数から戻して使用できるようにするようブラウザに指示します。これは、関数内で定義された変数がそれらの関数内でのみ使用可能であるために必要です。 これは変数<code>スコープ</code>と呼ばれます。(可変スコープに関して詳しく確認する。)

イベント

ウェブサイト上の実際のインタラクティビティにはイベントが必要です。これらはコード構造であり、ブラウザで起こっていることを受取り、応答してコードを実行します。最も明白な例は click イベントです。これは、マウスで何かをクリックするとブラウザによって起動されます。これを実証するには、コンソールに次のように入力し、現在の Web ページをクリックしてください :

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

エレメントにイベントをアタッチする方法はたくさんあります。ここでは HTML 要素を選択し、その onclick ハンドラプロパティを、クリックイベントを実行するコードを含む匿名 (つまり名前のない) 関数と同じに設定します。

この処理は

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

以下の処理と同様です。

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

このように省略できます。

例のウェブサイトのスーパーチャージャー

ここでは JavaScript の基本をいくつか紹介しましたが、可能性のあるサンプルサイトにいくつかのクールな機能を追加してみましょう。

image changer を追加する

このセクションでは、いくつかの DOM API 機能を使用して画像を追加します。画像をクリックすると JavaScript を使用して 2 つの画像を切り替えることができます。

  1. まずサイトに掲載したいと思う別のイメージを見つけてください。最初のイメージと同じサイズか、できるだけ近くに配置してください。
  2. この画像を images フォルダに保存します。
  3. この画像の名前を'firefox2.png' (引用符なし) に変更します。
  4. main.js ファイルに移動し、次の JavaScript を入力します。(あなたの "hello world" の JavaScript がまだそこに残っている場合は、それを削除してください。)
  5. 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');
        }
    }
  6. index.html をブラウザに読み込みます。画像をクリックすると、もう一方の画像に変わります。

イメージ要素への参照を myImage 変数に格納します。次にこの変数の onclick イベントハンドラプロパティを、名前のない関数 ( "anonymous"関数)と等しくします。今、この画像要素がクリックされるたびに :

  1. イメージの src 属性の値を取得します。
  2. 条件を使用して、src の値が元のイメージのパスと等しいかどうかをチェックします :
    1. そうであれば、src 値を2番目のイメージへのパスに変更し、他のイメージを <image> 要素の中に強制的にロードします。
    2. そうでない (既に変更されていなければならない) 場合、src 値は元のイメージパスに戻って元の状態に戻ります。

パーソナライズされたウェルカムメッセージを追加する

次に、もう 1 つのコードを追加し、ユーザーが最初にサイトに移動したときにページのタイトルをパーソナライズされたウェルカムメッセージに変更します。このようなウェルカムメッセージは、ユーザーがサイトを離れて後に戻ると、Web Storage API を使用して保存されています。また、必要に応じていつでもウェルカムメッセージを変更するオプションも用意されています。

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

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

結論

この記事のすべての手順に従っている場合は、次のようなページが表示されます (ここでバージョンを表示することもできます) :

もしわからなくなった場合、Github の完成したサンプルコードと作業を比較できます。

私たちは JavaScript を少し触れただけです。あなたが楽しむことができ、さらに進歩したい場合は、JavaScript の学習トピックに進んでください。

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

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