OxCというRust製のJavaScriptコンパイラを使っているLinter, Formatterがそれぞれoxlint, oxfmtです. 今回この記事ではESLintからoxlintへの移行を試してみます.Rust製のコンパイラということで他のJavaScriptプラグインに比べてコードのastの変換やastの解析が早く, 処理がすぐ終わるのが売りっぽいです. ということで, 既存のESLint, Prettierを置き換えていきます.https://oxc.rs/docs/guide/introduction.htmlLinterの章を見ると, 大規模プロジェクトでは置き換...

CSSにおけるmaskというプロパティによってデザインを実装可能にしてくれたケースが3つありましたので、私見をしたためていきます。既にCSSのmaskプロパティについてご存知の方はmaskが可能にしてくれるデザインパターンへマスクという行為およびCSSのmaskについてこれから知りたい方は前提知識へ 前提知識 そもそも「マスク」とは左の画像を、星の形にくり抜きたい。そのくり抜く行為を、この記事内では「マスク」と呼びます。※くり抜く行為はクリッピングであり、それを用いてマスクを行うのであればクリッピングマスクなのではないかというもっともな主張があると思いますが、CSSのプロ...

気になる技術を色々使って Web アプリを作っています変化の早い Web 技術、新技術や新機能を試す前に次の更新が出てしまいそう...なので、「いっそフルスタックで何か作ったら新しい技術に触る機会ができるのでは？」 と考えました。 題材：「この技術が好きな人は、この技術も好き」が分析できる Web 技術アンケートサイト個人開発で似た概念のものを作ったのですが、社内で Web 技術についてアンケートや分析をしたいというモチベーションがあるので、題材として丁度良さそうです。State of JavaScript など既に類似するものはありますが、上記の様な関係性の分析はどうやら...

記事の内容前回、Shadow DOMでIslands Architectureっぽく(CSS編)という記事を記載しました。今回はShadow DOMにある複数のアプリ間での共有したい状態の管理方法について記載します。 動作環境簡単なカウンターアプリを作ってみました。https://igara.github.io/multi-fw-demo/nextjs/multi_counter.html今回のアプリも前回と同様でNext.jsのSSGしたページをGitHub Pagesに公開し、ページ内にNext.js、Shadow DOM上にReactとVue2が動作しています。...

記事のモチベ定期的に、既存アプリケーションのリプレースの効率や、既存を残しつつ新規のアプリケーションを導入しやすい方法を考えることがあります。直近Vue2のプロジェクトをReactに変える相談があって今年度例の定期入ったかというモチベでこの記事を書いてます。前の定期時にはマイクロフロントエンドと向きあってみるというのをアウトプットしてたりしました。 記事の内容Shadow DOMの特性を使って、既存アプリケーションに対し、異なるWebフロントエンドの実装を入れてみたというものになります。既存のアプリケーションとShadow DOM内のCSSのスコープが分離できるため、Ta...

はじめに昨今、フルスタックフレームワークが浸透し、バックエンドとフロントエンドで型やコードを共有することは、モダンな技術を追い求める開発者にとって受け入れられつつあります。しかし、我々の前に立ちはだかるのはサーバーとクライアントの境界です。サーバー側の処理をまるで関数のように呼び出せたとしても、ネットワークを超える必要があるというウェブの基本的な構造は変わりません。送受信されるデータはシリアライズ可能でなければならず、開発者たちはSuperJSONなどのライブラリを用いてこの制約に対処してきました。本記事では、Effectを用いてこの境界を乗り越える方法を探ります。 Effe...

記事の内容としてデザインシステムなどがあり、色などのデザイントークンぐらいしか変わらない場合がある今回はshadcn/uiによる複数テーマがある場合、実装側でもStorybook上でテーマを切り替えて確認したい場合の対応例になるCSSのカスタムプロパティでテーマを変えるものであれば他でも応用できるものになっているStorybook上のメニューよりCSSを書き換えてStory上の色を確認できるように実装してみたとはいってもほぼAI実装 解説 動作環境Storybook 使用しているテーマについてshadcn/uiの公式にあるテーマのCSS内容をそのまま使用...

はじめにgrep では「try-catch がない async 関数」のような構造的な条件を表現できませんが、ast-grep/claude-skill を導入すると Claude が YAML ルールを生成し、1回のコマンドで条件に合致するコードを抽出できます。こんな時におすすめです：「〇〇がない関数」のような否定条件で検索したい関数やクラスなどコードの構造単位で検索したいgrep では表現が難しい複合条件で検索したい本記事では、ast-grep/claude-skill を導入して検証した結果を紹介します。 前提条件ast-grep がインストールされて...

はじめにアニメや映画など「作品」を検索するときに、以下のようなことで困ったことはないですか？昔見た作品をもう一度見たいけどタイトルを覚えていない好きなジャンルで検索しても見たいと思うものがなかなか見つからない例えば、「昔見たアニメで、主人公が料理を通じて人と繋がっていく話」をGoogleで検索しようとしても、なかなかその作品をピンポイントで見つけることは難しいです。「同じ感じの作品が見たい！」と思って同ジャンルで調べても「あれ、なんか思った内容と違う」となることが結構多いと思います。 類似検索なら、自分の言葉で探せるもし「心温まる家族の絆を描いた作品」と検索する...

個人開発は楽しいですが、ゼロからすべて作ると週末だけではなかなか終わりません。今回は、UI生成AI「v0」と「Claude Code」などを活用し、従来なら2日では終わらなかった開発を土日だけでリリースできた工程を紹介します。このアプリの約9割はLLM（コーディングエージェント）による実装です。人は仕様や品質ルールを考え、実装はAIに任せる――そんな進め方で短期間リリースを実現しました。作ったのはこちらhttps://www.shimizu-okini.com/この記事では、使ったツールのセットアップから完成までの流れをまとめます。また、コードやプロンプトの詳細より「どう進...

