値を更新しても、コンポーネントの再描写は行われない サンプルコード 下記コード内の カウントアップ（useState） ボタンを押下時、 カウント（useState） の表示が更新される カウントアップ（useRef） ボタンを押下時、 カウント（useRef） の表示は更新されない import * as React from 'react'; const App: React.FC = () => { const [count, setCount] = React.useState(0); const countRef = React.useRef(0); return ( <div> <div>カウント（useState）: {count}</div> <button onClick={() => setCount(count + 1)}>カウントアップ（useState）</but

この記事について Zenn では長らく通信処理に Axios を使っていました。 しかし、Fetch API が多くのモダンブラウザなどで普通に使えるようになった今、使う必要性があまり無くなったため、Axios を使っている処理を全て Fetch API に置き換えることになりました。 この記事では、その置き換え作業をどう進めていったのか、その結果どう良くなったのかを解説していこうと思います 🗽 解説より置き換えた結果を知りたいのよ私は！！！ って方が居るかと思いますので、最初に置き換えたことで良くなった部分を紹介しようと思います。 まず一番良くなったところといえば、ずばりサイト全体のビルドサイズが 10 KB も減りました。( ちなみに、10 KB は圧縮時のサイズで、圧縮しない場合 100 KB になります 😇 ﾜｰｵ ) グローバルのビルドサイズが 103.35KB gzip 時

概要 ReactにおいてuseStateを使ってステートを管理するのは常套手段ですが、一方で、不必要な場面なのに使ってしまうケースもありえます。 無駄なuseStateは減らすべきだとわかっていても、具体的にどういう場面で無駄に使ってしまうのかわからない方も多いかもしれません。そこで、先日実装した簡単なコンポーネントをもとに、無駄なフックを使っているソースコードと、その解決策、解決後のソースコードを示します。 対象読者 React初級者〜中級者 各種フックをサクサク使える 無駄なフックを減らそう、という話題を見て、心当たりがある 私について Reactのソースレビューを通して、useEffect撲滅委員会、useStateを減らそう委員会、TypeScriptのasを撲滅する委員会に所属しております。 サンプルコンポーネント 日付の範囲指定ができるコンポーネントです。動作イメージは動画を再

Reactの学習していて、propsとstateについての理解が重要だと思いました。 そこで今回は、この2つの役割や使い方について調べ、自分なりにまとめてみました！！ propsとstateって何？　ざっくり説明 props : 親コンポーネントから子コンポーネントへ値を渡すための仕組み state : 各コンポーネントごとに持つ、コンポーネントの状態を管理する仕組み props 親コンポーネントから子コンポーネントへ値を渡すための仕組み コンポーネントの親子関係は？ 親 : コンポーネントを利用する側 子 : コンポーネントを利用される側 コンポーネントは</>で囲むことで呼び出すことができる export default class Title extends React.Component { render() { return ( <View> <Text>子コンポーネント</Te

この記事は、Ateam LifeDesign Advent Calendar 2022 シリーズ1の8日目の記事です。 はじめに react-router-domについて、ふわっと理解していた部分がありました。 このまま年を越すには、どうも気持ちが落ち着かない。。。 というわけこの際、1から全部実装して動作を確認していこうと思います。 React Routerって何？ Reactで作成したSPAに、UIとURLを紐づけるためのものです。 http://localhost:3000/top にアクセス -> Topコンポーネントを返す http://localhost:3000/todo にアクセス -> Todoコンポーネントを返す といった事ができます。 今回やること 今回はルーティングを確認したいので、react-router-dom を使用します。 react-router-domは

【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分

はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事

この入門は、 Reactの技術要素を圧倒的効率で学ぶ ことを目的にしています。 Reactの技術要素を散りばめたWebアプリを1から作っていくことでReactを学んでいきます。 すべての動くコードを公開しています。 目次 1. Reactの新規プロジェクトの立ち上げ ←今ここ 2. コンポーネントの書き方とイベントハンドラ 3.Class Components と Function Components 4. 条件分岐 (if) と繰り返し (loop) 5. フォームと親子間のデータのやり取り 6. コンポーネントのライフサイクル 7. スタイル (準備中) 8. Higher-Order Component (準備中) 9. Portalを利用したモーダル (準備中) 10. refによるエレメントの取得 (準備中) 11. Contextを利用したテーマの変更 (準備中) この入門の

逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。 自分もそういうダメグラマーの一人でした。 だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにしたのであります。 React, Angular, Vueの３大フレームワークをざっと調べてみた際に、一番取っつきやすそうだったReactをチョイス。 しょせんはHTMLとCSSとJavascript で、結局Reactは何をやっているかというと、しょせんはHT

この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co

import { Sample } from './sample.tsx'; import { connect } from 'react-redux'; const mapStateToProps = .... ;　// 割愛 export default connect(mapStateToProps)(Sample);

はじめに ReactのコンポーネントでlocalStorageの値を扱っても、値の変化によるレンダリングは引き起こされません。これは、localStorageの値がReactの文脈における状態としては扱われないためです。 例としてuseStateによるカウンターと、localStorageの値をそのまま使うカウンターを用意しました。 localStorageの方は値の変化が画面に反映されるような期待した動作は生じません。 この記事では、この点を改善するために以下の2点を満たしたカウンターを作成することをゴールとします。 初期値はlocalStorageがもつ値に設定 ボタンのクリックによって表示される値とlocalStorageに保存される値の両方を更新 localStorage localStorageは保存期間に制限がないローカルのStorageオブジェクトです。key-value方式

はいさい！ちゅらデータぬオースティンやいびーん！ 今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感＝芽生えては大きく育った種 筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。 しかし、そんな筆者は、最近に