初心者でもできるJavaScript入門 – はじめての学習まとめ

リッチなWebサイトを作る以外にも幅広く活躍しているJavaScriptをはじめよう！

JavaScriptとは

主にWeb制作・Webデザイン・Webアプリ開発で使われています。

ブラウザに実行環境が実装されているので、動的なWebサイトやリッチなWebアプリで高度なUIの開発に使われています。

そして、サーバー側で動作する仕組み（Node.jsなど）にも用いられ、より軽量で高速なWebサービス開発にも使われています。

Web環境以外にもマイクロソフト製品、アドビ製品やApple製品の機能拡張するために用いられたりもしています。普及率が非常に高く、Web関係の開発ではほぼ必須で登場します。

また、GitHub製のAtom(アトム)というテキストエディタはJavaScriptとNode.jsの組み合わせで作れらています。

つまりJavaScriptを習得すれば様々な環境で役に立つでしょう。

JavaScriptの動作環境

ここではWebブラウザで動作するJavaScriptについて説明します。

JavaScriptはWebブラウザに実行環境が実装されているので、特別な環境を作成することなく動作確認が行えます。

プログラミングするための専用ツールはなく、エディターを使ってプログラミングします。

プログラムはhtmlファイルやjsファイルに記述しても動作確認できますが、動作確認サイトを使えば、サイト内に直接プログラムを記述して動作確認できます。

これらのサイトはサインアップしなくても利用できるので、ちょっとした動作確認をするときにはとても便利です。

・CodePen

CodePenは主にHTML, CSS, JavaScriptが使用できます。

それ以外はMarkdownやSCSSなどのメタ言語やCoffeeScriptなどのスクリプトが使えます。

英語サイトですが、画面は見やすく使いやすいです。

・codingground

ほぼ全ての主要言語が使用できます。英語サイトですが、こちらも画面が大きく見やすいです。

スマホなどのデバイスごとの表示を切り替えることができます。

・JSFiddle

JSFiddleもCodePenと同じく主にHTML, CSS, JavaScriptが使用できます。英語サイトです。

・ideone

ほぼ全ての主要言語が使用できます。英語サイトです。

codinggroundのようなターミナルは表示されません。

記述方法と特徴

プログラムの記述はHTML内に宣言して実行できるようにします。

これはJavaScriptが主にWebページ(HTML)に、より高度な動作や振る舞いを持たせるために用いられているからです。

プログラムを実行するには、HTML内で<script>タグでコードを括ります。

そのページが読み込まれる際にJavaScriptで記述したプログラムが実行されます。

以下はブラウザの画面に「Hello World」を表示する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのJavaScript</title>
</head>
<body>
  <h1>はじめてのJavaScript</h1>
  <script>
    document.body.innerHTML = 'Hello World';
  </script>
</body>
</html>

JavaScriptの記述を別ファイルに保存して実行することもできます。

以下はindex.htmlとsample.jsファイルに分けた場合です。

[index.html]
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのJavaScript</title>
</head>
<body>
  <h1>はじめてのJavaScript</h1>
  <script  src="sample.js"></script>
</body>
</html>

[sample.js]
document.body.innerHTML = 'Hello World';

サンプルでは<script>タグを</body>の直前に配置しました。

JavaScriptの処理内容がHTMLに影響する場合（JavaScriptを使ってページ表示内容を変更など）は、ブラウザがHTMLを読み込む最後にJavaScriptを実行するのがしばしば最適な方法だと言われています。

それは、HTMLを読み込む前にJavaScriptを読み込むと処理によっては機能しない可能性があるためです。

サンプルの処理はどこに置いても実行されますが、これは参考に知っておくといいでしょう。

複雑な処理を書くようになってうまく動作しないときは、scriptの配置を変えてみても良いかもしれません。

JavaScriptのプログラム文は変数の宣言方法以外に他のプログラムのものとは大きな違いは特にありません。

・変数を宣言する時は変数名の前に「var」「let」「const」を記述します。

var num1;
let num2;
const num3;

・関数、制御文は{}で囲みます。{}で囲まれた部分はブロックと呼ばれます。

function () {
  処理
}
let foo = () => {
  処理
};
if (num == 10) {
  処理
}
while (num <= 10) {
  処理
}

