14 分で JavaScript 入門

コンソールツール

このブラウザにはデベロッパーコンソールという、ウェブページで直接 JavaScript を実行できるツールがついています。

ちゃんと動作するか確かめてみましょう！

コンソール上に、次の内容をタイプ (するかペースト) して、Enter を押して下さい。

やった！

いま alert() という、全てのブラウザに実装されている JavaScript の関数を実行しました。

でも具体的には何をしたのでしょうか？

関数基本概念

先ほど alert() という関数を、'Hello World!'という引数で呼び出しました。

基本的には 4 つのことをした事になります。

関数には引数がない時もありますし、複数の引数がある時もあります。ほとんどの引数は必須ですが、必須ではない事もあります。

このケースでは、alert() は一つだけ引数を必要とします。

ではこれは、どんな型の引数なのでしょう？

文字列 (String) 型

文字列とは連続した文字の集まりで、テキストを扱いたい時に使います。今回の場合、連続した 12 個の文字、Hello World! です。これは、小文字、大文字、スペース、エクスクラメーションマークを含んでいます。

どこから文字列が始まって、そして終わるのかを定義するためには、クォートでそれを囲む必要があります (シングルクォート ' もしくはダブルクォート " のどちらでも構いません)。

'Hello World!' という文字列を定義するために：

1. シングルクォートをタイプしました。
2. 12 個の文字をタイプしました。
3. そしたもう一つのシングルクォートをタイプしました。

文字列の代わりに数字を扱いたい時はどうしたら良いでしょう？

数値 (Number) 型

他のプログラミング言語と同様に、JavaScript は数値を扱う事ことが出来ます。

これらの数値は、大きくも小さくもなりますし、少数点があってもなくても良いです。また数値計算演算子によって計算する事が出来ます。

コンソール上に、次の内容をタイプ (するかペースト) して下さい。

完璧！

いくつかの事に気づいたでしょうか？

• + と * という演算子を使っています。(訳注：* は掛け算を意味します。)
• 数学的な計算順序は尊重されます。先に 5 * 3 (乗算) が計算されてから、9 + 15 (加算) が計算されます。
• * の周りのスペースは出力に影響しません。それらは私たち人間がコードを読みやすくするためだけにあります。

数値は様々な場所にあります。

ブラウザの大きさ情報

特にブラウザ内では、数値は至る所にあります！

例えば、今のブラウザのウィンドウは JavaScript で取得出来る特定の幅を持っています。

次の内容をタイプして下さい。

alert(window.innerWidth)

ワンダフル！

これは、あなたのブラウザウウィンドウの幅が 1680 ピクセルという事です。

想像通り、window.innerHeight も存在します。(訳注：width で幅が取得出来るなら、height で高さが取得出来るのは道理ですね。) また、現在のスクロール位置を取得する window.scrollY も存在します。

ただ、window とは正確には何なのでしょうか？

オブジェクト (Object)型

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

innerWidth は、window オブジェクトのプロパティです。
この window オブジェクトの中に存在する innerWidth というプロパティにアクセスするために、ドット . を使いました。

JavaScript オブジェクトは基本的な型で、他のものを含んでいます。

例えば、windowは以下のようなものを含んでいます。

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

window がオブジェクトで、それが他のオブジェクト location を含んでいるという事は、JavaScript オブジェクトはちょっと面白い事が出来るという事です。(訳注：原文が英文法に強く依存するためかなりの意訳)

入れ子情報

あるオブジェクトのプロパティに、他のオブジェクトを持ったり、時にはそのオブジェクト自身をプロパティにする事も出来ます (インセプション！)。(訳注：ここではレオナルド・ディカプリオ主演の映画インセプションを指していると思われます。夢の階層が入れ子になった SF 映画で訳者も大好きです。)

window.location はオブジェクトなので、それ自身もまたプロパティを持っています。それらのプロパティにアクセスするには、単にまた別のドット . を加え、そこにプロパティ名を続けます。

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

alert(window.location.href)

すごい！

このウェブページの URL 全体が表示されました。これはつまり…

• window がオブジェクトで、
• location がオブジェクトで、
• href が文字列だからです。

どのくらい深くオブジェクトが入れ子に出来るかには制限はありません。また一つのオブジェクトが持つ事が出来るプロパティの数にも制限はありません。

これまで見てきたように、オブジェクトのプロパティはあらゆる型を持つ事が出来ます。文字列、数値、オブジェクト、あるいは関数にもなりえます。関数のケースは特別にこう呼ばれます。

メソッド情報

あるオブジェクトのプロパティが関数のとき、これをメソッドと呼びます。

実際、始めに使った alert() という関数は、window オブジェクトのメソッドなのです！

window.alert('マジで!?')

マジだよ！

window はブラウザ上におけるトップレベルオブジェクトなので、その全てのプロパティとメソッドには直接アクセスする事が出来ます。

それが、location.href とタイプする事が window.location.href とタイプする事と同じ意味になる理由です。alert() が window.alert() と同等の意味なるのも、そう、同じ理由です。

オブジェクトは一つの名前の元に複数のプロパティをまとめたり、また、データの階層を表現するのに便利です。これは、太い枝から徐々に細い枝に枝分かれしていく木のようなデータの構造です。

では単に、何かのリストが欲しいだけの時はどうでしょう？

配列 (Array)型

JavaScript の配列は型の一種で、複数の値を含む事が出来て、あたかも順序を持ったリストのように振る舞います。

alert() 関数に、3 つの文字列からなる配列を渡してみましょう。

alert(['やあ', '元気', 'かい？'])

もちろん！

alert 関数を呼び出す文法 alert(parameter) は、すでに知っていますね？

この例では、パラメータは以下のように定義された 3 つの要素を持つ配列です。

配列はどんな種類の型でも要素に持つ事が出来ます。文字列、数値、オブジェクト、他の配列、さらにもっと…

このスニペット(訳注：少量のコードの断片の事をプログラミングの文脈ではよくこう呼びます。この先でも出てくる言葉です。)を試してみましょう。

alert([2 + 5, 'サムライ', true])

正解！

一つ目の要素 2 + 5 は数値で、二つ目の要素 'サムライ' は文字列です。

三つ目のパラメータはどうでしょう？ これはクォート囲まれていないので文字列ではありません、また数値でもありません。

では何なのでしょう？

真偽値 (Boolean)型

文字列と数字は無限の種類の値を取る事が出来ますが、真偽値は true か falseのいずれかにしかなりません。

alert() と 3 要素の配列が一行に収まってしまっているので、コードが読みにくくなっています。

では、配列をそれだけの行に移動して、2 つに分けてみたらどうでしょう？

変数基本概念

この配列は一つの変数に移動することが出来ます。

変数はある値を保持することが出来る入れ物です。変数は名前を持ち値を持ちます。名前があるのでそれを特定し再利用する事ができ、値があるのでそれを後で更新する事が出来ます。

var my_things = [2 + 5, 'サムライ', true];

• my_things は配列の名前です。
• [2 + 5, 'サムライ', true] は配列の値です。

分解するとこんな感じです。

これは、my_things と [2 + 5, 'サムライ', true] が等価な事を表します。

さあ、alert 関数を復活させる時です。

いまここには二つの文があるので、どこで一つ目の文が終わって二つ目の文が始まるのかを示すために、それらをセミコロン ; で分割する必要があります。

var my_things = [2 + 5, 'サムライ', true];
alert(my_things);

素晴らしい！

配列を変数に格納する事によって、コードをより読みやすくする事が出来ました。

この変数は複数の要素を持ったリストを表していますが、リストの中の一つだけの値を扱いたい事もあるでしょう。

配列の中の特定の要素にアクセスするためには、まずその配列の中のインデックス (あるいは位置) を知らなければなりません。そして、そのインデックスを角括弧で囲う必要があります。

どの要素が表示されるか予想出来ますか？

var my_things = [2 + 5, 'サムライ', true];
alert(my_things[1]);

当たってました？

二番目の要素が表示されましたね！プログラミングでは、インデックスは 0 から始まるのです。

配列も実はオブジェクトです！という事はつまり、配列もまたプロパティとメソッドを持つという事です。(訳注：原文は 「variables (＝変数) もオブジェクト」と書かれていますが、配列の誤記で間違いないと思うので訂正しています。)

例えは、my_things は length というプロパティを持っています。(訳注：length は長さという意味です。)

var my_things = [2 + 5, 'サムライ', true];
alert(my_things.length);

その通り！

この配列は 3 つの要素を持っています。もし my_things に要素を追加したり削除したりしたら、この length の値は適切に変化します。

変数に名前があって読みやすい事やプロパティが持てる事は便利ですが、変数の最も重要なポイントはそれが編集可能な事です。変数の値は後から変更する事が出来ます！

var my_things = [2 + 5, 'サムライ', true];
alert(my_things);
my_things = [2 + 5, 'サムライ', true, 'LOVE'];
alert(my_things);

やった！

二つのアラートボックスが表示されましたが、違う値でしたね！なぜなら最初の呼び出しと二回目の呼び出しの間に、my_things が更新されたからです。4 つめの要素、文字列の 'LOVE' が追加されました。

二回目に my_things に値を割り当てた時に、キーワード var を使わなかった事に留意して下さい。これは、2 行前に定義した変数 my_things を編集していたからです。

キーワード var は新しい変数を作っている時に使います。編集している時ではありません。

配列もオブジェクトの一種なのでメソッドを持っているという話を覚えていますか？配列を編集するまた別の方法は、push() メソッドを使う事です。

var my_things = [2 + 5, 'サムライ', true];
alert(my_things);
my_things.push('ボタン');
alert(my_things);

ファンタスティック！

配列 my_things は 4 要素になりました。

push() メソッドが配列を編集する一方、他のものはシンプルに値を返します。

var my_things = [2 + 5, 'サムライ', true];
alert(my_things.includes('ニンジャ'));

ここにニンジャはいません！

includes() メソッドは、文字列 'ニンジャ' が配列内に存在するかを確かめていました。そこに存在していなかったのでこのメソッドは、真偽値の false を返したのです。

実際のところ、真偽値を扱う時、キーワードの true や false をタイプする事はあまりありません。たいていの場合真偽値は、includes() のような関数の呼び出しや比較の結果として現れます。

これは「〜より大きい」という比較です。

alert(window.innerWidth > 400)

また素晴らしい！

これはブラウザウィンドウが 400 ピクセルより広い広くないという事です。

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

"より大きい" 演算子 > で比較をすると、真偽値の値が結果として得られます。

比較の結果は2 種類 (true か false) に限られるので、これはコードで何か判断をしなければならない時に便利です。

条件文 基本概念

条件文はプログラミングにおける最も重要な概念の一つです。これにより特定の条件に合致した時だけ処理を実行する事が出来ます。条件文は例えば次のようなものに基づきます。

• ユーザからの入力 (入力されたパスワードは正しいか？)
• 現在の状態 (昼か夜か？)
• ある要素の値 (この人は 18 歳より老けている？)

とりあえず、あなたが js-in-14-mins.otchy.net ドメイン上でこれを見ているかどうかで、アラートボックスを表示してみましょう。

if (window.location.hostname == 'js-in-14-mins.otchy.net') {
  alert('私のドメインにようこそ！🤗')
}

確かに等しい！

ここでは代わりに "等しい" という演算子 ==を使ったまた別の比較をしています。

アラートボックスがちゃんと表示されたという事は、hostname が実際に 'js-in-14-mins.otchy.net' と等しいという事です！

ここでは比較の結果が true になるケースを扱いました。

反対のケース、hostname が 'js-in-14-mins.otchy.net'では無い時、を扱うためには、"等しくない" という演算子 != を使います。

if (window.location.hostname != 'js-in-14-mins.otchy.net') {
  alert('すぐに戻ってきてね！😉')
}

このスニペットを試してみると、一切何も起きない事が分かると思います (このチュートリアルが他のドメインにコピーされていない限り😆)。

両方のケースを同時に扱いたい時はどうしたらいいのでしょう？二つの if 文を並べて書く事は出来ます。しかし、一つの条件がもう一方の真逆だった場合、それらを else 文で組み合わせる事が出来ます。

if (window.location.hostname == 'js-in-14-mins.otchy.net') {
  alert('私のドメインにようこそ！🤗')
} else {
  alert('すぐに戻ってきてね！😉')
}

まだ等しい！

この条件の設定で、次のことが確認出来ます。

• 二つのアラートのうち一つだけが表示されますが、両方表示される事はありません。
• 全てのケースをカバーしているので、二つのうち少なくとも一つが表されます。

else は全ての残りのケースをカバーするのに便利なので、二つより多くのケースを扱う事も出来ます。

else if を使う事で中間の状態を追加し、複数のケースを扱えます。

if (window.innerWidth > 2000) {
  alert('大きな画面！🔥')
} else if (window.innerWidth < 600) {
  alert('たぶんスマホ 📱')
} else {
  alert('ちょうどいいサイズ 👍')
}

やったね！

一つの比較が true を返すとすぐに、それが実行されます。そして以降の文は全て無視されます。だからアラートボックスが一つだけ表示されたのです！

条件文はキーワードの if と else を使用し、それに丸括弧のセットが続きます。

このキーワードと丸括弧の組合せのパターンは、また別の本質的なプログラミングの概念でも出てきます。

ループ 基本概念

コードブロックを特定の回数実行したい時には、JavaScript のループを使う事が出来ます。

このスニペットが何回アラートボックスを表示するか予想出来ますか？

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

3 回です！

ちょうど 3 つのアラートボックスが表示されましたね！では、何が起こったのか分析してみましょう。

• var i = 0 は初期状態です。
  ループの処理が始まる前に、変数 i に 0 がセットされます。
• i < 3 は比較条件です。
  ループの一回ごとの繰り返しの度に、この条件がチェックされます。
  もしこれが true なら、コードブロックが実行されます。
  もしこれが false なら、ループから抜けます。
  
• i++ は増分処理です。
  もしコードブロックが実行されたなら、この処理も実行されます。
  このケースの場合、i の値は 1 増えます。

実装した内容は次の通りです。

ループのそれぞれの繰り返しを分析してみましょう。

このループで何かを繰り返して N 回行う事が出来ます。これこそコンピューターに他なりません！

これまでに学んできた変数の型の中で、とりわけ繰り返す事に価値があるものがあります。

配列のループツール

配列はループに使う完璧な例です。なぜなら、配列のそれぞれの要素に対して同じ処理を繰り返したい事が良くあるからです。

配列のそれぞれの要素に対して、アラートボックスを表示したいとしましょう。配列の要素の数だけ alert() を書く事は出来ますが (😰)、この方法は面倒だし効率的ではありません！これだと間違いを起こしやすいですし、大きな配列に広げるのは大変です。

プログラミング言語は私たちの仕事を楽にするためにあるのですから、もっと良い方法で解決しましょう。すでにいくつかの事を知っていますね。

• 配列の長さを知る方法
• インデックスを使って配列の要素にアクセスする方法
• 都合良く 1 ずつ増えていく変数 i にアクセスする方法

これらの情報を組み合わせる事で、下記のようなスニペットを考え出す事が出来ます。

var my_things = [2 + 5, 'サムライ', true];
for (var i = 0; i < my_things.length; i++) {
  alert(my_things[i]);
}

続けざまに！

ひとつひとつの配列の要素がそれぞれのアラートボックスの中に表示されました。

ループで配列のそれぞれの要素を繰り返している間、まだ for ブロックを手動で作らないといけないですし、ループの繰り返しの度にただ数値が増えるだけの新たな変数 i も作らないといけません。

何を考えているか分かりますよ。"より良い方法が必ずあるはずだ！"

forEach ループ ツール

配列は forEach() と呼ばれるメソッドをもっています。これで配列のそれぞれの (訳注：それぞれの＝"for each") 要素に処理を行う事が出来ます。

var my_things = [2 + 5, 'サムライ', true];
my_things.forEach(function(item) {
  alert(item);
});

良くなった！

いくつかの改善点

• 変数 i が含まれません。
• 配列の length にアクセスする必要がありません。
• 要素にアクセスするために、my_thing[i] の形でインデックスを使う必要がありません。

alert() 関数の文法は覚えていますか？ alert(parameter) という形でした。

注意深く見ると、forEach() も全く同じ文法である事が分かります！これは forEach(parameter) という形で、ただ引数が 3 行を占める関数となっています。

今のところ、いくつかの関数あるいはメソッドを使いました。

• alert() 関数 (あるいは window のメソッド)
• 配列の push() メソッド
• 配列の includes() メソッド
• 配列の forEach() メソッド

どうやって関数を呼び出すかは分かりましたが、ではどうやって実際にそれを作るのでしょうか？

カスタム関数を作る 情報

プログラミング言語の力はあなたの目的に沿ったあなた自身の関数を作る能力にあります。

if/else と for のために使った、キーワードと丸括弧の組合せを覚えていますか？さあ、当ててみて。ほとんど同じパターンです！

「ほとんど」同じといったのは、関数には名前が必要という唯一の違いがあるからです。

name という名前の一つのパラメータを持つ、greet() という関数を作ってみましょう。そしてすぐにそれを呼び出します。

function greet(name) {
  var message = 'やあ、' + name;
  alert(message);
}
greet('アレックス');

ご挨拶！

初めての関数を作りました！これは単純なものですが、多くの事を学べます。

いくつかのポイント。

• 関数の名前は greet (訳注：「挨拶する」という意味の動詞)です。
• name という名前のパラメータ：これは値の保存先として振る舞うので、変数と似ています。
• 'やあ、' + name という値から、message という名前の変数 (文字列) を作ります。
• この加算記号 + は、二つの文字列を連結して、一つの長い文字列にします。
• パラメータとして message という変数を使い、alert() 関数を呼び出します。
• 関数を作った後、'アレックス'というパラメータでそれを呼び出します。

これをステップごとに分解すると…

最後に greet() 関数を呼び出さない限り、何も起きません！なぜなら alert() の呼び出しは greet() の中にあって、親の関数に当たる greet() が呼び出されない限りは実行されないからです！

基本的に greet() を作る事でブラウザに、「やあ！この新しい関数を作ったよ。だからもしいつかこれを呼び出したら、何であれ中にある事を実行してくれよな！」とだけ伝えている事になります。

それが、greet() を最後に呼び出した時に、ブラウザがその内容 ─ alert() を呼び出す事 ─ を実行した理由です。

関数は 2 ステップのプロセスからなる事を理解することが大事です。まず作成して、後で呼び出す。

実際の所、ずっと使っている alert() 関数は、あらかじめ作られている関数なのです。ブラウザ上のどこかにただ存在しています。

ともかく、これまでにたくさんの事を 14 分で学んできました！(訳注：正直なところ、初見で 14 分は無理だと思います。)
では、次は何でしょう？

次のステップ やり切った！

JavaScript を学ぶ

ここまでで、かろうじて基礎を終えたところです。でも心配しないで！ネット上には大量の教材があります！

以下は私がお勧めするいくつかの無料の教材です。

• Eloquent JavaScript
• freeCodeCamp
• The Modern JavaScript Tutorial
• Mozilla Developer Network
• You Don't Know JS

もし動画の教材の方がよければ、Udemy courses をチェックしてみて下さい。

もし急いでいるなら、より短いコースもあります！

HTML と CSS を学ぶ

JavaScript はウェブページを成しているもののうち、三分の一でしかありません！HTML と CSS の事も知る必要があります。

幸運なことに、あなたのために私が作った二つの無料の資料があるので、それら二つの言語が提供している全ての事を学べます！

私の CSS フレームワークを学ぶ

私はこのページを Bulma ─ Flexbox を元にした私のオープンソース CSS フレームワーク ─ でデザインしました。要チェック！

私の本を読む

私は「CSS in 44 minutes」という、個人のウェブページをまっさらな所から HTML5 と CSS3 で作る方法を 44 ページ で解説した PDF の本を書きました。

おまけにこの本には短めのJavaScript の章があり、関数、条件文、オブジェクト、文字列、のみならずどのように CSS と連携させるかについても解説しています。

さあ今や、もう一つしかやる事が残っていません…

シェアしてね！😍

ここまで読んでくれてありがとう！

Made by @jgthms, translated by Otchy