概要 みなさんは React のプロジェクトでアイコンが必要な際はどのように実装していますか？ SVG の埋め込み？それとも Font Awesome？ 私は、主に「React Icons」という React 用のライブラリを使用しています。 React Icons は、豊富な種類のアイコンが揃っておりシンプルで使いやすいため、大変重宝しています。 この記事では、React Icons の紹介とその使い方について解説しています。 それでは、早速みていきましょう。 React Icons とは React Icons は、Font Awesome や Material、Codicons（VSCode のアイコン）などのアイコンを簡単に利用することができる React 用のライブラリです。 npm パッケージとして提供されているため、npm installを使用してプロジェクトに導入します。
function ProfileDetails() { const user = resource.user.read(); // throw promise here return <h1>{user.name}</h1>; } この仕様自体、それだけで記事になるほど面白いです。（ここでは割愛します。） React Freeze React Freezeは、そんなSuspenseを利用したライブラリです。 元々React側は、データ取得の際に使うことが主なユースケースと言っていたのに対して、このライブラリの目的は、ある瞬間にユーザーに表示されていないアプリの部分について、不要な再レンダリングを避けることとなっています。 どうやって実現しているのでしょうか？ 実は、ライブラリの実装もシンプルで興味深いです。 // ref: https://github.com/software-mansi
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
この記事で話すこと この記事ではReact入門者の方、UIの状態管理についてよく悩んでしまう人を対象に書いています。 いきなり複雑な状態管理を考え出すのではなく、そもそも宣言的UIの構築プロセスを頭の中に置いてそのコンポーネントの状態を特定し、整理することで管理する状態を明確にします☺️ 宣言的UIの構築プロセスを通し、react入門・初心者がいきなり状態管理を考え出して手が動かなくなる状態を脱却することを目的にしています。 宣言的UIの構築をフォームコンポーネントを例に４STEPで理解する 今回は「入力値を送信するテキスト入力フォーム」を例にとって4stepでプロセスを理解する コンポーネントの状態を列挙してみる 状態変化のきっかけのトリガーを特定して、フローを作る useStateを使って状態を宣言する 状態のリファクタリング（今回は不要・重要でない状態変数を削除する） 目標：最初から
![[React🐣 ]宣言的UIの構築をシンプルなプロセスで理解する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e5b5711dc72e9706437d1eed92be13b5f625fe16/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--QXmsVPQe--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%252520%252520%25255D%2525E5%2525AE%2525A3%2525E8%2525A8%252580%2525E7%25259A%252584UI%2525E3%252581%2525AE%2525E6%2525A7%25258B%2525E7%2525AF%252589%2525E3%252582%252592%2525E3%252582%2525B7%2525E3%252583%2525B3%2525E3%252583%252597%2525E3%252583%2525AB%2525E3%252581%2525AA%2525E3%252583%252597%2525E3%252583%2525AD%2525E3%252582%2525BB%2525E3%252582%2525B9%2525E3%252581%2525A7%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aart_htr%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzVmZmJmYTgzYTkuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
年末にReact Router v7がリリースされましたね！ これによりWebフレームワークであるRemixとルーティングライブラリであるReact Routerが統合され、1つのプロジェクトとなりました。 React Router v7で実現する完全純粋コンポーネント開発 統合自体が一つの大きなニュースなのでそこに注目が集まりがちですが、当然書き方もいくつか変化しています。 私としてはこの書き方の変化からほとんどのコンポーネントを純関数で表現できるようになったことに大きく注目しています。 純関数とは 純関数とは、ひとことでいうと 隠れた入出力がない関数のこと です。 隠れてない入力は引数、隠れてない出力は戻り値で、それ以外の入出力がある関数と言えます。 いくつか例をあげると、以下のようなものが挙げられます。 // 純関数 function add(a: number, b: number
If you are creating component libraries and design systems in React, you might already have fowarded Refs to the DOM elements inside your components. This is especially useful if you wrap basic components or leafs in proxy components, but want to use the ref property just like you’re used to: const Button = React.forwardRef((props, ref) => ( <button type="button" {...props} ref={ref}> {props.child
Next.js でテスト駆動開発を進める時に必ず関門となる各種機能のモックに関するベストプラクティスを紹介します。 今回は Router などの機能をモックした render を作成して、共通のコンポーネントとして利用することを目標としましょう。 バージョン情報 Node.js：15.11.0 React：17.0.2 Next.js：10.2.2 Jest：26.6.3 React Testing Library @testing-library/react：11.2.5 Router を使用した際の問題点 next/router
どのようにコンポーネントを分類していくか 個々のコンポーネントがが単一の責任のみ負っている状態であれば、コードの見通しも良くなる上、後々のメンテナンスも容易です。 まずは「複数の関心ごとを１つにまとめない」という原則（単一責任の原則）から分類の指針を考えていきます。 フロントエンドにおける関心ごとですが、大別すると APIとの接続 View（表示とイベント実行） 状態管理 以上３つに集約されるのではないでしょうか。 では、これらの関心ごとをどの様に切り分けていけば良いのか考えていきます。 APIとの接続 まずはAPIとの通信ですが、こちらはコンポーネントの外で管理した方が良いと考えています。 各コンポーネントに通信に関わる処理がベタ書きされている状態だと、エンドポイントの変更等に弱くなり、通信処理の再利用も面倒です。 それに、「フロントの状態管理 / 表示」と「外部との接続」はそれぞれ別種
javascripter です。ハローでは、初期メンバーとしてプロダクトのローンチ前からAutoReserve の開発に関わっています。 前回の記事に引き続き、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 前回の記事については、こちらを参照下さい。 Reactベストプラクティス: react-hooks/exhaustive-de
この記事は株式会社ビットキー Advent Calendar 2023 5日目の記事です。 はじめに この記事では React を用いたフロントエンドアプリケーションのディレクトリ構成について検討した内容を紹介します。 現在フロントエンド開発を行っていて、ディレクトリ構成にお悩みの方の参考になれば幸いです。 ※ State 管理についての良し悪しやその他 React 向けのフレームワークライブラリについては本記事では触れません。 今回対象とするプロダクト ビットキーのHome事業では、不動産管理会社向けのB2B2Cプロダクトを展開しています。 その中でも不動産管理会社の方が利用する管理画面について、リリース後から様々な機能や画面が実装されシステムが巨大化してきたので、ディレクトリ構成を見直す機会が訪れました。 参考値として、現在のプロダクトは100画面を超えており、ソースファイルも1500
10年間で約15万行のコードを抱え、jQuery -> React + DDD -> React + Redux とアーキテクチャの変遷を辿ってきたChatworkを事例として、 組織フェーズの変化によって発生する課題と、それらをアーキテクチャの観点からどのように乗り越えるか紐解きたいと思います。
CSS in JSはJavaScriptのコード中にCSSを書くプログラミング手法で、styled-componentsなどがメジャーどころです。現代的な開発では、ReactやVueといったフロントエンド用のViewライブラリを使う際にCSS in JSのお世話になることがよくあります。 この記事では、次の時代のCSS in JSはWeb Componentsベースのものになるのではないかという話をします。 Web Componentsの復習 Web ComponentsはいくつかのWeb標準の総称であり、特に重要なのはCustom ElementsやShadow DOMです。いずれも、V1と呼ばれる仕様は全てのモダンブラウザでサポートされています（Safariが一歩遅れていて少し心配ですが）。 https://caniuse.com/custom-elementsv1 https://c
半年ほど前にDenoのフロントエンド開発についてまとめた以下のような記事を書きました。 ここ半年程でまた色々と変化があったため、改めてまとめてみます。 要約 DenoにNode.js互換モードが実装されました Aleph.js v0.3 betaがリリースされました Freshやpackup, Ultraなどの新しいフレームワーク/ツールが登場しました SnelによってSvelteアプリが作れるようになりました vnoがSSRやSSGなどをサポート VelociraptorがGit hooksをサポート npmパッケージとの相互運用性について Node.js互換モード Deno v1.5でNode.js互換モードが実装されました。 現時点でもexpressやkoaなどのパッケージがある程度動作するようです。 現在、このNode.js互換モードを使用して、ViteやNext.jsなどを動かす
The sweet spot between low-code and full-code.Drag-and-drop tools shine initially but collapse under the weight of complexity. Refine offers comparable speed at the start and infinite scaling in the long run. Business applications not only share fundamental UI elements, but also the underlying logic.Stop writing repetitive code for CRUD, security and state management. Let Refine automatically tran
はじめに この記事は、Qiita: TypeScript Advent Calendar 2020 24 日目の記事です 🎄✨ 今回は、Front-End Study #1「Cloud Native時代のフロントエンド」 - connpass で紹介されていた Prisma 2 を、同じく紹介されていた frourio を使って試してみます。 環境構築 frourio で一気に まずは create-frourio-app でサクッと環境構築します。 今回は以下の構成で試してみます。 MySQL を建てるのが面倒な場合は、SQLite でもいいと思います。 Core framework of frourio : Fastify Frontend framework : Next.js Building mode : Basic HTTP client of aspida : axios
この記事は食べログアドベントカレンダー2020の1日目の記事です。 2020年も残り1ヶ月になりました。早いものですね。 この記事を執筆するのは、食べログでフロントエンドチームに所属する@hagevvashiです。 はじめに食べログではRuby on Rails(以下RoR)を用いており、サイトの大部分がRoRによってHTMLのレンダリングまで行われています。JavaScriptでの実装はほとんどがjQueryなどを用いた非宣言的なものとなっています。 歴史あるサービスなので、それなりにコード量が増えかつ複雑になっています。例えば既存のjQueryやBackbone.jsで書かれたソースコードを変更するのに予想外のコストを強いられたりします。 食べログを引き続きユーザにとって価値のあるサービスにするためには、いち早く新しい機能を届ける必要があります。そして、そういった予想外のコストを少しで
この記事は一休.com Advent Calendar 2024の23日目の記事です。 一休レストランのフロントエンドアーキテクトを担当してる恩田(@takashi_onda)です。 はじめに 先日の JSConf JP 2024 で「React への依存を最小にするフロントエンドの設計」という内容で登壇しました。 speakerdeck.com 発表では駆け足になってしまった、React への依存をしていない Vanilla JS 部分をどのように構成しているのかを、Dependency 管理とテストの文脈でご紹介したいと思います。 Dependency とは Dependency Injection の Dependency です。 タイトルも「Jotai を使った DI とテスト技法」とした方が伝わりやすいとは思います。 ですが、厳密には injection していないので、あえて
はじめに 「eslint-plugin-react の plugin:react/recommended に含まれていないルールにも有効なものがあるよ！みんなで同じようなコンポーネント書いて、レビューを楽にして保守性も上げよう！」という内容の記事です。 この記事では React の関数コンポーネント、TypeScript、Prettier を使っている前提で書いています。そのため、タグの位置調整など Prettier で対応可能なものは Prettier に任せる方針です。 先に結論の .eslintrc.cjs を載せておきます。React 以外の設定は省いています。 { extends: [ "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended" ], rules:
Robin Wieruch氏によるHow to use React Testing Library Tutorialを著者の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://www.robinwieruch.de/react-testing-library Kent C. Dodds氏によるReact Testing Library (RTL)がAirbnbのEnzymeに取って代わるものとしてリリースされました。EnzymeはReact開発者にReactコンポーネント内部をテストするためのユーティリティを提供しますが、React Testing Libraryは一歩さがって、「Reactコンポーネントを完全に信頼するためにはどうテストすべきか」を問いかけます。コンポーネントの実装の詳細をテストするのではなく、React Testi
はじめに 最近、周囲から「useEffectでバグった」という声を聞くことが増えました。そこで、今までなんとなくで使っていた useEffect とは何かを正しく理解したいと思い記事を書くに至りました。 この記事はReactの再レンダリングの仕組み(propsやstateが変更される度に再レンダリングされる)を理解している方向けです。 環境 TypeScript: 4.9.3 React: 18.2.0 そもそもuseEffectって？ 公式ドキュメントには以下のように記載されていました https://beta.reactjs.org/learn/synchronizing-with-effects 一部のコンポーネントは、外部システムと同期する必要があります。たとえば、React の状態に基づいて非 React コンポーネントを制御したり、サーバー接続をセットアップしたり、コンポーネン
はじめに こんにちは。Magic Momentでエンジニアをしている伊藤です。 いつもはMagic MomentのプロダクトであるMagic Moment Playbookの開発に携わっています。 元々はGo言語エンジニアとしてMagic Moment Playbookのバックエンド開発に参加し始めました。 ですが、今回フロントエンドエンジニアとしてフロント側の開発に参加することとなりました。 Go言語を使っていたエンジニアがReactを使い始めて驚いたこと、理解しづらかった部分などを書いていこうと思います。 これからフロントをやってみたいと思うバックエンドエンジニアの方の参考になれば幸いです。 そもそもReact.jsとは Magic Moment PlaybookのフロントエンドはReact.jsを使って構築されていますが、そもそもReactとはなんなのでしょうか。 ReactはFac
サムネイル こんにちは！kintone のフロントエンド刷新プロジェクト（フロリア）の@nkgrnkgrです。 フロリアでは、kintone のフロントエンドの ClosureToolsで書かれたコードを React に置き換えています。 本記事では フォーム画面の UI の状態管理に使うライブラリを選定する際に、どのような検証と意思決定を行ったかについて紹介します。この記事が UI の状態管理を行う際に何かの参考になれば幸いです。 kintoneのアプリ作成フォーム はじめに アプリ作成フォーム画面 アプリ作成フォーム画面とは？ ユーザーの操作と状態管理で考慮すべきこと ライブラリを選ぶ上での前提 今回の選定で考慮したライブラリの種類と特徴 ３つのライブラリの特徴 Redux(ReduxToolkit) について Zustand について Jotai について 利用状況とプロダクト要件を
みなさん、フロントエンド開発時のモックサーバーは何を使っていますか？モックサーバーといっても様々なアプローチがあると思いますが、最近活用している MSW が便利だったので紹介します。MSW（Mock Service Worker）はブラウザリクエストを Service Worker がインターセプトし、任意のレスポンスを返すことが出来るライブラリです。 次の様な Express 風ハンドラーで、モックレスポンスを表現することができます。なんとこのコードがブラウザで動いてしまいます。 import { setupWorker, rest } from "msw"; const worker = setupWorker( rest.get("https://myapi.dev/csr", (req, res, ctx) => { return res( ctx.json({ title: "C
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 で書かれています。 プロジェクトを作成する 以下のコマン
Written by Oren Farhi, Front End Engineer Tech Lead, follow me on This article has been translated: Chinese 1 (by Qlly) Chinese 2 (by Qlly) Korean (by Ykss) I bet the need to tweak perfomance comes in a certain phase of development for every developer, in every app. There are very good resources and articles about how to tweak performance in react and this article is no exception. I thought I will
育休前は React と go をよく書いていましたが、育休が終わって Android の仕事につくことになったので、Jetpack Compose の勉強をしました。といっても自分ばズブの素人というわけではなく、Jetpack Compose が導入される前には Android のエンジニアで、確かマルチモジュールが世の中に出始めたかな〜ぐらいの時代で Web 方面に進んだので、そこらへんの時代で知識が止まっています。 Jetpack Compose とは https://developer.android.com/jetpack/compose Android ネイティブアプリケーションを、宣言的 UI でアプリを作ることができるキットです。これまで Android は Activity（いわばウィンドウ。一画面に必ず１つしかない） や Fragment（いわばウィンドウの上における、
(Baffled by all these logos? Check out our architectural options guide to make sense of it all!) Start with a simple key-value store.Creating a Store requires just a simple call to the createStore function. Once you have one, you can easily set Values in it by unique Id. And of course you can easily get them back out again. Read more about using keyed value data in The Basics guide. import {create
はじめに 株式会社ナレッジワーク Engineering Division のわだまる（@wadackel）です。 ナレッジワークの Web フロントエンド開発では、Storybook を活用したコンポーネント開発を行っています。そして、昨年末により良いコンポーネント開発の基盤整備を進めるべく @storybook/test-runner（以降 Storybook Test ruuner）を導入しました。導入目的としては主に、各 Story に対するスモークテスト、play 関数を活用したコンポーネントテストを行うことです。 さらに、ナレッジワークでは前述した通常のコンポーネントテストに加えて、reg-suit と storycap を利用した Visual Regression Testing（以降 VRT）を行っています。 これまでは Storybook を活用したテストは VRT の
Reactにおいて、useEffectのユースケースとして知られているのが、DOMノードに直接アクセスしなければいけない場合です。useRefでDOMノードをrefオブジェクトに取得し、エフェクト内からDOMノードにアクセスするというのがその場合の基本的なやり方です。 このようなuseRef + useEffect の使い方は、問題ない場合もありますが、実は別の手段を使った方がいい場合もあります。その場合に別の手段として適しているのがrefコールバックという機能です。 そこで、この記事ではどのような場合にuseRef + useEffectよりもrefコールバックが適しているのか、そしてrefコールバックを使う場合の注意点について解説します。 復習: refコールバックとは React DOMでは、組み込み要素（divなどHTMLの要素）に対してrefという特殊なpropを与えることができ
React Admin とは ReactとMaterial Designを用いて、REST/GraphQL APIの上で、ブラウザ上で動作するデータドリブンなアプリケーションを構築するためのフロントエンドフレームワークです。 引用元：react-admin REST API から取得したデータを表示するテーブルやダッシュボードを数行のコードの記述で実装できるライブラリです。認証やソート機能、検索機能、CSV エクスポート機能など、管理画面にほしい機能を一通り備えています。Material UI がベースに組み込まれているので UI コンポーネントや Theme 機能などは Material UI の仕様と同様です。 できたもの User データと Post データの一覧を表示するデータテーブルを作成しました。 Getting Started create-react-appで React
Real .mp4 videosRemotion renders all frames to images and encodes them to a real video - audio support included. WebM and other formats are also supported. Fast and delightful editingPreview your video in the browser. Fast refresh while the video is playing. Scrub through the timeline to get every frame perfect.
This post is for Day 8 of Mercari Advent Calendar 2022, brought to you by Williams Kwan from Mercari Core team and Faisal Rahman from the Mercari Architect team. Intro Mercari internal design systems power the UI in Mercari web apps. It allows Frontend engineers to implement UI changes quickly by providing UI building blocks. The design system is currently built using Web Components but we are in
「フロントエンドLT会 - vol.8」で発表したスライドです。 https://rakus.connpass.com/event/255095/
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
概要 Vueの作者であるEvan You氏は、Vueのデフォルトバージョンが2022年2月7日以降3.x系に切り替わる事を開発者ブログにおいて発表しました。 それに伴い、Vue2.x系の最後のマイナーバージョンであるVue2.7が2022年7月1日にリリースされ、こちらの LTS (long-term support)はリリースから18ヶ月であることから、Vue2.x系へのサポートは2023年12月を持って完全に打ち切られる事となりました。 以下の記事でも語られている通りVue2とVue3では破壊的変更が多く、移行コストが格段に高いことから、多くの開発チームがVue３.x系への移行を頑張るかReact等の他のフレームワークへの乗り換えをするかの選択を迫られています。 3.x系へ移行すべきかフレームワークを乗り換えるべきかの是非についてはこの記事では触れませんが、Vueの破壊的変更に伴って多
初めまして、プログラマーを始めて3年目の山田です。今回、日本発のReact UIコンポーネントライブラリYamada UIをリリースしたので、その素晴らしい機能の数々を紹介していこうと思います。 ちなみに、Yamada UIのYamadaは山田が名付けたわけではありません。気になる方は、山田に聞いてください。 Yamada UIとは 一言で言うならば、『すべてのUIコンポーネントライブラリを超えた(つもり)』のUIコンポーネントライブラリです。 現在のUIコンポーネントライブラリで代表的なものと言えば、Material UIやChakra UIであり、フロントエンドエンジニアであれば、誰でも知っている知名度だと思います。 しかし、現在主流となっているUIコンポーネントライブラリは数年前に開発されたものであり、色々な面(カラーモード・アニメーション・CSSプロパティ・型安全など)において首が
React Aria Components は Adobe によって提供されている Headless UI コンポーネントライブラリです。振る舞いや国際化に, アクセシビリティに関する機能を備えており、Button や Input, TextField, Label などのシンプルな要素から、DatePicker や ComboBox などの様々なコンポーネントが提供されています。 今回は React Aria Components の設計について紹介します。 React Aria Components のコンポーネントの設計 React Aria Components の API はコンポジションを中心に設計されています。これにより、パターン間で共通のコンポーネントを共有することも、個別に使用することも可能です。なお、コンポジションについては React Component Compos
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
