JavaScript 【JavaScript】カウントアップアニメーションを実装する
こんにちは、かつコーチです。前回は画像の遅延読み込み（Lazy Load）を扱いました。今回は「実践UI実装」シリーズの新しいテーマとして、数字がパラパラと増えていくカウントアップアニメーションを作っていきます。実績数値や統計データを見せる...
中級者向け
JavaScript JavaScript 【JavaScript】画像の遅延読み込み（Lazy Load）を実装する
こんにちは、かつコーチです。前回は、ドロップダウンメニューの実装を解説しました。「実践UI実装」シリーズの締めくくりとして、今回は画像の遅延読み込み（Lazy Load）を扱います。「画像がたくさんあるページを開くと、表示が遅い」という悩み...
JavaScript 【JavaScript】フォームのリアルタイムバリデーションを実装する
こんにちは、かつコーチです。前回は、Intersection Observerを使ったスクロールアニメーションを解説しました。今回のテーマは、お問い合わせフォームなどで見かける「入力しながらリアルタイムにエラーが表示される」あの仕組みです。...
JavaScript 【JavaScript】Intersection Observerでスクロールアニメーションを実装する
こんにちは、かつコーチです。前回は、スライダー・カルーセルの実装を解説しました。今回からは「実践UI実装」シリーズとして、よく使われるUIパーツを一つずつ作っていきます。第1弾は、スクロールすると要素がふわっと表示される、あの定番演出です。...
JavaScript 【JavaScript】スライダー・カルーセルを実装する
こんにちは、かつコーチです。前回はモーダルウィンドウの表示・非表示を実装しました。実践UI実装シリーズの最後は、トップページなどでよく見るスライダー（カルーセル）です。これまでの「開く・閉じる」の2択とは違い、「複数枚の画像を順番に切り替え...
JavaScript 【JavaScript】DOM操作のパフォーマンスに関する注意点
こんにちは、かつコーチです。前回は、HTML要素に独自データを持たせるdata属性の活用方法を解説しました。今回はDOM操作基礎シリーズの締めくくりとして、パフォーマンスに関する注意点を扱います。「動くには動くけど、なんだか画面がカクつく」...
JavaScript 【JavaScript】data属性を活用する方法
こんにちは、かつコーチです。前回は、フォームの入力値を取得する方法を解説しました。今回は、HTML要素に独自の情報を持たせられる「data属性」の活用方法を扱います。data属性を使いこなせるようになると、「HTML側にデータを持たせて、J...
JavaScript 【JavaScript】イベントの伝播：バブリングとキャプチャリング
こんにちは、かつコーチです。前回は addEventListener の基本的な使い方を解説しました。今回は一歩進んで、「イベントがどう伝わっていくか」という仕組みを扱います。このバブリングとキャプチャリングを理解していないと、「なぜかクリ...
Docker 【Docker】比較検証 : Dockerと仮想マシン(VM)、何が違うのか
こんにちは、かつコーチです。これでDocker編は14本目、いよいよ最終回です。「Dockerって、結局のところ仮想マシン（VM）と何が違うの？」これは、Dockerの学習を始めた方から本当によく聞かれる質問です。どちらも「1台のPCの中に...
Docker 【Docker】docker-composeとは？複数コンテナをまとめて管理する使い方を解説
こんにちは、かつコーチです。ここまでの記事で、docker runによるコンテナ起動や、ボリューム・ネットワークの使い方を学んできました。でも実際のWebアプリ開発では、Webサーバー用コンテナとデータベース用コンテナを別々に起動して、ネッ...
Docker 【Docker】Dockerネットワークの基本：コンテナ同士をつなぐ
こんにちは、かつコーチです。Webアプリケーションのコンテナと、データベースのコンテナを別々に起動して、いざ通信させようとしたら「繋がらない」と焦った経験はありませんか。コンテナは互いに隔離された環境で動いているため、何もしなければ他のコン...
Docker 【Docker】ボリュームでデータを永続化する
こんにちは、かつコーチです。「MySQLコンテナを docker rm したら、せっかく登録したデータが全部消えてしまった」という経験はありませんか。コンテナは「使い捨てにできる身軽さ」がメリットの1つですが、そのせいでデータベースのように...
Docker 【Docker】よく使うDockerfile命令（FROM・COPY・RUN・CMD）
こんにちは、かつコーチです。前回の記事でDockerfileの全体像を見ましたが、実際に手を動かすとなると「RUN と CMD は何が違うの？」「COPY と ADD はどちらを使えばいいの？」という疑問が必ず出てきます。この記事では、Do...
Docker 【Docker】Dockerfileの書き方基本
こんにちは、かつコーチです。docker pull で公式イメージを使うだけなら簡単なのですが、自分のアプリケーション用のイメージを作ろうとすると、多くの人が最初につまずくのがDockerfileです。「命令がたくさんあってどれから書けばい...
PostgreSQL 【PostgreSQL】ロールベースの権限管理をCREATE ROLEでゼロから設計する
こんにちは、かつコーチです。「アプリからは全部postgresユーザーで接続している」というプロジェクト、実は少なくありません。これは動作こそしますが、セキュリティの観点では避けたい設計です。PostgreSQLにはロール（ユーザーとグルー...
PostgreSQL 【PostgreSQL】pg_dumpでバックアップ・リストアする方法をコマンド付きで解説
こんにちは、かつコーチです。「本番データベースのバックアップ、実はコマンド1つも覚えていない」という方は意外と多いのではないでしょうか。バックアップ（データベースの内容を別の場所に複製しておくこと）は、障害やオペレーションミスからデータを守...
PostgreSQL 【PostgreSQL】シーケンスとSERIAL・IDENTITY列の違い
こんにちは、かつコーチです。PostgreSQLで主キーを自動採番する方法を調べると、SERIALとGENERATED ... AS IDENTITYという2つの書き方が出てきて、どちらを使えばいいか迷った方も多いのではないでしょうか。結論...
PostgreSQL 【PostgreSQL】スキーマを使ってテーブルを整理する
こんにちは、かつコーチです。1つのデータベースにテーブルが50個、100個と増えてくると、users、logs、settingsのような似た名前のテーブルがどのアプリ由来か分からなくなってきます。そんなときに使うのがスキーマです。今回は、P...
PostgreSQL 【PostgreSQL】UPSERT（ON CONFLICT）とRETURNINGで往復を減らす
こんにちは、かつコーチです。「レコードがあれば更新、なければ新規登録」という処理を書くとき、まずSELECTで存在チェックをしてからINSERTかUPDATEを分岐させていませんか。その方法はアプリケーションとDBの往復が増えるうえ、同時ア...
PostgreSQL 【PostgreSQL】ウィンドウ関数の基本：ランキングと集計を両立する
こんにちは、かつコーチです。「各カテゴリの売上ランキングを、元の行を保ったまま表示したい」と思ってGROUP BYを使ったら、個別の行が消えて集計値しか出せなかった、という経験はありませんか。そんなときに使うのがウィンドウ関数です。GROU...