Editor 【VSCode】tasks.jsonでビルドやLintを自動化する方法
VSCodeではtasks.jsonを使うことで、ビルドやLint、テスト、ウォッチなどの繰り返し作業をエディタ内から統一的に自動化できます。拡張機能に依存せずコマンドを記述でき、ワークスペースやフォルダごとに共有可能なため、チーム開発でも...
Editor 
Docker 【Docker】Nginx + PHP-FPMの環境をComposeで構築する手順
NginxとPHP-FPMをDocker Composeで組み合わせると、本番に近い構成をローカルですばやく再現できます。Nginxが静的配信とリバースプロキシ、PHP-FPMがPHPの実行を担い、ソースはボリュームで共有します。ここでは最...
Git 【Git】bisectでバグを仕込んだコミットを特定する方法
Gitで「いつからバグが入ったのか分からない」状況に直面したら、git bisectを使って問題を導入したコミットを高速に特定できます。bisectは履歴を二分探索で辿り、正常（good）と不正（bad）をマークしながら原因コミットを絞り込...
JavaScript 【JavaScript】Intl APIを使った日付・数値の国際化フォーマット
グローバルに利用されるWebサービスやアプリでは、日付や数値の表示をユーザーの地域や言語に合わせることが重要です。JavaScriptのIntl APIを使うと、複雑なロジックを自作することなく国際化対応が可能になります。ここではIntl....
WordPress 【WordPress】投稿ごとに好きなCSSやJSを追加する方法
この記事では、WordPress の投稿ごとに「そのページ専用の CSS／JS」を記述・適用できるようにする方法を解説します。メタキーは _custom_css と _custom_js を用い、投稿編集画面に専用のメタボックスを追加し、フ...
Git 【Git】ブランチが削除できないときの原因と対処法（安全に消す手順）
Gitでブランチを削除しようとして「チェックアウト中なので削除できない」 あるいは「未マージのため -d では削除できない」といったエラーに遭遇することがあります。 本記事では、代表的な2つのエラー原因と、安全に作業を進めるための確認・解決...
JavaScript 【JavaScript】MutationObserverでDOM変化を監視する方法
Webアプリや動的なページでは、JavaScriptや外部ライブラリによってDOMが書き換えられることがよくあります。要素が追加されたり属性が変化したときに自動で処理を実行したい場合、MutationObserverを使うと効率的にDOMの...
HTML/CSS 【CSS】object-fitとobject-positionで画像の表示位置を自在に調整する方法
レスポンシブデザインやカード型レイアウトで画像を扱うとき、画像の比率が揃わず表示が崩れてしまうことがあります。そんなときに便利なのがCSSのobject-fitとobject-positionです。これらを組み合わせることで、画像のトリミン...
WordPress 【WordPress】テーマに条件付きでCSSやJSを読み込む方法
サイトの読み込み速度や管理のしやすさを高めるには、必要なページだけにCSSやJSを読み込むのが効果的です。WordPressではwp_enqueue_scriptsやadmin_enqueue_scriptsのフックと条件分岐タグを組み合わ...
Editor 【VSCode】launch.jsonでデバッグ環境を設定する方法
VSCodeは豊富なデバッグ機能を備えており、launch.jsonを設定することでプロジェクトに合わせたデバッグ環境を簡単に構築できます。launch.jsonは「.vscode」フォルダ内に保存され、起動方法や実行構成を定義します。ここ...
Docker 【Docker】phpMyAdminを使わずにMySQLを操作する方法（CLI編）
MySQLをDockerコンテナで利用する場合、phpMyAdminのようなGUIツールを使わずに、コンテナ内のCLIから直接操作することも可能です。CLIを活用すれば軽量かつシンプルにデータベースを管理でき、スクリプトによる自動化にも向い...
Git 【Git】revertとresetの違いと使い分け
Gitで作業を巻き戻したいときによく使われるのがrevertとresetです。どちらも「履歴を戻す」ためのコマンドですが、仕組みや使いどころが大きく異なります。正しく理解して使い分けることで、誤った操作によるトラブルを防ぎ、チーム開発でも安...
Git 【Git】タグ（tag）の使い方｜バージョン管理とリリース管理に活用する方法
Gitでソフトウェアのバージョンを明確に管理するために便利なのが「タグ（tag）」です。特定のコミットにラベルを付けることで、リリースや重要なポイントを簡単に参照できるようになります。ここではタグの基本から作成方法、リモートへの共有、実運用...
JavaScript 【JavaScript】Event Delegationで効率的にイベントを管理する方法
```htmlイベントを多数の要素に付与するとき、個々にリスナーを登録するとメモリ消費や再描画コストが増え、動的に追加される要素には再度バインドが必要になります。Event Delegation（イベント委譲）を使えば、親要素に一度だけリス...
WordPress 【WordPress】REST APIを使ったカスタム投稿データの取得方法
WordPressのREST APIを使うと、テーマやフロントエンドアプリからカスタム投稿タイプのデータをシンプルに取得できます。正しく設定すれば、/wp-json/wp/v2/以下に自動でエンドポイントが公開され、fetchでJSONを受...
WordPress 【WordPress】wp_localize_scriptの使い方｜JavaScriptにPHPの値を渡す方法
WordPressでJavaScriptを扱う際、PHPの値をそのまま渡したい場面は多くあります。AjaxのURLやセキュリティ用のnonce、テーマやプラグインの設定値などをフロント側に渡す方法として便利なのがwp_localize_sc...
gulp 【Gulp】Sassのコンパイルと自動リロード環境を構築する方法
フロントエンド開発では、Sassを使った効率的なスタイル管理とブラウザの自動リロードによる即時反映が欠かせません。Gulpを活用すれば、これらを自動化した快適な開発環境を簡単に構築できます。ここではGulp v4を前提に、Sassコンパイル...
Editor 【VSCode】便利なショートカットキー一覧｜作業効率を劇的にアップする
VSCodeは高機能なエディタとして世界中で利用されていますが、その真価を発揮するにはショートカットキーの活用が欠かせません。マウス操作を減らし、キーボードだけで操作することで作業効率を大幅に高めることができます。ここでは特によく使うショー...
Docker 【Docker】Nginxを使ったローカル開発環境を構築する方法
Webアプリケーションの開発では、実際のサーバー構成に近い形でローカル環境を構築できると便利です。DockerとNginxを組み合わせれば、軽量かつ柔軟な開発環境を簡単に用意できます。ここではNginxを使ったローカル開発環境の構築手順を紹...
Git 【Git】rebaseとmergeの違いと使い分け
Gitで複数のブランチを統合する方法には、mergeとrebaseの2種類があります。どちらも目的は「別ブランチの変更を取り込む」ことですが、履歴の残り方や扱い方が異なります。正しく理解して使い分けることで、履歴をきれいに保ち、チーム開発を...