すべてのカテゴリ

フロントエンドでAPI通信を学び始めると、必ず出てくるのが「fetch」と「axios」という言葉です。どちらも「サーバーからデータを取得するための仕組み」ですが、役割や立ち位置は同じではありません。まずは結論から言います。fetchはブラウザに最初から備わっている機能axiosは通信を扱いやすくするための外部ライブラリこの違いを押さえるだけで、混乱は一気に減ります。fetchとは何かfetchは、ブラウザに標準で用意されているAPI通信のための機能です。追加インストールは不要で、JavaScriptが動く環境なら基本的に使えます。特徴としては次のような点があります。・標準機能なので環境依存が少ない・シンプルで学習コストが低い・通信結果の扱いはやや低レベルfetchは「最低限の道具」です。柔軟ですが、その分、エラー処理やレスポンスの扱いを自分で正しく理解して書く必要があります。学習初期にfetchを使う意義はここにあります。HTTP通信の仕組みそのものを理解するための入口として、fetchは非常に優秀です。axiosとは何かaxiosは、API通信を簡単に、安全に書くためのライブラリです。npmなどでインストールして使います。axiosの特徴は以下の通りです。・通信処理が直感的に書ける・エラー処理が整理されている・JSONの扱いを自動でやってくれる・実務での使用例が多いaxiosは「実務向けの道具」です。fetchで毎回書く必要がある細かい処理を、裏側でまとめて面倒を見てくれます。その代わり、仕組みを理解しないまま使うと「なぜ動いているのかわからない状態」になりやすいという弱点