WebページのJPEGとWebP：読み込み速度と画質の差を実測する
TOC 結論: 写真系はWebP、互換性が不安な場面はpictureタグでJPEGをfallback提供すれば両立できる。 Webページの表示速度は、直接的にユーザーの離脱率と検索順位に影響します。そしてページ重量の半分以上を占めることが多いのが画像ファイルです。「とりあえずJPEGで書き出す」という判断をずっと続けて…
— CATEGORY —
テクノロジー
Web・AI・プログラミングまわりの見取り図と実装メモ。
WebフォントとシステムフォントのLCPへの影響：読み込み遅延と見た目の変化を測定する
TOC 結論: WebフォントはLCPを平均数百ms悪化させる。fontdisplay戦略とpreloadの組み合わせが最速の改善策。 Webフォントを使えばブランドの個性が出る。しかし何も考えずに導入すると、LCPLargest Contentful Paintスコアが静かに悪化していきます。 その悪化幅は「どうせ誤…
ローカル開発環境とクラウド開発環境、プロジェクト規模で使い分ける判断軸
結論: 3人以下・長期運用ならローカル、4人以上・短命プロジェクトはクラウドが合う。 TOC 開発環境の選択は「どちらが優れているか」という問いではなく、「このプロジェクトに何が合うか」という問いです。 最初は「クラウドなんて大げさ」と思っていたのですが、実際に5人チームでGitHub Codespacesを使い始めて…
Gitコミットの粒度と後悔：何行動で1コミットにすべきか
結論: 「1コミット=1つの論理的変更」。バグ修正とリファクタは必ず分けて積む。 Gitのコミット粒度をどう決めるか——これはコードの品質と同じくらい開発体験に直結する問いです。 「とりあえずまとめてコミット」を続けたある日、障害対応でrevertが必要になり、関係のない変更まで巻き込んでしまった経験は、多くのエンジニ…
ブラウザのタブを閉じるべきタイミング：メモリ消費と生産性の実測値
結論: タブは「用途の終わったものをその場で閉じる」が唯一の正解。保留は後悔の始まりです。 ブラウザのタブは増えるのに、減ることは稀です。気づけば20枚、40枚と積み上がり、PCのファンが唸り始める。しかし実際のところ、タブの枚数は何枚から「問題」になるのでしょうか。そして、生産性への影響は本当に計測できるものなのでし…
APIドキュメントの読み方：必須項目と実装に必要な情報の抽き出し方
結論: 認証・エンドポイント・リクエスト形式・レート制限・エラーコードの5点を先に読めば、実装で詰まる確率は大きく下がる。 APIドキュメントを初めて開いたとき、ページ数の多さと用語の密度に圧倒された経験は多くの人が持っているでしょう。最初から全部読もうとすると、実装に入れないまま1時間が過ぎることもあります。 重要な…
スクリーンショットとスクリーンレコード、使い分けるタイミングと保存形式
結論: 「状態」はスクリーンショット、「操作」はスクリーンレコード。形式はPNG・MP4が無難。 画面を記録する方法を聞かれると、多くの人が「とりあえずスクリーンショット」と答えます。ところが、手順を説明したい場面や再現性を確認したい場面では、静止画では情報が足りないことがほとんどです。 一方で「スクリーンレコードを送…
WebアプリでHTTPが使われる場面：HTTPSとの使い分けと判断基準
TOC 結論: 本番でユーザーデータを扱う限りHTTPSが原則。HTTPは開発環境と信頼済みの閉域網に限る。 HTTPSがほぼ無料で使える時代に、「HTTPで十分な場面がまだ存在する」と言うと、驚かれることがあります。 実際には全部をHTTPSにすれば安全というほど単純ではなく、アーキテクチャの構造上HTTPが現れる箇…
GitHub通知設定を整理して、メール疲れから抜ける
結論: Watch設定・Subscription整理・メールフィルタの3段階で、GitHub通知は劇的に静かにできる。 GitHubの通知は、放置すると1日数十件を軽く超えます。 PRのコメント、CI失敗アラート、Dependabotの依頼——どれも無視できそうで、でも全部読む時間もない。 気づけばメール受信箱がGit…