Node.js で型安全な環境変数を扱うスニペットを作りました。 next devのようなアプリケーションの起動、Playwright でのテストなどコマンドごとに渡したい環境変数のセットが異なるケースがあります。 この場合に環境変数をまとめたものを定義して、それをコマンドごとに読み込むセットを変えたいことがあります。 次のようにベタ書きしてもいいのですが、渡したい環境変数が増えると管理が大変になります。 NEXT_PUBLIC_LOCALHOST_URL=http://localhost:3000 NEXT_PUBLIC_API_URL=http://localhost:3001 NEXT_PUBLIC_IS_TEST_MODE=false FOO="bar" next dev そのため、.envのような環境変数をまとめたファイルを使いたくなります。 Node.js は--env-fil

最近はGoogleではなくKagi Searchをメインの検索エンジンとして使っています。 Kagi Searchは$108/year($10/month)の有料の検索エンジンです。 広告モデルではない検索エンジンなので、有料のサブスクリプションモデルとなっています。 Plan Types | Kagi’s Docs いくつかプランがあり、検索し放題のProfessionalプランが$10/monthです Ultimate Plan ($25/month)だと外部のOpenAIのGPT 4とかClaude 3との連携とかも入ってきます 月に1-2万回ぐらいは検索することを考えると、 (108 / (10000 * 12)) * 150 で大体1検索が0.1円ぐらいのイメージですが、こちらもKagiのLLM機能は利用できるので、実質もう少しコスパは良いと思います。 検索ソースにはGoogle

mytweetsという自分の Twitter/Bluesky の自己ポストの全部検索サービスをNext.js App Router(RSC)で書きなおしました。 mytweets は Twitter のアーカイブや Bluesky の API を使って自分のポストを S3 に保存しておき、 S3 Selectを使って全文検索ができる自分専用の Twilog のようなサービスです。 自分の Tweets をインクリメンタル検索できるサービス作成キット と Tweets をまとめて削除するツールを書いた | Web Scratch 過去の Tweets を全文検索できる mytweets を Bluesky に対応した。自分用 Twilog みたいなもの | Web Scratch 最初は CloudFront + Lambda@Edge + Next.js Pages Router で動かし

個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変

ライブラリやツールなどを作っているときに、特定の機能やパッケージを非推奨にする場合があります。 これらの非推奨はリポジトリ上のREADMEやIssueなどに書いても、利用者が気づかないことがあります。 そのため、利用者が気付けるように非推奨の機能やパッケージを使った場合に警告を出す方法を紹介します。 非推奨にはいくつかの段階があり、それに応じてやり方を変えられるので、それぞれの方法を紹介します。 パッケージの非推奨化: npm deprecate <package> <message> コードレベルの非推奨化: JSDocタグの@deprecated 実行時の非推奨化: process.emitWarning() パッケージの非推奨化: npm deprecate <package> <message> npmのパッケージレベルで、そのパッケージが非推奨であることを通知するにはnpm de

superwhisperという、whisper.cppを使った音声入力ができるmacOSアプリケーションを最近使っています。 基本的にはggerganov/whisper.cppのモデルを使って、音声認識しながら文字入力ができるアプリケーションです。 特徴 Whisperの認識精度が高い かなり早く喋っても認識してくれる 日本語も認識してくれるモデルがある 日本語で喋って英語に翻訳してくれる機能もある オフライン対応 有料: サブスク と 買い切り の2種類のプランがある 無料で15分のトライアル、その後は選べるモデルが制限される 公式サイトのデモをみると、かなり早く喋っても認識してくれるのがわかります。 大抵の人にとっては、多分文字入力するよりしゃべったほうが早いぐらいの入力速度が出ると思います。 superwhisper 長文はそこまで得意じゃないけど、1行とか2行ぐらいの文章はかなり

2023年のオープンソース活動の振り返り記事です。 2023年のオープンソース活動の振り返り記事を書きました！ - textlint/secretlint: 継続的にアップデート - jsprimer: 第二版の改訂出した、Open Collectiveやっていきたい - Notionに色々集約するツール書いてた "今年のオープンソース活動振り返り @ 2023 | Web Scratch"https://t.co/iwUCQfFWiu pic.twitter.com/7qgDjitpQm — azu (@azu_re) December 31, 2023 今までの振り返りの一覧です。 今年のオープンソース活動振り返り @ 2022 | Web Scratch 今年のオープンソース活動振り返り @ 2021 | Web Scratch 今年のオープンソース活動振り返り @ 2020 | W

