技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
フロントエンドカンファレンス北海道2024 (2024/08/24) でのスポンサー LT 資料 https://fortee.jp/frontend-conf-hokkaido-2024
特定の時間になったらコンテンツをページに出したい、ということがあると思う。漫画サービスなら「ゴールデンウィーク限定！全話無料キャンペーン！」みたいなのとか。 普段の業務ではこうしたことを実現するために、時限式コンポーネントや、ScheduledComponent などと呼ばれるものを作ってる *1。 // components/ScheduledComponent.tsx export function ScheduledComponent({showAt, children}: { showAt: Date; children: React.ReactNode; }) { if (new Date() < showAt) { return null; } else { return children; } } これを Next.js Pages Router などから、以下のようにして使
React Aria は Adobe が提供する React 用のコンポーネントライブラリです。スタイルを持たずに UI の機能やロジックのみを提供するいわゆるヘッドレス UI ライブラリであり、特に React Aria はアクセシビリティを最優先した設計となっているのが特徴です。ブログの連載記事で、アクセシブルなボタンコンポーネントの作成方法について深く掘り下げられていることから、その力の入れようが伺えます。 Buttons seem like simple components at first, but they hide a lot of complexity under the hood. In the first part of this series, we'll look at how React Spectrum and React Aria implement ada
はじめに この記事は、弊社で行うインターンシップのプラス要素の資料として書きました。 5日間のインターンでは、環境構築を必要としないCodesandboxを使用します。 インターンを通じて、さらに興味を持った学生向けに今回の資料を作成しました。 この記事の目的は、記事に出てくるツールなどを使いこなすのではなく、入門編として今後Dockerなどを使用することが出てきた際に抵抗なく、始められるようになることを目指して作成しています。 対象者 弊社のインターン生 Viteを使ってReactの環境構築したい人 Vite + Dockerを使って環境構築したい人 など... 今回出てくるものたち Node.js Docker React Vite 出てこないもの ツールそれぞれの詳しい解説 Node.jsの準備 今回、npmコマンドを使用するため、Node.jsをインストールします。 まず、バージョ
How Electric-Vehicle Battery Fires Happen—and How You Should React
How Electric-Vehicle Battery Fires Happen—and How You Should React Here’s everything you need to know about lithium-ion battery fires in EVs and what you can do to stay safe if one starts in your car. An EV battery—which is actually an assembly of many smaller batteries—gets assembled at a Mercedes-Benz factory in Germany.Photograph: Krisztian Bocsi; Getty Images Lithium-ion battery fires can be i
state の管理 – React
アプリケーションが成長するにつれて、state の構成方法やコンポーネント間のデータの流れについてより計画的に考えることが重要になります。バグの一般的な原因は、冗長な、あるいは重複した state です。この章では、state を適切に構造化する方法、state 更新ロジックをメンテナンスしやすい状態に保つ方法、そして離れたコンポーネント間で state を共有する方法について学びます。 state を使って入力に反応する React を使う場合、コードから直接 UI を変更することはありません。例えば「ボタンを無効にする」、「ボタンを有効にする」、「成功メッセージを表示する」といったコマンドを書くことはありません。代わりに、コンポーネントのさまざまな視覚状態（例えば「初期状態」、「入力中状態」、「成功状態」）に対して表示したい UI を記述し、ユーザ入力に応じて state の変更をトリ
※言語ごとのオブジェクト(json)のことをこの記事では辞書と呼びます。 はじめに Reactでreact-i18nextを使用して多言語対応をしています。 そこで使用している辞書運用のベストプラクティスを模索しました。 導入時の初期設定などは省きます🙇♂ よくある実装(工夫前) 例えば、日本語と英語対応したいと思ったときに、以下のような実装がよくあると思います。 { "profile": { "name": "名前", "email": "メールアドレス", "password": "パスワード" }, "confirmPassword": "パスワード確認", "login": "ログイン", "logout": "ログアウト", "register": "登録", "forgotPassword": "パスワードを忘れた", "resetPassword": "パスワードをリセッ
はじめに こんにちは、AG-Boost事業部でエンジニアとして内定者バイトをしている井上健人です。 この度、AG-Boostの事業部内管理画面（以下、管理画面）に分析用のGTMを埋め込む機会があり、 試行錯誤しつつ0から勉強しましたので、ご紹介しつつ、自分の備忘録として残したいと思います。 1. そもそもGTMって何？ GTMとは、正式名称Google Tag Manager、Google AnalyticsやWeb広告などを利用する際に埋め込む「タグ」を一元管理するものです。無料で使えます。 従来であれば、役割ごとのタグ（分析用のタグや広告用のタグ等）をWebサイトやアプリに埋め込んで、一つ一つHTMLのコード上で管理しなければその役割を果たすことは不可能でした。 そこで、「GTMのタグ」としてWebサイト上に埋め込み、そこから全てのタグを管理できるという仕組みを提供するものがGTMです
元美容師のDjangoポートフォリオリニューアル日記 Part.4：コンポーネント分割とモーダルフォーム編(material-UIも少しだけ) こんにちは、やぎです！ 前回の記事では、DjangoとReactを連携させ、データベースに登録されているサロンデータの取得と表示を実装しました。 今回は、フロントエンドでサロンの登録機能を追加していきます！ 今回の実装内容 1.サロン登録機能の追加(単一ファイルで実装) まずは前回作成したapp.jsに追加をしてサロン登録機能を作成します。 2.コンポーネントの分割 単一ファイルで作成していた機能を、部品ごとに分けてコンポーネント思考で作り直します。 3.Material-UIの導入 見た目を整える為にスタイルをあてていきます。今回はMaterial-UIを使用してみます。 4.モーダルでのフォーム表示 登録フォームをモーダル画面で表示してみます。
はじめに 以前制作しました学習記録アプリを改良してみました。 制作して感じたことなどをまとめてみました。 ↓前回の記事はこちらです https://qiita.com/masafumi1073/items/b3bf7997c252bde7482b 制作したアプリ 前回と機能的な面では大きな違いはありません。 今回は以下の3つを新規で追加しています。 Supabaseを使用した学習記録のデータの管理 Github ActionsによるCICDの追加 Jestとreact-testing-libraryを使用したテストの実装 工夫した点 前回はスタイリングを行わず、機能面の実装だけにとどめていたので、今回はスタイリングを行いました。また、styled-componentsを初めて使ってみました。普段はTailwind CSSを使用していますが、クラスが多くなりごちゃごちゃするのが好きではないた
Reactのフックとは何か Reactのコンテキストとは Reactにフックが導入されて何が変わったか Reactの関数コンポーネントとは Reactのフックとは何か Reactのフック（Hook）は、React 16.8から導入された機能であり、関数コンポーネント内で状態管理やライフサイクルメソッドの利用など、クラスコンポーネントで提供されていた機能を、関数コンポーネントでも利用できるようにするための仕組みです。 主なReactのフックには以下のようなものがあります： 1. useState: 状態を関数コンポーネント内で利用できるようにする。 通常の変数とは異なり、状態を変更するとコンポーネントが再レンダリングされる。 import React, { useState } from 'react'; function Example() { const [count, setCount
イベントハンドラの伝播 下のコードでは<div>の中に<button>があります。 どちらのタグにもonClickハンドラーを記述しています。 ボタンをクリックすると、 ボタンの onClick が呼び出されます。 div の onClick が呼び出されます。 子コンポーネントのイベントが親コンポーネントにも到達しています。これをイベントハンドラの伝播と言います。 *onScrollを除いて全てのイベントは伝播します。 どうやってイベントハンドラーの伝播を止めるか イベントハンドラは唯一の引数としてイベントオブジェクトを受け取ります。 通常eと書きます。このオブジェクトを使用してイベントに関する情報を読み取ることができます。 このイベントオブジェクトを使用すると伝播を停止することもできます。 イベントが親コンポーネントに到達するのを防ぎたい場合は e.stopPropagation()を
React で chat 機能を実装するための UI ライブラリの調査 採用 @chatscope/chat-ui-kit-react 機能概要: Web チャットアプリ開発向けのオープンソース UI ツールキット。 43 個の再利用可能な React コンポーネント。 フルレスポンシブとカスタマイズ可能。 400 個の scss 変数とテーマ化のサポート。 画面適応: Web チャット UI の迅速な開発をサポート。 スティッキースクロールバー、contenteditable、レスポンシビリティの問題解消機能提供。 Github Star: 817 直近の更新: Aug 22, 2023 採用理由 トレンディ 自由度が高い memo: デモ デモには、画像とかバイナリファイル選択の表示なし ※ストーリーブックにはあったので画像とかも送れそう https://chatscope.io/de
概要 最近の個人開発プロジェクトで、"コンポーネントのロジックをカスタムフックに切り出すように実装することがあります。 アウトプットの一環で、簡単な toggle 機能をカスタムフックで実装しながら、カスタムフックの基本を理解できたらと思います！ カスタムフックとは？ カスタムフックは、React の Hooks 機能を利用して独自で定義した Hooks のことを指します。 また、カスタムフックを実装する際は、以下のようなルールがあります。 関数名は、必ず use で始めること。 トップレベルの関数内でのみ呼び出すことができる。ループ、条件、またはネストされた関数内ではフックを呼び出すことはできない。 React 関数コンポーネント内、または、カスタムフック内でのみ使用できる。 カスタムフックを利用することで、以下の利点を得られると思います。 コンポーネント内のロジックをカスタムフックとし
React testing libraryでgetByRoleのnameオプションがうまく動かない - Qiita
React testing libraryのgetByRoleで同じロール[textbox]が複数存在したので、 nameで絞ろうとしたときうまく取れなかった時の話。 test('renders react component', () => { render(<TestText value={"hoge"} name="fuga"/>); const divElement = screen.getByRole('textbox',{name: /fuga/i }); expect(divElement).toBeInTheDocument(); });
はじめに React において、コンポーネントに渡される props はイミュータブル（＝不変）であるため通常、値を書き換えることはしません。 しかし 「そもそもなぜ props は書き換えない方が良いのか？」 と疑問を持ったことはないでしょうか？ そこで今回は props がイミュータブルである理由について、 React の思想に触れながら少し掘り下げて考えてみたいと思います。 興味がある方は、ぜひ最後までご覧ください。 TL;DR props をイミュータブルにするのはコンポーネントの純粋性を保つためである イミュータブルに保たないと副作用や単方向データフローに問題が生じてしまい、予期せぬバグを引き起こしかねない（＝純粋性が壊れる） 純粋性とは以下の 3 つの特徴をもつこと 冪等であること レンダー時に副作用がないこと ローカルな値以外を変更しないこと コンポーネントを純粋に保つことで
React + TypeScript + Rollup + WebComponents(CustomElements) 構築メモ
まとまって参考になる情報もあったのでこの辺りを並行してみながら設定ファイルを作っていく React+TypeScript+Storybook+Rollupのプロジェクト作成 | Kazunori Kimura | zenn rollup.js × TypeScriptのライブラリをnpm公開する環境の構築（2020年12月版） らんす🍐 | zenn TypeScript＋rollup.js＋EmotionでReact開発できる環境を作ってみた | SANDFISH FACTORY Component library setup with React, TypeScript and Rollup | dev.to Rollup Config for React Component Library With TypeScript + SCSS | Ng Charn Chuen 最近作ったR
はじめに これは KWC Advent Calendar 2022 の記事です。 KWCでフロントエンドを担当している、沖縄県在住の @kwc_sunagawa です。 2019年4月に上京し新卒でKWCに入社したものの、リモートワークが標準化したこともあり、 現在は沖縄に戻ってフルリモートで働いております。 本記事では新規開発で Preact を採用したものの、様々な問題が発生し、結局 React に戻すことになった経緯についてお話しします。 Preact とは Preact とは、React の主要な API のみを切り出し、パッケージのサイズを抑えることにより、パフォーマンスの向上を目的としたライブラリです。 パッケージのサイズは 4KB1 で、 React の44.5KB2 と比較すると、10分の1にも満たない小ささです。 また、React の主要な API を利用していることから
plopfile.mjs を作成し、対話形式のプロンプトを定義 まずは Plop でコンポーネントファイルを作成するところまで進めます。 プロジェクトのルートディレクトリに plopfile.mjs を作成します。 export default function (plop) { // Plop ジェネレーターの定義。この設定により、CLI コマンドで `component` ジェネレーターが使用可能になる plop.setGenerator("component", { description: "React component generator", // 対話型プロンプトの定義 prompts: [ [ { type: "input", name: "name", message: "Component name?", }, ], ], // 入力内容に対するアクションの定義 act
![[React × Prop] CLI を使ってコンポーネントを一括作成](https://cdn-ak-scissors.b.st-hatena.com/image/square/59dd2943d059a499c160a5bb1bd85acc5454951f/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--GheM3Usf--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%252520%2525C3%252597%252520Prop%25255D%252520CLI%252520%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252582%2525B3%2525E3%252583%2525B3%2525E3%252583%25259D%2525E3%252583%2525BC%2525E3%252583%25258D%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252582%252592%2525E4%2525B8%252580%2525E6%25258B%2525AC%2525E4%2525BD%25259C%2525E6%252588%252590%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Akoji-koji%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzA5NGM2N2EyYTAuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
TypeScriptの高度な型システムとReact Hooksの利用 :beginner: TypeScriptは、JavaScriptに強力な型システムを追加することで、コードの品質と可読性を向上させることができます。このガイドでは、TypeScriptのいくつかの高度な型システムとReact Hooksを使用する際の具体的な方法について説明します。 Intersection Types（交差型） Intersection Typesとは 交差型（Intersection Types）は、複数の型を組み合わせて1つの型にすることができます。これにより、オブジェクトが複数の型のすべてのプロパティを持つことを保証します。 interface Person { name: string; } interface Employee { employeeId: number; } type Per
クリーンアップ処理の必要性がいまいちわからない 以下はクリーンアップ処理をせずタイマーを10万個単位で追加するデモです。 実際はこんなことにはならないと思いますが。 import React, { useState, useEffect, useCallback } from 'react'; const MassiveMemoryLeakDemo = () => { const [timerCount, setTimerCount] = useState(0); const [memoryUsage, setMemoryUsage] = useState(0); const [isAdding, setIsAdding] = useState(false); // メモリ使用量を更新する関数 const updateMemoryUsage = useCallback(() => { if
React.jsをCDNで使う
生成AIの進化に伴い、自然言語でコードを生成できるようになっている。create.xyzもその一つ。 「アルバムサムネイル」という具合に、作りたいデザインを入力すると、デザインが自動生成される。そしてそのソースコードを、Reactで出力できる。 この手の自然言語でコードを生成するサービスの多くは、フロント兼バックエンドはReact.jsが多く、デザインはtailwindCSSをベースとしていることが多い 苦手意識があり、内部ロジックの実装よりも倍以上時間をかけていたフロントエンドを、生成AIによって作れるのはめちゃくちゃ便利。 ただ、唯一の不満がある。それは環境構築だ。React.jsはnode.js環境下で動作するのでnode.js環境が必要だし、最小構成を作るにも、npmを利用してプロジェクト群を生成する。まあこの機能自体はめちゃくちゃ楽なのだけど、個人でかつ小規模で、サクッと開発した
はじめに よく「フロントエンドは○○で、バックエンドは××で」みたいな記述を見かけますが、フロントエンドとバックエンドの連携というのが調べてもパッと出てこなく、学習初期によく疑問に思っていたのでまとめました。 前提知識 ReactとGoの基本知識があることが前提。 Go APIサーバーを立ててjsonデータを返すことができる React useState, useEffect axios 構成 フロントエンド：React バックエンド：Go フロントとバックの連携という1点に集中したいので、DBは使わず、テストデータを直書きしています。 1. Goでjsonデータを返す 1-1. 適当な作業ディレクトリを作成します。 ~/Desktop$ mkdir dev ~/Desktop$ cd dev ~/Desktop/dev$ mkdir go-app // goアプリ用 ~/Desktop/
【React】非制御コンポーネントはいつ使うのか
はじめに 今回は、Reactにおける非制御コンポーネント(uncontrolled component)についてご紹介したいと思います。 主にはDOMをデータソースとすることで、React以外のコードに値を渡すために使われます。 非制御コンポーネントとは？ Reactの公式ドキュメントに以下のページがあります。 ページ中には以下のような説明があります。 ほとんどの場合では、フォームの実装には制御されたコンポーネント (controlled component) を使用することをお勧めしています。制御されたコンポーネントでは、フォームのデータは React コンポーネントが扱います。非制御コンポーネント (uncontrolled component) はその代替となるものであり、フォームデータを DOM 自身が扱います。 非制御コンポーネントを記述するには、各 state の更新に対してイ
ReactのuseRefフックの基本的な役割を理解する
Reactにおいてフックとは、開発者がクラスコンポーネントを必要とせずにReactのstateやその他の機能を使用できるようにする特別な機能です。フックの中でもuseRefフックは、値を管理したり、DOM（Document Object Model）要素にアクセスしたりするための貴重な機能として際立っています。 useRefフックは計り知れない柔軟性と可能性をもたらす強力なものですが、多くの開発者がこれの使い方を誤解しています。 この記事では、useRefフックを深掘りし、その目的、機能、ベストプラクティスを明らかにしたいと思います。この記事を読み終える頃には、フックの本質を理解し、その可能性を効果的に活用する方法について洞察を獲得できているはずです。 useRefフックとは useRefフックの主な目的は、更新されても再レンダリングが発生しないような（変更可能な）値を保存することと、DO
インタラクティビティの追加 – React
画面上の要素には、ユーザの入力に反応して更新されていくものがあります。例えば、画像ギャラリをクリックするとアクティブな画像が切り替わります。React では、時間の経過とともに変化するデータのことを state と呼びます。任意のコンポーネントに state を追加することができ、必要に応じて更新することができます。この章では、インタラクションを処理し、state を更新し、時間の経過とともに異なる出力を表示するコンポーネントの作成方法について学びます。 イベントへの応答 React では、JSX にイベントハンドラを追加することができます。イベントハンドラはあなた自身で書く関数であり、クリック、ホバー、フォーム入力へのフォーカスといったユーザインタラクションに応答してトリガされます。 <button> のような組み込みコンポーネントは onClick のような組み込みのブラウザイベントの
著者：Phuong Nguyen ーソフトウェアエンジニア、 Atlantic Team ー パート1では、カスタムフックとその作成方法に関する一般的な情報について説明しました。パート2では、開発エクスペリエンスを向上させる潜在的な可能性を解き放つ、具体的な例と実践的なアプリケーションを詳しく見ていきましょう。 パート1のブログはコチラ カスタム フックの例をいくつか示します。 1. useToggle: state変数の値を変更する関数。 bodyでは、次のことを行います。 – 変数の値を含むstateを作成します。 – このカスタムフックでは、このアクションを呼び出す次のクリックイベントを受け取るトグル関数を作成します。 – 各レンダリング後に関数のアドレスが変更されるのを防ぐために、コールバックを使用して関数を呼び出してデータをキャッシュし、それを使用するコンポーネントでの不必要な再
はじめに Reactの人気はどんどん加速しています。これからフレームワークを学ぶならReactを選ぶのは賢い選択でしょう こんにちは、Watanabe Jin(@Sicut_study)です。 今回はReactをこれから学んでいこうと思っている方に向けて、初心者チュートリアルを作成しました。 このチュートリアルではReactを書く上で欠かせないことを紹介しています。 実際にアプリを作りながらReactの機能について学ぶことによってより深く理解することが可能です。 このチュートリアルを最後までやったら、次に自分で習ったことを活かして簡単なTODOアプリなどを作れば基本がしっかり身につくようになっています。 またこのチュートリアルではJavaScriptではなくTypeScriptを採用しています。 モダンな会社ではTypeScriptが採用されることが多いはずだなので、少しでも慣れていただけ
はじめに cognitoを使ってユーザー管理をしたい！と思ったのでreactと組み合わせて実装してみます。 Cognitoユーザープールを作成する Cognitoユーザープールを作成します。 参考： ユーザープール作成 ステップ1 サインインオプションを指定します。 今回はEメールアドレスとパスワードで認証したいので、 ここではEメールを指定しておきます。 次へをクリックし、進みます。 ユーザープール作成 ステップ2 セキュリティ要件を設定します。 パスワードポリシーはデフォルトのままにします。 テストなので、MFAはなしにしておきます。 次へをクリックし、進みます。 ユーザープール作成 ステップ3 サインアップ処理の挙動を設定します。 フロントエンドから認可なしでサインアップ関数を実行するため、自己登録を有効化しておきます。 サインアップ時に検証メッセージを自動送信する設定を有効化してお
はじめに ReactとRuby on Railsについての考察を期待している人へ ごめんなさい。React周辺技術をゆる〜くまとめだけの記事です。最後に軽く感想だけ書いています。 普段からReactの開発を行っている人へ ここに書かれている内容はすでにご存知のはずなので読まなくても大丈夫です。 背景 私は普段Ruby on Railsでどちらかというとバックエンド寄りの開発をしています。 最近とあるReactのコードを読む機会がありました。私自身は過去にReactでコードを書いた経験もあるのですが、2020年頃のことなので結構前です。 でも「まあ読めるだろう」と久しぶりにReactのコードを読み始めたのですが、周辺技術が色々と進化していてコードを読むどころではなく「これは何？」というのを知るところから始めなくてはなりませんでした。2020年当時から存在していたものもありますが、今回調べたこ
はじめに この記事はstateを分かっている前提で進めていきます。 stateがわからない人はこちらの記事から読んでもらえればと思います。 フックとは 「フック」とはコンポーネントに「再利用可能な振る舞い」を付加するために用意されたものです。 今では主流となったReact Hooks は React 16.8（2019 年 2 月リリース）で追加されました。 では、このフックは何が便利なのでしょうか？ それは、「関数コンポーネントで使える」ということです。ステートは本来、クラスコンポーネントでしか利用することができません。そのためこれまで関数コンポーネントでは値を操作して表示を変えることができませんでした。しかしフックの登場により関数コンポーネントでもステートのように値を管理することができるようになりました。 関数コンポーネントとクラスコンポーネントの違いがわからない方はこちら useSt
FE開発においてモーダル実装はあらゆるところで使う場面があり、要件やモーダルの数が増えるに従って実装も複雑になり設計に悩まされてる方も多いと思います。 そこでモーダル実装に関するベストプラクティスを考えてみました 設計方針 状態管理にRecoil、モーダルに関するロジックをカスタムhook化することにしました Recoilを使う理由は、Recoilに用意されているステート管理のatomFamilyがモーダル実装と非常に相性がいいからです モーダル実装のアンチパターン const MainPage = () => { const [isFaqVisible, setIsFaqVisible] = useState(false) return ( <div> {isFaqVisible && <FaqModal />} <button onClick={() => setIsFaqVisibl
はじめに 実務では Vue / Nuxt をメインにフロントエンド 開発をしています。この度 React の案件にアサインされることをきっかけに React の学習をはじめたのですが、 Vue でやってたことって React やとどうやってやるんや？？ Vue / React の対象表みたいなのはいくつかあるけど、Vue の Composition API や React の関数コンポーネント、フックスに対応した記事がない… ということでこの度まとめてみました。 読んだ方がええ人 普段は Vue を使用していて最近 React をはじめた人（逆も然り） 普段は Vue を使用しているが、 React にも興味がある人（逆も然り） 読む前に知っておいてほしいこと Vue は Composition API 、React は関数コンポーネントや Hooks を用いることを前提として記述していま
Reactを学習しているとuseState, useEffectなどのReact Hookの他にカスタムフック(Custom Hook)という言葉を聞く機会があると思います。カスタムフックがどのようなものかわからないという人向けにシンプルな例を使って動作確認を行いながら説明を行っています。 カスタムフックについてはReactのドキュメントには”A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks.”(カスタムフックは名前がuseで始まり他のHookをcallするJavaScript関数です)と記載されているのでその点にも注目して説明を行います。 カスタムフックとは カスタムフックは複数のコンポーネントの中に存在する共通の処理を取り出して作成した関数で
【2024年最新版】 Reactの状態管理ライブラリ比較３選＋α（Redux, Zustand, Jotai） - Qiita
【2024年最新版】 Reactの状態管理ライブラリ比較３選＋α（Redux, Zustand, Jotai）JavaScriptTypeScriptReactreduxzustand Reactの一大テーマ、「状態管理」 私は今までReduxを使っていました。ただ、最近ライブラリがどんどん増えてきた中で色々試したくなったので、この機会に見てみます。 今回は、代表的な状態管理ライブラリ「Redux」、「Zustand」、「Jotai」で簡単なカウンターアプリを例にそれぞれメリット・デメリットを比較しました。 興味ある部分だけ見て自分に合うライブラリを見つける参考にしてもらえれば嬉しいです。
差分検出処理 – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 state の保持とリセット React は、各更新で実際に何が変更されるべきかを人間が心配する必要がないように、宣言型の API を提供しています。これによりアプリケーションの作成が大幅に容易になるわけですが、React の中でこの処理がどのように実装されているのかはよく分からないかもしれません。この章では React の “差分” アルゴリズムについて、コンポーネントの更新を予測可能なものとしながら、ハイパフォーマンスなアプリケーションの要求を満たす速度を得られるように、私たちが行った選択について説明します。 何が問題なのか React を使う際、render()
執筆時（2024/08/16）時点ではDOM componentsはCanary版のため、今後APIや機能が変更される可能性があります。 また現在は実験的な機能のため本番環境での使用は推奨されていません。 最新の情報は公式ドキュメントをご確認ください。 こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 先日、Expoチームが実験的な機能としてDOM componentsを公開しました。 今回はそちらについてまとめてみました。 DOM componentsって？ DOM componentsは、React(Web)でつくられたコンポーネントをWebViewとしてReact Native内に簡単に組み込むことができる仕組みです。 例えば、次のような dom-component.tsx コンポーネントのファイル上部に 'use
React Leafletを使用してGeoJSONファイルを読み込み地図に町丁目ポリゴンを表示する - Qiita
概要説明 React Leafletを使って地図の表示から町丁目ポリゴンの表示まで行います。 Node.jsはインストール済みの想定となります。 使用したもの React Leaflet React Leafletは、ReactのコンポーネントとしてLeafletを使えるようにするためのライブラリです。 Vite Viteとは2020年に発表されたフロントエンドのビルドツールで、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。 町丁目ポリゴン 町丁目とは行政界の一つで「富士見町3丁目」「広尾1丁目」など「●丁目」で表わされる行政区画のことです。行政界は他には都道府県や市区町村、大字などがあります。 町丁目ポリゴンとは町丁目の境界データであり、e-stat で 小地域（町丁・字等別）という名称で公開されています。 今回使用する町丁目
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
5分で分かる React Aria の 良いところ・これからなところ
React Server Components で時限式コンポーネントを作る - mizdra's blog
React Aria でアクセシブルなコンポーネントを作成する
React開発を加速！ViteとDockerで作るシンプル開発環境入門 - Qiita
Reactの多言語対応を効率化するための辞書管理ベストプラクティス
ReactでGTMとGA4を使ってみた - SO Technologies 開発者ブログ
ReactとDjangoで登録フォームとモーダル画面作ってみた
【React】学習記録アプリを改良してみた - Qiita
Reactのフックと導入されたことによる変化 - Web開発における知見共有系ページ
イベントハンドラの伝播を防ぐ方法について(React)
Reactでchat機能を実装するためのUIライブラリを調査したので、そのメモを共有 - Qiita
【React】カスタムフック入門: useToggleフックを実装してみよう！💫
React において props がイミュータブルである理由について改めて考えてみる
結局、PreactからReactに戻した話 - Qiita
[React × Prop] CLI を使ってコンポーネントを一括作成
TypeScriptの高度な型システムとReact Hooksの利用
Reactのクリーンアップ処理を行わないと大変になることがわかることができるでも - Qiita
【React×Go】フロント（React）とバック（Go）で連携する - Qiita
カスタムフックを使ってReactでの開発をレベルアップしよう- Part 2 - CodeComplete
【完全版】これ1本でReactの基本がマスターできる！初心者チュートリアル！ - Qiita
Cognito + React でメアド検証を行い、ユーザーを登録する - Qiita
React こんにちは！Ruby on Rails さようなら！（したくない） - Qiita
【React】フック(Hook)を学ぼう！ - Qiita
Reactでモーダル実装のベストプラクティスを考えてみた - Qiita
【逆引きリファレンス】Vue と React の書き方 比較とまとめ - Qiita
Reactのカスタムフック(Custom Hooks)を簡単な例で理解しておこう | アールエフェクト
ExpoのDOM componentsでReact NativeにReact(Web)を組み込む