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",

manabuyasuda

@use '@root/common/styles/index.scss' as *;

.tooltip_content {
  z-index: 1;
  width: 510px;
  max-width: 100%;
  padding: 8px;
  border-radius: 8px;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;

manabuyasuda

.bordering {
  position: relative;
  color: #fff;
  -webkit-text-stroke: 4px #000; // デザインデータ上の縁取り×2

  &::before {
    content: attr(data-text);
    position: absolute;
    -webkit-text-stroke: 0;
  }

manabuyasuda

import SweetScroll from 'sweet-scroll'

/**
 * スムーススクロールの共通処理です。
 * https://github.com/tsuyoshiwada/sweet-scroll
 * @example
 * import { scroller } from '@utility/scroller'
 * const element = document.getElementById('element')
 * scroller.toElement(element)
 * element.setAttribute('tabindex', '-1')

manabuyasuda

/**
 * 配列を比較して、1つでも重複があれば`true`を返す
 * @param {Array} arr1
 * @param {Array} arr2
 * @returns {Boolean}
 */
const isDuplicateArray = (arr1, arr2) => {
  return (
    [...arr1, ...arr2].filter(item => arr1.includes(item) && arr2.includes(item)).length > 0
  )

manabuyasuda

/**
 * @classdesc 対象要素内の見出しを検索して目次を生成します。
 * @author Manabu Yasuda <[email protected]>
 * @example
 * import Toc from '@lib/Toc'
 * const toc = new Toc({
 *   tocSelector: '.toc',
 *   contentSelector: '.content',
 *   headingSelector: 'h2',
 *   listClass: 'list',