・コマンド文は;で終わります。

var num = 10;
console.log(num);

JavaScriptプログラム

動作確認サイトを使っている場合はそこに直接プログラムを書いて動作確認をします。

Webブラウザでファイルを読み込んで動作させる場合は、HTMLファイルもしくはJSファイルをエディタで作成してブラウザで表示します。

変数

先程も少し記述していますが、JavaScriptで変数を使う場合は以下の宣言をします。

var num;

変数に型はありますが、変数に厳密な型宣言はなく全て「var」で宣言された変数を使って処理を行います。

変数に代入する値によって型がきまります。

// 整数の変数
var num = 10;
// 文字列の変数
var aisatsu = "Hello World";

JavaScriptはダブルクォーテーション、シングルクォーテーションのどちらでも文字列を表現できます。

この２つの表現方法に特に違いはありません。

var aisatsu = 'Hello World';

そして、JavaScriptでは数値も文字列も混在して処理が可能です。

var aisatsu = "Hello World";
var num = 190+6;
var title = aisatsu + "," + num + " countries";
console.log(title);

この場合ブラウザのコンソールに「Hello World,196 countries」と表示されます。

ブラウザのコンソール画面はブラウザによって表示方法が異なります。例えば以下はChromeのコンソール表示です。

ブラウザ画面に以下のように表示します。

このようにJavaScriptは文字列と数値を混在して扱うことができます。

便利な反面、思った動作にならないようなコーディングをしてしまう場合があるので気をつけましょう。

変数には以下の型が利用できます。

真偽値：trueもしくはfalse
null：null値としての空データ
undefined：未定義の値
数値：10や3.14などの整数/浮動小数点数
文字列：”Hello World”など
配列：[“Tokyo”, “Osaka”, “Nagoya”]など
オブジェクト：データとデータをやり取りするためのメソッドが入ったデータ構造（*オブジェクトについては別途記載します）

演算子

変数に格納されている値を計算したり、期待通りの値かどうかを評価したり、または文字列を連結したり、関数の結果を評価するときに使われます。

加減算	“+”, “-“	乗算	“*”	除算	“/”
インクリメント	“++”	デクリメント	“–“	剰余算	“%”
等号	“==”	不等号	“!=”	比較	“>=”, “<=”, “>”, “<“
論理積	“&&”	論理和	“\|\|”	否定	“!”

用例と説明

【加減算、乗算、除算】

足し算”+”、引き算”-“、掛け算”*”、割り算”/”を行うときの演算子です。

a = 4 + 3; // aの結果は7です。 
b = "Hello" + "World"; // bの結果はHello Worldです。

【剰余算】

割り算したときの余りを求める演算子”%”です。

a = 7 % 3; // aの結果は1(ture)です。 
b = i % 3; // この例は、bの結果が0の場合はiは3で割り切れる値なので、iは3の倍数であることがわかります。

【インクリメント、デクリメント】

変数の値を1増加”++”したり、1減算”–“する演算子です。

変数の前に記述するのと後に記述するので意味が変わります。

a = ++i; // aの結果はiを1増加した値です。a = (i += 1);と同じです。 
a = i++; // aの結果はiと同じです。aにiを代入したあとでiを1増加します。a = i; i = i + 1;と同じです。

【等号、不等号、比較】

値を比較するときの演算子です。

同じかどうか比較する場合は”==”、同じではないことを比較する場合は”!=”、大きさを比較する場合は”>=”, “<=”, “>”, “<“を使います。条件文とともに使います。

if (x == y) // xとyが等しければ実行します。 
if (x != y) // xとyが等しくなければ実行します。
if (x >= y) // xがy以上であれば実行します。
if (x < y) {
  // xがyより小さいときに"Hello World"を表示します。
  console.log("Hello World");
}

比較の判定は「真偽値」で行います。

つまり「x == y」が成立するときは「真(true)」、そうでなければ「偽(false)」という値となります。

これはどのプログラミング言語でも必ず登場するので知っておきましょう。

関数の戻り値として型定義されていることも多く、プログラミング言語によっては「boolean型」として明確に型定義をします。

