つくる - ユーティリティTS化｜コードで実践

第3章の道具を 1 本にまとめる

この回で新しい知識は出てきません。第3章で覚えた 5 つを、ゆめさくのポートフォリオ用ユーティリティ関数群に一気に通します。

使うのは引数と戻り値の型、省略可能な引数、デフォルト引数、変数に入れた関数の関数型、そしてコールバックの型です。

つくるもの

持ち主の名前、作品タイトル、公開しているかどうかを受け取り、公開中の作品を先頭から何件かだけ並べた一行を返す関数です。備考が渡されたときは、うしろにカッコで足します。

ゆめさくさんの公開作品 プロフィールサイト / スキル一覧の表
さとうさんの公開作品 プロフィールサイト (2026年更新)

3 つの部品に分ける

1 つ目は、タイトルの配列を / でつなぐだけの小さな関数です。変数に入れるので、変数の側に関数型を書きます。

const joinTitles: (titles: string[]) => string = (titles) => titles.join(" / ");

2 つ目は、公開中のものだけを選び出す関数です。filter のコールバックは要素と番号を受け取ります。番号のほうも数値だと書いておきます。

function pickPublished(titles: string[], published: boolean[]): string[] {
  return titles.filter((title: string, index: number): boolean => published[index]);
}

3 つ目が本体です。並べる件数はふだん 2 件なのでデフォルト引数、備考は無いことのほうが多いので省略可能な引数にします。順番は必ず、必須の引数、既定値のある引数、省略可能な引数、です。

function portfolioReport(owner: string, titles: string[], published: boolean[], limit: number = 2, note?: string): string {
  const shown = pickPublished(titles, published).slice(0, limit);
  let text = owner + "さんの公開作品 " + joinTitles(shown);
  if (note !== undefined) {
    text = text + " (" + note + ")";
  }
  return text;
}

備考は undefined かもしれないので、足す前に確かめます。ここを飛ばすと 'note' is possibly 'undefined'. で止まります。

手を動かす

演習では、この 3 つを型注釈の無い状態で渡します。上から順に型を付け、limit に既定値を持たせ、note を省略できるようにしてください。型を付け終えると、備考が無いときの分岐がまだ書かれていないことにも気づけるはずです。

つくる - ユーティリティTS化

第3章の道具を 1 本にまとめる

つくるもの

3 つの部品に分ける

手を動かす

要件

入出力例

ヒント

メモ