Bootstrap
【Bootstrap基礎学習9】Bootstrapでfloatを使ってみよう！
Laravel 【Laravel】LaravelのRoute設計で迷わないための整理術 〜Resource・Controller Group・命名規則の考え方〜
こんにちは、かつコーチです。Laravelも長く使っていて相棒のような存在担ってきました。Laravelを使っていると、Routeの書き方で迷うことがあります。Laravelは自由度が高く、同じことを実現する方法がいくつもあります。そのため...
Laravel 【Laravel】Laravel×Reactの構成比較：どちらを選ぶべきか検証してみた
こんにちは、かつコーチです。前回は、LaravelとVue（Inertia.js）で簡単なTODOアプリを作りました。今回は同じTODOアプリをReactでも作ってみて、Vue構成との違いを実際に比較検証していきます。このシリーズもいよいよ...
JavaScript 【jQuery】素のJavaScript、2026年どちらを選ぶべきか徹底比較
こんにちは、かつコーチです。このシリーズでjQueryの基本から実装・エラー解決まで一通り学んできた方の中には、「結局、実務ではjQueryと素のJavaScript、どちらを使えばいいの？」という疑問が残っているのではないでしょうか。素の...
JavaScript 【jQuery】よくあるエラーと解決法まとめ（$ is not defined等）
こんにちは、かつコーチです。「jQueryのコードを書いたのに、コンソールに赤いエラーが出て動かない…」という経験は、jQueryを触り始めた人の多くが通る道です。コンソールとは、ブラウザの開発者ツールでエラーやログを確認できる画面のことで...
JavaScript 【jQuery】$.getJSON()で外部データを取得して表示する
こんにちは、かつコーチです。「$.ajax()は分かったけど、JSON取得だけならもっと短く書けないの？」と感じたことはありませんか。jQueryには、JSON形式のデータ取得に特化した$.getJSON()というショートカットメソッドが用...
JavaScript 【jQuery】$.ajax()でAPI通信する基本（fetchとの違いも解説）
こんにちは、かつコーチです。「サーバーからデータを取ってきて画面に表示したい」という場面は、業務でも学習でもよく出てきます。jQueryには、そんな非同期通信（ページを再読み込みせずにサーバーとデータをやり取りする仕組み）を簡単に扱える$....
JavaScript 【jQuery】スムーススクロールをjQueryで実装する
こんにちは、かつコーチです。前回はフォームのバリデーションをjQueryで実装しました。実践UI実装シリーズの最後は、ページ内リンクをなめらかに移動させるスムーススクロールです。素のJavaScript版では scrollIntoView(...
JavaScript 【jQuery】フォームのバリデーションをjQueryで実装する
こんにちは、かつコーチです。前回はスライドショー・カルーセルをjQueryで実装しました。今回は、お問い合わせフォームなどで欠かせないバリデーション（入力チェック）をjQueryで実装していきます。素のJavaScript版では blur ...
JavaScript 【jQuery】スライドショー・カルーセルをjQueryで実装する
こんにちは、かつコーチです。前回はモーダルウィンドウをjQueryで実装しました。今回は、トップページなどでよく見るスライダー（カルーセル）をjQueryで実装していきます。素のJavaScript版ではCSSの transform: tr...
JavaScript 【jQuery】モーダルウィンドウをjQueryで実装する
こんにちは、かつコーチです。「レガシー案件を保守することになったけど、jQueryでモーダルを実装した箇所がどう動いているか読めない」という相談をよく受けます。モーダルウィンドウは、画像の拡大表示や確認ダイアログなど、どんなサイトでも一度は...
JavaScript 【jQuery】タブ切り替えをjQueryで実装する
こんにちは、かつコーチです。前回は、アコーディオンをjQueryで実装しながら、素のJavaScript版との書き方の違いを比較しました。今回は、同じく「複数の要素からアクティブなものを1つだけ選ぶ」というUIである、タブ切り替えを実装して...
JavaScript 【jQuery】アコーディオン（FAQ）をjQueryで実装する（素のJS版との比較）
こんにちは、かつコーチです。以前、JavaScript基礎編の記事で、素のJavaScriptを使ったアコーディオン（FAQ）の開閉実装を紹介しました。今回はここからが「実践UI実装」シリーズの1本目です。同じアコーディオンをjQueryで...
JavaScript 【jQuery】on()でイベントを設定する方法（bind/liveとの違いも解説）
こんにちは、かつコーチです。前回はcss()メソッドで、要素のスタイルを直接書き換える方法を紹介しました。スタイルを書き換えるタイミングの多くは、「クリックしたら」「マウスが乗ったら」といったイベント（ユーザーの操作やブラウザの状態変化をき...
JavaScript 【jQuery】CSSプロパティを直接操作する方法（css()メソッド）
こんにちは、かつコーチです。前回は addClass や toggleClass を使って、CSSクラスを付け外しする方法を紹介しました。クラスの付け外しは便利ですが、「この要素の色だけ、JavaScript側で計算した値に変えたい」という...
JavaScript 【jQuery】CSSクラスの操作（addClass・removeClass・toggleClass）
こんにちは、かつコーチです。「ボタンを押したら色を変えたい」「メニューの開閉状態を切り替えたい」。こうした見た目の変化を実装するとき、多くの場合はCSSクラスの付け外しで実現します。この記事では、addClass・removeClass・t...
JavaScript 【jQuery】要素の追加・削除（append・remove・html）
こんにちは、かつコーチです。「ボタンを押したらリストに項目を追加したい」「不要になった要素を消したい」。こうしたUIを作るときに欠かせないのが、要素の追加・削除に関するメソッド群です。この記事では、append・prepend・remove...
JavaScript 【jQuery】属性・データ属性の取得と操作（attr・data）
こんにちは、かつコーチです。「HTML要素のhref属性を書き換えたい」「data-idの値をJavaScriptで使いたい」。こうした場面で必ず登場するのが、attr()とdata()というメソッドです。この記事では、attr()での属性...
JavaScript 【jQuery】each()で要素をループ処理する
こんにちは、かつコーチです。「複数の要素に同じ処理をしたいけど、1つずつ書くのは面倒…」と感じたことはありませんか。jQueryには、選択した要素をひとつずつ取り出して処理してくれるeach()というメソッドがあります。この記事では、eac...
JavaScript 【jQuery】メソッドチェーンの書き方と考え方
こんにちは、かつコーチです。jQueryのコードを読んでいると、.（ドット）がずらずらと繋がった長いコードを見かけることがあります。「これは一体何をしているの？」「自分でも書けるようになりたい」と感じた方も多いのではないでしょうか。この記事...
JavaScript 【jQuery】セレクタの書き方：$()の基本とCSSセレクタとの違い
こんにちは、かつコーチです。jQueryを使い始めたばかりの頃、「$()の中に何を書けばいいのか分からない」と悩んだ経験はありませんか。私も最初は、CSSのセレクタと同じ書き方でいいのか、それとも別の書き方があるのか、混乱していました。この...
Laravel 【Laravel】LaravelのRoute設計で迷わないための整理術 〜Resource・Controller Group・命名規則の考え方〜
こんにちは、かつコーチです。Laravelも長く使っていて相棒のような存在担ってきました。Laravelを使っていると、Routeの書き方で迷うことがあります。Laravelは自由度が高く、同じことを実現する方法がいくつもあります。そのため...
Laravel 【Laravel】Laravel×Reactの構成比較：どちらを選ぶべきか検証してみた
こんにちは、かつコーチです。前回は、LaravelとVue（Inertia.js）で簡単なTODOアプリを作りました。今回は同じTODOアプリをReactでも作ってみて、Vue構成との違いを実際に比較検証していきます。このシリーズもいよいよ...
JavaScript 【jQuery】素のJavaScript、2026年どちらを選ぶべきか徹底比較
こんにちは、かつコーチです。このシリーズでjQueryの基本から実装・エラー解決まで一通り学んできた方の中には、「結局、実務ではjQueryと素のJavaScript、どちらを使えばいいの？」という疑問が残っているのではないでしょうか。素の...
JavaScript 【jQuery】よくあるエラーと解決法まとめ（$ is not defined等）
こんにちは、かつコーチです。「jQueryのコードを書いたのに、コンソールに赤いエラーが出て動かない…」という経験は、jQueryを触り始めた人の多くが通る道です。コンソールとは、ブラウザの開発者ツールでエラーやログを確認できる画面のことで...
JavaScript 【jQuery】$.getJSON()で外部データを取得して表示する
こんにちは、かつコーチです。「$.ajax()は分かったけど、JSON取得だけならもっと短く書けないの？」と感じたことはありませんか。jQueryには、JSON形式のデータ取得に特化した$.getJSON()というショートカットメソッドが用...
JavaScript 【jQuery】$.ajax()でAPI通信する基本（fetchとの違いも解説）
こんにちは、かつコーチです。「サーバーからデータを取ってきて画面に表示したい」という場面は、業務でも学習でもよく出てきます。jQueryには、そんな非同期通信（ページを再読み込みせずにサーバーとデータをやり取りする仕組み）を簡単に扱える$....
JavaScript 【jQuery】スムーススクロールをjQueryで実装する
こんにちは、かつコーチです。前回はフォームのバリデーションをjQueryで実装しました。実践UI実装シリーズの最後は、ページ内リンクをなめらかに移動させるスムーススクロールです。素のJavaScript版では scrollIntoView(...
JavaScript 【jQuery】フォームのバリデーションをjQueryで実装する
こんにちは、かつコーチです。前回はスライドショー・カルーセルをjQueryで実装しました。今回は、お問い合わせフォームなどで欠かせないバリデーション（入力チェック）をjQueryで実装していきます。素のJavaScript版では blur ...
JavaScript 【jQuery】スライドショー・カルーセルをjQueryで実装する
こんにちは、かつコーチです。前回はモーダルウィンドウをjQueryで実装しました。今回は、トップページなどでよく見るスライダー（カルーセル）をjQueryで実装していきます。素のJavaScript版ではCSSの transform: tr...
JavaScript 【jQuery】モーダルウィンドウをjQueryで実装する
こんにちは、かつコーチです。「レガシー案件を保守することになったけど、jQueryでモーダルを実装した箇所がどう動いているか読めない」という相談をよく受けます。モーダルウィンドウは、画像の拡大表示や確認ダイアログなど、どんなサイトでも一度は...
JavaScript 【jQuery】タブ切り替えをjQueryで実装する
こんにちは、かつコーチです。前回は、アコーディオンをjQueryで実装しながら、素のJavaScript版との書き方の違いを比較しました。今回は、同じく「複数の要素からアクティブなものを1つだけ選ぶ」というUIである、タブ切り替えを実装して...
JavaScript 【jQuery】アコーディオン（FAQ）をjQueryで実装する（素のJS版との比較）
こんにちは、かつコーチです。以前、JavaScript基礎編の記事で、素のJavaScriptを使ったアコーディオン（FAQ）の開閉実装を紹介しました。今回はここからが「実践UI実装」シリーズの1本目です。同じアコーディオンをjQueryで...
JavaScript 【jQuery】on()でイベントを設定する方法（bind/liveとの違いも解説）
こんにちは、かつコーチです。前回はcss()メソッドで、要素のスタイルを直接書き換える方法を紹介しました。スタイルを書き換えるタイミングの多くは、「クリックしたら」「マウスが乗ったら」といったイベント（ユーザーの操作やブラウザの状態変化をき...
JavaScript 【jQuery】CSSプロパティを直接操作する方法（css()メソッド）
こんにちは、かつコーチです。前回は addClass や toggleClass を使って、CSSクラスを付け外しする方法を紹介しました。クラスの付け外しは便利ですが、「この要素の色だけ、JavaScript側で計算した値に変えたい」という...
JavaScript 【jQuery】CSSクラスの操作（addClass・removeClass・toggleClass）
こんにちは、かつコーチです。「ボタンを押したら色を変えたい」「メニューの開閉状態を切り替えたい」。こうした見た目の変化を実装するとき、多くの場合はCSSクラスの付け外しで実現します。この記事では、addClass・removeClass・t...
JavaScript 【jQuery】要素の追加・削除（append・remove・html）
こんにちは、かつコーチです。「ボタンを押したらリストに項目を追加したい」「不要になった要素を消したい」。こうしたUIを作るときに欠かせないのが、要素の追加・削除に関するメソッド群です。この記事では、append・prepend・remove...
JavaScript 【jQuery】属性・データ属性の取得と操作（attr・data）
こんにちは、かつコーチです。「HTML要素のhref属性を書き換えたい」「data-idの値をJavaScriptで使いたい」。こうした場面で必ず登場するのが、attr()とdata()というメソッドです。この記事では、attr()での属性...
JavaScript 【jQuery】each()で要素をループ処理する
こんにちは、かつコーチです。「複数の要素に同じ処理をしたいけど、1つずつ書くのは面倒…」と感じたことはありませんか。jQueryには、選択した要素をひとつずつ取り出して処理してくれるeach()というメソッドがあります。この記事では、eac...
JavaScript 【jQuery】メソッドチェーンの書き方と考え方
こんにちは、かつコーチです。jQueryのコードを読んでいると、.（ドット）がずらずらと繋がった長いコードを見かけることがあります。「これは一体何をしているの？」「自分でも書けるようになりたい」と感じた方も多いのではないでしょうか。この記事...
JavaScript 【jQuery】セレクタの書き方：$()の基本とCSSセレクタとの違い
こんにちは、かつコーチです。jQueryを使い始めたばかりの頃、「$()の中に何を書けばいいのか分からない」と悩んだ経験はありませんか。私も最初は、CSSのセレクタと同じ書き方でいいのか、それとも別の書き方があるのか、混乱していました。この...
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 を実行すれば、テストが通るかどうかは確認できます。です...