はてなブックマーク

この記事について 上記の画像はこの現象について詳しく記載されている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;

２つの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 サイトにはヘッダーやフッターがあるので、最低限それらを模したレイアウトに収めることを目標にします。 縦書きで段組みする まず共通パーツとして夏目漱石の小説『こころ』の中身を詰め込んだコンポーネントを作っておきます。（中身は

はじめに ESLintはJavaScriptやTypeScriptのコード品質を向上させるためのツールですが設定に悩むことも多いです 本記事ではESLintの設定をシンプルかつ強力にするための2つのプラグインeslint-plugin-perfectionistとeslint-plugin-unicornを紹介します これらのプラグインを使うことで、手間をかけずに厳格なコードチェックを実現できます！ eslint-plugin-perfectionistとは eslint-plugin-perfectionistはオブジェクト、インポート、型、列挙型、JSXプロパティなどのデータを整然と並べ替えるためのESLintプラグインです 並べ替えの基準にはアルファベット順や自然順、行の長さ順などがあります このプラグインの特徴としてすべてのルールが自動修正可能であり、開発者が手動で修正する必要がな

import Image from "next/image"; import stinCatJpg from "./stin_cat.jpg"; // 画像をJavaScriptモジュールのように扱い、指定する形式 <Image src={stinCatJpg} alt="stin cat" />; // img要素同様に文字列を指定する形式 <Image src="/stin_cat.jpg" alt="stin cat" width="300" height="300" />; 本記事では、画像をJavaScriptモジュールのように扱う形式を「モジュール読み込み」と呼び、文字列を指定する形式を「文字列読み込み」と呼ぶことにします。 モジュール読み込み形式だとビルド時に画像サイズを計測して自動でwidth, heightを指定してくれます。 これらは単にwidth,heightの指定を

はじめに とある日のメール。 「何か100％いって従量課金始まっているなぁ…」と不思議に思い調べていたところ、VercelのProプランの新料金体系の発表が4月にあり、そこから約2ヶ月後の6月分（5/25〜6/25）から新料金体系になっていたことが分かりました。 今回の新料金体系で、「帯域幅（bandwidth）」と「機能（functions）」が細分化され、より具体的な項目に料金がかかるようになりました。 以下はVercelからのお知らせに書いてある２文です。 We're reducing pricing on Vercel fundamentals like bandwidth and functions For the majority of customers, monthly bills will remain the same or decrease 「帯域幅と機能の料金が改善

export const tagSchema = z.object({ name: z .string({ required_error: "Name is required" }) .min(3, "Name is too short") .max(100, "Name is too long"), }) export type TagSchema = z.infer<typeof tagSchema> 一つポイントを挙げるとすると、このクライアント・サーバー間で使用するスキーマを use-tag-form.ts ファイル内で定義していない点です。 通常、状態管理やクライアントサイドのバリデーション検証を含むフォームコンポーネントはuse clientディレクティブを使用して Client Component として実装されます。同様に、そのコンポーネントで使用されるカスタムフックもクラ

問題 <img src=""> をブラウザで表示した時、どうなるか知っていますか？わざわざimg要素のsrc属性を空文字列にする機会がないので意外と知らないかもしれません。 もちろん画像は表示されず、(指定していれば)altが表示されます。 img要素のsrc属性を空文字列にすると、リンク切れになることがわかりました！いかがでしたか？(？) そのときHTMLImageElementは JavaScriptでsrcが空文字列のimg要素のDOMインスタンスを確認してみましょう。例として https://zenn.dev/stin を開き、Chrome開発者ツールを使ってsrc属性に空文字列を指定したimg要素を埋め込んでおきます。 そして次のJavaScriptを実行します。 const element = document.querySelector('img[src=""]'); con

まえがき Astro のブログではコミュニティ発のライブラリも紹介されているのですが、What's new in Astro - June 2024 で An open-source, accessibility-focused component starter kit built with Tailwind CSS and optimized for Astro と紹介されていた ravixUI がアクセシビリティに配慮したマークアップの参考になりそうだったので紹介します。 ravixUI とは Tailwind CSS によってスタイリングされ、特に Astro 用に最適化された、アクセシビリティ重視のコンポーネントスターターキットです。 なお HTML 版と Astro 版が提供されているため、Astro を使っていない人でも使えます。 （Astro コンポーネントを書いたことがあ

こんにちは、エンジニアです。 本記事ではuseMediaQueryを使うべきではない理由を説明します。 useMediaQueryとは window.matchMediaの判定結果を取得するカスタムフックを指します。 window.matchMediaはCSSでできるメディアクエリの判定をJavaScriptでも可能にするブラウザAPIです。それをReact Hooksと組み合わせることで、宣言的に判定を行えるようなカスタムフックとなります。 過去にuseSyncExternalStoreを使って実装する記事を書いたので参考にしてみてください。 上の記事ではuseSyncExternalStoreの使い道を説明するのが目的だったのですが、Reactのフックとしてメディアクエリを使える、使っても良いと捉えられてしまったようで、題材選びを少し反省しています(？) 以下はユーティリティ系ライブラ

