TypeScriptでのparseInt関数の使い方20選

はじめに
●parseInt関数とは？
- ○関数の基本概念
- ○TypeScriptとの関連性
●parseInt関数の使い方
●parseInt関数の応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

TypeScriptは、JavaScriptに静的型システムを加えた言語として、多くの開発者に支持されています。

静的型チェックにより、開発時のバグを早期に発見できるメリットがありますが、それに伴って数値と文字列の変換が重要になります。

今回は、その変換作業の中で頻繁に利用されるparseInt関数の使い方に焦点を当てて解説します。

●parseInt関数とは？

parseIntは、文字列を整数に変換する際に使用されるグローバル関数です。

JavaScriptで長らく使用されている関数の一つで、TypeScriptでもその機能はそのまま引き継がれています。

○関数の基本概念

parseInt関数は、第一引数に変換したい文字列、第二引数に基数（2～36の範囲）を受け取ります。

この基数は、文字列がどの進数を表しているのかを表します。

たとえば、基数が10の場合は10進数、16の場合は16進数と解釈します。

基数を省略した場合、parseIntは文字列の先頭の文字を元に自動で基数を判断します。

このコードではparseIntを使って文字列”123″を整数に変換しています。

const result = parseInt("123");
console.log(result);  // 123

このコードを実行すると、123という数値が出力されます。

○TypeScriptとの関連性

TypeScriptは静的型付けが導入されているため、文字列と数値の間での変換が非常に重要です。

JavaScriptのように動的に型変換されるわけではないので、明示的に変換する必要があります。

その際、parseInt関数は非常に有用です。

例えば、HTMLのinput要素から取得した文字列を数値として計算に利用したい場合、parseIntを活用することで安全に変換を行えます。

このコードでは、input要素から取得した文字列をparseIntを使って整数に変換し、その後の計算で使用しています。

const inputValue = "10"; // 例として、input要素から取得した文字列を"10"とする
const parsedValue = parseInt(inputValue, 10);
const sum = parsedValue + 20;
console.log(sum);  // 30

このコードを実行すると、30という結果が出力されます。

これは、文字列”10″が整数の10に変換された後、20が加算されて結果として30が出力されたためです。

●parseInt関数の使い方

parseInt関数は、文字列を特定の基数（2進数、8進数、10進数、16進数など）の整数に変換するための関数です。

TypeScriptでの使用も、基本的にはJavaScriptと変わらないのですが、型の安全性を高めるためのいくつかの考慮が必要です。

○サンプルコード1：基本的な数値変換

このコードでは、最も基本的な10進数への変換を表しています。

const str1: string = "123";
const num1: number = parseInt(str1);
console.log(num1);  // 数値の123が出力される

上記のコードでは、文字列 “123” を数値の123に変換しています。

この変換には10進数が使用されており、結果的にコンソールには数値の123として出力されます。

また、TypeScriptを利用しているため、str1の型をstring、num1の型をnumberとして明示的に指定しています。

これにより、コードの安全性が向上し、間違った型の値が代入されることを事前に防ぐことができます。

このコードを実行すると、console.log(num1) の部分で数値の123が出力されることが確認できます。

こうした基本的な文字列から数値への変換は、多くのアプリケーションで頻繁に行われる操作の一つです。

特に、ユーザーからの入力データを数値として扱いたい場合や、文字列形式で保存された数値データを計算や操作に利用する際に、この関数は非常に役立ちます。

○サンプルコード2：16進数の変換

TypeScriptにおけるparseInt関数は、文字列を整数に変換するための便利な方法として知られています。

この機能は、特定の基数(基数とは、数を表現する際の基準となる数のことを指します)での変換もサポートしています。

今回のトピックでは、特に16進数の変換方法に焦点を当てて解説します。

16進数は、0-9の数字とA-Fのアルファベットを使用して、数を表現する方法です。例えば、”FF”は255、”1A”は26を意味します。

通常、16進数の文字列は”0x”や”#”(色コードの場合)で始まることが多いです。

16進数の文字列を10進数の整数に変換するサンプルコードを紹介します。

const hexString: string = "1A";
const intValue: number = parseInt(hexString, 16);
console.log(intValue);

このコードではparseInt関数を使って、16進数の文字列を10進数の整数に変換しています。

具体的には、第2引数に16を指定することで、16進数として解釈して変換を行います。

このコードを実行すると、”1A”という16進数が、10進数での26という値に変換されて表示されます。

しかし、実際の開発現場では、”0x”や”#”(特にCSSの色コードでよく見かけます)のようなプレフィックスが付いている16進数の文字列も多く存在します。

そのため、このようなプレフィックスを取り除いてから変換することが必要です。

プレフィックスが付いた16進数の文字列を変換する方法を紹介します。

const prefixedHexString: string = "0x1A";
const cleanedHexString: string = prefixedHexString.replace(/^0x/, "");
const intValueWithPrefix: number = parseInt(cleanedHexString, 16);
console.log(intValueWithPrefix);

このコードでは、replaceメソッドを用いて”0x”というプレフィックスを取り除いてから、parseInt関数で変換を行っています。

この結果、先程と同じく、26という10進数の整数が得られます。

○サンプルコード3：8進数の変換

8進数は、0～7の数字だけを使用する数制系です。

コンピュータの世界では8進数の数値は「0o」または「0O」を接頭辞として使用します。

たとえば、8進数での「10」は10進数では「8」を表します。

TypeScriptでは、文字列から数値への変換に「parseInt」関数を使用できます。

8進数への変換を行う場合、第二引数として基数「8」を指定します。

具体的には、次のようなコードで8進数の変換を実現することができます。

const octalString = "10";
const decimalNumber = parseInt(octalString, 8);
console.log(decimalNumber);

このコードでは、変数octalStringに格納された8進数の文字列”10″を、parseInt関数を使って10進数の数値に変換しています。

第二引数に「8」を指定することで、この変換は8進数として扱われます。

このコードを実行すると、変数decimalNumberには10進数での「8」が格納され、結果としてコンソールに「8」という数値が出力されます。

さて、8進数の変換には注意点がいくつか存在します。

例えば、8以上の数字（8や9）が含まれる文字列を8進数としてparseInt関数で変換しようとすると、その文字までの変換が行われ、以後は無視されます。

const invalidOctalString = "129";
const convertedNumber = parseInt(invalidOctalString, 8);
console.log(convertedNumber);

上記のコードでは、”129″という文字列を8進数として解釈しようとしていますが、”9″は8進数に存在しない数字です。

このため、”12″までが変換され、”9″は無視されます。

したがって、このコードを実行すると、「10」という結果がコンソールに出力されます。

○サンプルコード4：2進数の変換

2進数とは、0と1のみで構成される数値システムを指します。

多くのプログラムやシステムは内部的に2進数を使用して情報を処理しています。

TypeScriptでは、文字列に格納された2進数を整数に変換する場合、parseInt関数を利用することができます。

このコードではparseInt関数を使って、2進数を10進数に変換しています。

// 2進数を10進数に変換するサンプルコード
const binaryString = "1010";
const decimalNumber = parseInt(binaryString, 2);
console.log(decimalNumber);  // 2進数"1010"を10進数に変換した結果を出力

このコードを実行すると、2進数の”1010″が10進数の10として出力されます。

第二引数の2は、変換元の基数（この場合は2進数）を指定しています。

しかし、変換元の文字列が2進数として正しくない場合、NaN（Not a Number）が返されることがあります。

そのため、変換前に2進数として正しいかのチェックを行うとより安全です。

2進数の形式に従っているかを確認する簡単なサンプルコードを紹介します。

const isBinary = (str: string) => /^[01]+$/.test(str);

const binaryString2 = "1020";
if (isBinary(binaryString2)) {
    const decimalNumber2 = parseInt(binaryString2, 2);
    console.log(decimalNumber2);
} else {
    console.log("不正な2進数の文字列です。");
}

このコードを実行すると、”不正な2進数の文字列です。”と出力されます。

正規表現を使って2進数の形式に適合するかを確認し、適合しない場合はエラーメッセージを出力しています。

○サンプルコード5：空文字や特殊文字の変換

