React Application Architecture for Production〜これ一冊で全てが網羅〜 - Qiita
はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言
【React】useEffect解体新書 - Qiita
はじめに 最近、周囲から「useEffectでバグった」という声を聞くことが増えました。そこで、今までなんとなくで使っていた useEffect とは何かを正しく理解したいと思い記事を書くに至りました。 この記事はReactの再レンダリングの仕組み(propsやstateが変更される度に再レンダリングされる)を理解している方向けです。 環境 TypeScript: 4.9.3 React: 18.2.0 そもそもuseEffectって？ 公式ドキュメントには以下のように記載されていました https://beta.reactjs.org/learn/synchronizing-with-effects 一部のコンポーネントは、外部システムと同期する必要があります。たとえば、React の状態に基づいて非 React コンポーネントを制御したり、サーバー接続をセットアップしたり、コンポーネン
Reactに有利なベンチマークを作ってみた - Qiita
皆さんこんにちは。現在、フロントエンドでは宣言的UIが大流行しており、そのためのライブラリもReactを筆頭に複数存在しています。 ライブラリが複数存在するところには当然のように比較や論争が起こるものですが、UIライブラリの場合はパフォーマンスがよく焦点となります。 筆者はReactの信者ですが、Reactは古株ということもあってか、最近の議論ではReactは他のライブラリと比較されるかませ犬のような役割を担うのがよく見られます。「仮想DOMは必要ない」といった類のものです。 しかし、筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいるUIライブラリです。特に、Reactはパフォーマンスを高いユーザーエクスペリエンスのための手段として捉えており、ドキュメントにもユーザーエクスペリエンスという言葉が多く出てきます。 そこで、今回はReactが最も有利になるようなベン
React、過剰に複雑な代物。 - Qiita
はいさい！ちゅらデータぬオースティンやいびーん！ 今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感＝芽生えては大きく育った種 筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。 しかし、そんな筆者は、最近に
2022年Reactを使ってる人には必ず知っていてほしい最強のdata fetchingライブラリであるRTK Queryの優位性とメンテナンスの際に役立つTips - Qiita
import type { ConfigFile } from "@rtk-query/codegen-openapi"; // https://redux-toolkit.js.org/rtk-query/usage/code-generation#simple-usage const config: ConfigFile = { schemaFile: "https://petstore3.swagger.io/api/v3/openapi.json", apiFile: "./store/emptyApi.ts", apiImport: "emptySplitApi", outputFile: "./store/petApi.ts", exportName: "petApi", hooks: true, }; export default config; import { empty
React周りのいつかお世話になる記事たち（随時更新）
Reactで開発をしていく上でみなさんがいつかお世話になるだろうと思った記事たちです。 （僕はお世話になりました。これからもお世話になります。） これも良かったよっていう記事があればコメントで教えてください！ 🌟 = 特におすすめ Reactを最初から学ぶ・入門 React Docs BETA 🌟 りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】 - くるみ割り書房 ft. React - BOOTH 🌟 Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス RailsエンジニアのためのNext.js入門 - hokaccha memo React Glossary + Explain Like I'm Five 🌟 React Server Components 総まとめ Reactのレンダリングに関
そこのお前！ 余計なuseMemo1個に含まれるオーバーヘッドは余計なdiv 0.57個分だぜ！ - Qiita
※効果には個人差があります。 useMemoのオーバーヘッドについて ReactのuseMemoは、パフォーマンス最適化に使われるAPIです。コンポーネント内で計算やオブジェクトの生成を行う際に、以前の計算結果をキャッシュして使い回すことで再レンダリング時の計算を削減したり、新しいオブジェクトの生成を防ぐことができます。 useMemoに関しては、あくまで最適化のためのものであるから「無駄に使うべきではない」という言説がよく見られます。その理由は、useMemoのコストもゼロではなく、余計な使用はそれだけパフォーマンスの低下に繋がってしまうからです。 しかし、筆者はuseMemoのコストは微々たるものであり、本当に一目見て明らかに無駄でない限りは積極的に使うべきだと思っています。 そこで、筆者はuseMemoのオーバーヘッドがどれくらいかを調べるためのベンチマークを作成しました。この記事で
React 18に備えるにはどうすればいいの？ 5分で理解する - Qiita
React 18はReactの次期メジャーバージョンで、2021年の6月にalpha版が、11月にbeta版が出ました。また、Next.js 12でもReact 18のサポートが実験的機能として追加されました。React 18の足音がだんだんと我々に近づき、アーリーアダプターではない皆さんの視界にもいよいよReact 18が入ってきたところです。 特に、React 18ではServer-Side Rendering (SSR) のストリーミングサポートが追加されます。現在ReactでSSRを行いたい人の強い味方としてNext.jsが存在しているわけですが、Next.js 12でもReact 18を通してストリーミングの恩恵を受けることができます（Next.jsではSSR Streamingと呼んでいるようです）。また、厳密にはReact 18とは別ですが、React Server Comp
やっと React Server Components が腑に落ちた - Qiita
2020 年末に発表された React Server Components は、一言でいうと React コンポーネントをサーバ側でレンダーする仕組みです。……が、初見ではちょっと魔法すぎて訳が分からない技術でもあります。トーク動画だけ見てても「具体的にどんな仕組みで動いてるの？」みたいな疑問が山ほど浮かんでくると思います。 一体裏で何がどうなっているのか、この技術はどう使うのか、デモコードを触りながらやっと具体的に理解しはじめたので、なるべく動作が想像しやすいようにまとめました。なお、この記事単体よりは、他の記事や上記動画を見てある程度概要や公式の売り文句を掴んでからの方が理解しやすいと思います。 これまでの、普通にブラウザで動作するコンポーネントのことを、区別のためにクライアントコンポーネントと呼びます（単に区別のために既存のコンポーネントに別名がついただけです）。以下ではサーバコンポ
クリーンなReactプロジェクトの21のベストプラクティス - Qiita
コード品質向上のための実践的アドバイス Photo by Diana Polekhina on Unsplash. はじめに Reactは、構成の方法について特に決まりがありません。まさにこれが理由で、プロジェクトをクリーンで保守可能な状態に保つことは、私たちの責任なのです。 今日は、Reactアプリケーションの状態を改善するために従うべきベストプラクティスについて説明します。これらのルールは広く受け入れられているため、この知識を持つことは必須です。 すべてコードで示します。さあ始めましょう！ 1. JSXの省略形を使用する ブール変数の受け渡しには、JSXの省略形を使うようにしましょう。例えば、Navbarコンポーネントのタイトルの可視性を制御するとします。 悪い例
すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
5歳娘「パパのReact、めっちゃ遅いね！」 - Qiita
新しい記事もよろしくやで！ →ハスケル子「タグごとに色がついてたらいいのにな…」 38歳無職ワイ ワイ「（カタカタカタカタ・・・ッターン！）」 娘（5歳）「パパ、今日は何してるの？」 ワイ「今日はな、むかしWordPressで作った自分用TODOリストの」 ワイ「デザインをリニューアルしてんねん」 よめ太郎「（そんなことより職を探せや）」 娘「へぇ〜」 娘「WordPressってことは、PHPを書いてるの？」 ワイ「いや、ちゃうで」 ワイ「リニューアル後は、フロント部分をReactで実装しようと思ってな」 ワイ「そこで、WordPressをREST APIモードで使うことにしたんや」 ワイ「つまり、WordPressを管理画面つきAPIみたいに使うってことや」 娘「要は、WordPressをヘッドレスCMSとして使うんだね」 ワイ「ヘッドレス・・・？」 ワイ「ちゃうちゃう、管理画面つきAP
5歳娘「パパ、余分なpropsいっぱい書くんだね！」 - Qiita
新しい記事もよろしくやで！ 5歳娘「パパのReact、めっちゃ遅いね！」 とある平日 娘（5歳）「パパ、今日は何のお仕事してるの？」 ワイ「おお、娘ちゃん」 ワイ「今日はな、ショッピングサイトを作ってんのや」 今日のお仕事内容 ワイ「↓このデザインの通りに、コーディングをせなあかんのや」 娘「なるほどー」 娘「このショッピングサイトで商品を売りたい！っていうお店があったとして」 娘「そのお店の人が、最初にお店の情報を登録するためのページだね！」 ワイ「せやせや」 まずはデザインを眺めてみる ワイ「この店舗登録ページにはなぁ」 ワイ「↑こんな感じの」 ワイ「項目名と入力欄がセットになったパーツが何度も登場するから」 ワイ「そのためのコンポーネントを作ろうかなー、って」 ワイ「そう思ってたとこなんや」 娘「ふーん」 娘「ラベル付きテキストフィールド的なコンポーネントってことだね」 娘「どこまで
デザイナーでも分かる範囲のReact、その書き方と学び方 - Qiita
これは何 「デザイナーもReact書いてくださいよ」って空気になったときに読むと役立つかもしれない記事です 基本的に筆者が学んだ流れを記載しています そのため、世間一般のベストプラクティスではないと思います エンジニアの方から見ると邪道な流れ・説明の仕方かもしれませんが、デザイナーに教える上での分かりやすさを重視していますのでご了承ください この記事の中で使っているコードはこちらのリポジトリで公開しています コミットを辿ってもらえれば、各セクションの内容が全て見れます ※言い訳がましいですが、筆者もReactに精通している程ではなく「デザイナーにしては割と知ってる」レベルです もし説明に間違いや不足があれば編集リクエストをお願いします 対象読者 Web or UIデザイナー HTMLとCSSは普通に書けるけど、Reactはほぼ全く触ったことがない人 1人で完全に実装したいってほどではないけ
ユーティリティーファーストとTailwind CSSのススメ - Qiita
.align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-align: bottom; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; } これをHTMLに当てまくって画面を作ればほら簡単！お手軽に画面が作れるね！ と言う感じである。 これの良いところというのは、サクサク画面が作れること。これを体
React Hook Formのアップデート内容 - Version 7 - Qiita
(❤️ ブログ記事を翻訳してくれた日本のチーム、Kotaro、Keiya、Marinaに感謝します。) React Hook Formもそろそろ2年目を迎えようとしています。プロジェクト自体は、初日と同じように今でも活発に活動しています。この数年の間に、バージョン7の作成やデザインに繋がる多くの学びや経験がありました。私はここで、次のメジャーバージョンでの改善点とその理由をいくつか紹介します。フォームを構築するという点で、React開発者がより楽に開発できるようにする私たちの使命に変わりはありません。 V7 visions:  📖 (DX)厳密に型付けされたフォーム 🏋🏻♀️ シンプルさと一貫性 🏎 パフォーマンス 💁♂️ パッケージサイズの削減 このビジョンを説明するために、APIの変更点を見ていきましょう。 </> register 主な変更点の一つは register
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita
2021年からReactを始めるなら React Server Components 一択ではないか？
