145
114

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

axiosやfetchに替わるKyのススメ

Last updated at Posted at 2024-07-25

Kyとは

Kyは、Sindre Sorhusが開発したJavaScript向けの軽量かつ多機能なHTTPクライアントです。ネーミングの意図はよくわかりませんが、AxiosやネイティブのFetch APIに代わる、より効率的で使いやすい選択肢として設計されています。

Kyの利点

  1. 軽量で効率的: Kyのコアは非常に小さく(約2 KB)、パフォーマンスが重要なアプリケーションにとっては特に大きなメリットとなります。
  2. Promiseベース: Fetch APIと同様に、KyはPromiseを基盤としており、async/await構文との組み合わせが容易です。
  3. シンプルなAPI: Kyが提供するAPIは非常にシンプルなので、学習コストが抑えられます。
  4. 再試行機能: Kyには、失敗したリクエストの再試行する機能が組み込まれており、エラーハンドリングの実装コストを減らします。
  5. JSON処理: Kyは自動的にJSONリクエストとレスポンスを処理しするので別途変換ロジックを実装する必要はありません。
  6. 拡張機能: プラグインを利用して機能を拡張でき、膨れ上がることなくカスタマイズが可能です。

AxiosおよびFetch APIとの比較

サイズとパフォーマンス

  • Ky: KyはAxiosよりもかなり小さく(約半分)、バンドルサイズや読み込み時間に対する影響が少ないので、パフォーマンスが重要なアプリケーションにより適しています。
  • Axios: Axiosは多機能ですが、Kyと比較してサイズが大きくなります。多くの組み込み機能を提供しますが、その分バンドルサイズが増加します。
  • Fetch API: ネイティブのブラウザAPIであるFetchはバンドルサイズに影響を与えません。しかし、古いブラウザにはポリフィルが必要であり、その場合はバンドルサイズが増加してしまう可能性があります。

APIのシンプルさ

  • Ky: KyのAPIはシンプルで直感的です。例えば、POSTリクエストを行うのは非常に簡単です。
    import ky from 'ky';
    const response = await ky.post('https://api.example.com/post', {
      json: { todo }
    }).json<Todo>();
    
  • Axios: AxiosもKyと同様にシンプルなAPIを提供します。AxiosでのPOSTリクエストは以下のようになります。
    import axios from 'axios';
    const response = await axios.post<Todo>('https://api.example.com/post',
      { todo }
    ).data
    
  • Fetch API: Fetchはやや冗長で、一般的なタスクに対してより多くの実装が必要です。FetchでのPOSTリクエストは以下のようになります。
    const response = await fetch('https://api.example.com/post',{
      method: 'POST',
      headers: {
          'Content-Type': 'application/json'
      },
      body: JSON.stringify({todo})
    });
    if (!response.ok) throw response
    const data = await response.json();
    

JSON処理

  • Ky: KyはJSONリクエストとレスポンスを自動的に処理し、手動での解析の必要性を減らします。
  • Axios: AxiosもKyと同様に自動的なJSON処理を提供します。
  • Fetch API: Fetchでは、JSONレスポンスを手動で解析する必要があり、実装や保守コストが増加します。

エラーハンドリングと再試行

  • Ky: Kyには再試行機能があり、簡単に設定できます。これにより、カスタムの再試行ロジックの必要性が減ります。
    import ky from 'ky';
    const response = await ky.get('https://api.example.com/data', { retry: 3 }).json();
    
  • Axios: Axiosには組み込みの再試行ロジックはありませんが、プラグインやカスタムコードを使用して追加できます。
  • Fetch API: Fetchには組み込みの再試行機能がなく、再試行とエラーハンドリングには追加で実装が必要です。

拡張性

  • Ky: Kyはプラグインを使用して拡張でき、コアのサイズを増やすことなく機能を追加できます。
  • Axios: Axiosはインターセプターや他のプラグインを使用しての拡張性が非常に高いです。
  • Fetch API: Fetchはミドルウェアのようなパターンを使用して拡張できますが、KyやAxiosに比べてより多くの追加実装が必要です。

まとめ

Kyは、JavaScriptアプリケーションでHTTPリクエストを行うための強力な代替手段ということがおわかりいただけたかと思います。その軽量な性質、シンプルなAPI、自動JSON処理や再試行機能などが、効率と使いやすさを求める開発者にとって魅力的なパッケージだと思います。Axiosは依然として強力なパッケージであり、Fetchはネイティブソリューションという利点を提供しますが、Kyは最小限のオーバーヘッドで基本機能を提供することで三者三様の相関となっています。

参考

145
114
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
145
114

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?