はてなブックマーク

第1部:Vercel AI SDK Vercel AI SDKは、異なるAIプロバイダーAPIを統一インターフェースで扱えるTypeScriptライブラリです。一貫性のあるAPIデザインで複数のAIモデルを扱え、ストリーミング形式の応答処理もシンプルに記述できます。 コアアーキテクチャ マルチフレームワーク対応 AI SDKはReactだけでなく、モダンなJavaScriptフレームワーク全般をサポートしています。Next.js、Nuxt、SvelteKit、さらにはReact NativeのExpoでのモバイル開発でも可能です。各フレームワークに最適化された統合を提供し、それぞれのエコシステムに自然に溶け込むように設計されています。 プロバイダー非依存性 SDKは20以上の公式プロバイダーを統一されたインターフェースでサポートしています。主要なプロバイダーとして、OpenAI、Anthr

Node.js アプリケーションを CommonJS (CJS) から ES Modules (ESM) に移行したのでやったことを書き記します。 今回移行したアプリケーションは、バンドラーを伴わない純粋な Node.js アプリケーションです。TypeScript で書かれており、ビルド時には単に tsc で型を落としているだけです。ビルド成果物には require / module.exports が残っていて各ファイル同士が参照し合う、古典的なCJSアプリケーションとなります。 Node.js バージョンが 20 とやや古いので、残念ながら TypeScript のまま実行させること(--experimental-strip-types)はできません。よってこの記事では引き続き TypeScript を JavaScript に変換してから実行する場合の ESM 対応です。 tsco

