Waku, the minimal React framework
Please try Waku on non-production projects and report any issues you find. Contributors are welcome. Getting started Start a new Waku project with the create command for your preferred package manager. It will scaffold a new project with our default Waku starter. Commands waku dev to start the local development server waku build to generate a production build waku start to serve the production bui
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
https://layerx.connpass.com/event/348773/
Ink を使って CLI アプリを React で書く
Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。 Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。 プロジェクトを作成する 以下のコマンドで Node.js のプロジェクトを作成します。 mk
Reactで大量描画しても60fps出すためのパフォーマンスチューニング術 - SmartHR Tech Blog
こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業員数が多いとブラウザ上での操作が重くなってしまうという問題がありました。 最近「数万人規模の組織図での 60fps」を目指してこの組織図機能の描画パフォーマンス改善を行ったので、その中で実践したフロントエンド開発における大量描画処理の Tips を共有します。(React を前提としています) そもそも問題はどこにあるのか 最近まで、SmartHRの組織図機能は数万人規模の企業で十分に使えるような作りになっていませんでした。というのも、対象従業員数が数万人を超えてくると、いろんな操作が著しく重くなり、実用に耐える操
TypeScript/React/Next.jsおすすめ学習資料のご紹介
はじめに 今回は、現代のWEB開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれていますので、時間を見つけて是非読んでみてください。 ※TypeScript/React/Next.jsって何？という方のために、簡単に以下にそれぞれご説明いたします。 TypeScript Microsoftが開発した、JavaScriptを拡張したプログラミング言語。JavaScriptに比べ、型安全性の向上によるエラーの早期発見や、型注釈でコードの意図を明確にすることによる可読性/メンテナンス性の向上が期待できる。現代のWEB開発においては、ほとんどの開発者がJavaScriptからTypeScriptへ移行し
React Trends in 2025
Every year I discuss the most important trends in the world of React. In this article, we will explore the React trends in 2025 that you should be aware of. Whether you are a beginner or an experienced developer, these trends will help you stay up-to-date with the latest developments in the React ecosystem. React Server ComponentsWe've come a long way with React Server Components (RSC). The first
Reactチームが見てる世界、Reactユーザーが見てる世界
Reactはシンプルなサイトから複雑なアプリケーションまで、非常に幅広く採用されている人気のフレームワークです。OSS化から10年以上の歴史がありながら、昨今もReact Server Componentsなど革新的なアイディアを我々に提案し続けています。 一方で、React Server Componentsへの批判的意見やBoomer Fetching問題などを見ていると、Reactチームと一部Reactユーザーの間には意見の相違が見て取れます。この意見の相違はそれぞれが置かれた状況の違いから生じるもの、つまり「見てる世界が違う」ことに起因してると筆者は感じています。 本稿では「Reactチームの見てる世界」を歴史的経緯を踏まえながら考察し、Reactの根本にある思想やコンセプトに対する読者の理解を深めることを目指します。 要約 ReactはMetaの大規模開発を支えるべく開発され、シ
Jotai を使った Dependency 管理とテスト技法 - 一休.com Developers Blog
この記事は一休.com Advent Calendar 2024の23日目の記事です。 一休レストランのフロントエンドアーキテクトを担当してる恩田(@takashi_onda)です。 はじめに 先日の JSConf JP 2024 で「React への依存を最小にするフロントエンドの設計」という内容で登壇しました。 speakerdeck.com 発表では駆け足になってしまった、React への依存をしていない Vanilla JS 部分をどのように構成しているのかを、Dependency 管理とテストの文脈でご紹介したいと思います。 Dependency とは Dependency Injection の Dependency です。 タイトルも「Jotai を使った DI とテスト技法」とした方が伝わりやすいとは思います。 ですが、厳密には injection していないので、あえて
最近立ち上げたプロジェクトで採用したフロントエンド技術スタック
はじめに こちらは e-dash Advent Calendar 2024 の17日目の記事です。 はじめまして、e-dashのフロントエンドエンジニア、kyonsiと申します。 クリスマスシーズン、皆さんいかがお過ごしでしょうか？ 私は、夜に輝くイルミネーションを眺めながら、「このキラキラのアニメーション、durationは何ミリ秒なんだろう？ CSSで再現できないかな？」なんて、ついフロントエンドエンジニア的な思考が巡っています。 本記事では、最近立ち上げたフロントエンドプロジェクトで採用した技術と、その選定理由を軽くご紹介いたします。「ちょっと攻めすぎじゃない？」「いや、もっと枯れた技術でいいでしょ？」といった社内議論も、クリスマスムードに包まれればスパイス程度。その過程こそが、フロントエンド開発の醍醐味といえるでしょう。 それでは、ホリデームード漂う中、スノードームのようにキラキラ
React Scanをさわってみた
この記事は Applibot Advent Calendar 2024 7日目の記事です。前回の記事はコチラです。 この記事は？ 普段Reactを用いてWebアプリケーションを開発している上で、Chrome DevToolsやReact Developer Toolsにとてもお世話になっているのですが、さわりはじめの頃は表示されている情報がどのような意味を持った情報かわからず、ツールに慣れるまでそこそこ時間を要していました。 もう少し使いやすく、直感的に理解できるツールは無いものかと悩んでいた際に運良く React Scan に出会ったため今回はこれをさわっていこうかと思います。 React Scanとは React Scanは、Reactアプリ全体のレンダリング状況を可視化することに特化したツールです。同ツールのREADMEにある「Why React Scan?」セクションでも強調されて
React 向けヘッドレスUIライブラリの紹介
昨今様々なヘッドレスUIライブラリ登場しています。ヘッドレスUIは特定のスタイルがなく、UIコンポーネントの基礎となるロジックと機能のみを提供することに焦点を当てたものです。 この記事ではRadixUIをはじめとするいくつかのヘッドレスUIライブラリを紹介していきます。 RadixUI ヘッドレスUIの代表格で、効率的な実装、容易なメンテナンス、アクセシビリティを優先しているUIライブラリです。開発者が完全にスタイルを制御できるプリミティブを提供し、複雑なアクセシビリティのロジックや状態管理を抽象化しています。32のコンポーネントが利用可能で、設定を排除することで開発を効率化しプロジェクトにコンポーネントを迅速に組み込めるようになっています。 GitHub stars: ~13.5k Npm weekly downloads: ~1,345,900 コンポーネント数: 32 Headles
React Router v7 がプレリリースされた🎉
最初に 2024/10/4にReact Router v7がプレリリースされました。 今回はプレスリリースされた内容を紹介します。(以降React RouterをRRと表記します) まず、RR v6 までは Reactでアプリを作成する上でのルーティング機能を提供するライブラリでした。 RR v7 では 同社のRemixというフルスタックフレームワークが(一旦)合流したことにより、React Router自体がルーティングライブラリからフルスタックフレームワークとなりました。 フルスタックフレームワークがルーティングライブラリと(一旦)統合された経緯については以下の記事をご覧ください。簡単にいうと両者の差がなくなってきたからです。 RR v7のはじめ方 何もない状態から！ RR v7の機能をすぐに試したい方は公式が提供している以下のコマンドで始めてください。 npx degit remix
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mnpenner/bun-plugin-react-compiler
GitHub - preactjs/preact-iso: Isomorphic utilities for Preact
GitHub - heroui-inc/heroui: 🚀 Beautiful, fast and modern React UI library. (Previously NextUI)
GitHub - jolbol1/jolly-ui: shadcn/ui compatible react aria components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
JollyUI
Introducing Waku — Waku
フロントエンドのディレクトリ構成どうしてる？ Feature-Sliced Design 導入体験談
GitHub - refinedev/refine: A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