2023年に得たGitHub Sponsorsの収入1をまとめた記事です。 去年(2022年)の結果については、次の記事でまとめています。 GitHub Sponsorsの収入 @ 2022 | Web Scratch GitHub Sponsorsは、主にオープンソース活動に対して金銭的に支援をする仕組みです。 GitHub Sponsorsは個人と組織への支援がありますが、ここでは自分個人に対するGitHub Sponsorsについてまとめています。 自分(@azu)のGitHub Sponsorsは、次のページに公開されています。 Sponsor @azu on GitHub Sponsors この記事を公開する理由は、オープンソースの活動をする人/オープンソースの活動を支援する人にGitHub Sponsorsなどの金銭的な支援の仕組みに興味を持ってもらうためです。 個人的な考えと

転職する際に空白期間がない場合は会社側で手続きがほとんど終わりますが、一旦無職を挟んで転職する場合は、保険証、年金、iDeCoなどの手続きが必要になります。 今回の転職活動にあたって、 この手続きをするのに市役所やプリンターを使いたくないので、インターネットだけで完結できるかにトライしました。 Open Job Letterを公開しました | Web Scratch 手続きの前提条件 会社や個人によって前提が異なるので、ここでは次の前提で記事を書いています。 会社員: 厚生年金 保険証: ［ITS］関東ITソフトウェア健康保険組合 iDeCo: 個人型確定拠出年金 退職して次の会社が決まってない場合は、保険証や年金などの手続きが必要になります。 保険証: 国民健康保険か任意継続かは好きな方で 今回は任意継続を選択 年金: 厚生年金から国民年金第1号へ切り替える iDeCo: 「加入者被保険

