Rork で日付が日本時間にならない・9時間ずれる時の直し方

// デバッグ用: 一時的にこれを書いて、各ステップで値を確認する
const raw = '2026-04-29T00:00:00Z';        // サーバーから来た値
const parsed = new Date(raw);
console.log('元の文字列:', raw);
console.log('Date オブジェクト:', parsed);
console.log('ローカル表示:', parsed.toString());
console.log('toISOString():', parsed.toISOString());
console.log('toLocaleString JP:', parsed.toLocaleString('ja-JP', { timeZone: 'Asia/Tokyo' }));
console.log('getTimezoneOffset:', parsed.getTimezoneOffset());
// 期待: ローカル表示 → 2026/4/29 9:00:00（JST）
//       getTimezoneOffset → -540（JST は UTC より9時間進んでいるので負の値）

// ❌ 日付が変わるバグ
const record = { createdAt: '2026-04-29T00:00:00Z' };  // UTC で2026/04/29 00:00
const d = new Date(record.createdAt);
const dayLabel = `${d.getMonth() + 1}/${d.getDate()}`;  // → 「4/29」と表示したい
// 実際は JST に変換されて 2026/04/29 09:00 になるので → 「4/29」(たまたま合う)
// だが UTC で 2026/04/28T15:00:00Z を投げた場合は JST だと 2026/04/29 00:00
// → クライアントは「4/29」表示、サーバー DB は「4/28」記録、というズレが起きる

import { format, parseISO } from 'date-fns';
import { toZonedTime } from 'date-fns-tz';
 
// ✅ 表示用: 必ず JST に変換してからフォーマットする
function formatJstDate(isoString: string): string {
  const utc = parseISO(isoString);                    // UTC として正しく解釈
  const jst = toZonedTime(utc, 'Asia/Tokyo');         // JST に明示変換
  return format(jst, 'yyyy/MM/dd HH:mm');
}
 
// 使用例
const label = formatJstDate('2026-04-29T00:00:00Z');
console.log(label);  // → "2026/04/29 09:00"

// ❌ よくある送信コード
const selectedDate = new Date(2026, 3, 29);  // ローカル 2026/04/29 00:00:00 (JST)
const payload = { date: selectedDate };
fetch('/api/diary', { method: 'POST', body: JSON.stringify(payload) });
// 実際に送られる値: { "date": "2026-04-28T15:00:00.000Z" } ← UTC換算で前日になる

import { format } from 'date-fns';
 
// ✅ 日付として扱う場合: YYYY-MM-DD 文字列で送る
const selectedDate = new Date(2026, 3, 29);
const payload = {
  date: format(selectedDate, 'yyyy-MM-dd'),  // → "2026-04-29"
};
fetch('/api/diary', { method: 'POST', body: JSON.stringify(payload) });
 
// ✅ 時刻まで扱う場合: タイムゾーン情報付きの ISO 文字列にする
import { formatISO } from 'date-fns';
const now = new Date();
const payloadWithTime = {
  createdAt: formatISO(now),  // → "2026-04-29T09:30:15+09:00" (タイムゾーンが明示される)
};

import AsyncStorage from '@react-native-async-storage/async-storage';
 
// 保存
const lastOpened = new Date();
await AsyncStorage.setItem('lastOpened', JSON.stringify(lastOpened));
// JSON.stringify が toISOString を呼ぶので、保存される値は "2026-04-29T00:30:15.000Z"
 
// 読み込み — ❌ これだと文字列のまま
const raw = await AsyncStorage.getItem('lastOpened');
const value = raw ? JSON.parse(raw) : null;
console.log(value.getHours());  // TypeError: value.getHours is not a function
 
// ✅ 正しく Date に戻す
const restored = raw ? new Date(JSON.parse(raw)) : null;
console.log(restored?.getHours());  // 正常に動く

# Mac のシミュレータを別タイムゾーンで動かす（例: ハワイ）
TZ='Pacific/Honolulu' npx expo run:ios
 
# 終わったら通常通りに戻す（再起動でも戻る）
unset TZ

// ❌ 環境差が出る可能性あり
const d1 = new Date('2026-04-29');         // 環境によって挙動が違う
const d2 = new Date('2026/04/29');         // iOS で NaN になることがある
 
// ✅ date-fns の parse / parseISO を使う
import { parse, parseISO } from 'date-fns';
const d3 = parseISO('2026-04-29');                          // ISO 8601 専用
const d4 = parse('2026/04/29', 'yyyy/MM/dd', new Date());   // 任意フォーマット

// utils/datetime.ts として配置
import { format, parseISO } from 'date-fns';
import { toZonedTime } from 'date-fns-tz';
 
export function formatJstDate(input: string | Date, pattern = 'yyyy/MM/dd HH:mm'): string {
  const utc = typeof input === 'string' ? parseISO(input) : input;
  const jst = toZonedTime(utc, 'Asia/Tokyo');
  return format(jst, pattern);
}