TypeScriptで数値変換を行うためによく利用されるparseInt関数ですが、特定の文字列、例えば空文字や特殊文字を変換しようとすると、どのような結果が返されるのでしょうか。

ここでは、そういった特殊なケースに焦点を当て、parseIntの挙動を深く探ります。

まず、次のサンプルコードは空文字をparseInt関数に渡す例です。

const result = parseInt("");
console.log(result);

このコードでは、空文字""を使って数値への変換を試みています。実行すると、どのような結果になるでしょうか。

このコードを実行すると、NaN（Not a Number）が出力されます。

parseInt関数は空文字を数値として解釈できないため、数値に変換できない場合は常にNaNを返します。

次に、特殊文字の変換を試みる例を見てみましょう。

const resultSpecial = parseInt("#123");
console.log(resultSpecial);

このコードでは、"#123"という特殊文字を含む文字列をparseInt関数に渡しています。

ここで気になるのは、parseIntがこのような文字列をどのように解釈するかです。

このコードを実行すると、NaNが出力されます。

parseInt関数は、数値に変換できない文字を最初に検出した時点で変換を停止し、NaNを返します。

つまり、#が数値として解釈できないため、残りの123も読み取られずに変換が終了しています。

○サンプルコード6：大きな数値の変換

TypeScriptでの数値変換において、非常に大きな数値を含む文字列を変換する場面があります。

一般的にJavaScriptやTypeScriptにおいて数値の扱いには上限があるため、特に大きな数値を取り扱う際には注意が必要です。

ここでは、TypeScriptで大きな数値を含む文字列をparseInt関数で変換する方法とその特徴、注意点を解説します。

まず、基本的なサンプルコードを見てみましょう。

// 大きな数値を含む文字列の変換
const bigNumberString = "9876543210987654321";
const convertedNumber = parseInt(bigNumberString);

// 結果をコンソールに出力
console.log(convertedNumber);

このコードでは、”9876543210987654321″という非常に大きな数値を含む文字列を変換しようとしています。

しかし、JavaScriptおよびTypeScriptの数値の上限を超えるため、正確な数値として変換されません。

実際に上記のコードを実行すると、予期しない数値が出力されます。

これは、数値がJavaScriptのNumber.MAX_SAFE_INTEGERの上限を超えるため、変換の精度が失われてしまうからです。

こういった大きな数値を正確に取り扱いたい場合、BigIntという新しいデータ型を使用することが推奨されます。

BigIntを使用して大きな数値を正確に変換する例を紹介します。

// BigIntを使用して大きな数値を含む文字列の変換
const bigNumberString = "9876543210987654321";
const convertedBigInt = BigInt(bigNumberString);

// 結果をコンソールに出力
console.log(convertedBigInt);

BigIntを使用すると、上記の文字列は正確に変換され、期待した結果が得られます。

しかし、BigIntは比較的新しい機能のため、古いブラウザや環境ではサポートされていないことがあります。

そのため、BigIntを使用する場合は環境の互換性を確認することが重要です。

○サンプルコード7：小数点付きの文字列の変換

TypeScriptにおけるparseInt関数は、文字列を整数に変換するのに非常に役立ちます。

しかし、この関数の使用方法や振る舞いにはいくつかの注意点があります。

特に、小数点を含む文字列を変換する場合には注意が必要です。

小数点を含む文字列を整数に変換する基本的なサンプルコードを紹介します。

let decimalString: string = "123.456";
let integerPart: number = parseInt(decimalString);
console.log(integerPart);  // コメント：小数点以前の部分だけが整数として取り出される

このコードでは、小数点を含む文字列”123.456″を整数に変換しています。

parseInt関数は、文字列の最初から解析を開始し、最初に無効な文字（この場合は”.”）に遭遇すると、その点で解析を停止します。

したがって、このコードを実行すると、コンソールには”123″という結果が表示されます。

小数点以前の部分だけが整数として取り出され、小数点以下の部分は無視されるのです。

しかし、これはあくまでparseIntの標準的な振る舞いです。

もし、小数点以下の数値も考慮して処理を行いたい場合は、まずparseFloat関数を使用して全体を浮動小数点数として解析し、その後で必要に応じて整数部分を取り出すという方法が考えられます。

次のサンプルコードは、そのような手法を表しています。

let decimalString2: string = "123.456";
let floatNumber: number = parseFloat(decimalString2);
let roundedNumber: number = Math.round(floatNumber);
console.log(roundedNumber);  // コメント：数値を四捨五入して整数値に変換

このコードを実行すると、まず”123.456″を浮動小数点数として解析します。

次に、Math.round関数を使用して四捨五入を行い、最も近い整数値を取得します。

結果として、コンソールには”123″が表示されます。

○サンプルコード8：特定の基数を指定した変換

parseInt関数を使用する際、数値変換を行う基数を指定することができます。

この基数は、第2引数としてparseInt関数に渡すことで指定します。

基数を指定することで、異なる進数の文字列を正確に10進数に変換することができます。

例えば、「1010」という文字列が2進数の数値を示している場合、基数2を指定してparseIntを実行すると、10進数の10として解釈されます。

基数を指定しない場合、デフォルトでは10進数として解釈されるため、正しくない結果が返される可能性があります。

let binaryString = "1010";
let decimalFromBinary = parseInt(binaryString, 2);
console.log(decimalFromBinary); // このコードを実行すると、10が出力されます。

let hexString = "1a";
let decimalFromHex = parseInt(hexString, 16);
console.log(decimalFromHex); // このコードを実行すると、26が出力されます。

このコードでは、まず2進数の文字列”1010″を10進数の数値に変換しています。

第2引数に2を指定することで、2進数としての解釈を行い、その結果10が出力されます。

次に、16進数の文字列”1a”を10進数の数値に変換しています。

この際、第2引数に16を指定することで、16進数としての解釈を行い、その結果26が出力されます。

このように、基数を指定することで、異なる進数の文字列を正確に10進数の数値に変換することができます。

特に、2進数や16進数など、10進数以外の数値を扱う場合には、この機能は非常に便利です。

しかし、基数を指定しない場合や誤った基数を指定した場合には、予期せぬ結果が返される可能性があるため、注意が必要です。

特にTypeScriptを使用する場合、型の安全性を保つためにも、正しい基数の指定は欠かせません。

また、ユーザからの入力として進数の情報も一緒に受け取る場合、動的に基数を指定して変換を行うこともできます。

このコードでは、ユーザの入力から基数と数値の文字列を受け取り、parseInt関数で変換を行っています。

let userInput = "1010";
let baseInput = 2;
let convertedNumber = parseInt(userInput, baseInput);
console.log(convertedNumber); // このコードを実行すると、10が出力されます。

このコードを実行すると、ユーザが入力した”1010″という2進数の文字列が10進数の10として出力されます。

ユーザからの入力をもとに動的に基数を指定することで、様々な進数の数値変換に柔軟に対応することができます。

○サンプルコード9：NaNの戻り値を確認する

TypeScriptの中で、parseInt関数を使う際、特定の文字列を数値に変換しようとすると、変換が不可能な場合があります。

その時の戻り値は「NaN」となります。

これは「Not a Number」の略で、数値ではないことを表しています。

このコードでは、parseInt関数を使用して数値に変換できない文字列を数値に変換しようとしています。

そして、変換後の結果がNaNかどうかを確認する方法を表しています。

const str1 = "Hello";
const num1 = parseInt(str1);

if (isNaN(num1)) {
    console.log(`${str1} は数値に変換できません。`);
} else {
    console.log(`${str1} を数値に変換した結果：${num1}`);
}

このコードを実行すると、”Hello”という文字列が数値に変換できないため、isNaN関数によってその事実を検知し、適切なメッセージをコンソールに表示します。

具体的には、「Hello は数値に変換できません。」というメッセージが表示されることになります。

一方、文字列が部分的に数値に変換できる場合、parseIntは可能な限り数値の部分を取り出して変換を試みます。

しかし、先頭に数値でない文字がある場合、変換は失敗し、NaNが返されます。

例えば次のようなコードを考えてみましょう。

const str2 = "123abc";
const num2 = parseInt(str2);

if (isNaN(num2)) {
    console.log(`${str2} は数値に変換できません。`);
} else {
    console.log(`${str2} を数値に変換した結果：${num2}`);
}

