I_AM_NOT_SPAM kobitoDevelopment

CSV × スプレッドシート × Shift_JIS で発生する文字変換

Shift_JIS の CSV をスプレッドシート (Google Sheets, Excel, Numbers) で開いて保存し直すと、以下の文字変換が発生する。

1. 波ダッシュ (U+FF5E ↔ U+301C)

Shift_JIS の 0x8160 を Unicode のどの文字にマッピングするかは実装依存。

コードポイント	名称	採用元

Webフォント読み込みの最適化

`rel="preload"` と `rel="preconnect"` の違い

`rel="preconnect"`

DNS解決・TCP接続・TLSハンドシェイクを事前に行う。リソース自体のダウンロードは行わない。

<link rel="preconnect" href="https://fonts.googleapis.com" />

Next.js App Router: Suspense と Server Components

Suspense で Server Component を wrap する目的

Server Component が非同期処理（データフェッチ等）を含む場合、その完了までページ全体のレンダリングがブロックされる。Suspense 境界で囲むことで、該当コンポーネントの処理完了を待つ間 fallback を表示しつつ、ページの残りを先行してクライアントへストリーミングできる。

import { Suspense } from 'react';

export default function Page() {

Lambda Nano-functions アンチパターン

概要

1処理1Lambdaに細分化する設計パターン。通称 "Lambda per method" / "Nano-functions"。通常のプログラミングにおける関数分割をそのままLambda分割に持ち上げる構成。

問題点

1. レイテンシの劣化

httpOnly Cookie の誤解 ― 「読めない」は「悪用できない」ではない

よくある誤解

「Cookie を httpOnly にすれば JavaScript から読めないので安全」

半分正しく、半分間違い。httpOnly 属性は document.cookie 経由での読み取りを防ぐが、Cookie を読めなくても悪用できるという点が見落とされがち。

また、httpOnly は「Cookie 窃取による恒久的なセッションハイジャック（別端末からのログイン）」を防ぐ防具ではあるが、「今その瞬間、ユーザーのブラウザを操ること」は防げない。即死を避けるヘルメットであり、飛んでくる矢（XSS）そのものを防ぐ盾ではない。

	/**
	* 下方向に三角形のしっぽを持つ吹き出し形状。
	* CSS shape() 関数を使用し、clip-path で切り抜く。
	* border-shape でボーダーを描画する。
	*/
	.balloon {
	padding-block: 40px calc(40px + calc(12px * tan(60deg)));
	padding-inline: clamp(24px, 5%, 48px);
	clip-path: shape(
	from 12px 0,

	/**
	* 2カラムレイアウト（サイドバー + メインコンテンツ）
	*/

	.layout {
	display: flex;
	}

	.sidebar {
	width: 200px;

	export const ROUTES = {
	// トップページ
	HOME: '/',

	// 静的ページ
	ABOUT: '/about',
	CONTACT: '/contact',
	PRIVACY_POLICY: '/privacy-policy',

	// ニュース（一覧 + 動的詳細ページ）

	.box {
	margin-top: 150vh;
	margin-bottom: 150vh;
	width: 100%;
	height: 50vh;
	background-color: red;
	}

	.box {
	/* timeline-triggerとanimation-triggerを、--box-triggerという同名を用いて紐付ける */