Secretlint v8.3で、単体のバイナリファイルとしてsecretlintコマンドを配布するようにしました。Release v8.3.3 · secretlint/secretlintどういうことができるようになるかというか、Node.jsをインストールしなくてもsecretlintコマンドを使えるようになります。次のようにCurlでダウンロードして実行するだけで、機密情報の検出ができるようになります。#!/usr/bin/env bashset -euo pipefailSECRETLINT_VERSION="8.3.3" # secretlintのバージョンARCH=$(uname -m)OS=$(uname -s | tr '[:upper:]' '[:lower:]')# Map architecture to the expected formatcase "$ARCH" in x86_64) ARCH="x64" ;; aarch64) ARCH="arm64" ;; arm64) ARCH="arm64" ;; *) echo "Unsupported architecture: $ARCH" exit 1 ;;esac# Download the binarycurl -sSL "https://github.com/secretlint/secretlint/releases/download/$(SECRETLINT_VERSION)/secretlint-$(SECRETLINT_VERSION)-$(OS)-$(ARCH)" -o secretlintchmod +x ./secretlint# Create .secretlintrc.json./secretlint --init# Run secretlint./secretlint "**/*"SecretlintはDockerも対応していますが、コマンドラインツールの場合は単体のバイナリとして使えると何かと便利です。npm経由と比べて、Node.jsを必要としないのとダウンロードが1つのファイルだけなのでシンプルです。Docker経由に比べて、Dockerを必要としないのと実行までの時間が早いはずです。デメリットとしては、単体のバイナリはルールも同梱しないと配布できないので、

JavaScript Primer v6.0.0をリリースしました 🎉JavaScript Primer v6.0.0では、ECMAScript 2024の対応とNode.jsのユースケースを新たに増えたnode:utilのparseArgs関数やnode:testを使うように書き直しています。JavaScript Primer SponsorsJavaScript Primer(jsprimer)では、Open Collectiveを通じてプロジェクトの更新に関わる資金を募っています。JavaScript Primer - Open Collective今回のv6リリースにおいては、次の方々にご支援いただきました！株式会社コクチョウさんは、Yearly Gold Sponsorとしてご支援いただいています。ご支援ありがとうございます！JavaScript Primerスポンサーについては、次のページを参照してください。JavaScript Primerスポンサー · JavaScript Primer #jsprimerまた、ご支援いただいた資金は、jsprimerにcontributionしてくれた方へ還元できるような仕組みを設計しました。次回からは、この仕組みを回していけるようにしたいです。Contributing Expenses PolicyJavaScript Primer v6.0.0の変更点JavaScript Primer v6.0.0の変更点について紹介します。リリースノートは次のページからも確認できます。Release v6.0.0: ES2024の対応/Node.jsの大幅更新 · asciidwango/js-primer更新をメールで受け取りたい方は、次のフォームから登録できます。JavaScript Primerの更新情報を購読* indicates requiredEmail Address * (function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';}(jQuery));var $mcj = jQuery.noConflict(true);フォームが表示されない人は http...

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-fileフラグで.envファイルを読み込むことができますが、.envファイルは型安全ではありません。--env-fileNode.js — How to read environment variables from Node.js環境変数名の Typoや必須の環境変数が設定されていないなどの問題が発生する可能性があります。そのため環境変数をの定義自体も TypeScript で型安全に定義したいです。これをやるための 50 行ほどのスニペットを書いたので、使い方を紹介します。📝 主な用途はローカルやCIでの開発用で、実際にデプロイするサーバなどには利用しない想定です📝 ライブラリとかにしてないのは、この仕組み自体が外部パッケージの依存もなく短いスニペットだからですJSからTSを参照する都合上、ライブラリにはちょっとしにくい気がしますサンプルリポジトリ次の場所にサンプルリポジトリがあります。azu/type-safe-env: Type Safe /Environment Variables snippet for Node.js使い方大きく分けて、環境変数の型を定義するdefineEnv関数と、環境変数をセットするsetEnv関数があります。環境変数の型を定義するdefineEnv.ts: 環境変数の型を定義する UtilitydefineEnv関数を次のような受け取りたい環境変数の型定義をす...

