サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
qiita.com/FumioNonaka
import { useMemo } from "react"; export const TodoList: FC<Props> = ({ todos, tab }) => { const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); }; 引数 calculateValue: キャッシュする値を計算する関数。純粋で、引数は取らず、任意の型の値を返さなければなりません。Reactは、まず最初のレンダー時に関数を呼び出し、値が返されます。次回以降のレンダリングについてはつぎのとおりです。 直前のレンダー時と依存値が変わっていないとき: Reactは前と同じ値を返します。 直前のレンダー時から依存値が変わった場合: calculateValueが呼び出され、返されるのは新たな結果です。値はあとで使える
React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、応用解説の「Synchronizing with Effects」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 コンポーネントには、外部システムと同期しなければならないものもあります。たとえば、つぎのような場合です。 React以外のコンポーネントを状態にもとづいて制御したいとき。 サーバーとの接続を確立したいとき。 分析用のログをコンポーネントが画面に表示されたら送りたいとき。
React + TypeScript: Framer MotionのvariantsでDOMツリーに調和したアニメーションを加えるJavaScriptTypeScriptECMAScriptReactframer-motion Framer Motionは、本番環境に対応したReact用のモーションライブラリです。構文は宣言的で、複雑なアニメーションのコードも簡潔に書けます。つまり、コードベースが読みやすく、保守しやすいということです。 ライブラリの基本的な使い方については「React + TypeScript: Framer Motionでアニメーションを加える」をお読みください。本稿は、公式サイト「Animation」の「Variants」について解説します。つぎのサンプル001が、公式作例を参考にしたプルダウンメニューです。 サンプル001■React + TypeScript: F
React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、応用解説の「Referencing Values with Refs」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 コンポーネントに何か情報を「記憶」させつつ、その情報による新たなレンダーは引き起こしたくないとき使えるのがrefです。 コンポーネントにrefを加える コンポーネントにrefを加えるには、useRefフックがimportされていなければなりません。フックの呼び出しに与
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公式サイトのドキュメントが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は、エラーの種類に応じて正しく扱えるよう、エラーが起こった
Apollo ClientはReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は公式サイトの「Fragments Share fields between operations」にもとづいて、複数のクエリや変更の操作間でフィールドをどう共有するかについての解説です。Apollo Clientでクエリを使うための基礎はすでに学んだことが前提となります(まだの方は先に「React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる」をお読みください)。ドキュメントの邦訳ではなく、日本語で説明し直しました。原文から省いた部分もあり、逆にわかりにくいところは補っています。 GraphQLのフラグメントは、複数のクエリと変更の間で共有できるロジックの一部です。つぎのコード例は、NamePartsフラグメントの宣言
React + TypeScript: Apollo ClientのサブスクリプションによりGraphQLサーバーからリアルタイムに更新を取得するJavaScriptTypeScriptReactGraphQLapollo Apollo ClientはReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は公式サイトの「Subscriptions - Get real-time updates from your GraphQL server」にもとづいて、GraphQLサーバーからデータをリアルタイムにどう更新するかについての解説です。Apollo Clientでクエリを使うための基礎はすでに学んだことが前提となります(まだの方は先に「React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる」をお読
React + TypeScript: React 18でコンポーネントのマウント時にuseEffectが2度実行されてしまうJavaScriptTypeScriptECMAScriptReact React 18でコンポーネントをはじめて表示(マウント)したときに、useEffectが2度実行されるようになりました。 結論 React 18からの仕様です。StrictModeが有効な開発時のみ、すべてのコンポーネントについてuseEffectはこのように動作します。 なぜそのような仕様が採り入れられたのか、それで何の役に立つのか、公式「React Docs」(BETA)の「Synchronizing with Effects」の中に解説があります。その内容をかいつまんでご説明しましょう。なお、このページの情報全体は「React: エフェクトによる同期 ー useEffectのあれこれ」で
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
Array.prototype.reduce()は、応用範囲の広い配列操作のメソッドです。ただ、与えられるパラメータの数も多く、使い方がわかりにくいきらいは否めません。配列要素を入れ替える例がわかりやすそうかと思いついたので採り上げます。 数値要素の合計を求める 簡単な例からはじめます。よく使われるのが、数値の配列要素の合計です。アロー関数式=>で与えたコールバック関数の第1引数(sum)が結果の集計で、第2引数の要素(num)を順に取り出して集計にまとめます。合計の場合には、集計結果に要素の値を加えてゆくということです。 const sum = [0, 1, 2, 3, 4].reduce((sum, num) => sum + num); console.log(sum); // 10 要素に処理を加えた新たな配列を返す Array.prototype.reduce()の第2引数は集計
React: React Bootstrapでタブのカラーを変える ー useState()とuseEffect()を使ってJavaScriptReactreact-bootstrapECMAScript2015 React Bootstrapは、Bootstrapのスタイルが適用されたコンポーネントをReactアプリケーションに組み込めるライブラリです。この3月24日に正規バージョンv1.0.0がリリースされました。Bootstrapのみでは<div>などにやたらとクラスを詰め込んだDOM要素があふれます。それに対して、Reactのコンポーネントですっきりと組み立てられるのが利点です。 Bootstrap「Jumbotron」のコード例 <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class=
Vue I18nは、Vueアプリケーションを国際化(多言語対応)させるためのプラグインです。ページに表示するテキストを、ロケールに応じて切り替えられます。インストールから基本的な設定と使い方までは「Vue.js: Vue I18nでアプリケーションを多言語に対応させる」でご説明しました。本稿では、公式ドキュメントに解説が見当たらず悩んだことをふたつ紹介します。 01 プレースホルダーを多言語化する 実は、プレイスホルダーを使うことは推奨されないようです。そうはいっても、入力例を示すなど、使う場面は少なくないでしょう。ところが、つぎのように記述すると、式($t('placeholder'))がそのまま表示されてしまい、翻訳テキストが取り出せませんでした。
Vue I18nは、Vueアプリケーションを国際化(多言語対応)させるためのプラグインです。簡単なVueアプリケーションで、このプラグインを試してみましょう。 01 Vueプロジェクトのひな形作成とVue I18nのインストール ひな形にするプロジェクトは、Vue CLIを用いて単一ファイルコンポーネントとしてつくることにします(「Vue CLI 3入門」参照)。コマンドラインツールから、vue createにつづけてプロジェクト名(今回はvue-i18n-test)を打ち込めば、その名前のフォルダにファイルがつくられます。
次のページ
このページを最初にブックマークしてみませんか?
『@FumioNonakaのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く