Code Journey

30代未経験からプログラミング挑戦中(追うものは追われる者に勝る)

トップ > JavaScript > 【初学者用まとめ(基礎編)】まず覚えるべきJavaScriptのコードの書き方（自習記録）

【初学者用まとめ(基礎編)】まず覚えるべきJavaScriptのコードの書き方（自習記録）

JavaScript

はじめに

前提

まず前提として、この記事を書いているのは未経験からプログラミングに挑戦中の者になります。学習はフィヨルドブートキャンプに参加しながら取り組んでいて、現役のエンジニアの方からレビューをもらいながら進めています。

現在の学習状況は以下を随時更新しているので興味ある方はご覧ください。

hirano-vm4.hatenablog.com

筆者は執筆時点で、Ruby（Ruby on Rails）のプラクティスが終わったあとにJavaScriptに取り組んでいるので、完全に0からではありません。JavaScriptを多言語から学ぶにあたって、まず覚えるべき要点をまとめました。

詳しい解説ではなく要点をまとめた学習記録・ノートになりますのでご注意ください。

コンソールに表示する（console.log()）

  • 括弧 () 内に入力された文字をコンソールに出力
  • シングルクォーテーション（ ' ）かダブルクォーテーション（ " ）で囲む
  • 文の最後はセミコロン（;）
  • 演算子も使える（クォーテーションがつくと文字列になるので注意）
// 8となる
console.log(5 + 3);

// 12となる
console.log(20 - 8);

// 文字列とみなされ、そのまま表示される
console.log("4 + 5");

// 36
console.log(8 * 4);

// 6
console.log(24 / 4);

// 「A」と「B」を連結してコンソールに出力
console.log("A" + "B");

// 文字列の「20」と「15」を連結してコンソールに出力
console.log("20" + "15");

// 1となり、このあたりはRubyと同じ
console.log(7 % 2);

コメントアウト

1行のコメントアウト

  • 文頭に「//」を書くと、その行はコメントとみなされる
const price = prompt("価格を入力せよ"); // 以降はコメントとして使える

複数行のコメント

/*から*/の間は改行があってもコメントアウトになる

/*
aaa
bbb
ccc
*/

変数

変数は数値や文字列などの値を変数（名前が書かれた箱のようなイメージ）に入れて保持できる。

何度も使ったりする場合はその都度コードを書いていたら冗長になってしまうため、変数に格納して使いまわす。

  • 書き方

let 変数名 = 変数に入れる値

※letだけでなくconstやvarもある。再代入できるかどうかなどの細かい違いがあるので「変数と定数の違い」の表を見てください

  • JavaScriptでは2単語以上ではキャメルケース ⚪︎createName　※スネークケースは× create_name
// 変数nameを定義し、「けだま」を代入
let name = "けだま";

// 変数nameの値を出力してください
console.log(name);　//=> けだま
  • 上から順に実行される。変数は上書きできる
let name = "しらたま";
console.log(name);

// 変数nameの値を更新
name = "きなこ";

// 変数nameの値を出力すると「きなこ」になる
console.log(name);
  • 変数自体を更新する
let number = 7;

// 変数numberの値に3を加えると10になる
number += 3 ;


// 変数numberの値を2で割ると5が出力される
number /= 2;

変数と定数の違い

上記のようにletを使うと値を再代入できてしまうがconstであれば以下のようにスコープが狭い。

  • 定数を使うメリット 定数のメリットは、「後から値を更新できない」ところにある。また予期せぬ更新を防ぐ。

基本的にはconstを使う！！

// 定数languageを定義
const language = "フランス語";

// 定数languageの値を出力
console.log(language); // =>　フランス語

console.log(language + "を話せます"); 　// =>　フランス語を話せます

