$30 off During Our Annual Pro Sale. View Details »

TypeScriptでライブラリとの依存を限定的にする方法

つちのこ
November 16, 2024

 TypeScriptでライブラリとの依存を限定的にする方法

TSKaigi Kansai: https://kansai.tskaigi.org/

Session
https://kansai.tskaigi.org/talks/noko_noko619

フレームワークやライブラリへの依存が深くなってしまう問題は、開発者は誰しもが経験していることだと思います。そうした中で、そういった課題を解決するための方法の一つとして、TypeScriptを使用した「ライブラリのスコープの限定」や「使用用途の制限」などを行う方法を紹介します。

具体的には、ライブラリを使用する箇所を特定のファイル内に限定し、そのライブラリを使用する上で必要な情報を型によって制限することにあります。そうすることで、ライブラリのアップデートや変更に対して、その特定のファイルへの対応のみで済むことや、型によって使用用途が制限されることで、ライブラリを使用する側の実装ミスなどを減らすことができるメリットを有しております。

特別珍しいことを行っているわけではないため、今回紹介する方法を普段何気なく実践しているチームや環境もあるかと思いますが、改めて方法の一つとして提示し、今後開発に取り入れるかどうか検討する材料にしていただけると幸いです。

つちのこ

November 16, 2024
Tweet

Other Decks in Programming

Transcript

  1. Chakra UI のコンポーネント ◦ UIライブラリをそのまま各所で使用すると、   アップデートや移行の際、多くのファイルの変更を  必要とする ◦ コンポーネントライブラリをそのまま使用するので 

    はなく、それを包括するコンポーネントを作成する ◦ 外側からスタイルを調整できるようにする ◦ ライブラリで定義されている型を参照して、   コンポーネントの使用用途を制限する 実装例①
  2. 実装例② Next.js App Router の fetch 関数 ◦ Next.js の拡張された

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