はてなブックマーク

React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、応用解説の「Synchronizing with Effects」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 コンポーネントには、外部システムと同期しなければならないものもあります。たとえば、つぎのような場合です。 React以外のコンポーネントを状態にもとづいて制御したいとき。 サーバーとの接続を確立したいとき。 分析用のログをコンポーネントが画面に表示されたら送りたいとき。

Framer Motionは、本番環境に対応したReact用のモーションライブラリです。構文は宣言的で、複雑なアニメーションのコードも簡潔に書けます。つまり、コードベースが読みやすく、保守しやすいということです。 ライブラリの基本的な使い方については「React + TypeScript: Framer Motionでアニメーションを加える」をお読みください。本稿は、公式サイト「Animation」の「Variants」について解説します。つぎのサンプル001が、公式作例を参考にしたプルダウンメニューです。 サンプル001■React + TypeScript: Framer Motion Variants 01 https://codesandbox.io/s/react-typescript-framer-motion-variants-01-862dkh コンポーネントごとのアニメー

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、基本解説の「Sharing State Between Components」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 ふたつのコンポーネントの状態を、つねに一緒に変化させたい場合があるでしょう。そのためには、状態をそれぞれのコンポーネントにもたせるのでなく、もっとも近い共通の親に移すべきです。そのうえで、親から子には値をプロパティで渡します。これは状態の引き上げ(リフトアップ

React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、基本解説の「Choosing the State Structure」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 コンポーネントの変更やデバッグがしやすいか、逆にバグに悩まされるかという差につながるのが、状態を適切に構造化するかどうかです。状態を構造化するときに考えるべき点についてご紹介します。 状態を構造化するときの原則 状態の備わったコンポーネントをつくる場合、用いる状態変数

React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、基本解説の「Reacting to Input with State」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 Reactが用いるUIの操作方法は宣言的です。それぞれのUI部分は直接いじりません。コンポーネントが取り得るさまざまな状態を記述し、ユーザー入力に応じて切り替えるのです。デザイナーがUIを考えるのと似ているかもしれません。 UIは宣言型と命令型でどう異なるか UIのイ

React公式ドキュメントサイトreact.devが2023年3月16日に改訂されました(Blog「Introducing react.dev」参照)。基本解説の「Learn React」には、初心者から読み進められる丁寧な説明から中級者にも役立つ詳しい情報まで、内容は満載です。 それらの記事をTypeScriptの備わった環境で解説し直し、Qiitaに投稿してきました。数がある程度増えたので、拙著Qiita記事と公式サイトの対応リンクをまとめ、簡単な紹介を添えたのが本稿です。各解説は基本的に公式記事の情報はカバーしているものの、邦訳ではありません。足りない部分は補ったり、説明の仕方を改めたり、不要と思われる記述は削除しました。また、TypeScriptを前提に加えたので、JavaScriptの基礎的な説明は省いています。 なお、コード例の一部はCodeSandboxに公開しているので、興

Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみるシリーズの第3回です。アプリケーション内のディレクトリに収めたマークダウンファイルからデータを読み込んで、トップページに表示してみます。 プリレンダリングとは プリレンダリングはNext.jsのデフォルトで、各ページはあらかじめレンダリングされます。ページのHTMLをクライアント側のJavaScriptにすべてつくらせるのでなく、Next.jsが静的な処理は先に済ませておくということです。プリレンダリングは、パフォーマンスとSEOを高めるのに役立つでしょう。 生成されたページそれぞれに関連づけられているのは、必要最小限のJavaScriptコードです。ブラウザがページを読み込むと、そのJavaScriptコードが実行され、完全にインタラクティブになります(「ハイドレーション」と呼ばれます)。 Next

Next.jsチュートリアルの公式作例を、TypeScriptも加えて、一からつくってみようというシリーズの第2回です。前回は、トップページを書き替えて、新たに追加した別ページとリンクしてみたというくらいでした。今回から、公式作例に少しずつ近づけてゆきましょう。 Imageコンポーネントでイメージを差し込む Next.jsはイメージなどの静的素材も扱えます。素材ファイルを置くトップレベルは、publicディレクトリです。Reactコンポーネントを収めるpagesと同じく、アプリケーションのルートから参照できます。 ページに表示するプロフィール画像を用意しましょう。ディレクトリpublicにimagesをつくってください。 画像をpublic/images/profile.pngとして収めます。 next-learn/basics/basics-final/public/images/pro

Next.jsの公式サイトにはチュートリアル解説があります。その作例https://next-learn-starter.vercel.appをTypeScriptも加え、一からつくってみようというのがこのチュートリアルシリーズの目的です。 Next.js公式チュートリアルは、なかばでき上がったプロジェクトのコピーにコードを書き加えるかたちで進められます。手っ取り早いものの、Next.jsを使った開発の流れがよくわかりません。また、TypeScriptについては、完成したJavaScriptの作例にあとから型づけを与える説明です(next-learn/basics/typescript-final/)。 本チュートリアルシリーズは、プロジェクトにはじめからTypeScriptを加えます。そのうえで、一から公式作例と同じアプリケーションをつくってみましょう。 React + TypeScri

本稿は公式サイト「Introspection」にもとづく、GraphQLのイントロスペクションの仕組みについての解説です。ドキュメントの邦訳ではなく、日本語で説明し直しました。原文から省いた部分もあり、逆にわかりにくいところは補っています。なお、GraphQL公式サイトのコード例は、インタラクティブな環境です。コードを書き替えて結果が確かめられますので、ぜひ試してみてください。 GraphQLスキーマがどのようなクエリをサポートしているのか、情報を求めると役立つことが少なくありません。GraphQLでは、イントロスペクションの仕組みを用いて行うことができます。 スターウォーズの例では、ファイルstarWarsIntrospection-test.tsにイントロスペクションシステムを示す数多くのクエリが含まれています。参照が実装されたイントロスペクションシステムを試すために実行するテストファ

React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、応用解説の「Separating Events from Effects」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 イベントハンドラは、あらかじめ定めたインタラクションを行ったときにのみ再実行されます。それに対して、プロパティや状態変数のような読み取った値が、直前のレンダリング時と異なるとき再同期するのがエフェクトです。場合によっては、ふたつの動きを組み合わせたいかもしれません

React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、応用解説の「You Might Not Need an Effect」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 エフェクトは、Reactの仕組みからの非常口です。Reactの「外に出て」コンポーネントを外部システムと同期できます。たとえば、React以外のウィジェットやネットワーク、あるいはブラウザDOMなどです。外部システムが関わらないなら、エフェクトは要りません。コンポーネ

Apollo ClientはReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は公式サイトの「Handling operation errors」にもとづく、操作エラーをどう扱ったらよいかについての解説です。Apollo Clientでクエリを使うための基礎はすでに学んだことが前提となります(まだの方は先に「React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる」をお読みください)。ドキュメントの邦訳ではなく、日本語で説明し直しました。原文から省いた部分もあり、逆にわかりにくいところは補っています。 Apollo ClientがGraphQLサーバーで操作を実行するとき、さまざまなエラーに遭遇するかもしれません。Apollo Clientは、エラーの種類に応じて正しく扱えるよう、エラーが起こった

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Apollo ClientはReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は公式サイトの「Subscriptions - Get real-time updates from your GraphQL server」にもとづいて、GraphQLサーバーからデータをリアルタイムにどう更新するかについての解説です。Apollo Clientでクエリを使うための基礎はすでに学んだことが前提となります(まだの方は先に「React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる」をお読みください)。ドキュメントの邦訳ではなく、日本語で説明し直しました。原文から省いた部分もあり、逆にわかりにくいところは補っています。 GraphQLがクエリと変更に加えてサポートする3つめの操作がサブスクリプションです。 ク

React 18でコンポーネントをはじめて表示(マウント)したときに、useEffectが2度実行されるようになりました。 結論 React 18からの仕様です。StrictModeが有効な開発時のみ、すべてのコンポーネントについてuseEffectはこのように動作します。 なぜそのような仕様が採り入れられたのか、それで何の役に立つのか、公式「React Docs」(BETA)の「Synchronizing with Effects」の中に解説があります。その内容をかいつまんでご説明しましょう。なお、このページの情報全体は「React: エフェクトによる同期 ー useEffectのあれこれ」でご紹介しました。詳しくは、この記事をお読みください。 チャットのコンポーネントのコード例 ChatRoomコンポーネントを書いて、それが表示(マウント)されたときチャットサーバーに接続したいとします

ReactでTypeScriptを使おうとすると、TypeScriptの基礎知識だけでは足りず、Reactの型について知らなければなりません。それで、戸惑うことも多いでしょう。そういう人たちのためにReactとTypeScriptの使い方をまとめたのが「React+TypeScript Cheatsheets」です。 「React+TypeScript Cheatsheets」の情報は多いので、本稿は基本的な項目と、説明を補わないとわかりにくい点について、かいつまんでご紹介します。関数とフックを中心にして、クラスについては省きました。 関数コンポーネント まずは、関数コンポーネントです。普通の関数と同じく、引数を型づけしてください。JSXの要素を返せば戻り値は推論されます。 type AppProps = { message: string }; // interfaceでもよい cons

React Hook Formは、フォームの入力データを検証まで含めて、まとめて簡単に扱えるライブラリです。ただ、導入のページ(「はじめる」)にコード例は示されているものの、説明があまりありません。本稿は、その中から基本的なコード例8つを採り上げ、公式ドキュメントの引用やリンクも加えて解説します。コード例はわかりやすい(あるいは動く)ように手直しし、CodeSandboxにサンプルを掲げました。 インストール React Hook Formは、npm installコマンドでつぎのようにインストールします。 アプリケーションを手もとでつくるには、Create React Appを使うのがよいでしょう。本稿のコード例の場合には、TypeScriptのテンプレートを加えてください(「React + TypeScriptのひな形作成とFullCalendarのインストール」参照)。 基本的な使い

Create React Appがv5.0にアップデートされました。それにともなって、プロジェクトをつくろうとしたとき、バージョンが古いからダメと怒られてしまうかもしれません。 You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

ReactとTypeScriptの使い方がまとめられた「React + TypeScript Cheatsheets」の「useRef」の情報にもとづいて、このフックの型づけと初期値の与え方について3つの定めを解説します。useRefフックの型には、試しやすいようにnumberを用いました。 const nullRef = useRef<number>(null); const nonNullRef = useRef<number>(null!); const nullableRef = useRef<number | null>(null);

FullCalendarは、さまざまにカスタマイズしたカレンダーがつくれるオープンソース1のJavaScriptライブラリです。ReactやVueそしてAngularといったフレームワークにも対応しています。とくに、Reactについては、バーチャルDOMノードを生成するという踏み込んだつくり込みです。 とはいえ、まだReactを用いた情報があまりなく、TypeScriptまで含めると、調べるのに苦労するのが現状です。本稿では、ReactとTypeScriptを使って、FullCalendarによるごく簡単なカレンダーのサンプルをつくってみます(図001)。なお、公式サイトのコードサンプルは、多くがクラスを用いています。本稿では、今主流となりつつある関数コンポーネントでコードを書くことにしました。 サンプル001■React + TypeScript + FullCalendar: Basi

SimpleBarはスクロールバーをカスタマイズするライブラリです。スクロールバーを独自につくるのではなく、CSSのスタイルを割り当てるので、おかしな挙動は起こらず、ネイティブなスクロールのパフォーマンスが保たれます。あくまで、スクロールバーの見栄えを変えるだけです。 デザインはCSSで定める SimpleBarは純粋なCSSでスクロールバーのスタイルを定めます。CSSで与えられるスタイルでさえあれば、自由にカスタマイズできるのです。 軽量なライブラリ 6KBのとても軽いライブラリです。JavaScriptはスクロールの動きそのものには触れません。ネイティブな動きとパフォーマンスが得られます。 モダンブラウザをサポート ChromeとFirefox、Safariなどのモダンブラウザに加え、Internet Explorer 11をサポートします。 ライブラリの概要はドキュメントとデモページ

副作用フックのuseEffect()は、DOMの扱いやコンポーネントの外からのデータの受け取りなどに用いられます。今回ご紹介するのは、これらとは少し異なる、コンポーネントのデータの監視です。違いが目で確かめられます。 状態の更新が追いつかなくなる例 問題となるコード例を先にお見せしましょう。以下のサンプル001は、矩形領域にグリッドを表示する簡単なReactアプリケーションです。数値入力フィールドで、グリッドサイズが10から100ピクセルの間で変えられます。 問題は、フィールドの数値を急に下げると、領域の下がグリッドで埋まらなくなることです(図001)。領域に必要なグリッド数を求める処理の更新が、追いつかなくなるものと思われます。 サンプル001■グリッドサイズを急激に下げると処理が追いつかない See the Pen React: Displaying grids in rectangl

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

React Bootstrapは、Bootstrapのスタイルが適用されたコンポーネントをReactアプリケーションに組み込めるライブラリです。この3月24日に正規バージョンv1.0.0がリリースされました。Bootstrapのみでは<div>などにやたらとクラスを詰め込んだDOM要素があふれます。それに対して、Reactのコンポーネントですっきりと組み立てられるのが利点です。 Bootstrap「Jumbotron」のコード例 <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?