iOSのSafari、AndroidのChromeはそれぞれPCと連携してウェブアプリケーションをデバッグできます。PCのSafariのWeb Inspector、ChromeのDevToolsと連携すれば、コンソールログやネットワーク、デバッガーなども利用できます。スマホと繋いでWebサイトをデバッグする方法をまとめたページが見つけられなかったので、メモです。ネットワークで繋いでデバッグもできたりするので、結構便利です。Mobile Safari on iOSiOSのSafariは、macOSのSafariと接続してログやネットワークの通信などを見るデバッグが可能ですドキュメント: Inspecting iOS and iPadOS | Apple Developer DocumentationiOSのSafariとmacOSのSafariを接続する初回は次の設定が必要ですiOS設定アプリを開くSafari の設定を開く詳細を開くWebインスペクタ をONにするmacOSSafariの設定を開く詳細タブを開くWebデベロッパ用の機能を表示にチェックを入れるiOSのSafariとmacOSを接続してWeb Inspectorを表示するiPhoneとmacをUSBで接続します初回はデバイスを信頼しますか? というダイアログが出てきますiOSのSafariでデバッグしたいページを開くmacOSのSafariの開発メニューから、Safariで開いているページを選択するこれでmacOSのWeb InspectでiOSのSafariのデバッグでできます。📝 初回はUSBで接続する必要があります。ネットワークで接続したい場合は、”ネットワーク経由で接続”にチェックを入れてみてください。(すでに入ってる場合は、一度外してから入れ直すなどすると、つながると思います。)同じネットワークにいる場合は、USBを接続しなくても、iOSで開いているページをmacOSでデバッグできるようになります。端末やタブが出てこない場合は、iOSのSafariを一回閉じたりすると出てくることがあります。コンソールログを取る方法Web Inspectorのコンソールタブを開く選択した項目をコピー または 選択部分を保存 でログをコピーできますネットワークログを取る方法Web Inspectorのネットワー...

JavaScript PrimerのES2024の対応を進めていく予定なので、対応を手伝ってくれるContributorとjsprimerというプロジェクトを支援してくれるSponsorを募集しています。追記(2024-03-22): Contributorを希望する方は集まりました。ありがとうございます！JavaScript Primerスポンサーは引き続き募集しています！Gold SponsorsSupporters3行サマリーES2024の対応を6月末までにやるマイルストーンを切りましたES2024の対応を手伝ってくれるContributorを募集していますOpen Collectiveを始めたので、プロジェクトを支援してくれるSponsorを募集していますjsprimerのES2024対応jsprimerは毎年のECMAScriptの仕様改定にあわせてメジャーアップデートを行なっています。次の更新は、2024年6月末ごろにリリースされる予定のECMAScript 2024に対応する予定です。そのため、ES2024の対応とユースケースであるNode.jsに関するアップデートをしていくマイルストーンを切りました。v6(ES2024) MilestoneES2024に対応するマイルストーンをざっとみると、大体ざっくり12-20日分ぐらいのタスクがあります。大きく分けて次の3つのグループに分かれています。ES2024の対応Stage 2.7の追加Node.jsのユースケースの更新ES2024の対応ES2024ではいくつか機能が増えているので、それに対応するアップデートを行います。ECMAScript 2024の対応 · Issue #1706というIssueに、ES2024の対応についてのタスクをまとめています。具体的に対応したいIssueは次の3つになっています。ES2024: array-grouping · Issue #1716ES2024: Well-Formed Unicode Strings · Issue #1715ES2022: Error Cause · Issue #1714Array Groupingは恐らく対応が必須ですが、他の2つは必要なら対応する形になると思います。実際に内容や入れる場所を考えてみて、それが読む人にとってほんとに必要な情

最近は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, Yandex, Mojeek, Braveなどのリソースを使っているので、検索結果自体はGoogleとそこまで変わらないと思います。Search Sources | Kagi’s Docs基本的な使い方ではGoogleで見つかったものがKagiで見つからなかったという経験はありません。もちろん、検索の量でGoogleより優れたものはないと思うので、量にフォーカスしたいときはGoogleを使えば良いと思います(逆に今は飽和的になって検索が逆に難しかったり、検索されてないところにコンテンツがあったりして、量でのカバーは難しい感じはします)自分がKagiを使う一番理由は検索体験にあると思っています。いいところGoogleより良いと感じる検索結果が出しやすい(人による)日本語の検索結果はそこまで変わらない感じもする(後述する漢字だけ検索した時の問題はまだある)フィルター系がビルトインであるので、絞り込みはしやすく感じる英語で検索した時に英語のリソースにマッチさせやすいので良い結果と感じることが多いたとえば、Googleだと英語で検索して”英語のページを検索”を選択にしても、日本語のサイトが出てくる(おそらくRegionが日本だと、日本語訳があったらそっちを出すみたいな感じになったりして、これが嫌なこと多い)https://www.google.com/search?q=javascript&lr=l

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 で動かしていました。その後、Next.js App Router が Stable になったので、App Router + React Server Components(RSC)で書きなおしました。この記事では、Next.js Pages Router から Next.js App Router(RSC)に書きなおした話を紹介します。ただし、この記事は発散的な内容になっているのと、あまり正確性が保証されてないので、個人的なメモ書きとして読んでください。あまりにも長くなったので、あんまり読みやすくは書けませんでした。📝 キャッシュとメモ化については特に触れていません。mytweets の動作mytweets は、次のような動作をします。クエリがない場合は、S3 Select から最新のポストを取得して表示クエリを入力したら、S3 Select の API を使って全文検索を行い、結果を表示この動画は、App Router + React Server Components(RSC)で動かしてるものを録画したものです。表示的にファーストビューが出てからローディングが走って、結果を取得してポストを表示するという動作をしているので一般的なSPA (Single-page application)っぽく見えます。実際のコードベース上では、クライアント側には Fetch API などは書いていません。初期化...