例えば、isActive(引数)といった関数があるとして、この関数では(引数)で渡されたものが有効かどうか？

を判定する処理を行い、戻り値として真(true)か偽(false)を返します。

関数ではこうやって利用されることが多いです。

等号と不等号は、”===”や”!==”という記述方法を提供している場合もあります。

これは、比較対象の値や変数をより厳密に比較する場合に使用する演算子です。

JavaScriptはif (a == 1)とif (a == ‘1’)はどちらも同じ判定となります。

ですが、if (a === 1)とif (a === ‘1’)は判定が異なります。

if (a === 1)の場合はaが数値の1ならば実行します。

if (a === ‘1’)はaが文字列の’1’ならば実行します。

「==」「===」の違いを確認できる比較表はこちらを参考にしてください。

【論理積、論理和、否定】

これは条件をより簡潔に表現するのに使う演算子です。

なので条件文とともに使われます。

「〜かつ〜」であることを判定する場合は論理積” && “、「〜もしくは〜」であることを判定する場合は論理和”||”、「〜でない」ことを判定する場合は否定”!”を使います。

if ((x == 7) && (y == 3)) // xが7で、かつyが3であるときに実行します。
if ((x != 5) || (y == 10)) // xが5でないか、もしくはyが10のときに実行します。
if (!func()) // func処理の結果がfalse（偽）の場合に実行します。

true（真）とfalse（偽）は真偽値といって、ここでは処理結果が”1″ならばtrue（真）、”0″ならばfalse（偽）と理解しておくといいでしょう。

上記の例の場合だと、「func処理結果が”0″ならば実行する」ということになります。

「func処理結果が”1″である」ことを評価するには、if (func())と記述します。

つまり、否定”!”は真偽値を反転させて評価します。

配列

配列は「[]」を使って値を代入します。以下の例では３つの要素を持つ配列を作成します。

var towns = ["Tokyo", "Osaka", "Nagoya"];

配列から値を取り出すには以下のようにインデックスを指定します。

var east = towns[0];
console.log(east);
（表示結果）"Tokyo"

配列に要素を追加するには以下の関数を使います。

towns.push("Fukuoka");
console.log(towns);
（表示結果）["Tokyo", "Osaka", "Nagoya", "Fukuoka"]

配列を作成するときに要素に値がない場合は「undefined」として作成されます。

以下の場合は２つ目の要素がundefinedとなります。

var towns = ["Tokyo",  , "Nagoya"];

towns[0]はTokyo、towns[1]はundefined、towns[2]はNagoyaとなります。

条件文

JavaScriptの条件文はif文とswitch文があります。

if文

式には真偽値を判定する式を記述します。

この場合、結果がtrueの場合はif文内を処理し、falseの場合はelse文内を処理します。

if (式) {
  処理内容;
} else {
  処理内容;
}

複数のif文を記述することもできます。

if (式) {
  処理内容;
} else if (式) {
  処理内容;
} else {
  処理内容;
}

例）
if (x == y) {
  // xとyが同じなら処理を実行
}

また、３項演算式を書くこともできます。

式 ? 値 : 値;

var door = age > 20 ? "開く" : "閉じる";
console.log(door);

真偽値を評価する際にJavaScriptは以下の値をfalseに評価します。

false
undefined
null
0
NaN
空の文字列(“”)

これら以外はtrueに評価します。

switch文

式に合致したcaseの値があった場合はその処理内容を実行しbreakにてswitch文から抜け出します。

どのcaseの値にも当てはまらない場合は、default内の処理が実行されます。

switch (式) {
  case 値:
    処理内容;
    break;
  case 値:
    処理内容;
    break;
  default:
    処理内容;
    break;
}

例）
switch (sweets) {
  case "Cake":
    // sweetsがCakeの場合は処理を実行
    break;
  case "Chocolate":
    // sweetsがChocolateの場合は処理を実行
    break;
  default:
    // どのcaseにも当てはまらない場合処理を実行
    break;
}

繰り返し文

JavaScriptの繰り返し文はwhile文、do while文、for文、for…in文があります。

while文

式には真偽値を判定する式を記述します。

結果がtrueの間はwhile文内の繰り返し処理を実行します。

while (式) {
  処理内容;
}