この場合、「123abc」の文字列は前から数値部分のみを取り出して変換するので、”123″という数値が得られます。

したがって、「123abc を数値に変換した結果：123」というメッセージが表示されることになります。

○サンプルコード10：エラーハンドリングの基礎

TypeScriptを用いた開発において、データの変換時には様々なエラーが発生する可能性があります。

特に、文字列を数値に変換する際に使用されるparseInt関数を用いる場合、適切なエラーハンドリングを行うことが重要です。

この項では、parseInt関数を使用する際の基本的なエラーハンドリングの手法をサンプルコードと共に解説します。

try {
    const result = parseInt("文字列", 10);
} catch (error) {
    console.log("エラーが発生しました: ", error.message);
}

このコードでは、非数値文字列 “文字列” をparseInt関数を使って数値に変換しようと試みています。

ただし、”文字列” は数値に変換できないため、parseInt関数はNaN（Not a Number）を返します。

このような非数値の文字列を変換しようとするとエラーは発生しないのですが、NaNという結果が返ってきます。

しかし、NaNは誤ったデータの処理や計算の途中で予期せぬ結果を生む可能性があるため、NaNが返された際の処理を明示的に行うことが推奨されます。

下記のサンプルコードでは、parseInt関数の結果がNaNである場合に、エラーメッセージをコンソールに出力する処理を追加しています。

const result = parseInt("文字列", 10);
if (isNaN(result)) {
    console.log("変換エラー: 入力文字列は数値に変換できません");
} else {
    console.log("変換後の数値: ", result);
}

このコードを実行すると、変換に失敗したことを表すメッセージ「変換エラー: 入力文字列は数値に変換できません」というメッセージがコンソールに表示されます。

○サンプルコード11：nullやundefinedの変換

TypeScriptでは、JavaScriptと同様にnullやundefinedという特殊な値を持っています。

これらの値を数値に変換する場合、どのようにparseInt関数が振る舞うのかを確認することが重要です。

多くの場合、このような値の変換は意図しない結果を生むことがあります。

しかし、変換の結果を正確に知ることで、エラーの原因やバグを早期に発見することが可能になります。

ここでは、nullやundefinedをparseInt関数で変換する場合の動作について、サンプルコードを交えて解説します。

// nullの変換
const resultFromNull = parseInt(null as any);
console.log(resultFromNull);

// undefinedの変換
const resultFromUndefined = parseInt(undefined as any);
console.log(resultFromUndefined);

このコードでは、まずnullをparseInt関数に渡して数値に変換しています。

次に、同様にundefinedを数値に変換する試みをしています。

このとき、TypeScriptは通常nullやundefinedをparseInt関数に直接渡すことを許容しません。

そのため、as anyを使用して型を一時的にanyにキャストしています。

このコードを実行すると、nullの変換結果としてNaN（Not a Number）が出力されます。

これはnullが数値に変換できないためです。同様に、undefinedの変換結果もNaNとなります。

これらの結果から、nullやundefinedを数値に変換することは期待する動作とは異なる結果をもたらすことが確認できます。

次に、不特定多数のデータがある配列の中からnullやundefinedを取り除き、正しく数値変換を行う方法を考えてみましょう。

const mixedArray = [123, "456", null, undefined, "789abc"];
const filteredNumbers = mixedArray
    .filter(value => value !== null && value !== undefined)
    .map(value => parseInt(value as string));

console.log(filteredNumbers);

このコードでは、mixedArrayというnullやundefinedを含む配列が定義されています。

この配列の要素をfilterメソッドでフィルタリングし、nullやundefinedを取り除いた上で、mapメソッドを使用してparseInt関数で数値に変換しています。

このコードを実行すると、期待通りの数値の配列が得られます。

このように、parseInt関数を使う際には、入力データの品質や型に注意を払い、適切な前処理を行うことが重要です。

○サンプルコード12：独自のエラーハンドリングを設定

JavaScriptやTypeScriptで数値への文字列変換を行う際、数値に変換できない文字列が入力された場合、parseInt関数はNaNを返します。

しかし、開発の中で、エラーの原因や具体的なメッセージを知りたい場合、独自のエラーハンドリングを実装することが望ましいです。

このコードでは、parseInt関数を用いて数値変換を試み、変換が不可能な場合は独自のエラーメッセージを投げる関数を作成しています。

function customParseInt(input: string, radix?: number): number {
    const result = parseInt(input, radix);
    if (isNaN(result)) {
        throw new Error(`"${input}"は数値に変換できません。`);
    }
    return result;
}

try {
    console.log(customParseInt("10a"));
} catch (e) {
    console.log(e.message);
}

このコードを実行すると、"10a"は数値に変換できません。というエラーメッセージが出力されます。

なぜなら、”10a”は10進数の数値として解釈できないからです。

また、2つ目の引数で基数を指定することもできます。

例えば、customParseInt("10a", 16)のように呼び出すと、16進数としての変換を試みるため、正常に数値に変換されます。

○サンプルコード13：trim()と組み合わせた変換

JavaScriptやTypeScriptで文字列の前後の空白を取り除くためによく使われるtrim()メソッド。

このメソッドとparseInt関数を組み合わせることで、空白を含む文字列から数値を正しく取り出すことができます。

例えば、ユーザー入力などで不意に空白が含まれた文字列を数値に変換する際に役立ちます。

空白の有無で数値の変換が失敗するという状況を避けるため、前後の空白を取り除いてから変換を行います。

具体的なコードを紹介します。

// 文字列の前後に空白がある場合
let strWithSpaces = "   12345   ";

// trim()メソッドで空白を取り除く
let trimmedStr = strWithSpaces.trim();

// parseInt関数で数値に変換
let number = parseInt(trimmedStr);

console.log(number); // 12345

このコードでは、初めに空白を含む文字列を定義しています。

その後、trim()メソッドを使ってその文字列の前後の空白を取り除き、取り除かれた結果を新しい変数に代入しています。

そして、parseInt関数を使用してその文字列を数値に変換しています。

このコードを実行すると、数値の12345が出力されます。

もしtrim()メソッドを使用しなかった場合、parseInt関数は文字列の最初の空白を検出した時点で変換を停止し、NaN（Not a Number）を返すことになります。

注意すべきは、trim()メソッドは文字列の前後の空白のみを取り除きます。

もし文字列の途中に空白や他の非数値文字が含まれている場合、それらの文字は無視され、先頭から最初の非数値文字までが数値に変換されます。

例として、次のコードを見てみましょう。

let strWithMiddleSpaces = "123 456";

// parseInt関数で数値に変換
let num = parseInt(strWithMiddleSpaces);

console.log(num); // 123

このコードを実行すると、123という数値が出力されます。

文字列の中に空白が存在すると、その空白の前の部分までが数値に変換されるため、456は無視されます。

○サンプルコード14：複数の数値を含む文字列の変換

TypeScriptでの文字列の数値変換は、特に複数の数値を含む文字列の変換が求められる場面も少なくありません。

例えば、”123abc456def789″のような文字列から、数値の部分だけを抽出して整数に変換する場合、parseInt関数だけでは少々手間がかかります。

このような場面で役立つ方法を解説します。

このコードでは、正規表現を使って文字列中の数値部分を抽出し、それを整数として変換しています。

const extractNumbers = (input: string): number[] => {
    // 正規表現で文字列から数値部分を抽出
    const matched = input.match(/\d+/g);
    // nullの場合は空の配列を返却
    if (!matched) return [];
    // 抽出した文字列を数値に変換
    return matched.map(value => parseInt(value, 10));
}

const result = extractNumbers("123abc456def789");
console.log(result);  // [123, 456, 789]

このコードを実行すると、”123abc456def789″の文字列から数値の部分である123, 456, 789を抽出し、それらを配列として取得します。

結果は、[123, 456, 789]という配列になります。

また、特定の範囲内の数値だけを抽出する場合も考えられます。

例えば、100から999の間の数値だけを取得したい場合は、正規表現を少し工夫します。

const extractThreeDigitsNumbers = (input: string): number[] => {
    // 正規表現で100~999の数値部分を抽出
    const matched = input.match(/\b[1-9]\d{2}\b/g);
    if (!matched) return [];
    return matched.map(value => parseInt(value, 10));
}

