はじめに — 「ちょうどいい」ノートアプリがない問題 Notion はクラウド依存、Obsidian はプラグイン沼。自分が欲しかったのはもっとシンプルなものだった。 データは手元の Markdown ファイル。クラウドなし、DB なし 起動が速い。Electron のもっさり感はイヤ フォルダとタグで整理できれば十分 キーボードだけで操作できる 「80% は既存ツールで満たせるけど、残りの 20% が気になる」——エンジニアなら覚えのある感覚だと思う。妥協するか、自分で作るか。作ることにした。 そうして生まれたのが Graphite というノートアプリだ。 技術選定 — 迷ったこと、決めたこと Electron じゃなくて Tauri にした理由 一番の理由はサイズ。Electron はバンドル 150MB 超、Tauri は OS 組み込みの WebView を使うので約 10MB。メ

宣言的UIとは何か、皆さんは答えられるでしょうか。 「あーあの、DOM更新を直接プログラムに書くんじゃなくて、JSXとかであるべき状態を宣言したらライブラリが自動的に差分適用とかでDOMを更新してくれるやつでしょ？」 もちろん、このような答えは間違いではありません。しかし、特にAsync Reactの時代においては、Reactの考えはさらに先を行っているようです。 究極的には、宣言的UIは、やりたいことをロジックとして記述するだけで、具体的なことや細かい最適化はよしなにやってくれるものだという考えが伝わってきます。上述のようなDOMの更新の話はその一例にすぎません。 やりたいこと: 特定の形のDOMを画面に表示したい。 具体的なこと: Reactランタイムがコンポーネントツリーを実行してDOMを更新する。 最適化: DOMをいい感じに差分更新する。 また、useStateなどといったステー

今日vercelがリリースした10年分のReactとNext.jsの知見が詰まったreact-best-practices。 Claude Codeで早速インストールしてPRをレビューしてもらった。 インストール方法 スキルインストールに際して、Vercelが公開した「add-skill」を公開した。 これが便利で、Claude Code, Codex, Cursor等環境ごとにインタラクティブにスキルをインストールできる。 使い方は次のとおり。 どの環境にインストールするかを選択しているところ。 使い方 開発中のPRについて、実際にレビューしてもらった。 「今回のPRについて、next.jsのベスト・プラクティスに沿っているかチェックして」と指示。 スキルが発動する。 レビュー結果が次の通り。 すごく・・・いいです・・・ 結果的に、React.cacheを使えって言われた。 結論 男は黙

React + TypeScript は「とりあえず型が付いてる」状態だと、仕様追加や改修フェーズで 型が崩壊して事故 が起きがちです。 propsの組み合わせが矛盾してUIが壊れる 状態遷移が増えて分岐漏れが起きる any が混ざって“型があるのに安全じゃない”状態になる APIレスポンスのズレで本番だけ落ちる この記事では、現場で効く「事故りにくい型設計」を 10パターン に絞って紹介します。 （どれも“型オタク”に寄せず、現実的に運用できるやつだけ）

執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作、Webメディア編集部の業務改善や、プログラミング技術記事の執筆等に携わっている。著書に「たった1日で基本が身に付く! Androidアプリ開発超入門」（技術評論社）、「基礎から学ぶ React Native入門」（翔泳社）他。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「

はじめに この記事のゴール Reactを使っていると、useStateやuseEffectを「こう書けば動く」という形で覚えていることが多いのではないでしょうか。 const [count, setCount] = useState(0); useEffect(() => { console.log(count); }, [count]); このコードは動きます。しかし、なぜ動くのかを説明できるでしょうか。 なぜuseStateは配列を返すのか なぜsetCountを呼ぶと再レンダリングされるのか なぜuseEffectの依存配列に値を入れると、その値が変わったときだけ実行されるのか なぜHooksを条件分岐の中で呼んではいけないのか この記事では、これらの疑問に答えるために、Hooksの仕組みを実際に実装しながら学んでいきます。最終的には、Hooksが「魔法」ではなく、JavaScrip

はじめに React が誕生して10年以上が経ちましたが、「状態管理」の議論は今も終わりません。Redux、Recoil、Zustand、そして useSyncExternalStore。なぜこれほど多様なライブラリが生まれ、React 公式はついに"標準 API"を出したのでしょうか？ 本記事では、「状態管理の歴史」と「React が見ている世界」を整理しながら、最新 API が登場した背景まで深く掘り下げます。また、この内容は JSConf.jp 2025 Pre Event で話した内容の補足や詳細です。 この記事の読み方 記事全体を通して読むことで状態管理の歴史が体系的に理解できますが、すでに知っている部分は読み飛ばしても問題ありません。 あなたの状況 おすすめの読み始め tl;dr 状態管理は UI = f(state) という React の思想を支える根幹 Redux → R

