JavaScript は、ウェブサイトに対話性を追加するプログラミング言語です。ゲーム、ボタンを押したときの反応、フォームへのデータ入力、動的なスタイル付け、アニメーションなどがこれにあたります。この記事は、 JavaScript を使い始め、何ができるのかについての理解を深めるのに役立ちます。
| 前提条件: | コンピューターのオペレーティングシステム、ウェブサイトを構築する際に使用する基本ソフトウェア、およびファイルシステムに概ね慣れておくこと。 |
|---|---|
| 学習成果: |
|
JavaScript は強力なプログラミング言語であり、ウェブサイトに対話操作を追加することができます。Brendan Eich によって考案されました。
JavaScript は汎用性が高く、初心者にもやさしいものです。経験を積めば、ゲーム、 2D や 3D のアニメーション、包括的なデータベース駆動型のアプリなどが作れるようになります。
JavaScript は比較的コンパクトですが、一方でとても柔軟性があります。開発者は JavaScript 言語のコアをベースに多種多様なツールを作成し、最小限の労力で膨大な様々な機能を利用できるようにしました。例えば以下のようなものがあります。
コアの JavaScript 言語が上記のツールとどのように違うのか、その詳細を紹介することは、 JavaScript の軽い入門者向けの書籍であるこの記事の範囲外です。詳細はコアモジュールや、 MDN の他の部分で詳しく学ぶことができます。
以下では、コア言語のいくつかの側面について紹介します。またブラウザーの API 機能についてもいくつか説明します。楽しみましょう！
JavaScript は、最も人気のある現代のウェブ技術のひとつです。 JavaScript のスキルが上がれば、ウェブサイトのパワーと創造性は新たな次元に入るでしょう。
しかし、 JavaScript を使いこなせるようになるのは HTML や CSS よりも少し難しいです。小さなものから始め、小さく確実な手順で作業を続ける必要があるかもしれません。始めるにあたって、hello world! を表示する例（基本的なプログラミング例の標準）を作りながら、基本的な JavaScript をページに追加する方法を紹介しましょう。
警告:これまでこのコースに沿って進めてきていない場合は、このサンプルコードをダウンロードして作業を進めてください。
最初にテストサイトに行き、scripts という名前の新しいフォルダーを作成してください。
それから、このscripts フォルダーの中にmain.js という新しいファイルを作成して保存してください。
index.html ファイルの</body> 終了タグの直前に新しい行で、以下の新しい要素を追加してください。
<script src="scripts/main.js"></script>これは CSS の<link> 要素の時の作業と基本的に同じです。これは JavaScript をページに適用するので、（CSS の時と同じく、ページ上の何に対しても） HTML に影響を与えることができます。
main.js ファイルに次のコードを追加してください。
const myHeading = document.querySelector("h1");myHeading.textContent = "Hello world!";最後に、 HTML と JavaScript を書いたファイルを保存したことを確認し、ブラウザーでindex.html を読み込んでください。
メモ:上記の説明で<script> 要素を HTML ファイルの末尾付近に置いたのは、ブラウザーがファイルに現れる順番でコードを読み込むからです。
JavaScript が先に読み込まれ、まだ読み込まれていない HTML に影響を与えることになると、問題が生じる可能性があります。 JavaScript を HTML ページの下部に配置することは、この依存関係に対応する一つの方法です。
JavaScript を使用して、見出しの文字列がHello world! に変更されました。最初にquerySelector() と呼ばれる関数を使用して見出しの参照を取得し、myHeading と呼ばれる変数に格納しています。これは CSS のセレクターを使用するのととてもよく似ています。要素に対して何かをしたくなったら、まずその要素を選択する必要があります。
その後、myHeading 変数のtextContent プロパティ（見出しの内容を表す）の値をHello world! に設定します。
メモ:上の例で使用した機能はどちらもドキュメントオブジェクトモデル (DOM) API の一部であり、これを使って文書を操作することができます。
どのように動作するかをよりよく理解できるように、 JavaScript 言語の基本機能のいくつかを説明しましょう。これらの機能はすべてのプログラミング言語に共通しているので、これらの基本をマスターすれば、ほとんど何でもプログラムできるようになります！
警告:この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、ブラウザー開発ツールを探るを参照してください。
変数は、値を格納できる入れ物です。まず、let というキーワードと、その後に任意の名前を指定することで、変数を宣言します。
let myVariable;行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくはYour Guide to Semicolons in JavaScript を参照してください。
変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります(変数の命名規則についてはこの記事を参照してください)。自信がない場合は、有効かどうか変数名を調べることができます。
JavaScript は大文字と小文字を区別します。myVariable はmyvariable とは異なる変数です。コードで問題が発生している場合は、大文字・小文字をチェックしてください。
変数を宣言したら、以下のように値を割り当てることができます。
myVariable = "Bob";好みに応じて、両方の操作を同一の行で行うことができます。
let myVariable = "Bob";変数の値は、名前で呼び出すだけで取得することができます。
myVariable;変数に値を代入した後で、変更することもできます。
let myVariable = "Bob";myVariable = "Steve";なお、変数は様々なデータ型の値を保持することもできます。
| 変数 | 説明 | 例 |
|---|---|---|
| 文字列 | 一連のテキストで、文字列と呼ばれます。値が文字列であることを示すには、単一引用符または二重引用符で囲む必要があります。 | let myVariable = 'Bob'; またはlet myVariable = "Bob"; |
| 数値 | 数値です。数値は引用符で囲みません。 | let myVariable = 10; |
| 論理型 | 論理値です。これは真か偽かの値です。true とfalse は特別なキーワードで、引用符は必要ありません。 | let myVariable = true; |
| 配列 | 単一の参照で複数の値を格納できる構造です。 | let myVariable = [1,'Bob','Steve',10];配列の各メンバーは次のように参照します。 myVariable[0],myVariable[1], など。 |
| オブジェクト | 基本的には何でも格納できます。 JavaScript のすべてがオブジェクトであり、変数に格納することができます。学ぶ際にはこれを覚えておいてください。 | let myVariable = document.querySelector('h1');上記のすべての例も同様です。 |
ではなぜ変数が必要なのでしょうか。何か面白いプログラミングをするには変数が必要です。値が変更できなければ、挨拶のメッセージをパーソナライズしたり、画像ギャラリーに表示されている画像を変更するなどの動的な操作ができないのです。
コメントは、ブラウザーから無視される、コードの間に入れられた短いテキストスニペットです。CSS と同じように、JavaScript のコードではコメントを付けることができます。
/*挟まれているすべてがコメントです。*/コメントに改行が含まれていない場合、次のように 2 つのスラッシュの後ろに記載する方が簡単です。
// これはコメントです演算子は、2 つの値 (または変数) に基づいて結果を生成する数学的な記号です。次の表では、JavaScript コンソールで試してみるいくつかの例とともに、最も単純な演算子をいくつか見ることができます。
| 演算子 | 解説 | 記号 | 例 |
|---|---|---|---|
| 加算 | 2 つの数値を足し合わせたり、 2 つの文字列を結合したりします。 | + | 6 + 9; |
| 減算、乗算、除算 | 基本的な数学の計算を実施します。 | -,*,/ | 9 - 3; |
| 代入 | すでに出てきました。変数に値を割り当てます。 | = | let myVariable = 'Bob'; |
| 厳密等価 | これは、2 つの値が等しく、かつデータ型が同じであるかどうかを調べます。true/false （論理値）の結果を返します。 | === | let myVariable = 3; |
| 否定、非等価 | その後にあるものと論理的に反対の値を返します。たとえばtrue をfalse に換えます。等価演算子と一緒に使用されると、否定演算子は 2 つの値が等しくないかどうかを調べます。 | !,!== | 「否定」の場合は次の通りです。基本の式が
「非等価」は異なる構文ですが、基本的に同じ結果になります。ここでは「
|
他にも演算子はもっとたくさんありますが、今のところはこれで十分です。全体の一覧については、式と演算子を参照してください。
メモ:データ型を混在させると、計算を実行するときに奇妙な結果になる可能性があるため、変数を正しく参照し、期待通りの結果を得るように注意してください。例えばコンソールに'35' + '25' と入力してみてください。期待通りの結果にならないのはなぜでしょうか。引用符は数字を文字列に変換するので、数字を加算するのではなく、文字列を連結する結果になったのです。35 + 25 を入力すれば、正しい結果が得られます。
条件文は、ある式が true を返すかどうかをテストし、その結果次第でそれぞれのコードを実行するコード構造です。条件文のよくある形はif...else 文です。例えば以下の通りです。
let iceCream = "チョコレート";if (iceCream === "チョコレート") { alert("やった！チョコレートアイス大好き！");} else { alert("あれれ、でもチョコレートが好きなのに......");}if () の中の式が条件です。ここでは等価演算子を使用して、変数iceCream とチョコレートという文字列を比較し、2 つが等しいかどうかを調べています。この比較がtrue を返した場合、コードの最初のブロックが実行されます。比較が真でない場合、最初のブロックはスキップされ、else 文の後にある 2 番目のコードブロックが代わりに実行されます。
関数は、再利用したい機能をパッケージ化する方法です。プロシージャが必要なときは、毎回コード全体を書くのではなく関数名を使って関数を呼び出すことができます。すでにいくつかの関数の仕様を見てきました。例えば次のようなものです。
let myVariable = document.querySelector("h1");alert("hello!");これらの関数、document.querySelector とalert() は、必要なときにいつでも使えるようブラウザーに組み込まれています。
もし変数名に見えるものがあったとしても、その後に括弧() が付いていれば、おそらくそれは関数です。関数は普通、仕事をするのに必要な小さなデータである引数を取ります。引数は括弧の中に入れ、複数の引数がある場合はカンマで区切ります。
例えば、alert() 関数はブラウザーのウィンドウにポップアップボックスを表示しますが、ポップアップボックスに何を書き込むかを関数に指示するために、文字列を引数として渡す必要があります。
嬉しいことに、自分で関数を定義することができます。次の例では、引数として 2 つの数値をとり、それらを乗算するという単純な関数を記載します。
function multiply(num1, num2) { let result = num1 * num2; return result;}上記の関数をコンソールで実行し、いくつかの引数を指定してテストしてみてください。例えば次のようなものです。
multiply(4, 7);multiply(20, 20);multiply(0.5, 3);メモ:return 文はresult の値を関数内から関数の外に戻すことをブラウザーに指示し、それを利用できるようにします。これが必要な理由は、関数内で定義された変数が、その関数内でしか利用できないためです。これは変数のスコープと呼ばれています(変数のスコープのより詳しい説明をお読みください)。
ウェブサイトを本当にインタラクティブにするには、イベントが必要です。イベントは、ブラウザーの中で起きていることを検出し、その応答としてコードを実行するコード構造です。最も分かりやすい例はclick イベントで、マウスで何かをクリックするとブラウザーによって発行されるものです。これを実行するには、コンソールに以下のように入力してから、現在のウェブページ上をクリックしてください。
document.querySelector("html").addEventListener("click", function () { alert("痛っ! つつかないで!");});要素にイベントハンドラーを取り付ける方法はいくつもあります。ここでは<html> 要素を選択しています。そして、addEventListener() 関数を呼び出し、待ち受けるイベントの名前 ('click') とイベントが発生したときに実行する関数を渡します。
先ほどaddEventListener() に渡した関数は、名前を持たないので無名関数と呼ばれます。無名関数の書き方として、アロー関数と呼ばれるものがあります。アロー関数は() => をfunction () の代わりに使用します。
document.querySelector("html").addEventListener("click", () => { alert("痛っ! つつかないで!");});さて、 JavaScript の基本のおさらいが終わったところで、例題のサイトに新しい機能を追加してみましょう。
先に進む前に、main.js ファイルの現在の内容を削除して、空のファイルを保存してください。そうしないと、 "Hello world!" の例で使用した既存のコードが、これから追加する新しいコードと衝突してしまいます。
このセクションでは、 DOM API 機能をもっと使用して、サイトに画像を追加しましょう。画像をクリックすると JavaScript を使用して 2 つの画像を切り替えることができます。
まずサイトに掲載したいと思う別な画像を見つけてください。最初の画像と同じサイズか、できるだけ近いものを使用してください。
この画像をimages フォルダーに保存してください。
この画像の名前をfirefox2.png に変更してください。
main.js ファイルに次の JavaScript を入力してください。
const myImage = document.querySelector("img");myImage.onclick = () => { const mySrc = myImage.getAttribute("src"); if (mySrc === "images/firefox-icon.png") { myImage.setAttribute("src", "images/firefox2.png"); } else { myImage.setAttribute("src", "images/firefox-icon.png"); }};index.html をブラウザーに読み込みます。画像をクリックすると、もう一方の画像に変わるでしょう。
何が起こったのでしょうか。<img> 要素への参照を変数myImage に格納しました。次に、この変数のonclick イベントハンドラープロパティに、名前のない関数（「無名」関数）を代入しました。そうすれば、この要素がクリックされるたびに次の動きをします。
src 属性の値を取得します。src の値が元の画像のパスと等しいかどうかをチェックします。src の値を 2 番目の画像へのパスに変更し、もう一方の画像が強制的に<img> 要素の中に読み込まれるようにします。src の値を元の画像のパスに戻して、元の状態に戻ります。次に、もう 1 つの小さなコードを追加し、ユーザーがサイトにアクセスしたときに、ページの表題をパーソナライズされた挨拶メッセージに変更してみましょう。この挨拶メッセージは、ユーザーがサイトを離れて後で戻った時にも保存されるようにします。Web Storage API を使用して保存しましょう。したがって、必要な時にいつでもユーザーと挨拶メッセージを変更できるオプションも用意しましょう。
index.html では、<script> 要素の直前に次の行を追加します。
<button>ユーザーを変更</button>main.js では、次のコードを下記のとおりにファイルの最後に配置します。これは新しいボタンと見出しへの参照を変数に格納します。
let myButton = document.querySelector("button");let myHeading = document.querySelector("h1");パーソナライズされた挨拶を設定する以下の関数を追加しましょう。まだ何も起こりませんが、すぐに修正します。
function setUserName() { const myName = prompt("あなたの名前を入力してください。"); localStorage.setItem("name", myName); myHeading.textContent = `Mozilla はかっこいいよ、${myName} さん、Mozilla はかっこいいよ。`;}setUserName() 関数では、prompt() 関数を使用して、alert() のようにダイアログボックスを表示しています。しかし、prompt() はalert() とは異なり、ユーザーにデータを入力するよう求め、ユーザーがOK を押した後に変数にそのデータを格納します。この場合、ユーザーに名前を入力するよう求めます。次に、localStorage と呼ばれる API を呼び出すことで、ブラウザーにデータを格納して後で受け取ることができます。 localStorage のsetItem() 関数を使って、'name' と呼ばれるデータを作成し、myName に入っているユーザーから入力されたデータを格納します。最後に、見出しのtextContent に文字列と新しく格納されたユーザーの名前を設定します。
以下のような条件ブロックを追加します。最初に読み込んだときにアプリを構造化するので、これを初期化コードと呼ぶこともできます。
if (!localStorage.getItem("name")) { setUserName();} else { const storedName = localStorage.getItem("name"); myHeading.textContent = `Mozilla はかっこいいよ、${storedName}`;}このブロックでは、最初にname のデータが存在しているかどうかをチェックするために否定演算子（! で表される論理否定）を使用しています。存在しない場合は、作成するためにsetUserName() 関数が実行されます。存在する場合は（つまり、以前の訪問時にユーザーが設定した場合）、getItem() を使用して格納された名前を受け取り、setUserName() の中で行ったのと同様に、見出しのtextContent に文字列とユーザーの名前を設定します。
最後に、以下のonclick イベントハンドラーをボタンに設定します。クリックすると、setUserName() 関数が実行されます。これでユーザーがボタンを押すことで、好きな時に新しい名前を設定できるようになります。
myButton.onclick = () => { setUserName();};この例を実行してユーザー名を入力するダイアログボックスが出たとき、キャンセルボタンを押してみてください。結果として "Mozilla is cool, null" というタイトルが表示されるでしょう。これはプロンプトをキャンセルしたときに、値がnull、つまり値がないことを示す JavaScript の特殊な値に設定されるためです。
また何も入れずにOK を押してみてください。結果として "Mozilla is cool," というタイトルが表示され、これは理由が明白です。
この問題を避けるには、ユーザーがnull や空白の名前を入力していないかチェックするよう、setUserName() 関数を書き換えます。
function setUserName() { const myName = prompt("あなたの名前を入力してください。"); if (!myName) { setUserName(); } else { localStorage.setItem("name", myName); myHeading.textContent = `${myName} さん、Mozilla はかっこいいよ。`; }}人間の言葉で言うと、myName に値がない場合や、nullの場合、 最初からsetUserName() を実行します。値がない場合（上記の式が真でない場合）には、localStorage に値を設定して、見出しのテキストにも設定します。
最後までこの記事の手順に従った場合は、最終的に次のようなページが表示されているでしょう（こちらで作成した版を表示することもできます）。
行き詰まったら、自分の作業をGitHub 上の完成したサンプルコードと比べてみてください。
私たちは JavaScript に少し触れただけです。コアモジュールと応用モジュール、JavaScript での動的スクリプトからの部分には、さらに多くの JavaScript があります。
ウェブ開発者を目指す方に最適な教材です! インタラクティブな環境で、短いレッスンとインタラクティブなテスト、自動評価によるガイドで、 JavaScript を学ぶことができます。最初の 40 レッスンは無料です。全コースは少額の一括払いでご利用いただけます。