const result2 = extractThreeDigitsNumbers("50abc123def4567ghi890jkl");
console.log(result2);  // [123, 890]

このコードでは、”50abc123def4567ghi890jkl”という文字列から、123と890の2つの数値を抽出しています。

4567のような4桁以上の数値は抽出の対象外としています。

○サンプルコード15：変換失敗時のデフォルト値の設定

parseInt関数を使用する際、特定の文字列を数値に変換できない場合があります。

その際、NaN（Not a Number）という特別な値が返されます。

しかし、実際の開発でNaNを取り扱うのは少々煩雑です。

そこで、変換に失敗した場合にデフォルトの数値を返すような仕組みを導入することが考えられます。

下記のサンプルコードは、文字列を数値に変換し、変換に失敗した場合はデフォルト値「0」を返す関数「safeParseInt」を実装しています。

// safeParseInt関数の定義
function safeParseInt(value: string, defaultValue: number = 0): number {
  const result = parseInt(value, 10);
  return isNaN(result) ? defaultValue : result;
}

// サンプルの実行
const sampleStr1 = "123";
const sampleStr2 = "abc";

console.log(safeParseInt(sampleStr1)); // このコードを実行すると、123が出力されます。
console.log(safeParseInt(sampleStr2)); // このコードを実行すると、0が出力されます。

このコードでは、まず文字列を10進数の数値に変換しようと試みています。

変換が成功すればその値を、失敗すれば指定されたデフォルト値（この場合は0）を返します。

このようにして、変換失敗時にも安全に数値を取得することが可能となります。

デフォルト値は、関数の第二引数として渡すことができます。

渡されない場合は、自動的に0がデフォルト値として設定されます。

このコードを実行すると、最初の文字列「123」は数値に変換可能なため、123として出力されます。

一方、文字列「abc」は数値に変換不可能なため、デフォルト値の0が出力されます。

○サンプルコード16：正規表現を利用した数値の取り出しと変換

正規表現は、テキストの中から特定のパターンに一致する部分を探すための強力なツールです。

TypeScriptやJavaScriptでよく利用される技術の一つとして知られています。

今回の記事では、文字列中の数値だけを取り出してparseInt関数で整数に変換する方法について詳しく解説します。

このコードでは、文字列中の連続した数字を正規表現を使って取り出し、その後、parseInt関数を利用して整数に変換しています。

const str = "価格は12345円です。";
const regex = /\d+/g; 
const match = str.match(regex); 

if (match) {
    const num = parseInt(match[0], 10);
    console.log(`取り出された数値: ${num}`);
}

このコードを実行すると、”価格は12345円です。” から12345という数値だけが取り出されて表示されます。

具体的には、”取り出された数値: 12345″ という結果が得られるでしょう。

正規表現中の \d+ は、1つ以上の数字を意味します。g フラグは、グローバルサーチを意味し、文字列内の全ての一致を探します。

match メソッドは、正規表現に一致する部分を配列として返します。この場合、結果は ["12345"] となります。

そのため、match[0] で最初の一致を取得して、parseInt関数を使用して整数に変換しています。

しかし、この方法には注意点もあります。

例えば、文字列に複数の数値が含まれる場合、match メソッドはそれら全てを配列として返すため、適切に処理する必要があります。

const strMultiple = "2023年9月2日";
const matches = strMultiple.match(regex);

if (matches) {
    matches.forEach((m, i) => {
        const num = parseInt(m, 10);
        console.log(`取り出された数値${i + 1}: ${num}`);
    });
}

このコードを実行すると、”2023年9月2日”から、2023、9、2という3つの数値が取り出され、それぞれを整数に変換して表示します。

結果として、次のような出力がされるでしょう。

取り出された数値1: 2023
取り出された数値2: 9
取り出された数値3: 2

こうした複数の数値が含まれる場合には、forEachメソッドを使って配列の各要素に対して処理を行うことで、すべての数値を適切に取り扱うことができます。

○サンプルコード17：非同期処理中の変換

非同期処理とは、あるタスクが完了するのを待たずに、次のタスクを開始する手法を指します。

JavaScriptやTypeScriptでよく使われる非同期処理には、Promiseやasync/awaitがあります。

ここでは、非同期処理の中で、文字列を数値に変換する際のparseInt関数の使用方法について解説します。

// 非同期に数値を取得する関数
const fetchNumberStringAsync = async (): Promise<string> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("1234");
        }, 1000);
    });
};

// 上記の関数を利用して、取得した文字列を数値に変換する関数
const convertFetchedNumber = async () => {
    const numberString = await fetchNumberStringAsync();
    const numberValue = parseInt(numberString, 10);
    console.log(numberValue);
};

convertFetchedNumber();

このコードでは、まずfetchNumberStringAsyncという関数で非同期に数値の文字列を取得しています。

この関数は1秒後に文字列”1234″をPromiseとして返すように設定されています。

次に、convertFetchedNumberという関数で上記の非同期関数を呼び出し、取得した文字列をparseInt関数を用いて数値に変換しています。

このコードを実行すると、1秒後にconsole上に1234という数値が表示されます。

非同期処理中にparseInt関数を使用する際の注意点としては、非同期で取得したデータが必ずしも数値の文字列とは限らない点が挙げられます。

例えば、APIからデータを取得する場合など、取得データの形式を確認してからparseInt関数を使用するように心掛けると良いでしょう。

また、parseInt関数は数値の文字列でないものを変換しようとするとNaNを返しますので、変換後のデータがNaNでないか確認することも重要です。

○サンプルコード18：関数の拡張やカスタマイズ

TypeScriptの力をフルに活用することで、標準の関数やメソッドを拡張したりカスタマイズしたりすることができます。

parseInt関数も例外ではありません。

今回は、parseInt関数を拡張して、特定のニーズに応じた変換ロジックを持つカスタム関数の作成方法を解説します。

まずは基本的な関数拡張の方法から学びましょう。

// 既存のparseInt関数を拡張して、特定の条件で変換失敗した場合にデフォルト値を返す関数を作成
function customParseInt(value: string, radix?: number, defaultValue?: number): number {
    const result = parseInt(value, radix);
    if (isNaN(result) && defaultValue !== undefined) {
        return defaultValue;
    }
    return result;
}

// このコードの説明
// このコードでは、標準のparseInt関数をベースにカスタム関数を作成しています。
// この関数は、第三引数としてdefaultValueを受け取ります。
// parseIntで変換がNaN（非数値）になった場合、このdefaultValueが返されます。

このコードを実行すると、NaNが返されるケースでdefaultValueを返すカスタム関数を使用することができます。

const result1 = customParseInt("123abc", 10, 0);  // このコードを実行すると、123という結果になります。
const result2 = customParseInt("abcdef", 10, 0);  // このコードを実行すると、0というデフォルト値が返される結果となります。

次に、関数のカスタマイズ方法を見ていきましょう。

例えば、特定の文字列パターンを検知して、それに応じた変換ロジックを持つ関数を作成することも可能です。

// 特定の文字列パターンを検知して、カスタムの変換ロジックを持つ関数
function advancedParseInt(value: string): number | null {
    if (value.startsWith("$")) {
        return parseInt(value.slice(1));  // このコードでは、"$"から始まる文字列を検知して、"$"を除去した上で変換を行っています。
    }
    if (value.endsWith("yen")) {
        return parseInt(value.slice(0, -3));  // このコードでは、"yen"で終わる文字列を検知して、"yen"を除去した上で変換を行っています。
    }
    return null;  // 上記の条件に合致しない場合はnullを返す
}

この関数を使用することで、特定の文字列パターンに応じた変換が容易に行えます。

const result3 = advancedParseInt("$1000");  // このコードを実行すると、1000という結果になります。
const result4 = advancedParseInt("5000yen");  // このコードを実行すると、5000という結果になります。

○サンプルコード19：TypeScriptの型との組み合わせ

TypeScriptは静的型付けのスーパーセットであり、JavaScriptのすべての機能を持ちながらも、型のサポートを追加しています。

ここでは、parseInt関数とTypeScriptの型との組み合わせに関して詳しく説明します。

TypeScriptでは、変数や関数の引数、返り値などに型を指定することができます。

