JavaScript Vue×Piniaで簡単なTODOアプリを作ってみる
こんにちは、かつコーチです。前回は、Vueプロジェクトのディレクトリ構成のベストプラクティスについて解説しました。今回はVue.js編の最終回として、これまで学んできたComposition API・Pinia・型定義・設計の考え方を総動員...
Vue
JavaScript JavaScript 【Vue】Vueプロジェクトのディレクトリ構成のベストプラクティス
こんにちは、かつコーチです。前回は、Vueアプリのパフォーマンスチューニングについて解説しました。今回は視点を変えて、「アプリが育ってきたときにどうディレクトリを構成するか」という設計のテーマを扱います。Vue CLIやViteでプロジェク...
JavaScript 【Vue】Vueアプリのパフォーマンスチューニング入門
こんにちは、かつコーチです。前回は、リアクティビティが効かない現象の原因と対処法を掘り下げました。今回は視点を変えて、「動くけど遅い」Vueアプリをどう改善していくか、パフォーマンスチューニングの入門編を扱います。やみくもに最適化するのでは...
JavaScript 【Vue】リアクティビティが効かない時の原因と対処法
こんにちは、かつコーチです。前回は、Vueでよく出るエラーとその解決法を初心者向けにまとめました。今回はもう一段掘り下げて、上級者でも意外とハマる「リアクティビティが効かない」という現象を扱います。エラーメッセージが出ないだけに原因調査が厄...
JavaScript 【Vue】Vueでよく出るエラーと解決法まとめ
こんにちは、かつコーチです。前回は、開発・ステージング・本番など環境ごとの環境変数管理（.env）について解説しました。今回からは実践Tips編として、Vue.jsを書いていると誰もが一度はぶつかる定番エラーを、原因と解決法つきでまとめてい...
JavaScript 【Vue】環境ごとの環境変数管理（.env）
こんにちは、かつコーチです。前回はNetlifyを使ったVueアプリのデプロイ手順を解説しました。デプロイができるようになると次に出てくるのが、「開発中と本番で、APIの向き先やキーを切り替えたい」という悩みです。今回は、Vueアプリで環境...
JavaScript 【Vue】VueアプリをNetlifyにデプロイする方法
こんにちは、かつコーチです。前回まではテスト編として、VitestやVue Test Utilsを使ったテストの書き方を解説してきました。今回からはデプロイ・インフラ連携編に入り、作ったVueアプリを実際にインターネット上に公開する方法を扱...
JavaScript 【Vue】コンポーネントのユニットテスト実践
こんにちは、かつコーチです。前回は、Vue Test Utilsの基本的な使い方として、propsやイベントのテストを解説しました。テスト編の最後となる今回は、フォームやAPI通信を含む、もう少し実務に近いコンポーネントを題材にユニットテス...
JavaScript 【Vue】Vue Test Utilsでコンポーネントをテストする
こんにちは、かつコーチです。前回は、Vitestの基本と、純粋な関数に対するテストの書き方を解説しました。今回は、Vue公式のテストユーティリティであるVue Test Utilsを使って、Vueコンポーネントそのものをテストする方法を扱い...
JavaScript 【Vue】VueUseで便利なComposableを活用する
こんにちは、かつコーチです。前回は、axiosを使ってAPIからデータを取得・表示する方法と、その処理をComposableに切り出すところまで解説しました。今回は、「よく使うComposableを毎回自作しなくても、すでに用意されているラ...
JavaScript 【Vue】axiosでAPIからデータを取得して表示する
こんにちは、かつコーチです。前回は「Piniaの実践：ストアの分割と設計」で、状態管理の設計パターンを扱いました。今回からは、実際にAPIと通信してデータを取得・表示する「データ連携編」に入っていきます。第一弾は、Vueアプリで定番のHTT...
JavaScript 【Vue】Piniaとは？
こんにちは、かつコーチです。Vuejsでの状態管理はVuexが主流でしたが、Vuejsがバージョン3になってから、Piniaが登場しました。今回は、そのPiniaについて解説します。Piniaとは？PiniaはVue.jsの状態管理ライブラ...
JavaScript 【Laravel】Vue + Inertiaで画像アップロードする方法
こんにちは、かつコーチです。今回は、LaravelのVuejs + Inertiaを使った画像のアップロード方法についてです。コード全体Index.vueで一覧画面と登録画面を一緒にしています。<script setup>import { ...
JavaScript 【Nuxt.js】Nuxtプロジェクトのディレクトリ構成のベストプラクティス（Next.jsとの対比）
こんにちは、かつコーチです。Nuxtシリーズもいよいよ最終回です。これまでpages・layouts・composables・server/apiなど、各ディレクトリの役割を個別に解説してきました。今回はそれらを俯瞰し、大規模プロジェクトで...
JavaScript 【Nuxt.js】useFetchがSSR/CSRで二重に実行されてハマった話
こんにちは、かつコーチです。先日、案件で作っていた管理画面で、useFetchが同じAPIを2回叩いていることに気づきました。ネットワークタブを見ても1回しか通信していないのに、サーバーログには同じリクエストが2件記録されていました。原因を...
JavaScript 【Nuxt.js】Nuxtでよく出るエラーと解決法まとめ
こんにちは、かつコーチです。これまでNuxt.jsシリーズでは、ルーティングやデータ取得、サーバーAPIなど基本機能を一通り解説してきました。ここからは少し毛色を変えて、実践Tips・つまずき解決編です。今回は、Nuxtを触っていると本当に...
JavaScript 【Nuxt.js】NuxtアプリをVercel/Netlifyにデプロイする方法
こんにちは、かつコーチです。ローカルで動くようになったNuxtアプリを、いよいよ世界に公開したいというタイミングだと思います。Nuxtアプリのデプロイ先としてよく選ばれるのが、VercelとNetlifyという2つのホスティングサービスです...
JavaScript 【Nuxt.js】Vitestでコンポーネントをテストする入門
こんにちは、かつコーチです。コンポーネントを作るたびに、ブラウザで手動確認していませんか。画面が増えてくると、修正のたびに全ページを目視確認するのは現実的ではなくなります。そこで今回は、Nuxtの公式テストツールである@nuxt/test-...
JavaScript 【Nuxt.js】nuxt-auth-utilsで認証機能を実装する
こんにちは、かつコーチです。Nuxtでアプリを作っていると、必ずぶつかるのが認証機能の実装です。自前でCookieやセッションを設計してもいいのですが、OAuth連携やパスワードハッシュ化まで含めると、意外と実装コストが高くなります。今回は...
JavaScript 【Nuxt.js】Piniaで状態管理を行う（Nuxtでの導入方法）
こんにちは、かつコーチです。前回は server/api を使って、Nuxtアプリの中に自前のAPIを作る方法を解説しました。今回は、そのAPIから取得したデータや、ログイン情報のようにアプリ全体で使い回したい状態を管理する Pinia（P...