軽量でfetch準拠でOpenAPI由来の型推論・補完がそのまま効くopenapi-fetchを使ってみました パッケージインストールnpm install openapi-fetchnpm install -D openapi-typescript 1) OpenAPIを公開（今回はHonoを使用)/doc でスキーマを返す。import { OpenAPIHono } from '@hono/zod-openapi'export const app = new OpenAPIHono()app.doc('/doc', { openapi: '3.1.0'...

Reactでは、JSXを返す関数を組み合わせてアプリケーションを作っていきます。それらの関数は<Component />のように呼び出すこともあれば、Component()のように呼び出すこともあります。後者を使用する機会は多くないかもしれませんが、例えばrender hooksパターンによってカスタムフックからUIを返したいときに使われることがあります。一見どちらも同じようにJSXを返しますが、Reactはそれらをまったく異なるものとして扱います。この投稿では、2つの呼び出し方の違いと、それによって挙動がどう変わるのかを見ていきます。 「コンポーネント呼び出し」と「...

SSGOIとはSSGOI（スゴイ）はウェブでネイティブアプリのようなページトランジションを実装することができるアニメーションライブラリです。2025年10月現在はReact・Svelte・Vueに対応しており、Next.jsなどのフレームワークにも互換性があります。ブラウザ標準のView Transition APIに依存しない独自の実装となっており、すべてのモダンブラウザへの対応を謳っていることも特徴の一つです。https://ssgoi.dev/en Next.jsでネイティブアプリのような画面遷移を再現してみる公式ドキュメントを参考に実際に触って試してみます。今...

Next.jsのドキュメントやQiitaなどでは、URLの末尾に .md を付けるとページ内容を生のMarkdownで取得できます。AIエージェントにコンテキストを渡したり、別クライアントから取り込んだりするのに便利なパターンです。この記事では Rewrites + Route Handlers（App Router） で、/post/hello はHTML、/post/hello.md は text/markdown を返す“二刀流配信”を実装します。 前提Next.js 16.0.0 (App Router)React 19.2.0Markdownでコンテンツを管理して...

ある日、Vercelのダッシュボードを見ると以前はだいたい100KB前後だったページのレスポンスサイズが500KB前後に増えてしまっていました。原因はサーバコンポーネントからクライアントコンポーネントに渡すpropsが巨大だったことでした。SCからCCに渡したpropsはRSCペイロードという形で初回レスポンスのHTMLに含まれるためです。分かってしまえば単純なことなのですが、当時Next.jsのバージョンアップなどの改修も同時に行なっていたために原因調査に手こずりました。そんなわけで、レスポンスサイズが5倍になったときの調査に役に立つかもしれない（？）RSCペイロードの覗き方を...

背景middleware.tsを本番と開発環境で別の内容にする必要があった今までは開発環境のBasic認証にのみ使っていた。新たにリダイレクトの処理を入れるため、middlewareを環境によって分ける必要が出てきた本番環境でのmiddlewareの発火を抑えることも課題だったのでmatcherの記述も追加した 課題middleware.tsは1ファイルしかデプロイできないmatcherを開発と本番で切り替えたいが、process.env.NODE_ENVのような環境による切り替えができない 解決法middleware.tsとmiddleware-f...

ちょっと株式会社の KindBurger です！本記事では、プロンプトだけでは表現しきれないデザイン原則を、デザインシステムを「コンテキスト」として与えることでどう改善できるのかを紹介します。また、v0 にはサンプルのデザインシステムも用意されており、すぐに試すことができます 🎉これを利用すれば、次のように一貫性のあるデザインが整ったサイトを簡単に生成できます。 v0 とはざっくりいうと 「アイデアを素早くかたちにできる」 生成 AI ツールです。自然言語のプロンプトや画像、Figma ファイルなどから、React / Next.js / Tailwind CSS / ...

CloudflareのRedirect Rulesで、すぐに、簡単に、リダイレクト設定ができたので紹介します。 はじめにわたしがプライベートで建てているサービスは以下の構成で動いています。（ドメインは仮のものです）service.example.comメインのEC2インスタンスにつながる。基本的にユーザーはこのドメインにアクセスしてサービスを利用しているmediaproxy-service.example.comプロキシ用のEC2インスタンスにつながる。画像や動画などのプロキシを行っており、画像のURLなどはこのドメインが使われるドメイン・DNS管理は...

はじめに標準の new WebSocket()（RFC 6455）はブラウザ実装で任意のリクエストヘッダー追加を禁止しています。そのため、ハンドシェイクの HTTP リクエストで任意の HTTP ヘッダーを付けることができません。https://github.com/whatwg/websockets/issues/16#issuecomment-332065542WebSocket でアクセストークンを送る方法を調べるといくつか選択肢があることが分かりました。ふとSocket.IOはどうしているのかと思って見てみたら下記の記法が使えるようでした。// クライアントcons...

こんにちは！9/6(土)に開催された「フロントエンドカンファレンス北海道2025」に参加してきたので自分の感想を共有させてください！イベントのサイトhttps://www.frontend-conf.jp/自分で撮った会場（弊社の社長が写っています笑） 参加背景東京に住んでいる私が参加を決めた理由は以下です。会社がスポンサーなのでメンバーとして参加できる！北海道に行ったことないのでこの機会に行ってみたい！ 会社がスポンサーなのでメンバーとして参加できる!自分は参加者としてもこれくらいの規模のカンファレンスは参加したことがありません。なので、前からチャンスがあ...