IntroductionAirbnb’s frontend recently reached a major milestone: all of our web surfaces have been upgraded from React 16 to React 18, the current major version of React¹. This was a big project for a product with many surfaces, including Guest and Host pages as well as many internal tools. To safely perform this upgrade, we created the React Upgrade System: reusable infrastructure that allows us
React Conf 2024 Talks
Keynote (Day 1) Joe Savona, Mofei Zhang, Lauren Tan, Sathya Gunasekaran, Josh Story, Andrew Clark
ReactのuseEffectフックは、コンポーネントの副作用を管理するための強力なツールです。 だけど、このフックには見落としがちな落とし穴や注意が必要な側面が存在します。 この一見無害なReactコンポーネントを見てみましょう。 以下のコードには重大なエラーがあります。 import React, { useEffect, useState } from 'react'; function DarkSideOfUseEffect() { const [count, setCount] = useState(0); const [pressed, setPressed] = useState(false); useEffect(() => { console.log('Count is', count); setPressed(!pressed); }); // ...他のコンポーネント
{ "name": "react-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test",
JSer.info #701 - TypeScript 5.6 Beta がリリースされました。 Announcing TypeScript 5.6 Beta - TypeScript ESLintのno-constant-binary-expressionと似たチェックを行い、常にtrue/nullishとなる間違った書き方をコンパイルエラーにする変更が含まれています。 Interesting bugs caught by no-constant-binary-expression - ESLint - Pluggable JavaScript Linter Iterator Helperのサポート、ES2022のArbitrary module namespace identifier namesをサポート、--noUncheckedSideEffectImportsフラグの追加も行わ
こんにちは。 jQuery から商業プログラミングに入門したやまゆです。 なぜ jQuery だと古い、ダメだと言われるのでしょうか？いいじゃん。 $.ajax で簡単にデータ引っ張ってこれるし、 $("#btn").click(function () { alert("押した！"); }); は誰が見ても何が起こるか一瞬で分かる Simple さがあるじゃん。なんでわざわざ React/Vue/Svelte その他 jQuery ではないライブラリを使わなければならないんでしょうか？ 100 億回言われてきたことだと思いますが、私なりに振り返ってみます。 手続き型 UI と宣言型 UI は、手続き型です。 btn という ID の DOM 要素を取得して、それらの(一応複数になる可能性があります)要素に対して click イベントハンドラを登録します。 この処理が実行される前と後では、
てんてんてん(..., 3点リーダー)をいい感じにしたい！ フロントエンドの画面表示を実装していて、「数行(コンポーネントを使う側から指定)かつ溢れたら3点リーダーを付けれるコンポーネント」を実装したくなることがあるかと思います。この記事ではそのやり方をメモ程度にまとめていきます。 具体的なUI こちらは実装後のStorybookのキャプチャです。 どうやるの？実際のコードは？ React, MUIを用いて.tsxに実装する場合の一例を残しておきます。 MUIでなくても、コードを適宜修正すればchakraなどでも大体同じようにして使えるはず！ 追記：chakraにはnoOfLinesというpropsがあると同僚エンジニアが教えてくれました！ /** * テキストを指定行数で省略表示するコンポーネント * @param param0 lineLength: 表示行数 * @returns T
Error: Objects are not valid as a React child の解決方法 - Qiita
はじめに Reactの勉強をしているときに、オブジェクトをmapで表示しようとした際にエラーがでました。 初歩的な部分ですが、解決策をまとめておきたいと思います。 事象 以下のようなコードを実行した際に、mapの中の{ record }の部分でエラーが発生しました。 export const App = () =>{ const records = [ { name: "山田太郎", age: 13}, { name: "山田次郎", age: 12}, ] return ( <> { records.map((record) => ( <div> <div>{ record }</div> </div> ))} </> ) }
@storybook/nextjs使用時のインタラクションテストとモジュールモック Storybook でインタラクションテストを使用すると、コンポーネントの動作を GUI で確認しつつテストを書くことが出来ます。Jest や Vitest の CUI 上で表示確認無しでテストを書くのに比べると、圧倒的に楽にテストを書くことが可能です。ただし問題があって、Jest や Vitest から専用コマンドでテストを呼び出すときには、依存パッケージなどを関数単位で簡単にモック化できますが、Storybook のインタラクションテストではそうではありません。以下のようなファイル単位でのモックが必要となります。 関数単位でのモック作成は、以前に@storybook/nextjs用に Webpack と Babel の挙動をカスタマイズしてstorybook-addon-module-mockを作りまし
はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。 👇メンバーの記事はこちらにあります その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、 実際にやっているカリキュラム(React部分)をすべて紹介します ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。
はじめに JISOUの課題となっている「学習管理アプリ」をReactで作成しました。 小規模なアプリではありますが、React開発で意識するべきことをいくつか発見しましたのでご紹介いたします。 作成したアプリ TODOアプリに毛が生えたようなもの。 学習内容と学習時間を登録し、登録内容を一覧表示する。 Point ・インプット項目に入力した値は画面上にリアルタイムで表示させる。 ・エラー（学習内容/時間が空白）時はエラーメッセージを表示する。 ・学習合計時間を表示する。 開発時に特に意識したポイント 繰り返し項目には一意のキーを指定する React開発においてmapを用いて繰り返しを表現する際は、繰り返しを行うタグに対してkey属性を指定する必要があります。 ここで、今回のアプリでは学習内容をそのままkeyに設定してしまうと、同じ学習内容を設定した場合にkeyが一意ではなくなってしまいます
皆さんこんにちは。 React Server Component（以下、RSC）のキャッチアップはしていますでしょうか？ React19 RCのアナウンスによると、RSCのユーザーランドでのマイナーバージョン間での破壊的変更は無いそうです。（非ユーザーランド＝バンドラ向けのAPIは変わるそうですが） 一旦今の仕様で問題無いと判断したということだと思います。自分としても今の仕様は学習曲線がゆるやかで、良くできていると思います。 Next.jsを利用すればプロダクションとして採用できないこともないフェーズに入っていて、他にもRemixやWaku（Viteベース）など、将来的な選択肢は増えていくでしょう。 この状況を鑑み、すでに学習に入る分には問題無いと思い、RSCのハンズオンを作成しました。 こちらがリポジトリです。 対面で説明を受けながらが効果的ですが、読み物としてもある程度は成立するように
無効なボタンに aria-disabled を使ったときの React Hook Form で二重送信防止 - はるさめ.dev - はるさめ.dev
背景form で submit ボタンといえば当たり前のように disabled を使用して二重送信を防いだり、バリデーションにエラーが発生しているときに送信できないようにしていました。 しかし、disabled を使うと Tab キーでフォーカスが当たらないため支援技術を使用しているユーザーがボタンの存在を認識できないという問題があるようです。(参考リンク参照のこと) React Hook Form で二重送信を防ぐために form.formState.isSubmitting を disabled に指定していたところを aria-disabled に少しだけつまづいたので忘録として残します。 解決策少しスマートではないですが、formState.isSubmitting が true の場合は onSubmit に重複 submit 防止用の関数を割り当てて、 false の場合は
リニューアル前の記事は3年間で いいね：1917 合計PV：114408 とても多くの方に手に取って頂きました！！ ※zennの方もリニューアルしたので、内容は同じになります 作れるものReact+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションです。 完成するとこんな感じになります。 Netflixの映画一覧を取得し、カテゴリー毎に表示しています。 映画をクリックすると、YouTubeのプロモーション映像が流れます。 学べる事Reactの関数コンポーネントとTypeScriptの基礎理解 React Hooksによるstate管理 Reactでの外部APIとの連携方法 Postmanを使ったAPIテストの方法 コンポーネント分割の考え方 Tailwind CSSの基礎理解 Vercelを使ったデプロイ方法 余談また直接、プロダクトコードには関連しないですが、
「フロントエンド技術の波を乗り越える！Vue2からReactへの移行とアーキテクチャ設計による堅牢化」というタイトルで登壇しました #cm_odyssey | DevelopersIO
はじめに リテールアプリ共創部の中野です。 クラスメソッド設立20周年イベントとして開催されたClassmethod Odysseyのオンラインイベントにて2024/7/30に登壇しました。 「フロントエンド技術の波を乗り越える！Vue2からReactへの移行とアーキテクチャ設計による堅牢化」というタイトルでお話したセッション資料を公開します。 セッション概要 フロントエンド技術の変化に翻弄されることなく、ソフトウェアのコアを守り抜くことが重要です。 今回は、Vue2からVue3への移行検討で課題に直面した事例を紹介します。大規模な書き換えが必要だったため、Reactへの移行とフロントエンドコードのクリーンアーキテクチャによる再設計を行い、コアロジックを守りぬくことができました。フロントエンド技術の変化に左右されないソフトウェア設計の方法を解説します。 登壇資料 登壇内容 登壇資料の内容の
onChangeハンドラーのないチェックボックスにcheckedpropsを設定すると、以下の警告が発生した Warning: Failed prop type: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly. onChangeハンドラーのないチェックボックスに初期値を渡したいのならcheckedではなく、defaultCheckedを使えという内容（もしくはonChangeをつけるか、完全に読み取り専用にする） この理由が気になったの
state 構造の選択 – React
快適に変更やデバッグが行えるコンポーネントと、常にバグの種になるコンポーネントの違いは、state をうまく構造化できているかどうかです。ここでは、state 構造を考慮する際に役立つ、いくつかのヒントをご紹介します。 このページで学ぶこと 単一の state 変数と複数の state 変数の使い分け state の構成において避けるべきこと state 構造の一般的な問題を修正する方法 state 構造の原則 state を格納するコンポーネントを作成する際に、いくつ state 変数を使うのか、データ構造をどのようにするのかについて選択を行う必要があります。最適とはいえない state 構造でも正しいプログラムを作成することは可能ではありますが、より良い選択をするために役立つ原則がいくつか存在します。 関連する state をグループ化する。2 つ以上の state 変数を常に同時に更
はじめに 私は現在、JISOUというコミュニティでReactの学習をしています。エンジニア歴は4年になりますが、普段はWeb制作を行っていてアプリ制作は素人になります。今回は、学習の過程で制作した学習記録アプリについて紹介します。 制作したもの 今回制作したものは学習記録アプリになります。基本的には、Todoアプリに機能を追加したようなものになっています。スタイリングはしていないので非常にシンプルな構造になっています。 気がついたこと ReactはJavaScriptのライブラリです。JavaScriptの基本的な内容が分かっていないと学習効率が全く変わってくると感じました。私は以前、別のプログラミングスクールに通っていました。約4ヶ月ほど学習しましたがTodoアプリをまともに作れるかどうかのレベルにしか到達できませんでした。当時はカリキュラム通りに進めれば、Reactが習得できると考えて
はじめに 本記事ではuseRef, useStateについて説明した後、両者の違いについて解説します。 useRef とは レンダリングに必要ない値を参照する際に用いられる React Hook です。 入力 initialValue: ref のcurrentの初期値。最初のレンダリング後、この値は無視されます。 返り値 currentというプロパティを有するオブジェクトを返します。currentは最初initialValueで初期化されますが、後に他の値を指定することもできます。このrefオブジェクトを JSX ノードのref属性として React に渡すと、React はそのcurrentプロパティに設定します。 ポイント ref.currentを変更しても React は再レンダリングを行いません。refは単なる JavaScript オブジェクトであり変更が行われても React
【Jest✕React】Jestを用いたテストの実行時、「supabaseUrl is required.」が表示される。 - Qiita
supabaseUrl is required. 1 | import { createClient } from '@supabase/supabase-js' 2 | > 3 | const supabase = createClient( | ^ 4 | import.meta.env.VITE_SUPABASE_URL, 5 | import.meta.env.VITE_SUPABASE_ANON_KEY 6 | ); 参考↓ ESModule/CommonJSの形式の違いによってenvの値が読み込めないようです。 この記事の方は環境変数の読み込み方法を「process.env」に変更することで対応しているようです。 解決方法 テストを通すためにコードの方を変えるのはなんか嫌だなと思っていましたが、 よく考えたらテストでsupabaseに接続する必要はないよなと思い、createC
フロントエンドフレームワーク「Astro」の概要と特長 Astroは、次世代のフロントエンドフレームワークとして注目されています。 軽量で高速な静的サイト生成を実現し、現代のウェブ開発のニーズに応えるために設計されています。 Astroの最大の特長は、JavaScriptの使用を最小限に抑え、コンテンツのレンダリングを優先する点にあります。 これにより、ページの読み込み速度が飛躍的に向上し、SEOにも優れたパフォーマンスを発揮します。 また、AstroはReact、Vue、Svelteなどの多様なコンポーネントを一つのプロジェクト内で組み合わせて使用できるため、開発者にとって柔軟性の高いツールとなっています。 この記事では、Astroの概要とその特長について詳しく解説します。 Astroの基本概念と設計思想 Astroは「最小限のJavaScriptで最大限のパフォーマンスを」という設計思
こんにちは！駆け出しエンジニアのガッキー（@ExplorerZine）です。 開発していれば避けては通れない「デバッグ」。 今回はReact開発中のデバッグについてシェアしていきたいと思います。 エラー文の読み方、React Developer Toolsの使い方を解説していきます。 是非最後までご覧ください！ React でエラー文を読んでみる！ 例えばこのようなコンポーネントの中で hoge という定義していないワードを投げてみてみましょう！ import Todo from "./Todo"; // todoリストとクリックされたリストを受け取る const TodoList = ({ todos, toggleTodo }) => { throw hoge; return todos.map((todo) => ( <Todo todo={todo} key={todo.id} t
? How would you like to use ESLint? To check syntax and find problems # eslintでどこまでを制御するかを選ぶ # シンタックスのチェックだけを行なうか、問題のあるコードも解析するか、そしてコードスタイルを適用するのか問われてます。 ? What type of modules does your project use? JavaScript modules(import/export) # モジュールのimport/exportスタイルを問われています。 ES2015のimport/exportを使うならJavaScript modules、CommonJSのrequireを使うならCommonJSを選択 ? Which framework does your project use? React # フロントエ
はじめに というか実現できるの？ chrome拡張機能について マニフェスト サービスワーカー コンテンツスクリプト ツールバーアクション とりあえず先人の知恵を借りながら作ってみる。 カスタムについて まとめ 参考URL 宣伝コーナー はじめに 今年の夏も暑すぎませんかね……。 暑すぎて涼しい夜に蝉が鳴いていたり、庭に湧いたコガネムシやカメムシがぶんぶん飛び交ったり。 年々、最高気温の記録が更新されすぎて暑さのボジョ○ヌーヴォ感。 夏って何ですかね……。 とまあ夏の暑さについては置いといて、、 入力チームにてフロントエンドを担当しております、入社半年の新人（だと思いたい）まつむらです。 iimonのプロダクトは主にchrome拡張機能での使用を前提に開発されています。 ですが、恥ずかしながら、今までの経歴としてはVueを用いたSPA開発が主で、chrome拡張機能の開発は入社時までゼロと
Inertia React×Laravel
Inertia.jsとは Inertia.jsは、サーバーサイドとクライアントサイドの両方で使えるJavaScriptライブラリです。LaravelやRailsなどのサーバーサイドフレームワークと組み合わせて、SPA（Single Page Application）を構築する際に便利です。Inertia.jsは、サーバーサイドでのデータ処理やルーティングを行い、クライアントサイドではReactやVue.jsなどのフレームワークを使用して、フロントエンドの開発を行うことができます。 1. 前提条件 Node.js Composer PHP 2. 導入手順 2.1 Laravelプロジェクトのセットアップ まず、Laravelプロジェクトを作成します。 $ composer create-project laravel/laravel inertia-react-app $ cd inerti
Reactのアプリを作るぞ！ ってなったら、あなたはまず何をしますか？ そう、「環境構築」ですね。 その環境構築の中でも今回扱うのが「ビルド」です！ ReactとかTypeScript、Node.jsって、そのままの状態ではブラウザで動きません（= ブラウザで動くのは素のままのJavaScriptです）。それを動くようにするためにいざ、変換。これが「ビルド」です。 代表的な3つのビルドシステム 1. Create React App "Create React App"（CRA）は2022年4月を最後に更新が止まっています。（少し前の記事や教材でよく見かけるシロモノですね！もちろん使えますが、警告がこちらを覗いています...） 2. webpack "webpack"、React開発環境のデファクトスタンダードですね！ ビルドツールの使用率では依然としてトップを走り続けています。 CRAで
留意事項 React初学者が「とりあえず動かせればええんよ」と初めて作った環境のため、ちゃんと整備されていない感が否めません。 今後の学習次第で環境を詰めていく予定です。 いい感じで効率よくサイトを作ってみたい... Reactでコンポーネントベースで進めれたらいいなぁ... 余白のCssごちゃつくのが嫌だからTailwindCSS入れたいなぁ... あわよくばボタンとかカードレイアウトでMUI入れたいな... という願望で作ってみました。 環境のバージョン OS : macOS Sonoma 14.2.1 React : 18.3.1 React-dom :18.3.1 MUI（Material-UI） : 5.11.12 tailwindcss: 3.4.7 pj_react ├── package-lock.json ├── package.json ├── postcss.conf
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How Airbnb Smoothly Upgrades React
ReactのuseEffectのダークサイド - Qiita
ReactアプリでAmplify-UIの認証画面を作ってみた - Qiita
2024-07-29のJS: TypeScript 5.6 Beta、Node.jsの実験的なTypeScriptサポート、State of React 2023
何故 jQuery ではなく React/Vue/Svelte が流行するのか？
【React/MUI/CSS】複数行かつ溢れたら3 点リーダーを付けれるコンポーネントを作ろう！
Storybook + Vite + React のインタラクションテストでモジュールモックする
【2024年最新版】0からReactを勉強するならこのロードマップに従え！ - Qiita
学習管理アプリ作成の所感とReact開発において意識するべきこと - Qiita
React Server Componentのハンズオンを作ってみて考えたこと
【React+TypeScript】Netflixのクローンを作るチュートリアル はじめに｜てりー
【React】onChangeなしでcheckedを使ったら警告がでた - UGA Boxxx
Reactで学習記録アプリを作ってみた - Qiita
【React】useRefの深掘り ~ useStateとの違い、レンダリングの際の挙動等
AstroとReactの違い：どちらを選ぶべきか | 株式会社一創
React Developer Tools の使い方・デバッグ方法を解説！ - Explorer Zine
eslint(react+typescript+airbnb)の設定 - Qiita
えぇ！？Reactをchrome拡張機能に載せてもいいんですか！？ - iimon TECH BLOG
Vite (ヴィート) で1分環境構築【React + TypeScript】
ReactとTailwindCSSとMUIで環境を作ってみる