テンプレートリテラル

  • 文字列の中で${定数または変数}とすることで、文字列の中に定数や変数を含めることができ
  • 文字列全体をバッククォーテーション（）`で囲む

この辺Rubyと間違えそう笑 (Rubyは"#{}")

const name = "きなこ";
const age = 4;

// ぼくの名前はきなこです
console.log(`ぼくの名前は${name}です`)
;
// 今は4歳です
console.log(`今は${age}歳です`);

データの入力を受け取る

promptメソッドはユーザーに対して入力を求め、入力された値を戻り値とするメソッド。受け取った値を変数に代入する。そしてコンソールに出力すると受け取れていることが確認できる。

変数 = input('メッセージ文字列')

const text = prompt("入力せよ");

console.log(text);

Chromeのデベロッパーツールで実行してみると「入力ダイアログボックス」が表示される。

promptメソッドの戻り値は数字であっても文字列として保持される

const price = prompt("価格を入力せよ"); // 100を入力

console.log(price + 10);
// =>10010
  • parseIntで整数化させると数値として扱われる
const price = prompt("価格を入力せよ"); // 100を入力

console.log(parseInt(price) + 10);
//=> 110

そもそもconsoleとは？

  • console.logの中でメソッドはlogを指す
  • consoleはオブジェクトが入った変数

    オブジェクトというのはJavaScriptで操作できる「何か」を表すもの

  • 他にもWebブラウザの表すWindowオブジェクトやWebページの内容を表すDocumentオブジェクトなどがある
  • オブジェクトとは複数の「機能（メソッド）」と「変数（プロパティ）」の集合体だといえる

条件分岐

  • 特定の条件を満たす場合のみ実行する
  • 「true（真）」と「false(偽)」で判定する（合わせて真偽値または論理値）
  • JavaScriptにはtrueかfalseを返す関数やメソッドや演算子があり、これを組み合わせて条件分岐を作っていく

（例） isNaN('文字列')：trueかfalseを返すメソッド age < 30：：true　かfalseを返す演算子 if(式や関数など)：trueかfalseかで分岐する文

入力されたものが数値かどうかを確認する

isNaN関数を浸かって実践。promptメソッドを浸かって入力されたものが数値になるかを判断してみます。

  • isNaN関数書き方：isNaN( 値 )　値は数値に変換は不可？
    • NaNは「Not a Number」の略
    • 渡された値が数値に変換可能ならfalse
    • 変換不可能ならtrueを返す
isNaN('1234') // => false

isNaN('-10') // => false

isNaN('3.14') // => false

isNaN('５５５') // =>true 全角はNG

isNaN('abc123') // => true

if文で数値でない場合に処理を実行する

  • 書き方
if (式や関数など) {
  実行する処理
}

(式や関数など)がtrueの時にブロック内の処理を実行する

const text = prompt( "入力せよ" );
if ( isNaN( text ) ) {
    console.log( "数字ではありません" );
}
// => 数字ではありません

数値のときに計算する場合

isNaNメソッドのまま逆の判定をしたい時は ! isNaNとすることでtrueをfalse逆にすることが出きる。Chromeのデベロッパーツールで100を入力してみると計算できていることがわかる。

const text = prompt( "入力せよ" );
if ( ! isNaN( text ) ) {
    console.log( parseInt( text )  + 80 );
}

// => 180

条件に合致しないときの処理も記述する

const text = prompt( "入力せよ" );
if ( ! isNaN( text ) ) {
    console.log( parseInt( text )  + 80 );
} else {
    console.log( "数字ではない" );
}

// => 数字ではない　　※文字列を入力

比較演算子を使ってif文をつくる

JavaScriptの比較演算子は以下の一覧のようになっている。

比較演算子 説明
== 等しいかどうかを比較（型の変換あり）
!= 等しくないかどうかを比較（型の変換あり）
=== 厳密な等価性を比較（型の変換なし）
!== 厳密な不等価性を比較（型の変換なし）
< より小さいかどうかを比較
> より大きいかどうかを比較
<= 以下かどうかを比較
>= 以上かどうかを比較

Rubyの比較演算子と比較して特に違いを感じたのは「==」「===」と「!=」「!==」の違いです。

123 == '123' // => true  型変換されるので等しいという判定になる

123 === '123' // => false 型変換されないので等しくないとなる

これは「!==」も同様です。「==」「!=」はこのルーズさがあるので問題を引き起こす可能性があり「!==」「===」が推奨と学習テキストには記述がありました。

この比較演算子とif文を使って条件分岐を作ってみまます。

const text = prompt("年齢は？");
const age = parseInt(text);
if (age >= 20) {
  console.log("成人");
}

// => 成人

3つ以上の条件分岐

これはRubyとほぼ同じ。しかしRubyだとelsifだがJavaScriptではelse if(半角スペースあり)となるあとはif else if elseそれぞれで{}を用意する必要がある。

if (式や関数) {
  // 実行する処理
} else if (式や関数) {
  // 実行する処理
} else (式や関数) {
  // 実行する処理
}

上から実行され該当するしたところで処理は終了。

使用例

const text = prompt("年齢を入力してください");
const age = parseInt(text);

if (age < 20) {
  console.log("未成年");
} else if (age < 65) {
  console.log("成人");
} else {
  console.log("高齢者");
}

条件分岐の中に条件分岐を書く

const text = prompt("年齢を入力してください");

if (!isNaN(text)) {
  const age = parseInt(text);
  if (age < 20) {
    console.log("未成年です");
  } else {
    console.log("成人です");
  }
}

switch文

switch 文は対象となる値がいずれかの値と一致するかどうかを調べて処理を分けることができる。

function evaluateNumber(number) {
  switch (true) {
    case typeof number !== 'number':
      console.log('無効な数値です');
      break;
    case number > 0:
      console.log('入力した数値は正の数です');
      break;
    case number < 0:
      console.log('入力した数値は負の数です');
      break;
    case number === 0:
      console.log('入力した数値はゼロです');
      break;
    default:
      console.log('該当する条件がありません');
  }
}

// 異なる数値を試す
evaluateNumber(10); // '入力した数値は正の数です'
evaluateNumber(-5); // '入力した数値は負の数です'
evaluateNumber(0);  // '入力した数値はゼロです'
evaluateNumber('abc'); // '無効な数値です'
evaluateNumber(true);  // '該当する条件がありません'

Switchのあとの（）内に記述した式を評価して、その値がcaseの後に書かれたいずれかの値と一致するかどうか調べて一致した処理を行う。

breakを記述すると一致した場合処理を終える。breakがないと一致した式以降の処理も全て実行されてしまうため注意。

また、いずれの値とも一致しなかった場合は default 句の後に記述されている処理を実行する。 default 句は不要であれば省略も可能。

なお、条件の比較は== 演算子ではなく === 演算子を使って比較されることに留意する。

使いどころとしては「if 文を使って数多くの値と === 演算子を使って一致するものがないかどうか調べたい場合」にはswitch 文を使うとすっきりする。

論理演算子

論理演算子
論理積 && かつ（左右の値がtureのときだけtureを返す）
論理和 || または（左右一歩位がtrueのときにtrueを返す）
論理否定 ! trueとfalseを逆転する
$$
const text = prompt("年齢を入力してください");
const age = parseInt(text);

if (age >= 6 && age <= 15) {
  console.log("義務教育期間中");
}
||
const text = prompt("年齢を入力してください");
const age = parseInt(text);

if (age < 20 || age >= 65) {
  console.log("未成年または高齢者");
}

if文には真偽値を返す式や関数以外を渡すこともできる

falseとみなされる値
false
0
-0
0n
"" (空文字)
null
undefined
NaN

数値の 0 ・文字列の空文字、・null ・undefined などは falseとなり、それ以外がtrueとなる！

たとえばこんなif分はtrueとなりブロックの中のコードが実行される。

if (0) {
  // 実行したい処理
}

if文を1行で書く

以下のような記述を覚えておくとコードがスッキリする

処理が1行しかない場合の省略形

if (num > 80) console.log("numは80より大きいです。"); このように記述が可能

三項演算子で記述

条件式 ? trueの処理 : falseの処理

配列

配列は中に複数の値を入れられる「型」。要素の値は文字列、数値なんでもOK！

配列の書き方

変数 = [値0, 値1, 値2, …]

配列の要素の取り出し方

配列内の要素を利用する時は、変数名のあとに各カッコで囲んで数値を記述する。この数値を「インデックス（添え字）」という。

なお、このインデックスは最初の値は「0」から始まるので注意（1ではない）。

先頭を取得

変数[0]

const member = ["a", "b", "c", "d", "e"];

console.log(member[0]); //=> "a"

末尾を取得

Rubyのように変数[-1]では取得できない

const member = ["a", "b", "c", "d", "e"];

// 方法1: 配列のlengthメソッドを使用
const lastElement = member[member.length - 1];
console.log(lastElement); // "e"


// 方法2: pop() メソッドを使用して最後の要素を取り出す
const lastElement2 = member.pop();
console.log(lastElement2); // "e"

配列の要素を書き換える

以下のようにすると配列の要素を書き換えることができる。

const member = ["a", "b", "c", "d", "e"];

member[0] = "x";

console.log(member[0]);

//  "x"

配列の要素が空のパターン

以下のように要素が空の場合、その要素を取り出すとundefinedになる。

let arr = [1, , 3];

console.log(arr);
>> [1, empty, 3]

console.log(arr[1]);
>> undefined

要素の値として式を指定

配列を作成する時に要素の値として数値や文字列などのリテラルだけではなく式を指定することができる。

let tax = 1.1;
let price = [100 * tax, 200 * tax];

console.log(price);
>> [110, 220]

多次元配列

配列の中の要素に配列が入っている場合、多次元配列と呼ぶ

let familyData = [
  ["Shiratama", 5],
  ["Kinako", 4],
];

多次元配列の値を取り出し方

以下のように「配列の要素⚪︎個の配列の⚪︎個目の要素」として取得する(配列[0][0]など)

let familyData = [
  ["Shiratama", 5],
  ["Kinako", 4],
];

console.log(familyData[0]);
// ['Shiratama', 5]

console.log(familyData[0][0]);

// Shiratama

配列を操作する際に使える便利なメソッド

配列はArray型のオブジェクト。

コード 説明
array.length 配列の要素数を返す。
array.push(element) 配列の末尾に要素を追加する。
array.pop() 配列の最後の要素を削除して返す。
array.remove(value) 配列から値と一致する要素を取り除く。
array.sort() 配列の要素を並べ替える。
array.shift() 配列の先頭要素を削除して返す。

参照：Array - JavaScript | MDN

様々なオブジェクトとそのメソッドがあるためリファレンスを確認する！！

JavaScript | MDN

ブラウザのコンソールで配列の中身を表示する

以下を実行して、コンソールを確認。「▶️」を押すと、中身が確認できる。

JavaScriptでは文字列も連続のデータ

文字列ABCDE"であってもfor文で配列のように文字列[要素数]で値を取得できる。

const teams = "ABCDE";

console.log(teams[0]);

// A

for (let team of teams) {
  console.log(team);
}

// A
// B
// C
// D
// E

変数に値を加える際に省略して記述する方法（代入演算子）

代入演算子 例 説明
+= a += 10 加算代入 (a = a + 10)
-= a -= 5 減算代入 (a = a - 5)
*= a *= 2 乗算代入 (a = a * 2)
/= a /= 3 除算代入 (a = a / 3)
%= a %= 4 剰余代入 (a = a % 4)
**= a **= 2 指数代入 (a = a ** 2)

インクリメント演算子

JavaScriptには、インクリメント演算子として ++ が用意されていて、変数の値を1つ増加させるための演算子。 インクリメント演算子は、ループ処理やカウンターの更新など、変数の値を増加させる際によく使われる。

  • 前置インクリメント (++a): 値を増加させた後の値を返す
let a = 5;
let b = ++a;
console.log(a); // 結果は 6
console.log(b); // 結果は 6

++a が前置インクリメントで、a の値が増加した後に b に代入されている。そのため、a と b はともに 6 の値を持っていいる。

  • 後置インクリメント (a++): 値を返した後に値を増加させる
let x = 5;
let y = x++;
console.log(x); // 結果は 6
console.log(y); // 結果は 5

後置インクリメントの場合、まず x の値が y に代入され、その後に x の値が増加する。そのため、x は 6 に増加し、y は元の値の 5 を持っている。

デクリメント演算子

インクリメント演算子の逆。インクリメントが変数の値を1つ増加させる演算子であるのに対し、デクリメントは変数の値を1つ減少させる演算子。主に数値の変数やカウンターの値を減らす際に使用する。

  • 前置デクリメント (--a): 値を減少させた後の値を返す
let x = 10;
let y = --x;
console.log(x); // 結果は 9
console.log(y); // 結果は 9

--x が前置デクリメントで、x の値が減少した後に y に代入されている。そのため、x と y はともに 9 の値を持っている。

  • 後置デクリメント (a--): 値を返した後に値を減少させる 後置デクリメントを使った場合、値を返す順序が異なる
let p = 10;
let q = p--;
console.log(p); // 結果は 9
console.log(q); // 結果は 10

後置デクリメントの場合、まず p の値が q に代入され、その後に p の値が減少する。そのため、p は 9 に減少し、q は元の値の 10 を持っている。

繰り返し

名の通り同じ処理を繰り返す文。指定した条件がtrueの間処理が繰り返され、指定した条件から外れると処理を終了させる。ループとも呼ばれる。

while文

while文は、条件を満たす間繰り返しをする書き方になります。（while　〜する限り）

while (継続条件) {
  繰り返したい処理;
}

let count = 0;
while (count < 10) {
  console.log(`${count + 1}回目の表示です`);　// 0から始まるの表示が1から始まるよう+1している
  count++; // 変数countに1を毎回足す
}
// 1回目の表示です
// 2回目の表示です
// 3回目の表示です
// 4回目の表示です
// 5回目の表示です
// 6回目の表示です
// 7回目の表示です
// 8回目の表示です
// 9回目の表示です
// 10回目の表示です

毎回変数countに数字が1ずつ追加されていってcount < 10が満たす間は繰り返される。

for文

for文は回数が決まった繰り返しに向いている。

  • 書き方
for (初期化; 継続条件; 最終式) {
  繰り返しする処理;
}

  • 動き方

    • 処理を始める前に初期化が実行される
    • 継続条件がtrue(真)の間、繰り返される
    • 最終式はブロック処理が終わるごとに実行される

  • 使用例

for (let count = 0; count < 10; count++) {
  console.log(`${count + 1}回目の表示です`);
}

// 1回目の表示です
// 2回目の表示です
// 3回目の表示です
// 4回目の表示です
// 5回目の表示です
// 6回目の表示です
// 7回目の表示です
// 8回目の表示です
// 9回目の表示です
// 10回目の表示です

逆順で繰り返す

1ずつ増えていくではなく、1ずつ減らしていくパターンで繰り返したいときにはデクリメント演算子を使用する。

for (let count = 10; count >= 0; count--) {
  console.log(`残り${count}`);
}

残り10
// 残り9
// 残り8
// 残り7
// 残り6
// 残り5
// 残り4
// 残り3
// 残り2
// 残り1
// 残り0

繰り返しからの脱出(break)&スキップ(continue)

  • break

中にif文を使って条件を指定して、その条件を満たす場合に繰り返しを中断する

for (let count = 0; count < 10; count++) {
  if (count == 5) {
    break;
  }
  console.log(`${count + 1}回目の表示です`);
}

// 1回目の表示です
// 2回目の表示です
// 3回目の表示です
// 4回目の表示です
// 5回目の表示です
  • continueを使ってスキップする

continueの場合は条件に合致したときはスキップし、繰り返しは継続する。

for (let count = 0; count < 10; count++) {
  if (count == 5) {
    continue;
  }
  console.log(`${count + 1}回目の表示です`);
}

// 1回目の表示です
// 2回目の表示です
// 3回目の表示です
// 4回目の表示です
// 5回目の表示です　　6回目の表示がなくなっている！
// 7回目の表示です
// 8回目の表示です
// 9回目の表示です
// 10回目の表示です

繰り返しの中で繰り返しを使う

繰り返し分の中で、違う繰り返し文を使うことももちろん可能。

  • 掛け算1〜9の位を計算
for (let a = 1; a < 10; a++) {
  for (let b = 1; b < 10; b++) {
    console.log(`${a} × ${b} = ${a * b}`);
  }
}

繰り返しの中の繰り返しなので変数aもbも使える。

配列を使って繰り返しする

for~of文を使う(ES2015から利用可）

for~of文は配列から要素を1つずつ順番に取り出して繰り返しできる（ES2015から利用可）。

const members = ["a", "b", "c", "d", "e"];

for (let member of members) {
  console.log(`${member}さん`);
}

// aさん
// bさん
// cさん
// dさん
// eさん

for文を使って配列のインデックスを指定する

for~of文が使えない場合での以下のように配列のインデックスを指定できる。for文で定義した変数を活用する。

const members = ["a", "b", "c", "d", "e"];

for (let count = 0; count < 5; count++) {
  console.log(`${members[count]}さん`);
}

// aさん
// bさん
// cさん
// dさん
// eさん

（練習）5チームのリーグ戦の対戦表をつくる

  • A~Eまでの5チーム
  • A 対 Aなどのあり得ないパターンを排除したい

チーム名を配列にセットし、for〜of文をネストさせ、if文で同じ値だった場合はスキップさせる。しかしこれだとA 対 Aと同チームは排除できるが、A 対 BとB 対 Aのように同じ組み合わせは残ってしまう。

const teams = ["A", "B", "C", "D", "E"];

for (let team1 of teams) {
  for (let team2 of teams) {
    if (team1 == team2) {
      continue;
    } else {
      console.log(team1 + " 対 " + team2);
    }
  }
}

//  A 対 B
//  A 対 C
//  A 対 D
//  A 対 E
//  B 対 A
//  B 対 C
//  B 対 D
//  B 対 E
//  C 対 A
//  C 対 B
//  C 対 D
//  C 対 E
//  D 対 A
//  D 対 B
//  D 対 C
//  D 対 E
//  E 対 A
//  E 対 B
//  E 対 C
//  E 対 D

以下のでも同様

const teams = ["A", "B", "C", "D", "E"];

for (let team1 of teams) {
  for (let team2 of teams) {
    if (team1 != team2) {
      console.log(team1 + " 対 " + team2);
    }
  }
}

for文を使って以下のようにやれば実現できそう

const teams = ["A", "B", "C", "D", "E"];

for (let i = 0; i < teams.length; i++) {
  for (let j = i + 1; j < teams.length; j++) {
    console.log(`${teams[i]} 対 ${teams[j]}`);
  }
}


// A 対 B
// A 対 C
// A 対 D
// A 対 E
// B 対 C
// B 対 D
// B 対 E
// C 対 D
// C 対 E
// D 対 E

関数

  • 関数を作ることを「関数を定義する」という
  • プログラムの一部を繰り出して名前をつけるイメージ
function 関数名(引数1, 引数2, ...){
  実行される処理1;
  実行される処理2;
  ...

  return 戻り値;
}

関数名(引数1, 引数2, ...); // 呼び出し方

関数を自分で作るメリット

  1. プログラムの構造がわかりやすくなる プログラムを一括りにして名前をつけることでもあるため、そのプログラムが何をしているのかを理解しやすくなる。故に、命名が重要になる！

  2. 関数は何度も呼び出せる 関数は使い回すことができる。そのため重複したコードを書く必要がなくなり管理もしやすく、コードの記述量も減る。

関数の書き方

  • アロー関数式（ES2015からできるようになった記述）
    • =>を「アロー」と呼び()=>{}と組み合わせて関数を作る
const 変数名 = () => {
  関数内で実行する文
}
const test = () => {
  console.log("テスト");
};

アロー関数式の省略形

関数ブロック内で実行する処理が return 文だけだった場合、ブロックをあらわす { と } 、そして return も省略して次のように記述することができる

let 変数名 = (引数1, 引数2, ...) => 戻り値;

引数が一つで関数ブロック内で実行する処理が return 文だけだった場合

let 変数名 = 引数 => 戻り値;

使用例

let calcScore = (x, y) => x + y;

let result = calcScore(10, 20);
console.log(result);
// 30

関数の呼び出し

関数名();で呼び出す。引数を受ける場合は()内に値を入力する。

const test = () => {
  console.log("テスト");
};

test();

// テスト

引数を使う関数

()内に引数名を設定して引数を渡して関数を呼び出す。

const createLetter = (name) => {
  console.log(`${name}さん、こんにちは`);
};

createLetter("しらたま");
createLetter("きなこ");

// しらたまさん、こんにちは
// きなこさん、こんにちは

何度も同じ処理をする場合、引数を設定することで名前が変わっても同様の処理を行うことができる。

複数の引数を渡す

const createLetter = (name, age) => {
  console.log(`${name}さん、こんにちは`);
  console.log(`${age}歳の誕生日おめでとう`);
};

createLetter("しらたま", 6);
createLetter("きなこ", 4);

// しらたまさん、こんにちは
// 6歳の誕生日おめでとう
// きなこさん、こんにちは
// 4歳の誕生日おめでとう

functionで関数を作る（ES2015以前の場合）

function createLetter(name) {
  console.log(`${name}さん、こんにちは`);
}

createLetter("しらたま");
createLetter("きなこ");

// しらたまさん、こんにちは
// きなこさん、こんにちは

関数の中で関数を使う（テンプレート文字列 ※ES2015〜）

「テンプレート文字列」を使うと何度もconsole.log()を書く必要がなくなる - テンプレート文字列は``(バッククォーテーション)で囲んだ範囲に書いた文字列 - この範囲での改行やスペースはプログラムの結果に反映される - 長い文章を書く場合に有効な記述

`文章1
文章2`
  • 使用例
const createInvoice = (name, price) => {
  const msg = `${name}様
