フロント担当のToday I Learned 2025/03

Date:

Share post:

こんにちは。

「Today I Learned(今日学んだこと)」を日々記録していくという習慣を知ったので、アウトプットの練習も兼ねて先月からこのTILを始めてみました。

その記録の中から特に印象に残った技術トピックや気づきをいくつかピックアップして紹介します。

2025年3月のピックアップ

Dockerで開発環境 PHP-FPMとApache設定 (03/03)

Laravel + Node.js の開発環境をDocker Composeで構築する機会があり、以前から気になっていた2点が理解できました。

1. PHP-FPMイメージの活用

Docker公式のPHPイメージには、php:<version>-fpm というタグが用意されています。これを利用すると、PHPの実行環境(PHP-FPM)をWebサーバー(ApacheやNginx)とは別のコンテナとして分離できます。これにより、例えば公式では提供されていないNginxとの組み合わせなども容易に実現できます。

Webサーバー側のコンテナでは、受け取ったリクエストをPHP-FPMコンテナに転送するように設定します。Apacheの場合は、以下のような設定です。

<FilesMatch \.php$>
  SetHandler "proxy:fcgi://PHP-FPMコンテナの名前:9000"
</FilesMatch>

2. Docker環境でのApache設定方法

DockerでApache環境を構築するには、主に以下の2つのアプローチがあります。

  • 公式の httpd イメージを利用する
  • DebianのベースイメージにApacheをインストールする

今回は後者の DebianのベースイメージにApacheをインストールする を選択しました。理由は設定の柔軟性です。

公式の httpd イメージは、httpd.confをほぼゼロから記述する必要があり、サイト固有の設定以外にもデフォルト設定を多く記述する必要があります。

一方、Debian (apt) でインストールされるApache2は、既存の設定ファイルをベースに必要な箇所だけを上書きしたり、sites-available / sites-enabled の仕組みを利用したりできます。モジュールの有効化も a2enmod コマンドで簡単に行えるため、慣れている方には扱いやすいと感じました。


AIコーディング支援 GitHub Copilot Edits と Cline (03/03, 03/04)

上記のDocker環境構築や、小規模プロジェクトの作業を、AIエージェントにほぼお任せしてみました。

GitHub Copilot Edits

Docker環境構築では、compose.yaml、複数の Dockerfile、ApacheやPHPの設定ファイルなど、複数のファイルを横断的に編集する必要がありました。GitHub Copilot Edits を利用したところ、これらのファイル間の整合性を保ちながら、設定内容の大部分を生成・修正してくれました。

Cline

試作中の小規模なプロジェクトで、1つのファイルに記述していたHonoのAPIルーティング処理を、機能ごとに複数ファイルへ分割するというリファクタリングタスクを依頼してみました。

何度か指示を試行錯誤し、最終的には納得のいくコードが生成されました。ただし、効果的に使うには指示出し(プロンプト)とプランニング能力が重要だと感じました。単純な定型処理であれば、細かく指示するより「お任せ」の方が良い結果になることもあります。より大規模なプロジェクトで活用するには、コードだけでなく、ドキュメントやテストの整備が前提となりそうです。

Copilot Editsは単発のファイル編集、Clineはドメイン知識を要する複数ファイルをまたぐような作業に向いているという印象です。


Webフロントエンド開発のガイドライン DX Criteria (03/07)

企業のデジタル化とソフトウェア活用のためのガイドラインとして「DX Criteria」というものがあります。そのWebフロントエンド版が公開されているのを見つけました。

Webフロントエンド版 DX Criteria: https://dxcriteria.cto-a.org/frontend

エンジニアリング、チームが実現すべきことを、以下の4つの観点で定義・解説しています。

  • メトリクスの計測:DXの進んだ組織においては、従来型のパフォーマンス指標とは異なる指標が計測・管理されることがあるため、それらを計測/管理しているかを問います。
  • 学習と改善: 失敗も含め、組織学習を健全に回すためのサイクルが回っていると新しい挑戦や改善がうまれやすいため、そのサイクルの存在を確認します。
  • プラクティス: デジタル化の進んだ企業群では当たり前に行われる習慣や実践手法が行われているかをチェックしし、経営数値に見えにくい文化レベルの成熟をとらえるために確認します。
  • アンチパターン: デジタル化が進む過程で減っていく慣習的行動をチェックし、逆指標として用います。古い常識によって生まれていることであり、組織的なアンラーニングが行われているかを確認します。
Webフロントエンド版DX Criteriaのポリシーと構造

自分たちのチームの開発プロセスや文化を見直し、改善点を探る上で非常に参考になりそうです。


Tailwind CSS 4.0 へのアップグレード (03/14)

Tailwind CSSのバージョン4.0がリリースされていたので、既存の3.0環境から4.0にアップグレードしてみました。アップグレードで特に意識したポイントは以下の2点。

1. カスタマイズ方法の変更

従来、tailwind.config.jsで行っていたテーマのカスタマイズ(色、フォント、ブレークポイントなど)が、CSSファイル内で直接定義できるようになりました。

