0Pricing
TypeScript Academy · レッスン

アロー関数とコンテキスト型付け

アロー関数を自在に使い、使用方法からコンテキスト型付けによってパラメーターや戻り値の型が推論される仕組みを学びます

「アロー関数とコンテキスト型付け」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

アロー関数とコンテキストを使う理由

アロー関数は簡潔な構文と字句的なthisを提供します。コンテキスト型付けにより、TypeScriptは使用箇所(例:配列メソッド)からパラメーターと戻り値の型を推論するため、安全性を保ちながら定型コードを減らせます。

アロー関数の基礎

明確さが増す場合は、パラメーターと戻り値に型注釈を付けます。アロー関数は簡潔で、周囲のthisを保持します(function宣言とは異なります)。

// Arrow syntax: parameters => expression/body
const greet = (name: string): string => {
  return `Hello, ${name}`;
};

console.log(greet("Ada"));

mapによるコンテキスト

コンテキスト型付け:mapは要素の型を把握しているため、アロー関数のパラメーターはnumber、結果はnumber[]として推論されます。

// Context supplies types: numbers.map expects (n:number)=>number
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // n inferred as number
console.log(doubled);

推論される戻り値

型付きAPI(Promise、配列メソッド)がパラメーターと戻り値の推論を導くため、明示的な型注釈を付ける必要が少なくなります。

// Promise.then infers the callback parameter and return type
const toLength = (s: string) => s.length;

Promise.resolve("TS")
  .then(s => toLength(s))       // s inferred as string
  .then(len => console.log(len));

オプションとデフォルト

アロー関数はデフォルトパラメーターとオプションパラメーターに対応しています。オプションの値を使う前に、絞り込むか代替値(例:??)を指定します。

// Optional + default with arrows
const padLeft = (text: string, width = 2, ch?: string): string => {
  const fill = (ch ?? " ").repeat(Math.max(0, width));
  return fill + text;
};

console.log(padLeft("X"));         // default width 2, default char " "
console.log(padLeft("X", 4, "."));

注意点

注意点:

  • 型注釈を付けすぎると推論が機能しなくなるため、最小限から始めます。
  • 型付けされていないAPI(any)を使う場合や意図が不明確な場合は、明示的に指定します。
  • アロー関数はthisを字句的に捕捉します。コールバックには適していますが、動的なthisが必要な場合は避けてください。

コンテキスト型付けチェック

クイックチェック:アロー関数における「コンテキスト型付け」とは何を意味しますか?

まとめと次のステップ

まとめ:アロー関数は簡潔な構文と字句的なthisを提供します。コンテキスト型付けでは使用箇所をもとに推論するため、コールバックを短く保ちながら型安全にできます。

よくある質問

「アロー関数とコンテキスト型付け」レッスンは無料ですか?

はい。「アロー関数とコンテキスト型付け」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「アロー関数とコンテキスト型付け」で何を学びますか?

アロー関数を自在に使い、使用方法からコンテキスト型付けによってパラメーターや戻り値の型が推論される仕組みを学びます ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。

「アロー関数とコンテキスト型付け」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか?

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. if/else、switch、ループ;真偽値評価と厳密なチェック
  2. 関数:params、default/optional/rest、戻り値の型
  3. アロー関数とコンテキスト型付け
← TypeScript Academyに戻る