お買い上げありがとうございます。
${price}円をお支払いください。`;
  console.log(msg);
};

createInvoice("しらたま", 1000);
createInvoice("きなこ", 800);

// しらたま様
// お買い上げありがとうございます。
// 1000円をお支払いください。

// きなこ様
// お買い上げありがとうございます。
// 800円をお支払いください。

関数リテラル

関数リテラルという方法で関数を定義することもできる。 以下のように書く。

let 変数名 = function(引数1, 引数2, ...){
  実行される処理1;
  実行される処理2;
  ...

  return 戻り値;
};

変数名(引数1, 引数2, ...); // 呼び出しは同じ

このように変数の中にfunctionを定義する。変数名は変数名となる。引数がない場合でもfunctionの後ろには必ず()の記述が必要な点に注意。

関数リテラルの使い所 関数リテラルでは関数に名前をつける必要がない。そのため1度しか使われない関数の場合、各々を1つずつ関数宣言として定義していく場合、関数名が他の関数や変数名と被ってしないかを気にしないといけなくなる。

しかし、関数リテラルを使えば関数名を指定せずに関数を定義できるためそのような心配がいらなくなる

一度しか利用されない関数は、例としてイベント処理やコールバック関数などで使用される。

ローカル変数

先ほど使った関数内のmsg変数はこのメソッド内でのみ呼び出せる。これをローカル変数という。

const createInvoice = (name, price) => {
  const msg = `${name}様
