はてなブックマーク

はじめに GritQL を知ったのは去年 Biomeのプラグインに関するRFC に少し目お通した時に、GritQL の提案があったのがきっかけだったと思います。Biome のドキュメントには現在 GritQL [実験的機能] として載っています。そして、少し前のポスト Roadmap 2025 and Biome 2.0 で以下のような記述がありました。 プラグイン 2024年1月に始まったRFCプロセスを経て、Biomeプラグインの開発が始まった。Biome 2.0では、その最初の成果が搭載される： ユーザーはGritQLを使って独自のリントルールを作成できるようになる。 そこで以前 GritQL について軽く調べたんですが完全に忘れているので再度キャッチアップし直してみました。 GritQLとは？ GritQL はソースコードの検索と修正のために設計されたクエリ言語で、ざっと以下のよう

はじめに 下記の素晴らしいGLSLを使ったシェーダーアートのチュートリアル動画の内容をWebGPUでやってみたのでその覚書です。WebGLは以前少しだけ齧ったことがありましたがWebGPUについては完全に知識ゼロなので入門のお題としてやってみた感じです。チュートリアル動画ではShadertoyを使っておりフラグメントシェーダーに記述する部分のみの解説なので、そもそもフラグメントシェーダーを使ってブラウザで描画させるまでの工程も含めてWebGPUで再現してみるという感じです。自分も完全に理解できているわけではないのでおかしい部分があるかもしれませんがご容赦ください。またWebGPUはまだWorking Draft（草案）段階なので今後いろいろと変更される可能性があることにも注意が必要です。 実際に作ったもの リポジトリ codesandbox 実装について ざっくりとした全体の作りとしては四

publicディレクトリなどの不要なファイル等は削除します。 開発するファイルを作成 今回は適当に色付きのコンソールログを作成。 src/lib/cclg/index.ts /** * @property label log text * @property color color of the label * @property bgColor background color of the label * @property value value of the label * @cStyle cStyle style of the label * @type type log type */ type TCclg = { label: string color?: string bgColor?: string value?: string | number | object | n

最初に Mock Service Worker というサービスワーカーを利用したモッキングライブラリがあります。これを使っているときに、ChromeのDevToolsのネットワークタブで通信を確認するとやたらと歯車(gear)アイコンが付いた通信履歴が発生していて気になったのがきっかけでちょっと調べたのでその覚書です。 ※勉強用に使ったリポジトリ: https://github.com/t-shiratori/study-service-worker そもそもWorkerとは ウェブワーカー (Web Worker) とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があり

はじめに Viteでマルチページにするやり方を調べたのでまとめておこうと思います。 実際にやってみたリポジトリ: https://github.com/t-shiratori/vite-multiple-page プロジェクトを作成する 最初の Vite プロジェクトを生成するに従ってプロジェクトを作成します。ここでのテンプレートはvanilla-tsを選択します。作成時点のディレクトリ構成は以下のようになっています。 vite-project ┣ public ┃ ┗ vite.svg ┣ src ┃ ┣ counter.ts ┃ ┣ main.ts ┃ ┣ style.css ┃ ┣ typescript.svg ┃ ┗ vite-env.d.ts ┣ .gitignore ┣ index.html ┣ package.json ┗ tsconfig.json