スキップしてメイン コンテンツに移動

投稿

8月, 2023の投稿を表示しています

アロー関数、宣言関数、関数式の使い分け

 JavaScriptやTypeScriptにおいて、アロー関数、宣言関数、関数式の使い分けは、コードのコンテキストや使用ケースによって異なります。以下にそれぞれのタイプの特徴と適切な使い分けのケースを説明します。 1. **アロー関数 (Arrow Functions):**    アロー関数は、短い構文で関数を記述するための機能です。主に無名関数やコールバック関数として利用されます。アロー関数は、関数内の `this` の挙動が通常の関数と異なる点に注意が必要です。    ```typescript    const add = (a: number, b: number): number => a + b;    const greet = (name: string): string => `Hello, ${name}!`;    ```    **使い分けのケース:**    - 簡潔な関数を作成する場合に適しています。    - ラムダ式や無名関数として使用する際に便利です。    - `this` の挙動を気にしないシンプルなコールバック関数として利用します。 2. **宣言関数 (Function Declarations):**    宣言関数は、通常の関数宣言の形式で定義されます。ホイスティングにより、関数宣言はそのスコープ内のどこからでも呼び出せます。    ```typescript    function multiply(a: number, b: number): number {        return a * b;    }    ```    **使い分けのケース:**    - 大規模なコードベースや複雑なロジックを持つ関数を作成する場合に適しています。    - ホイスティングによって関数を定義前に呼び出すことができるため、可読...

Typescript 残余引数

 TypeScriptにおける「残余引数」(Rest Parameters)は、関数のパラメータとして、可変個数の引数を受け取るための仕組みです。関数の定義において、残余引数を表すために `...` 演算子を使用します。これにより、関数呼び出し時に指定された引数のうち、先頭のいくつかを通常のパラメータとして処理し、残りの引数を配列として受け取ることができます。 以下は、残余引数の基本的な使い方を示した TypeScript の例です: ```typescript function sumAllNumbers(...numbers: number[]): number {     return numbers.reduce((sum, num) => sum + num, 0); } const result1 = sumAllNumbers(1, 2, 3, 4, 5); console.log(result1); // 15 const result2 = sumAllNumbers(10, 20); console.log(result2); // 30 ``` この例では、`sumAllNumbers`関数が残余引数 `...numbers` を受け取っています。関数内では、この残余引数 `numbers` は通常の配列として扱われます。関数呼び出し時に渡されたすべての引数が、`numbers` 配列にまとめられます。その後、配列の `reduce` メソッドを使って、与えられた数値の合計を計算しています。 残余引数を使うことで、可変個数の引数をスマートに扱うことができます。これは、同じ種類の引数を複数回呼び出す関数を作成したり、引数の数が事前にわからない場合に特に便利です。

Typescriptのevery

 TypeScriptにおける`every`は、配列のすべての要素が特定の条件を満たすかどうかを判定するためのメソッドです。このメソッドは、与えられた条件関数を配列のすべての要素に適用し、すべての要素が条件を満たす場合に`true`を返し、1つでも条件を満たさない要素がある場合には`false`を返します。 以下は、`every`メソッドの基本的な使い方と例を示したコードです。 ```typescript const numbers = [2, 4, 6, 8, 10]; const allEven = numbers.every(number => number % 2 === 0); console.log(allEven); // true const allGreaterThanFive = numbers.every(number => number > 5); console.log(allGreaterThanFive); // false ``` この例では、`every`メソッドを使用して配列の要素が特定の条件を満たすかどうかを判定しています。最初の例では、すべての要素が偶数であるため、`allEven`は`true`になります。2番目の例では、要素のうち5より大きいものは存在するものの、すべての要素が5より大きいわけではないため、`allGreaterThanFive`は`false`になります。 `every`メソッドは、特定の条件がすべての要素に対して成り立つかどうかを判定する際に便利です。ただし、1つでも条件を満たさない要素が存在する場合にはすぐに`false`が返されるため、その挙動に注意が必要です。

