JavaScript はWebサイトに動きを与えることができる言語です。
この JavaScript は主に Google Chrome や Safari などのブラウザアプリで実行することができます。
ブラウザがあれば実行できるので、開発環境の構築の必要がほとんどなく、初めてプログラミングを学ぶ方にとって学びやすい言語といえます。
今回の学習内容
JavaScriptとは
この JavaScript は、HTML や CSS と異なり 計算処理 ができる言語です
通常、プログラミングといえば 計算処理 を行う言語のことを言います。
HTML や CSS とは、書き方も概念も異なります。
また、HTMLやCSSのように実行結果に派手さもないので、JavaScript が 実際にどのように役立つか分からず 心が折れそうになるかもしれません。
しかし、この JavaScript を使えるようになれば、Webの世界でできることが広がり、想像力を十分に発揮することができるようになります。
以下のページでJavaScriptを使用した場合と使わなかった場合の「いいね」ボタンを比較できます。
進化し続けるJavaScript
JavaScriptは1990年代に誕生し、現在に至るまで進化し続けている言語です。
そのため、ブラウザのバージョンやブラウザの違いによってJavaScript への対応に差（書き方が異なったり、使用できない関数）があり、使用する関数や構文の書き方は開発対象のブラウザごとに確認をした方が無難です。
ブラウザの対応状況は Can I use で確認することができます。
使用できない関数は Polyfill（ポリフィル）と呼ばれるコードを読み込むことで、大体のブラウザで使用することができます。
また、BABEL などの トランスパイラ を使用すれば、最新のコードで書いたものを古いブラウザで実行できるようにコードを変換して配信することも可能になります。
JavaScriptの記述箇所
JavaScript は HTMLファイル に直接記述したり、CSS と同様に JavaScriptファイルに記述したものを読み込んで使用することもできます。
どちらの方法でも HTMLファイルの headタグ もしくは bodyタグに scriptタグ を記述します。
HTMLファイルに直接記述する方法
headタグ もしくは bodyタグに scriptタグを作成すれば、その中に JavaScript を直接記述することができます。
この scriptタグの 中で使用できる言語は JavaScriptのみ であるため、HTMLタグやCSSを記述することはできません。
<script>
'use strict';
// ここにJavaScriptを記述します。
</script>
jsファイルに記述してhtmlで読み込む方法
.js のファイルを作成し、その中に JavaScriptを記述します。demo.js
'use strict';
// ここにJavaScriptを記述します。
htmlファイルの headタグ もしくは bodyタグに scriptタグ を作成し、以下のように src属性 で読み込むファイルのパスを設定します。
index.html <script src="./demo.js"></script>
Strict（厳格）モード
コードの先頭に 'use strict'; と記述することで、JavaScriptで発生する恐れのあるバグを事前にエラーとして知らせてくれるようになります。
できるだけ意識して記述するようにしましょう。
JavaScriptの記法
プログラミングとはコンピュータに対する命令の集まりです。
コンピュータへの命令には構文（書き方）があり、構文に存在しない命令をすればコンピュータはエラーや警告を出して誤りがあることを教えてくれます。
命令とエラー
// コンソールに「おはよう」というログを表示せよ という命令
console.log('おはよう');
// 変数 x に 数値 0 を代入せよ という命令
let x = 0;
//改行して書くこともできます
let y
= 0;
// エラーが発生
あいうえお; // Uncaught ReferenceError: あいうえお is not defined
// カッコの閉じ忘れ等でもエラーが発生します
console.log('こんにちは); // Uncaught SyntaxError: Invalid or unexpected token
終端文字のセミコロン
プログラミング言語の中には、コードの行末をコンピュータに知らせる方法として終端文字にセミコロン(;)を付ける言語があります。
JavaScriptでは、行末にセミコロン;を付けなくてもエラーになりません。
あってもなくてもどちらでも良いです。この辺は好みの問題でプロジェクトや開発チームによって異なります。
RAKUMAオンラインスクールでは参照とする MDN Web Docs のJavaScriptコードにセミコロン(;)が使用されているため、セミコロン付きで解説していきます。
// セミコロンを付ける例
1234;
// セミコロンを付けない例
1234
セミコロンが必要な言語
- C
- C#
- C++
- Dart
- Java
- PHP
セミコロンが不要な言語
- Python
- Swift
- GO
- Ruby
- Scala
- Kotlin
など
インデントや改行を意識して読みやすくする
どの言語のコードにも共通して言えることですが、インデントや改行をしてコードを見やすく書くことを心掛けてください。
// 良い例
const good = '良い例';
console.log(good);
good = good + ' です';
if(good) {
console.log('OK');
}
// 悪い例
const dont='悪い例';console.log(
dont);dont=
dont+' です';if(dont){console.log(
'Bad !!!!');};
コンソールにログを表示する
コンソールにログを表示することで、プログラミングで計算した結果を確認したり、警告やエラーを確認することができます。
ログを表示するconsole.log('Hello World!');
ログ（警告）を表示するconsole.warn('警告です');
ログ（エラー）を表示するconsole.error('エラーです');
コメント文の書き方
コンピュータが読み込まないコメント文の書き方です。HTMLのコメント文とは書き方が異なります。
一行をコメントアウトする
// の後の行はコメント文となります
複数行をコメントアウトする
/*
この中で記述されたものは、
コメント文となります
*/
値と変数について
値の種類
値とは、文字列や数値などのプログラミングで扱うデータのことです。
値には、文字列、数値、真偽値、配列、オブジェクト、null、undefinedなどがあります。
文字列（String）について
「おはよう」や「テレビ」といったテキストのことを文字列といいます。
文字列は String型 と呼ばれます。
この文字列はダブルクォート("")またはシングルクォート('')で囲みます。
"夏休み"; // ダブルクォート
'おはよう'; // シングルクォート
バッククォート(``)を使用する場合もありますが、後述します。
Macだとバックスラッシュ(
\)、Windowsだと
¥を、エスケープする対象の先頭に付けます。
例:
"ダブルクォートは\"です"シングルクォートの場合も同様です。
ダブルクォートを用いると、HTMLをJavaScriptで扱う場合に属性で使用するダブルクォートをエスケープする必要があります。
"<h1 class=\"text-center\">Hello World</h1>";
シングルクォートを使用すればエスケープなしで表現できます。
'<h1 class="text-center">Hello World</h1>';
数値（Number）について
数値には、10 や 100 の様な整数値と、10.44 といった浮動小数点数値があります。また、-5 のように記号がつくマイナス値があります。
数値は Number型と呼ばれます。
計算した結果が数値ではなかった場合（例えば、文字列と計算しようとして計算できなかった場合）などは NaN （Not A Number）という記号が出力されることがあります。
とてつもなく大きい数値（10の68乗）は無限大数といい Infinity という記号が出力されます。数値を0で割っても同様です。
この２つの記号も Number型 になります。
Nullについて
Null型は、その値には「何もない」「存在しない」ことを表す値となっており、値は null となります。
Undefinedについて
Undefined型 は 定義されていないこと（未定義）を示す値になります。後述する、変数の初期化をしない場合に undefined という値が設定されます。
Nullは「何もない」、Undefinedは「未定義」という値です。混乱するかもしれませんが、
Undefinedは「定義すらされていない状態」なのに対し、Nullは「何もないと定義した状態」となります。
他にも値はありますが、これからの学習で少しずつ学習します。
数値をコンソールに表示する
console.log(1234);
プラス記号(+)を使えば数値に１を足すことができます。
console.log(1234 + 1); // 1235
文字列をコンソールに表示する
文字列はシングルクォート('')、またはダブルクォート("")で囲みます。
console.log('文字列を表示する');
数値をシングルクォート('')、またはダブルクォート("")で囲むと文字列になります。
console.log('1234');
プラス記号(+)を使えば文字列を連結すことができます。
console.log('文字列を' + '連結' + 'します'); // 文字列を連結します
以下のようにString型の数値とNumber型の数値を + した場合は、計算されるのではなく文字列連結となります。
console.log('1234' + 1); // 12341
また先程のバッククォート(``)を使用すれば ${} を使用して値や式を埋め込むことができます。（テンプレートリテラル）
console.log(`値を${0 + 1}つだけ${'埋め込み'}ます`); // 値を1つだけ埋め込みます
変数とは
変数とは、値を格納する箱のようなものです。
値をそのまま使用することはプログラミングではほとんどありません。
値は変数に代入して変数を用いて処理を行います。
変数は「宣言」して「定義（値を代入）」することで使用でき、JavaScriptでは宣言に let または constを使用します。
昔は var という宣言しかありませんでしたが、現在では var よりも let と const を使用することが推奨されています。
JavaScriptの変数には、どのような値でも代入することができます。
_)、あるいはドル記号 ($) から始まらなくてはなりません。続く文字には数字 (0-9) も使用できます。JavaScript は大文字・小文字を区別するため、使用できる文字には "
A" から "Z" (大文字) に加えて "a" から "z" (小文字) も含まれます。
変数をletで宣言
// animalという名前の変数を宣言する
let animal;
// animalは宣言されただけで、中身に何もない(未定義な)状態なので undefined が表示される
console.log(animal); // undefined
// animalに 犬 という文字列を代入する
animal = '犬';
// animalには 犬 が代入されているので 犬 が表示される
console.log(animal); // 犬
// 問題 コンソールには何が表示されるでしょう？
animal = '猫';
console.log(animal);
変数をconstで宣言
// appleという名前の変数を宣言し定義する
const apple = 'りんご';
console.log(apple); // りんご
let と const の違い
letを使用して宣言した変数は再代入が可能です。constを使用して宣言した変数は定数となり再代入が不可となります。
// oneという名前の変数を宣言し定義する
const one = 1;
console.log(one); // 1
one = 2; // エラー
const変数の命名規則
ここでは小文字でoneと命名していますが、constのような不変な変数のことを定数といい、大文字とアンダーバー(_)で命名することがあります。例:
ONE、USER_NAME
演算について
四則演算
足し算、引き算、掛け算、割り算などの四則演算ができます。演算する際に使用する + - * / などの記号を演算子といいます。
四則演算の例
let num = 1;
console.log(num + 10); // 11
console.log(num - 10); // -9
console.log(num * 10); // 10
console.log(num / 1); // 1
剰余（余り）
5 割る 2 が 2 余り 1 となるように、余りの数を取得することができます。
例えば 4 割る 2 の余りは 0 となるので、2で割った余りが 0 なら偶数、1 なら奇数と判断できます。
let num1 = 5;
console.log(num1 % 2); // 1
let num2 = 4;
console.log(num2 % 2); // 0
インクリメントとデクリメント
変数が 数値 かつ let で作成 されたものであれば、演算子 + または - を使用して「1を足す（インクリメント）」「1を引く（デクリメント）」をすることができます。
インクリメント
// インクリメントを使わない場合
let num = 1;
num = num + 1;
console.log(num); // 2
// インクリメント
num = 1;
num++; // ++ とすることで 変数に + 1した数を代入できる
console.log(num); // 2
デクリメント
// デクリメントを使わない場合
let num = 1;
num = num - 1;
console.log(num); // 0
// デクリメント
num = 1;
num--; // -- とすることで 変数に - 1した数を代入できる
console.log(num); // 0
記号の前と後の違い
インクリメント/デクリメントでは、記号を前につけるか後につけるかで実行内容が変わります。
前につけた場合は、すぐに演算が行われますが、後につけた場合は、行の処理が終了した後に演算が行われます。
let i = 0;
console.log(i++); // 0 -> まだ0のまま
console.log(i); // 1 -> 行が終わったので1になる
console.log(--i); // 0 -> すぐ実行されるので0になる
単項プラス
プラス(+)記号を値の先頭に付けると、値を数値に変換した結果を返します。
変換に失敗した場合は NaN を返します。
let str1 = '5';
console.log(str1); // '5'
console.log(+str1); // 5
console.log(+'text') // NaN
単項符号反転
マイナス(-)記号を数値の先頭につけると、+ と - を反転した値を返します。
反転した値がそのまま変数に代入されるわけではありません。
let num3 = 8;
console.log(-num3); // -8
console.log(num3); // 8
代入記号
i = i + 5;のような処理を以下のように簡略化できます。
代入記号の例
let i = 0;
i += 1; // i = i + 1 と同義
i *= 4; // i = i * 4 と同義
