TypeScript
すべてのキーの onDown, onUp イベントを取る React Hooks
2021-10-18ピアノツールを作ってたら押すたびに 1 度だけ発火するイベントハンドラが欲しくなったので作りました。 その際にキーイベントに関する他パターンのカスタムフックを作ってみました。 を拡張します。 (…
Arrow function で generics にすると HTML タグとして認識されてしまうときの tips
2021-09-02エディタなどによってうまくハイライトされなかったときはこうする。 をにする。
React で複数の ref を 1つのコンポーネントにセットする
2021-07-09同じ div に と の両方を使いたいとがあった。 しかしどちらも ref を渡さなければいけなかったのでその方法です。 Share ref with multiple ref handlers · Issue #13029 · facebook/react…
component から props の型を取得する
2021-07-05Storybook で props 型が必要だけど export したくなかったので。 方法 1 方法 2(古い)
fitty を React で使う useFitty hook
2021-06-14はコンテナに合わせてテキストのフォントサイズをフィットしてくれるライブラリです。 rikschennink/fitty: ✨ Makes text fit perfectly それを React で使うための hooks を書いた。 Gist fitty for react…
styled-components の keyframes で ts-styled-plugin のエラーが出る
2021-05-19css animation の や などのキーワードに対して のエラーが出たので対処しました。 で animation を扱う場合以下のように書きます。 () この や に VS Code…
React で特定の props を固定した特化コンポーネントを定義する
2021-01-19React で特定の props を固定した特化コンポーネントを定義する方法をいくつかまとめました。 DEMO です。 react-set-props - CodeSandbox 以下の という自作コンポーネントと というライブラリのコンポーネントを例に使います。 Star…
アロー関数とfunction それぞれの Type Guard 書き方
2021-01-04この記事では アロー関数で Type Guard について紹介します。 TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript function パターン arrow…
React で URL props が変わったら fade アニメーションで 背景を変える
2020-12-29props で指定された URL が変わったら フェードアウト し、 新しい URL 画像で フェードイン しながら表示するコンポーネントを作りました。 を使います。 デモ コード 部分の説明。 変更された際 になり Exit アニメーション(fade out…
js で先頭以外(n行目以降)をソートする
2020-12-17js で配列の 2 行目以降のみをソートする方法のメモです。 repl: https://repl.it/@anozon/sortbody#index.ts ソート対象の配列 先頭以外をソートする n 行目以降のみソートする Lodash…
Next.js export 実行時のタイムスタンプをコンポーネントで使う
2020-11-17を実行した時のタイムスタンプをレンダリングしたいときの方法です。 jsx 上で などとするとクライアントサイドでレンダリングされた時間が表示されてしまいます。 SSR 時のデータを React で使いたい場合は NextPage…
React と display grid でメモリ付き定規
2020-10-30メモリ付きの定規、ルーラーコンポーネントのサンプルです。 react-memory-component コード ruler-with-memory - CodeSandbox ミソ ブロック部分とメモリ部分を 0.…
絵文字を含めて文字数カウントするWebアプリ作った
2020-10-02アプリ 文字頻度カウント(絵文字対応) emoji-count 絵文字対応 では絵文字が 1 文字として分割できません。 を使います。 bestiejs/punycode.js: A robust Punycode converter that fully complies…
Python で TypeScript の UnionType を使う
2020-08-24TypeScript の UnionType は以下のように定義できます。 Python の type でも同じようなことができるのか調べました。 ちなみに というのがありますが別です。 typeing.Literal を使う ちなみに get_args…
React で canvas から画像生成する最小コード
2020-05-25この記事では React (と TypeScript で) canvas から画像生成する方法を紹介します。 文字描画や色変更をサンプルに説明していきます。 React で Canvas を使うベースのコード useEffect…
Next.js with TypeScript で最小限の _app.tsx, _document.tsx
2020-02-08この記事では Next.js with TypeScript で最小限の _app.tsx, _document.tsx について紹介します。 Gist: Next.js with typescript minimum pages/_document.tsx, pages…
children を持つ Component を normal function で書くときの型定義
2020-02-07この記事では children を持つ Component を function で書くときの型定義する方法を説明します。 書き方 を使うことで書けます。 Sample PropsWithChildren - CodeSandbox それぞれの書き方 関連 Tips Props…
【Clasp】GoogleAppScript のコードをローカルで開発する
2020-01-21この記事では Clasp を使って GoogleAppScript のコードを手元で管理する方法を紹介します。 Clasp Command Line Interface using clasp | Google Developers 手順…
5層 ReactComponent と TypeScript でカウンター書いてみる
2020-01-21経年劣化に耐える ReactComponent の書き方 - Qiita が良さそうだったので TypeScript で書く場合を試してみた。 コード CodeSandbox 気になる部分 StyledComponent で既存 Component を Wrap…
GatsbyJS を Typescript に移行した際の Type 付け
2020-01-09GatsbyJS で書いているこのブログを Typescript 移行しました。 主に以下の記事を参考に移行しました。なので今回は Type づけに焦点を当てて書きます。 Gatsby.js を完全 TypeScript 化する - Qiita GraphQL Data…