2024年 11月16日 TypeScriptで ライブラリとの依存を 限定的にする方法

自己紹介 つちのこ（山﨑） 2022年 フロントエンドエンジニア 所属：株式会社CyberAgent 業務：TypeScript, React, Next.js 趣味：読書、ゲーム配信視聴

お悩み

お悩み 1. ライブラリのアップデート等の対応 使用しているライブラリのアップデートが入り、新たな機能や使い方が追加された際、その ライブラリを使用している箇所一つ一つを確認しながら対応していかなければならない。

1. ライブラリのアップデート等の対応 使用しているライブラリのアップデートが入り、新たな機能や使い方が追加された際、その ライブラリを使用している箇所一つ一つを確認しながら対応していかなければならない。 2. 別のライブラリへの移行対応 ライブラリを別のものに移行しようとした際、サービスのライブラリへの依存が深すぎてし まい、引き剥がすために数ヶ月単位で時間を要することもあります。 お悩み

解決方法

解決方法 ライブラリを特定のスコープに閉じる

ライブラリを特定のスコープに閉じる 原因 導入したライブラリを各所で使用するため、ライブラリのアップデートや移行の際に変更差 分が大きくなってしまいます。 解決方法

ライブラリを特定のスコープに閉じる 原因 導入したライブラリを各所で使用するため、ライブラリのアップデートや移行の際に変更差 分が大きくなってしまいます。 対策 導入したライブラリの使用場所を特定のファイルに限定することで、ライブラリの依存先を そのファイルだけにする。そうすることで、ライブラリのアップデートや移行があった際 に、修正箇所がそのファイルだけで済むようになります。 解決方法

Chakra UI のコンポーネント ○ UIライブラリをそのまま各所で使用すると、 　 アップデートや移行の際、多くのファイルの変更を　 必要とする ○ コンポーネントライブラリをそのまま使用するので　 はなく、それを包括するコンポーネントを作成する ○ 外側からスタイルを調整できるようにする ○ ライブラリで定義されている型を参照して、 　 コンポーネントの使用用途を制限する 実装例①

実装例② Next.js App Router の fetch 関数 ○ Next.js の拡張された fetch 関数をそのまま 　 各所で使用すると、アップデートや移行の際、 　 多くのファイルの変更を必要とする ○ サーバーから取得したデータの cache を行う 　 設定値や設定方法がいくつかある中で、 　 基本的に使用する設定は限られている ○ App Router 環境下の fetch 関数を 　 包括する関数を作成し、型によって使用 　 できる cache を限定する

○ ライブラリ本来の型をできるだけ準拠する ライブラリを包括するといっても、ライブラリへ依存することに変わりないので、ライブラ リ自体のアップデートに備え、基本的にはライブラリ本来の型を準拠することが重要です。 ポイント

○ ライブラリ本来の型をできるだけ準拠する ライブラリを包括するといっても、ライブラリへ依存することに変わりないので、ライブラ リ自体のアップデートに備え、基本的にはライブラリ本来の型を準拠することが重要です。 ○ 汎用的に使えるように意識する 包括するライブラリによっては、サービス全体で使用する基盤部分になるため、ある程度ど のような場面でも使用できるよう汎用性を意識することが重要です。また、全てのパターン を想定することは不可能に近いので、拡張性という面にも気を配りながら実装するべきだと 思います。 ポイント

メリット ○ ライブラリへの依存度を低下させることができる ライブラリを包括した関数を定義することで、ライブラリのアップデート等の対応は、その 包括した関数のみになるため、サービス全体のライブラリへの依存度を低下させることがで きます。

メリット ○ ライブラリへの依存度を低下させることができる ライブラリを包括した関数を定義することで、ライブラリのアップデート等の対応は、その 包括した関数のみになるため、サービス全体のライブラリへの依存度を低下させることがで きます。 ○ 実装者ミスやレビューの負荷を下げることができる 本来の型のメリットと同じく、型によって値や渡す引数に制限を設けることができるため、 実装者の実装ミスとレビュー者の負担を減らすことができます。

○ ライブラリを特定のスコープに閉じて、依存を限定的にしよう 課題 ライブラリを各所で使用することで、ライブラリのアップデートや移行が大変になる メリット 1. ライブラリへの依存を下げることで、アップデートや移行の難度を軽減できます 2. 実装者やレビュー者の負担も軽減させることができます ポイント 1. ライブラリの型を準拠して実装を行いましょう 2. 汎用性、拡張性を意識して実装を行いましょう まとめ

ありがとうございました