現時点での開発環境2026
現時点での開発環境2026
最近よく使っている開発環境やライブラリを紹介します。
エディタ
エディターは主にCursorを利用しています。
cursor.comCursor: AI coding agentCursorは、圧倒的な生産性を実現するために作られた、最高のAIコーディングエージェントです。
CursorはVSCodeベースのAI Agent内蔵IDEで、元々VSCodeを利用していたこともあり無理なく移行できました。
現在AIは主にCodexとClaude Codeを利用しており、CursorのAI機能はほぼ使っていませんが、設定移行の手間もあり利用を継続しています。
移行先の候補としてはZedがありますが、設定やショートカットを含めまだ馴染めていないので、しばらくはCursorを使い続けると思います。
zed.devZed — Your last next editorZed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
TypeScript
TypeScriptをメインで書いていますが、中でもv7でリリース予定のtsgoを主に使っています。
tsgoは既存の実装をGoでリプレイスしたもので、実行速度が10倍前後速いなどの恩恵があります。
Next.jsを使う際は依存の関係で使えませんが、HonoやSPAとしてReactを書く分には問題がないので積極的に利用しています。
合わせてエディタのプラグインもtsgoに対応したものをインストールして利用しています。
React
Reactをメインで使っているので、その周辺ライブラリもあげていきます。
Next.js
nextjs.orgNext.js by Vercel - The React FrameworkNext.js by Vercel is the full-stack React framework for the web.
SSRが必要な場面で引き続き利用頻度が高いです。
ホスティング先など考えることもありますが、情報も多いため今後も使っていくと思います。
Tanstack Router
tanstack.comTanStack RouterA powerful React router for client-side and full-stack react applications. Fully type-safe APIs, first-class search-params for managing state in the URL and seamless integration with the existing React ecosystem.
SPAでの開発時には型の恩恵が大きいので、React Routerではなくこちらを使うことが多いです。
ルーティングの定義方法にもいくつか選択肢があり、やりたいことに合わせやすい点も使いやすいです。
Tanstack Query
tanstack.comTanStack QueryPowerful asynchronous state management, server-state utilities and data fetching. Fetch, cache, update, and wrangle all forms of async data in your TS/JS, React, Vue, Solid, Svelte, Angular & Lit applications all without touching any "global state"
前述のTanStack Routerと同じTanStackシリーズです。
類似ライブラリだとSWRが有名で個人的にSWRくらいのシンプルさで足りるかなとは思っています。
ただ、Routerと同じTanStackで統一しておくと参照元が少なく済むため、採用することが多くなっています。
React Hook Form
react-hook-form.comReact Hook Form - performant, flexible and extensible form libraryReact hook for form validation without the hassleここ数年よく使っているフォーム制御ライブラリです。
React Compilerとの相性にはまだ気になる部分がありますが、今のところちょうどよい代替がないため継続して使っています。
nuqs
nuqs.devnuqs | Type-safe search params state management for ReactType-safe search params state management for React. Like useState, but stored in the URL query string.
URLの検索パラメータを状態として扱いたいときはnuqsを使っています。
検索条件、タブ、表示モード、ページングなどをURLに持たせたい場面で便利です。URLSearchParamsを直接触るよりも、Reactの状態に近い感覚で書けます。
base-ui
base-ui.comUnstyled UI components for accessible design systems · Base UIUnstyled UI components for building accessible web apps and design systems.
ヘッドレスUIはbase-uiを利用することが増えています。
この分野だとRadix UIが有名ですが、近いインターフェースで使えるため試しています。
リンター・フォーマッター
oxlint
oxc.rsOxlintA collection of high-performance JavaScript tools written in Rust
リンターはoxlintを使うことが増えました。
oxlint-tsgolintを使うと、tsgoベースのtype-aware lintや型チェックも扱えるため、普段のTypeScript/Reactのコードチェックでは速度面の恩恵が大きいです。
oxfmt
oxc.rsOxfmtA collection of high-performance JavaScript tools written in Rust
フォーマッターはoxfmtを使っています。
Prettierと比べて出力に大きな不満はなく、速度面の恩恵が大きいです。printWidthのデフォルトやプラグイン対応など細かい違いはありますが、普段のTypeScript/Reactのコードではあまり困っていません。
Vite
ja.vite.devVite次世代フロントエンドツール
Next.jsを使わないReactアプリではViteを選ぶことが多いです。
SPAのようにサーバーサイドの機能があまり必要ない場合は、Viteのシンプルさが扱いやすいです。
Hono
hono.devHono - Web framework built on Web StandardsHono is a small, simple, and ultrafast web framework built on Web Standards. It works on Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Netlify, AWS Lambda, Lambda@Edge, and Node.js. Fast, but not only fast.
APIを書くときはHonoを選ぶことが増えています。
軽量で構成が素直なので、小さなAPIを作るときに扱いやすいです。ミドルウェアの仕組みやHonoXなど周辺の選択肢もあり、用途に合わせて構成できます。
Cloudflare Workersのようなランタイムとも相性が良く、直近ではAPIだけを独立して持ちたいときに使うことが多いです。