[Angular]Signalのススメ

ようやく今年の1/3が終わったわ

新人のみなさ～ん、入社して1ヶ月経ちましたが、立派なソルジャーになるための育成はちゃんとされていますか？
GWもGW(頑張ってWork)してる人たちお疲れ様です、代わりにいっぱい休んでおきますね!!

そんなこんなでGW中なので手短にソースを

今回はAngular17ぐらいから出てきたSignalというのを使ってみたサンプル

Signal使ってみたやつ

// importやclass宣言とかは省略

// id,label,isSelected(選択状態)をアイテムに持つからの配列を宣言
const hogeList = signal<{
  id: string;
  label: string;
  isSelected: boolean;
}[]>([]);

// 選択済みの情報だけを抽出するだけのcompute
const selectedList = compute(() => this.hogeList().filter(i=>i.isSelected));

// データを取得する関数
getData = () => {
  // API呼び出しとかでresには配列が返ってきてる想定
  const res: {
    id: string;
    label: string;
    isSelected: boolean;
  }[] = callAPI();
  
  // signalのデータを更新する時の書き方
  this.hogeList.update(() => [...res]);
}

NgRXのStoreとReducerを集約したような印象で、computeとかについてはSelectorみたいに元のSignalを編集したものが定義てきたりするので、割とコード量が減ってスッキリするね!