ダイアログ実装にみるトレンドと実装の中身 - エムスリーテックブログ
皆さん、こんにちは！ デジスマチームの小島(@jiko_21)です。 このブログはデジスマチームブログリレーの1日目の記事です。 フロントエンド開発において、モーダル（ダイアログ）の実装は非常にポピュラーなタスクの1つです。しかし、近年のUIライブラリを見ていると、その「実装スタイル」が大きく様変わりしていることに気づかされます。 今回は、ダイアログの実装トレンドと、Radix UIなどのモダンなライブラリが裏側でどのように動いているのか、その「中身」について掘り下げてみたいと思います。 ダイアログ実装のトレンドの変化 従来のスタイル 最新のスタイル なぜ渡していないonClickが動くのか Dialog.Triggerを読んでみる createSlotを見てみる 最後に We are Hiring! エンジニア採用ページはこちら エンジニア新卒採用サイト！ ！ カジュアル面談！ ！ ダイ
React Nativeでアプリを作るときは、bluesky-social/social-appを参考にしよう！
こんにちは！テラーノベルとテラードラマでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ タイトルの通りなのですが、これからReact Nativeでアプリを作ろう！という人はblueskyの公式クライアントアプリを参考にしましょう！ なぜbluesky-social/social-appを参考にするのか 多くのユーザーがいるサービスで、継続的に開発されている 実際に多くのユーザーがWebやアプリで利用しているサービスであり、それがOSSで公開されているのは凄いですよね。 ストアやWebで公開されているアプリケーションなので、実際にアプリをインストールして触りながら、この部分のコードはどうなっているんだろう？と確認することもできるのもキャッチアップしやすい点かと思います。 技術スタックがモダンな作りになっている Expoを利用しており、Webに関し
React デザインパターン
はじめに 長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築するにつれ、単なる「動くコード」を超えた、堅牢な設計原則の必要性を痛感するようになりました。 この記事は、私自身の再学習を共有するものです。 ※2025/04/21時点、私が関わっているプロダクトのCrowd AgentのReactのバージョンは"18.3.1"です。 目次 Reactデザインパターンとは HOC (高階コンポーネント) パターン[※React18以降では、カスタムフック推奨] Provider パターン Presentational と Container コンポーネントパターン React Hook
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を書くことは凡事徹底だと考えている話 - カミナシ エンジニアブログ
カミナシで、Webフロントエンドエンジニアをしている osuzu です。 これまでフロントエンド専門外のエンジニアからReactを学ぶ良い方法やお勧めドキュメントを聞かれる度に、 公式ドキュメント のリンクを貼る日々を過ごしてきましたが、何かすごい上達方法がないものかと普段意識していることをこの記事で書き起こしてみました。 文字にした結果、中身になにか特別なことや魔法のテクニックは一つもなく、むしろプログラミング一般に通ずる話ばかりになりましたが、（自戒も込めて）凡事徹底することの難しさもあると感じておりその一助になれば幸いです。 ※ 凡事徹底：平凡なことを非凡なほどに実行すること。一つ一つの理解や実行は平易でも、それを実践し続けるのは難しい。 React Server Component（以下RSC）を採用するかで変わる部分もありますが、記事の例はClient Componentの話が中
<div/> のレンダリングから始める React 学び直し
React Advent Calendar 2022 2日目の記事です。 本記事はごく簡単なコンポーネントから始めて、react のレンダリングについて学び直す記事です。学び直し(!=入門記事)なので JSX、TS の説明などはしません。 本記事の対象読者 ある程度 react を触っていて、もっとレンダリングについて理解したい人 より良いコンポーネントを書きたい人 本記事のコードについて 特に断らないかぎり、本記事に出てくるコードは以下のコードを省略したものです。実際に動かせる codesandbox も用意したので、そちらも参照ください。 import { createRoot } from 'react-dom/client'; const App = /* 実装 */; createRoot(document.querySelector('#main')).render(<App
基礎から学ぶNext.js
OCHaCafe Season8 #2の資料です。 https://ochacafe.connpass.com/event/308830/ セッションアーカイブ動画：https://youtu.be/Ywd2J3GZ8wQ
君たちはReactをどうやってRuby on Railsに載せるべきか？
下記の記事の内容をRuby Gemにしました！ react_router_rails_spa gem. 以下のコマンドを実行するだけで、Modern SPAをRuby on Railsに載せることができます。 # Railsのインストール rails new test_app cd test_app # gemのインストール bundle add react_router_rails_spa bundle install bin/rails generate react_router_rails_spa:install # サーバ立ち上げ bin/rails s bin/rails react_router:dev はじめに こんにちは！Ruby on Railsフロントエンドエンジニアを目指し、Hotwireを中心に活動しつつ、Next.jsもReactも勉強している加々美です！ 202
ドーナッツが"use client"を制する鍵？
React Server Components（以下、RSC）の文脈で、「どのコンポーネントをServer ComponentにするのかClient Componentにするのか判断に迷うからひとまずツリーの一番上で"use client"にしちゃえばうんぬん・・・」、ということを風の噂で聞きつけたので、よくあるClient Componentがドーナッツになれる例えを身につけると幸せになれるんじゃないかという話をします。（ドーナッツ？何を言っているんだろう）（もうすでに擦られた内容だとも思いますが、意外と存在しないのかなと詳しく調べもせずに筆を執っています）（要出典） 想定読者は、ある程度はRSCについて聞いたことがある、RSCを触っているけどコンポーネント定義に自身がない、"use client"を付ける判断基準が明確にぱっと言えない、などの方達です。 （ここで書く考え方、個人的には気
Remix (React Router v7) の思想が受け入れられなかった話 - hidekatsu-izuno 日々の記録
最近、Remix ……いつの間にか統合されて React Router v7 を触っている。最初はなかなかいい感じと思っていたのだけど、実際に使ってみるとなかなかに厳しい。 Remix の哲学と言えばどちらかと言えばSSG (Static Site Generation)はやめてエッジで動的に生成しましょうという部分が強調されていたように記憶しているが、Pre-Renderingの機能も搭載されており、そこはすでに微妙な話なのかもしれない。 むしろ特徴的なのが「UI を永続的なサーバー状態と自動的に同期させる」という部分。詳細はRemix時代の「Fullstack Data Flow」を読んでいただきたい。 remix.run 端的に言えば、HTML標準の動きをエミュレートするかのように旧来型のポストバック的な動作をReact で再現する設計になっている。ボタンを押し submit が行わ
バックエンド出身エンジニアがReact/Next.jsに入門してみた話
今日からあなたはフロントエンドエンジニアです！ え、面接でバックエンド・インフラしかやってなかったって言ったのに！？フロント！？どうしよう 😭 [1] どうも、株式会社カナリーでお部屋探しマーケットプレイスの CANARY を開発している shusann です！ 本エントリーでは、 もしあなたが明日から急にフロントエンドエンジニアを任されることになっても困らないよう、私がこの半年間で何をどうやって学んできたかをシェアすることで道しるべとなれることを目指しています。 これから同じ境遇に立つ人やフロントエンド興味あるけど何から手を付ければいいかわからないようなエンジニアにとって、この記事が参考になれば嬉しいです 😍 とはいえ、本エントリーは半自伝的な記事で「ああ、こんなことやってたんだ」という読み物として話半分に読んでいただければ幸いです。 自己紹介 本題の前に、半年前の入社当時の自分の状
Sunsetting Create React App – React
Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch. When we released Create Re
Reactチームが見てる世界、Reactユーザーが見てる世界
Reactはシンプルなサイトから複雑なアプリケーションまで、非常に幅広く採用されている人気のフレームワークです。OSS化から10年以上の歴史がありながら、昨今もReact Server Componentsなど革新的なアイディアを我々に提案し続けています。 一方で、React Server Componentsへの批判的意見やBoomer Fetching問題などを見ていると、Reactチームと一部Reactユーザーの間には意見の相違が見て取れます。この意見の相違はそれぞれが置かれた状況の違いから生じるもの、つまり「見てる世界が違う」ことに起因してると筆者は感じています。 本稿では「Reactチームの見てる世界」を歴史的経緯を踏まえながら考察し、Reactの根本にある思想やコンセプトに対する読者の理解を深めることを目指します。 要約 ReactはMetaの大規模開発を支えるべく開発され、シ
Shadcn/UIの中身を詳しくチェック
なんでパッケージではなくソースコード？ ユーザーがコンポーネントのビルドとスタイルを自由に決定できるようにするためです。 基本設定から始めて、好きなようにコンポーネントをカスタマイズすることができます。 npmパッケージの場合、スタイルが固定されているため変更が難しいですが、Shadcn/UIはソースコードで提供されているため、より柔軟にカスタマイズが可能です。 Shadcn/UIは、「コンポーネントのデザインと実装は分離されるべきだ」というコアな原則に基づいて作られています。そのため、すべてのコンポーネントは2つのレイヤー構造で構成されています。 構造と動作レイヤー Headlessな実装: Shadcn/UIのコンポーネントは「headless」な形で実装されています。「headless」とは、UIの機能部分だけを提供し、具体的なスタイリングは含まないことを意味します。 Radix U
今アツい（気がする）UIライブラリ...?ではないらしい shadcn/uiを使ってみる - Nealle Developer's Blog
この記事はニーリーアドベントカレンダー2024の10日目の記事です。 はじめまして、Nealleのデザイナー音部です。 profile.unotovive.io アドカレでデザインチームのことを書くつもりが、全然思いつかずにフロントエンドの話をします。 タイトルにある通り、shadcn/uiというモノの紹介と、実際に使ってみたレポートです。 shadcn/uiとはそもそも何なのか? ui.shadcn.com shadcn/uiは、2023年のJavaScript rising starで総合1位に輝いたReactエコシステム(?)です。 2位は2022年王者のBunでしたが、10k以上の差をつけて1位に輝いていて、アツいといっても過言ではなさそうです。 最初はMaterial UIやChakuraなどと同じようなUIライブラリかと思っていましたが、どうやら「コピペで使えるUIコンポーネン
React Server Componentsを理解したい
はじめに App Router はこれまでの React や Pages Router による書き方と大きく異なります。これは、React Server Components（RSC） というアーキテクチャが導入され、開発の考え方が大きく変化したからです。そのため、App Router を理解するためには RSC の理解が必要になります。 しかし、私は RSC の理解に苦戦しました。 この記事は、そんな私が RSC の理解を深めるために様々な記事から学んだ内容を言語化したものです。 まず初めに、CSR や SSR といったこれまでのレンダリング手法について復習し、これらが抱える問題を確認します。その後、その問題を解決する RSC が何者なのか？を理解します。 CSR の復習 React では CSR 戦略が用いられてきました。 CSR では、クライアントが受け取るのは次のような中身のない空
React Query Builder
(firstName like 'Stev%' and lastName in ('Vai', 'Vaughan') and age > '28' and (isMusician = TRUE or instrument = 'guitar') and groupedField1 = groupedField4 and birthdate between DATE '1954-10-03' and '1960-06-06') Export/importConvert to and from SQL, MongoDB, and several other query formats. The code block reflects the query above converted to the selected format.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Intent UI
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
