React のルール – React
様々な概念を表現する方法がプログラミング言語によってそれぞれ異なるように、React にも、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。 このセクションでは、自然な React コードを書くために従うべきルールを説明します。自然な React コードを書くことで、安全で整理されており、組み合わせ可能なアプリケーションを作成することができます。以下に挙げる特性により、アプリは変更に対して頑健になり、他の開発者やライブラリやツールと連携しやすくなります。 以下のルールは React のルールとして知られています。これらを守っていないならアプリにバグがある可能性が高い、という意味で、これらは単なるガイドラインではなくルールです。またこれらを守らない場合、あなたのコードは不自然で、理解や推測が難しいものになるでしょう。 Reac
useEffect: 基礎から使用すべきでない例まで
はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種類のロジックについて整理する。 レンダリング レンダリングをする際、コードはpropsとstateを受け取り、変換し、画面で表示したいJSXを返す。コードのレンダリングは結果のみを計算するべきでそれ以上のことをするべきではない。 イベントハンドラ イベントハンドラはコンポーネントの中にある関数で、Input Field の更新やユーザを他の画面へ誘導したり等、単純な計算以上の役割を担う。イベントハンドラはユーザの行動（ボタンクリック等）による、
React Server Components のテスト手法
React Server Components のテスト手法 2023.11.26 現代におけるコンポーネントのテストは Testing Library を用いてテストを行うことが一般的です。しかし、2023 年 11 月現在、Testing Library はまだ Server Components のテストを十分にサポートしていません。そのため、Server Components のテストを行うには、別の方法を用いる必要があります。この記事では、Testing Library を用いずに Server Components のテストを行う方法について説明します。 現代では React におけるコンポーネントのテストは Testing Library を用いて、ユーザーの視点からテストを行うことが一般的です。getByRole のようなユーザーの視点のセレクタなどを提供しているため、実装
Reactで再レンダリングを抑えるシンプルな方法
はじめに 「React で再レンダリングを抑えたい...」となった場合、多くの人が React.memo や useMemo、useCallback などのいわゆる 「メモ化」 を思い浮かべることでしょう。 しかし、そういった「メモ化」を用いなくても再レンダリングを抑える方法が実は存在しています。 今回はその代表的な例を２つ紹介していきたいと思います。 よくある例 まず例として、以下のような 「パフォーマンスに問題を抱えたコンポーネント」 を考えてみましょう。 import { useState } from "react"; export default function App() { let [color, setColor] = useState("red"); return ( <div> <input value={color} onChange={(e) => setColo
モダンフロントエンドで始めるつらくないReactディレクトリ構成 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 記事タイトルはReact開発者なら知る人ぞ知るりあクト！ TypeScriptで始めるつらくないReact開発のパロディです。とてもわかりやすい入門書なのでReact初学者の方には学びの第一歩として自信を持ってオススメできます！ さて今回は、モダンなフロントエンド技術を採用したうえで、極力シンプルで開発体験を損なわないようなディレクトリ構成を考えてみたので共有したく記事にしました。現在実際に運用しているのですが、今のところ大きな問題も無くチームからの不満も上がっていません。しかし、個人的に微妙な部分もあるのでそちらの紹介も行いたいと思います。 今回、構成を考えるにあたって重視したポイントは以下の3点です。 新しく参入するメンバーでもすぐに理解できるシンプルな構成にしたい テストやリファクタしやすい構成にしたい できればルールが厳
useCallbackはとにかく使え！ 特にカスタムフックでは - uhyo/blog
Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する効果を持ちます。 これらは最適化のためのツールなので、「過度な最適化」を避けるように啓蒙する言説がよく見られます。 すなわち、ちゃんと本当に最適化のために必要なところにだけこれらを使おうということです。 特に、React.memoはpropsが以前と変わっているかどうかを判定するためのオーバーヘッドがあるし、useMemoやuseCallbackもフック呼び出しのオーバーヘッドがあります。 意味がないところでReact.memo
React + TypeScript でファイルアップロード機能を実装する
はじめに React + TypeScript なフロントエンドからファイルをアップロードする機能を実装する機会があったので、簡単に備忘録として残しておく。 前提としては、フロントエンドから REST 形式で配信されているファイルアップロード用の外部 API に対してリクエストを送るという形を想定している。 API の実装については深くは触れずにフロントエンドでは「こう実装してみた！」という内容を多めに書いていく。 実装方法の検討 WebAPI でファイルをアップロードする方法アレコレ - Qiita API の実装方法については、こちらの記事を読んで今回は multipart/form-data で用意した。少し脱線するが、画像の話が出てくるだけで、通常の RESTful な API では考慮しないようなことがどんどん出てくるので非常に面白い。API を実装する際に考慮することのような話
ReactでFileのアップロードボタンをカスタマイズする
こんにちはハトです。色々の記事をあさっているうちに、ファイルアップロードのやり方の知見がたまったので共有します。 基本 以下のようにinputタグにfileを指定すれば、ファイルエクスプローラー(もしくはファインダー)が開きます。選択したファイルはonChangeコールバックの引数に渡されます。
本気で考えるReactのベストプラクティス！bulletproof-react2022
と言えば、zennで一番人気のあるの記事です。 Reactの堅牢な開発基盤を築きたいときに非常に参考になります。 @Meijin_gardenさんのこの記事が出たのは、ほぼ一年前。 今日までの間に、React v18.0のリリースというビッグなニュースもありました。 なので、2022年秋となると、一年前とは少し様子も変わってくるかもしれません。 「概ね賛成だけど、ここはこうしてみたい気もする」という部分もあります。 そんなわけで今回は、2022年秋バージョンのbulletproof-reactを一緒に考えていきたいです。 Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件の内容を前提に書いていきますので、まだ読まれていない方は、先に本家の記事を読まれると良さそうです。 改めて考えるbulletproof-reactの良さ ディレクトリ構成 Rou
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
【保存版】「そのuseEffectの使い方あってる？」と言われる前に
参考 目的 プロジェクトで使用されている不適切なuseEffectを減らす 本題 Reactの公式ドキュメントにuseEffectは必要ないかもしれない，というようなページがありとても勉強になったので記事にしようと思いました． データフェッチング アプリのデータフェッチングをuseEffect内で行うのはよく知られている方法です． Bad 💣 function SearchResults({ query }) { const [results, setResults] = useState([]); const [page, setPage] = useState(1); useEffect(() => { // 🔴 Avoid: クリーンアップなしでのフェッチング fetchResults(query, page).then(json => { setResults(json); }
ReactでTesting Library/Jestを使ってテストを学ぼう | アールエフェクト
Reactを学び始めてコードを書けるようになったので記述したコードのテストを実行してみたいという人を対象にReactでのテスト方法について説明を行っています。 Testing Libraryとは？Jestとは？ Reactでのテストを行う前にテストに利用するライブラリについて説明を行っておきます。 ReactアプリケーションのテストはTesting Library、Jestを利用して行うことができます。Testing LibararyもJestもReactに限定されたライブラリではありません。VueやSvelteを含めた他のフレームワークでも利用することができます。Testing LibararyではReact用のReact Testing Libraryが提供されておりcreate-react-appを利用してReactプロジェクトを作成すると自動でインストールされます。Tesing L
データフェッチはuseEffectの出番じゃないなら、結局何を使えばいいんだ
ショートアンサー React 18 からのフックである、useSyncExternalStore を使えばいいようです。 ※ useEffect がまったくだめだというわけではありません。 ※ クライアントサイドレンダリングのみを考えています。サーバーサイドレンダリングを考慮すると違った答えになるかもしれません。 サンプルコード 次のような useData フックを作ってみます。 JSON API の GET レスポンスを返すシンプルなものです。 実験をしやすいように、リクエスト URL を変えるボタンを置いてあります。 import { useEffect, useState } from "react" export function SearchResults() { const [id, setID] = useState(1) const todo = useData(`http
マネーフォワードさんの社内勉強会でフロントエンドワークショップの講師を担当しました＆資料を公開します - ぱすたけ日記
昨年のはてなリモートインターン2021で講義を担当したフロントエンドブートキャンプ の資料をご覧頂いたことをキッカケに連絡を頂いて、マネーフォワードさんの社内勉強会でフロントエンドワークショップの講師を担当しました。 その際に使用したワークショップ資料について、マネーフォワードさんにも確認して、Scrapboxの以下のページに公開しました。 構成としては DOMとレンダリングパフォーマンス React入門ハンズオン フロントエンドツールチェインについて という3本立てになっています。 フロントエンドのモダン化を進める中で、普段の業務とは別にまとまった時間でチームメンバーにReactやフロントエンドに関するインプットをしたり手を動かしたりしたいというお話だったので、ハンズオン形式でReactで簡単なアプリケーションを作るハンズオンを中心としたワークショップ形式にまとめました。 はてなインター
React の新しい概念「トランジション」で React アプリの応答性を改善する - 30歳からのプログラミング
React v18 には多くの改善や新機能が盛り込まれる予定だが、そのなかでも特に注目を集めると思われるのが、Concurrent Features と呼ばれる一連の機能。 これらの機能を使うことで、コンポーネントのレンダリングについてより柔軟な設定が可能になり、上手く使えばパフォーマンスや UX の向上を実現できる。 この記事では Concurrent Features のひとつであるstartTransitionと、それを使いこなす上で重要な概念である「トランジション」について説明する。 この記事ではコンセプトの説明や具体例の提示のみを行う。詳細を知りたい場合は以下を参照。 一年前の記事であるため古くなっている部分もあるが、根幹は大きく変わっていないと認識している。 なお、上記の記事には「Concurrent Mode」という用語がタイトルに入っているが、これは今後は使われなくなってい
JSX の導入 – React
新しい React ドキュメントをお試しください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 Writing Markup with JSX JavaScript in JSX with Curly Braces まもなく新しいドキュメントがリリースされ、このページはアーカイブされる予定です。フィードバックを送る このおかしなタグ構文は文字列でも HTML でもありません。 これは JSX と呼ばれる JavaScript の構文の拡張です。UI がどのような見た目かを記述するために、React とともに JSX を使用することを私たちはお勧めしています。JSX はテンプレート言語を連想させるでしょうが、JavaScript の機能を全て備えたものです。 JSX は React “要素” を生成します。次の章で React 要素を DOM に変
初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！ | 株式会社ウェブ企画パートナーズ
React って何？ React とは UI を作ることに特化した JavaScript のフレームワークです。以下のようなリッチな表現の時間選択のための UI も React を使って実装されていて、 react-gradient-timepicker というライブラリ名で一般に公開されています。 そのほかにも、日付選択のためのカレンダー形式の UI や Slick のようなカルーセルの UI も公開されています。React はこういった複雑な UI を作ることが得意なフレームワークです。 ただし、React を使うと、こういった UI が簡単に作れるようになるというわけではなく、JavaScript やプログラムのある程度の知識は必要になってきます。 HTML と JavaScript が合体した JSX 記法 React の特徴として JavaScript 内に HTML の様な独自
React初心者のまとめ（基本編：1/3） - Qiita
React初心者の私がふとReactを使ってみようと思い立ち、社内ツールを作る過程で覚えたことをまとめておきます。 今まではJavaScriptはそこそこ経験してきたものの、もっぱらjQueryに頼って開発してきた旧型タイプの開発者ですので、同じような立場の方には参考にして頂けるのではないかなと思います。 Reactのイメージ（学習前） そもそもReactが何なのかもよく分かっていなかった状態で始めたので、学習前に思っていた印象は… Facebookが作ったものなので良さそう jQueryを使わずにJavaScriptを使ったページを作れる(jQueryで追記するプログラム部分が複雑になることを回避できる？) 動きが速そう 覚えることは多そう ソースはスッキリ書ける？ というかなり適当な印象と知識でスタートしました。 Reactの基本ルール 学習したうえで分かった「本当に基本のルール」はこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたがまだ知らないReactのテクニック10選 - Qiita
JSX を深く理解する – React