TypeScript
みなさん、HonoX はお使いでしょうか？ HonoX は、手軽に SSR（Server-Side Rendering）や Island Architecture を試せる優秀なパッケージです。シンプルな API で現代的な Web アプリケーションを構築できるのが魅力ですね。 Next.js の getStaticPaths と…
前回の記事では、Cloudflare Workers で EXIF/XMP データを取得する方法について解説しました。 tech.natsuneko.blog 今回は PNG ファイルに焦点を当て、iTXt チャンクに埋め込まれたメタデータを取得する方法を紹介します。 まず、 PNG ファイルには任意の…
例えばサーバーレスな環境で、非同期的に画像のメタデータを取得してごにょごにょしたいこと、ありませんか？わたしはあります。 今回は、Cloudflare Workers を使って、画像のメタデータを取得してみようと思います。 まず最初に思いつくのが、Node.js 用画…
hanko.io という ID プロバイダーがある。 Passkey ネイティブ対応で、 Passkey の他に SNS アカウントでの認証 (X はない)、 OTP での認証など様々な認証形式をサポートしている。比較的最近 MFA にも対応していた。 そんな Hanko だが、 Hanko による認証…
React で Three.js を扱うためのライブラリ、 @react-three/fiber で、タイトル通りのことをしたい場合の話。 r3f.docs.pmnd.rs 例えば、画面を4分割して4種類の 3D モデルを同じ角度から比較したい、などと言ったときに使える、複数の Canvas 間で OrbitCon…
Three.js 系列 (three / @react-three/fiber) で、例えば直接サポートされていない圧縮形式のリモートファイルをダウンロードして表示したい、みたいなケースがある。 そういうときは、 ArrayBuffer を経由して以下のようにすると、 3D モデルを上手いこと表…
AWS CDK を使って、 AWS Lambda のコンテナイメージを使用した関数 をデプロイしたのでメモしておく。 まずはプロジェクト初期化： $ pnpm install -g aws-cdk $ cdk init app --language typescript 初期化できたら、 lib/xxx-stack.ts を編集。 以下のよう…
HonoX 0.1.19 で外部でビルドされる （ここでは HonoX によって直接ビルドされるのではなく、 Vite や PostCSS を指す）、CSS の差し込みに対応したので、 TailwindCSS のような PostCSS でビルドされてスタイルが決定されるようなスタイリング手法も使える…
素直に app/ でやれば良いのだが、やんごとなき理由で app/ 以外の、例えば src/ や my-worldest-strong-app/ などで開発したいことがある (かもしれない)。 そういうときにやると良いハック。 PR は送るべきか悩んで放置している。 まずは HonoX にパッチを…
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…
