JavaScriptⅠ
基本的な文法や変数・定数の使い方、条件分岐などを学習します。
JavaScript(ES6)とは
JavaScript（以下JS）はWeb開発において必須の存在です。現在では、ほぼ全てのWebサイトでJSが使用されています。
プログラムの実行
console.log("Hello World"); // シングルクォーテーション(')、またはダブルクォーテーション(")で囲む
// 実行結果
Hello World
数値と計算
console.log(3); // 数値は文字列と違いクォーテーションで囲まない
console.log(5 + 2);
console.log(3 - 2);
console.log(3 * 7);
console.log(6 / 3);
console.log(9 % 2); // 割ったときの余りを戻す
console.log("5 + 2"); // 文字列として解釈される
// 実行結果
3
7
2
21
2
1
5 + 2 // 文字列として出力される
文字列
console.log("にんじゃ" + "わんこ"); // 文字列の連結
console.log("A" + "B" + "C");
console.log("3" + "5"); // 文字の連結("35")
console.log(3 + 5); // 数値の計算(8)
// 実行結果
にんじゃわんこ
ABC
35
8
変数
変数は「let 変数名 = 値」として定義します。
let name = "John" // 変数の定義
console.log(name);
console.log("name"); // クォーテーションで囲むと文字列として認識される
let name = "鈴木";
console.log(name + "さん"); // 文字列の連結
let number = 11;
console.log(number + 5); // 数値の計算
// 実行結果
John
name // そのまま出力される
鈴木さん
16
変数のメリット
- 同じ値を繰り返し使用できる
- 変更に対応しやすい
- 値の意味がわかりやすい
文章が後ほど変更されても、変数を用いていれば、代入する値を変更するだけで全ての変更に対応できます。
// 変数を使用しない場合
console.log("鈴木さん、おはようございます");
console.log("佐藤さん、おはようございます");
console.log("田中さん、おはようございます");
// 変数を使用する場合
let text = "おはようございます";
console.log("鈴木さん、" + text);
console.log("佐藤さん、" + text);
console.log("田中さん、" + text);
変数の命名ルール
number // 英単語を用いる oddNumber // 2語以上の場合は大文字で区切る(キャメルケース)
変数の更新
let name = "John"; console.log(name); name = "Kate"; // 変数の更新時に「let」はつけない console.log(name); // 実行結果 John Kate
変数自身を更新する
let number = 2; console.log(number); number = number + 3; // 既に定義している変数numberに3を足す console.log(number); // 実行結果 2 5
省略した書き方
// 基本形 // 省略形 x = x + 10 // x += 10 x = x - 10 // x -= 10 x = x * 10 // x *= 10 x = x / 10 // x /= 10 x = x % 10 // x %= 10
定数
予期せぬ更新を防ぎより安全なコードを書くことができるのが、定数のメリットです。
const name = "John"; // 定数はconstを用いて定義 name = "Kate"; // エラー(定数は1度代入した値を更新できない)
テンプレートリテラル
これまで文字列や定数の連結には、「+」記号を用いてきました。ES6では、それ以外の方法としてテンプレートリテラルという連結方法があります。テンプレートリテラルを用いると、下記のように文字列の中に定数(変数)を埋め込むことができます。
const name = "にんじゃわんこ"
console.log(`こんにちは、${name}さん`) // バッククォートで囲む
// 実行結果
こんにちは、にんじゃわんこさん
if文
if文を用いると「もし○○ならば●●を行う」という条件分岐が可能になります。
const number = 12;
if (number > 10) { // 真偽値：true
console.log("number は 10より大きいです")
}
// 実行結果
number は 10より大きいです
比較演算子
// a < b // a は b より小さい // a <= b // a は b 以下 // a > b // a は b より大きい // a >= b // a は b 以上 const number = 12; console.log(number < 30); // true console.log(number <= 30); // true console.log(number > 12); // false // a === b // a と b が等しい // a !== b // a と b が異なる const number = 12; console.log(number === 12); // true const name = "John"; console.log(name !== "John"); // false
if文の条件式が成り立たない場合
const number = 7;
if (number > 10) { // false
console.log("number は 10 より大きいです")
} else if (number > 5) { // true
console.log("number は 5 より大きいです")
} else {
console.log("number は 5 以下です")
}
// 実行結果
number は 5 より大きいです
複数の条件式
複数の条件を組み合わせる場合は、「かつ(&&)」と「または(||)」を使用します。
// 条件1 && 条件2 // 複数の条件が全てtrueならtrue // 条件1 || 条件2 // 複数の条件のうち1つでもtrueならtrue x = 5 x > 3 && x < 30 // true x < 10 || x > 30 // true
const number = 31;
if (number >= 10 && number < 100) { // true
console.log("numberは2桁です")
}
// 実行結果
numberは2桁です
[/js]
<h3>switch文</h3>
ある値によって処理を分岐する場合に<strong>switch文</strong>を用います。
[js]
const color = "赤";
switch (color) {
case "赤":
console.log("ストップ！");
break; // switch文を終了する命令
case "黄":
console.log("要注意");
break;
case "青":
console.log("進め！");
break;
default: // どれにも一致しなかった場合、defaultのブロックが実行される
console.log("colorの値が正しくありません");
break;
}
JavaScriptⅡ
「繰り返し処理」について、また「配列」や「オブジェクト」の基本的な使い方を学習します。
while文
繰り返し処理を行うためにはwhile文というものを用います。
let number = 1;
while (number <= 100) {
console.log(number);
number += 1;
}
// 実行結果
1
2
3
:
99
100
[/js]
<strong>whileの注意点</strong>
下記では変数numberの値を更新するコードを書き忘れており、<span class="marker-under">永遠に繰り返し処理が続いてしまいます<strong>(無限ループ)</strong></span>
[js]
let number = 1;
while (number <= 100) {
console.log(number);
// numberの値の更新が抜けている！
}
// 実行結果
1
1
1
: // 無限ループ発生！
[/js]
<h3>for文</h3>
<strong>for文</strong>は、while文に比べてシンプルに書くことができます。
[js]
for (let number = 1; number <= 100; number += 1) {
console.log(number);
}
[/js]
<strong>計算式の省略</strong>
[js]
// 足し算
number = number + 1
number += 1
number++
// 引き算
number = number -1
number -= 1
number--
繰り返し処理の応用
for (let number = 1; number <= 100; number += 1) {
if ( number % 3 === 0) {
console.log("3の倍数です");
} else {
console.log(number);
}
}
// 実行結果
1
2
3の倍数です
4
:
[/js]
<h3>配列</h3>
複数の値をまとめて管理するには、<strong>配列</strong>を用います。<span class="marker-under">配列は、[値1, 値2, 値3] のように作ります。</span>配列に入っているそれぞれの値のことを<strong>要素</strong>と呼びます。
[js]
// 文字列を纏めた配列
["apple", "banana", "orange"]
// 数値を纏めた配列
[21, 43, 12]
// 配列を定数に代入
const fruits = ["apple", "banana", "orange"];
console.log(fruits);
// 実行結果
["apple", "banana", "orange"] // 配列が出力される
配列の要素を取得する
const fruits = ["apple", "banana", "orange"]; console.log(fruits[0]); // 配列[インデックス番号]とすることで、配列の要素を取得できます console.log(fruits[2]); // 実行結果 apple orange
配列の要素を更新する
const fruits = ["apple", "banana", "orange"] console.log(fruits[0]); fruits[0] = "grape"; // インデックス番号が"0"の要素の値を更新 console.log(fruits[0]); // 実行結果 apple grape
配列とfor文
for文を使用すると、配列の中に格納されているすべての値を簡単に出力することができます。
const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < 3; i++) { // iが0-2の間ループする
console.log(fruits[i]); // 変数iを用いて要素を取得
}
[/js]
<strong>length</strong>
下記のように<strong>配列.length</strong>とすることで、配列の<strong>要素数</strong>を取得できます。
[js]
const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < fruits.length; i++) { // lengthを用いて書き換えることができます
console.log(fruits[i]);
}
[/js]
<h3>オブジェクトとは</h3>
配列は複数の値を並べて管理するのに対して、<strong>オブジェクト</strong>はそれぞれの値に<strong>プロパティ</strong>と呼ばれる名前をつけて管理します。
[js]
// オブジェクト
{プロパティ1: 値1, プロパティ2: 値2} // オブジェクトは{}で囲みます
{name: "手裏剣", price: 300}
// オブジェクトに定数を代入する
const item = {name: "手裏剣", price: 300};
console.log(item);
// 実行結果
{name: "手裏剣", price: 300};
オブジェクトの値を取り出す
const item = {name: "手裏剣", price: 300};
console.log(item.name); // itemオブジェクトのnameプロパティの値を取得
// 実行結果
手裏剣
オブジェクトの値を更新する
const item = {name: "手裏剣", price: 300};
item.price = 500; // priceプロパティの値を更新
console.log(item.price);
// 実行結果
500
オブジェクトを要素に持つ配列
配列の要素には、文字列や数値だけでなく、オブジェクトも使うことができます。
const items = [
{name: "手裏剣", price: 300},
{name: "忍者刀", price: 1200}
];
console.log(items[1]); // 配列の中のオブジェクトを取り出す
console.log(items[1].price); // 配列の中のオブジェクトの値を取り出す
// 実行結果
{name: "忍者刀", price: 1200}
1200
undefinedとは
下記のように、配列の存在しないインデックス番号の要素や、オブジェクトの存在しないプロパティの要素を取得しようとすると、undefinedと出力されます。undefinedは特別な値で、値が定義されていないことを意味します。
const animals = ["dog", "cat", "sheep"]; console.log(animals[5]); // 存在しないインデックス番号 const character = [name: "にんじゃわんこ", age: 14]; console.log(character.email); // 存在しないプロパティ // 実行結果 undefined undefined
undefinedを避ける
const characters = [
{name: "にんじゃわんこ", age: 14},
{name: "にんじゃわんこ", age: 14},
{name: "とりずきん"} // プロパティ「age」の値は存在しない！
];
for (let i = 0; i < characters.length; i++) {
const character = characters[i];
if (character.age === undefined) {
console.log("年齢は秘密です"); // ageの値がundefined(定義されていない)の時の処理
} else {
console.log(`${character.age}歳です`);
}
}
[/js]
<strong>複雑なオブジェクト</strong>
オブジェクトの値の部分には、文字列や数値だけでなく、オブジェクトを用いることができます。このようなオブジェクトは、<strong>「オブジェクト名.プロパティ.プロパティ」</strong>のように呼び出します。
[js]
const character = {
name: "にんじゃわんこ",
age: 14,
favorite: { // favoriteプロパティの値がオブジェクトになっている
food: "ラーメン",
sports: "卓球"
}
};
console.log(character.favorite);
console.log(character.favorite.food); // 「オブジェクト名.プロパティ.プロパティ」で呼び出す
// 実行結果
{food: "ラーメン", sports: "卓球"}
ラーメン
オブジェクトの値に配列を用いる
const character = {
name: "にんじゃわんこ",
age: 14,
foods: ["ラーメン", "うどん", "焼きそば"] // プロパティの値に配列を使用できる
};
JavaScriptⅢ
「関数」の定義や呼び出しについて、ES6で追加されたアロー関数について学習します。
※自分はこのアロー関数は全然馴染まなくて可読性も低い気がするので、職場で使用を促されない限り、通常の記述方式の「function()」を使うことにしました。
関数
関数とは、「いくつかの処理を纏めたもの」です。
// 関数の定義
const introduce = function() {
console.log("こんにちは");
console.log("私はにんじゃわんこです");
};
// 関数の呼び出し
introduce();
// 実行結果
こんにちは
にんじゃわんこです
アロー関数
const introduce = () => { // 「function()」の部分を「() =>」と記載できます
console.log("こんにちは");
console.log("私はにんじゃわんこです");
};
関数内で引数を使用する
const introduce = (name) => { // 引数がname変数に代入される
console.log("こんにちは");
console.loc(`私は${name}です`);
};
introduce("にんじゃわんこ");
introduce("ひつじ仙人");
// 実行結果
こんにちは
私はにんじゃわんこです
こんにちは
私はひつじ仙人です
複数の引数を受け取る関数
const introduce = (name, age) => { // カンマ(,)で区切って受け取る
console.log(`私は${name}です`);
console.log(`私は${age}です`);
};
introduce("にんじゃわんこ", 14); // カンマ(,)で区切って複数の引数を渡す
// 実行結果
私はにんじゃわんこです
私は14歳です
戻り値
const add = (a, b) => {
return a + b; // 戻り値
};
const sum = add(1, 3);
console.log(sum);
// 実行結果
4
スコープ
// 「関数の中の定数」
const introduce = () => {
const name = "にんじゃわんこ";
// ◯ 定数nameが使える範囲(スコープ)
};
// ✕ 定数nameが使えない範囲
// 「関数の外の定数」
const name = "にんじゃわんこ";
const introduce = () => {
// ◯ 定数nameが使えるスコープ
}
// ◯ 定数nameが使えるスコープ
[siteorigin_widget class=”AdWidgetItem”][/siteorigin_widget]
[siteorigin_widget class=”WP_Widget_Search”][/siteorigin_widget]
[siteorigin_widget class=”WP_Widget_Pages”][/siteorigin_widget]
[siteorigin_widget class=”AdWidgetItem”][/siteorigin_widget]