JavaScript（以下、JSと呼びます）はWeb開発においてほぼ必須の言語です。ほぼ全てのWebサイトでJSが使用されています。
ちなみにJavaとは全く関係ありませんし、文法も全く違います。
Javascriptを実行してみよう
まずはJavascriptがどのようなものか実感してもらうために、簡単なJavascriptを実行していきます。
コンソールに「alert(“○○”);」というコードを書き実行すると、○○がアラートとして表示されます。
ではどのように実行するか説明します。
ディベロッパーツール
今回はGoogleChromeのディベロッパーツール で実行していきます。
まずはこの画面でいいのでF12もしくは⌘ + option + i を押してください。
そうすると以下のような画面が表示されると思います。
右の端に開いているのがディベロッパーツールと言われるものです。
これはHTMLやCSSなどを調整する際にも使用するので、使用方法については別途説明します。
今回は右上に赤枠で囲っている部分のconsoleと書いてあるタブをクリックしてください。
そしてそこに先ほどの「alert(“○○”);」を入力してください。
enterを叩くと以下のようにアラートが表示されます。
いかがですか？
簡単ですよね。javascriptを実行できました。
文法
次は例を交えながら簡単に文法を学びましょう。
console.log()
console.log() は丸括弧 () 内に入力された文字をコンソールに出力します。
また「Hello World」のような文字のことを文字列と呼びます。文字列は、シングルクォーテーション（ ‘ ）かダブルクォーテーション（ ” ）で囲む必要があるので注意しましょう。
//script.js
console.log('Hello World');
console.log("Hello World");セミコロン
文の最後はセミコロン（;）で終わります。セミコロンはなくても正常に動作する場合が多いですが、思わぬ不具合が生じる可能性があるので忘れずにつけましょう。
//script.js
// ×悪い例
console.log("Hello World")
// ○いい例
console.log("Hello World");コメントアウト
文頭に「//」を書くと、その行はコメントとみなされます。そのため、プログラムとしては無視され、実行されません。（コメントアウトと言います）
コメントは、どのような意味のコードであるかを記すメモなどとして使われます。
数値・計算
次は、数値（数字）を扱っていきましょう。数値は文字列と違いクォーテーションで囲みません。
数値は足し算や引き算といった計算もすることができます。足し算は「+」、引き算は「-」の記号を用います。
//script.js
// 足し算
console.log(1 + 2);
// 引き算
console.log(4 - 1);文字列と数値の比較
console.log(1 + 2);は足し算されて3が出力されます。ただ、「1 + 2」にクォーテーションをつけると、文字列と解釈されそのまま出力されます。
文字列と数値は違うものであることを認識しましょう。
//script.js
// 足し算 -> 出力結果「3」
console.log(1 + 2);
// 足し算 -> 出力結果「1 + 2」
console.log("1 + 2");掛け算「*」、割り算「/」
かけ算は「*」（アスタリスク）、割り算は「/」（スラッシュ）という記号を用いて計算します。
//script.js
// 掛け算 -> 出力結果「14」
console.log(2 * 7);
// 割り算 -> 出力結果「4」
console.log(8 / 2);余り「%」
「%」記号を使うと、割ったときの余りを求めることができます。
どのような時に使うかピンとこない方もいらっしゃるかと思いますが、例えば偶数の時のみ処理する場合は２で割って余りが１の場合のみ処理するなどで使用することがあります。
//script.js
// 余り -> 出力結果「1」
console.log(7 % 2);文字列
文字列とはクォーテーションで囲まれたものです。
文字列の結合
「+」用いて、文字列同士を結合することができます。「”お腹” + “空いた”」とすると、「”お腹空いた”」という1つの文字列になります。
//script.js
// 文字列の結合 -> 出力結果「お腹空いた」
console.log("お腹" + "空いた");変数・定数
変数
変数について説明していきます。
変数は、データ（値）の入れ物（箱）です。箱に名前を付けますが、その名前を「変数名」と呼びます。箱の中に文字列や数値などを入れていきます。
変数の定義
変数は「let 変数名 = 値」で定義します。プログラミングの「=」は「等しい」ではなく、「右辺を左辺に代入する」という意味です。「let」は「これから変数を定義します」という宣言で、その後ろに変数名を記載し、値を代入します。
//script.js
// 変数名「name」に文字列「nabe」を代入します。
let name = "nabe";変数の使用方法
変数の使用方法は簡単です。
「”nabe”」という値が代入された変数nameを出力すると、「”nabe”」という値が出力されます。
//script.js
// 変数名「name」に文字列「nabe」を代入します。
let name = "nabe";
// 「nabe」が出力されます。
console.log(name);変数と文字列
変数はクォーテーションで囲みません。
「console.log(“name”);」のように変数名をクォーテーションで囲むと、nameが変数ではなく「文字列」として認識され、「name」の文字列として出力されてしまうので注意しましょう。
//script.js
// 変数名「name」に文字列「nabe」を代入します。
let name = "nabe";
// 文字列「name」が出力されます。
console.log("name");変数の特徴
変数は、「文字列」や「数値」と同様に扱えます。
代入されている値が、文字列の場合は他の文字列と連結することができ、数値の場合は計算に用いることができます。
//script.js
let name = "佐藤";
// 文字列「佐藤さん」が出力されます。
console.log(name + "さん");
let number = 5;
// 数値「11」が出力されます。
console.log(number + 6);変数のメリット
変数について説明しましたが、なぜ変数を使うのでしょうか。
以下のようなにメリットがあります。
- 同じ値を繰り返し使うことができる
- 変更に対応することができる
- 変数名から値の意味を推測でき、わかりやすい。
「同じ値を繰り返し使うことができる」「変更に対応することができる」という例を説明します。似た文章を何度も書くのは大変ですが、変数を使用すれば同じ値を繰り返し使え、楽にコードを書くことが出来ます。また文章が変更されても、変数を用いていれば、代入する値を変更するだけで、使用している箇所の全てを変更せずとも、変更に対応できます。
//script.js
//変数を使用しない場合
//「を勉強した。」を「を学習した。」に変更したい場合、３箇所変更する必要がある。
console.log("HTMLを勉強した。");
console.log("CSSを勉強した。");
console.log("Javascriptを勉強した。");//script.js
//変数を使用する場合
//「勉強した。」を「学習した。」に変更したい場合、textに代入している値を１箇所変更するだけで良い。
let text = "を勉強した。";
console.log("HTML" + text);
console.log("CSS" + text);
console.log("Javascript" + text);変数の命名規則
変数名（変数の名前）は基本的に自由に決めることができますが、誰にでも何のために使用されるものか分かりやすい名前をつけるようにしましょう。
また、変数の名前の付け方にはいくつかのルールがあります。
// ○良い例
//英単語を使用する -> 何かの高さであることがわかる
let height = 10;
//２語以上の場合は大文字で区切る -> 長方形の高さであることがわかる
let rectangleHeight = 10;
// ×悪い例
//数値で開始する -> エラーが出る
let 1height = 10;
//ローマ字 -> わかりづらい
let takasa = 10;
//日本語 -> わかりづらい
let 高さ = 10;変数の更新①
変数は、一度代入した値を変更することもできます。
一度値を代入した変数に、その後再び値を代入すると、後に代入した値で変数の中身が上書きされます。
定義する時と違って「let」は必要なく、「変数名 = 新しい値」と書けば値が変更されます。
//script.js
let name = "nabe";
//「nabe」が出力
console.log(name);
// 更新する際は「let」は不要
name = "sato";
//「sato」が出力
console.log(name);ここで気付いた方もいらっしゃると思いますが、プログラムは基本的に上から順に実行されます。
変数の更新②
数値の更新の際ですが、元の値に対して値を更新したい場合もあると思います。
例えば元の値に5を足して、再び元の値に代入することで実現できます。
//script.js
let number = 2;
//「2」が出力
console.log(number);
// 左辺のnumberは「７」、右辺のnumberは「２」
number = number + 5;
//「7」が出力
console.log(number);こちらは省略した記載方法もあり、以下に例を上げておきます。
//script.js
let x = 1;
//基本形
x = x + 1;
//省略形
x += 1
//基本形
x = x - 1;
//省略形
x -= 1
//基本形
x = x * 1;
//省略形
x *= 1
//基本形
x = x / 1;
//省略形
x /= 1
//基本形
x = x % 1;
//省略形
x %= 1定数
変数とよく似たものに、定数があります。
定数はletではなくconstを用いて定義します。
定数と変数の違い
変数と定数の違いを見てみましょう。
変数は1度代入した値を更新できますが、定数は値を更新できません。
定数の値を更新しようとすると、コードを実行した際にエラーが発生してしまいます。
定数を使うメリット
定数のメリットは、「値を更新できない」ことです。
間違って更新することを防ぐことができ、より安全なコードを書くことができます。
//script.js
//定数を使用する場合
// 基本的に名前が変わることはないので、定数で定義したほうが良い。
const name = "Nabe";
console.log(name+"です。");テンプレートリテラル
上記では文字列や定数の連結には、「+」記号を用いてきました。
他の方法として「テンプレートリテラル」という連結方法があります。テンプレートリテラルを用いると、下のように文字列の中に定数（変数）を埋め込むことができます。
//script.js
const name = "Nabe";
const age = 18;
// 出力結果 -> 「こんにちはNabeは１８歳です。」
console.log(`こんにちは、${name}は${age}歳です。`);文字列の中で「${定数}」とすることで、文字列の中に定数や変数を埋め込むことができます。
この時、文字列全体をバッククォーテーション（`）で囲む必要があります。
シングルクオート（’）ではなくバッククォーテーション（`）なので間違えないでください。
まとめ
ここまで基本的なことを学習しましたが、いかがでしたでしょうか。
一回でわかる必要はありません。
わからなければ、再度読んでみると理解度が上がると思うので、復讐してみましょう。
コメント