kobitoDevelopment

.box {
  width: 300px;
  aspect-ratio: 1/1;
}
.opacity {
  background-color: red;
  opacity: 0.7;
}
.opacity-mix {
  background-color: color-mix(in srgb, red 70%, transparent);

kobitoDevelopment

.grid {
  --border-width: 1px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--border-width);
  max-width: 840px;
  margin-inline: auto;
  margin-top: 120px;
  overflow: clip;
}

kobitoDevelopment

<?php
// Content-Type: application/json を明示
header('Content-Type: application/json');

// JSONデータを受け取る
$input = json_decode(file_get_contents('php://input'), true);
$productId = $input['productId'] ?? null;
$quantity = $input['quantity'] ?? 0;

//  バックエンド側でバリデーションを実施しない例

kobitoDevelopment

/**
 *
 * ブラウザの1フレームの流れ：
 *
 *   1. JavaScript実行（通常タスク）
 *   2. Style / Layout / Render 準備
 *   3. requestAnimationFrame コールバック実行（Paint直前）
 *   4. Paint（実際の描画）
 *   5. setTimeout(..., 0) 実行（Paint後のmacrotask）
 */

kobitoDevelopment

// 元の配列を破壊してしまう例
const myFunction = (array: { age: number; name: string }[]): number[] => {
  return array
    .filter((item) => item.age > 18) // ✅ 非破壊：元の配列を変更せず、新しい配列を返す
    .map((item) => item.age)         // ✅ 非破壊：こちらも新しい配列を返す
    .sort((a, b) => a - b);          // ⚠️ 破壊的メソッド：元の配列を並べ替えてしまう
};

// 🚨 解説：なぜ危険なの？
// ・.filter() と .map() は「新しい配列を返す」＝非破壊的メソッド。

kobitoDevelopment

/* Marqueeアニメーションの仕組み
 * 
 * このアニメーションが途切れ目なく動作する理由：
 * 1. background-size: 2848px - 背景画像の幅を2848pxに設定(画面幅以上の横長の画像)
 * 2. background-repeat: repeat-x - 画像を横方向に無限に繰り返し
 * 3. アニメーションで画像を左に2848px（画像1枚分）移動
 * 
 * 動作の流れ：
 * - 0%: 画像は初期位置（0, 0）
 * - 100%: 画像は左に2848px移動（-2848px, 0）

kobitoDevelopment

[
  { "id": 1, "title": "記事1", "content": "記事1の内容です。", "date": "2025-01-01" },
  { "id": 2, "title": "記事2", "content": "記事2の内容です。", "date": "2025-01-02" },
  { "id": 3, "title": "記事3", "content": "記事3の内容です。", "date": "2025-01-03" },
  { "id": 4, "title": "記事4", "content": "記事4の内容です。", "date": "2025-01-04" },
  { "id": 5, "title": "記事5", "content": "記事5の内容です。", "date": "2025-01-05" },
  { "id": 6, "title": "記事6", "content": "記事6の内容です。", "date": "2025-01-06" },
  { "id": 7, "title": "記事7", "content": "記事7の内容です。", "date": "2025-01-07" },
  { "id": 8, "title": "記事8", "content": "記事8の内容です。", "date": "2025-01-08" },
  { "id": 9, "title": "記事9", "content": "記事9の内容です。", "date": "2025-01-09" },

kobitoDevelopment

'use client'

import { usePathname } from 'next/navigation'

export default function FugaPage() {
  const pathname = usePathname()
  const isHoge = pathname.includes('/hoge')

  return (
    <div>

kobitoDevelopment

.canvas {
  display: block;
  width: 100%;
  height: 100vh;
}

kobitoDevelopment

canvas.water {
  display: block;
  width: 100%;
  height: 100vh;
}