例）
while (x == y) {
  // xとyが同じ間は処理を繰り返し
}

do while文

do while文は一度でもdo文内の処理を実行したい場合に使用します。

式には真偽値を判定する式を記述します。

結果がtrueの場合再びdo文の処理を実行します。

do {
  処理内容;
} while (式);

例）
do {
  // 一度do文内の処理を実行し、xとyが同じ場合は再びdo文内の処理を実行
} while (x == y);

for文

for文内の処理を実行する前に初期化を行います。

そして条件がtrueの場合はfor文内の処理を実行します。

処理実行後に更新の記述内容を実行します。

そして再び条件の判定に戻り、trueの場合はfor文内の処理を実行します。

これを繰り返し、条件がfalseになればfor文を抜けます。

for (初期化; 条件; 更新) {
  処理内容;
}

例）
for (var i = 0; i <= 100; i++) {
  // 初期値として変数iを0をセットし、iが100より小さい場合for文内を処理し、iをインクリメントする
  // iが100より小さい間は処理を繰り返す
}

FizzBuzz問題プログラム

簡単なプログラムをJavaScriptで作ってみましょう。

ここではプログラムをStrictモードで作成します。

Strictモードは、エラーは発生してないが正しく処理しないような事柄も、エラーが発生するように変更します。

本来は利用すべきでないコードの記述方法など、エラーが発生しなかった処理も発生するようになります。

スクリプト全体でStrictモードを呼び出すには、他のいかなる文よりも前に’use strict;’（もしくは”use strict;”）という文を記述します。

また、関数に対してだけStrictモードにすることもできます。

この場合は、関数内の他のいかなる文よりも前に’use strict;’を記述、つまり関数の先頭に記述します。

それではサンプルプログラムでよく利用されるFizzBuzz問題のプログラムを作ってみましょう。

FizzBuzzは海外の言葉遊びで、スタートして１から順に数字を発言していくのですが、３で割り切れる場合はFizz、５で割り切れる場合はBuzz、両方で割り切れる場合はFizzBuzzと発言します。

これをプログラミングしてみましょう。

冒頭’use strict;’を宣言してStrictモードにします。

'use strict;'

プログラム全体の動作を以下のようにします。

１から順に１００までカウントする
数える数字を１行ずつ画面に表示する
３で割り切れる数字のときは画面に「Fizz」を表示する
５で割り切れる数字のときは画面に「Buzz」を表示する
３と５で割り切れる数字のときは画面に「FizzBuzz」を表示する

変数を使って１から数値をカウントするのに使います。

初期値は１の値を格納できるようにします。JavaScriptは変数は「var」で宣言します。

var count = 1;

JavaScriptの変数宣言はデータ型を指定せず、フレキシブルに値を代入できるようになっています。

数字をカウントしながら、その数字を画面に表示するので、表示処理を１００回繰り返すプログラムを記述します。

記述にはfor文を使います。

for (var count = 1; count < 101; count++) {
}

処理を１００回繰り返すプログラムをfor文で書くとこのようになります。

「var count = 1;」でcount変数を宣言し、初期値に１を代入します。
「count < 101;」はcount変数が101より小さい間処理をする条件となります。１から１００まで数えるので、count変数が１００のときも画面に表示します。
「count++」はfor文内の処理の最後に実行します。この場合は画面に表示したあとにcountがインクリメントされます。

画面に表示するために以下のプロパティを使用します。

document.body.innerHTML;

ここに値を代入するとbody要素に代入した値が反映されます。

つまりブラウザの画面に代入した値が表示されます。

document.body.innerHTML = 'Hello World';

例えばこのように書くとHello Worldがブラウザの画面に表示されます。

では、１から１００まで表示できるようにプログラムを書いてみましょう。

書いたプログラムをCodePenなどで実行してみましょう。

for (var count = 1; count < 101; count++) {
  document.body.innerHTML = count;
}

どうでしょうか？

実行されましたか？

おそらく画面には「１００」だけが表示されているかと思います。

これはdocument.body.innerHTMLの内容がfor文で処理を繰り返した最後の値「１００」だからです。

１から９９までの上書きされているためこのようになります。

では、どのようにすればいいでしょうか。