お買い上げありがとうございます。
${price}円をお支払いください。`;
  console.log(msg);
};

console.log(msg);

// 呼び出そうとしてもReferenceError: msg is not defined(定義されていないため参照できない)となる

戻り値を返す関数

自作の関数で戻り値を返したい場合はreturn文を書く

  • 書き方
const 変数 = () => {
  関数で実行する処理;
  return;
};
  • 例
function add(a, b) {
  return a + b;
}

console.log(add(1, 4));

// 5

returnがなくなると期待した値が出力されずundefinedとなる

function add(a, b) {
  a + b;
}

console.log(add(1, 4));

undefined

関数から複数の値を返す

returnを使うと1つの値しか戻せない。2つ以上の値を戻り値したい場合は、配列などで返すことができる。

function test(num1, num2, num3){
  const maxNum = Math.max(num1, num2, num3);
  const minNum = Math.min(num1, num2, num3);

  return [maxNum, minNum];
}

let numArray = test(80, 60, 70);

console.log("Max = " + numArray[0]);

// Max = 80

console.log("Min = " + numArray[1]);
// Min = 60

可変長引数で都度変わる引数の数に対応する

JavaScript では関数で引数を記述するときに、引数の前に '...' を付けると、呼び出し側から渡されてきたすべての値を要素とした配列が要素に格納される（'...'を付けた引数を Rest Parameter と呼ぶ）。

呼び出し側で2つ引数がわたされても、それ以外の数が渡されても受け取って取り扱うことができる。

function 関数名(...引数){
  ...
}

使用例

function calcSum(...num) {
  let sum = 0;
  for (let i = 0 ; i < num.length ; i++){
    sum += num[i];
  }

  return sum;
}

calcSum(1, 2, 3);
>> 6

calcSum(1, 2, 3, 4, 5);
>> 15

通常の引数と組み合わせて使用することできる

function 関数名(引数1, 引数2, ...引数3){
  ...
}

JavaScriptでは設置した引数に過不足があってもエラーにならない

  • JavaScriptでは設置した引数に過不足があってもエラーにならない
  • 渡されてきた値が多かった場合は単に使われず、少なかった場合に値が格納されなかった引数は undefined となる
  • ない値に対して参照が行われるとエラーとなる

再帰関数

  • 再帰関数とは関数内で自分自身の関数を呼びだすこと
function test(){
  test();
}

test();
  • 無限ループにならないようにこの条件になったら自分自身の呼び出しを終了するような記述が必要
function test(){
  if (条件式) {
    test();
  }

  return;
}

test();

コールバック関数

コールバック関数は、他の関数内で使用される関数。コールバック関数は、ある特定のイベントが発生したときに呼び出されたり、他の関数の一部として実行されたりする。

const numbers = [1, 2, 3, 4, 5];

function processNumber(number) {
  console.log(number * 2);
}

numbers.forEach(processNumber);

上記のforEach メソッドは、コールバック関数を受け取り、それぞれの要素に対してその関数を実行する使用例。このように、JavaScript では別途定義した関数を別の関数を呼びだす時に引数に指定して渡すことができる。

コールバック関数が主に使われるケース コールバック関数は主に非同期処理を行う時に使用される。呼び出した関数の処理が終わったあとなどにコールバック関数として指定した関数を実行させたい場合に使われる。

例：「一定時間経過したあとに特定の処理を実行して欲しい場合」「ボタンがクリックされたときに実行して欲しい処理を指定する」

高階関数

高階関数は、他の関数を引数として受け取るか、関数を返す関数。これにより、より柔軟なコードを書くことができる。 例えば、以下の高階関数 multiplyBy は、数値を受け取り、それを掛け算する新しい関数を返している。

function multiplyBy(factor) {
  return function (number) {
    return number * factor;
  };
}

const double = multiplyBy(2); // double は掛け算2を行う関数
const triple = multiplyBy(3); // triple は掛け算3を行う関数

console.log(double(5)); // 10
console.log(triple(5)); // 15

オブジェクトを使って複数のデータを扱う

書き方

変数 = { data1 : 値a, data2 : 値b }

  • オブジェクトではデータをプロパティ名(キー)と値のペアで管理する
  • 一組のプロパティ名と値で表されるデータのことをプロパティと呼ぶ
  • ブジェクトでは複数のプロパティをまとめて管理することができる
  • プロパティの値には数値や文字列などのプリミティブ型の値のほかに、配列や関数といったオブジェクト型の値を指定することができる
  • 値として関数を記述したプロパティのことをメソッドとも呼ぶ

値の取り出し方

「変数名.プロパティ」
const person = {
  firstName: "A",
  lastName: "B",
  age: 20,
};

console.log(person.firstName);

// A
「変数名['プロパティ']」
const person = {
  firstName: "A",
  lastName: "B",
  age: 20,
};

console.log(person["firstName"]);

// A

プロパティの追加

let mySize = {
  width: 400,
  height: 300,
};

console.log(mySize);

myBox.color = 'Red'; // 新しいプロパティを追加

console.log(mySize);
>> {width: 400, height: 300, color: 'Red'}

存在しないプロパティ名を指定して値を代入することができる。

プロパティを削除

オブジェクトからプロパティを削除したい場合には delete 演算子を使う。

delete オブジェクト.プロパティ名
delete オブジェクト['プロパティ名']

以下のように削除されていることがわかる

let mySize = {
  width: 400,
  height: 300,
};

console.log(mySize);

myBox.color = 'Red'; // 新しいプロパティを追加

console.log(mySize);
>> {width: 400, height: 300, color: 'Red'}

delete mySize.color;  // プロパティを削除
console.log(mySize);
>> {width: 400, height: 300}

オブジェクトのプロパティを順番に取得する

for...in 文でオブジェクトのプロパティ名を順に取り出しながら繰り返し処理を行うことができる。

let cat = {
  name:'しらたま', 
  age:5,
  hobby:'寝る'
};

for (key in cat){
  console.log('cat.'+ key + '=' + cat[key]);
}

// cat.name=しらたま
// cat.age=5
// cat.hobby=寝る

プロパティの一覧を取得する(keys)

オブジェクトに含まれるプロパティ名の一覧を取得するには Object オブジェクトの keys メソッドを使う。引数に指定したオブジェクトのキーを配列で返してくれるメソッド。

Object.keys(オブジェクト)

let cat = {
  name: "しらたま",
  age: 5,
  hobby: "寝る",
};

let keyArr = Object.keys(cat);
console.log(keyArr);

// ["name", "age", "hobby"]

forEach メソッドをあわせて使って値を順に取得する

配列の要素を順に取得する Array オブジェクトの forEach メソッドをあわせて使うことでプロパティの値を順に取得することもできる。

let cat = {
  name: "しらたま",
  age: 5,
  hobby: "寝る",
};

let keyArr = Object.keys(cat);
keyArr.forEach(function (element) {
  console.log(cat[element]);
});

// しらたま
// 5
// 寝る

複数のオブジェクトを配列にまとめる

配列の要素にオブジェクト（ハッシュ）を入れた場合の値の取り出し方。 配列の要素数を指定した後に上記の取り出し方をすればOK！

const persons = [
  { firstName: "A", lastName: "B", age: 20 },
  { firstName: "C", lastName: "D", age: 50 },
];

console.log(persons[0]["firstName"]);
console.log(persons[1]["firstName"]);

// A
// C

プロパティの値の一覧を取得する(values)

オブジェクトに含まれるプロパティの値の一覧を取得するには Object オブジェクトの values メソッドを使う 。引数で渡したオブジェクトの値を配列で返してくれる。

Object.values(オブジェクト)

let cat = {
  name: "しらたま",
  age: 5,
  hobby: "寝る",
};

let keyArr = Object.values(cat);
console.log(keyArr);

//  ['しらたま', 5, '寝る']

プロパティの名前と値の一覧を取得する(entries)

オブジェクトに含まれるプロパティの名前と値のペアの一覧を取得するには Object オブジェクトの entries メソッドを使う。プロパティごとに配列で返してくれる。

Object.entries(オブジェクト)

let cat = {
  name: "しらたま",
  age: 5,
  hobby: "寝る",
};

let keyArr = Object.entries(cat);
console.log(keyArr);

プロパティ名と値のデータからオブジェクトを作成する(fromEntries)

※ fromEntries メソッドは ECMAScript 2019 (ES10) から導入

プロパティと値のデータからオブジェクトを作成するには Object オブジェクトの fromEntries メソッドを使う。

Object.fromEntries(オブジェクト)

反復処理可能なオブジェクトを引数に指定する（Array や Map など）。このメソッドを実行すると、指定されたオブジェクトをもとに新しい Object オブジェクトが生成される。

指定するオブジェクトは、データのペアが2つあるものでなければならない。1つ目の値はプロパティ名として使用され、2つ目の値はそれに対応するプロパティの値として格納される

let catArray = [
  ["name", "しらたま"],
  ["age", 5],
  ["hobby", "寝る"],
];

let catObj = Object.fromEntries(catArray);
console.log(catObj);

// {name: 'しらたま', age: 5, hobby: '寝る'}

ひとつしか値がない要素がある場合はundefinedになる

let catArray = [
  ["name", "しらたま"],
  ["age"],
  ["hobby", "寝る"],
];

let catObj = Object.fromEntries(catArray);
console.log(catObj);

// 'しらたま', age: undefined, hobby: '寝る'}

複数のオブジェクトを一つにまとめる(assign)

複数のオブジェクトを一つにまとめたるには Object オブジェクトの assign メソッドを使う。

Object.assign(コピー先オブジェクト, コピー元オブジェクト1, コピー元オブジェクト2, ...)

let objA = { a: 800 };
let objB = { b: 350 };
let objC = { c: 600 };

let allObj = Object.assign(objA, objB, objC);

console.log(allObj);

// {a: 800, b: 350, c: 600}

console.log(objA);
// {a: 800, b: 350, c: 600}

上記のように3つのオブジェクトを1つにまとめることができる。注意すべきなのは元のオブジェクトも変更が加えられるという点です。

もし、変更を加えたくない場合は以下のようにする。

let objA = { a: 800 };
let objB = { b: 350 };
let objC = { c: 600 };

let allObj = Object.assign({}, objA, objB, objC);

console.log(allObj);
// {a: 800, b: 350, c: 600}

console.log(objA);
// {a: 8
tenn00}
  • 同じプロパティ名があった場合は後のキーと値で上書きされる

配列なので繰り返し文で取得することもできる

const persons = [
  { firstName: "A", lastName: "B", age: 20 },
  { firstName: "C", lastName: "D", age: 50 },
];

for (let person of persons) {
  console.log(person["firstName"]);
}

Webページに組み込む

HTMLでJSファイルを読み込む

HTMLの中で<script src="ファイル名.js"></script>タグを使ってファイルを読み込む。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>サンプル</title>
  </head>
  <body>
    <h1>サンプル</h1>
    <input type="test" />
    <button>実行</button>
    <p>結果表示</p>
    <script src="test.js"></script>　// HTMLの中にscriptタグをつけてjsファイルを読み込む
  </body>
</html>

ブラウザにhtmlタグをドラッグ&ドロップすると表示が確認できる。もちろんまだjsファイルには何も書いていないので見たの表示はHTMLの情報のみが記述されている。

HTMLの要素を選択する

  • JavaScriptでHTML操作をするには、まず対象となる要素を選択する
  • そのために使うのがquerySelector(クエリセレクター)メソッド
    • セレクタとは要素を選び出す時の指示になる文字列のこと
    • p要素であれば「'p'」、h1要素を選びたければ「'h1'」と指定する
  • querySelector(クエリセレクター)メソッド

書き方 let 変数 = document.querySelector('文字列') - 正式にはwindow.document.querySelector()だがwindowは省略できる - querySelector(クエリセレクター)メソッドは見つけた要素のElementオブジェクトを返すのでその後に使うために変数にいれておく

innerTextで要素の中のテキストにアクセスする

  • 目的の要素を表すElementオブジェクトが取得できれば、あとはそれが持つメソッドやプロパティを使って操作できる
  • 要素の中のテキストはinnerTextプロパティから利用できる

  • 書き方 変数.innerText　変数にはElementオブジェクトを入れた変数。innerTextは要素内部のテキストを表す

  • 使い方

test.js

const element = document.querySelector("p");
element.innerText = "文字を変更しました。";

p要素を取得してテキストが書き換わったことがわかる。

うまくいかない場合はブラウザのデベロッパーツールのコンソールに表示されるので、そこを確認。

入力ボックスからデータを受け取る

先ほど入力していたHTMLのinput要素に入力された値を受け取って表示する。

  • input要素 <input type="text">

これです

  • その他のinput要素抜粋

    • type="radio"
    • type="password"
    • type="checkbox"

  • 入力ボックスに入力した値をJavaScriptで利用するにはvalueプロパティを利用する <input type="text">のtextボックスに入力された値は変数.valueで取得する

const input = document.querySelector("input"); 
const element = document.querySelector("p");

element.innerText = input.value;
  1. inputをセレクタとしてドキュメントに問い合わせて、見つけた要素を新規作成した変数に入れる
  2. pをセレクタとしてドキュメントに問い合わせて、見つけた要素を新規作成した変数に入れる
  3. 変数inputの値を変数elementのinnerTextプロパティに入れる

しかし、まだこの状態だと「実行」を押しても何もなく、元々あった文字列も消えている。

ユーザーのアクションに反応するイベント

  • JavaScriptはWebブラウザが読み込まれた瞬間に実行される
  • 実行した時点ではinput要素には何も入力されていない
  • 入力されていないinput要素から値を取得して、p要素のテキストとして読み込まれたため実行結果が消えている状態
  • これを解決するには「イベント」を使ってユーザーが何かをしたタイミングで実行させる必要がある

①ユーザーが実行ボタンをクリック（イベント）

② 連動してコードを実行させる

イベントと関数を結びつける

ElementオブジェクトのaddEventLisnerメソッドを使う

  • 書き方 変数.addEventListener("イベントタイプ", 関数); 1つめの引数にイベントタイプ、2つめの引数に関数を指定する。関数を指定する第2引数の書き方は、アローとブロックを指定する。

  • イベントタイプ 今回は'click'を指定する。

様々なイベントタイプがある

  • 第2引数の関数の書き方
変数.addEventListener("イベントタイプ", () => {
  実行したい処理;
});
  • 実演
const input = document.querySelector("input");
const button = document.querySelector("button");
const element = document.querySelector("p");

button.addEventListener("click", () => {
  element.innerText = input.value;
});

例外処理

プログラムの中でエラーが発生した場合、例外に対する処理を設定していない場合にはプログラムがその時てで強制終了してしまう。そのために例外処理を使う。

try...catch文を使った例外処理

以下のように計算をする際に数値だけではなく長整数が混ざってしまった場合は以下のようにエラーになる。

function sum(num1, num2){
  let sum = num1 + num2;
  return sum;
}

console.log('開始');

let result = sum(10, 8n);
console.log(result);

console.log('終了');

// 開始
// TypeError: Cannot mix BigInt and other types, use explicit conversions

このままだとプログラムが止まって終わってしまうので、適切に例外を捉えて処理を行う。

try...catch文の使い方

try{
  例外が発生する可能性がある文を記述
} catch(e) {
  例外をキャッチしたときに実行される処理
}
  • catch のあとの括弧の中に記述した変数 e (変数名は任意)には、例外がスローされたときに設定された値が格納される
  • 通常は Error オブジェクト（自分で例外をスローする場合には任意の値を指定できるので Error オブジェクトとは限らない）
function sum(a, b){
  let sum;
  try{
    sum = a + b;
  } catch(e) {
    console.error(e);
    return console.log('エラーになりました');
  }

  return sum;
}

console.log('開始');

console.log(sum(10, 8));
console.log(sum(10, 8n));

console.log('終了');

// 開始
// 18
// TypeError: Cannot mix BigInt and other types, use explicit conversions
// エラーになりました
// 終了

このようにエラーとなりつつも終了まで実行されていることがわかる。

try...catch...finally文を使った例外処理

try...catch...finally 文を使用すると、 try ブロックの中で例外がスローされたかどうかに関わらず、必ず最後に実行する処理を記述することができる。

try{
  例外が発生する可能性がある文を記述

} catch(e) {
  例外をキャッチしたときに実行される処理

} finally {
  最後に実行される処理
}

finally は、 try ブロックの処理が終わったあと、また例外がスローされた場合は catch ブロックの処理が終わったあとで必ず実行される。

function calc(a, b) {
  let sum;
  try {
    sum = a + b;
  } catch (e) {
    console.error(e);
    return console.log("エラーになりました〜");
  } finally {
    console.log("わいは何がなんでも登場するんや");
  }
  return sum;
}

console.log("開始");

console.log(calc(1, 9));
console.log(calc(1, 9n));

console.log("終了");

// 開始
// わいは何がなんでも登場するんや
// 10
// TypeError: Cannot mix BigInt and other types, use explicit conversions
// エラーになりました〜
// わいは何がなんでも登場するんや
// 終了

catchの部分でreturn console.log("エラーになりました〜");とreturnで返して終わってもわいは何がなんでも登場するんやという文字が出現してきます。1回目の通常の処理にももちろん登場

try ブロックや catch ブロックの中で retnrn 文や break 文などが実行されて処理が try...catch...finally 文から別のところへ移動する場合であっても、移動が行われる前に実行

正規表現

※ここではあくまでJavaScriptの正規表現書き方を記述するので正規表現そのものはまとめていません

正規表現リテラルを使用

/パターン/
/パターン/フラグ

このようにスラッシュで囲って使う

RegExpコンストラクタを使用

RegExp オブジェクトのコンストラクタを使用して正規表現オブジェクトを作成する方法

new RegExp(パターン[, フラグ])
  • 1 番目の引数には正規表現リテラルを指定orパターンを表す値を文字列として記述
  • フラグを設定する場合は 2 番目の引数に一つまたは複数のフラグを文字列として記述
  • 正規表現のパターンがあらかじめ決まっているのであれば基本的に正規表現リテラルを使って正規表現オブジェクトを作成するのがシンプル

JavaScriptで使えるフラグ

正規表現ではフラグ(またはオプション)を設定することで文字列がパターンにマッチする仕組みを変更することができる。

/パターン/フラグ
フラグ フラグ名 説明
g Global 通常、正規表現は最初に一致した文字列だけを探しますが、g フラグを設定するとすべての一致を探します。
i IgnoreCase パターンで大文字と小文字を区別しなくなります。例えば、/a/ の場合は /A/ にもマッチします。
m Multiline 複数行モード。メタ文字の ^ と $ が文字列の先頭と末尾だけでなく、各行の先頭と末尾にもマッチするようになります。
s DotAll メタ文字の . は通常、改行文字にはマッチしませんが、s フラグを設定すると改行文字にもマッチします。
u Unicode 通常、正規表現で \uhhhh は UTF-16 のコードユニットを表しますが、u フラグを設定すると \u{hhhh} や \u{hhhhh} を Unicode コードポイントとして使用できます。
y Sticky lastIndex プロパティが示す位置より後ではなく、lastIndex プロパティの位置からのみ一致するかどうかを判定します。

文字列が正規表現とマッチするかテスト

RegExp オブジェクトのインスタンスメソッドの test は、対象の文字列が正規表現とマッチするかテストしtrue または false を返す。

正規表現オブジェクト.test(文字列)

let regexp = /cat/;
let str1 = 'My cat likes to nap in the sun.';
let str2 = 'I adopted a new kitten last week.';

console.log(regexp.test(str1));
// true

console.log(regexp.test(str2));
// false

正規表現にマッチした文字列を取得

execメソッド exec メソッドは、対象となる文字列が正規表現とマッチした場合に、マッチした文字列を取得する

正規表現オブジェクト.exec(文字列)

[郵便番号を抜き出す例]

let regexp = /[0-9]{3}-[0-9]{4}/;

let text = "My postal code is 123-4567.";

console.log(regexp.exec(text));

// ['123-4567', index: 18, input: 'My postal code is 123-4567.', groups: undefined]
  • 引数に指定した文字列が正規表現とマッチした場合は、マッチした文字列が格納された配列を返す
  • マッチしなかった場合は null を返す
  • 戻り値の配列にはインデックス 0 の要素にパターン全体にマッチした文字列、インデックス 1 以降の要素には設定したキャプチャグループで囲んだパターンにマッチした文字列が格納される

抜き出した値を取得するには配列なので以下のようにする

let regexp = /[0-9]{3}-[0-9]{4}/;

let text = "My postal code is 123-4567.";

let result = regexp.exec(text);

console.log(result[0]);

// 123-4567

エラーの場合には以下のようにな値が配列の要素0に格納されているのがわかる

let regexp = /[0-9]{3}-[0-9]{4}/;

let text = "My postal code is 111.";

let result = regexp.exec(text);

console.log(result[0]);

// Uncaught TypeError: Cannot read properties of null (reading '0')

エラーになってしまうので条件分岐または例外処理をすると良い

let regexp = /[0-9]{3}-[0-9]{4}/;

let text = "My postal code is 111.";

let result = regexp.exec(text);

if (result !== null) {
  console.log(result[0]);
} else {
  console.log("Not Match.")
}


// Not Match.

パターンにキャプチャグループが含まれる場合

キャプチャグループ（Capture Group）は、正規表現（正規表現パターン）内で一部のパターンにマッチしたテキストを個別に取り出すための仕組み。キャプチャグループは、正規表現内の括弧 () で囲まれた部分にあたる。

正規表現パターンの一部にマッチした文字列を個別に取得したり、後で参照したりする場合に使用される

const pattern = /(\d{2})-(\d{2})-(\d{4})/;
const date = "12-31-2022";

const match = pattern.exec(date);
if (match) {
  const day = match[1]; // キャプチャグループ1から日を取得
  const month = match[2]; // キャプチャグループ2から月を取得
  const year = match[3]; // キャプチャグループ3から年を取得

  console.log(match[0]); // 12-31-2022
  console.log("Year: " + year); // Year: 2022
  console.log("Month: " + month); // Month: 31
  console.log("Day: " + day); // Day: 12
}

マッチした文字列の位置を参照

exec メソッドを実行して文字列が正規表現にマッチした場合、マッチした文字列の先頭文字のインデックスが戻り値として取得した配列の index プロパティに設定されいる。

これです:['123-4567', index: 18, input: 'My postal code is 123-4567.', groups: undefined]

let regexp = /[0-9]{3}-[0-9]{4}/;

let text = "My postal code is 123-4567.";

console.log(regexp.exec(text));

// ['123-4567', index: 18, input: 'My postal code is 123-4567.', groups: undefined]

index: 18のように文字列の何個目の要素でマッチしているかがわかる。プロパティなので.indexで取り出せる。

let regexp = /[0-9]{3}-[0-9]{4}/;

let text = "My postal code is 123-4567.";

let result = regexp.exec(text);

// ['123-4567', index: 18, input: 'My postal code is 123-4567.', groups: undefined]

console.log(result.index);

// 18

正規表現にマッチした文字列のインデックスを取得

String オブジェクトのインスタンスメソッド search は、対象の文字列が正規表現とマッチした場合、マッチした最初の文字列の先頭文字のインデックスを返す。

文字列.search(正規表現オブジェクト)

let regexp = /[0-9]{3}-[0-9]{4}/g;

let text1 = "My postal code is 123-4567.";
let text2 = "123-4567 is my postal code.";

console.log(text1.search(regexp));
// 18

console.log(text2.search(regexp));
// 0

このように正規表現にマッチした文字列のインデックスを返してくれている。該当箇所が二箇所あっても最初にマッチしたインデックスしか返さないことに注意する！

正規表現にマッチするものがない場合

-1という値が返ってくる。

let regexp = /[0-9]{3}-[0-9]{4}/g;

let text1 = "My postal code is 123-4567.";
let text2 = "My postal code is nothing.";

console.log(text1.search(regexp));
// 18

console.log(text2.search(regexp));
// -1

正規表現にマッチしたすべての文字列を取得

文字列.match(正規表現オブジェクト) - String オブジェクトの match メソッドは、正規表現にマッチした文字列を配列で取得（正規表現にgフラグ必要） - 正規表現のパターンにキャプチャグループが含まれていた場合は、キャプチャグループにマッチした文字列も併せて取得

let regexp = /[0-9]{3}-[0-9]{4}/g;

let text1 = "My postal code is 123-4567. My postal code is 765-4321.";

result = text1.match(regexp);

console.log(result);
// ['123-4567', '765-4321']

console.log(result[0]);
// 123-4567

console.log(result[1]);
// 765-4321

グローバル関数

parseInt関数(文字列を整数に変換)

parseInt(文字列 [, 基数])
  • JavaScript のグローバル関数のひとつである parseInt は文字列を整数に変換した値を返す
  • 対象の値が文字列でない場合は文字列に変換したあとで整数に変換される
  • （Number オブジェクトにグローバル関数の parseInt 関数と同じ動作をする Number.parseInt メソッドがある）
  • 第一引数に指定した文字列を整数に変換
  • 第二引数（省略可能）で整数の基数を指定(10進数の場合は10)。 2 から 36 までの数値で指定可能
  • 初めの文字が数値に変換できない場合は NaN
  • 文字列の先頭にある空白を取り除く
  • 先頭に + または - がある場合は符号として扱う
  • 数値でない文字が現れる直前までの文字列を整数に変換
parseInt("20", 10);
// 14

parseInt("  -100cm", 10);
// -100

parseInt("Hi", 10);
// NaN

parseInt('100', 2);
// 4

parseFloat関数(文字列を浮動小数点数に変換)

parseFloat(文字列)
  • 引数に指定した文字列を浮動小数点数に変換
  • 引数が文字列でない場合は文字列に変換したあとで浮動小数点数に変換
  • parseInt 関数とは違い paseFloat 関数では0xや 0Xで始まる文字は 16 進数の文字とは認識されない
parseFloat("20");
// 20 数値はそのまま

parseFloat("  1.2345cm");
// 1.2345

parseFloat("3.2e2");
// 320.0

parseFloat("Hello2024");
// NaN

isFinite関数(値が有限か無限かを判定する

isFinite(値)

isFiniteは対象の値が有限の値か無限の値かを調べてtrue または false を返す

  • Number オブジェクトでisFiniteメソッドがありより厳格に有限の数値かどうかを調べられる
  • 引数に指定した値が有限の値かどうかを調べ、値が NaN ・正の無限大( Infinity )・負の無限大( -Infinity )であれば false 、それ以外は true を返す
  • 値が数値型ではない場合はまず数値型に変換されたあとで調べる
isFinite(Infinity);
// false

isFinite(-Infinity);
// false

isFinite(NaN);
// false

isFinite(20);
// true

isFinite(0);
// true

isFinite(-5);
// true

isFinite('Hi'); 
// false　数値に変換されるとNaN

isFinite('100'); 
// true 数値に変換される

isFinite(''); 
// true  数値に変換すると 0

DOM操作

ながくなってきたので別記事にしています。

hirano-vm4.hatenablog.com

イベント処理

こちらも記事が長くなってきたので、別記事にまとめています。

hirano-vm4.hatenablog.com

日付・時刻・曜日を扱う方法【Dateオブジェクト】

こちらも記事が長くなってきたので、別記事にまとめています。

hirano-vm4.hatenablog.com

MDN web docs

MDN Web Docs（Mozilla Developer Network Web Docs）は、Mozillaが提供するウェブ開発に関する公式かつ包括的なサイトです。

MDNは、Web技術やプラットフォームに関する情報、ガイド、リファレンス、チュートリアルなどを提供してくれているのでさらにステップアップしていくために必須なサイトになるので最後にリンクを貼って終わりたいと思います。

JavaScript | MDN