azukiazusa のテックブログ2
TypeScript のような構文で OpenAPI のスキーマを定義する TypeSpec
TypeSepc は TypeScript にインスパイアされた言語で、開発者が親しみやすい構文で OpenAPI のスキーマを定義できます。モデルを使ってデータの構造を定義し、`@route` デコレーターを使って REST API のエ
すべて
azukiazusa のテックブログ2
CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する
いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで z-index の値に `calc(
azukiazusa のテックブログ2
Node.js esm の dirname と filename
commonjs では `__dirname` と `__filename` でファイルのパスを取得できますが ES Modules では使えません。 今まで同等の API が存在していなかったのですが、Node.js v20.11.0
blog.jxck.io
Web 技術年末試験 2023 講評 #web_exam2023
2023 年の Web 技術を振り返る試験として、「Web 技術年末試験 2023」を実施した。その問題と想定解答、平均点などを公開する。
azukiazusa のテックブログ2
Bun でクロスプラットフォームなシェルスクリプト
Bun の `$` を使うと、クロスプラットフォームなシェルスクリプト（Bun Shell）を書くことができます。Bun Shell は macOS (zsh)、Linux (bash)、および Windows (cmd) と OS の違い
azukiazusa のテックブログ2
MSW v2 では Web 標準の Fetch API をサポート
Mock Service Worke（MSW） v2 では Web 標準の Fetch API をサポートしました。
azukiazusa のテックブログ2
Remix の SPA モード
Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の
azukiazusa のテックブログ2
TypeScript で任意の文字列を受け取りつつエディタの補完を効かせる型
すべての文字列を受け入れつつ、特定の文字列のみを補完候補に表示させたい場合があります。例えば、CSS の色を指定するプロパティの値には、カラーコードで指定する `#000000` や `#ffffff` などの文字列を受け入れつつ、`red
azukiazusa のテックブログ2
React でコンポーネントの Props の型を取得する
プリミティブな UI を構築するとき、button や input などの HTML 要素をラップしたコンポーネントを作成することがあります。このようなコンポーネントでは、HTML 要素の Props に加えて、コンポーネント固有の Pro
azukiazusa のテックブログ2
配列をグループ化する Object.groupBy 静的メソッド
Object.groupBy 静的メソッドは、ES2024 で追加された配列をグループ化する関数です。配列の各要素に対してグループ化のキーを指定することで、グループ化されたオブジェクトを返します。
azukiazusa のテックブログ2
TailwindCSS で複数行のテキストを省略するとき
TailwindCSS で長いテキストを省略するときには、`truncate` クラスを使用します。しかし、`truncate` クラスは 1 行のテキストにしか対応していません。
azukiazusa のテックブログ2
tabIndex には 0 と -1 だけを指定する
tabIndex 属性は、フォーカス可能な要素を指定するための属性です。この属性自由な数値を指定できますが、これはアクセシビリティの観点から推奨されていません。
azukiazusa のテックブログ2
Svelte の Props 省略記法
Svelte ではコンポーネントに Props を渡す際に省略記法が使えます。
azukiazusa のテックブログ2
GitHub Copilot Chat の inline chat のキーボードショートカットを無効にする
GitHub Copilot Chat を VSCode で使用していると、エディタ上で ⌘ + i を押すと inline chat が表示されます。しかし、このショートカットはコードの補完を表示するためにも使われていました。このショート
azukiazusa のテックブログ2
details 要素の name 属性による排他的アコーディオン
`details` 要素は、開閉可能なコンテンツをマークアップするための要素です。`details` 要素に新たに `name` 属性が追加され排他的アコーディオンとして利用できるようになりました。
azukiazusa のテックブログ2
GitLens で特定のコミットを除外する
GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。
azukiazusa のテックブログ2
大きさが自動で変わる textarea を CSS だけで実現
テキストの入力量に応じて自動で高さが変わる textarea をよく見かけると思います。Slack や X の入力欄がそうですね。
azukiazusa のテックブログ2
TailwindCSS の data 属性
TailwindCSS v3.2 からは data 属性を使って、条件付きでスタイルを適用できます。
azukiazusa のテックブログ2
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
Pagefind は、静的サイト向けの全文検索エンジンと UI ライブラリです。特定のフレームワークに依存しない JavaScript ライブラリとして実装されており、静的サイトジェネレーターで生成された HTML ファイルに対して検索機能
stin's Blog
2024年の目標
あけましておめでとうございました。すでに 5 日が経過してしまいましたが、2024 年の目標を立てます。 技術ブログを 20 記事以上書く(媒体は問わない) 個人開発アプリを 1 つリリースする 引っ越す 加えて、達成する目標とはちょっと違