pnpm 使って特定の tsconfig.json (Vite のデフォルトの tsconfig.json など) を参照した状態で tsc を走らせると、型エラーが出ることがある。 下記は、その例： The inferred type of 'default' cannot be named without a reference to '.pnpm/vite@5.0.1…

この記事ははてなエンジニア Advent Calendar 2023 の 12 月 37 日......もとい 2024 年 1 月 6 日の記事です。 みなさんは Google Chrome 拡張機能や Firefox のアドオンは書いたことありますか？わたしは 2 年に 1 回くらい、なぜか書くタイミングがありま…

Web サービスリニューアルしたいことってありますよね？ ただ、一度に一気にリニューアルすると、想定していない不具合が出てきたり、今の運用どうするの？っていう問題があったりします。 そこで、 Cloudflare Workers を使って段階的に移行する方法を紹介…

海外の大手 CMS に Contentful があるんですが、 API ドキュメントがびみょーに分かりにくいのでメモ。 例えば、ある Entry に対してデータを作成したい場合、こんな感じでリクエストを投げてね、とあります。 import { createClient, Environment } from "c…

React で children で渡ってきた子コンポーネントのうち、テキスト部分だけ取り出したいこと、ありますよね？ そういうときに便利なのが React Children Utilities です。 こんな感じで使えます。 import Children from "react-children-utilities"; type Pr…

いまさら JavaScript なんて書けるか！ということで、 Contentful JavaScript SDK を TypeScript で使います。 まずはライブラリのインストール： $ pnpm add contentful いれたあと、以下のようにライブラリを定義すると良い。 import contentful from "con…

最近ゼロランタイム CSS-in-JS を触っていることがあるのですが、今回はラクスさんのブログで紹介していた macaron についての記事です。 macaron は、 styled-components などの CSS-in-JS とは異なり、ビルド時に静的な CSS を吐き出すいわゆるゼロランタ…