これにより、コンパイル時に型の不整合やエラーを検出することができるため、バグのリスクを大幅に減少させることができます。

// TypeScriptでの型宣言
let numberString: string = "12345";
let parsedNumber: number;

// parseInt関数を使用して文字列を数値に変換
parsedNumber = parseInt(numberString, 10);

// 型の検証
if (typeof parsedNumber === 'number') {
    console.log(`変換後の数値は${parsedNumber}です。`);
} else {
    console.log('変換に失敗しました。');
}

このコードでは、まずstring型の変数numberStringを定義して、数値に見える文字列を代入しています。

次に、この文字列をparseInt関数を使って数値に変換し、変換結果をnumber型の変数parsedNumberに代入しています。

その後、typeofを用いて変換後の変数が本当にnumber型であるかどうかをチェックしています。

これにより、変換が正しく行われたかを安全に確認することができます。

このコードを実行すると、consoleには「変換後の数値は12345です。」と表示されます。

これは、parseInt関数が正しく文字列を数値に変換し、その結果がnumber型の変数に代入されたことを意味します。

parseInt関数とTypeScriptの型システムを組み合わせた例も紹介します。

// 独自の数値変換関数
function safeParseInt(input: string): number | null {
    const result = parseInt(input, 10);
    if (isNaN(result)) {
        return null;
    }
    return result;
}

const value: string = "abc";
const numberValue: number | null = safeParseInt(value);
if (numberValue !== null) {
    console.log(`変換結果は${numberValue}です。`);
} else {
    console.log('数値に変換できませんでした。');
}

このコードでは、独自の数値変換関数safeParseIntを定義しています。

この関数は、文字列を受け取り、数値に変換できる場合はその数値を、変換できない場合はnullを返すようにしています。

このような関数を使用することで、parseInt関数の返り値がNaNである場合などにも対応することができます。

また、この関数の返り値の型はnumber | nullとなっており、数値かnullのどちらかを返すことを示しています。

これにより、関数の使用者は、この関数が返す値の型を正確に知ることができ、より安全なコードを書くことができます。

このコードを実行すると、「数値に変換できませんでした。」というメッセージがconsoleに出力されます。

これは、変換対象の文字列”value”が数値に変換できない値であったためです。

○サンプルコード20：ユーザー入力からの変換とバリデーション

ユーザーからの入力は、多くの場合、文字列の形式で受け取られます。

特にWebアプリケーションのフォーム入力などでは、このようなシチュエーションがよく発生します。

そうしたユーザー入力を数値に変換する際には、parseInt関数が非常に役立ちます。

しかし、ユーザー入力は予期せぬ値が含まれる可能性があるため、変換の際にはバリデーションも必要になります。

下記のコードは、ユーザーからの入力を数値に変換する際の例を表しています。

このコードでは、まずユーザーに数値を入力するように促し、その入力値をparseInt関数を使って整数に変換します。

変換後の値が有効な整数であるかどうかを確認し、無効な場合にはエラーメッセージを表示します。

// ユーザーに数値の入力を促す
const userInput: string = prompt("整数を入力してください:");

// parseIntを使って文字列を整数に変換
const convertedNumber: number = parseInt(userInput, 10);

// 変換後の値がNaN（数値でない）場合はエラーメッセージを表示
if (isNaN(convertedNumber)) {
    console.log("入力された値は有効な整数ではありません。");
} else {
    console.log(`入力された整数は${convertedNumber}です。`);
}

このコードを実行すると、まずユーザーに整数の入力を促すプロンプトが表示されます。

例えばユーザーが「123」と入力すれば、コンソールに「入力された整数は123です。」と表示されます。

一方で、「abc」など数値に変換できない文字列を入力すれば、「入力された値は有効な整数ではありません。」というメッセージが表示されます。

この方法では、ユーザーからの入力が数値として有効かどうかを簡単に確認できます。

しかしながら、より複雑なバリデーション条件や、複数の入力値の処理などを行いたい場合には、この方法を基盤としてさらなるロジックの追加や拡張が必要になります。

●parseInt関数の応用例

TypeScriptのparseInt関数は、文字列を数値に変換する際に頻繁に使用されます。

しかし、この関数の基本的な使い方だけでなく、応用例や実践的な使い方も多々あります。

ここでは、特定の計算や演算子との組み合わせによる応用例を紹介します。

○サンプルコード21：計算や演算子との組み合わせ

よくある使い方として、文字列として与えられた数値データを計算する際にparseInt関数を利用することが挙げられます。

// 文字列として与えられた2つの数字を足し算する関数
function addStrings(num1: string, num2: string): number {
  const number1 = parseInt(num1, 10); // 10進数として文字列を数値に変換
  const number2 = parseInt(num2, 10); // 10進数として文字列を数値に変換

  return number1 + number2;
}

console.log(addStrings("123", "456"));  // 出力結果は579

このコードでは、addStrings関数内で2つの文字列num1とnum2をparseInt関数を使って数値に変換しています。

そして、変換した数値を足し算して返しています。

実際にこのコードを実行すると、consoleには579と表示されます。

これは、文字列”123″と”456″が数値の123と456に変換され、その後、足し算が行われた結果です。

○サンプルコード22：オブジェクトや配列との組み合わせ

TypeScriptでは、オブジェクトや配列といったデータ構造と、parseInt関数を組み合わせて数値変換を行う場面があります。

ここでは、オブジェクトや配列の中に含まれる文字列を整数に変換する方法や、その応用例を紹介します。

□オブジェクトのプロパティを変換

下記のコードは、オブジェクト内の特定のプロパティの文字列を整数に変換する一例です。

const data = {
  age: "30",
  height: "175"
};

const parsedAge = parseInt(data.age, 10);
const parsedHeight = parseInt(data.height, 10);

console.log(parsedAge);    // 30
console.log(parsedHeight); // 175

このコードでは、dataオブジェクト内のageとheightプロパティをparseInt関数を使って整数に変換しています。

その結果、parsedAgeとparsedHeightはそれぞれ30と175という整数値を持ちます。

□配列の各要素を変換

配列内の全ての文字列を整数に変換する場合、map関数と組み合わせて変換を行うことができます。

const numbers = ["1", "2", "3", "4", "5"];
const parsedNumbers = numbers.map(num => parseInt(num, 10));

console.log(parsedNumbers); // [1, 2, 3, 4, 5]

このコードを実行すると、parsedNumbers配列には、それぞれ1から5までの整数が格納されます。

□オブジェクトの配列の特定のプロパティを変換

オブジェクトの配列が与えられたとき、特定のプロパティだけを変換したい場合もあります。

そのような場面での変換方法を紹介します。

const persons = [
  { name: "Taro", age: "25" },
  { name: "Jiro", age: "30" },
  { name: "Saburo", age: "20" }
];

const parsedPersons = persons.map(person => ({
  ...person,
  age: parseInt(person.age, 10)
}));

console.log(parsedPersons);
// [{ name: "Taro", age: 25 }, { name: "Jiro", age: 30 }, { name: "Saburo", age: 20 }]

上記のコードでは、persons配列内の各オブジェクトのageプロパティだけを整数に変換しています。

その結果、parsedPersons配列には変換後のオブジェクトが格納されます。

○サンプルコード23：関数としての再利用やモジュール化

TypeScriptでは、一度定義した処理を再利用するためのモジュールや関数の機能が豊富に提供されています。

この項目では、parseInt関数をカスタマイズし、モジュールとして再利用可能な形にする方法について詳しく解説します。

□カスタム関数の定義

まずは、parseIntを用いて特定の文字列を整数に変換する独自の関数を作成します。

このコードではcustomParseIntという関数を定義し、文字列を引数として整数を返すようにします。

function customParseInt(value: string, radix?: number): number {
  return parseInt(value, radix);
}

このコードでは、parseInt関数を内部で使用しており、引数として文字列valueと基数radixを受け取ります。

□エラーハンドリングの追加

次に、不正な文字列が入力された場合のエラーハンドリングを追加します。

function customParseInt(value: string, radix?: number): number {
  const result = parseInt(value, radix);
  if (isNaN(result)) {
    throw new Error('不正な文字列が入力されました。');
  }
  return result;
}

