データ連携

JavaScript

【React】React Hook Formでフォームバリデーションを実装する方法

こんにちは、かつコーチです。前回はReact Query(TanStack Query)を使ったデータ取得の効率化について解説しました。データを「取得して表示する」側の話が一段落したので、今回は反対に「ユーザーからデータを受け取る」側、フォ...
JavaScript

【React】React Query(TanStack Query)でデータ取得を効率化する

こんにちは、かつコーチです。前回はfetchとuseEffectを組み合わせた基本的なデータ取得の方法を解説しました。isLoadingやerrorの管理、リクエストのキャンセルまで自前で書くと、コード量がどんどん増えていくことを実感しても...
JavaScript

【React】fetchでAPIからデータを取得して表示する方法

こんにちは、かつコーチです。前回はRedux・Zustand・Context APIの使い分けについて解説しました。状態管理の仕組みが分かってきたところで、今回は「外部のAPIからデータを取得して画面に表示する」という、実務では必ず通る道を...
JavaScript

【Vue】VueUseで便利なComposableを活用する

こんにちは、かつコーチです。前回は、axiosを使ってAPIからデータを取得・表示する方法と、その処理をComposableに切り出すところまで解説しました。今回は、「よく使うComposableを毎回自作しなくても、すでに用意されているラ...
JavaScript

【Vue】axiosでAPIからデータを取得して表示する

こんにちは、かつコーチです。前回は「Piniaの実践:ストアの分割と設計」で、状態管理の設計パターンを扱いました。今回からは、実際にAPIと通信してデータを取得・表示する「データ連携編」に入っていきます。第一弾は、Vueアプリで定番のHTT...
JavaScript

【Vue】VeeValidateでフォームバリデーションを実装する

こんにちは、かつコーチです。前回は、VueUseを使ってブラウザAPIまわりの処理を効率化する方法を解説しました。今回は、Vueアプリで避けて通れない「フォームバリデーション」を、専用ライブラリのVeeValidateで実装する方法を扱いま...