個人的なJavaScriptの情報収集の方法についてまとめてみます。JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。JSer.infoの範囲の中での情報源については、次の記事でまとめています。JSer.info 13周年: JavaScriptの情報源を整理する - JSer.infoこの記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。情報収集の方法情報の元となる情報源はさまざまなサイトや人になると思います。しかし、そのサイトや人ごとに見ていくというのはかなり大変で、それ自体が大変になると見なくなる可能性が高いと思います。そのため、情報収集においては、情報を自分が見やすいと思える場所に集めることが重要だと考えています。人によってこの集める場所は異なりため、Twitter(X)、RSSリーダー、Notion、SlackやDiscordなど色々な場所があると思います。自分の場合はRSSリーダーに情報が集まるようにしています。RSSリーダー技術的なサイトにはRSSフィードがついてることが多いので、自分はRSSリーダーにRSSフィードを集約しています。また、後述しますがRSSフィードがないものも、欲しい情報源からRSSフィードを作るなどとしてRSSリーダーに集約しています。RSSリーダーにはInoreaderを利用しています。InoreaderのフロントエンドとしてIrodrを使っています。LDRライクなRSSリーダのIrodr 1.0.0をリリースした | Web ScratchかつてのLDRと同じ操作方法を実現、新しい国産RSSリーダー「Irodr」が登場【やじうまWatch】 - INTERNET Watch自分の情報収集はメモまでがセットなので、RSSは基本的にPCでしか見ていません。スマホで見つけたものに関しては、Pocketにあとで読む登録して、PocketのRSSフィードを購読しているので、それをPCで見るようにしています。（最近音声メモも結構やり始め

先週のtextlint weekに引き続き、今週はjsprimerの開発に集中するjsprimer weekです。目標としては、次のECMAScript仕様であるES2024に入るProposalが今週のTC39ミーティングで確定するので、それに合わせてjsprimerをどう更新するかを決めることです。ECMAScript 2024の対応 · Issue #1706 · asciidwango/js-primerES2024の変更はそこまで大きなものはこなさそうなので大丈夫そうですが、Node.jsの変更が多くなってるのでNode.jsでCLIアプリ · JavaScript Primer #jsprimerをどうするかをちょっと考えたいです。markedjs v8へのアップデート · Issue #1694 · asciidwango/js-primerutils.parseArgsの利用法を追記 · Issue #1698 · asciidwango/js-primerまた、企業でjsprimerの更新を支援できる仕組みとしてJavaScript Primer - Open Collectiveを作ってありますが、まだちゃんと運用できてないので、運用できるようにしたいです。Open Source Collective · Issue #1674 · asciidwango/js-primerOpen Collectiveの資金を使って、jsprimerの更新を手伝ってくれた方にもちゃんと労力にあった報酬を支払えるようにしたいです。jsprimerの更新に興味があるって人は、それとなくコメントしてくれると嬉しいです。ECMAScript 2024の対応 · Issue #1706 · asciidwango/js-primerECMAScriptに合わせた更新は毎年やっているので、どういうことをやってるかは次のIssueを見るとイメージできると思います。今年は、Array.groupByの更新ぐらいな気はしているので、そこまで大きな変更はないと思います。どちらかというとNode.jsに関する更新は、どう変えると読みやすいかは考える必要がありそうです。ECMAScript 2023の対応 · Issue #1658 · asciidwango/js-primerEC

ライブラリやツールなどを作っているときに、特定の機能やパッケージを非推奨にする場合があります。これらの非推奨はリポジトリ上のREADMEやIssueなどに書いても、利用者が気づかないことがあります。そのため、利用者が気付けるように非推奨の機能やパッケージを使った場合に警告を出す方法を紹介します。非推奨にはいくつかの段階があり、それに応じてやり方を変えられるので、それぞれの方法を紹介します。パッケージの非推奨化: npm deprecate <package> <message>コードレベルの非推奨化: JSDocタグの@deprecated実行時の非推奨化: process.emitWarning()パッケージの非推奨化: npm deprecate <package> <message>npmのパッケージレベルで、そのパッケージが非推奨であることを通知するにはnpm deprecateコマンドを使います。npm-deprecatenpm deprecate <package> <message><package>には非推奨にするパッケージ名を指定します。<message>には非推奨にする理由を書きます。@azu/test-packageパッケージを非推奨にする場合は次のようにします。npm deprecate @azu/test-package "@azu/test-package is deprecated. use new-someting instead." 非推奨とするパッケージのバージョンを指定することもできます。npm deprecate @azu/[email protected] "@azu/[email protected] is deprecated. use new-someting instead." npm deprecateコマンドで非推奨にしたパッケージは、インストールしようとしたときに警告が表示されます。$ npm install @azu/test-packagenpm WARN deprecated @azu/[email protected]: @azu/test-package is deprecated. use new-someting instead.added 1 package in 1sまた、npmのウェブサイト上