代入した値を上書きされないようにするために、「追加」で代入できるようにします。

document.body.innerHTML += count;

「=」の前に「+」を記述して追加できるようにしてみましょう。

こんどはどうでしょうか？

画面に１００までの数値が表示されるようになりましたが、横に連続して表示されていると思います。

数字が１行づつ表示されるように以下のように修正します。

document.body.innerHTML += count + '<br>';

「<br>」はHTML表記の改行を行うタグです。

これで１から１００まで数字が１行づつ表示されましたね。

次に、３で割り切れるときは「Fizz」、５で割り切れるときは「Buzz」、両方で割り切れるときは「FizzBuzz」、それ以外は数字を表示するようにプログラムを追加します。

まずは３で割り切れるときの処理を追加します。

以下の条件文を追加してみましょう。

if (count % 3 === 0) {
} else {
}

「%」は割り切れると「0」、余りが発生すると「1」を返す演算子です。

３で割り切れるかどうかを「===」で評価しています。「==」でも同じように評価しますが、JavaScriptではより厳密に評価するために「===」演算子があります。

より正確なプログラミングをするためにできるだけ「===」を使う癖をつけておいたほうがいいでしょう。

for (var count = 1; count < 101; count++) {
  if (count % 3 === 0) {
    document.body.innerHTML += 'Fizz<br>';
  } else {
    document.body.innerHTML += count + '<br>';
  }
}

３の倍数のときには「Fizz」と表示されたでしょうか。

次に、５で割り切れるときは「Buzz」と表示するプログラムを追加してみましょう。

以下のプログラムを条件文に追加します。

else if (count % 5 === 0) {
  document.body.innerHTML += 'Buzz<br>';
}

「else if」を使って条件を追加します。

for (var count = 1; count < 101; count++) {
  if (count % 3 === 0) {
    document.body.innerHTML += 'Fizz<br>';
  } else if (count % 5 === 0) {
    document.body.innerHTML += 'Buzz<br>';
  } else {
    document.body.innerHTML += count + '<br>';
  }
}

最後に両方で割り切れるときには「FizzBuzz」と表示するプログラムを追加します。

両方で割り切れることを評価するために「&&」演算子を使います。

if (count % 3 === 0 && count % 5 === 0) {
  document.body.innerHTML += 'FizzBuzz<br>';
}

３で割り切れる場合と５で割り切れる場合はどちらも条件が重なりませんが、両方で割り切れるかどうかを評価する場合は条件が重なります。

例えば、以下のようにプログラムを追加すると「FizzBuzz」は表示されません。

for (var count = 1; count < 101; count++) {
  if (count % 3 === 0) {
    document.body.innerHTML += 'Fizz<br>';
  } else if (count % 5 === 0) {
    document.body.innerHTML += 'Buzz<br>';
  } else if (count % 3 === 0 && count % 5 === 0) {
    document.body.innerHTML += 'FizzBuzz<br>';
  } else {
    document.body.innerHTML += count + '<br>';
  }
}

条件が重なっているので、これだと「(count % 3 === 0)」もしくは「(count % 5 === 0)」に条件が先に当てはまるので、「(count % 3 === 0 && count % 5 === 0)」の評価まで到達しません。

なので、「(count % 3 === 0 && count % 5 === 0)」の評価を最初にすることで期待通りの動作をします。

for (var count = 1; count < 101; count++) {
  if (count % 3 === 0 && count % 5 === 0) {
    document.body.innerHTML += 'FizzBuzz<br>';
  } else if (count % 3 === 0) {
    document.body.innerHTML += 'Fizz<br>';
  } else if (count % 5 === 0) {
    document.body.innerHTML += 'Buzz<br>';
  } else {
    document.body.innerHTML += count + '<br>';
  }
}

これで期待通りの表示ができたかと思います。

いかがでしょうか。

パズルを組み立てたり、なぞなぞを解いたりするのに感覚的に似ていませんか？

「はじめてのプログラミング」記事で少し触れましたが、パズルやなぞなぞが好きな人はプログラミングの習得が比較的速いかも知れません。

プログラミングは試行錯誤したあとに完成させることで達成感があります。

これをきっかけにJavaScriptを学習してみてください。