React で、子コンポーネントの関数を何らかの理由で呼び出したい場合、 useImperativeHandle を使います。 import React, { useImperativeHandle } from "react"; const SomeComponent = React.forwardRef((props, ref) => { useImperativeHandle(ref, () =>…

公式ドキュメントにちらっと書いてはいるけど、 script setup を使っていても、 named export したい！ ということでやり方。 <script lang="ts" setup> type Colors = (typeof COLORS)[number]; type Props = { color: Colors; }; defineProps<Props>(); </script> <script lang="ts"> const COLORS = ["red", "…

趣味で取りました。 サイト構成としては以下の通り： Next.js TailwindCSS Vercel 基本キャッシュは Vercel がうまいことやってくれているので、 Next.js だけパフォーマンスなり変えていく感じになります。 で、やったこととしては以下の通り。 lang=ja の…

JavaScript で、例えば以下のようなオブジェクトがあったとして、 const obj = { a: false, b: undefined, c: 0, d: "", }; value が undefined なキー、つまりは今回の場合は b を除いた、以下のようなオブジェクトが欲しいケースがある。 const obj = { a:…

Next.js とか使ってると、 tsconfig.json を良い感じに設定してくれてて、実質ルートディレクトリからの相対パスでモジュールをインポートできて便利です。 ただ、 ts-node で実行しようとするとコケるので、コケないようにするやり方。 といっても方法は簡…

.env みたいなのをいっぱい作りたくなかったり、良い感じにしたいので、 1Password に管理を任せてしまおう、という記事。 1Password には、開発者向けのツールとして、 1Password CLI が提供されています。 その CLI の機能に、環境変数を定義した .env を…

TypeScript を直接実行できる ts-node 便利ですよね。 ところで、最近 (ってほどでもないですが) Node.js 界隈 ESM へ移行する流れがあります。 Node.js 界隈で多くの OSS をリリースしておられる Sindre さんのパッケージも、多くが ESM Native になってお…

@ant-design/plots という、統計情報みたいなグラフを表示するための Alibaba グループの出しているライブラリがあります。 これは様々なカスタマイズができていろいろ便利なのですが、なにせドキュメントが英文化されていないのに加えて抜けがあるみたいな…

TypeScript には、 Template Literal Types というものがあり、例えば、以下のような型を表現することが出来ます。 type Pixel = `${number}px`; const a: Pixel = "14px"; // valid const b: Pixel = "20pt"; // invalid TypeScript Playground これで、色…

React Hooks でフォームデータ (multipart/form-data)を POST したいけど、いまいち参考例がなかったので、作ってみたというメモ。 といってもやり方は普通に useSWR や useFetch とかと同じ感じかな。 React Hooks 自体はこんな感じ import axios from "axi…

React Hooks でデータフェッチングをするライブラリである SWR ですが、アプリケーションを通して 1 度だけ fetch したい、みたいな時もあると思います。 そのときの解決方法。 といっても、仕組みはすでに (v1.0 から) 用意されていて、以下にようにするだ…

個人的に最近よく使っている React のステート管理ライブラリである Recoil と、外部ストレージ (DB や URL) などとステートを同期するライブラリ Recoil Sync を使って、 LocalStorage にデータを保存しようという記事です。 ということで、いつも通り準備…

例えば、下のようなコードが合った場合、 jest の toEqual を使うと、確率で落ちます。 const arr = []; const mockDbInsert = (elem: number) => { return new Resolve((resolve) => { setTimeout(() => { arr.push(elem); }, Math.random() * 10); }); }; …

ブログの一部分をはてな記法に対応させてみました。 こんな感じの記述をすることで、 URL を展開してくれた便利機能のことです。 https://www.youtube.com/watch?v=dPX0_IEXVRo:embed リンクだとこんな感じ https://www.youtube.com/watch?v=dPX0_IEXVRo:tit…

JavaScript / TypeScript の高速な Rust 実装コンパイラーである SWC ですが、特定バージョン以前だとデコレーター・クラス周りの処理があるらしく、 デコレーター・クラス周りの処理をバリバリ使っている class-transformer を使用していると、以下のような…

みなさん Git LFS を使用していますか？ わたしは VRChat のアバタープロジェクトをまるまる GitHub へあげているついでに、 Git LFS で 3D モデルやテクスチャーも状態を保存しています。 そこで困るのが、 GitHub のストレージ課金です。 50GB で 60USD/ye…

クラスやらオブジェクトのメンバーがすべて undefined かどうか調べたいときは以下のコードで出来る。 const obj = { a: undefined, b: undefined, c: undefined, }; const obj1 = { ...obj }; const obj2 = { ...obj, d: null }; const checkAllMembersAreU…

Git LFS のプロキシサーバーを Vercel に投げつけたんですが、そのとき req.body が undefined だったので、その対処法としての方法を紹介します。 Express (Vercel) を使ってる場合、 app.use(express.json()) で JSON に対応できるようになっています。 し…

ここ最近は Unity の記事ばかりでしたが、今回は Node.js のお話と言うことで、最近お気に入りのライブラリー、 contentlayer について紹介します。 contentlayer は名前の通り、 Next.js などのコンテンツ周りを良い感じに取得してくれたり、コンパイルして…

このブログは互換性重視なので、極力通常の Markdown を書いているのですが、例えばドキュメントサイトとかだと、 React Component を扱えると便利なケースがあります。 よくあるパターンだと、タブとかそういうものですね。 ということで、 Next.js で MDX …

このブログでは react-syntax-highlighter を使っているのですが、下のような形式の場合 ```javascript:next.config.js module.exports = { } ``` つまりは、言語名の後に :filename という形で指定された場合、ファイル名として表示する実装をしています。 …

下のような型をもつ変数 obj が提供されていて、 これが number なのか number[] なのかを区別したいとき。 type Value<T> = T | readonly T[] | undefined | null; declare const obj: Value<number>; こういう文法が使えるのを必要がなかったので知らなかったのだけど</number></t>…

TypeScript の tsconfig.json に paths という機能があります。 簡単に言うと、以下のようなことが出来る機能です。 // paths を使わない import SomeModule from "../../Baz"; // paths を使う import SomeModule from "@/components/Baz" ただし、この機能…