TypeScript
みなさん自作プログラミング言語作っていますか？わたしは音楽を作りたかったのですが、 DAW 操作が苦手すぎて訳わからんので、音を鳴らせる言語を自作しました。 こんな感じでそれらしい音がそれらしいテンポでなるのですが、 song "Example" { tempo 160bp…
趣味で iOS アプリを作っているのですが、今回、 Firebase Cloud Messaging でのリモートプッシュ通知に対応したので、対応方法を紹介します。 今回リモートプッシュ通知に APNs にダイレクトに通知を行うのではなく、 Firebase Cloud Messaging を使った理…
TypeScript には、 Template Literal Types というものがあり、例えば、以下のような型を表現することが出来ます。 type Pixel = `${number}px`; const a: Pixel = "14px"; // valid const b: Pixel = "20pt"; // invalid TypeScript Playground これで、色…
みなさん Git LFS を使用していますか？ わたしは VRChat のアバタープロジェクトをまるまる GitHub へあげているついでに、 Git LFS で 3D モデルやテクスチャーも状態を保存しています。 そこで困るのが、 GitHub のストレージ課金です。 50GB で 60USD/ye…
.env みたいなのをいっぱい作りたくなかったり、良い感じにしたいので、 1Password に管理を任せてしまおう、という記事。 1Password には、開発者向けのツールとして、 1Password CLI が提供されています。 その CLI の機能に、環境変数を定義した .env を…
JavaScript で、例えば以下のようなオブジェクトがあったとして、 const obj = { a: false, b: undefined, c: 0, d: "", }; value が undefined なキー、つまりは今回の場合は b を除いた、以下のようなオブジェクトが欲しいケースがある。 const obj = { a:…
例えばサーバーレスな環境で、非同期的に画像のメタデータを取得してごにょごにょしたいこと、ありませんか？わたしはあります。 今回は、Cloudflare Workers を使って、画像のメタデータを取得してみようと思います。 まず最初に思いつくのが、Node.js 用画…
以前の記事で、 Vercel から OpenTelemetry のトレースを Mackerel へ送信した記事を書きました。 tech.natsuneko.blog 今回は、プラットフォームを変え Cloudflare Workers から Mackerel へ OpenTelemetry のトレースを送ってみようと思います。 まず、 Cl…
Mackerel にて、ログ機能がオープンベータになりました。 mackerel.io 今回は、 Next.js + Vercel 、それに加えてロガーとして Pino を使っている状態でスムーズに Mackerel にログを送信する方法を紹介します。 前提： Next.js 16 Pino 9 (※最新ではない) …
下のような型をもつ変数 obj が提供されていて、 これが number なのか number[] なのかを区別したいとき。 type Value<T> = T | readonly T[] | undefined | null; declare const obj: Value<number>; こういう文法が使えるのを必要がなかったので知らなかったのだけど</number></t>…
ここ最近は Unity の記事ばかりでしたが、今回は Node.js のお話と言うことで、最近お気に入りのライブラリー、 contentlayer について紹介します。 contentlayer は名前の通り、 Next.js などのコンテンツ周りを良い感じに取得してくれたり、コンパイルして…
Web サービスリニューアルしたいことってありますよね？ ただ、一度に一気にリニューアルすると、想定していない不具合が出てきたり、今の運用どうするの？っていう問題があったりします。 そこで、 Cloudflare Workers を使って段階的に移行する方法を紹介…
hanko.io という ID プロバイダーがある。 Passkey ネイティブ対応で、 Passkey の他に SNS アカウントでの認証 (X はない)、 OTP での認証など様々な認証形式をサポートしている。比較的最近 MFA にも対応していた。 そんな Hanko だが、 Hanko による認証…
React Native で、入力フィールドを画面下部、具体的には半分より下くらいに設置すると、入力ボックスにフォーカスした場合、ソフトウェアキーボードに入力ボックスの一部が隠されてしまうケースがあります。 こんなフォームがあったとして 入力フィールドに…
Twitter アプリなどでよく見かける、アクティブなタブを再度タップしたら、リストビューの最上部へ移動する......といった挙動を React Native で実装したい！というときのやり方。 タブナビゲーションに React Nativation / Expo Router を使っている場合は…
Cloudflare Workers で GraphQL バックエンドを構築する際、最初はサンプルなどから簡単に始められますが、実際の開発では「スキーマをコード内に書きたくない」「型安全性が欲しい」といった課題に直面します。 この記事では、Cloudflare Workers の制約の…
みなさん、HonoX はお使いでしょうか？ HonoX は、手軽に SSR（Server-Side Rendering）や Island Architecture を試せる優秀なパッケージです。シンプルな API で現代的な Web アプリケーションを構築できるのが魅力ですね。 Next.js の getStaticPaths と…
前回の記事では、Cloudflare Workers で EXIF/XMP データを取得する方法について解説しました。 tech.natsuneko.blog 今回は PNG ファイルに焦点を当て、iTXt チャンクに埋め込まれたメタデータを取得する方法を紹介します。 まず、 PNG ファイルには任意の…
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 回くらい、なぜか書くタイミングがありま…
海外の大手 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, () =>…
