Catpow ESM

|モジュール|関数・クラス|概要|Document| |:--|:--|:--|:-:| |app|appBase|eventMixinに状態管理と非同期のデータ取得処理の機能を追加した拡張オブジェクトを生成します。主にalipine.jsのx-dataに使用することを想定しています。|| ||eventMixin|イベントリスナーの追加と発火のためのメソッドを持ったオブジェクトを生成します。主にalipine.jsのx-dataに使用することを想定しています。|| |component|renderComponents|data-compoentの属性値を持った要素に指定のReactコンポーネントをレンダリングします。コンポーネントにはdata-*属性値がpropsとして渡されます。|| ||nl2br|文字列中の改行を、Reactの要素としてbrに置き換えます。|| ||Animation|Reactの関数コンポーネント。要素の大きさや中心座標、マウス/タッチ位置と押下状態、フレーム番号を計測し、複数のContextで子要素に共有するラッパーです。|| ||MosaicWave|Reactのコンポーネント。画面をタイル状に分割し、Animationのフレームとサイズ情報を使って複数の波が広がるように色を時間変化させるモザイクアニメーションを描画します。|| ||ArrayInput||| ||CheckBox||| ||CheckBoxes||| ||InputDuration||| ||MultiRangeInput||| ||PositionInput|Reactの入力コンポーネント。SVG上をドラッグして座標を指定し、グリッドへのスナップやスロットリング付きで(x,y)をonChangeに通知します。|| ||RadioButtons||| ||RangeInput|複数値を扱えるレンジ入力コンポーネント。スライド位置から最も近いハンドルを特定し、順序制約とスナップ・スロットリング付きで値を更新、入力欄表示にも対応します。|| ||SearchSelect||| ||SelectBox||| ||SelectTable||| ||StepInput||| ||StepSelect||| ||TableInput||| ||Toggle||| ||Nav|Reactのナビ用コンポーネント。メニューと階層付きアイテムの状態をContext＋useReducerで管理し、項目のアクティブ化・解除やフォーカスで階層レベルを更新します。|| ||Menu|Reactのメニュー用コンポーネント。NavのContextから状態とdispatchを受け取り、指定されたmenuがアクティブかどうかでクラスを切り替えます。内部要素の高さをResizeObserverで監視し、CSS変数--inner-heightとして設定。マウスがメニュー外へ出た時にメニューを非アクティブ化します。|| ||MenuItem|階層ナビの項目用コンポーネント。ホバーで項目を有効化し、クリックで階層に応じて有効化／無効化を切替。activeや子要素の有無でクラスを付与し、状態はContextで共有されます。|| ||MainMenu|階層ナビのメインメニュー。現在レベルとの差分でクラスを付与し、ResizeObserverで内容の高さをCSS変数へ反映します。|| ||SubMenu|階層ナビのサブメニュー。指定レベルの子要素を取得し、現在レベルとの差で状態クラスを付与。内容高さはResizeObserverでCSS変数に反映します。|| ||SubMenuContents|親項目がアクティブのときだけ表示状態を切り替えるサブメニュー内容用コンポーネント。parent.activeに応じてis-activeクラスを付与します。|| ||ComputeLine|callbackで算出した値から折れ線のSVGパス文字列を生成するコンポーネント。step回の計算で座標を並べ、useMemoで効率的にpath要素へ反映します。|| ||Honycomb|六角形セルを敷き詰めた蜂の巣状グリッドをSVGで描画するReactコンポーネント。サイズや間隔、各セルの表示属性をコールバックで動的に指定できます。|| ||Flux|形状生成用のシードから複数点の軌道を計算し、時間差で重なる曲線をSVGで描画するFluxコンポーネント。色や本数、進行度で表現を変えられます。|| ||Star|SVGで星形を描くReactコンポーネント。頂点数や中心位置、外半径・内半径、塗りと線色を指定し、path要素のd属性を計算して描画します。|| ||SVG|SVG描画用のコンテキストを提供するReactコンポーネント。サイズや色設定をContextで共有しつつ、子要素を含むsvgを生成します。|| ||Bem|子要素のclassNameを解析し、BEM方式の接頭辞・ブロック・エレメント名を自動付与するReactコンポーネントです。|| ||Cloak|ページ読み込み時の“クローク（覆い隠し）演出”を行うためのReactコンポーネントです。CSSアニメーション／トランジションの完了を検知しながら、徐々に表示状態を進めます。|| ||ElasticBox|子要素のサイズ変化をResizeObserverで監視し、高さや幅を自動追従させるReactコンポーネント。BEM形式のクラスを付与し、縦横どちらを監視するかを指定できます。|| ||Parallax|要素の位置と画面高さからパララックス係数を算出し、requestAnimationFrameでCSS変数を更新。距離や内外判定で状態クラスを付与するReactのスクロール連動コンポーネントです。|| ||Popup||| ||Portal|DOM外に要素を描画するReactポータル。指定ID/クラスの要素を生成し、trace要素の位置・サイズを定期取得して追従配置しつつcreatePortalで子要素を描画します。|| ||PortalWindow|新しいブラウザウィンドウをwindow.openで開き、その中にID付きのdivを用意してcreatePortalで子要素を描画するReactコンポーネント。タイトルやサイズ指定も可能です。|| ||RawNode|props.nodeに渡されたDOMノード（または複数ノード）をref先のdivへ直接appendChildして表示するReactコンポーネント。既存の子要素も並べて描画し、classNameは既定でcp-rawnode。|| ||ScrollSpy|IntersectionObserverで要素の可視状態を監視し、表示中・ほぼ全体表示などの状態をフラグ化してクラス名に反映するスクロール監視用コンポーネントです。|| ||Slider|タッチ操作や自動再生に対応したスライダー。現在位置を管理し、矢印・ドット操作や無限ループ、スワイプ操作でスライドを切替え、CSS変数でアニメーションを制御します。|| ||TabPanel|子要素のkeyをタブ名として表示し、クリックで選択状態を更新。現在のタブだけ内容を表示するReact製タブ切替コンポーネント。BEMでクラス名を生成します。|| ||TextBuild|子要素の文字列を1文字ずつ配列化し、delay後にinterval間隔で順次表示。表示中か否かでBEMクラスを付与し、テキストがタイプされるように見せるReactコンポーネントです。|| ||Transition|子要素の変化を検知し、前後の内容を保持して種類別にアニメーション遷移。内容サイズも自動計測しCSS変数で反映するトランジション用Reactコンポーネントです。|| ||Loop|反復可能なオブジェクトから任意のコンポーネントのJSXオブジェクトを反復して生成します。|| ||JsonEditor||| |dom|divideImage|画像をグリッド状に分割して表示する関数。要素を複製して配置し、ResizeObserverでサイズ変化に応じて分割数や配置を自動更新します。|| ||divideText|テキストを行・単語・文字に分割し、階層的なspan要素でラップします。各要素にインデックスや文字種のクラスを付与し、アニメや装飾をしやすくします。|| |graphic|honeycomb||| ||shape||| |hooks|useAgent|Reactのカスタムフックで、イベント機能や共有/直列実行のPromise管理、状態管理を備えた「Agent」を生成し、Contextや遅延Providerとして提供できるようにします。|| ||useAgentContext|useAgentContextは、Contextに保存されたAgentインスタンスを取得するフックです。対応するProvider配下で共有され、未提供の場合の検出もしやすくなります。|| ||useBem|DOM変化を監視し規定のルールで命名されたクラス名を自動でBEM記法へ変換します。|| ||useCache|複数キーで階層化したMapに結果を保存し、同じ引数のときは計算せずに値を再利用するReactフックです。|| ||useQuery|指定URLの取得結果をキャッシュし、同じURIでは再リクエストせず保存データを返すReact用データ取得フックです。|| ||useTransition|要素にrefを付与してアニメーション状態を管理するReactフックです。isActiveの切替でenter→active→leave→inactiveへ自動遷移し、非表示時はWeb Animationsの完了を待って状態更新します。|| ||useLazyProvider|非同期で取得した値をContext.Providerへ渡す遅延ロード用コンポーネントをReact.lazyで生成し、useCacheで引数ごとにメモ化して再利用するフックです。|| ||useLazyComponent|非同期で取得したpropsを注入したラップドコンポーネントをReact.lazyで生成し、useCacheで引数ごとに再利用するフックです。同じ引数なら再生成せず動的ロードとメモ化を両立します。|| ||useThrottle|依存配列の変化でcallbackを実行。初回は即実行し、その後は指定間隔内の再実行を抑制、間隔後に1回だけ遅延実行するスロットル用フックです。|| ||useDebounce|依存配列の値が変わるたびにタイマーを作成し、一定時間内に再度変化があれば前回を破棄。最後の変化から指定時間後にcallbackを1回だけ実行するデバウンス用フックです。|| ||useChangeEffect|初回レンダー時は実行せず、依存配列の値が変化した2回目以降のみcallbackを実行するフック。useRefで初回を判定し、callbackの返り値でクリーンアップも行えます。|| |scssc|translateColor|色名やトーン指定を解析し、CSSカスタムプロパティを用いて hsla() 形式に変換する関数。単色、相対トーン、混合色や透明度にも対応。|| |ui|slider|HTML要素内のスライドをループ再生やナビゲーション操作で制御し、自動再生や同期表示にも対応するカルーセル機能を提供する。|| ||scrollsync|指定要素内のスクロール位置を同期管理し、ループや自動再生、ナビゲーション操作に対応するスクロール同期機能を提供する。|| ||tabpanel|複数のタブと対応パネルを管理し、クリックやキーボード操作でパネルを切り替え、ARIA属性でアクセシビリティを確保するタブパネル機能を提供する。|| ||accordion|指定要素をアコーディオン化し、開閉状態を管理。ボタンとパネルのARIA属性を設定し、クリックやEnter/Spaceで開閉可能にする。|| |util|animate|コールバックを継続時間とイージングから算出された0〜1の進捗度が引数としてマイフレーム実行する柔軟なアニメーション用関数。|| ||easeLinear|一定スピードのイージング関数。|| ||easeInQuad|減速のイージング関数。|| ||easeOutQuad|加速のイージング関数。|| ||easeInOutQuad|加減速のイージング関数。|| ||easeInCubic|緩やかな減速のイージング関数。|| ||easeOutCubic|緩やかな加速のイージング関数。|| ||easeInOutCubic|緩やかな加減速のイージング関数。|| ||preserveAnimationValues|アニメーションの実行結果の値を任意ステップ数であらかじめ計算しておく関数。多数の要素が同じアニメーションをする、何度も同じアニメーションを繰り返す場合に計算量を節約できます。|| ||scrollTo|任意の継続時間とイージングでウィンドをスクロールするアニメーション関数。|| ||sequence|コールバックの配列を順次完了を待って実行する関数。各コールバックはPromiseのコールバックとしてresolve,rejectの２つの引数が渡され、resolveを実行して完了を通知します。|| ||sinWave|任意の振幅と周波数から正弦波の関数を返す関数。|| ||waveFromBase36|Base36 文字列をseedとして受け取り、その内容から複数の三角波を合成した波形関数を生成する関数。返り値は p（位相・時間のような値）を与えると、その時点の波形値を返すクロージャ関数になります。|| ||bsearch|ソート済みの数値の配列内での任意の値の位置を返す二分木探索の関数。|| ||chunk||| ||combine|キー値の配列と値の配列からオブジェクトを作成する関数。|| ||phasedRange|キー値・値ともに数値であるオブジェクトを受け取り、キー値を最大値、値を増加単位として、最終の最大値に達するまで数値を返すジェネレータ関数。|| ||range|任意の最小値から最大値に達するまで数値を返すジェネレータ関数。|| ||rangeValueConverter|ソート済みの数値の配列から、任意の値の位置、あるいは任意の位置の値を取得するためのメソッドを持ったオブジェクトを作成する関数。|| ||applyBem|HTML要素のclassNameを解析し、BEM方式の接頭辞・ブロック・エレメント名を自動付与する関数。|| ||bem|BEM方式のクラス名を生成する関数を返すカリー関数。|| ||bemSelector|BEM方式のクラス名のCSSセレクタの文字列を生成する関数。|| ||debounce|初回はコールバックを即実行し、その後は指定間隔内の再実行を抑制、間隔後に1回だけ遅延実行するラッパー関数を生成する関数です。|| ||throttle|コールバックを遅延実行するラッパー関数を生成する関数です。|| ||bez|引数の数に応じたn次ベジェの値を算出する関数。|| ||dataSizeStringToInt|1KBや1MBなどのデータサイズの文字列を、バイト単位の数値に変換します。|| ||fib|任意長のフィボナッチ数列を取得する関数。|| ||hunit|指数表記に変換した数値の桁を加工し、指定精度に基づいて人が扱いやすい単位へ正規化した数値を返す関数です。|| ||intToDataSizeString|バイト単位の数値をKB MB GB単位表記の文字列に変換します。|| ||pfloor|任意の桁数で数値を切り捨てます。|| ||pround|任意の桁数で数値を四捨五入します。|| ||pceil|任意の桁数で数値を切り上げます。|| ||hfloor|任意の頭の桁数で数値を切り捨てます。|| ||hround|任意の頭の桁数で数値を四捨五入します。|| ||hceil|任意の頭の桁数で数値を切り上げます。|| ||srand|xorshiftによる再現性のある乱数生成関数を生成します。|| ||colorToHsla|hex,rgb,hsbの色をhsla形式の色に変換します。|| ||hexToHsb|hex形式の色をhsb形式の色に変換します。|| ||hexToHsl|hex形式の色をhsl形式の色に変換します。|| ||hexToRgb|hex形式の色をrgb形式の色に変換します。|| ||hsbToHex|hsb形式の色をhex形式の色に変換します。|| ||hslToHex|hsl形式の色をhex形式の色に変換します。|| ||rgbToHex|rgb形式の色をhex形式の色に変換します。|| ||deepMap|キー値の配列から任意深度の多次元マップに値を代入・取得します。|| ||getChildrensOfLevel|childrenプロパティによって親子関係を持つツリー構造のデータから、任意世代の子要素を取得します。|| ||getItemsOfLevel|childrenプロパティによって親子関係を持つツリー構造のデータから、任意世代の要素を取得します。|| ||getTreeData|uriまたはid、およびparentプロパティを持つオブジェクトの配列から、childrenプロパティによって親子関係を持つツリー構造のデータを生成します。|| ||perspective|3D座標を視点(x,y,z)から遠近法で2Dへ射影する関数を生成します。戻り値の関数に付与されたupdateで視点を更新することができます。|| ||preserveDirections|任意の幅と高さの方眼の、各ベクトル(x,y)のラジアン角の２次配列を生成します。２次元グリッド上の２点の角度を何度も計算する場合に計算量を節約できます。|| ||preserveDistances|任意の幅と高さの方眼の、各ベクトル(x,y)のノルム長の２次配列を生成します。２次元グリッド上の２点の距離を何度も計算する場合に計算量を節約できます。|| ||observeIntersection|要素の画面への交差状態に応じてイベントを発火します。|| ||observeSelector|DOMツリーの変更によって、任意のセレクターに合致する要素が追加された際にその要素を引数としてコールバックを実行します。|| ||ready|コールバックをDOMContentLoadedで実行します。すでに読み込み済みであれば即時実行します。|| ||scrollspy|IntersectionObserverでHTML要素の可視状態を監視し、表示中・ほぼ全体表示などの状態をフラグ化してクラス名に反映します。|| ||watchScrollProgress|画面に対するHTML要素の位置に応じた進捗度の値を引数に、画面に要素が入っている間スクロール毎にコールバックを実行します。進捗度は（画面の高さ＋要素の高さ）を基準にした0〜1の値と、|（画面の高さー要素の高さ）|を基準にした値の２種類が渡されます。|| ||dimensionBox|画面に対する要素の位置に応じて変形の原点を移動させることで、CSSの3D変形を利用した視差効果を与えます。|| ||parallax|HTML要素に毎フレーム、画面に対する相対位置のCSS変数を付与します。|| ||simpleParallax|画面に対して要素を固定表示しつつ親要素に応じてクリップします。この手法はCSSのみでより良い形での実現が可能でありこの関数の使用は非推奨です。|| ||camelToKebab|キャメルケースの文字列をケバブケースに変換します。|| ||camelToSnake|キャメルケースの文字列をスネークケースに変換します。|| ||kebabToCamel|ケバブケースの文字列をキャメルケースに変換します。|| ||snakeToCamel|スネークケースの文字列をキャメルケースに変換します。|| ||ucFirst|最初の文字を大文字にします。|| ||ucWords|各単語の最初も文字を大文字にします。|| ||classNamesToFlags|クラス名の文字列から、各クラス名をキー値とした連想配列を取得します。ケバブケースのクラス名はキャメルケースに変換されます。|| ||filterFlags|連想配列からコールバックがtrueを返さないエントリーを除去します。|| ||flagsToClassNames|クラス名をキー値とした連想配列からクラス名の文字列を取得します。キャメルケースのクラス名はケバブケースに変換されます。|| ||flagsToWords|連想配列から値が空でないエントリーのキー値を半角スペース区切りで連結した文字列を取得します。|| ||getCharCategory|文字の種類が、大文字・小文字・数字・漢字・ひらがな・カタカナ・記号・その他いずれであるかを取得します。|| ||wordsToFlags|スペース区切りの文字列から、各文字列をキー値とした連想配列を取得します。|| ||el|任意の属性値と子要素を持ったHTMLElementを生成します。|| ||xhtmlEl|任意の属性値と子要素を持った、xhtml名前空間のHTMLElementを生成します。|| ||svgEl|任意の属性値と子要素を持った、svg名前空間のHTMLElementを生成します。|| ||mathEl|任意の属性値と子要素を持った、math名前空間のHTMLElementを生成します。|| ||rtf|マークダウン形式に似たフォーマットで、文字列をHTML文字列に変換します。||