{ "$schema": "./node_modules/oxlint/configuration_schema.json", "plugins": [ "unicorn", "typescript", "oxc" ], "categories": {}, "rules": { "for-direction": "warn", "no-async-promise-executor": "warn", "no-caller": "warn", "no-class-assign": "warn", "no-compare-neg-zero": "warn", "no-cond-assign": "warn", "no-const-assign": "warn", "no-constant-binary-expression": "warn", "no-constant-condition":

この記事の概要 Tailwind CSS v4 を前提として、「未定義のクラスを指定した際に Lint エラーになるようにする」を eslint のプラグインで実現する。 私が知っている中で最も著名なプラグインは eslint-plugin-tailwindcss なのだが、Tailwind CSS v4 対応がまだベータ版である。 そのため今回は主に eslint-plugin-better-tailwindcss を使っていく。 環境 Tailwind CSS: v4.11.1 eslint: v9.32.0 typescript-eslint: v8.38.0 eslint-plugin-better-tailwindcss: v3.7.3 tailwind-variants: 2.1.0 Next.js: v15.4.5 React 環境のセットアップのために使用 最低限の実装と結

はじめに 皆さんは、個人開発や簡単なプロトタイプのWebアプリを作るとき、バックエンドはどうしていますでしょうか。 私の場合、ここ数年は「とりあえずSupabaseで」というのがお決まりの一手でした。PostgreSQLが使えて、認証やリアルタイム機能もサクッと実装でき、無料枠も十分です。 ですが最近、SNSやVibe Codingの文脈で「Convex」というBaaSの名前を見かけるようになりました。「開発体験が革命的」や「リアルタイム実装が驚くほど簡単」など、気になる評判ばかり。 今回は実際にConvexを軽く触ってみて、Supabaseと何が違うのか、特に「開発ワークフロー」と「コードの簡潔さ」に焦点を当てて比較してみることにしました。 技術選定の一環として、あるいは新しいツールに興味がある方の参考になれば幸いです。 アーキテクチャ思想の比較:SQL中心か、TypeScript-na

はじめに 日々の開発業務において、文字数を制限して表示するUIを開発する場面は数多くあると思います。 これらの文字を「何文字まで見せるか」「どうやって省略するか?」「表示が崩れないようにするには?」といった点は、デザイナーとエンジニアがすり合わせるべき要素です。 ですが「文字数を制限しているのに、なぜか表示がズレる...」という経験はないでしょうか? それは単なる文字数制限の問題ではなく、フォントと文字幅の関係によって引き起こされている可能性があります。この記事では「文字数の制限」と「プロポーショナルフォントの影響」に関する設計上の注意点などを紹介します。 UI設計で見かける文字数制限のケース 以下のような場面で、限られたスペースに文字を表示するケースはあると思います。 ユーザー名や会社名などの表示枠 ボタンやタブ、表のカラムなど、横幅に制限のあるUI デザイナーからの要望 最大表示文字数を制

はじめに GitHub Copilot は、Visual Studio Code (以下、VS Code) で提供される AI を活用したプログラミングツールで、VS Code上で拡張機能としてインストールすることで使用できます。 主な機能として、コードを編集中のファイルに対して続きのコードを提案してくれる Completions や、 自然言語でプログラミングをサポートする Chat があります。 今回は、GitHub Copilot の Chat を使う上で知っていると便利な知識を紹介します。 GitHub Copilot Chat のモードを使い分ける GitHub Copilot Chat にはいくつかのモードがあり、用途に応じて適切な mode を選択することで効率的に作業を進めることができます。 モード名 説明 使い道

Next.jsを14系から15系に、Reactを18系から19系にアップグレードする作業をしていて感じたのが「計画的に進めないと、見通しがつけられなくてしんどいな」ということ。 最初は計画もなく一気に進めようとしていましたが、状況が把握しきれなくなり、情報を整理してから別ブランチでやり直すことになりました。 原因としては、色々なことを試しているうちに、何をしたからうまくいって、逆になぜうまくいかないかが把握できなくなったこと。 そして、レビューに出す前の最終確認がとてもやりにくいと感じましたし、整理されていない状態だとレビュアーの負荷がかなり上がってしまいます。 フレームワークのアップグレード対応に関する具体的なコード例は記事がありますが、計画的な進め方に関する記事は見かけないなと思ったのが、この記事を書いているモチベーションです。 もっといいやり方や追加情報などがあればコメントいただける

Intro 弊社で開発しているサービスの、ドメインを変更することになったときの話。 すでに旧ドメインで一部顧客に利用していただいていたため、旧ドメインは破棄せずに新ドメインにリダイレクトさせるようにしました。 DNSの設定やコードをいくらか修正し、リリースをしました。Webアプリを触って画像が表示されたりデータが取得更新できたりと、通常通り使えることを確認して一安心していました。 問題発生 すでに使っていただいていた社外ユーザーから「画像が表示されない」と連絡がありました。 スクリーンショットを見るとたしかに画像が切れてALTテキストが表示されていました。しかし同じ画面を自分のPCで閲覧すると正常に画像が表示されています。 先方のファイアウォールがホワイトリスト制にでもなっているのかと思い、ファイアウォールの設定をご確認くださいと返答しました。ですが「TCP/80(http)とTCP/44

Riveってなに? Riveはリアルタイムでインタラクティブなアニメーションを作成できるツール ReactやFlutterといったフレームワーク向けライブラリを提供 作成したアニメーションを簡単にアプリへ統合できる! Riveが使われているプロダクト ◆だいやまーく Duolingo キャラクターの動きやリップシンク(音声に連動した口の動き)をリアルタイムで制御し、学習体験を豊かにしています! ◆だいやまーく Notion AIアシスタントの細かな表情や動きをリアルタイムで制御し、対話をより親しみやすく、楽しい体験にしています! Rive 3つの魅力! Riveが多くのプロダクトで活用されている理由は、その使いやすさと可能性の広がりにあります。 1. 🤝 デザイナーとエンジニアの連携がスムーズ 従来、デザイナーが作ったアニメーションをエンジニアが再現するには手間がかかりましたが、 Riveではコードでアニメーシ

きっかけ 個人開発のプロジェクトでStorybookのVRTをやりたくなったので、Chromaticを導入しました。 手軽に導入でき、テストも安定していて満足していたのですが、無料枠がちょっと心許ない感じでした。 5,000 free snapshots per month https://www.chromatic.com/pricing 有料プランは最安でも 149ドル/ month と、個人で利用するには負担が大きい価格だったため、「それなら作っちゃおう!」と思ったのがきっかけです。 目指すもの PR作成時 or PRへの追加コミット時に以下が実行される環境を作ります。 Storybookのユニットテスト StorybookのVRT VRTが失敗したらPRのコメントで通知 VRTの結果をWeb上で確認できる 環境 Storybook: v8.3.6 Playwright: v1.48.

Zodとは Zod は、TypeScript ファーストのスキーマ宣言および検証ライブラリです。ここでは、スキーマという用語を、単純なものから複雑なネストされたオブジェクトまで、あらゆるデータ型を広く指すために使用しています。 https://github.com/colinhacks/zod?tab=readme-ov-file#introduction ZodのREADMEには、上記のような記載があります。 私はanyやunknownのobjectに対して、バリデーションや型付けをする際に使用する事が多いです。その使用方法をサンプルコードと合わせて説明します。 本記事は、"zod": "3.23.8"のバージョンで検証した内容です。 基本的な使用方法 unsafeValueがstringである事を検証します。以下のような流れです。 stringSchemaを定義 stringSchem

先日、業務で開発しているmonorepoのESLintをv9にアップデートして設定ファイルをFlat Configに変更しました。 自分自身はmonorepoにFlat Configを導入するのが初めてでした。色々調べた結果、学びがあったりきれいにまとまった設定ファイルが作れたと感じたので共有します。 Flat Config自体は目新しいものではなくなってきているので、細かい使い方は他の記事や公式ドキュメントを御覧ください。 設定ファイル完成形 my-monorepoは各自のプロジェクト名に、some-workspaceは個別のワークスペース名に置き換えてください。 import globals from "globals"; import eslint from "@eslint/js"; import tseslint from "typescript-eslint"; import

この記事について 上記の画像はこの現象について詳しく記載されているMartijn HolsさんのブログをGoogle翻訳したものになります。 このブログが現状の解答だと思っているので自分からは結論と経緯(思い出)しか書かないようにして Martijn Holsさんのブログを見るようにしてください。 結論 Virtual DOM内でstateをTextNodeとして反映している場合は翻訳かますことで発生しうる 解消策 <span> で囲む eslint-plugin-sayariというESLintプラグインが no-unwrapped-jsx-text というルールでタグで囲むように矯正できる 多言語化対応 Reactだけではない Virtual DOMの書き換えによって起こる問題なので 他のVirtual DOMを扱うライブラリでも起こり得る Chromeの拡張でVirtual DOMの内

TypeScriptで関数を書く際に、気をつけていることを記載しました。 BMIを計算する処理を例にして説明いたします。 引数をobject形式にする 引数をobject形式にする事で名前付き引数に近い形式になり、順不同になります。引数の順番に意味が無い関数でも、使用時にどの順番で引数を渡すか迷う事がありません。 const calculateBMI = (p: { height: number; weight: number }) => { // BMIの計算処理 }; calculateBMI({ height: 170, weight: 60 }); calculateBMI({ weight: 60, height: 170 }); 以下は、引数がobjectではありません。この関数だけ見ると特に違和感は無いと思います。しかし、上記に比べると情報量が減ります。特にheight, w

Next.jsのsearchParamsの型問題 Next.jsのsearchParamsの型は少々厄介です。searchParamsのドキュメントでは次のように型定義が記載されています。 export default async function Page({ searchParams, }: { searchParams: Promise<{ [key: string]: string | string[] | undefined }>; }) { const filters = (await searchParams).filters; } 各パラメーターの型がstring | string[] | undefinedとなっていますね。これを使うときに型チェックが面倒になってsearchParams.filters as stringと書いてしまっているのをよく見ます。string[

はじめに Webページを作るとき、長いテキストを整えて表示することってよくありますよね。例えば、タイトルや説明文が決められたスペースからはみ出してしまうと、デザインが崩れてしまうことも。そんなときに役立つのが、CSSで簡単にできる「省略表示」です。指定した行数を超えたテキストを自動的に「...」で省略できるので、コンテンツがすっきりして、読みやすさもアップします。 この記事では、1行だけの省略表示から複数行の省略まで、現代のブラウザに対応したシンプルな方法をご紹介します。CSSの省略表示テクニックを押さえて、コードの見た目もスッキリ整えてみましょう! 1行の省略表示 CSSでテキストが1行の時に省略表示をするのはtext-overflow: ellipsisプロパティを使用し、シンプルに実装できます。 コード例 .ellipsis-one-line { overflow: hidden;

2つのJSON文字列の差分をシンタックスハイライト付きで表示したいケースがありました。 Zennでも同じ差分かつシンタックスハイライトができますね。下のようなコードブロックがそうです。 Zennでは行頭に+や-をつけることで差分としてハイライトされるようになっています。 このようなシンタックスハイライトかつ差分ハイライトを、2つのJSON文字列の差分に対して行いたいと思いました。つまり、差分を表示したい箇所に明示的かつ静的にマークしていくのではなく、2つのテキストから動的に差分を計算して差分ハイライトを表示してくれる機能です。 この記事ではその方法を紹介します。 なお、僕がJSONの差分を表示したかったのでJSONで例を出しますが、好きな言語で、なんならプレーンテキストでも応用可能です。好きなだけdiff表示してください。 先出し結論 jsdiffでJSONの差分トークンを取得し、shik

国立国会図書館サーチのAPIとは? 国立国会図書館と全国の図書館の蔵書情報にアクセスできるAPIです。 主に3つのAPIが提供されています。 検索用API ハーベスト用API 書影API 今回は検索用APIと書影APIを使ってみたので、その知見を共有します。 利用申請について と、その前に簡単に利用申請について触れておきます。 非営利利用の場合は申請不要ですが、営利利用の場合は利用申請が必要な場合があります。 営利利用の判断基準については以下の通りです。 データを利用することにより、なんらかの収益を得る場合(例:サイトの運営による広告収入等)は、営利目的にあたるため、利用申請が必要です(希望されている利用方法が営利目的に該当するか判断に迷う場合は、NDLサーチAPI利用申請フォームからご相談ください)。 特に検索用APIでは検索対象のデータプロパイダ(データソース)を指定できるため、利用す

最近、タイトルのような picture source + img タグのコーディングを React でやっていて、面白いなと思ったことがあったので、共有します。 一言で言えば、 Safari で picture source + img を Client Side Rendering するときは要注意ってこと! HTMLで画像のフォールバック まず、picture source + img タグの基本的な使い方について説明します。 HTMLで、「webpに対応しているブラウザには webp を表示、そうでなければ png にフォールバックしたい」というときは、以下のようにコーディングします。 <picture> <source srcset="/images/A.webp" type="image/webp" /> <img src="/images/A.png" /> </picture

はじめに 🚩 Next.js を例に、URL 状態管理には以下のような課題があると思います。 JavaScript の Web API である URLSearchParams を使用してクエリパラメータの直接操作が必要になり、ロジックが煩雑になりがちである 型安全性が確保しづらく、バグの原因になることがある サーバーコンポーネントとクライアントコンポーネントで一貫した方法でクエリパラメータにアクセスすることが難しい Next.js のタイプセーフな検索パラメータ管理マネージャーである nuqs を使用することで、これらの課題を解決できます。 この記事では、基本的な使い方から実践例までを通して、nuqs の使い方を解説します。 基本的な使い方 📝 まずは、nuqs の基本的な使い方を簡単に説明します。 ボタンのクリックでクエリパラメータを変更する方法 button をクリックした際など、

はじめに Tailwind CSSでは、メディアクエリを使わずにブレイクポイントで簡単にレスポンシブ対応ができます。でも、画面サイズが変わるたびに急にレイアウトが切り替わって「ガクッ」とした感じ、気になったことはありませんか? そこで便利なのが「Fluid for Tailwind CSS」。このプラグインを使うと、CSSの clamp() 関数を活用して、画面サイズに応じて要素が滑らかに変化し、より自然なデザインが実現できます。今回は、このFluidの使い方とその魅力を見ていきましょう! Fluid for Tailwind CSSとは? 「Fluid for Tailwind CSS」は、レスポンシブデザインをさらにスムーズにしてくれるプラグインです。"Fluid" とは流体という意味があり、その名の通り、デザインがまるで流れるように滑らかに調整されます。通常、Tailwindでは s

しかしCompressionStreamはその名の通りWeb Stream APIなのでどう頑張っても出力は非同期です。なので関数名と引数は同じですが戻り値はPromise<string>になります。 また、アルゴリズムが違うので互換はありません。今までlz-stringで圧縮・解凍していた箇所をいきなりCompressionStream版に置き換えても機能しませんのでご注意ください。 ちなみに、lz-stringの圧縮アルゴリズムはドキュメントでLZ-basedと書かれており、おそらく作者独自のアルゴリズムです。 CompressionStreamで選択できるアルゴリズム(語弊あり)は gzip, deflate, deflate-rawです。gzipはgzipですが、deflateはzlibでdeflate-rawが純粋なdeflateです。命名については歴史的経緯があるようです。 前

はじめに date-fnsのv4.0でタイムゾーンがサポートされました。 今までdate-fnsを導入したプロジェクトでタイムゾーンを考慮した日時を扱う場合は、外部パッケージのdate-fns-tzと組み合わせて実装していましたが、今回のアップデートでdate-fns/tzという新しいパッケージとして使用できるようになりました。 この記事では、時刻表記に関する知識と、それを踏まえたdata-fns/tzの使い方を見ていきます。 時刻表記について JavaScriptのDate()コンストラクタの引数のうち、日付文字列の形式はISO8601で定められています。date-fns/tzのREADMEでもこの日付文字列が使われているため、ここではISO 8601形式がどのようなものなのかおさらいしておきます。 Time zone ISO 8601形式

WebアプリでURLシェアを実装する際に、URLにすべての情報を持たせてしまいたい場合があります。そのとき、情報をそのままクエリ文字列に渡してしまうとURLの文字数制限に引っかかってしまうかもしれません(厳密にはURLに上限はないようですが、現実はいつもブラウザ実装依存)。 そんなときURLセーフな文字列形式で圧縮してくれるライブラリがあります。lz-sringです。 変換の例 ライブラリで compressToEncodedURIComponent というAPIが提供されているのでこれを使用します。標準のencodeURIComponentでURLセーフな文字列に変換した場合とサイズ比較をしてみましょう。 import lzstring from "lz-string"; const rawData = "Lorem ipsum dolor sit amet, consectetur a

v0 とは v0 は vercel 社が提供する React ベース[1]の UI を作ることができる生成 AI サービスです。 こちらの指示をもとに、 shadcn/ui や tailwind を使って UI を構築することができます。 先日、public Beta 版が公開され、会話形式で UI を逐次生成できるようになりました。 これまでは、プロンプトを v0 に投げると数パターン実装例を提案してくれていましたが、 ついに会話でやりとりをしながらコンポーネントをブラッシュアップしていくことが出来るようになりました。 早速ログインして試してみます。 できることとしては下記の通りです。(2024年9月1日現在) ジェネレーティブAIを使って、shadcn/uiとTailwind CSSに基づいたコピー&ペーストしやすいReactコードを作成します。 プロンプトを送信するか画像をアップロー

概要 Web で文字数が不定の文章を縦書き段組みでいい感じにレイアウトするのは意外と難しい、ということを紹介する記事です。[1] 環境 Next.js App Router: v14.2.5 React を簡単にセットアップしたかっただけで、ほとんど関係ないです Windows 11 Google Chrome: v127.0.6533.120 実装 今回は「小説のような長さ不定の文章を、縦書きかつ縦スクロールで読みたい」という要望に応えることを想定します。 長い文章を縦書きかつ縦スクロールで読むには、読みやすさの観点で段組みするしかないと思います。 また一般の Web サイトにはヘッダーやフッターがあるので、最低限それらを模したレイアウトに収めることを目標にします。 縦書きで段組みする まず共通パーツとして夏目漱石の小説『こころ』の中身を詰め込んだコンポーネントを作っておきます。(中身は

モチベーション 私は個人サイトのコンテンツをすべて自分で管理しておきたい気持ちがあるので、基本的にコンテンツを markdown で書いている。 Astro では MDX integration を使うと markdown 内で Astro コンポーネントを使えるので、markdown で表現できない部分は Astro コンポーネントを使っていた。 しかし何となく違和感があったし、せっかく markdown という標準的な記法を採用しているのに Astro にロックインされてしまうのも嫌だった。 そんな中、最近 remark/rehype プラグインを作って markdown を拡張するほうが筋がいいのではないかと考えた。 いつか他のフレームワークに移植するとして、それが remark/rehype を使っているならばきっとプラグインごと移植できると思うので、コンテンツ移行の手間を減らせる