はじめに
この記事では、JavaScriptの基本的なデータ型やその特徴、文字列と数値の基本的な操作方法について解説していきます。
基本的なデータ型を理解することで、文字列の操作や数値の計算など、変数に格納したデータに変更を加えることができるようになります。これらはプログラミングにおいてよく実装される基本的な処理です。この記事では、JavaScriptでこれらの処理を行う方法について解説します。
この記事の対象者
- JavaScript初学者の方
- プログラミングに興味のある方
- JavaScriptのデータ型について学びたい方
この記事で学べること
- JavaScriptの基本的なデータ型の種類と特徴
- オブジェクト型とプリミティブ型の違い
- 文字列の基本的な操作方法
- 数値の計算方法
JavaScriptのデータ型について
基本的なデータの操作方法を知る前に、JavaScriptにおいてのデータ型の特徴について触れておきます。
JavaScriptでは、データ型は主にプリミティブ型とオブジェクト型（参照型ともいわれます）に分かれます。簡潔に述べると、プリミティブ型はシンプルな値のデータを表し、オブジェクト型は複雑な構造を持つデータを表します。
プリミティブ型
プリミティブ型は単一の値を表現します。例として、文字列（ String ）、数値（ Number ）、真偽値（ Boolean ）などがプリミティブ型に該当します。
// 以下はプリミティブ型
let str = '文字列型です'; // 文字列型
let num = 123; // 数値型
let bool = true; // 真偽値型プリミティブ型に該当するデータは7種類あり、上記の3種類以外にも BigInt や Symbol 、 undefined 、 null というものがあります。それぞれの詳しい解説はここでは行いませんが、興味のある方は調べてみると良いでしょう。
オブジェクト型
プリミティブ型に該当しないものはオブジェクト型になります。例えば、データとして定義したオブジェクトや配列、関数などは全てオブジェクト型です。
// 以下はオブジェクト型
let obj = {}; // オブジェクト
let arr = []; // 配列
let elm = document.getElementById('elm'); // HTML要素
function fn() {}; // 関数プリミティブ型の確認方法
データがプリミティブ型かオブジェクト型かを調べるには、 typeof というキーワードを使用します。
// プリミティブ型
console.log(typeof str); // string
console.log(typeof num); // number
console.log(typeof bool); // boolean
// オブジェクト型
console.log(typeof obj); // object
console.log(typeof arr); // object
console.log(typeof elm); // object
console.log(typeof fn); // functionプリミティブ型であれば、上記のように「 string 」や「 number 」といった型の名前を返し、オブジェクト型であれば「 object 」と返します。なお、関数はオブジェクト型の中でも特別な扱いをされており、typeofキーワードでは「 function 」と返ってきます。
ラッパーオブジェクトについて
プリミティブ型に属するデータは、呼び出し時にそのデータに対応する「ラッパーオブジェクト」というものに一時的に変換され、これによりラッパーオブジェクトのメソッドやプロパティを使用することができるようになります。ラッパーオブジェクトの一覧は以下です。
- String：文字列
- Number：数値
- Boolean：真偽値
- BigInt：大きな数値
- Symbol：シンボル
ちなみに、nullやundefinedには該当するラッパーオブジェクトはありません。
このように、JavaScriptはラッパーオブジェクトの仕組みによってプリミティブ型のデータでもオブジェクトのように扱うことができるようになっています。
リテラルについて
JavaScriptにおいて、値のことを「リテラル」と表現します。例えば、文字列であれば「 ‘ 」や「 ” 」で囲われたものを指し、これを「文字列リテラル」といいます。
'文字列リテラル';
"文字列リテラル";JavaScriptではリテラルによってデータの型が自動的に決定されます。データを意図した型として扱うには、該当するリテラルを使用します。
'123'; // 文字列リテラル
123; // 数値リテラル（半角の数字は数値リテラル
true; // 真偽値リテラル
false; // 真偽値リテラル
['トマト', 'キャベツ']; // 配列リテラル
{name: 'taro'}; // オブジェクトリテラルデータを操作してみる
それでは、JavaScriptではどのようにデータを操作するかを少し具体的に見てみましょう。ここでは、プリミティブ型でも特に基本となる「文字列型」と「数値型」について見ていきます。ブラウザのコンソール上でもいいので、実際に手を動かして確認することをオススメします。
まずは文字列の基本的な操作について解説します。
基本的な文字列の操作
基本的な文字列の操作として、以下を行う方法について解説します。
- 文字列の結合
- 文字列の長さの取得
- 文字の取得
- アルファベットの小文字を大文字に変換
- 文字の削除と置換
- 文字列を数値に変換
順番に見ていきましょう。
文字列の結合
文字列同士を結合するには、「 + 」演算子を使用します。
let firstName = 'Taro';
let lastName = 'Yamada';
let fullName = firstName + ' ' + lastName;
console.log(fullName);
// 出力：Taro Yamada文字列の長さを取得
文字列の長さを取得するには length プロパティを使用します。文字列はプリミティブ型なのでプロパティを持っていませんが、Stringラッパーオブジェクトによって変数が呼び出されたタイミングで一時的にStringオブジェクトに変換されるため、lengthプロパティを使用することができます。
let msg = 'Hello';
console.log(msg.length); // 出力：5文字の取得
文字列内の特定の位置の文字を取得することができます。文字列の取得には「 []（インデックス） 」を使用する場合と、 charAt() メソッドを使用する場合があります。
インデックスを使用する場合は、「一文字目は0から始まること」に注意が必要です。
let msg = 'こんにちは';
console.log(msg[0]); // 出力：こcharAt()メソッドを使用する場合は以下のようになります。charAt()メソッドも内部的にはインデックスを使用しているので、一文字目は0から始まります。
let msg = 'こんにちは';
console.log(msg.charAt(0)); // 出力：こ[]とcharAt()メソッドの違いは、指定されたインデックス番号で文字を取得できなかった場合に挙動が異なります。
let msg = 'こんにちは';
console.log(typeof msg[10]); // 出力：undefined
console.log(typeof msg.charAt(10)); // 出力：string上記では、msg変数に格納した文字列の文字数を超えた値をインデックス番号に指定しています。[]を使用した場合は「 undefined 」とみなされますが、charAt()メソッドを使用した場合はcharAt()メソッドが空の文字列を返すため「 string 」となります。
アルファベットの小文字を大文字に変換
文字列型のラッパーオブジェクトであるStringには便利なメソッドがたくさん定義されています。基本的なメソッドとして、アルファベットの文字列を全て大文字に変換することができるtoUpperCase()メソッドをご紹介します。
let msg = 'Hello';
console.log(msg.toUpperCase()); // 出力：HELLOtoUpperCase()メソッドに引数は必要ありません。また、toUpperCase()メソッドはあくまで「文字列を大文字に変換して返す」という動作なので、変数そのものを大文字に変換するわけではありません。
let msg = 'Hello';
console.log(msg.toUpperCase()); // 出力：HELLO
console.log(msg); // 出力：Hello変数そのものを変換する場合は以下のように行います。
let msg = 'Hello';
msg = msg.toUpperCase();
console.log(msg); // 出力：HELLOこのように、toUpperCase()メソッドで返された値を変数に再代入することで変換が可能です。
文字の削除と置換
文字列から特定の文字を削除・置換する場合はStringオブジェクトで定義されているreplace()メソッドを使用します。
replace()は文字の置換を行うためのメソッドです。第一引数に指定した文字を第二引数に指定した文字に置換して返します。これらの引数は文字列型で指定する必要があります。
let msg = 'Hello World';
// 文字の置換
let newMsg = msg.replace('World', 'Taro');
console.log(newMsg);
// 出力：Hello Taro第二引数に空文字（”や””）を渡すことで、特定の文字を削除することができます。
let msg = 'Hello World';
// 文字の削除
newMsg = msg.replace(' World', '');
console.log(newMsg); // 出力：HelloStringオブジェクトで定義されているメソッドは他にもさまざまなものがあり、必要に応じて調べながら使用すると良いでしょう。ブラウザのコンソールで以下を実行すると、Stringオブジェクトのメソッドの一覧を簡単に確認することができます。
console.dir(new String());以下のように表示されます。
文字列を数値に変換
JavaScriptで文字列を数値に変換するための一般的な方法として、parseInt()メソッドを使用した変換方法をご紹介します。
parseInt()はwindowオブジェクトで定義されているメソッドです。parseInt()メソッドは、第一引数に指定した値を10進数の数値に変換して返します。第一引数に指定された値はparseInt()メソッドの内部的な処理により、文字列だった場合は数値に変換されます。これにより、明示的に文字列を数値に変換することができます。
let str= '123';
let changedNum = parseInt(str);
console.log(typeof changedNum); // 出力：number第一引数の文字列が数字以外の文字を含んでいても数字のみが値としてみなされますが、数字が文字列の先頭に記述されていない場合は「 NaN（Not a Number） 」という、数値ではないことを示す特別な値が返されます。
str = '123です';
changedNum = parseInt(str); // 123
str = 'これは123';
changedNum = parseInt(str); // NaNちなみに、parseInt()メソッドの第二引数に基数を渡すことで、2進数や16進数の値を10進数に変換することもできます。これには、第一引数が文字列である必要はありません。
str = '1111を10進数に変換';
changeNum = parseInt(str, 2); // 15（1111が10進数に変換される）
str = 'fを10進数に変換';
changeNum = parseInt(str, 16); // 15（fが10進数に変換される）複雑な文字列の場合は正しく変換されない可能性があるので、文字列を数値に変換する際は基本的に「 ‘123’ 」のようなシンプルな文字列に加工してからparseInt()メソッドを使用することをオススメします。
文字列型の注意点
文字列リテラルには「 ‘ 」と「 ” 」の他にも「 `（バッククォート） 」があります。基本的にはどれも文字列型のデータを定義するためのものですが、JavaScriptはこれらの引用符を別のものとして扱います。よって、以下の場合はエラーになります。
let str = 'test"; // 引用符が対応できていないためエラーになりますまた、文字列リテラルと同じ引用符を文字列内で使用する場合は工夫が必要です。
let str1 = 'I'm Taro'; // エラーになります
let str2 = "I'm Taro"; // エラーにはなりませんJavaScriptでは特殊文字を扱うためにエスケープシーケンスというものが用意されています。エスケープシーケンスを使用すると文字列リテラルと同じ引用符を使用できます。
let str = 'I\'m Taro';特殊文字の前に「\」を記述することで、その直後の特殊文字が文字列内の文字として扱われます。また、エスケープシーケンスでは「 \n 」で改行を表現するなどといったことができます。興味がある方は調べてみると良いでしょう。
「 `（バッククォート） 」で定義された文字列は、文字列内で変数を展開することができます。シングルクォートと見分けがつきにくいのが難点ですが、文字列を連結するよりも可読性が高いので積極的に使用すると良いと思います。
let name = 'Taro';
// 以下はバッククォートを使用しています
console.log(`Hello! I'm ${name}!`);
// 結果：Hello! I'm Taro!基本的な数値の操作
数値型は整数や浮動小数点数を表現するためのデータ型です。JavaScriptでは、「 ‘ 」や「 ” 」といった引用符のない半角数字は数値型（ Number ）として扱われます。
let num = 100;
let pi = 3.14;数値型の操作は数値の役割を示すとおり、主に計算を目的として行います。数値を計算するための基本知識として、JavaScriptで扱える算術演算子について触れておきます。
算術演算子について
プログラミングで数値の計算を行うには、「算術演算子」というものを使用します。基本的な算術演算子は以下です。
- 加算：+
- 減算：–
- 乗算：*
- 除算：/
- 剰余算：%
剰余算については馴染みがないかも知れませんが、簡単に説明すると除算で割った余りを求めます。上記の記号を使用することで、数値型のデータに対して四則演算を行うことができます。
数値の基本的な計算
算数のお時間です。JavaScriptでは以下のように数値を計算することができます。
let num;
num = 1 + 1; // 2
num = 1 - 1; // 0
num = 2 * 2; // 4
num = 9 / 3; // 3
num = 9 % 2; // 1また、通常の計算と同じように、乗算・除算は加算・減算より先に計算されます。
num = 2 + 2 * 10; // 22加算や減算を先に計算したい場合は「 () 」を使用します。
num = (2 + 2) * 10; // 40;算術演算子を使用することで複雑な計算を行うことができます。また、JavaScriptにはMathオブジェクトという数学関連のメソッドを持ったオブジェクトがあり、Mathオブジェクトを使用することでより複雑な計算を行うことができます。
Mathオブジェクトを使ってみる
Mathオブジェクトには数値型のデータを操作するための多くのメソッドが定義されています。例として以下のようなものがあります。
- sqrt()：平方根を返す
- abs()：絶対値を返す
- floor()：小数点以下を切り捨てた整数を返す
- ceil()：小数点以下を切り上げた整数を返す
- round()：小数点以下を四捨五入した整数を返す
- random()：0～1のランダムな数値を返す
以下はこれらの簡単な使用例です。
let mySqrt = Math.sqrt(25); // 5
let myAbs = Math.abs(-5); // 5
let myFloor = Math.floor(5.9); // 5
let myCeil = Math.ceil(4.9); // 5
let myRound = Math.round(5.4); // 5
let myRandom = Math.random(); // 0～1の乱数（例：0.5649103490368905）Mathオブジェクトは複雑な計算が必要な場合に利用されます。上記のメソッドは比較的簡単に扱えるものですが、他にも数学の理解がないと扱うことが難しいようなメソッドが定義されています。数学が好きな方は調べてみると楽しめると思います。
数値を文字列に変換
数値を文字列に変換するにはtoString()メソッドを使用します。toString()メソッドはObject型で定義されており、プリミティブ型である数値型のデータもNumberというラッパーオブジェクトの働きによってtoString()メソッドを使用することができます。
以下は数値を文字列型に変換する一般的な例です。
let num = 5;
let changedStr = num.toString(); // '5'
console.log(typeof changedStr); // 出力：stringまた、少し分かりにくいのでオススメしませんが以下のような方法でも変換できます。
changedStr = num + '';
console.log(typeof changedStr); // 出力：stringこのような変換方法を「暗黙的な型変換」と表現されることがあります。JavaScriptの動的型付け言語である特性を利用した手法で、記述が少なくなるメリットがあります。ちなみに、文字列を数値に変換する場合も暗黙的に行うことができます。
let str = '5';
changedNum = +str;
console.log(typeof changedNum); // 出力：number繰り返しになりますが、暗黙の型変換は分かりにくいので個人的にはオススメしません。理由の一例を挙げると、バグの原因を調査する際にエディタの検索機能を使用する場合がありますが、暗黙の型変換を考慮する必要があるとコードの保守性や開発効率を損なう可能性があります。
最後に
この記事ではJavaScriptの基本的なデータ型やその特徴、文字列と数値の基本的な操作方法について解説しました。
JavaScriptにおいてのデータ型の基本である、プリミティブ型とオブジェクト型の違いを理解することは、JavaScriptの学習をスムーズに進めるために重要です。また、文字列と数値の操作はプログラミングの基本です。方法はプログラミング言語によって異なりますが、他の言語でも似たような関数名を使用している場合が多いです。
この記事ではプリミティブ型のデータである真偽値（Boolean）について触れていませんでしたが、真偽値はプログラミングにおいてとても重要な要素です。プログラミングは「条件分岐」という方法で特定の値に応じて処理を切り分けるような実装が頻繁に行われ、真偽値は条件分岐と深い関わりを持っています。
以下の記事では、JavaScriptにおいての条件分岐と真偽値について解説しています。この記事の次に学習する内容としてオススメです。