このコードを実行すると、不正な文字列が入力された際にはエラーがスローされます。

□モジュールとしてのエクスポート

次に、この関数を他のファイルからも利用できるようにモジュールとしてエクスポートします。

export function customParseInt(value: string, radix?: number): number {
  const result = parseInt(value, radix);
  if (isNaN(result)) {
    throw new Error('不正な文字列が入力されました。');
  }
  return result;
}

このコードをparser.tsという名前で保存し、別のファイルからimportすることで、customParseInt関数を再利用することができます。

例えば、新しくapp.tsというファイルを作成し、そこから上記の関数を利用する場合は次のように記述します。

import { customParseInt } from './parser';

console.log(customParseInt('10'));

このコードを実行すると、10という数字がコンソールに表示されます。

○サンプルコード24：フレームワークやライブラリとの組み合わせ

JavaScriptやTypeScriptの開発では、数多くのフレームワークやライブラリが存在しています。

その中でも、AngularやReact、Vue.jsなどのフロントエンドフレームワークは非常に人気があります。

今回は、これらのフレームワークやライブラリと組み合わせて、parseInt関数を効果的に利用する方法を解説します。

□Reactでの利用例

Reactでは、入力フォームを作成する際に、ユーザーからの文字列入力を整数に変換するケースが考えられます。

下記のコードは、Reactを使用してテキスト入力を受け取り、それを整数として表示するサンプルです。

import React, { useState } from 'react';

const ParseIntComponent: React.FC = () => {
    const [inputValue, setInputValue] = useState<string>("");
    const [parsedValue, setParsedValue] = useState<number | null>(null);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(e.target.value);
        const parsed = parseInt(e.target.value, 10);
        setParsedValue(isNaN(parsed) ? null : parsed);
    }

    return (
        <div>
            <input type="text" value={inputValue} onChange={handleChange} />
            <p>変換後の数値： {parsedValue !== null ? parsedValue : "変換できません"}</p>
        </div>
    )
}

export default ParseIntComponent;

このコードでは、テキストボックスに文字列を入力すると、handleChange関数が発火します。

この関数内でparseInt関数を利用し、入力された文字列を10進数の整数に変換しています。

変換が成功すれば、その整数を表示し、変換できなかった場合はエラーメッセージを表示します。

このサンプルコードを実行すると、テキストボックスに文字列を入力するたびに、その文字列が整数に変換されて表示されます。

たとえば、「123」を入力すると「変換後の数値： 123」と表示され、文字や特殊文字を含む不正な値を入力すると「変換後の数値：変換できません」と表示されます。

□Vue.jsでの利用例

Vue.jsもReactと同様に、ユーザーからの入力を受け取るシチュエーションでparseInt関数を利用することが考えられます。

Vue.jsでのサンプルコードを紹介します。

<template>
  <div>
    <input v-model="inputValue" @input="handleInput" />
    <p>変換後の数値： {{ parsedValue !== null ? parsedValue : '変換できません' }}</p>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';

export default {
  name: 'ParseIntComponent',
  setup() {
    const inputValue = ref("");
    const parsedValue = ref<number | null>(null);

    const handleInput = () => {
      const parsed = parseInt(inputValue.value, 10);
      parsedValue.value = isNaN(parsed) ? null : parsed;
    };

    return { inputValue, parsedValue, handleInput };
  }
}
</script>

このコードもReactの例と同様の動作をします。

テキストボックスに入力があるたびに、handleInput関数が呼び出され、入力された文字列が整数に変換されて表示されます。

○サンプルコード25：日付や時刻の変換

TypeScriptにおけるparseInt関数を使用して、日付や時刻の文字列を数値に変換する方法について詳細に解説します。

日付や時刻のデータを数値として扱う場合がありますが、この際にparseInt関数を使用すると、非常に便利にデータを変換することが可能です。

// 日付の文字列を数値に変換
const dateString = "2023-09-02";
const year = parseInt(dateString.substr(0, 4));
const month = parseInt(dateString.substr(5, 2));
const day = parseInt(dateString.substr(8, 2));

console.log(year);  // 2023
console.log(month); // 9
console.log(day);   // 2

// 時刻の文字列を数値に変換
const timeString = "14:30:55";
const hour = parseInt(timeString.substr(0, 2));
const minute = parseInt(timeString.substr(3, 2));
const second = parseInt(timeString.substr(6, 2));

console.log(hour);   // 14
console.log(minute); // 30
console.log(second); // 55

このコードでは、日付の文字列”2023-09-02″と時刻の文字列”14:30:55″を数値に変換しています。

具体的には、日付の文字列から年、月、日の部分をそれぞれsubstrメソッドで切り出しています。

その後、parseInt関数を使用して数値に変換しています。

時刻の文字列も同様に、時間、分、秒の部分をそれぞれsubstrメソッドで切り出し、parseInt関数を使用して数値に変換しています。

このコードを実行すると、日付の文字列から年、月、日、時刻の文字列から時間、分、秒を数値として得ることができます。

具体的には、年は2023、月は9、日は2、時間は14、分は30、秒は55として出力されます。

○サンプルコード26：複数の基数を組み合わせた変換

基数は、数を表現するための基準となる数のことを指します。

一般的には、10進数、16進数、8進数、2進数などがあります。

これらの基数をうまく使いこなすことで、データの変換や解析が効率的になります。

今回は、TypeScriptのparseInt関数を使用して、複数の基数を組み合わせた数値変換の方法について解説します。

// TypeScriptのparseInt関数を使った複数の基数を組み合わせた変換例
let decimalNumber: string = "15";
let hexadecimalNumber: string = "F";
let octalNumber: string = "17";
let binaryNumber: string = "1111";

let decimalToInt: number = parseInt(decimalNumber, 10);  // 10進数
let hexadecimalToInt: number = parseInt(hexadecimalNumber, 16);  // 16進数
let octalToInt: number = parseInt(octalNumber, 8);  // 8進数
let binaryToInt: number = parseInt(binaryNumber, 2);  // 2進数

console.log(decimalToInt);  // 15
console.log(hexadecimalToInt);  // 15
console.log(octalToInt);  // 15
console.log(binaryToInt);  // 15

このコードでは、4つの基数を使って文字列を整数に変換しています。

具体的には、parseInt関数の第2引数に基数を指定することで、指定した基数に従った数値変換が行われます。

上記の例では、10進数、16進数、8進数、2進数の文字列が、すべて10進数の15に変換されることを確認できます。

このコードを実行すると、4つのconsole.log出力結果として、すべて「15」と表示されます。

これは、それぞれの基数の文字列が10進数の15に変換されたためです。

○サンプルコード27：外部APIからのレスポンスデータの変換

TypeScriptでのプログラミングにおいて、Web APIからのレスポンスデータを処理する際には、多くの場面で文字列形式の数値を数値型へ変換する必要が出てきます。

このような場面で、parseInt関数を活用することで、効率的かつ安全にデータ変換を実行することが可能です。

例えば、外部のAPIから次のようなJSON形式のデータを取得したと仮定します。

{
  "id": "12345",
  "price": "5678.90"
}

このJSONのidやpriceが文字列として返される場合、これをTypeScriptで扱いやすくするためには数値型への変換が必要です。

下記のサンプルコードは、APIから取得したデータを数値に変換する一例です。

// 外部APIからのレスポンスデータを示す型定義
interface ApiResponse {
  id: string;
  price: string;
}

// レスポンスデータの例
const responseData: ApiResponse = {
  id: "12345",
  price: "5678.90"
};

// parseIntを使ってidを数値型に変換
const id = parseInt(responseData.id, 10);

// parseFloatを使ってpriceを浮動小数点数に変換
const price = parseFloat(responseData.price);

console.log(id);  // 12345として出力されます。
console.log(price);  // 5678.9として出力されます。

このコードでは、APIから取得したレスポンスデータを示す型ApiResponseを定義しています。

そして、レスポンスデータresponseDataのidをparseIntを使って数値型に、priceをparseFloatを使って浮動小数点数に変換しています。

このコードを実行すると、コンソールにはidとpriceが数値型で出力されます。

具体的には、12345と5678.9という結果が得られます。