Typescriptのis演算子

 TypeScriptにおける`is`演算子は、特定の型であるかどうかを判定し、その型の制約を持った変数を作成するために使用される、カスタムな型ガードを実現するための演算子です。型ガードは、プログラム内で特定の型を確認し、それに基づいてコードを安全に制御するための手段です。 カスタムな型ガードを定義する際に`is`演算子を使用する例を以下に示します。 ```typescript // カスタム型ガードの定義 function isString(value: unknown): value is string {     return typeof value === "string"; } function isNumber(value: unknown): value is number {     return typeof value === "number"; } // 使用例 function printValueType(value: unknown) {     if (isString(value)) {         console.log("Value is a string:", value.toUpperCase());     } else if (isNumber(value)) {         console.log("Value is a number:", value.toFixed(2));     } else {         console.log("Value has an unknown type");     } } printValueType("hello"); // Value is a string: HELLO printValueType(42);     // Value is a number: 42.00 printValueType(true);   // Value has an unknown ...

Typescriptのin演算子

 TypeScriptの`in`演算子は、特定のプロパティがオブジェクトに存在するかどうかを判定するために使用されます。具体的には、指定したプロパティがオブジェクト自体またはそのプロトタイプチェーン内に存在するかどうかを確認するために使います。 以下は、`in`演算子の基本的な使い方と例です。 ```typescript interface Person {     name: string;     age: number; } const person: Person = {     name: "Alice",     age: 30 }; if ("name" in person) {     console.log("person has 'name' property"); } if ("age" in person) {     console.log("person has 'age' property"); } if ("gender" in person) {     console.log("person has 'gender' property"); // このブロックは実行されません } ``` この例では、`in`演算子を使用して`person`オブジェクト内に特定のプロパティが存在するかどうかを確認しています。`"name"`と`"age"`のプロパティは存在するため、それぞれの`if`文が実行されますが、`"gender"`のプロパティは存在しないため、関連する`if`文は実行されません。 `in`演算子は、オブジェクト内にプロパティが存在するかどうかを確認する際に便利です。ただし、プロパティが存在することを確認した後にそのプロパティを安全にアクセスするには、型ガードなどのメカニズムを使用して適切な型の制約を持つ必要があります。

TypeScriptのneverとvoid型の違い

 TypeScriptにおける`never`型と`void`型は、どちらも特殊な型ですが、異なる用途と意味を持っています。 1. **void型** (`void`):    `void`型は、関数が値を返さないことを示すために使用されます。つまり、関数が何らかの結果を返さない場合、その戻り値の型は`void`です。一般的に、関数内で`return`文を使用して値を返さない場合に`void`型が利用されます。    ```typescript    function showMessage(): void {        console.log("Hello, world!");    }    const result: void = showMessage(); // showMessage関数が値を返さないため、resultの型はvoid    ``` 2. **never型** (`never`):    `never`型は、絶対に値を持たない型です。これは、例外をスローしたり、無限ループに陥ったりするなど、実行が完全に終了しない場合に使用されます。また、他の型のサブタイプとしても機能するため、どの型とも互換性がありません。    ```typescript    function throwError(message: string): never {        throw new Error(message);    }    function infiniteLoop(): never {        while (true) {            // ここに何か処理を記述すると、関数が終了しない        }    }    const neverVal...

ジェネリクスとは何?

 ジェネリクス(Generics)は、プログラミング言語において、異なるデータ型に対して汎用的なコードを記述するための仕組みです。ジェネリクスを使用することで、特定のデータ型に依存しない再利用可能な関数やクラスを作成できます。これにより、型安全性を保ちながら柔軟で抽象化されたコードを記述することができます。 ジェネリクスは主に以下の場面で役立ちます: 1. **コードの再利用**: 同じロジックを異なるデータ型に適用する場合、ジェネリクスを使うことでコードの重複を避けられます。 2. **コレクションやデータ構造の汎用性**: 配列、リスト、スタック、キューなどのデータ構造を、異なるデータ型で使用する際にジェネリクスを利用できます。 3. **関数の汎用化**: 特定のデータ型に依存しない関数を作成する際、ジェネリクスを使用して関数のパラメータや戻り値の型を柔軟に扱えます。 例を挙げて説明しましょう。以下は、ジェネリクスを使用した TypeScript の関数です。 ```typescript function identity<T>(arg: T): T {   return arg; } // 型推論により、number 型を引数に与えると number 型を返す関数として解釈される let result = identity(5); // result の型は number となる ``` この例では、`<T>`がジェネリック型パラメータを表し、`arg`の型と戻り値の型が同じ型 `T` となるようにしています。関数呼び出し時に具体的な型が指定されることで、関数内部での型安全性が確保されます。 ジェネリクスは、型安全性を維持しつつ柔軟で再利用可能なコードを書くための強力なツールです。

Typescriptを詳しく紹介する

 TypeScriptは、Microsoftによって開発されたプログラミング言語であり、JavaScriptのスーパーセットであると同時に、静的型付けとオブジェクト指向プログラミングの機能を追加したものです。JavaScriptは動的型付けの言語であるため、TypeScriptはその欠点を補完し、大規模なプロジェクトやコードベースをより安全に、保守しやすくすることを目的としています。以下に、TypeScriptの主な特徴や概念について詳しく説明します。 1. **静的型付け**: TypeScriptは変数や関数のパラメータなどに型情報を付与することができます。これにより、コードの実行前に型エラーを検出することができ、ランタイムエラーを減少させることができます。 2. **型注釈と型推論**: 変数や関数のパラメータに型情報を明示的に指定することを「型注釈」と呼びます。一方で、TypeScriptは型情報がない場合でもコードを解析し、文脈から型を推論する能力を持っています。 3. **インターフェースと型エイリアス**: インターフェースや型エイリアスを使用して、複雑なデータ構造や型を定義できます。これにより、再利用性の高い型定義を作成し、コードの可読性を向上させることができます。 4. **クラスとオブジェクト指向プログラミング**: TypeScriptはクラス、継承、ポリモーフィズムなどのオブジェクト指向プログラミングの機能をサポートしています。これにより、コードの組織化や再利用が容易になります。 5. **ジェネリクス**: ジェネリクスを使用することで、汎用的な関数やクラスを作成できます。これにより、特定の型に依存しない再利用可能なコードを書くことができます。 6. **型ガードと型アサーション**: TypeScriptは型に関する条件をチェックし、特定のスコープ内での型の安全性を保証するための機能を提供します。また、開発者が型に対する明示的な操作を行うための型アサーションもサポートされています。 7. **非同期プログラミングのサポート**: TypeScriptは`async`と`await`を使用して非同期コードを記述することができ、Promisesや非同期関数の型情報をサポートしています。 8. **型定義ファイル**: 既存のJavaS...

TypeScript勉強メモ(ジェネリクス)

  ジェネリクス 汎用的で再利用可能なコードを書くことができる。 例) ジェネリクスの関数を定義して、 function indentity< T >(arg: T ): T {     return arg; } 使う際に必要に応じて、異なる方の引数を指定できる。 const argResult = indentity< number >( 12 ); // 12 const argStringResult = indentity< string >( '12' ); // '12' 複数の型引数を定義してもOK、 function test<T, U, P>(arg1:T, arg2: U, arg3: P): P { return arg3; } const hesAgeResult = hesAge( 'his' , 'age is' , 18 ); // 18 その他の例) https://qiita.com/k-penguin-sato/items/9baa959e8919157afcd4