Propsの渡し方は、アプリケーションの再レンダリング性能に大きな影響を与えます。特に重要なのは、参照の同一性とProps粒度の適切な管理です。毎回新しいオブジェクトや関数を作成することは、子コンポーネントの不要な再レンダリングを引き起こします。 // ❌ 毎回新しいオブジェクト・関数が作成される function ParentComponent() { return ( <ChildComponent style={{ marginTop: 10 }} // 毎回新しいオブジェクト onAction={() => console.log('action')} // 毎回新しい関数 /> ); } // ✅ 安定した参照を提供 const ChildComponent = React.memo(({ style, onAction }) => { // 子コンポーネントの実装 return

Reactにおいてプロダクトの品質を高く保つには、Reactのやり方に合ったコードを書くことが重要です。公式ドキュメントの名物ページ「そのエフェクトは不要かも」には、useEffectの望ましくない使い方と、それに代わるテクニックが紹介されています。 この記事で取り上げるのは、その中でも「props が変更されたときに一部の state を調整する」のセクションで紹介されている、レンダリング中にステートを更新するテクニックです。 このテクニックは一見すると奇妙で、知ってはいるけど使っていいのかよく分からないという方も多そうです。しかし、一見突飛に見える記述でも、深く理解すれば実はReactのデザインに完璧に則っているというのがReactの公式ドキュメントの特徴です。技術に対する向き合い方として、公式の説明であっても妄信せず批判的に見ることはとても重要です。しかし、Reactの場合は最終的に

いきなりですが。 海外旅行したり働き始めたりすると、日本の良さが身に染みたと感じた人は多いんじゃないでしょうか？ なんかとりあえず外で働いてみたいと思っていましたが、今はいつ戻るかと考える日々です。（とにかく温泉に入りたい） また色々と各国を回る中で、日本企業ってアジア圏や他の国にもかなり進出してるんだなぁと実感しました。（そりゃそう） そんなこんなで日本株に興味を持ち 昨年にわが投資術を購入して実践し始めました。（まだ初めて一年目なので成績はわかりません。。。が、マイナスは無し） 自分でバフェットコードや Claude mcp-yfinance などを利用しながらスクリーニングしてみましたが、毎回決算が出るたびに手動とチャット相手にあるのも何かなぁ。と思いまして。 じゃあ自動収集とスクリーニング用のアプリ作ってみよう(vibe coding) そんなノリから、日本株全銘柄を自動収集・簡易

「このボタンコンポーネントにどこまでのPropsを持たせるべきか？」 日々のコンポーネント開発で、このような判断に迷ったことはありませんか。onClick、disabled、loading、icon、variant、size…どこまで汎用化すべきか、どこで線引きすべきかという問題です。 前回まででコンポーネントの「構造」（分割と命名）と「配置」（フォルダ設計）を学んできました。今回から2回にわたって、コンポーネント間の「連携」、つまりPropsを通じたデータフローとインターフェース設計に焦点を当てます。 Propsはコンポーネント間の「契約」です。良いインターフェースは使いやすく、間違いを防ぎ、拡張可能である必要があります。 本稿では、複雑なUIを柔軟に構築するCompound Componentsパターンと、TypeScriptによる型安全なProps設計について解説します。これらの手法

先日 Nani というAI翻訳アプリをリリースしました。macOS / Windowsアプリを使うとショートカットで解説つきの翻訳を簡単に呼び出すことができます。 この記事ではNaniの技術的な話をまとめておきます。「レスポンスが速い」という声も多くいただいているので、そのあたりの工夫についても触れたいと思います。 ざっくりとした構成 主な使用技術やサービスは以下のようになっています。 Turso: SQLiteでユーザーの設定などを保存 Upstash (Redis): キャッシュ、レートリミット Drizzle: SQLiteのORMとして利用 Stripe: 決済管理 Next.js（App Router）: Webアプリ。Vercelにデプロイ Hono: APIを快適に書くため。Next.jsのRoute Handler上で使用 Electron: デスクトップアプリ TypeS

はじめに 最近、趣味でElectronを使ったアプリを開発しています。その過程で、アーキテクチャ設計についていくつか悩んだポイントがありました。本記事では、実際に採用したアーキテクチャや解決策を紹介します。 今回はサーバーにデータを置かないローカルファーストなデスクトップアプリを作っているということもあり、特に以下の点で悩みました。 フレームワークどうする？ WebのようなREST APIが使えない データベースどうしよう アプリのアップデートどうしよう アプリのコード署名むずい フレームワークどうする まずはじめにフレームワークをどうするかという問題がありました。 最初はNext.jsのApp Routerを使ってアプリを作っていました。しかし、Electronアプリは最終的に静的ファイルになるため、Next.jsのServer ComponentsやServer Actionsの恩恵を

