React と Redux における immutability の重要性、あるいは JavaScript を何も理解してなかった話 JavaScript は奥が深い。以前このブログに「JavaScript はそれほど難しくないと思う」と書いたが、全くそんなことはなかった。 発端 React と Redux のドキュメントや関連するブログを読んでいると、しつこいくらい immutable や immutability という単語が登場する。 immutable は mutable の対義語。 mutable は mutate + -able で、 mutate は「ミュータント - mutant」という言葉に使われるように「変異する」という意味。ちなみにこの単語はニューヨークの下水道で暮らす亀が忍者に変異して悪と戦うアニメで覚えた。 immutable はその対義語なので「不変性」を意味して
Webのフォームは、いつでもベストプラクティスを悩むものの一つです。React を使うとして完全に自作でやるのか?それともフォームライブラリを使うか?フォームライブラリならどれを使うか? 今の時代 Formik を選ぶ理由はありませんが、React Hook Form と React Final Form のどちらを使うかはとても悩ましいです。 React Hook Form は利用経験者・採用実績が多い、速度が速いなど様々な利点はありますが、React 哲学に反する作りなどクセの強さが難点です。あと良くも悪くも利用シーンが豊富でドキュメントも豊富で迷子になりがちです。 React Final Form は Final Form の React wrapper です。個人的にはこちら React 的使いやすさに反すると感じてること、React Final Form として見たときにドキュメ
フロントエンジニアの渡辺(@pentla)です。 AI 緊急情報サービスの「FASTALERT」は、Reactをフロントエンドのスタックとして採用しており、3年ほどコードベースは大きく変えずに運用しています。その過程で、Flow → TypeScriptへのスタックの変更など、継続的にリファクタリングを進めています。 tech.jxpress.net 今回は、Classベースのコンポーネントを、Hooksを使って関数ベースのコンポーネントに書き直す話です。 今回の対象読者は、 Reactを書いたことがある方 Reactのパフォーマンスについて気になっている方 Hooksは知っているけれど、プロダクション環境に入れるか迷っている方 を対象にしています。 Hooksとは v16.8から追加された機能です。今までは、Stateやライフサイクルメソッド(表示時に一度だけ呼び出したいときなど)の機能
最近のWeb開発わからん...って思って勉強してる。Reactは公式のチュートリアルやドキュメントがわかりやすく、そちらを進めると入門しやすかった。 チュートリアルやったレポジトリ https://github.com/shibayu36/react-tutorial/tree/84f44577d4bc29efe41ca0ef147092ca6d04233b 今のところ、写経した + eslintの設定してみたくらい。 メモ React – ユーザインターフェース構築のための JavaScript ライブラリ 基本的にpropsで不変な情報を、stateで可変な情報を扱う。コンポーネントをネスとしていき、アプリを作っていくイメージ。jsxで定義されるコンポーネントのフックを利用することで、いい感じに他のツール(例えばmarkdown変換)と連携できる。 Getting Started –
はじめに React 16.8から導入されたhooksにはuseEffectがあります。 詳細は公式サイトをまず参照しましょう。 useEffectを使うと、コンポーネントのレンダリングとは別に処理を書くことができます。useEffectでしばしば非同期処理を書くことがあります。例えば、サーバからのデータ取得の処理などがあります。 以下では、useEffectで非同期処理を書く場合の注意点を2つ紹介します。ケースによっては注意点はこの2つだけではない可能性が高いので、ご留意ください。 promiseを返さない useEffectに渡す関数の戻り値はcleanup関数です。 useEffect(() => { console.log('side effect!'); const cleanup = () => { console.log('cleanup!'); }; return clea
Robin Wieruch氏によるHow to fetch data with React Hooks?を著者の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文: https://www.robinwieruch.de/react-hooks-fetch-data/ このチュートリアルでは、ステートフックと副作用フックでデータを取得する方法を解説します。テック系の人気記事を取得するためによく使われるHacker News APIを利用します。また、アプリケーション内の任意の場所で再利用したり、スタンドアロンのnodeパッケージとしてnpmに公開したりできるデータ取得用のカスタムフックも実装します。 React のこの新機能が初見であれば、まずReact Hooks入門に目を通してください。完成したプロジェクトでReact Hoos でのデータ取得事例
久しぶりにReact触りました。以前Reduxを使ったサンプルアプリを作りましたが、もっと手軽に作りたいと思いますので、今回は同様のアプリをReact Hooksで作成したいと思います。 以前のサンプルはこちら サンプルコードを書く前にReact Hooksの簡単なご紹介を。 React HooksはReact 16.8から追加された新しい機能です。 Reactの特徴は再利用可能なコンポーネントが作成可能であることですが、ステートフルなコンポーネントはコンポーネント間での再利用が難しく、ステートの複雑なライフサイクルにより理解が困難なものとなっていました。 Hookの導入により1つのコンポーネントを複数の小さな関数に分割可能にし、よりシンプルなコンポーネントを作ることが可能となります。 Hookの説明については公式を参照してください。 Hooksの説明 Hooksにはいくつかのフックが用意
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 React は強力なコンポジションモデルを備えており、コンポーネント間のコードの再利用には継承よりもコンポジションをお勧めしています。 この章では、React を始めて間もない開発者が継承に手を出した時に陥りがちないくつかの問題と、コンポジションによりその問題がどのように解決できるのかについて考えてみます。 子要素の出力 (Containment) コンポーネントの中には事前には子要素を知らないものもあります。これは Sidebar や Dialog のような汎用的な “入れ物” をあらわすコンポーネントではよく使われています。 このようなコンポーネントでは特別な children という props を使い、以下のようにして受け取った子要素を出力するこ
ReactでHooks APIが登場したのは2019年2月。現在では当たり前のように使われているHooksですが、みなさんは正しく使いこなせているでしょうか? 本記事ではHooks APIの基本的な使い方から、注意点まで説明します。 useStateとは HooksはReactバージョン16.8で追加された新機能です。stateやライフサイクルといったReactの目玉機能を、クラスコンポーネントでなくとも使えるようになります。次のコードは、ボタンをクリックすると数値が増えるカウンターを作成するコンポーネントです。数値はReactのstate機能を使って管理されています。 import React, { useState } from "react"; export const CounterComponent = () => { // state を追加 const [count, set
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 エフェクトを使って同期を行う エフェクトは必要ないかもしれない useEffect フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。 副作用 (effect) フック により、関数コンポーネント内で副作用を実行することができるようになります: import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); /
ReactのHooks APIにはuseStateやuseEffectなどの基本系のAPIのほか、パフォーマンス改善や状態のスコープ管理など、特定のケースで使うと便利なHooksが用意されています。今回は基本形から一歩進んだ応用系のHooksのほか、コンポーネント内部のHooksを切り出す手法について紹介します。本記事は前後編の内容なので、React Hooksの入門向けの内容は前回の記事を参照ください。 useContextを使ってContextを管理する useContextを利用すると、スコープ単位でステートを共有できるContextという機能を使用できます。 useContextは現在のContextの値を読み取り、変化していた場合はそれを伝える役割をもちます。Contextを設定するためには上位のコンポーネントでProviderを決定する必要があることに注意しましょう。 Cont
Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか? 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート(useState、useReducer)での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ
Look for the 🛠️️ emoji if you'd like to skim through the content while focusing on the build steps. The focus of this tutorial is to help developers learn how to secure a React application by implementing user authentication. You'll enhance a starter React application to practice the following security concepts: Add user login and logout.Retrieve user information.Protect application routes.Call p
この記事は Reactで今どきなWebアプリを作りたい(あわよくばサーバーレスにしたい) チュートリアルは触ってみたけど、その後はどうしたら良いのか右も左も分からない という人向けに、「こんな感じで実装したら公開できるアプリとしての体裁は整いそうですぞ」というオレオレHowToをまとめたものです。 ーー追記(2019/4)ーー この記事は2018/9に作ったものなので、バージョン周りなど結構古くなっちゃってます。MaterialUIなどは今はV3が出ていてドキュメントを見る時などご注意いただければと思います。参考程度にご活用下さい。 まとめてたら少し長くなってしまったのですが、とりあえず動くソースだけくれれば良いよって人は、GitHubでソースも全て公開(MIT License)もしてますのでgit cloneするなりご自由にどうぞ。 ※最近はVue系のNuxtでこんなこともやってみたので
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く