JavaScript
【JavaScript】ブラウザ互換性対応の考え方
Laravel 【Laravel】LaravelのRoute設計で迷わないための整理術 〜Resource・Controller Group・命名規則の考え方〜
こんにちは、かつコーチです。Laravelも長く使っていて相棒のような存在担ってきました。Laravelを使っていると、Routeの書き方で迷うことがあります。Laravelは自由度が高く、同じことを実現する方法がいくつもあります。そのため...
Laravel 【Laravel】Laravel×Reactの構成比較：どちらを選ぶべきか検証してみた
こんにちは、かつコーチです。前回は、LaravelとVue（Inertia.js）で簡単なTODOアプリを作りました。今回は同じTODOアプリをReactでも作ってみて、Vue構成との違いを実際に比較検証していきます。このシリーズもいよいよ...
AI 【Gemini】Geminiを使った業務活用の具体例
こんにちは、かつコーチです。Geminiシリーズもいよいよ最終回です。これまで、Geminiの基本的な使い方、Googleサービス連携、PDF処理、料金プランと紹介してきました。最後となる今回は、これらを組み合わせて実際の業務にどう活かせる...
AI 【Gemini】Geminiの料金プラン比較
こんにちは、かつコーチです。これまでの記事で、Geminiの基本的な使い方やPDF処理、Googleサービス連携を紹介してきました。「便利なのは分かったけど、結局どのプランを選べばいいの？」という疑問が出てくる頃だと思います。この記事では、...
AI 【Gemini】大量のPDF・資料をGeminiで一気に処理する方法
こんにちは、かつコーチです。前回はGmail・ドライブ・スプレッドシートとの連携を紹介しましたが、今回はGeminiのもう一つの大きな武器、「大量のPDF・資料処理」を掘り下げていきます。数十ページの資料を1つ読み込ませるだけでなく、複数の...
AI 【Gemini】GeminiとGoogleサービス（Gmail・スプレッドシート等）の連携
こんにちは、かつコーチです。前回の記事では、Geminiの始め方と基本的な使い方を紹介しました。その中で軽く触れた「Googleサービスとの連携」ですが、実はここがGeminiを本気で使いこなすうえで一番おいしいポイントです。ChatGPT...
AI 【Gemini】Geminiとは？始め方と基本的な使い方
こんにちは、かつコーチです。「ChatGPTは聞いたことあるけど、Geminiって何？」そんな疑問を持っている人、意外と多いのではないでしょうか。Geminiは、Googleが開発している生成AIです。結論からお伝えすると、Geminiの強...
AI 【ChatGPT】GPTs（カスタムChatGPT）の作り方
こんにちは、かつコーチです。前回はDALL-Eによる画像生成を紹介しました。ChatGPT編の最後となる今回は、自分専用にカスタマイズしたChatGPTを作れる「GPTs」の作り方を解説します。毎回同じような指示を打ち込んでいる作業がある人...
AI 【ChatGPT】ChatGPTで画像を生成する方法（DALL-E）
こんにちは、かつコーチです。前回はChatGPTを使った業務効率化の事例を紹介しました。今回はテキストではなく「画像生成」に焦点を当てて、ChatGPT上でDALL-Eを使った画像の作り方を解説していきます。SNS投稿のアイキャッチやブログ...
AI 【ChatGPT】ChatGPTを使った業務効率化の具体例
こんにちは、かつコーチです。これまでの記事でChatGPTの始め方と料金プランを紹介してきました。今回は一段レベルを上げて、実際の業務でどうChatGPTを使えば効率化につながるのか、具体的な事例とプロンプト例を交えて解説します。「毎回チャ...
AI 【ChatGPT】ChatGPTの料金プラン比較：無料版とPlusの違い
こんにちは、かつコーチです。前回はChatGPTの始め方と基本的な使い方を紹介しました。実際に使い始めると、多くの人がぶつかるのが「無料版のままでいいのか、有料のPlusにするべきか」という悩みです。今回は、無料版とPlusプランの違いを具...
AI 【ChatGPT】ChatGPTとは？始め方と基本的な使い方
こんにちは、かつコーチです。このブログではこれまでClaudeやプロンプトエンジニアリングの記事を書いてきましたが、今回からはChatGPT編をスタートします。「ChatGPTって名前は知ってるけど、実際どう始めればいいの？」「Claude...
AI 【AI】業務でそのまま使えるプロンプトテンプレート集
こんにちは、かつコーチです。ここまでプロンプトの基本、5要素、コンテキストの整理術、ツール別の作法の違いと解説してきました。今回はシリーズの締めくくりとして、実際の業務でそのままコピペして使えるプロンプトテンプレートをまとめて紹介します。「...
AI 【AI】AIツール別プロンプトの作法の違い（ChatGPT/Gemini/Claude）
こんにちは、かつコーチです。ここまでプロンプトの基本、5要素、コンテキストの整理術と解説してきました。これらは3大AI（ChatGPT・Gemini・Claude）に共通する基本原則ですが、実は「どのAIを使うか」によって、プロンプトの効き...
AI 【AI】プロンプトが長くなりすぎるときの整理術（コンテキストエンジニアリング入門）
こんにちは、かつコーチです。前回、プロンプトの5要素（目的・役割・制約・出力形式・例）を紹介しました。この5要素を丁寧に埋めていくと、プロンプトはどんどん長くなります。さらに実務では、業務マニュアルや過去のやり取り、参考資料などもAIに渡し...
AI 【AI】プロンプトの5要素：目的・役割・制約・出力形式・例
こんにちは、かつコーチです。前回の記事では「良い指示・悪い指示の違い」について、具体的にどう書けばいいかを解説しました。とはいえ、いざ自分でプロンプトを書こうとすると「何から書けばいいんだっけ？」と手が止まってしまう人も多いと思います。そこ...
AI 【AI】プロンプトの書き方の基本：良い指示・悪い指示の違い
こんにちは、かつコーチです。ChatGPTやClaude、Geminiを使っていて「思ったような回答が返ってこない」と感じたことはありませんか。実はその原因の多くは、AIの性能ではなく「プロンプト（指示文）」の書き方にあります。同じAIでも...
AI 【Claude】Coworkとは？Claudeに一連の作業を任せる新しい使い方
こんにちは、かつコーチです。前回はClaude Designで、スライドやプロトタイプを作る方法を紹介しました。今回は「Claude活用法」シリーズの最終回として、2026年に登場した「Cowork」を取り上げます。これまで紹介してきたCl...
AI 【Claude】Claude Designでデザイン・スライドを作る
こんにちは、かつコーチです。前回は、Claude Codeの基本操作とCLAUDE.mdの書き方を紹介しました。今回は、2026年に登場した「Claude Design」を取り上げます。コードを書くClaude Codeに対して、こちらは資...
AI 【Claude】Claude Codeの始め方：基本操作からCLAUDE.mdの書き方まで
こんにちは、かつコーチです。前回は、Claude Codeが「AIが自分でファイルを作り、コマンドを実行するツール」であることを解説しました。今回は実際に手を動かして、インストールから基本操作、そしてClaude Codeを何倍も使いやすく...
Laravel 【Laravel】LaravelのRoute設計で迷わないための整理術 〜Resource・Controller Group・命名規則の考え方〜
こんにちは、かつコーチです。Laravelも長く使っていて相棒のような存在担ってきました。Laravelを使っていると、Routeの書き方で迷うことがあります。Laravelは自由度が高く、同じことを実現する方法がいくつもあります。そのため...
Laravel 【Laravel】Laravel×Reactの構成比較：どちらを選ぶべきか検証してみた
こんにちは、かつコーチです。前回は、LaravelとVue（Inertia.js）で簡単なTODOアプリを作りました。今回は同じTODOアプリをReactでも作ってみて、Vue構成との違いを実際に比較検証していきます。このシリーズもいよいよ...
JavaScript node.jsアップデート時に起こる対処法
こんにちは、かつコーチです。今回はNode.jsのupdateについてです。普段はあまり意識することがないのですが、updateするときに躓くところだったので、備忘録として残します。【Mac】Node.js/npmのアップデートで発生したエ...
Laravel 【Laravel】Seederでテストデータを入れる3つの方法と使い分け方〜 DB::table() と updateOrCreate() の違いを徹底解説〜
こんにちは、かつコーチです。Laravelで開発していると、テストデータや初期データを登録したい場面は多くあります。そんなときに便利なのが「Seeder」です。本記事では、Seederでデータを登録する3つの方法と、それぞれの使いどころをわ...
JavaScript 【React】Redux・Zustand・Context APIを同じアプリで実際に使い比べてみた
こんにちは、かつコーチです。前回はAPI連携ありのTODOアプリを、useStateとカスタムフックだけで実装しました。今回はReact編の最終回として、「同じ簡単なアプリを、状態管理の主要な選択肢それぞれで実装したらどう違うのか」を実際に...
JavaScript 【React】ReactとAPI連携で簡単なTODOアプリを作ってみる
こんにちは、かつコーチです。ここまでディレクトリ構成・Atomic Design・カスタムフックの設計パターンと、React設計の考え方を積み上げてきました。今回はいよいよ実践編として、それらを組み合わせながらAPI連携ありのTODOアプリ...
JavaScript 【React】カスタムフックの設計パターン集
こんにちは、かつコーチです。前回はAtomic Designで、コンポーネントの「見た目」の粒度を整理する考え方を解説しました。今回は、その裏側にある「ロジック」の整理方法、つまりカスタムフックの設計パターンを扱います。カスタムフックはus...
React 【React】Atomic Design入門：コンポーネントを整理する考え方
こんにちは、かつコーチです。前回はディレクトリ構成のベストプラクティスとして、種類別構成・機能別構成・Atomic Design構成の3つを比較しました。その中でも「粒度ごとにコンポーネントを分類する」という考え方であるAtomic Des...
JavaScript 【React】Reactプロジェクトのディレクトリ構成のベストプラクティス
こんにちは、かつコーチです。前回は「太らせないコンポーネント設計の考え方」というテーマで、1つのコンポーネントが責務を抱えすぎないようにする考え方を解説しました。今回はその一歩手前、そもそもファイルをどこに置くかという話です。コンポーネント...
JavaScript 【React】太らせないコンポーネント設計の考え方
こんにちは、かつコーチです。前回まで4回にわたって「エラー解決編」をお届けしてきました。今回からは「設計・アーキテクチャ編」に入ります。1本目のテーマは、Reactを書いていると誰もが一度は経験する「気づいたら1つのコンポーネントが数百行に...
JavaScript 【React】Reactアプリのパフォーマンスチューニング入門
こんにちは、かつコーチです。前回は「React DevToolsでコンポーネントの状態を確認する方法」を解説しました。今回は、DevToolsのProfilerタブで見つけた「重い箇所」を実際にどう改善していくか、パフォーマンスチューニング...
JavaScript 【React】React DevToolsでコンポーネントの状態を確認する方法
こんにちは、かつコーチです。前回は「無限re-renderが起きる原因と対処法」を解説しました。console.logを無限ループの中に埋め込んで原因を追う方法もありますが、正直かなり効率が悪いです。今回は、そういったバグ調査を格段に楽にし...
JavaScript 【React】無限re-renderが起きる原因と対処法
こんにちは、かつコーチです。前回は「keyがありません」警告を取り上げました。今回は、React学習者の多くが一度は通る「画面がフリーズする」「コンソールが真っ赤になる」という無限re-renderを扱います。Maximum update ...
JavaScript 【React】「keyがありません」警告の意味と対処法
こんにちは、かつコーチです。前回は「Reactでよく出るエラーと解決法まとめ」で、代表的なエラーを一通り見てきました。今回からは、個別のつまずきポイントをひとつずつ深掘りしていきます。1本目のテーマは、リストを表示するコードを書くとほぼ必ず...
Laravel 【Laravel】Laravel×Vue/Inertiaで簡単なTODOアプリを作ってみる
こんにちは、かつコーチです。これまでService・Repository・Form Request・ディレクトリ構成と、Laravelの設計面を中心に見てきました。ここからは実践編として、フロントエンドにVueを使い、Inertia.jsで...
Laravel 【Laravel】Laravelのディレクトリ構成をカスタマイズする考え方
こんにちは、かつコーチです。これまでService・Repositoryパターン、Form Requestと、責務ごとにクラスを分ける方法を紹介してきました。クラスの数が増えてくると、次に気になるのが「これらをどこに置くか」というディレクト...
Laravel 【Laravel】Form Requestを活用してバリデーションを整理する
こんにちは、かつコーチです。前回はService・Repositoryパターンで、ControllerからDB操作や業務ロジックを追い出す方法を紹介しました。今回は、Controllerに残りがちなもう一つの塊「バリデーション」を整理する、...
Laravel 【Laravel】Service・Repositoryパターンを導入するメリットと実装例
こんにちは、かつコーチです。前回は「太らせないControllerの書き方」というテーマで、Controllerの責務を最小限に絞る考え方を扱いました。では、Controllerから追い出したロジックはどこに行くべきなのでしょうか。今回はそ...
Laravel 【Laravel】MVCを実践する：太らせないControllerの書き方
こんにちは、かつコーチです。前回はパフォーマンスチューニングの基本を解説しました。今回からは設計・アーキテクチャ編に入り、最初のテーマとして「Fat Controller（太ったコントローラ）」問題を扱います。Laravelは書きやすさゆえ...
Laravel 【Laravel】Laravelのパフォーマンスチューニング入門
こんにちは、かつコーチです。前回は外部APIとの連携方法を解説しました。今回は、実装したアプリケーションが「遅い」と感じ始めたときに見直すべき、Laravelのパフォーマンスチューニングの基本を扱います。やみくもにキャッシュを増やすのではな...
Laravel 【Laravel】LaravelのRoute設計で迷わないための整理術 〜Resource・Controller Group・命名規則の考え方〜
こんにちは、かつコーチです。Laravelも長く使っていて相棒のような存在担ってきました。Laravelを使っていると、Routeの書き方で迷うことがあります。Laravelは自由度が高く、同じことを実現する方法がいくつもあります。そのため...
Laravel 【Laravel】Laravel×Reactの構成比較：どちらを選ぶべきか検証してみた
こんにちは、かつコーチです。前回は、LaravelとVue（Inertia.js）で簡単なTODOアプリを作りました。今回は同じTODOアプリをReactでも作ってみて、Vue構成との違いを実際に比較検証していきます。このシリーズもいよいよ...
Laravel 【Laravel】Seederでテストデータを入れる3つの方法と使い分け方〜 DB::table() と updateOrCreate() の違いを徹底解説〜
こんにちは、かつコーチです。Laravelで開発していると、テストデータや初期データを登録したい場面は多くあります。そんなときに便利なのが「Seeder」です。本記事では、Seederでデータを登録する3つの方法と、それぞれの使いどころをわ...
Laravel 【Laravel】Laravel×Vue/Inertiaで簡単なTODOアプリを作ってみる
こんにちは、かつコーチです。これまでService・Repository・Form Request・ディレクトリ構成と、Laravelの設計面を中心に見てきました。ここからは実践編として、フロントエンドにVueを使い、Inertia.jsで...
Laravel 【Laravel】Laravelのディレクトリ構成をカスタマイズする考え方
こんにちは、かつコーチです。これまでService・Repositoryパターン、Form Requestと、責務ごとにクラスを分ける方法を紹介してきました。クラスの数が増えてくると、次に気になるのが「これらをどこに置くか」というディレクト...
Laravel 【Laravel】Form Requestを活用してバリデーションを整理する
こんにちは、かつコーチです。前回はService・Repositoryパターンで、ControllerからDB操作や業務ロジックを追い出す方法を紹介しました。今回は、Controllerに残りがちなもう一つの塊「バリデーション」を整理する、...
Laravel 【Laravel】Service・Repositoryパターンを導入するメリットと実装例
こんにちは、かつコーチです。前回は「太らせないControllerの書き方」というテーマで、Controllerの責務を最小限に絞る考え方を扱いました。では、Controllerから追い出したロジックはどこに行くべきなのでしょうか。今回はそ...
Laravel 【Laravel】MVCを実践する：太らせないControllerの書き方
こんにちは、かつコーチです。前回はパフォーマンスチューニングの基本を解説しました。今回からは設計・アーキテクチャ編に入り、最初のテーマとして「Fat Controller（太ったコントローラ）」問題を扱います。Laravelは書きやすさゆえ...
Laravel 【Laravel】Laravelのパフォーマンスチューニング入門
こんにちは、かつコーチです。前回は外部APIとの連携方法を解説しました。今回は、実装したアプリケーションが「遅い」と感じ始めたときに見直すべき、Laravelのパフォーマンスチューニングの基本を扱います。やみくもにキャッシュを増やすのではな...
Laravel 【Laravel】外部APIとの連携方法（Http::get/postの使い方）
こんにちは、かつコーチです。前回はAPI Resourceで自社のAPIレスポンスを整形する方法を解説しました。今回はその逆で、天気情報や決済サービス、外部の認証基盤など、他社が提供するAPIをLaravelから呼び出す方法を扱います。La...
Laravel 【Laravel】LaravelでAPIを作る基本（API Resource）
こんにちは、かつコーチです。前回はLivewireの基本機能を解説しました。今回は少し話題を変えて、フロントエンドがVueやReact、あるいはスマホアプリになったときに欠かせない「API」の作り方を扱います。Eloquentモデルをそのま...
Laravel 【Laravel】Vue・Inertia・Laravelでの画像アップロード実装
こんにちは、かつコーチです。前回はBladeベースでのファイルアップロードの実装パターンを解説しました。今回はもう一歩進んで、Vue・Inertiaを使ったSPA（Single Page Application）構成での画像アップロードを扱...
Laravel 【Laravel】ファイルアップロードの実装パターン集
こんにちは、かつコーチです。前回はLaravelでよく出るエラーと解決法をまとめました。今回は、実務でほぼ必ず出てくる「ファイルアップロード」の実装パターンを、基本から一歩踏み込んだところまで解説します。プロフィール画像、PDFの添付、CS...
Laravel 【Laravel】Laravelでよく出るエラーと解決法まとめ
こんにちは、かつコーチです。ここまでルーティングやコントローラ、Eloquent、認証、キュー、スケジューラといった機能を順番に解説してきました。今回からは少し毛色を変えて、「実践Tips・エラー解決」編に入っていきます。初回は、Larav...
Laravel 【Laravel】Task Scheduling（スケジューラ）で定期処理を実装する
こんにちは、かつコーチです。前回はQueueを使って、時間のかかる処理を非同期化する方法を解説しました。今回は、その延長線上にある「定期処理」の実装方法です。「毎日深夜に古いデータを削除したい」「毎朝レポートをメールで送りたい」——こういっ...
Laravel 【Laravel】Queueの基本：時間のかかる処理を非同期化する
こんにちは、かつコーチです。前回は、config・route・viewの3種類のキャッシュで応答速度を改善する方法を解説しました。キャッシュは「無駄な処理を減らして速くする」アプローチでしたが、今回紹介するQueue（キュー）は、「時間のか...
Laravel 【Laravel】Laravelのキャッシュ設定（config/route/viewキャッシュ）
こんにちは、かつコーチです。前回は、.env ファイルの環境ごとの管理方法と、シークレット情報の安全な扱い方を解説しました。その中で少し触れた config:cache について、今回はきちんと掘り下げていきます。Laravelには、本番環...
Laravel 【Laravel】環境ごとの.env管理とシークレット情報の扱い方
こんにちは、かつコーチです。前回は、Laravelアプリを本番環境にデプロイする一連の流れを解説しました。その手順の中で何度も登場した .env ファイルですが、実は「開発環境と本番環境でどう使い分けるか」「パスワードなどの機密情報をどう安...
Laravel 【Laravel】Laravelアプリを本番環境にデプロイする流れ
こんにちは、かつコーチです。前回は、GitHub Actionsでテストを自動化するCIの仕組みを解説しました。テストが安心して通せるようになったら、次はいよいよ「本番環境にアプリを届ける」というステップに進みます。ここから数回にわたって、...
Laravel 【Laravel】GitHub ActionsでLaravelのテストをCI連携する
こんにちは、かつコーチです。前回まで、FactoryとRefreshDatabaseを使ってテストデータを整える方法を解説してきました。ローカル環境で php artisan test を実行すれば、テストが通るかどうかは確認できます。です...