また、TypeScriptでは型安全を意識するため、レスポンスデータの型を明示的に定義しています。

このように、parseIntやparseFloatを活用することで、APIのレスポンスデータを適切に処理し、TypeScriptでの開発効率を向上させることができます。

次に、このサンプルコードの応用例を見てみましょう。もし、APIのレスポンスデータに含まれる数値文字列が正しくない形式の場合、parseIntやparseFloatはNaNを返します。

これを防ぐための簡単な方法として、変換後の数値を確認し、NaNの場合はデフォルトの数値を割り当てるという処理を追加できます。

const defaultId = 0;
const defaultPrice = 0.0;

const convertedId = parseInt(responseData.id, 10);
const convertedPrice = parseFloat(responseData.price);

const finalId = isNaN(convertedId) ? defaultId : convertedId;
const finalPrice = isNaN(convertedPrice) ? defaultPrice : convertedPrice;

console.log(finalId);  // 正しい数値または0が出力されます。
console.log(finalPrice);  // 正しい数値または0.0が出力されます。

この例では、parseIntやparseFloatによる変換結果がNaNであるかどうかをチェックし、NaNの場合はデフォルトの数値を使用しています。

これにより、APIのレスポンスデータが不正な形式であっても、プログラムが安定して動作することが保証されます。

●注意点と対処法

○NaNの扱い方

TypeScriptでのparseInt関数は、数値への変換ができない文字列を入力として受け取った場合、特殊な値「NaN」(Not a Number)を返します。

これは、文字列が数値に変換できなかったことを示す値です。

例えば次のサンプルコードを見てみましょう。

const result1 = parseInt("Hello");
console.log(result1); // 出力内容は？

このコードでは、”Hello”という数値に変換できない文字列をparseInt関数に渡しています。

そのため、出力結果としてNaNが得られます。

また、空文字や特定の記号なども同様にNaNとして返されることがあります。

const result2 = parseInt("");
const result3 = parseInt("¥");
console.log(result2, result3); // 出力内容は？

このコードを実行すると、result2とresult3の両方ともNaNが出力されます。

では、NaNの扱い方について、注意点とその対処法を紹介します。

NaNは他の値との比較ができません。例えば、NaN === NaN はfalseを返します。このため、NaNの値をチェックする場合は、JavaScriptの組み込み関数であるisNaNを使用することを推奨します。

const value = parseInt("Hello");
if (isNaN(value)) {
    console.log("数値に変換できませんでした。");
}

このコードでは、isNaN関数を使用して、変換結果がNaNかどうかを確認しています。

NaNは算術計算の結果としても得られる場合があります。例えば、0を0で割るとNaNが得られます。このような場合も、isNaN関数を使用して結果を確認することができます。
NaNとの計算は、常にNaNを返します。つまり、NaNを含む算術計算は、正しい結果を得ることができません。

const sum = NaN + 5;
console.log(sum); // 出力内容は？

このコードの出力結果はNaNとなります。

NaNを扱う場合は、計算前に値のチェックを行うことが重要です。

○undefinedやnullの場合の処理

TypeScriptでのparseInt関数の利用は、JavaScriptとほとんど変わりませんが、TypeScriptの強力な型システムを利用しているため、特にundefinedやnullのような特殊な値の扱いに注意が必要です。

□undefinedやnullを直接変換する場合

まず基本的な動作として、parseInt関数にundefinedやnullを直接渡すと、どのような結果が得られるのかを見てみましょう。

// undefinedを直接渡す場合
const result1 = parseInt(undefined as any);
console.log(result1); // 出力結果はNaN

// nullを直接渡す場合
const result2 = parseInt(null as any);
console.log(result2); // 出力結果は0

このコードでは、parseIntにundefinedとnullを直接渡して数値変換を試みています。

実際には、通常このような使い方は推奨されませんが、動作を理解するためのサンプルとして挙げました。

このコードを実行すると、undefinedの場合はNaNが、nullの場合は0が返されることを確認できます。

しかし、TypeScriptの厳格な型チェックのもとでは、このような変換を直接行うとコンパイルエラーになります。

そのため、サンプルコードではas anyという型アサーションを利用しています。

□変数がundefinedやnullの可能性がある場合

一般的なプログラムでは、変数にundefinedやnullが入る可能性があります。

このような場合、parseInt関数を使用する前に、変数の値をチェックすることが推奨されます。

const value: string | undefined = getValue(); // getValue関数はstringかundefinedを返す関数と仮定

if (value !== undefined) {
    const result = parseInt(value);
    console.log(result);
} else {
    console.log("変数がundefinedです。");
}

このコードでは、getValue関数から返される値がundefinedかどうかをチェックしてから、parseInt関数を使用しています。

これにより、変数の値がundefinedの場合に、不適切な変換を避けることができます。

○変換時のエラー対応

TypeScriptを使った開発では、parseInt関数を使って文字列から数値への変換を頻繁に行う場面があります。

しかし、変換可能な文字列のみを扱うとは限らず、変換できない文字列が入力されることも考慮しなければなりません。

そこで、変換時のエラーにどのように対応すればよいか、具体的なサンプルコードを交えて詳しく見ていきましょう。

□予期しない文字列が入力された時

このコードでは、parseInt関数を使って文字列から数値への変換を試みます。

もし変換に失敗すると、NaN (Not a Number)が返されます。

そのため、変換後の値がNaNであるかどうかを確認することで、変換の成否を判断することができます。

const str = "Hello123";
const num = parseInt(str, 10);
if (isNaN(num)) {
    console.log("変換に失敗しました。");
} else {
    console.log(`変換結果： ${num}`);
}

このコードを実行すると、”変換に失敗しました。”と出力されます。

これは、”Hello123″という文字列が整数に変換できないからです。

□エラーハンドリングを活用する

次に、変換の際にエラーが発生した場合に、特定の処理を実行する方法を見てみましょう。

このコードでは、try-catch文を使ってエラーハンドリングを行います。

function parseIntWithErrorHandling(input: string): number {
    const result = parseInt(input, 10);
    if (isNaN(result)) {
        throw new Error(`"${input}"は数値に変換できません。`);
    }
    return result;
}

try {
    const value = parseIntWithErrorHandling("Hello123");
    console.log(`変換結果： ${value}`);
} catch (error) {
    console.error(error.message);
}

このコードを実行すると、”Hello123は数値に変換できません。”というエラーメッセージが出力されます。

これにより、エラーの内容を具体的に知ることができ、エラー処理を柔軟に行うことができます。

□ユーザーにフィードバックを提供する

もし変換に失敗した場合、ユーザーに対して適切なフィードバックを提供することも重要です。

このコードでは、変換に失敗した場合にユーザーにエラーメッセージを表示します。

const userInput = prompt("数値を入力してください：");
const numberValue = parseInt(userInput, 10);

if (isNaN(numberValue)) {
    alert("入力された値は数値に変換できません。");
} else {
    alert(`変換結果： ${numberValue}`);
}

このコードを実行すると、ユーザーが数値でない文字列を入力すると、”入力された値は数値に変換できません。”というメッセージが表示されます。

○特定の基数での変換に関する注意

TypeScriptでの数値変換にはparseInt関数が頻繁に使用されますが、この関数の第二引数として基数を指定することができます。

基数とは、数値をどの進数で解釈するかを示すもので、例えば10進数、16進数、8進数、2進数などが考えられます。

しかし、特定の基数を指定して変換する場合、いくつかの注意点があります。

まず、基数として設定できる範囲は2から36までです。

この範囲外の基数を指定した場合、parseInt関数はNaNを返します。

また、基数を指定しない場合、文字列が”0x”や”0X”で始まる場合は16進数として、”0″で始まる場合は8進数として解釈されることがあります。

このため、意図しない結果を得るリスクがあるため、基数は明示的に指定することが推奨されます。

次に、サンプルコードを見てみましょう。

// 10進数として解釈
const result1 = parseInt("12345", 10);
console.log(result1); // 12345

// 16進数として解釈
const result2 = parseInt("abc", 16);
console.log(result2); // 2748

// 8進数として解釈
const result3 = parseInt("70", 8);
console.log(result3); // 56

// 2進数として解釈
const result4 = parseInt("1101", 2);
console.log(result4); // 13

