JavaScript 【JavaScript】画像の遅延読み込み（Lazy Load）を実装する
こんにちは、かつコーチです。前回は、ドロップダウンメニューの実装を解説しました。「実践UI実装」シリーズの締めくくりとして、今回は画像の遅延読み込み（Lazy Load）を扱います。「画像がたくさんあるページを開くと、表示が遅い」という悩み...
JavaScript
JavaScript JavaScript 【JavaScript】ドロップダウンメニューを実装する
こんにちは、かつコーチです。前回は、スムーススクロールの実装を解説しました。今回は、ナビゲーションメニューをクリックすると選択肢が下に開く、「ドロップダウンメニュー」を実装していきます。「クリックしたら開くところまでは作れたけど、他の場所を...
JavaScript 【JavaScript】スムーススクロールを実装する
こんにちは、かつコーチです。前回は、フォームのリアルタイムバリデーションについて解説しました。今回は、ページ内リンクをクリックしたときに「ガクッ」と一瞬で移動するのではなく、「スーッ」となめらかに移動する、あの動きを実装していきます。「ペー...
JavaScript 【JavaScript】フォームのリアルタイムバリデーションを実装する
こんにちは、かつコーチです。前回は、Intersection Observerを使ったスクロールアニメーションを解説しました。今回のテーマは、お問い合わせフォームなどで見かける「入力しながらリアルタイムにエラーが表示される」あの仕組みです。...
JavaScript 【JavaScript】Intersection Observerでスクロールアニメーションを実装する
こんにちは、かつコーチです。前回は、スライダー・カルーセルの実装を解説しました。今回からは「実践UI実装」シリーズとして、よく使われるUIパーツを一つずつ作っていきます。第1弾は、スクロールすると要素がふわっと表示される、あの定番演出です。...
JavaScript 【JavaScript】スライダー・カルーセルを実装する
こんにちは、かつコーチです。前回はモーダルウィンドウの表示・非表示を実装しました。実践UI実装シリーズの最後は、トップページなどでよく見るスライダー（カルーセル）です。これまでの「開く・閉じる」の2択とは違い、「複数枚の画像を順番に切り替え...
JavaScript 【JavaScript】モーダルウィンドウの表示・非表示を実装する
こんにちは、かつコーチです。前回はタブによるコンテンツ切り替えを実装しました。今回は、画像の拡大表示やお知らせポップアップなどでおなじみのモーダルウィンドウを実装していきます。モーダル自体はこれまでのUIパーツと似た「クラスの付け外し」で作...
JavaScript 【JavaScript】タブによるコンテンツ切り替えを実装する
こんにちは、かつコーチです。前回はアコーディオンの開閉を実装し、複数要素の管理という考え方に触れました。今回はその発展として、タブによるコンテンツ切り替えを実装していきます。タブメニューをクリックすると、対応する内容だけが表示され、他の内容...
JavaScript 【JavaScript】アコーディオン（FAQ）の開閉を実装する
こんにちは、かつコーチです。前回はハンバーガーメニューの開閉を実装しました。今回は、よくある質問（FAQ）ページなどで見かけるアコーディオンを作っていきます。見出しをクリックすると、下に隠れていた回答部分がにゅっと開く、あの動きです。ハンバ...
JavaScript 【JavaScript】ハンバーガーメニューの開閉を実装する
こんにちは、かつコーチです。前回はDOM操作のパフォーマンスに関する注意点を扱いました。今回からは、その知識を使って実際のUIパーツを作っていく「実践UI実装」シリーズです。第1弾は、スマホサイトでほぼ必ず見かけるハンバーガーメニュー（3本...
JavaScript 【JavaScript】DOM操作のパフォーマンスに関する注意点
こんにちは、かつコーチです。前回は、HTML要素に独自データを持たせるdata属性の活用方法を解説しました。今回はDOM操作基礎シリーズの締めくくりとして、パフォーマンスに関する注意点を扱います。「動くには動くけど、なんだか画面がカクつく」...
JavaScript 【JavaScript】data属性を活用する方法
こんにちは、かつコーチです。前回は、フォームの入力値を取得する方法を解説しました。今回は、HTML要素に独自の情報を持たせられる「data属性」の活用方法を扱います。data属性を使いこなせるようになると、「HTML側にデータを持たせて、J...
JavaScript 【JavaScript】フォームの入力値を取得する方法
こんにちは、かつコーチです。前回は、イベントの伝播（バブリングとキャプチャリング）について解説しました。今回は、多くのWebサービスで必ず出てくる「フォームの入力値を取得する」方法を扱います。お問い合わせフォーム、検索ボックス、ログイン画面...
JavaScript 【JavaScript】イベントの伝播：バブリングとキャプチャリング
こんにちは、かつコーチです。前回は addEventListener の基本的な使い方を解説しました。今回は一歩進んで、「イベントがどう伝わっていくか」という仕組みを扱います。このバブリングとキャプチャリングを理解していないと、「なぜかクリ...
JavaScript 【JavaScript】addEventListenerでイベントを設定する方法
こんにちは、かつコーチです。前回は、JavaScriptからスタイルを操作する方法を解説しました。今回のテーマは「イベント」です。ボタンをクリックしたら何かが起きる、フォームに入力したら文字数が表示される。こういった「ユーザーの操作をきっか...
JavaScript 【JavaScript】スタイルをJavaScriptから操作する方法
こんにちは、かつコーチです。前回はclassListを使ったクラスの操作を解説し、「見た目の切り替えはCSSに任せ、JavaScriptはクラスの付け外しに専念する」という考え方を紹介しました。とはいえ、実務では「マウスの位置に合わせて要素...
JavaScript 【JavaScript】classListでクラスを操作する方法
こんにちは、かつコーチです。前回は要素の追加・削除を解説しました。今回は、Webサイトでよく見る「メニューを開閉する」「タブを切り替える」「ボタンを押すと選択状態になる」といった動きの土台になる、クラスの操作方法を扱います。見た目の変化はC...
JavaScript 【JavaScript】要素の追加・削除（createElement, appendChild等）
こんにちは、かつコーチです。前回は querySelector を使って、DOMツリーの中から目的の要素を取得する方法を解説しました。今回は一歩進んで、DOMツリーそのものに新しい要素を追加したり、不要な要素を削除したりする方法を扱います。...
JavaScript 【JavaScript】querySelectorで要素を取得する方法
こんにちは、かつコーチです。前回はDOMの仕組みについて解説し、DOM操作は「要素を取得する」→「要素を操作する」の2ステップが基本だとお伝えしました。今回はその1ステップ目、「目的の要素をどうやって探し出すか」を扱っていきます。要素の取得...
JavaScript 【JavaScript】DOMとは？HTMLとJavaScriptをつなぐ仕組み
こんにちは、かつコーチです。前回までは、変数・条件分岐・繰り返し・関数・配列・モジュールといった、JavaScriptそのものの文法を扱ってきました。ここからは少し毛色が変わります。今回からは、JavaScriptを使って実際に「画面を動か...