はじめに こちらの記事の続きです Effectフック Effectを利用することでコンポーネントを外部システムに接続し、同期させることができます。 Effectはレンダー自体によって引き起こされる副作用を指定するためのもので、外部システムとの接続がなければ特に利用する必要がありません。 公式にもそのエフェクトは不要かもというドキュメントがあったりします。 Effectは以下のような手順で行われます。 Effectを宣言する コンポーネントがレンダーされるたびにReactは画面を更新し、そのあとでuseEffect内のコードを実行する 依存値の配列を指定する 依存配列がない場合毎回のレンダー後に実行され、依存配列が空([])の場合マウント時のみ実行される 必要に応じてクリーンアップを追加する 指定したすべての依存値が前回のレンダー時と全く同じ場合はエフェクトの再実行をスキップします。 use
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> ))} </> ) }
React Hook FormとMUIを組み合わせて入力フォームを作ろうと思いました。 しかし、エラーが上手く表示されず四苦八苦…。 調べてみたところ下記の記事にたどり着き、順調に実装を進めていました。 React Hook Form 7系と MUI 5系を組み合わせたフォームを作ってみた - メモ的な思考的なReact Hook Form 7系とMUI 5系を組み合わせてフォームを作る時に、色々悩んだことがあったのでメモを残します。 目次 環境 controlled component と uncontrolled component について...thinkami.hatenablog.com しかし、MUIのTextFieldを使い、そのコンポーネントのtypeがnumberの時に 再度詰まったので、ここにメモしておきます。 一言まとめ なんで詰まったか？ Reactのcontrol
てんてんてん(..., 3点リーダー)をいい感じにしたい！ フロントエンドの画面表示を実装していて、「数行(コンポーネントを使う側から指定)かつ溢れたら3点リーダーを付けれるコンポーネント」を実装したくなることがあるかと思います。この記事ではそのやり方をメモ程度にまとめていきます。 具体的なUI こちらは実装後のStorybookのキャプチャです。 どうやるの？実際のコードは？ React, MUIを用いて.tsxに実装する場合の一例を残しておきます。 MUIでなくても、コードを適宜修正すればchakraなどでも大体同じようにして使えるはず！ 追記：chakraにはnoOfLinesというpropsがあると同僚エンジニアが教えてくれました！ /** * テキストを指定行数で省略表示するコンポーネント * @param param0 lineLength: 表示行数 * @returns T
新卒フロントエンド職同期と「React のドキュメントを読む会」をやってみた - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！kintone フロントエンド刷新プロジェクト（通称フロリア）にてエンジニアをしている キム テフンです。今日は フロントエンド職で新卒入社後にできることの一例として、現在も継続して社内で開催している「React のドキュメントを読む会」の事例を紹介しつつ、面白かった React の学びを少しだけ共有したいと思います！ ※ この記事は Cybozu Frontend Advent Calendar 2023 の 5 日目の小さなトリートになります :) 目次 React のドキュメントを読む会を始めたきっかけ 社内勉強会開催のハードル 社内勉強会の内容紹介 みんなでアウトプット 個人でアウトプット BONUS：面白かった学びの共有 useRefのベースはuseState？ keyでstateをリセットする「上級技」 あとがき React のドキュメントを読む会を始めたきっかけ
React のライフサイクルとは？ React のライフサイクルとは、React コンポーネントが生成され、更新され、最終的に破棄されるまでの流れを表す考え方です。この流れを理解することで、React コンポーネントがどのように動作するのか、いつどのような処理を書くべきなのかがわかります。 React のライフサイクルは大きく分けて以下の 3 つのフェーズに分類されます。 マウントフェーズ（Mounting）：コンポーネントが DOM に挿入されるフェーズ 更新フェーズ（Updating）：コンポーネントが再レンダリングされるフェーズ アンマウントフェーズ（Unmounting）：コンポーネントが DOM から削除されるフェーズ それぞれのフェーズで特定のライフサイクルメソッドが呼び出されます。以下に基本的なソースコードを示します。 type Props = { message: stri
CDN版のReactを使ってWebsocketのチャットクライアントを実装してみました - Qiita
はじめに 【欲望】 （１）インストール作業は極力したくない PC内で使うモジュールをガチガチにして重たくしたくない （２）オフラインでも動くようにしたい ブラウザへのドラッグ＆ドロップで使いたい （つまりはWebサーバーレスでも使える） （つまりはfileプロトコルでも使える） という願いを叶えられたら幸せだよねー。 そういう思いから以下のルールを決めました。 【ルール】 （１）CDN版を利用する インストール回避のため （２）CGIは使わない Webサーバー回避のため 【ルール】の（１）に関しては、そのままだとオンラインでしか使えなくなるのでダウンロードしたモジュールを使います。 また、アクセス先のファイルが変更される事で発生する不具合の影響を小さくできるというメリットもあります。 事前準備 CDN版のファイルを以下のようなコマンドを使ってあらかじめダウンロードしておきます。 > wge
【React/Tailwind】YouTube動画を埋め込むためのコンポーネントを作ってみる(レスポンシブ) - Qiita
概要 ReactでYouTube動画を埋め込むためのカスタムコンポーネントを作成してみました。スタイリングには、Tailwind CSSを使用し、レスポンシブに対応させました。 コンポーネントの機能 YouTube動画の埋め込み タイトルの表示 カスタムスタイリング（Tailwind CSSを採用し、レスポンシブに対応） 動画情報のURLまたは動画IDの両方に対応 対応している動画のURL形式について https://www.youtube.com/watch?v=VIDEO_ID 標準形式のURL https://youtu.be/VIDEO_ID 短縮URL https://www.youtube.com/embed/VIDEO_ID 埋め込みプレーヤーのURL
dnd-kitとは？dnd-kitとは、Reactでドラッグアンドドロップを実装することができるライブラリの1つです。 dnd-kitは公式でサンプルを用意してくれているので、どんなようなものがあるのか知りたい方はまずこちらのサイトを参考にしてみてください。 なぜdnd-kitなのかReactでドラッグアンドドロップを提供しているライブラリだと、 React DnDreact-beautiful-dndなどがあると思います。こららのライブラリに比べて比較的にとっかかりやすいのがdnd-kitだと考えています。 また、npm trendsを見てみてもdnd-kitはReact-DnDやreact-beautiful-dndに比べて人気は劣るものの、確実に差を詰めていることがわかります。今後はdnd-kitが主流になっていくのではないかと考えています。 参考：npm trends ただ、dnd
初投稿になります。よろしくお願いします。 この記事の目的 React、Rails間でのファイルアップロードに手こずったので同じ悩みを抱えている人のため記事を書くことにしました。 axiosを用いてReactからrailsに画像データを含むFormDataを送信し、rails側で保存した画像ファイルをReact側で参照できるようになることが目的です。 今回は、タイトルと本のラベル(画像)を登録し、idを入力するとデータが参照できるといった簡単なアプリケーションを作成していきます。 機能の実装に集中して解説をしたいので、スタイルはあまり当てません。 開発環境について 自分のOSはwindowです。 検証はしていないですが、windows以外でも差し支えないと思われます。 プロジェクトの作成 プロジェクトの作成については、rials newとcreate-react-appでパパっと済ませました
React 19であまり語られない改善の一つ、useIsomorphicLayoutEffectって聞いたことありますか
みなさん、React 19を心待ちにしてますか。新しい機能は目立って紹介されるものの、地味な改善もいっぱいあります。もう1年以上前の話になりますが、これ。 useIsomorphicLayoutEffectというのはReduxが流行らせた、ライブラリ開発者が使うハックです。多くの人がコピペして使ってますが、単にSSRでのワーニング回避だけのためのものでした。このワーニングがなくなったので、この不思議なハックは今後不要になりました。（古いバージョンをサポートする場合は残したくなるかもしれませんが、新しいバージョンで消えるものであるという事実は大きい） あれ、これってもうReact 18.3に入っているのでしょうか。どなたか試した人がいらしたら教えてください。
この記事の背景と目的 最近、業務で「社内のPOと一緒に二ヶ月間でMVPとなるアプリを一つ作ってリリースする」という貴重な機会があった。 実際の開発は自分一人だったため、使ってみたい技術を自由に試してみることができ、非エンジニア職からの出戻りの自分にとっては学べることがとても多かった この記事では技術選定や設計の際に考えたことや、実際やってみての感想や気づき、反省点の備忘録として投稿する 作ったもの 「OurTime」というカップル（夫婦）向けエンゲージメントアプリを作成 パートナーと二人でアプリを利用し、アンケートや日々の日記を投稿することで、アプリの方から二人の話し合いを促してくれて、二人の繋がりをより強くするというコンセプト 詳しくはLPを参照 リリースは現状iOSのみ iPhone持っている人はぜひDLお願いします！→ストアリンク 使った技術について 技術スタック React Nat
[React] Create React App(CRA)を使用したReactプロジェクトのフォルダ構成 - Qiita
目次（生成されるファイル） node_modules public src gitignor package.json README.md package-lock.json node_modules プロジェクトで使用されるすべての依存パッケージが格納されます。 public 公開用の静的ファイルが格納されます。 index.html: アプリケーションのルートHTMLファイルです。このファイルにReactコンポーネントがレンダリングされます。 src 開発者が実際にコーディングするファイルが格納されます。 index.js: アプリケーションのエントリーポイントです。ReactDOMを使ってReactコンポーネントをDOMにレンダリングします。 index.css: アプリケーション全体のスタイルシートです。 App.js: メインのReactコンポーネントです。アプリケーションの基本
![[React] Create React App(CRA)を使用したReactプロジェクトのフォルダ構成 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/43ee0017c5e7e30718b70997b92454dce5e21b33/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUmVhY3QlNUQlMjBDcmVhdGUlMjBSZWFjdCUyMEFwcCUyOENSQSUyOSVFMyU4MiU5MiVFNCVCRCVCRiVFNyU5NCVBOCVFMyU4MSU5NyVFMyU4MSU5RlJlYWN0JUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgyJUI4JUUzJTgyJUE3JUUzJTgyJUFGJUUzJTgzJTg4JUUzJTgxJUFFJUUzJTgzJTk1JUUzJTgyJUE5JUUzJTgzJUFCJUUzJTgzJTgwJUU2JUE3JThCJUU2JTg4JTkwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0yMjA3MDg5MjhiYWZlMjQ2Mzg1ODM5YjNmNTU5YTI1Nw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBKb2NodW4mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWU4OTc4NDZiNTU0MTZmYzRhZGMwMjNmNjMzYmM4MTYw%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df73ee96becfae4dc62e994e13539e6e8)
元美容師のDjangoポートフォリオリニューアル日記 Part.4：コンポーネント分割とモーダルフォーム編(material-UIも少しだけ) こんにちは、やぎです！ 前回の記事では、DjangoとReactを連携させ、データベースに登録されているサロンデータの取得と表示を実装しました。 今回は、フロントエンドでサロンの登録機能を追加していきます！ 今回の実装内容 1.サロン登録機能の追加(単一ファイルで実装) まずは前回作成したapp.jsに追加をしてサロン登録機能を作成します。 2.コンポーネントの分割 単一ファイルで作成していた機能を、部品ごとに分けてコンポーネント思考で作り直します。 3.Material-UIの導入 見た目を整える為にスタイルをあてていきます。今回はMaterial-UIを使用してみます。 4.モーダルでのフォーム表示 登録フォームをモーダル画面で表示してみます。
プライベートで開発中のReactアプリケーション。それなりの規模になってきて、そろそろ相対パスでimportするのが辛くなってきた。。 import { PicturesApi } from '../../../api'; import { useApiRequest } from '../../../hooks/useApiRequest'; ... そこで今回は、パスエイリアスを設定してこの辛みから逃れてみます。 手法の調査 まず前提として、今回はVite × Reactでの開発なので、そこで適用できる手法を調べます。大まかには２通りがありそう。 1. vite.config.tsのresolve.alias記述とtsconfig.json設定の組み合わせ vite.config.tsにresolve.aliasを記述し、それとtsconfig.jsonでのパスエイリアス設定を組み合わ
こんにちは、ダイニーの Feature team でソフトウェアエンジニアをしている ta21cos です。 最近は新規事業である決済関連の機能の開発をメインに行なっています。 ダイニーにおける Feature team は機能にフォーカスした開発・運用を行っているチームです。最近は複数の事業毎に Unit として分かれて開発を進めています。 本日は、普段の開発で実際にあった Pull Request のレビューコメントから得た学びについて紹介します。 Dialog を実装しようReact を使ってある Dialog を作成するため、以下のようなコードを書きました（コードは簡略化しています）。 // useSample ファイル // 内部でロジックと Dialog をを同時に定義している hook const Dialog = memo<{ progress: number, ... }
@storybook/nextjs使用時のインタラクションテストとモジュールモック Storybook でインタラクションテストを使用すると、コンポーネントの動作を GUI で確認しつつテストを書くことが出来ます。Jest や Vitest の CUI 上で表示確認無しでテストを書くのに比べると、圧倒的に楽にテストを書くことが可能です。ただし問題があって、Jest や Vitest から専用コマンドでテストを呼び出すときには、依存パッケージなどを関数単位で簡単にモック化できますが、Storybook のインタラクションテストではそうではありません。以下のようなファイル単位でのモックが必要となります。 関数単位でのモック作成は、以前に@storybook/nextjs用に Webpack と Babel の挙動をカスタマイズしてstorybook-addon-module-mockを作りまし
JSXと単一ルートの制約 JSXのコンポーネントには、単一のルート要素を返さなければいけないという制約があります。 単純にコンポーネントを<div>で囲むなどの方法で対処できることもありますが、flexboxの中の要素をコンポーネント化していて<div>が追加されることによりスタイルが崩れる場合などにはそういった対処が難しいこともあります。 DOMに直接影響を与えないようにするには、<Fragment>、もしくはその省略記法の<>を利用します。 // Fragmentを用いて2つの<li>要素をレンダーする function Example() { return ( <> <li>Item 1</li> <li>Item 2</li> </> ); } 単一ルートの制約の背景 そもそも、なぜこういった単一要素の制約があるのか？という事についてはReactの公式ドキュメントで言及されています
GoサーバーでReactを配信
今回は簡易的にReactのビルドした静的コンテンツを配信する手順を紹介します。 GoとReactの入ったプロジェクトの作り方は前回の記事を参考にしてください! Bun + Go の開発コンテナ Reactのプロジェクトをビルドする 今回のプロジェクトでは下記のようなディレクトリ構造です。 GoサーバでReactのプロジェクトを配信するには静的コンテンツである必要があります。 なのでReactプロジェクトはビルドできる状態にする必要があります。 そして、GoサーバにGetメソッドでコンテンツを取得するという手順です。 ビルドコマンド(bun) -> bun run build Goサーバーを作る 問題なくReact側がビルド出来たら配信するためのGoサーバーを構築します。 下記コードはfrontディレクトリのdist(静的コンテンツ)を配信するためだけのコードです。 ※ルーティングするのにc
私は2022年10月より実務未経験でフルスタックエンジニアとして事業会社に入社し、 現在はReactとRubyを用いたシステム開発に携わっています。 ReactとMUI（UIフレームワーク）を利用して開発に取り組む機会が多々あるので、 こちらでは「ReactとMUIを利用したログイン画面の作成方法」について紹介しようと思います。 開発環境は以下のとおりです。 OS : macOS Monterey 12.6 ブラウザ : Google Chrome テキストエディタ : VS Code React/React-dom : v 17.0.2 / v 17.0.2 MUI（Material-UI） : v 5.11.12 React学習を始める前に まずはじめにReact学習の最低限必要な知識として、「HTML」と「JavaScript」について理解している必要があります。この時点で「HTML
React公式チュートリアルの三目並べに追加機能を実装してみた #3（トグルボタンを追加しろ！編） - Qiita
はじめに はい、ということでReact公式チュートリアル追加機能実装第三弾やっていきたいと思います。 今回実装する機能はこちら↓ 「Add a toggle button that lets you sort the moves in either ascending or descending order.」（日本語訳：動きを昇順または降順に並べ替えることができるトグル ボタンを追加する。）です！ 、、、、どういう機能だ？？ 今のところ機能はこのようになっています。 このボード履歴のボタンの順序を並べ替えられるようになればいい、、のでしょうか？ はい、この記事ではそういうことにしておきましょう。（正しいニュアンスわかる人いたら教えてください(꒪ཀ꒪)） それでは早速実装に移っていきます！ 実装 実装の方針としては、useStateで順序が正になっているか逆になっているか状態を管理してあげ
// 従来の書き方 function func(num) { return num + 1; } console.log(func(1)); // アロー関数 const arrowFunc1 = (num) => { return num + 1; }; console.log(arrowFunc1(1)); // 処理が１行の場合は以下のように省略できる const arrowFunc2 = (num) => num + 1; console.log(arrowFunc2(1));
はじめに 私自身の復習兼、備忘録的な意味もあり、複数回の記事に渡って React に関する記事をまとめていきたいと思います。 本記事の目的 今回は番外編として、ローカル環境での React アプリ開発の環境構築をしていきます。 シリーズの一覧 React入門１: 環境構築 [オンライン版] React入門1.5: 環境構築 [ローカル版-番外編] (今回) React入門２: 盤面の作成 React入門３: インタラクションの実装 React入門４: リファクタリング [リフトアップ編] React入門５: リファクタリング [インタラクション編] React入門６: 手番の実装 React入門７: ゲームの勝利判定 React入門８: テキストの実装 環境構築 オンラインエディタ CodeSandbox を使った方法はコチラから 今回は、ローカル環境で React のプロジェクトを作成す
![React入門1.5: 環境構築 [ローカル版-番外編] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f94d2104112fa37d420fe17e4ca570384bb7bfff/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9UmVhY3QlRTUlODUlQTUlRTklOTYlODAxLjUlM0ElMjAlRTclOTIlQjAlRTUlQTIlODMlRTYlQTclOEIlRTclQUYlODklMjAlNUIlRTMlODMlQUQlRTMlODMlQkMlRTMlODIlQUIlRTMlODMlQUIlRTclODklODgtJUU3JTk1JUFBJUU1JUE0JTk2JUU3JUI3JUE4JTVEJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz0zYmNlYmY3MDA0ZWMyN2VlNzMzYWRlNjVjYWE2NGE2MA%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYmFuYW5hX2JhbmNobyZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MjM3YzZmOTdjZjRmNzc5ZGY2ZDM5ZWQ5M2VkY2FhN2M%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9d5cc28d43010bd72b511071482e21e4)
はじめに 近年では、JavaScriptに型の構文を持たせる手法としてTypeScriptが広く採用されています。 しかし、TypeScript以外にもJavaScriptに型の構文を持たせるツールは存在します。そのひとつがMetaによって開発されているFlowです。 FlowはMeta社によって開発されていることもあり、TypeScriptにはないReactに特化した型を持ちます。 この記事ではFlowの構文を簡単に紹介した後に、Reactに特化したFlowだけの構文を紹介します。 Flowに興味を持つきっかけや、React開発に対するなんらかのインスピレーションになればと思います。 Flow Flowが提供する型の構文はTypeScriptと似ています。全ては書ききれませんが、基本的な型について紹介します。 変数に対する型は: で付与します。 TypeScriptと同じようにプリミティ
JSおよびReact初心者で、学習中に題名の問題が発生しました 結構詰まったものの、原因が基本的な事だったため同じ轍を踏まないよう記事とします 問題 以下のコードで発生しました export const DataTable = ({data}) => { return ( <div> {data.map((col) => { <span>{col.key}</span> })} </div> ) };
Reactを始める前に環境を整える
Reactとは UI実装に特化したJavaScriptライブラリ やったこと 1. nvmインストール nvmって？ Node Version Manager (ノード・バージョン管理ツール) の略 nvmによって、複数のバージョンを必要に応じて切り替えることができる やったこと curlコマンド curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash パスを通す(~/.zshrcに以下を追加) export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$
StackBlitz上でモックサーバーを立ち上げてTanStack Query(React Query)を素振りしてみる
こんにちは！CastingONEの大沼です。 始めに プログラミングの勉強をする際は実際に書いて学ぶのが良いと思っていますが、オンライン上で気軽に書けるとコードの共有＆動作確認という観点で尚良いと思っています。僕も簡単なコードの実装はStackBlitzを愛用しています😊 StackBlitzではNodeの実行もできるためバックエンド側の実装を書くこともできるのが魅力です。これによってreact-queryのようなAPIとの通信が必要になるライブラリもモックサーバーを同時に立てることでStackBlitzのみで検証することができます！ そこでこの記事では具体例としてjson-serverとreact-queryを使ってStackBlitz上で実装する例を紹介したいと思います。 サンプルコード 先に今回作成したサンプルコードを以下に貼ります。単純に環境が欲しいだけの方やコードの詳細を見たい
最近、FigmaのDev ModeのPlaygroundを使用する機会があり、こちらが便利だと感じたので紹介させていただきます。 サマリー 開発とFigmaデザインの不一致で、保守性が下がることがある。Dev ModeのPlaygroundを使うことで改善できそう。 Playgroundとは、FigmaデザインのComponent Propeatyを簡単に試すことができるツール こちらを使用して設計することで、開発の保守性・効率が上がることが期待できる よくある設計方法とその課題 以下のようなButtonを設計する際、どのような設計方法があるでしょうか。 色が背景または、枠線に表示されるパターンがあったり、テキストの横にアイコンがあったりと複数の状態があるようです。 エンジニアが目視で複数の状態を比較し、それを以下のようなPropsとして定義して実装を進めるようなやり方があると思います。
はじめに バックエンドへのデータ送信や、バックエンドから受け取ったデータをフロントエンド側で加工するのはよくあることかと思います。 ただ、加工処理をそのまま実装していくと、バリデーションであったり、場合によってはエラー制御であったりとコードが煩雑になっていくことかと思います(少なくとも僕みたいな村人Aエンジニアはそうでした...) そのような際に、RHFとZodを用いることで、フォームのバリデーション・データ加工・型定義まで行えて、僕のQOLが爆上がりしたため備忘録として残します デモ 今回は、nameとageをformに設置し、それらを加工してデータ送信する簡素なデモを作成します。 デモプロジェクトはViteで作成しています またソースコードはこちらにあげてあります 環境 react 18.2.0 axios 1.6.8 reach-hook-form 7.51.3 zod 3.23.6
React入門 - Qiita
はじめに Reactは、Facebookが開発したJavaScriptのライブラリで、ユーザーインターフェイス（UI）の構築に使用されます。Reactは、コンポーネントベースのアプローチを採用しており、再利用可能なUIの部品を作成することができます。 Reactの主な特徴は以下の通りです。 仮想DOM（Virtual DOM）：Reactは、仮想DOMを使用して効率的にUIを更新します。 仮想DOMは、実際のDOMの軽量なコピーで、変更の検出と適用を最適化します。 コンポーネントベース：Reactは、UIをコンポーネントに分割することを推奨します。コンポーネントは、独立した再利用可能な部品で、プロパティ（props）を受け取り、JSXを使ってレンダリングします。 単方向データフロー：Reactでは、データは親コンポーネントから子コンポーネントへと一方向に流れます。これにより、アプリケーショ
目次 1. どんな人にオススメの記事?? 2. 自己紹介 3. まえがき 4. 作ったサイトについて 5. 使った言語やライブラリなど 6. どうやって勉強したの? 7. 作ったアプリの反省 8. 今回得たこと 9. 今後の展望 10. 終わりに 1. どんな人にオススメの記事?? この記事の読者対象は次のような方にオススメです Webアプリケーションを作ってみたいけど何から学べばよいか分からない ある程度HTMLやCSSは触れるけど、バックエンドの知識は全くない 2. 自己紹介 電気通信大学の学部4年生で情報系の専門です プログラミング歴については大学に入ってから始めたので3年ほどになります C++で競技プログラミングをしていて現在700台をうろうろしていて緑色を目指しています アルバイトはSaaSの企業でエンジニアをしています Web開発については何から始めてよいのか特にバックエンド側
Reduxとは Reduxは、JavaScriptアプリケーション全体の状態を一元管理するためのライブラリです。Reactとの組み合わせが特に一般的ですが、他のフレームワークやライブラリと組み合わせて使用することもできます。 Reduxの3つの主要原則 単一のソース・オブ・トゥルース (Single Source of Truth): Reduxでは、アプリケーション全体の状態を一つの「Store」で管理します。これにより、全てのコンポーネントが一貫したデータを参照できます。 状態は読み取り専用 (State is Read-Only): 状態は直接変更せず、「Action」と呼ばれるオブジェクトを介してのみ更新されます。これにより、状態の予測可能性が高まります。 純粋関数による変更 (Changes are made with Pure Functions): 状態の変更は「Reduce
経緯 ある日、最上位付近のコンポーネントで横断的なデータを設定するためにuseEffectを使用していました。 そんな折、末端付近のコンポーネントのuseEffectで設定したデータを参照したところ、データが設定されていないと怒られましたとさ。 useEffectの実行順序（Renderもおまけで） 赤●スタート Order Render/Mount-useEffect/Unmount-useEffect コードで確認 おわりに マウント時のuseEffectの実行順序はRenderの順序と異なり、クセがあるので気を付けないとですね。
コンポジション vs 継承 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 React は強力なコンポジションモデルを備えており、コンポーネント間のコードの再利用には継承よりもコンポジションをお勧めしています。 この章では、React を始めて間もない開発者が継承に手を出した時に陥りがちないくつかの問題と、コンポジションによりその問題がどのように解決できるのかについて考えてみます。 子要素の出力 (Containment) コンポーネントの中には事前には子要素を知らないものもあります。これは Sidebar や Dialog のような汎用的な “入れ物” をあらわすコンポーネントではよく使われています。 このようなコンポーネントでは特別な children という props を使い、以下のようにして受け取った子要素を出力するこ
React でコンポーネントの Props の型を取得する
プリミティブな UI を構築するとき、button や input などの HTML 要素をラップしたコンポーネントを作成することがあります。このようなコンポーネントでは、HTML 要素の Props に加えて、コンポーネント固有の Props を定義することが多いです。 HTML 要素の Props は必要なものだけを定義してもよいのですが、React.ComponentPropsWithoutRef を使ってすべての Props を定義しておくと便利です。 type Props = { // これはコンポーネント固有の Props variant?: "primary" | "secondary"; } & React.ComponentPropsWithoutRef<"button">; React.ComponentPropsWithoutRef は button や input
Reactのコンポーネントの型定義をするときにFunctionComponent（以降FC）だったり、VFCだったり、JSX.Elementだったり何を使えば良いのか、ネット記事では意見がバラバラだったので筆者なりに結論を出してみました。 間違っている箇所があればコメントへ🙏
ReactでGoogle認証 | Sustenage
本記事の内容本記事はReactでユーザのGoogleアカウントでGoogleにログインする方法をご紹介します。 Googleにログインすると、例えば以下のことが出来るようになります。 Google APIを使ってユーザーの情報を取得できるようになる。本人確認ができるため自前の認証の仕組みを実装しなくてよくなる。 (注１)今回はGoogleにログインし、その認証情報を使ってユーザの基本的な情報をGoole APIで取得するまでをご紹介します。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactのhooksについてちゃんと理解する Effect・パフォーマンス・その他編 - Qiita
React Hook FormとMUIを組み合わせて入力フォームを作る時に詰まったことのメモ
【React/MUI/CSS】複数行かつ溢れたら3 点リーダーを付けれるコンポーネントを作ろう！
Next.js と TypeScript で、React のライフサイクルの仕組みを理解する - コムテブログ
【dnd-kit】Reactでドラッグアンドドロップ機能を実装するモダンなライブラリdnd-kitの使い方を解説
ReactからRailsにFormDataを送信してファイルをアップロードする - Qiita
はじめに｜【2024年】React, TypeScript, Tailwind CSSでTodoアプリを作ろう
React Native(Expo)とFirebaseでカップル向けアプリを作った
ReactとDjangoで登録フォームとモーダル画面作ってみた
【Vite×React】import時のパスエイリアスを設定してみる
【React】なぜコンポーネントの中でコンポーネントを作るのは良くないのか？｜ta21cos
Storybook + Vite + React のインタラクションテストでモジュールモックする
なぜ<React.Fragment>を書かなければならないのか
（初学者向け）React + MUI v5(Material-UI)
【React入門】押さえておきたいJavaScriptの記法10選｜TERUPRO
React入門1.5: 環境構築 [ローカル版-番外編] - Qiita
Reactに特化した構文を持つFlowを覗いてみる - Qiita
【アロー関数】ReactのJSX内でmapを使って表示ができない問題 - Qiita
Dev ModeのPlaygroundを活用したReact Component設計
【react】RHFとZodでリクエスト・レスポンスのデータ整形を良しなにやる
初めてのWebアプリケーションを作ってデプロイした話(React / Express) - Qiita
ReduxとRedux Toolkit : Reactの状態管理を効率化
Reactコンポーネントを作成してライブラリ化する方法を解説した書籍が発売／技術の泉シリーズ、2月の新刊『実践Reactコンポーネントライブラリ開発』【Book Watch/ニュース】
【React】入れ子コンポーネントのuseEffect実行順序を調べた
7章 Netlifyでいったん公開してみよう｜ReactとPythonでAPI販売サービスを作ろう
【Reactの型定義】FCとJSX.Elementどっち使えば良い？