あのぞんブログ

TypeScript

React で特定の props を固定した特化コンポーネントを定義する

React で特定の props を固定した特化コンポーネントを定義する方法をいくつかまとめました。 そのまま生の React で書く recompose/defaultProps を使う方法 styled-components を使う方法 DEMO です。 react-set…

アロー関数とfunction それぞれの Type Guard 書き方

この記事では アロー関数で Type Guard について紹介します。 TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript function パターン arrow…

React で URL props が変わったら fade アニメーションで 背景を変える

props で指定された URL が変わったら フェードアウト し、 新しい URL 画像で フェードイン しながら表示するコンポーネントを作りました。 を使います。 デモ コード 呼び出す側のコード DiceBear Avatars…

js で先頭以外(n行目以降)をソートする

js で配列の 2 行目以降のみをソートする方法のメモです。 repl: https://repl.it/@anozon/sortbody#index.ts ソート対象の配列 先頭以外をソートする n 行目以降のみソートする Lodash…

Next.js export 実行時のタイムスタンプをコンポーネントで使う

を実行した時のタイムスタンプをレンダリングしたいときの方法です。 jsx 上で などとするとクライアントサイドでレンダリングされた時間が表示されてしまいます。 SSR 時のデータを React で使いたい場合は NextPage…

React と display grid でメモリ付き定規

メモリ付きの定規、ルーラーコンポーネントのサンプルです。 react-memory-component コード ruler-with-memory - CodeSandbox ミソ ブロック部分とメモリ部分を 0.…

絵文字を含めて文字数カウントするWebアプリ作った

アプリ 絵文字対応 カウントする関数 エスケープ文字の可視化 アプリ 文字頻度カウント(絵文字対応) emoji-count 絵文字対応 では絵文字が 1 文字として分割できません。 を使います。 bestiejs/punycode.js: A robust Punycode…

Python で TypeScript の UnionType を使う

TypeScript の UnionType は以下のように定義できます。 Python の type でも同じようなことができるのか調べました。 ちなみに というのがありますが別です。 typeing.Literal を使う ちなみに get_args…

React で canvas から画像生成する最小コード

この記事では React (と TypeScript で) canvas から画像生成する方法を紹介します。 文字描画や色変更をサンプルに説明していきます。 React で Canvas を使うベースのコード 文字色や背景色を変えるサンプル React で Canvas…

Next.js with TypeScript で最小限の _app.tsx, _document.tsx

この記事では Next.js with TypeScript で最小限の _app.tsx, _document.tsx について紹介します。 Gist: Next.js with typescript minimum pages/_document.tsx, pages…

children を持つ Component を normal function で書くときの型定義

この記事では children を持つ Component を function で書くときの型定義する方法を説明します。 書き方 を使うことで書けます。 Sample PropsWithChildren - CodeSandbox それぞれの書き方 関連 Tips Props…

【Clasp】GoogleAppScript のコードをローカルで開発する

この記事では Clasp を使って GoogleAppScript のコードを手元で管理する方法を紹介します。 Clasp Command Line Interface using clasp | Google Developers 手順…

5層 ReactComponent と TypeScript でカウンター書いてみる

経年劣化に耐える ReactComponent の書き方 - Qiita が良さそうだったので TypeScript で書く場合を試してみた。 コード CodeSandbox 気になる部分 StyledComponent で既存 Component を Wrap…

GatsbyJS を Typescript に移行した際の Type 付け

GatsbyJS で書いているこのブログを Typescript 移行しました。 主に以下の記事を参考に移行しました。なので今回は Type づけに焦点を当てて書きます。 Gatsby.js を完全 TypeScript 化する - Qiita GraphQL Data…

© 2021 あのぞんびより All Rights Reserved