manabuyasuda

/**
 * 特定のスクロール位置（要素）を通過したかどうかを監視するカスタムフックです。
 * スクロール位置と要素の位置を比較して、要素を通過したかどうかを判定します。
 * @param {string} selector 監視対象の要素を特定するCSSセレクタ
 * @param {Object} options 監視オプション
 * @param {string} options.scrollBasePosition スクロール量の基準位置を画面の上端（'top'）または下端（'bottom'）とするか
 * @param {string} options.elementBasePosition 要素の基準位置を要素の上端（'top'）または下端（'bottom'）とするか
 * @param {boolean} options.once 一度要素を通過したら監視を終了するかどうか
 * @returns {boolean} true: スクロール量が要素の位置を超えた, false: まだ要素の位置まで到達していない
 */

manabuyasuda

/**
 * 指定秒数の間スクロールが止まっているかを監視するカスタムフックです。
 * スクロールイベントとタイマーを組み合わせて、ユーザーのスクロール停止状態を検知します。
 * @param {number} timeoutSeconds スクロールが止まったと判定するまでの秒数（デフォルト: 3秒）
 * @returns {boolean} スクロールの状態
 * - true: 一定時間スクロールが止まっている（指定秒数の間にスクロールなし）
 * - false: スクロールが発生している（直近の指定秒数以内にスクロールあり）
 */
export function useScrollStopped(timeoutSeconds: number = 3): boolean {
  // 一定時間スクロールが止まっているかどうか

manabuyasuda

/**
 * スクロール方向
 * 'up': ページトップ方向へのスクロール（ページを上に戻る）
 * 'down': ページボトム方向へのスクロール（ページを下に進める）
 * 'none': スクロールが発生していない状態
 */
type VerticalScrollDirection = 'up' | 'down' | 'none';

/**
 * スクロール方向を監視するhook

manabuyasuda

import { RefObject, useRef, useEffect } from 'react';

/**
 * イベントタイプ
 * - mousedown: マウスボタンを押したとき
 * - click: マウスボタンを押して離したとき
 * - touchstart: タッチしたとき
 */
type EventType = 'mousedown' | 'click' | 'touchstart';

manabuyasuda

import { useEffect, useRef } from 'react';

type RenderTimeOptions = {
  /**
   * 計測完了のトリガーとなる条件。
   * コンポーネント側でレンダリングを完了した状態を持たせて、それを設定する想定。
   */
  completeTrigger: boolean;
  /**
   * 計測結果を区別するための識別子。

manabuyasuda

/**
 * 文字列の文字数を返します。
 * @param {string} str - カウントする文字列
 * @param {Intl.LocalesArgument} [locale='ja-JP'] - 使用するロケール（デフォルトは日本語）
 * @returns {number} 文字数
 * @example
 * getCountCharacters('こんにちは'); // 5
 * getCountCharacters('𩸽を買って❗️'); // 6
 */
export function getCountCharacters(

manabuyasuda

import { useState, useEffect, useCallback, RefObject } from 'react';

/**
 * ある要素に横スクロールが発生しているかを検知するカスタムフックです。
 * コンポーネントのマウント時とリサイズ時にチェックして真偽値を返します。
 * @param ref 監視対象の要素への参照
 * @returns isScrolled 横スクロールが発生しているか
 * @example
 * function MyComponent() {
 *   const containerRef = useRef<HTMLDivElement>(null);

manabuyasuda

/**
 * 相対的な日付を取得する関数です。
 * 6ヶ月以上前の日付は絶対日付で、それ以外は「〜前」の形式で出力します。
 * 週や月はカレンダー通りではなく、日数（ミリ秒）をベースにした近似値なので、わずかに誤差があります。
 * @param updatedAt - 更新日時の文字列
 * @param now - 現在の日時（デフォルトは現在時刻）
 * @returns 相対的な日付を表す文字列
 */
export function getRelativeDate(
  updatedAt: string,

manabuyasuda

import { useCallback, useEffect, useRef } from 'react';

type ScrollIntoViewOptions = {
  behavior?: ScrollBehavior;
  block?: ScrollLogicalPosition;
  inline?: ScrollLogicalPosition;
};

type UseFocusOnHashOptions = {
  onFocus?: () => void;

manabuyasuda

{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "名前",
  "description": "詳細な説明",
  "image": ["https://example.com/image01.jpg"],
  "sameAs": ["副次的なURL1"],
  "hasOccupation": [
    {
      "@type": "Occupation",