React 19の型定義では「FC」と「ReactNodeを返す関数」が違う - Qiita
対象読者: 現在React 18以前を使っていて、React 19にそのうち上げたいと思っている方。React 19の型定義の背景を知りたい方 みなさんこんにちは。筆者は最近気づいたのですが、React 18から19に上げるときに問題になる（型エラーになる）パターンがあります。React 19アップグレードガイドにもいくつか型の変更が載っていますが、それ以外のパターンです。 考えてみれば確かにそうなのですが、これに関する情報をあまり見かけたことがないのでメモ書き程度に記事にしておきます。 FCとReactNodeを返す関数 問題は、FC型にあります。FC型、つまりFunctionComponent型は、React 18ではだいたい以下のような定義でした1。
React Three Fiber入門 - ReactとThree.jsで始める3D表現 - ICS MEDIA
「React Three Fiber」は、Three.jsをReactで扱うためのライブラリです。Reactの特徴である再利用可能なコンポーネントを活かしながら、宣言的に3Dシーンを構築できるのが大きな魅力です。 通常のThree.jsでは、メッシュの作成、マテリアルの適用、シーンへの追加などひとつひとつの処理を命令的に記述する必要があります。しかしReact Three Fiberを使えば、裏側の複雑な処理をライブラリ側が担ってくれるため、作りたいシーンをコンポーネントとして宣言でき、処理の流れがわかりやすいコードが書けます。 ▼ 通常のThree.jsで立方体メッシュを記述する例 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshNormalMaterial(); const box = n
16 React component libraries and kits for improved UI - LogRocket Blog
A React UI library or React component library is a software system that comes with a collection of pre-built and reusable components — tables, charts, modals, navbars, cards, buttons, and maps that are ready to use in React applications. These components are out-of-the-box, and beautifully and uniquely styled. These built-in React components and ready-to-use design elements reduce the need to buil
React Router から TanStack Router へ徐々に移行する技術
この記事は情報の提供のみを目的としています．今回紹介する方法はどちらのライブラリにおいても公式の手法としてサポートされていません．この方法を用いたことにより発生したいかなる損害について，私および弊社は責任を負いません． はじめに 世間では Next.js や Remix といったフルスタックフレームワークが話題となっていますが，皆さんはどのような環境で React アプリを開発しているでしょうか．Vite などのツールを使ってビルドされた，いわゆる SPA [1] を開発されている方もまだまだ多いのではないでしょうか． 私もその一人です．とくに弊社が提供する workhub では各組織の管理画面として Web アプリを提供しており，これは React + Vite の構成となっています． こうした SPA であって，かつ多画面を提供するアプリの場合，一般にルーティングライブラリが利用されま
React.jsとNext.jsの違いについてまとめてみました - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? React.js と Next.js は、どちらも人気のあるフロントエンド開発ツールですが、その目的や提供される機能に違いがあります。以下に説明します。 1. 概要: React.js と Next.js の違い React.js ライブラリ: React.js は Facebook（現 Meta）が開発した UI（ユーザーインターフェース）構築用の JavaScript ライブラリです。 軽量で柔軟: 必要最低限の機能しか提供しないため、他のライブラリ（例: React Router, Redux）を追加して構築します。 クライアント
ReactカスタムフックからヘッドレスChromeまで！リアルタイム静止画編集機能の作り方を、リチカのエンジニアに聞いてきた
――現在、どんなプロダクト開発に従事していらっしゃいますか？ 杉本：誰でもかんたんにマーケティング動画や静止画を作れるWebサービス『リチカ クラウドスタジオ』を開発しています。 『リチカ クラウドスタジオ』は、業種別や配信媒体別の数多くのフォーマット（型）をベースに、クオリティの高い動画を誰でもかんたんに作成できるのが特徴です。当社は元々制作会社だったため、社内にプロのクリエイターが多数在籍しているので、彼らによって制作されるフォーマットが大きな強みのひとつです。 朝賀：昨年後半からは、『リチカ クラウドスタジオ』の新機能の開発プロジェクトが進行していて、現在は主にそちらの開発に従事しています。 ――どのような新機能か、伺ってもよろしいですか？ はい、大きく分けて2つありまして、静止画のリアルタイム編集機能と、比率違いの静止画を一括制作できる機能です。 これにより、ブラウザ上で作成したイ
RustのReactライクなフロントエンドフレームワーク「Yew」を使ってみる - Qiita
はじめに この記事は、以下の記事の派生というかちょっとYewと言うフレームワークに寄った話を書きます。 というわけで、バックエンドもフロントもデスクトップアプリも全部Rustで出来たら最高じゃね？ カレンダーアプリ バックエンド（AWS Lambda） フロントエンド（AWS Amplify） 作り方はそれぞれ見てもらうとして、とりあえずYewの使い方みたいなところを書いていく Yewを使うと何が嬉しいのか 以下の2点かなと思ったりする。 Rustでフロントを記述できる（WASM） Reactっぽく書ける はい。 Yewの基本 JavaScriptと通信をするためのFFI機構 これがあれば、Rustで書きたい部分はRustで書いて、JSでしか書けない部分はJSを使えば解決できる。 例えばサードパーティのJSライブラリを使って表現を豊かにしたい場合などに、RustからJSのグルーコードを呼び
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40％削減、ローカルサーバ起動の高速化など性能向上
Reactベースのフレームワーク「Next.js 13.5」正式リリース。使用メモリ40％削減、ローカルサーバ起動の高速化など性能向上 Reactベースのサーバサイドフレームワークとして知られるNext.jsの最新バージョン「Next.js 13.5」正式版がリリースされました。 使用メモリの削減、ローカルサーバの起動高速化などの強化が行われています。 Next.js 13.5 22% faster local server startup 29% faster HMR (Fast Refresh) 40% less memory usage Optimized package imports `next/image` improvements And over 438 bugs patched!https://t.co/edW10gB19X — Vercel (@vercel) Sept
React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ｜ハイクラス転職・求人情報サイト アンビ（AMBI）
ハイクラス求人TOPIT記事一覧React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ 群雄割拠のフロントエンドフレームワーク界でも、一歩抜きん出た存在として常に注目を集めてきたReact。2022年3月にリリースされたバージョン18では、Suspenseの安定化やStreaming SSRのサポートなど数々の新機能を取り入れて話題になりました。本記事では、React／TypeScriptのスペシャリストとして幅広く活躍されているuhyoさんが、現時点におけるReactのベストプラクティスについて解説します。 Reactは、Meta社により開発・公開
React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開
React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開 代表的なJavaScriptのフレームワークの1つであるReact.jsがどのように生まれ、発展してきたのかが、React開発当時の関係者やメンテナーなどへのインタビューによって語られる動画「React.js: The Documentary」がYouTubeで公開されています。 動画の作成と公開を行ったのは、ITエンジニア向けの転職紹介などキャリアサービスを提供しているHoneypot社。同社は以前にもKubernetesの歴史を紹介したドキュメンタリー動画「Kubernetes: The Documentary」を公開しています。 参考：KubernetesをGoogleが開発し、
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応 GoogleはすでにリリースしているWebブラウザのChrome 110と現在開発中のChrome 111に搭載されているDevToolsで、Angular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応したことが明らかになりました。 2月16日付けで公開されたブログ「What's New in DevTools (Chrome 111)」では、Chrome 111で、Angularのシンタックスハイライトに対応したことが「Better syntax highlight for Angular」の項目で紹介されています。 下記のサンプルでは、例えば2行目のダブルクオーテーション内の値などがAngul
[Next.js]フロントテストのコストはStorybookで削減出来る
１．フロントテストと Storybook の活用 フロントテストのどこにコストがかかるのか バックエンドのテストはシンプルな入力と出力が多いので、テスト作成は比較的簡単です。一方、フロントエンドのテストは UI イベントや動的な要素も含まれ、複数の出力があるため、テスト作成はより複雑になります。これにより、テスト作成のコストが増大します。 生 jest で書くフロントテストと心の目 Jest は主に JavaScript のユニットテストをサポートするツールであり、UI レンダリングのテストを行うためには対応するライブラリが必要です。Jest は DOM イベントをエミュレートすることはできますが、ユーザーの操作と同様のインタラクションを再現することは困難です。機能の多いコンポーネントをテストする際に、Jest を使用するとテストコードが複雑になりがちです。そして最大の問題は、視覚的な部分
![[Next.js]フロントテストのコストはStorybookで削減出来る](https://cdn-ak-scissors.b.st-hatena.com/image/square/e59dab172a62880f0d12c9d5b472def22b806b9b/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--eeK1m67S--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNext.js%25255D%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252583%252586%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252581%2525AE%2525E3%252582%2525B3%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252581%2525AFStorybook%2525E3%252581%2525A7%2525E5%252589%25258A%2525E6%2525B8%25259B%2525E5%252587%2525BA%2525E6%25259D%2525A5%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E7%2525A9%2525BA%2525E9%25259B%2525B2%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyL2VlZTgzMDYyMDQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACMTiAE)
Next.js アプリケーションの共通コンポーネント開発 - クックパッド開発者ブログ
こんにちは。レシピサービス開発部のkaorun343です。クックパッドではスマートフォン向けページにおける開発者体験向上のために、レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話にて紹介したとおり、Next.jsとGraphQLを用いたモダンな環境へと移行を進めています。例えばモバイル端末からのアクセスでURLがトップページの / であれば Rails、レシピ詳細ページの /recipe/:id であれば Next.js アプリにルーティングされるようになっています。現在ではレシピ詳細ページだけではなく検索結果ページやつくれぽ詳細ページ、MYフォルダページなどもNext.jsアプリケーションに置き換わっています。今回はその移行により生じた課題と取り組み方、それから併せて実施したモノレポ環境整備について紹介します。 共通コンポーネントの導入背
80以上のUIコンポーネントが用意されたオープンソースのReact.js用UIライブラリ・「PrimeReact」 - かちびと.net
PrimeReactは80以上のUIコンポーネントが用意されたオープンソースのReact.js用UIライブラリです。更に姉妹プロジェクトのprimeiconsで200以上のアイコンも用意されています。 Webサイトやアプリに必要なアレコレが纏められており、基本的なコンポーネントはもちろん、日付やカラーなどの各種ピッカーやオートコンプリート、カンマセパレーター、テキストエディタなどなど挙げればきりがないほどの、どこかで見たことのあるUIを簡単なコードで実装出来るようになっています。 勿論、テーマの変更も可能でテーマビルダーも用意されているのでオリジナルのカラースキームで手軽に実装可能です。尚、こちらはご存知の方も多そうですがPrimeFacesというプロジェクトで、他にもAngular版とVue版も用意されているので合わせてご参照ください。 PrimeReact
Reactベースのチャートツール選定(2022年版)
初めに 何気にzenn初投稿なのでお手柔らかにお願いいたします。 業務でReactを使用しており、チャートツールの導入を行う際に良さそうなライブラリを調査しました。 ※スター数は調査時点での数です サンプル実装 全部ではないですが、棒グラフを自分で実装してみました。参考にどうぞ。 調査基準(選定基準) Reactベースであること 定期的にメンテナンスがされていること スター数がある程度多いこと チャートが見やすいこと できることが多いこと(チャート数が多いこと) 開発していてモチベが上がりそうなこと(モチベ大事) 今回調査したライブラリ react-chartjs-2 [特徴] Chart.jsベースのコンポーネント スター数: 5.3k Ant Design Charts [特徴] G2Plot, G6, X6, L7Plotベース(これらが何かは知らない) スター数: 1.2k マップ
Reactの今まであまり触れてこなかった機能について試したことのまとめ
react18.2で検証 createPortal 以下はドキュメントの引用 ポータル (portal) は、親コンポーネントの DOM 階層外にある DOM ノードに対して子コンポーネントをレンダーするための公式の仕組みを提供します。 ポータルを使うと<div id="app">以下に書かれた<Modal>コンポーネントがDOM上では<div id="portal">以下にレンダリングされる。ただし、イベントは<div id="app">にバブリング(子要素で発生したイベントが親要素に伝搬)する。 import { FC, useState, ReactNode, useEffect } from "react"; import { createPortal } from "react-dom"; const Modal: FC<{ children: ReactNode }> = ({
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Next.js × Docker】Dockerコンテナで`npm run build`すると`Cannot find module`と言われた時の対処法【備忘録】 - Qiita
const Hoge: React.FC<Props>=()=>って書いてたら思考停止系と言われたので調べた