JavaScript入門 ? 基礎から文法、サンプルコードの実行までを解説！
JavaScriptを使いこなせると、就職や転職の際に選択肢が広がるでしょう。ここでは、そんなJavaScript入門編として、JavaScriptの基本的な使い方を紹介します。
JavaScriptを使いこなせると、就職や転職の際に選択肢が広がるでしょう。ここでは、そんなJavaScript入門編として、JavaScriptの基本的な使い方を紹介します。
スキルアップ
2023/02/27 UP
- プログラミング
- SE資格・スキル
- 入門
JavaScriptは、プログラミング言語の1つです。主にWebのフロントエンドで使われており、近年サーバサイドでも利用されるようになっている人気の言語の1つになります。フロントエンド、サーバサイドのどちらでも使われているため、JavaScriptを使いこなせると、就職や転職の際に選択肢が広がるでしょう。
ここでは、そんなJavaScript入門編として、JavaScriptの基本的な使い方を紹介します。
【入門】JavaScriptの基礎と文法
まずは、JavaScriptの基礎知識を紹介します。
JavaScriptのコメントの書き方
JavaScriptだけでなく、プログラミング言語はコメントを記述できます。なおコメントとは、人間が見て分かるようにコメントなどを記述するものです。
JavaScriptのコメントには、1行コメントと複数行コメントがあります。
・1行コメント： // で始まります。 // 以降の行末までがコメントアウトされます。
・複数行コメント： /* で始まり */ で終わります。ブロックコメントとも呼ばれます。
コメントの書き方について、実際のソースコードを見てみましょう。
// 1行コメント
console.log("Hello World1."); // これより前のロジックは実行される
// console.log("Hello World2."); この行は実行されない
/*
* 複数行コメント
* 複数行コメント
*/
console.log("Hello World3.");
実行結果は以下のようになります。
Hello World1. Hello World3.
// や /* */ で括られたコメント部分は実行しても表示されないことがわかります。
JavaScriptの実行方法
JavaScriptは、プログラムを実行するためのコンパイルが不要なスクリプト言語です。コンパイルをしないため、気軽に実行することが可能ですが、一方で実際に動かしてみなければ、エラーが判別できないということでもあります。
なお、JavaScriptの実行方法は大きく2種類あります。一つはHTMLで実行する方法、もう一つはブラウザに付属する開発ツールで実行する方法です。
HTMLで実行する方法
HTMLで実行する方法では、まずHTMLファイルを用意します。そして、scriptタグを記述し、その中にJavaScriptを入れます。
例：
<html>
<script>
console.log("これはテストです");
</script>
</html>
ブラウザに付属する開発ツールで実行する方法
主要ブラウザには開発ツールが付帯しており、そこで直接JavaScriptが実行可能です。たとえばChromeでは右クリック > 検証 > Console で行います。
JavaScriptの演算子
JavaScriptには算術演算子、比較演算子、インクリメント・デクリメント演算子、条件演算子、文字列連結演算子などがあります。
算術演算子
加減乗除などを行う演算子です。
console.log(1 + 2); // 加算 console.log(1 - 2); // 減算 console.log(1 * 2); // 乗算 console.log(1 / 2); // 除算 console.log(1 % 2); // 剰余 console.log(-(-3)); // 単項符号反転 console.log(+"3"); // 単項プラス 文字列を数字に変換する console.log(2 ** 3);// 指数演算子 この場合、2の3乗
実行結果は以下のようになります。
3 -1 2 0.5 1 3 3 8
比較演算子
大小の比較や一致を評価する演算子です。
let val = 3; // 等価演算子 console.log(val == 3); // true console.log(val == "3"); // true // 不等価演算子 console.log(val != 2); // true console.log(val != "4"); // true // 厳密等価演算子(被演算子が等しく、同じ型であれば true ) console.log(val === 3); // true console.log(val === "3"); // false // 厳密不等価演算子 console.log(val !== 3); // false console.log(val !== "3"); // true // より大きい console.log(val > 3); // false // 以上 console.log(val >= 3); // true // より小さい console.log(val < 4); // true // 以下 console.log(val <= 4); // true
実行結果は以下のようになります。
true true true true true false false true false true true true
インクリメント・デクリメント演算子
数字を1加減算するための演算子です。
let val = 3; console.log(val); // インクリメント演算子 val++; console.log(val); // デクリメント演算子 val--; console.log(val);
実行結果は以下のようになります。
3 4 3
条件演算子
条件によって処理を分けられる演算子です。
let age = 21; // 条件(三項)演算子 let result = (age >= 20) ? "大人" : "子ども"; console.log(result); // 大人
実行結果は以下のようになります。
大人
文字列連結演算子
文字列を連結するための演算子です。
let str1, str2, str3, str4, str5; str1 = "Hello" + " world."; str2 = "20" + "20"; str3 = "20" + 20; str4 = 20 + "20"; str5 = 20 + 20; console.log(str1); // Hello world. console.log(str2); // 2020 console.log(str3); // 2020 console.log(str4); // 2020 console.log(str5); // 40
実行結果は以下のようになります。
Hello world. 2020 2020 2020 40
データ型
JavaScriptには以下の8つのデータ型があります。
| 型名 | 説明 |
|---|---|
| Boolean | (真偽値) true または falseを表します。 |
| Number | (数値) 整数や浮動小数点数を表します。 |
| BigInt | (長整数) 精度が自由な整数値を表します。 |
| String | (文字列) 文字列を表します。 |
| Symbol | (シンボル) 固有の識別子を表します。 |
| Object | (オブジェクト) データおよびデータをやり取りするデータ構造です。 |
| null | null 値を表します。 |
| undefined | (未定義) 値が未定義であることを表します。 |
JavaScriptでは、値を表現するためにリテラル（直接記述した定数）を使用します。ここでは、以下のリテラルを紹介します。
| リテラル名 | 説明 |
|---|---|
| 真偽値リテラル | true または false |
| 配列リテラル | 0個以上の式のリスト |
| 数値リテラル | 10進数、16進数、8進数、2進数で記述できる |
| 浮動小数点リテラル | 浮動小数点 |
| Symbol | (シンボル) 固有の識別子を表します。 |
| 文字列リテラル | 一般的な文字列 |
実際のソースコードを見てみましょう。
// 真偽値リテラル let result = true; console.log(result); // 配列リテラル let array = ['item1', 'item2', 'item3']; console.log(array); // 数値リテラル let num1 = 2020; // 10進数 let num2 = 0134; // 8進数 let num3 = 0x1f; // 16進数 let num4 = 0b11; // 2進数 console.log(num1); console.log(num2); console.log(num3); console.log(num4); // 浮動小数点リテラル let num5 = 3.1415926; console.log(num5); // 文字列リテラル let str1 = "hoge"; // ダブルクォートで囲む let str2 = 'piyo'; // シングルクォートで囲む let str3 = "a b c"; // 特殊文字を含む console.log(str1); console.log(str2); console.log(str3);
実行結果は以下のようになります。
true [ 'item1', 'item2', 'item3' ] 2020 92 31 3 3.1415926 hoge piyo a b c
なお、文字列リテラルでは、特殊文字も表現できます。ここでは、 (タブ)や (改行)を紹介（str3）しました。
JavaScriptの変数
JavaScriptでは、変数宣言時に使用するキーワードとして、「var」、「let」、「const」があります。それぞれの違いについて説明します。
var
「var」は再宣言、再代入が可能な変数です。
var val = 'hoge'; val = 'piyo'; var val = 'fuga'; console.log(val);
実行結果は以下のようになります。
fuga
let
「let」は再宣言が禁止されている変数です。
let val = 'hoge'; val = 'piyo'; let val = 'fuga'; // ここでSyntaxError console.log(val);
実行すると、再宣言の個所でSyntaxErrorが発生します。
const
「const」は、再宣言および再代入が禁止されている変数です。
const val = 'hoge'; val = 'piyo'; // ここでSyntaxError const val = 'fuga'; // ここでSyntaxError console.log(val);
実行すると、SyntaxErrorが発生します。変更しない変数はconstにしておくとよいでしょう。
letおよびconstの使用により、変数の意図しない上書きを防いだりできます。不具合を未然に防ぐことができますので、キーワードを使い分けてください。
JavaScriptの条件分岐
条件分岐とは、条件が成立する場合、しない場合で処理を分けることです。条件分岐にはif文を使用します。
実際のソースコードを見てみましょう。
サンプルコード
let val = 1;
if (val == 1) {
console.log("条件式がtrue");
} else {
console.log("条件式がfalse");
}
実行結果は以下のようになります。
条件式がtrue
val == 1が成立するので、trueとな、条件に一致するブロックが実行されます。
JavaScriptのループ
JavaScriptでは、同じ処理を繰り返す場合にループを記述します。入門編として、ループの1つであるfor文について紹介します。
サンプルコード
for (var i=0; i < 5; i++) {
console.log("i : " + i);
}
実行結果は以下のようになります。
i : 0 i : 1 i : 2 i : 3 i : 4
forの条件が成立する間、繰り返し処理が実行されます。なお、繰り返し処理にはwhile文を使用することもあります。
let n = 0;
while (n < 3) {
console.log("n : " + n);
n++;
}
実行結果は以下のようになります。
n : 0 n : 1 n : 2
whileの条件が成立する間、繰り返し処理が実行されます。
クラスとメソッド
JavaScriptの便利な仕組みとしてクラスがあります。クラスを使用することで、効率的にソースコードを記述できます。
// クラス
const SampleClass = class {
// コンストラクタ
constructor(a, b) {
this.a = a;
this.b = b;
}
// 加算メソッド
sum() {
return this.a + this.b;
}
// 減算メソッド
subtraction() {
return this.a - this.b;
}
}
// オブジェクトの作成
let object = new SampleClass(10, 20);
// クラスメソッド
console.log(object.sum());
console.log(object.subtraction());
実行結果は以下のようになります。
30 -10
HelloWorldを書いてみよう
では、ここからは実行できるプログラムでJavaScriptの挙動を見ていきましょう。まずは、入門編としてよくある、HelloWorldを実行してみます。
サンプルコード
const str = "Hello" + " world."; console.log(str);
実行結果は以下のようになります。
Hello world.
JavaScriptのサンプルをご紹介
これまでの説明を踏まえ、条件分岐とループ、標準出力を利用したサンプルを紹介します。
サンプルコード
let i = 0;
for (i = 0; i < 5; i++) {
if (i % 2 == 1) {
console.log(i + "：奇数");
} else if (i % 2 != 1) {
console.log(i + "：偶数");
} else {
console.log("この行は実行されません");
}
}
実行結果は以下のようになります。
0：偶数 1：奇数 2：偶数 3：奇数 4：偶数
汎用性の高いJavaScriptでプログラミングに挑戦してみよう！
JavaScript入門編として、JavaScriptの基礎から、基本的な使い方まで紹介しました。簡単な確認程度であれば、ブラウザの開発ツールを使用することもできるJavaScriptは気軽に始められるプログラミング言語として、とてもおすすめです。
これを機に、汎用性の高いJavaScriptでプログラミングをはじめてみてはいかがでしょうか。