こんにちわ！hanetsukiです。 この記事はCursorが出た頃に一瞬使ってみて「う〜〜〜ん、なんかビミョい」となり、VSCodeに出戻ったフロントエンドエンジニアがもう一回Cursorを使い始めて長期的に使っていきそうな所感を感じたまとめ記事です。 Q.Cursorってなに？ A.端的に申し上げますと、VSCodeにAI搭載したエディターです。 VSCodeをフォークして開発されているので、見た目もまんまVSCodeです。 Q.なんでVSCodeに戻ったの？ A.UIの微妙な差が気に食わなかったのです。 過去のことなのでよくわかりませんが...当時の私は変化を受け入れることに抵抗があったのでしょう。 参考までに、VSCodeとCursorのスクリーンショットを掲載します。 VSCode Cursor お気づきになりましたでしょうか？...そうです。 アクティビティーバーが水平になって

はじめに 🚩 この記事では、Tanstack Query や SWR などのライブラリに頼らずに、React 標準の Hooks をふんだんに活用してチャット機能を実装する方法を紹介します。 RC（Release Candidate）段階ではありますが、React 19 で追加された useActionState と useOptimistic を使うことで、よりインタラクティブで快適な UI/UX を実現する方法を探っていきます。 また筆者の過去の記事ではそれぞれの Hooks に焦点を当てた記事を書いているので、そちらもあわせて参照してください。 実装例 📝 はじめに完成した状態のデモアプリを示します。 楽観的更新によりチャットメッセージが送信されるとデータベースにデータが保存されたかどうかに関わらず即座に表示され、メッセージの送信中かどうかによってアイコンが切り替わっています。

イベントの伝播を防ぐのはstopPropagation()ですが、伝播するはずのない要素でイベントが走ってしまい動作不良が起きてしまうことがありました。 そのときに問題の解消方法として採用したisTrustedプロパティを紹介します。 ユーザー操作かスクリプトで作成・変更されたかを返してくれるevent.isTrusted MDNには次のような説明があります。 isTrusted は Event インターフェイスの読み取り専用プロパティで、このイベントがユーザー操作によって生成された場合は true、このイベントがスクリプトで作成または変更されたり、 EventTarget.dispatchEvent() で配信されたりした場合は false となる論理値を返します。 https://developer.mozilla.org/ja/docs/Web/API/Event/isTrusted

まえがき この記事は、Astro DB / Astro Studio を使ってページごとに押された「いいね」を管理する Web サイトを Vercel にデプロイするまでの流れを簡単に紹介する記事です。 バージョン情報 "@astrojs/check": "^0.5.10", "@astrojs/db": "^0.10.4", "@astrojs/preact": "^3.2.0", "@astrojs/vercel": "^7.5.3", "astro": "^4.6.1", "preact": "^10.20.2", "typescript": "^5.4.5" Node.js Version: 20.x 完成品 https://github.com/k1350/astro-db-test/ 見た目を全く整えていません。ご了承ください。 開発手順 以下、パッケージマネージャーに pnp

技術構成 API: microCMS(ヘッドレスCMS) Next.js Vercel TypeScript はじめに プレビュー機能は、Next.jsのPreview Modeのおかげで、実装自体は簡単になりました。ですが、「現在どのプロセスを実行中で、どのシステムやサービスに対してどんな操作を行っているのか？」 の把握に少し時間がかかりました。 なのでこの記事では、プレビュー機能を実装する過程を分けて解説し、図解した上で今はどの過程かを示して書くようにしました。特に初めての方が迷わずに進められるように心がけました。 プレビュー機能とは？ プレビュー機能は、コンテンツの公開前に、そのコンテンツがウェブサイト上でどのように見えるかを確認できる機能です。この機能により、下書き状態や編集中の記事を、実際の公開環境と同じ条件下で閲覧することが可能となります。 プレビュー機能をどう実現しているか？

ちょっと株式会社アドベントカレンダー 12月18日の記事です。 この記事ではRaspberry Pi Pico(以下ラズパイピコと呼ぶ)を使ってLEDマトリクスパネルを制御します。 ラズパイピコの購入 ラズパイピコはC/C++やMicroPythonでプログラミングできるマイコンボードです。 AliExpressというECサイトで購入しました。 日本語表記が怪しいですが、問題なく届きました。 ラズパイピコとPCの接続 PCとラズパイピコをUSBケーブルで接続します。 thonnyというIDEを使ってプログラムを書き込みます。 接続確認のために、LEDを点灯させるプログラムを書き込みます。

【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ ちょっと株式会社 Advent Calendar 2023 12 月 24 日の記事です。 みなさんこんにちは、chot Inc. の Web エンジニアです。 Next.js で Google Analytics を導入するとき、どうしていますか？僕は毎度「nextjs google analytics」でググって「こうやるのか〜」と適当に作っています。本当にちゃんと計測されているのか疑心暗鬼です。 また、YouTube の iframe 埋め込みはどうでしょう。普通に iframe を埋め込むと PageSpeed Insights のスコアをごっそり奪っていきます。恐ろしいですね。 これらのサードパーティリソースを SPA である Next.js に導入