実装UI

こんにちは、かつコーチです。前回は無限スクロールを扱いました。今回は「実践UI実装」シリーズの最終回として、クーポンコードやシェア用URLをワンクリックでコピーできるコピーボタンを実装します。初心者向けのテーマなので、これまでよりもシンプル...

こんにちは、かつコーチです。前回はドラッグ&ドロップを扱いました。今回はSNSのタイムラインやECサイトの商品一覧でおなじみの無限スクロールを実装していきます。上級者向けのテーマとして、パフォーマンスや多重発火といった実務で必ずぶつかる問題...

こんにちは、かつコーチです。前回はトースト通知を扱いました。今回は、タスク管理ツールのカードや並べ替え可能なリストでおなじみのドラッグ&ドロップを、素のJavaScriptで実装していきます。ドラッグ&ドロップとは？HTML5 Drag a...

こんにちは、かつコーチです。前回はカウントアップアニメーションを扱いました。今回は「保存しました」「エラーが発生しました」といった操作結果を、画面の隅にさりげなく表示するトースト通知を実装していきます。alert()と違って処理を止めず、数...

こんにちは、かつコーチです。前回は画像の遅延読み込み（Lazy Load）を扱いました。今回は「実践UI実装」シリーズの新しいテーマとして、数字がパラパラと増えていくカウントアップアニメーションを作っていきます。実績数値や統計データを見せる...

こんにちは、かつコーチです。前回は、ドロップダウンメニューの実装を解説しました。「実践UI実装」シリーズの締めくくりとして、今回は画像の遅延読み込み（Lazy Load）を扱います。「画像がたくさんあるページを開くと、表示が遅い」という悩み...

こんにちは、かつコーチです。前回は、スムーススクロールの実装を解説しました。今回は、ナビゲーションメニューをクリックすると選択肢が下に開く、「ドロップダウンメニュー」を実装していきます。「クリックしたら開くところまでは作れたけど、他の場所を...

こんにちは、かつコーチです。前回は、フォームのリアルタイムバリデーションについて解説しました。今回は、ページ内リンクをクリックしたときに「ガクッ」と一瞬で移動するのではなく、「スーッ」となめらかに移動する、あの動きを実装していきます。「ペー...

こんにちは、かつコーチです。前回は、Intersection Observerを使ったスクロールアニメーションを解説しました。今回のテーマは、お問い合わせフォームなどで見かける「入力しながらリアルタイムにエラーが表示される」あの仕組みです。...

こんにちは、かつコーチです。前回は、スライダー・カルーセルの実装を解説しました。今回からは「実践UI実装」シリーズとして、よく使われるUIパーツを一つずつ作っていきます。第1弾は、スクロールすると要素がふわっと表示される、あの定番演出です。...

こんにちは、かつコーチです。前回はモーダルウィンドウの表示・非表示を実装しました。実践UI実装シリーズの最後は、トップページなどでよく見るスライダー（カルーセル）です。これまでの「開く・閉じる」の2択とは違い、「複数枚の画像を順番に切り替え...

こんにちは、かつコーチです。前回はタブによるコンテンツ切り替えを実装しました。今回は、画像の拡大表示やお知らせポップアップなどでおなじみのモーダルウィンドウを実装していきます。モーダル自体はこれまでのUIパーツと似た「クラスの付け外し」で作...

こんにちは、かつコーチです。前回はアコーディオンの開閉を実装し、複数要素の管理という考え方に触れました。今回はその発展として、タブによるコンテンツ切り替えを実装していきます。タブメニューをクリックすると、対応する内容だけが表示され、他の内容...

こんにちは、かつコーチです。前回はハンバーガーメニューの開閉を実装しました。今回は、よくある質問（FAQ）ページなどで見かけるアコーディオンを作っていきます。見出しをクリックすると、下に隠れていた回答部分がにゅっと開く、あの動きです。ハンバ...

こんにちは、かつコーチです。前回はDOM操作のパフォーマンスに関する注意点を扱いました。今回からは、その知識を使って実際のUIパーツを作っていく「実践UI実装」シリーズです。第1弾は、スマホサイトでほぼ必ず見かけるハンバーガーメニュー（3本...