2. Cascade Layersの導入

リセット系スタイル、テーマ、ユーティリティなどが、CSSの @layer ルールを用いて整理されるようになりました。これにより、Tailwindのスタイルと自前で書いたスタイルの優先順位(詳細度)の競合が起こりにくくなり、スタイルの適用順序が予測しやすくなります。

アップグレード自体は比較的スムーズに行えました。


ローカルで試すLLM Gemma 3 (03/17)

Googleから「Gemma」の新バージョンが登場していたので、試してみました。

パラメータサイズ別に複数のモデル (1B, 4B, 12B, 27B) が提供されており、4B以上のモデルはマルチモーダル(テキスト+画像)に対応しています。

手元のMac (M2, 24GB RAM) でも4Bモデルなら比較的快適に動作しました。前に試した同程度のパラメータサイズのモデルと比較しても、応答速度や精度が向上している印象です。ローカル環境で手軽にLLMを試したい場合の有力な選択肢になりそうです。


ビルドツール Rollupのファイルハッシュ (03/17)

Viteの内部で利用されているRollupには、ビルド成果物のファイル名に内容に基づいたハッシュ値を付与する機能があります。このハッシュ値生成の仕組みが気になり、少し調べてみました。

  • ハッシュ計算アルゴリズムには、高速な xxHash が利用されているようです。
  • 生成されたハッシュ値全体ではなく、先頭から一定の文字数(デフォルトは8文字)を切り出してファイル名に使用しているようでした。

値を切り出すことでの衝突が気になりますが、キャッシュバスティング目的であれば実用上問題ないと判断されているのかもしれません。

おまけ

この仕組みを参考に、macOSのショートカットアプリを使って、ファイルを選択するとファイル名-<ハッシュ値>.拡張子という形式の文字列をクリップボードにコピーする、という簡易的なツールも作ってみました。(ショートカットアプリで使えるハッシュ関数は限られるため、厳密な再現ではない)

macOSの通知バナー。メッセージは「ファイル名 style-517bd542.css をクリップボードにコピーしました」 。

OpenAI API 構造化出力とストリーミングの併用 (03/24)

OpenAI APIを利用する際、構造化出力を利用することが多いのですが、出力を安全に利用するため、すべての生成を待ってから検証する必要があります。これでは、生成に時間がかかる場合、ユーザーを待たせてしまい、体験を損なう可能性があります。

OpenAI APIのドキュメントを読んでいたところ、この構造化出力とストリーミングを併用できることを知りました(まだ実際に試せてはいません)。

Structured Outputs – OpenAI API: https://platform.openai.com/docs/guides/structured-outputs?api-mode=chat#streaming

これが実現できれば、生成されつつある構造化データを部分的に受け取りながらリアルタイムに処理・表示することで、ユーザー体験を損なわずに済む可能性があります。今後利用してみたいです。


「言語モデルの物理学」 (03/25)

以下のブログ記事が非常に興味深かったです。

言語モデルの物理学 – ジョイジョイジョイ: https://joisino.hatenablog.com/entry/physics

言語モデルの複雑な振る舞いについて理解しようとする研究アプローチについて解説されており、特に以下のキーワードが印象に残りました。

  • 未知の問題を解ける
  • 間違いを出力したあと、頭の中で後悔している
  • 事前訓練時に何らかの質問を見ておく必要がある
  • 逆検索ができない
言語モデルの物理学 – ジョイジョイジョイ

LLMの能力と限界を理解する上で、新しい視点を与えてくれる記事でした。


CUIシステムモニター btop++ (03/28)

top や htop のようなCUIのシステムモニターツールは色々ありますが、「btop++」というツールを試してみました。

aristocratos/btop: https://github.com/aristocratos/btop

CPU、メモリ、ディスクI/O、ネットワーク使用状況、実行中のプロセス情報などが、グラフや色分けを多用して非常にリッチに表示されます。テーマのカスタマイズも可能で、マウス操作にも対応しているため、直感的に情報を把握しやすいのが特徴です。


3月31日は世界バックアップデー (03/31)

3月31日は「世界バックアップデー」だそうです。この日に合わせて、データのバックアップ戦略の基本として有名な「3-2-1ルール」を再確認しました。

  • 3つのコピーを持つ(オリジナル+2つのバックアップ)
  • 2種類の異なるメディア(媒体)に保存する
  • 1つはオフサイト(物理的に離れた場所、またはクラウド)に保管する

最近では、スナップショットや世代管理を組み合わせ、より多くのコピー(例えば5つ)を保持する「5-2-1ルール」のような考え方もあるようです。


おわり

来月も続けるかはわかりません。

たろう
たろう
フロントエンドエンジニア。

Related articles

ラベル画像のトリミング(1)

前回までの投稿では、「画像検索の精度...

画像検索の精度確認(5)

3歩進んで2歩下がる?なかなか思った...

画像検索の精度確認(4)

前回の投稿では、エンベディングの前処...

画像検索の精度確認(3)

過去の投稿を通して、TensorFl...