14分で JavaScript の基本を by Jeremy Thomas (日本語訳: 岡田洋)

Console(コンソール) ツール

お使いのブラウザには、WebページにJavaScriptを直接入力できるデベロッパーコンソールが付属しています。

あなたは Google Chromeを使っているので、JavaScript コンソールを Ctrl+Shift+J または F12 ⌥+⌘+J で開いて下さい。

あなたは Mozilla Firefoxを使っているので、Web コンソールを Ctrl+Shift+K または F12 ⌥+⌘+K で開いてください。

あなたは Microsoft Edge を使っているので、JavaScript コンソールを F12 で開いてください。

あなたは Opera を使っているので、JavaScript コンソールを Ctrl+Shift+I ⌥+⌘+I で開いてください。

あなたは Apple Safari を使っていますね。

⌘+,でPreferencesを開いて下さい。
Advanced tab を選択してください。
Show Develop menu in menu barを有効にしてください。
JavaScript コンソールを⌥+⌘+Cで開いてください。

ちゃんと動いていると確認しましょう!

コンソールで以下の物を入力して、Enter(↵)キーを押してください。

alert('Hello World!')

クリップボードにコピー

スニペットを実行

よく出来ました!

あなたはいま alert()という全てのWebブラウザにあらかじめ組み込まれたJavaScript 関数使用しました。

しかし正確には何をしたのでしょう?

Function(関数)コンセプト

あなたは alert()という関数(function)を'Hello World!'という引数で呼び出しました。

あなたは基本的に以下の4つのことをしました。

関数の名前を入力しました

alert('Hello World!')

開き括弧を入力し括弧を開きました

alert('Hello World!')

引数を一つ入力しました

alert('Hello World!')

閉じ括弧を入力し括弧を閉じました。

alert('Hello World!')

引数がない場合もあります。
複数の引数がある場合もあります。
関数には、ほとんど場合引数が必要ですが引数が省略できる場合もあります。

この場合、 alert() は一つの引数を必要とします。

しかしどんな型の引数なのでしょうか?

String(文字列) 型

あなたがテキストを扱う時には、文字列(string)を使います。文字列(string)は連続した文字(character)です。この場合、連続した12文字を使いました。 Hello World!。この文字列には英大文字、英小文字、空白、ビックリマークを含んでいました。

