JavaScript 【jQuery】$.ajax()でAPI通信する基本（fetchとの違いも解説）
こんにちは、かつコーチです。「サーバーからデータを取ってきて画面に表示したい」という場面は、業務でも学習でもよく出てきます。jQueryには、そんな非同期通信（ページを再読み込みせずにサーバーとデータをやり取りする仕組み）を簡単に扱える$....
JavaScript 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のセレクタと同じ書き方でいいのか、それとも別の書き方があるのか、混乱していました。この...
JavaScript 【jQuery】jQuery 4.0の変更点：導入前に知っておきたいこと
こんにちは、かつコーチです。2026年1月、約10年ぶりのメジャーバージョンとなるjQuery 4.0が正式にリリースされました。「今から新しく学ぶならどのバージョンを使えばいいの？」「既存のサイトは4.0に上げても大丈夫？」と迷っている方...
JavaScript 【jQuery】jQueryとは？2026年でも使われる理由とインストール方法
こんにちは、かつコーチです。「jQueryって今から学んでも意味あるの？」と聞かれることがよくあります。新しい現場ではReactやVue.jsが主流ですし、「もう古い技術なのでは」と不安になる気持ちはよく分かります。この記事では、jQuer...
AI 【Gemini】Geminiを使った業務活用の具体例
こんにちは、かつコーチです。Geminiシリーズもいよいよ最終回です。これまで、Geminiの基本的な使い方、Googleサービス連携、PDF処理、料金プランと紹介してきました。最後となる今回は、これらを組み合わせて実際の業務にどう活かせる...
AI 【Gemini】Geminiの料金プラン比較
こんにちは、かつコーチです。これまでの記事で、Geminiの基本的な使い方やPDF処理、Googleサービス連携を紹介してきました。「便利なのは分かったけど、結局どのプランを選べばいいの？」という疑問が出てくる頃だと思います。この記事では、...
AI 【Gemini】大量のPDF・資料をGeminiで一気に処理する方法
こんにちは、かつコーチです。前回はGmail・ドライブ・スプレッドシートとの連携を紹介しましたが、今回はGeminiのもう一つの大きな武器、「大量のPDF・資料処理」を掘り下げていきます。数十ページの資料を1つ読み込ませるだけでなく、複数の...