Remixを使って作ったアプリケーションをRemix v2へアップデートした時のメモです。 Remix v2 | Remix マイグレーションガイド: Upgrading to v2 | Remix アプリケーションは Remix + Cloudflare Pages で動かしてるアプリ。 serverBuildTargetの変更 結構前にテンプレートから生成したアプリだったので、それぞれのビルドターゲットの設定方法が変わっている。 V2では、この初期値が結構変わるので、次のページを参考にしてビルドターゲットに合わせたものを設定する。 serverBuildTarget Cloudflare Pages向けのビルドをするので、remix.config.jsに次のように設定する。 この設定はV1でも動くので、まずはこれで動かす。(future.v2_devが有効である必要はあったのかも。忘れ

Google DomainsがSquarespaceに買収されるので、持っているドメインとカスタムドメインのメールアドレスをCloudflare Registrarに移管した。 Cloudflare Registrar · Cloudflare Registrar docs 基本的にはCloudflare Registrarに表示される手順でやっておけば、問題は起きなかったので、よくできてると思った。 次のような手順で順番に移管していたので、移管時のメモ。 手順 Google Domainsの移行準備 Cloudflareのname serverを使うように移行する ドメインの移管 メールの転送設定 Google Domainsの移行準備 移管する前に、Google Domainに登録しているドメインの設定を変更しておく。 それぞれONになってると移管時に問題が発生する。 DNSSECを無

Notionには同期データベースとしてGitHubやJiraなどを同期できるDBがありますが、任意のサービスには対応していません。 もっと色々なサービスと同期するNotionのデータベースが欲しかったので、bluenotiondbというツールを作りました。 azu/bluenotiondb: Sync Bluesky/GitHub/Calendar/RSS to Notion. bluenotiondbは、色々なサービスからデータを取得してそのデータをNotionのデータベースに追加するツールです。 現状では次のサービスに対応しています。 Bluesky Pull Posts from Bluesky and push to Notion GitHub Activity Pull events of GitHub user and push to Notion Open/Close/Com

mubook-hon: Dropboxに保存したepubやPDFを読むビューア、Notionにメモや読んでいる位置を記録できるMobile/PC対応のウェブアプリ mubook-honという読書用のウェブアプリを作りました。 特徴として、Dropboxに保存しているepubやPDFをそのままブラウザで読むことができ、メモやどこまで読んだかをNotionに記録できます。 ウェブサイト: https://mubook-hon.vercel.app/ ソースコード: azu/mubook-hon: epub/PDF reader + Notion Sync + Memo ドキュメント and サンプルデータベース: https://efcl.notion.site/mubook-hon-addce6c324d44d749a73748f92e3a1a6 特徴 Dropboxに保存したepub/PD

Cloudflare Pagesの`{name}.pages.dev`ドメインに自分だけアクセスできるようにアクセス制限をつける手順 Cloudflare Pagesの {name}.pages.dev ドメインに自分だけアクセスできるようにアクセス制限をつける手順です。 アプリケーション側の変更は不要で、Cloudflare Accessの機能を使ってアクセス制御ができます。 カスタムドメイン(Cloudflare DNS)を設定している場合の方法は色々ありますが、デフォルトで用意されている {name}.pages.dev ドメインに対して設定する手順についてです。 この手順がかなりややこしいので、設定方法メモ書きです。 プレビューブランチへのアクセス制御の有効化手順 Cloudflare Pagesでページを作る Settings -> Access policyでEnable ac

Secretlint v7でCommonJS からES Modulesへの移行を行いました。 Secretlint v7.0.0をリリースしました。Pure ESMへの書き直し この記事では、CommonJS(CJS)からES Modules(ESM)への移行を行った経緯と、移行する方法について紹介します。 CJSからESMへの移行は、率直に言えば単調な作業で、メリットが見えにくい作業です。 しかし、将来的にCJSよりもESMが主流になることは間違いないので、移行することは必要です。 移行の作業は、移行方法が決まれば大部分は機械的な書き換えが可能です。 では、実際にどうやって移行したのかを紹介します。 ESMへの移行の影響は依存元へと連鎖する Secretlintのリポジトリはmonorepoになっていて、だいたい40コぐらいのパッケージが含まれています。 そしてパッケージ間で依存関係があ

過去のTweetsを全文検索できるmytweetsをBlueskyに対応した。自分用Twilogみたいなもの 以前TwitterのTwilogの代替えとして、mytweetsというツールキットを作りました。 自分のTweetsをインクリメンタル検索できるサービス作成キット と Tweetsをまとめて削除するツールを書いた | Web Scratch azu/mytweets: Search all your tweets. 今回、mytweetsをBlueskyにも対応させました。 合わせて、Vercelで動くようにしたりとか色々変更したので紹介します。 特徴 TwitterのTwitter archive dataをインポートできます 全部の履歴を取り込めます。 TwitterとBlueskyをサポートしています。 アーカイブからの差分をAPIを使って取得して、常に全部のTweetsをま

JavaScript Primer 改訂2版をリリースしました！/JavaScript Primerはなぜ更新され続けるのか？ JavaScriptの入門書であるJavaScript Primer 改訂2版 迷わないための入門書がリリースされました。 書店やオンライン書店で購入できます。 KADOKAWA: 「JavaScript Primer 改訂2版 迷わないための入門書」azu [ＰＣ・理工科学書] - KADOKAWA Amazon: JavaScript Primer 改訂2版 迷わないための入門書 | azu, Suguru Inatomi |本 | 通販 | Amazon 楽天: 楽天ブックス: JavaScript Primer 改訂2版 迷わないための入門書 - azu - 9784048931106 : 本 ヨドバシ: ヨドバシ.com - JavaScript Pri

niという npm/yarn/pnpm/bun を同じコマンドでインストール/アンストールコマンドを実行できるツールがあります。 antfu/ni: 💡 Use the right package manager 仕組み的には、各パッケージのロックファイルやCorepackで決められたpackageManagerフィールドの値から、どのパッケージマネージャを使うかを判断しています。 たとえば、package-lock.jsonがあるプロジェクトなら npm を使ってるので、niコマンドは npm のコマンドを実行します。 また、packageManagerフィールドがyarn@<version>になっている場合は、niコマンドは yarn コマンドを実行します。 なぜこういうツールが必要になるかというと、npm や yarn などのパッケージマネージャは、それぞれのパッケージマネージャの

TypeScriptの型情報を使って、サポート対象のブラウザが実装してないメソッドの利用をエラーにするESLintルール eslint-plugin-typescript-compatはTypeScriptプロジェクト向けのESLintルールです。 このESLintではサポートしているブラウザが、実装していないメソッドを検知してLintエラーにしてくれます。 JavaScriptではメソッドの静的解析は難しい(メソッド名が同じでも独自実装の可能性があるため)ですが、TypeScriptの型情報を使って静的解析をしています。 サポートしている機能 [ ] JavaScriptのビルトインオブジェクト [x] プロトタイプメソッド Array.prototype.find [x] 静的メソッド Array.from [ ] オブジェクト Promise [ ] DOM API 基本的にメソッド

GitHub のAutomatically generated release notesを使ってリリースノートの内容を PR に基づいて自動生成するフローを作りました。 今までは、コミットメッセージのルールであるConventional Commitsとconventional-github-releaserを使って、コミットからリリースノートを自動生成していました。 他の人の PR でも、squah merge でコミットメッセージを書き換えることで、リリースノートに反映されるようにしていました。 ただ GitHub に仕組みは違うけどほぼ似たことをするAutomatically generated release notesという機能が実装されているので、これをベースに移行しようと思って、そのワークフローを作っていました。 リリースノート自動生成テクニック - mizdra’s bl