皆さんこんにちは。React、使っていますか？　Reactを″正しく”使うことは難しいと感じる方も多いのではないでしょうか。 特に筆者はReactの正しい使い方に厳しく、こんな記事も出しています。熟練のReact使いでもなければ、この記事を読んで難しいと思うのも仕方がありません。 useEffectに関しては、React公式のドキュメントでも「そのエフェクトは不要かも」というページがあり、useEffectを使ってしまいがちだが、useEffectの使用が適していない場面について解説されています。 この記事の目的 上記の公式ドキュメントで解説されている中でもkeyを使うテクニック（あとでこの記事でも説明します）に関しては、今より未熟だった昔の筆者は、あまり良く思っていませんでした。なぜなら、それが 「Reactらしくない、小手先のテクニック」 に見えたからです。 しかし、よくよく考えれば、

こちらの記事はReact Tokyo ミートアップ #8にて発表させていただいた内容をより深堀りした記事となっています。 登壇資料はこちらです。 TanStack DB ~状態管理の新しい考え方~ TanStack DBとは TanStack DBは、フロントエンドに 永続化層（DB） を設け、コンポーネントから直接クエリできる仕組みを提供します。 従来は、バックエンドのDBを正とし、フロントエンドはそれを定期的に問い合わせる形が一般的でした。 TanStack DBはこれを逆転させ、フロントエンドがデータの主導権を持つ 形にします。 つまり「DBをフロントエンドに持ってきた」感覚で使えるのが魅力です。 TanStack DBは何が嬉しいのか 楽観的更新の自動化 同じTanStackシリーズのTanStack QueryはデフォルトではUIの楽観的更新をしません。 つまり、失敗することを前

2025-09-06 フロントエンドカンファレンス北海道2025

こんにちは、名刺アプリ「Eight」でエンジニアをしている藤野です。最近はタコスの肉（カルニタス）作りに挑戦しようと考えています。 さて、今回はReact 18移行時に発生したReact Virtualizedで起こった問題と、その解決のためにReact Virtuosoへ移行した技術的な判断について共有します。 そもそもReact Virtualizedって？ React Virtualizedは、大量のリストやテーブルデータを扱う際に、画面に表示されている項目だけを仮想的に描画することで、描画負荷とメモリ使用量を削減するReact向けライブラリです。 github.com 画面に見えている領域だけDOMとして描画し、スクロールに応じて動的にDOMを追加・削除することで、数千、数万件のデータでも快適にスクロールできるようにする仕組みです。基本的なコンポーネント（List、Grid、Tab

Reactがこれまでどのように開発されてきたかについての詳細な考察と、コミュニティでよく見られる混乱や懸念事項についての説明 はじめに 今日、Reactとそのエコシステムの状況は複雑で分裂しており、成功、懐疑、そして論争が入り混じっています。 ポジティブな面として、Reactは最も広く利用されているUIフレームワークであり、そのコンセプトはJSエコシステムの他の部分にも影響を与えてきました。Reactチームは数年にわたる開発の末、先日React 19をリリースしました。これは、公式に安定版となったReact Server Componentsのサポート、Promiseを扱うための新しいuseフック、複数の新しいフォーム連携、そして長らく非推奨であった多くの時代遅れな機能の削除を含む、大規模なリリースでした。 しかし、私が観察し、また経験してきたところでは、Reactコミュニティでは、Rea

TypeScript SDK を使用して MCP UI を実装する MCP UI では TypeScript と Ruby の SDK が提供されています。ここでは TypeScript SDK を使用します。サーバー向けの SDK とブラウザ向けの SDK がそれぞれ提供されています。 @mcp-ui/server - npm: MCP の Resource を実装するためのヘルパー関数を提供する @mcp-ui/client - npm: インタラクティブな UI コンポーネントを提供する. React コンポーネントと Web コンポーネントの両方が提供される。 まずはサーバー側の実装から始めましょう。MCP サーバーの実装として Cloudflare が提供する agents パッケージを使用します。agents パッケージは Streamable HTTP を使用したリモート M

自作の CSV エディタ SmoothCSV (v3) が Generally Available になったので、技術的な工夫とかを書きます。 また7/1 16時からの24時間、Product Hunt でローンチするので応援よろしくお願いします。 About Me 株式会社ヘンリーでエンジニア的なことをしつつ、個人開発してます。 @kohii00 on X kohii on GitHub About SmoothCSV SmoothCSV は、macOS と Windows 向けの CSV エディタです。(Linux も近々) 初代 SmoothCSV は15年前に作っていて、昨年 v3 の開発を始めました。 Excel ライクな操作感で、直感的に使える CSVを扱うのに必要な、基本的〜応用的なツールが搭載されている 様々なフォーマットや文字コードに対応。列数が異なるCSVでも扱える 高