Cloudflare Workers ではコードと環境変数のアップロード方法が 2 つある: version アップロードするけど、現在のトラフィックに影響を与えない https://hash-worker-name.user-name.workers.dev でアクセスでき…
Fairy (AI エージェント) を作るメモまとめ > 文脈を組む AI エージェントを作るために LLM のコンテキスト と Mastra のメモリを調べる バージョン: @mastra/[email protected] 現状の Fairy…
自作 PC 用に選定したパーツ の購入が完了したので、組み立てに取り掛かりました。 パーツリスト パーツ マニュアル PC ケース MPG GUNGNIR 110R WHITE PDF マザーボード MPG B850 EDGE TI WIFI PDF CP…
Fairy (AI エージェント) を作るメモまとめ > LINE Messaging API を使って Mastra アプリから LINE でリプライを受け取る 我が家の Fairy はまだろくなやり取りが出来ないが、LINE で返事を返すようにして、モチベーションを上げたい…
Fairy (AI エージェント) を作るメモまとめ > Mastra アプリを Cloudflare Workers にデプロイする npx create-mastra@latest で local で動く Mastra アプリは秒で作れた ので、これを Cloudflare…
Fairy (AI エージェント) を作るメモまとめ > Claude のシステムプロンプトを読んでみる 公開されている (!) Claude のシステムプロンプトを読んで、Fairy 用のシステムプロンプトの参考にしようと思います。 https://docs…
お仕事で Pull request のレビューを行うとき、ローカルで実行したりエディターでコードを見たくなること多々あります。 そのとき、一般的には HEAD ブランチを見て、 ローカルで fetch & switch して1、 終わったらブランチを消す という流れになると思…
デスクトップ PC がうんともすんとも言わなくなったので、自作 PC に挑戦してみようと思います。はい。 自作に必要なパーツ おあつらえ向きなページがあったので、これを参考にする (初心者のためのPC組み立て完全ガイド)。 オリジナルPCを作る理由 つまり…
間違いなく 2025年のバズワードの「AI エージェント」をそろそろ勉強しな いと…という衝動に駆られたので、「Fairy の開発(超強気)」を題材にしてお勉強と QOL の両立を図る。 Fairy? ゼンレスゾーンゼロ に登場するAI アシスタント。AI エージェントじゃねーじゃ…
Bluesky の SDK を使ったウェブアプリ (tweet-to-sky) の開発に際して、 Bluesky (正確には AT Protocol) の認証関連の API の詳細を調べることあったので、メモを残しておく。だって API Doc がないんだもん 🥺 認証関連の…
shared-workspace-lockfile について shared-workspace-lockfile は .npmrc で設定できる pnpm のオプションの 1 つ。 shared-workspace-lockfile=true の場合 (デフォ ルトのふるまい…
「Pull request ではこうした方が良い」というふわっとした知識が頭に入っているが、 例によって 誰がそう勧めているの？ 他にはないの？ という点が気になってしまった。 早速長い物に巻かれるために情報収集しつつ、特に長いであろう物の意見を見てみる: GitHub M…
Cloudflare で Web アプリケーションを作ってみたくなりました。 React で開発するときは思考停止で Next.js (または React x Vite) を使っていましたが、 Next.js -> Vercel Remix -> Cloudflare という…
「TypeScript とは (定義)」については以前の拙著 (“TypeScript/JavaScript ができるってつまり何ができるの？”) で腹落ちしましたが、 今度は「型安全性 (type safety)」が気になってきました。 TypeScript…
なんやかんやあって、SNS 毎の AI 学習に対するスタンスを調べたので、規約文などのメモを残す。 X/Twitter 規約 https://x.com/ja/tos お客様は、このライセンスに、当社が（i）お客様によって提供されたテキストやその他の情報を分析し…
「xxx ができる」というアピールに対して実際にどれぐらいできるのか？を見る場合、xxx の塊のまま “できる/できない” を二者択一することはないと思う。 レベル感にはグラデーションがあるはずで、そのグラデーションは 「xxx ができる」の内側の”複数の期待値” によって作られ…
AR アプリ (スマホのカメラで画像を映すと、別の画像が重ね合わせで表示される) を MindAR React three.js で (なんやかんやあって) 作ってみたので、ポイントをメモしておきます。 リポジトリ https://github.com…
Github Actions で シェルスクリプトを書く機会がどんどん増えた結果、「書くときも、読むときも、辛すぎ…」ってなった🥺 処理の流れを把握するためにかなり細かく変数を定義したり、ロジック以外の文法に関する補足までコメントに書きまくることで…
ESLint v8 EOL 目前だからか耳にすることが多くなった https://biomejs.dev/ja/ を https://github.com/TatsuyaYamamoto/app.t28.dev に対して使ってみる。 その前にサポート状況をチェック。 https…
Astro で Markdown コンテンツを static に描画するときの基本的な描画の流れ: Markdown ファイルを コンテンツコレクション で管理する コンテンツを CollectionEntry として読み込む render() で取得した <Content /…
@tanstack/vue-query v4 を使って WebAPI を呼び出す hook を実装していたとき、 WebAPI 用のパラメーター(paramRef)の状態 (string or undefined) に応じて enabled オプションで API…
なんやかんやあって emoji proposal を提出したくなりました。 私が emoji proposal を提出するまで読んだ ガイドラインの詳細 (ただの和訳 or 意訳)や関連文書のメモを残しておきます。 Unicode と Emoji の細かいところは、置いておく。 T…
GW 2024 の自由研究ってことで文化審議会が作成した「公用文作成の考え方」を読みました。 内容・感想のメモを残しておこうと思います。 「公用文作成の考え方」について “「公用文作成の考え方」を読んだのでメモ (基本的な考え方)” を要参照。 この記事で扱う範囲 公用文作成の考…
GW 2024 の自由研究ってことで文化審議会が作成した「公用文作成の考え方」を読みました。 内容・感想のメモを残しておこうと思います。 「公用文作成の考え方」について 「公用文作成の考え方」は府省庁が作成する公用文の書き表し方の原則をまとめたものです。 同じ目的の文書1 が建議…
TypeScript で JSON 文字列をパースする記事は多々あれど、Narrowing で値を読み取る記事がなかったので…。 JavaScript で JSON 文字列をパースする この記事における1「JavaScript で JSON 文字列をパースする」とは、JavaSc…
GitHub Actions の input の制限 GitHub Actions の Custom actions、Reusable workflows において、input の型には制限があります。 Custom actions では string のみ 1 、Reusabl…
Astro 製のブログ (というか、ここ) で Mermaid のダイアグラムを描画したくなりました。 ```mermaid flowchart LR Mermaid --> SVG ``` 👆って書くと 👆ってなりたい。 JavaScript を消したい せっかく…
プライベート/お仕事用のリポジトリで Dependabot を使ってみるか〜ってなったのですが、「色々あるんだね…」ってなったので、1つ1つ調べてみる。 (前置き) 依存関係を定期的に更新したい 今どきの Webアプリは (このブログも) 多くのオープンソースパッケージに依存す…
typescript-eslint v6 QOL を上げる v6 TypeScript に対して ESLint を実行出来るようにする typescript-eslint の v6 がリリースされました 1。 v6 には生活の質を上げる機能が備わっている(本当に書いてある)ような…
Tab に渡す ID を作りたい 「アクセシブルな Tabs を実装するには適切な ID を使用する」と、W3C の ガイド (Example of Tabs with Automatic Activation) が言っています1。 <div> <div role="tabl…
Cloudflare のドメイン移管チェックリスト Squarespace が Google Domains を買収した ので、Google Domains で管理していたドメインをCloudflare Registrar に移管します(しました)。 Cloudflare が ド…
品質とはばらつき (ポエム) 品質とはばらつきなんだよ！ (べらんめえ口調) という、新卒研修の座学での講師の一言が記憶に残っている（若干曖昧だけど)。 この研修は製造業の新卒を対象にしたものなので、ここでの “ばらつき” は「ネジの寸法」や「完成品による出力結果」などの “…
背景 なんやかんやあって「ファイルシステムベースルーティングを Vue + Vite で行う」ことになり、ファイル名・ディレクトリ構造のルールを作りたくなりました。 例えば /hoge という URL パスを定義するとき、以下のように、どちらの方法がベターか迷う…。 src/…
tsup という TypeScript 製のライブラリ向けバンドラーが良さげ〜ってなったので、tsup がやってくれることを調べてみたメモ (v7.1.0 時点)。 tsup? Bundle your TypeScript library with no config…
パッケージマネージャーに関しては パッケージマネージャーを管理するために依存関係を増やしたくない 🥺 nvm でバージョン指定した Node.js に内蔵されている npm を使えばいいじゃん 😘 という考えだったのですが、 pnpm を試しに使ってみると「いいなこれ…
Gatsby(-plugin-mdx) の excerpt Gatsby 製の Markdown 記事の情報を gatsby-plugin-mdx を使って GraphQL から取得するとき、各記事の抜粋文を excerpt プロパティから取得できます。 (“抜粋文” は htt…
最近流行っているから、ブログの Astro 移行に合わせてやってみた。 @vercel/og? ref: “OGP 画像を作る時に @vercel/og を使うか satori を使うか迷ったログ” @vercel/og の中では satori 用の default 値 (…
動的な OGP 画像の出力手段として、@vercel/og と satori をよく聞くようになりましたね。 「自分のブログ (ここ) もこれらを使って OGP 画像を作りたいけど…どっち使おう？」ってなったので、色々調べたことをメモします。 satori? https…
前回のおさらい 前回((Node.js にとっての) ES modules ってなに)少し親しくなった ESM ですが、 新しい機能の印象が(個人的に)まだまだ強いので、 各バージョンのドキュメントの Diff を取って直近の LTS 間の更新を見ることで、 もっと ESM…
俺、 ESM のことを全部知ってる気になってた 「ES modules? TypeScript で書いているぜ 👊😁」ってなってたり、 「ES modules? Vite で使ってる ぜ 🫰😘」ってなる export const addOne = (num: number…
“ECMAScript” の意味をしっかり理解していなかったので、整理しておく。 Ecma International https://www.ecma-international.org/ Ecma International っていう標準化団体がある。 (Ecma…
ESLint の設定ファイルの形式が変わったことに際して、 ESLint は eslintrc や既存のエコシステムとの互換性を確保するために @eslint/eslintrc パッケージを公開しています。 このパッケージ内の FlatCompat クラスで eslintrc…
ESLint の設定ファイルの形式が変わった ので、 flat config で書いた flat cascade が実際どのようにふるまうか実験してみる。 ドキュメントをさら〜っと読む Configuration File ref: https://eslint.org/docs…
ESLint の設定ファイルの形式が変わった ESLint v8.21.0 (#16149) で FlatESLint が実装された FlatESLint は新しい Primary Node.js API を表現するクラスで、このクラスが設定ファイルを “flat…
関連: tsconfig/bases 内の tsconfig.json を (自分が知りたい範囲で) 比較する tsconfig/bases? コミュニティでメンテナンスされている 環境毎のおすすめ tsconfig、及びそのリポジトリ (tsconfig/bases) のこと。…
なにこれ 👊😁「Dynamic import したモジュール (または、その中の値) はいい感じに code-splitting されるだろ」 ✌️😁「ESM で dynamic/static import してるんだからいい感じに tree-shaking もされるだろ」…
tsconfig/bases? コミュニティでメンテナンスされている 環境毎のおすすめ tsconfig、及びそのリポジトリ (tsconfig/bases) のこと。 雑多になりがちな tsconfig.json がスッキリするし…
「年明けから本業で開発チームのマネージャーをすることになったし本でも読んでおくか〜」的なノリで 1 冊読んだので、感想等をメモしておく 選んだ本 「エンジニアリングマネージャーのしごと ―チームが必要とするマネージャーになる方法」 James Stanier 著、吉羽 龍太郎…
先に結論 (私の Next.js のプロジェクトに限っては) こんな感じの next.config.js を定義して、plugin を読み込む const getNextConfig = (phase) => { /** @type {import('next…
前提 この記事は、私が “UIT Meetup vol.17『もっと好きになる Vue.js』” に登壇するに際して事前に調べた情報のメモを(ほぼ)そのまま流用したものです。 いろんな都合で登壇時には言及しない余談(多分)等もそのままの 雑な読み物ですが、参考までにということで…
GA リリースされた CircleCI Config SDK と TypeScript で CircleCI の設定を書いてみた
npm/Yarn どっちでも良いけれど、ちゃんと管理されていて欲しい プライベートでは npm 一択ですが、お仕事環境では「〇〇プロジェクトでは npm、△△ プロジェクトでは Yarn を使ってる。バージョン？分からん。」となることは、まぁあると思います…
Immer で変更を加えたオブジェクトがどのような状態になっているかを確認したくなったので、メモ。 Immutable なんだから変更対象のオブジェクトを直接変更せずに新しいオブジェクトを作って変更するんだよ！って話でもあるし…
「<a> で 新しいタブを開く (target="_blank" を付ける) ときは、noreferrer や noopener を付けようね〜」 という話はよく聞きます1。 ところが「なんで？」と問われると「セキュリティ面で…」と曖昧だったので、理由…
多分。(秒で弱気になる) クリップボードに何かしらの文字をコピーしたい欲が定期的に来るにも関わらず、いっつも調べ回ってるので、これで最後…は無理だけれど当分なしにしたい。 ソースコード (コピペ用) /** * Copy a text to the clipboard. *…
Gatsby用のキャッシュ構成を整理してNetlifyで設定するあれこれに根拠を添えたメモ
Next.js の リポジトリには Google アナリティクス 4（GA4）を使用するための Example が２つあります。 with-google-analytics with-google-tag-manager しかし後述の余談の通り…
Cloud Firestore に新しいドキュメントを追加するときに SDK が自動で作成してくれる ID について調べたメモ。 const colRef = collection(db, "school-idols"); const docRef = await addDoc(…
Firebase Storage にアップロードしたファイルをダウンロードするためのトークン(👇) は、Stack Overflow によると期限切れにならない。 https://firebasestorage.googleapis.com/v0/b/:bucketName/o…
何かしらの Web ページを作成する時に「フォントどーしよー 😇」となるわけです。Web フォントでオシャに決めたくもあるけれど、パフォーマンスが (雑に省略) 。 となると、システムフォントを使って Web コンテンツの描画がしたくなります。 システムフォント？ コンピュー…
前記事の通り、額に関わらず副業の所得があれば確定申告をした方がよい ことが分かりました。 この記事では極力、国税庁のサイト を参照しながら、確定申告について整理していきます。 所得の種類 所得にも色々種類があって、副業による報酬は以下 2 つのどちらかになりそうです。 事業所得…
「副業するなら確定申告しなくちゃ」とか「確定申告は 20 万円以上だっけ？」等なんとなく聞く話ですが、いざ当事者になったら適当に 済ませる訳にも いかないですね 。 極力、国税庁のサイト を参照しながら、副業者が納めないといけない税金を整理します。 税金は自分で申告する 日本では…
“React Hooks の deps にオブジェクトを渡す” の副産物 React Hooks の deps がどのように評価されているか、実装を適当に端折って追う。 React Hooks の deps ってどうやって評価されてるの？ React…
deps について (復習) 関数コンポーネント内では副作用がある処理は useEffect(didUpdate) に書きます。 デフォルトでは didUpdate はレンダー毎に毎回呼び出されますが、パフォーマンスのために副作用が依存している変数を deps として登録して、d…
例によって UIT INSIDE に向けて、 Vue の Web components ビルドについて色々文書化しておく これを書いた時点の Vue3 は v3.2.21 defineCustomElement の概要 Vue v3.2 で追加された defineCusto…
husky v6-v7 の違いを確認して安心 major update! そして闇の世界へ
Node.js の Release Phases/Plan を整理して、正しくLTSを使えるようになる
Web Components を開発するために使用するJavaScriptAPIを整理し、ライブラリの裏側で行われていることを分かった気になるための記事
google/zx の紹介と、zxの機能を活用した自分の使い方の紹介
Vue v3.2 で 提供された defineCustomElementの紹介と課題(子要素のSFCのstyleが適用されない)に対する私の解決策を紹介します。
Next.js の SSG によるビルド成果物を Firebase、GCS にデプロイするためにやっていることの共有
sendBeaconでjson形式のデータを送るtipをMDNのリンクと併せて紹介
vite で "Vue3 + "JSX" + TypeScript のビルド環境を構築するための極小メモ記事
Launch Eventが行われたLit2の背景・新機能・個人的に思う大事なポイントをまとめた記事
Node.js を使用するプロジェクトにおいて、git-hooks を実現するために husky、simple-git-hooks どちらを使うべきか考える記事
Prettier と ESLint を併用する根拠を公式ドキュメントを読みながら(自分が)納得する記事
React v17で提供される 新しいJSX Transformと以前のJSX Transformの違いを知って、pragma, import source optionが行っていることを理解する記事
ESLint と Prettier を組み合わせて使う方法とその根拠(公式ドキュメント)を整理して、安心して長いものに巻かれるようになる記事
Vue.js 内で web componentsを使おうとしたときに発生したwarnを解消するためのTips
新しいサイト用のsitemapを登録するにあたって、役割・仕様をざっくり調べました。
ブログを始めるために行った、Gatsbyのプロジェクト構築のあれこれをまとめました。