このコードでは、parseInt関数の第二引数に基数を指定して数値変換を行っています。

基数を10に設定することで、文字列”12345″は10進数の12345として解釈されます。

同様に、基数を16に設定すると文字列”abc”は16進数のabc、すなわち10進数の2748として解釈されます。

基数を8に設定すると、文字列”70″は8進数の70、すなわち10進数の56として解釈されます。

最後に、基数を2に設定すると、文字列”1101″は2進数の1101、すなわち10進数の13として解釈されます。

このコードを実行すると、それぞれの基数での変換結果が出力されます。

確認してみると、10進数での変換結果は12345、16進数での変換結果は2748、8進数での変換結果は56、2進数での変換結果は13となります。

○TypeScriptの型との整合性について

TypeScriptはJavaScriptに静的型付けの機能を追加した言語です。

静的型付けは、コードの可読性を向上させ、エラーの予防にも貢献します。

しかし、動的言語の特性を持つJavaScriptで行われる様々なデータ変換や操作を、TypeScriptの静的型付けの世界で行う際には注意が必要です。

特に、parseInt関数を使用する際には、変換される数値とTypeScriptの型との整合性に注意する必要があります。

□数値変換とTypeScriptの型

このコードでは、文字列から数値に変換するparseInt関数と、TypeScriptの型の基本的な使い方を示しています。

let numString: string = "12345";
let convertedNum: number = parseInt(numString);

このコードでは、numStringという名前の変数に文字列”12345″を代入しています。

次に、parseInt関数を使用してこの文字列を数値に変換し、convertedNumという名前の変数に代入しています。

このコードを実行すると、変数convertedNumには数値12345が代入されます。

しかし、TypeScriptを使用している場合、このような変換には注意が必要です。

例えば、次のようなコードでは、TypeScriptはエラーを出します。

let numString: string = "abc";
let convertedNum: number = parseInt(numString);

このコードでは、文字列”abc”を数値に変換しようとしています。

しかし、”abc”は数値に変換できないため、parseInt関数はNaNを返します。

そして、TypeScriptは数値型の変数にNaNを代入しようとするとエラーを出すため、このコードはコンパイルエラーとなります。

□型アサーションを使用した変換

TypeScriptの型アサーションを使用すると、変換結果を特定の型として扱うことができます。

例えば、次のようなコードでは、parseInt関数の結果を明示的にnumber型として扱うことができます。

let numString: string = "12345";
let convertedNum: number = <number>parseInt(numString);

このコードでは、<number>という型アサーションを使用して、parseInt関数の結果をnumber型として扱っています。

●カスタマイズ方法

TypeScriptにおけるparseInt関数の利用は、JavaScriptのそれと基本的には変わりません。

しかし、TypeScript特有の型システムや機能を活用することで、この関数のカスタマイズや拡張が可能です。

ここでは、特に独自の基数を設定するカスタマイズ方法に焦点を当てて解説します。

○独自の基数の設定

基数とは、数値の表現における基となる数のことを指します。

例えば、10進数の基数は10、2進数の基数は2です。

parseInt関数では、2つ目の引数として基数を指定することができます。

この基数をカスタマイズすることで、特定の基数に基づいて文字列を数値に変換することが可能です。

しかし、10進数や16進数など、標準的な基数以外の独自の基数を使用する場面は少ないかもしれません。

それでも、特定のプロジェクトや状況に応じて独自の基数を設定することが求められる場面は存在します。

このコードでは、5進数を使って文字列を数値に変換しています。

// 5進数の変換
function parseBase5(input: string): number {
    return parseInt(input, 5);
}

// 使用例
const result = parseBase5("34");
console.log(result);  // 独自の5進数での変換結果

このコードを実行すると、文字列”34″は5進数として解釈され、10進数での値に変換されます。

具体的には、3 * 5^1 + 4 * 5^0 = 15 + 4 = 19 となるため、結果として19が出力されます。

○関数の拡張方法

TypeScriptはJavaScriptのスーパーセットであるため、JavaScriptの持つ関数やメソッドをそのまま利用することが可能です。

しかし、TypeScriptの持つ強力な型システムをフル活用するため、JavaScriptの関数をTypeScript向けに拡張したい場面も多くあります。

ここでは、parseInt関数をTypeScriptでどのように拡張できるかを紹介します。

□カスタムエラーメッセージの追加

通常のparseInt関数では、変換に失敗するとNaN（Not a Number）が返されます。

しかし、具体的なエラーメッセージを提供することで、エラーの原因を特定しやすくなります。

このコードではtryParseIntという関数を使って、エラーメッセージを提供します。

function tryParseInt(input: string, radix?: number): [number, string | null] {
  const result = parseInt(input, radix);
  if (isNaN(result)) {
    return [NaN, "数値に変換できませんでした。"];
  }
  return [result, null];
}

const [value, errorMessage] = tryParseInt("abc");
if (errorMessage) {
  console.log(errorMessage);
} else {
  console.log(value);
}

このコードを実行すると、”数値に変換できませんでした。”というメッセージが表示されます。

成功した場合は、変換された数値が表示されます。

□TypeScriptの型を活用した拡張

TypeScriptの強力な型システムを活用して、関数の戻り値や引数の型を明確に指定することで、コードの品質を向上させることができます。

例として、parseInt関数の戻り値をnumberまたはnullに限定する関数を作成します。

function safeParseInt(input: string, radix?: number): number | null {
  const result = parseInt(input, radix);
  return isNaN(result) ? null : result;
}

const value = safeParseInt("10");
if (value !== null) {
  console.log(value);
} else {
  console.log("変換に失敗しました。");
}

このコードでは、safeParseInt関数を使って文字列を数値に変換します。

変換が成功した場合はその数値が、失敗した場合はnullが返されます。

このコードを実行すると、変換された数値や”変換に失敗しました。”というメッセージが表示されます。

□関数のカスタマイズ例

parseInt関数は非常にシンプルな関数であり、多くの場合このままでも十分な機能を提供しています。

しかし、特定のプロジェクトや状況に合わせて関数の動作をカスタマイズすることも可能です。

例として、特定のプレフィックスが付いた文字列のみを数値に変換する関数を作成します。

function customParseInt(input: string, prefix = "num:"): number | null {
  if (!input.startsWith(prefix)) {
    return null;
  }

  const result = parseInt(input.slice(prefix.length));
  return isNaN(result) ? null : result;
}

const value = customParseInt("num:10");
console.log(value);  // 10

このコードでは、customParseInt関数を使って、”num:”というプレフィックスが付いた文字列のみを数値に変換します。

この関数を使うと、指定されたプレフィックスがない文字列はnullが返されます。

このコードを実行すると、変換された数値が表示されます。

○外部ライブラリやフレームワークとの連携方法

TypeScriptとその強力な型システムは、多くの人々によって愛されています。

しかし、実際のアプリケーション開発において、TypeScriptだけで全てを実装することは難しいのが現実です。

実際、多くの場合、外部ライブラリやフレームワークと連携して、様々な機能を実装する必要があります。

そこで、ここでは、parseInt関数を用いた変換処理を、外部ライブラリやフレームワークと連携して実装する方法について詳しく解説していきます。

まずは、Reactフレームワークを例に、入力フォームからの数値入力をparseIntを用いて数値に変換するシンプルなサンプルを見てみましょう。

import React, { useState } from 'react';

const NumberInputComponent: React.FC = () => {
    const [inputValue, setInputValue] = useState<string>('');
    const [parsedValue, setParsedValue] = useState<number | null>(null);

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputValue(e.target.value);
        const parsed = parseInt(e.target.value, 10);
        if (!isNaN(parsed)) {
            setParsedValue(parsed);
        } else {
            setParsedValue(null);
        }
    };

    return (
        <div>
            <input type="text" value={inputValue} onChange={handleInputChange} />
            <p>変換後の数値: {parsedValue !== null ? parsedValue : '数値に変換できませんでした'}</p>
        </div>
    );
}

export default NumberInputComponent;

このコードでは、Reactを使って数値入力フォームを作成しています。

ユーザーが入力を行うと、入力された文字列が即座にparseInt関数によって数値に変換され、その結果が画面上に表示されます。

では、具体的にどのように動くのでしょうか？