t28.dev

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…

AR アプリ (スマホのカメラで画像を映すと、別の画像が重ね合わせで表示される) を MindAR React three.js で (なんやかんやあって) 作ってみたので、ポイントをメモしておきます。 リポジトリ https://github.com…

なんやかんやあって 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のプロジェクト構築のあれこれをまとめました。