文字列の 開始位置 と終了位置を指定するため、文字列をクオーテーションマーク で囲みます。(シングル−クオート ' でもダブルクオートでも "開始と終了で一致していればOKです。)

あなたが 'Hello World!' という文字列(string)を定義したとき:

シングルクオートを入力しました。
文字を 12 文字入力しました。
もう一度 シングルクオートを入力しました。

文字列の代わりに数値を使ったらどうなるでしょうか?

Number(数値)型

他のプログラム言語と同様、 JavaScriptも 数値(number)を扱うことができます。

これらの数値は、大きくても小さくてもよく、小数点があってもなくてもよく、数値演算によって結合されます。

以下のものをコンソールに入力して(もしくは貼りつけて)下さい。

alert(9+5 * 3)

クリップボードにコピー

スニペットを実行

完璧です!

以下の事に注目してください

あなたは + と * という 演算子(operator)を使いました。
計算の順序は 以下のとおりです。　最初に 5 * 3 が計算され次に 9 + 15 が計算されました。
* の周りの空白は出力に関係しません。それらは単に私たち(人間!)がコード読む時にのみ役立ちます。

あなたはいろんな所で数値を見るでしょう。

ブラウザの寸法情報

数値はあらゆる所に現れます! とくにWebブラウザでは.

例を上げると、あたたが今使っているWebブラウザのウィンドウはあなたがJavaScriptを使って取得できる幅(width)をもっています。

以下のように入力してください。

alert(window.innerWidth)

クリップボードにコピー

スニペットを実行

ワンダフル!

これはあなたのブラウザのウィンドウの幅が 1680 ピクセルであることを意味します。

あなたが想像しているように window.innerHeight (ウィンドウの(内側の)高さ) も存在します。また現在のスクロール位置である window.scrollY も存在します。

けれど window とは実際には何でしょうか?

Object(オブジェクト)型

window は JavaScript のオブジェクト(object)です。

innerWidthは window オブジェクト(object) の プロパティ(property)です。
このプロパティにアクセスするには、 windowオブジェクト内に存在するinnerWidthを指定するためにドット. を使用しました。

JavaScriptのオブジェクト(object)は基本的に他のものを含む型です。

例えば window オブジェクトは以下のような物も含んでいます。

window.origin は文字列です。
window.scrollY は数値です。
window.location はオブジェクトです。

window が別のオブジェクトである location を含んでいます。これは JavaScript のオプジェクトの典型的な例です…

入れ子(Nesting)になった情報

オブジェクトのプロパティそれ自身がオブジェクトにであることがあります。

window.location もまたオブジェクトなのでそれ自身のプロパティを持ちます。それらのプロパティーにアクセスするためには、さらにもう一度ドット . とプロパティーの名前を追加します。

例えば href というプロパティーがあります。

alert(window.location.href)

クリップボードにコピー

スニペットを実行

素晴らしい!

あなたはこのWebページの完全なURLを表示しました。どうしてこうなったのでしょうか。

window はオブジェクト(object)です
location もオブジェクト(object)です
href は文字列(string)です

オブジェクトの入れ子の深さに制限はありません。
オブジェクトが持つことができるプロパティの数にも制限はありません。

これまで見てきたように、オブジェクトのプロパティは、文字列、数値、オブジェクト、さらには関数のいずれの型であってもかまいません。後者の場合、それはこう呼ばれます…

メソッド(Method)情報

オブジェクトのプロパティが関数である場合、メソッドと呼ばれます。

実際には、これまで使用してきたalert()関数はwindowオブジェクトのメソッドです!

window.alert('OMG')

クリップボードにコピー

スニペットを実行

なるほど OMG!

windowはブラウザのトップレベルのオブジェクトなので、すべてのプロパティとメソッドに直接アクセスできます。

そのため、 location.hrefと入力するのは、window.location.hrefと入力するのと同じです。

同じようにalert()はwindow.alert()と同じです。

オブジェクトは、同じ名前と可視範囲(scope)でいくつかのプロパティをグループ化し、データ内に階層を定義するのに便利です。それは、枝が他の小さな枝を持つことができる木のようなものです。

しかし、もしあなたがリスト(一覧表)のようなものしか必要としないなら…

Array(配列) 型

JavaScript のArray(配列)は、あたかも順序付きのリスト(一覧表)のように、複数の値を含むことができる型です。

alert()関数に3つの文字列が入った配列を渡しましょう。

alert(['What', 'is', 'up'])

クリップボードにコピー

スニペットを実行

そのとおり!

alert関数を呼び出す構文はすでに分かっていますね。alert(パラメータ)です。

この場合、パラメータは次のように定義した3つの項目を持つ配列です。

開き角括弧を入力し角括弧を開きました

['What', 'is', 'up']

最初の項目の文字列を入力しました

['What', 'is', 'up']

項目を区切るためにコンマを入力しました

['What', 'is', 'up']

他の2つの項目を配列(リスト)に追加しました

['What', 'is', 'up']

閉じ角括弧を入力し角括弧を閉じました

['What', 'is', 'up']

配列には文字列、数値、オブジェクト、他の配列、さらに色々なタイプの項目を含めることができます：

次の短いコードを試してみてください。

alert([2 + 5, 'samurai', true])

クリップボードにコピー

スニペットを実行

True(正しい)!

最初の項目2 + 5は数値です。2番目の項目'samurai'は文字列です。

3番めのパラメータは何でしょうか? それはクオーテーションマークで囲まれていないので文字列ではなく、数字でもありません。

それでは、一体これは何でしょう?

Boolean(真偽値)型

文字列と数値には無限のとり得る値がありますが、 Boolean(真偽値)はtrue(真)またはfalse(偽)のいずれかの値にしかなりません。

今、alert()関数と3つの項目をもつ配列を一つの行に含めているの、コードが読みにくくなっています。

配列を独自の行に移動して２つに分割してはどうしょうか。

Variables(変数) コンセプト

配列を変数に移動することができます。

変数は、特定の値を格納する入れ物です。それは名前を持っています(それを特定して再利用することができます)。そして値をもっています。(後で値を更新することができます)。

var my_things = [2 + 5, 'samurai', true];

my_things(僕の物) は変数の名前です。
[2 + 5, 'samurai', true] は変数の値です。

分解すると次のとおりです。

キーワード varを入力しました

var my_things = [2 + 5, 'samurai', true];

変数の名前を入力しました

var my_things = [2 + 5, 'samurai', true];

代入演算子=を入力しました。

var my_things = [2 + 5, 'samurai', true];

配列を入力しました。

var my_things = [2 + 5, 'samurai', true];

文を終了するためにセミコロンを入力しました。

var my_things = [2 + 5, 'samurai', true];

これは my_things が [2 + 5, 'samurai', true]と同じであることを意味します。

alertを関数を書き直しましょう。

今や2つの文があるので、あるものがどこで終わり、次のものが始まるかを知るためにセミコロン;で区切る必要があります

var my_things = [2 + 5, 'samurai', true];
alert(my_things);

クリップボードにコピー

スニペットを実行

ワンダフル!

配列に変数を格納することで、コードを読みやすくしました。

この変数にはいくつかの項目の配列(リスト)が含まれていますが、配列(リスト)の1つの項目のみを扱うこともできます。

配列の特定の項目にアクセスするには、まず配列内のインデックス(位置)を知る必要があります。このインデックスは大括弧で囲む必要があります。

どの項目が表示されるのか推測できますか?

var my_things = [2 + 5, 'samurai', true];
alert(my_things[1]);

クリップボードにコピー

スニペットを実行

推測しました!

2番目のアイテムが現れました! プログラミングでは、インデックスは0から始まります。

配列の名前を入力しました

my_things[1]

開き角括弧を入力しました

my_things[1]

アクセスしたいアイテムのインデックスをタイプしました

my_things[1]

閉じ角括弧を入力しました

my_things[1]

変数もやはりオブジェクトです! つまり、変数にもプロパティとメソッドがあります。

たとえば、my_thingsにはlengthというプロパティがあります。

var my_things = [2 + 5, 'samurai', true];
alert(my_things.length);

クリップボードにコピー

スニペットを実行

正解です!

現在、配列には3つの項目があります。 my_things項目を追加または削除すると、length値がそれに応じて変更されます。

可読性とプロパティを持っていることは便利ですが、変数の主なポイントは編集可能であることです。後で値を変更することができます！

var my_things = [2 + 5, 'samurai', true];
alert(my_things);
my_things = [2 + 5, 'samurai', true, 'LOVE'];
alert(my_things);

クリップボードにコピー

スニペットを実行

やったー!

警告(alert)ボックスは2つ表示されましたが、値は異なります。これは、最初の呼び出しと2番目の呼び出しの間で、 my_thingsの値が更新されたためですmy_thingsの4番目の項目として文字列'LOVE'が追加されました。

2回目にmy_thingsに値を割り当てる時には、varキーワードを使用していないことに注意してください。これは、上記の2行で定義されたmy_things変数を編集しているためです。

新しい変数を作成するときのみ、キーワードvarを使用します。 新しい変数を編集するときは使用しません。

私はあなたに変数がメソッドを持っていると言ったことを覚えていますか?(オブジェクトなので)配列の値を編集する別の方法は、 push()メソッドを使用する方法です。

var my_things = [2 + 5, 'samurai', true];
alert(my_things);
my_things.push('The Button');
alert(my_things);

クリップボードにコピー

スニペットを実行

魅力的です!

my_things配列は4項目に変わりました。

push()メソッドは配列を変更しましたが、他のものは単純に値を返します。

var my_things = [2 + 5, 'samurai', true];
alert(my_things.includes('ninja'));

クリップボードにコピー

スニペットを実行

ここには ninja はいないようです!

includes()メソッドは文字列'ninja'が配列内に存在するかどうかを調べます。今は存在しなかったので、メソッドはfalse という Boolean(真偽値)を返しました。

実際、Boolean(真偽値)を扱うときは、キーワードtrueまたはfalseを使うことは非常にまれです。通常、booleanは関数呼び出し(includes())や比較の結果として存在します。

以下は より大きい 比較の例です。

alert(window.innerWidth > 400)

クリップボードにコピー

スニペットを実行

いよいよ素晴らしい!

これは、ブラウザのウィンドウが400ピクセルより広いことはないという結果を示します。

数値と比較したい最初の項目 を入力しました。

window.innerWidth > 400

"より大きい" 演算子を入力しました。

window.innerWidth > 400

2番目の項目 、数値を入力しました

window.innerWidth > 400

+と*と同じように、 >はJavaScript 演算子です。

"より大きい"演算子>で比較すると、Boolean(真偽)値が得られます。

比較結果には2つの結果(trueまたはfalse) しかないので、コードが何か決定を下す必要がある場合に便利です…

Conditional statement(条件文)コンセプト

Conditional statement(条件文)は、プログラミングにおける最も重要な概念の1つです。特定の条件が満たされている場合にのみ 、コードで特定のコマンドを実行することができます。これらの条件は、例えば、

ユーザーの入力（正しいパスワードが入力されているか?）
現在の状態(今は昼か夜か?)
特定の要素の値(この人物は18歳以上か?）

今のところ、あなたが私のドメインにいた場合にのみアラートボックスを起動しましょう!

if (window.location.hostname == 'hiroshiokada.github.io') {
  alert('Welcome on my domain! 🤗')
}

クリップボードにコピー

スニペットを実行

単にこのコードをコピーして貼り付けるのではなく、このコードを入力ししたい場合は(単純にEnterを押すと実行してしまうので2行目を入れる前に) Shift + Enterを押してコンソールに改行を追加してください !

実にすごいです!

ここでは別の比較を行っていますが、代わりに等しい 演算子==使用しています。

キーワード if を入力した

if (window.location.hostname == 'hiroshiokada.github.io') {

開き括弧を入力して括弧を開きました

if (window.location.hostname == 'hiroshiokada.github.io')) {

比較演算子をタイプししました

if (window.location.hostname == 'hiroshiokada.github.io') {

閉じ括弧を入力してして括弧を閉じました

if (window.location.hostname == 'hiroshiokada.github.io') {

開き波括弧を入力して波括弧を開きました

if (window.location.hostname == 'hiroshiokada.github.io') {

直前の条件が真である場合にのみ実行されるコードブロックを入力しました

alert('Welcome on my domain! 🤗')

閉じ波括弧を入力して波括弧を閉じました

}

アラートボックスが表示されたので、 hostnameが実際に 'hiroshiokada.github.io'に等しいことを意味します。

比較がtrue返すケースを処理しました。

反対の場合を処理するために、ホスト名がhiroshiokada.github.ioでない場合、非等価演算子!=を使用できます。

if (window.location.hostname != 'hiroshiokada.github.io') {
  alert('Please come back soon! 😉')
}

このスニペット(コードの断片)を試してみると、何もトリガーしないことがわかります! (このチュートリアルが別のドメインにコピーされていない限り、😆)

両方のケースを同時に処理したい場合はどうすればよいでしょうか? if文を2行書くことができます。しかし、一方のステートメントは他方のステートメントとは まったく反対であるため、それらをelseステートメントと組み合わせることができます。

if (window.location.hostname == 'hiroshiokada.github.io') {
  alert('Welcome on my domain! 🤗')
} else {
  alert('Please come back soon! 😉')
}

クリップボードにコピー

スニペットを実行

いい調子です!

この条件文の一式で、次のことを確認できます。

2つのアラートのうちの1つだけがトリガされます。
すべてのケース(場合)をカバーしているので、2つのアラートの少なくとも一方が、トリガされます

残りのすべてのケース(場合)をカバーするにはelseが便利です。しかし、時には2つ以上のケース(場合)を処理したい場合もあります。

else ifを使用して、中間の文を追加することにより、複数のケース(場合)を処理することができます。

if (window.innerWidth > 2000) {
  alert('Big screen! 🔥')
} else if (window.innerWidth < 600) {
  alert('Probably a mobile phone 📱')
} else {
  alert('Decent size 👍')
}

クリップボードにコピー

スニペットを実行

やりました!

1つの比較がtrueを返すとすぐに、それがトリガーされ、後続のすべてのステートメントは無視されます。だからこそ、警告箱が1つしか現れなかったのです！

条件文は、 キーワード ifとelseを使用し、その後に括弧というパターンを使用します。

キーワード/括弧という組み合わせパターンは、別の必須のプログラミングコンセプトにも現れます…

Loop(ループ)コンセプト

コードブロックを一定回数実行する場合は、JavaScript のループを使用できます。

あなたはこのスニペット(コードの断片)がいくつの警告ボックスをトリガーするかを当てられますか?

for (var i = 0; i < 3; i++) {
  alert(i);
}

クリップボードにコピー

スニペットを実行

そのとおりです!

正確に3つの警告ボックスが表示されました。起こったことを分解して見ましょう。

var i = 0は初期状態です
Before the loop even starts, the variable i is assigned a value of zero 0.
i < 3は条件式です。
ループの繰り返しごとに、この比較をチェックします。
それがtrueであれば、ブロック内のコードを実行します。
false場合、ループを終了します。
i++はインクリメント(増やす)式です。
コードのブロックが実行されている場合は、この式が実行されます。
この場合、 iの値は1だけインクリメント(増や)されます。

これを実装した方法は次のとおりです。

キーワード forタイプしました