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 を読み込みます。そうすると次のように見えるでしょう :

何が起きた？

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

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

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

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

値

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

var myVariable;

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

myVariable = 'Bob';

var myVariable = 'Bob';

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

myVariable;

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

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

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

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

コメント

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

/*
Everything in between is a comment.
*/

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

// This is a comment

演算子

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

探索する演算子はもっとたくさんありますが、これで十分です。完全なリストについては、式と演算子を参照してください。

条件式

条件式は、式が 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);

イベント

ウェブサイト上の実際のインタラクティビティにはイベントが必要です。これらはコード構造であり、ブラウザで起こっていることを受取り、応答してコードを実行します。最も明白な例は 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 の学習トピックに進んでください。