2021.06.15
FN2106001「TypeScriptハンドブック 06: nullとundefinedなど」
「TypeScriptハンドブック」の「Everyday Types」から最後にご紹介するのは、おもにnullとundefinedに関わる項目です。そして、その他として若干の説明を補っています。
FN2106002「React DnD: 単純なドラッグ&ドロップ」
Reactアプリケーションにドラッグ&ドロップを実装するReact DnDの「Examples」サイトには、作例がいくつかに分類されて掲載されています。本項では、その中でも基本的な「Drag Around」にある「Naive」のつくり方と構文を解説しましょう。
2021.05.22
FN2105003「TypeScriptハンドブック 04: 型エイリアスとインタフェース」
オブジェクトの型は、型注釈で定められました。けれど、型を複数のモジュールから使いたいとき、名前(識別子)をつけて定義した方が便利でしょう。そのときに用いるのが、型エイリアスとインタフェースです。
FN2105004「TypeScriptハンドブック 05: 型アサーションとリテラル型」
「TypeScriptハンドブック」の「Everyday Types」から今回ご紹介するのは、つぎのふたつの項目です。型アサーションは、TypeScriptの分析に指示を与えて、データ型を拡げたり、絞り込んだりします。そして、リテラル型というのは、文字列や数値などのリテラルを型として用いる構文です。
2021.05.11
FN2104001「TypeScriptハンドブック 01: 基本となる型」
「TypeScriptハンドブック」シリーズは、TypeScript公式サイト「Handbook」の構成に沿って型について解説します。邦訳ではなく、各項目の内容を改めて説明し直しました。本稿は「Everyday Types」のページから以下の項目をとりあげます。もとのページは長くて、読み終える前に力尽きそうです。そこで、このシリーズではページを分けることにしました。
FN2104002「TypeScriptハンドブック 02: 変数と関数およびオブジェクトの型」
「TypeScriptハンドブック」シリーズ第2回は、「Everyday Types」のページから以下の項目について解説します。
FN2104003「TypeScriptハンドブック 03: ユニオン型」
「TypeScriptハンドブック」シリーズ第3回で採り上げるのは、「Everyday Types」のページから、つぎのとおりユニオン型です(かっこ内は原文の項目タイトル)。TypeScriptでは、すでにある型からさまざまな演算子を用いて、新たな型がつくれます。ユニオン型(演算子|)は、その中のひとつです。
2021.04.18
FN2103001「Lodash: _.debounce()と_.throttle()でコールバックの呼び出しを間引く」
コールバックが立て続けに呼び出されるとき、実行を間引く関数がLodashの_.debounce()と_.throttle()です。_.debounce()は呼び出しがひと息ついたら、つまり前回の実行から一定間隔空いたときに、直近の呼び出しを処理します。あらかじめ定めた間隔の間に、それぞれ1度までしか実行しないのが_.throttle()です。
2021.02.09
FN2102004「Create React App 入門 10: 条件によってハンドラは無効にする ー useMemoを使って」
Create React Appのひな形からチュートリアルと同じマルバツゲームをつくる「Create React App 入門」シリーズ最終回は、メモ化の応用例のご紹介です。メモ化したコールバック関数を、条件によって無効にします。
2021.02.09
FN2102003「Create React App 入門 09: useCallbackフックで無駄な処理を省く」
前回は、useMemoフックを用いて、算出値の計算が無駄に繰り返されないようにメモ化しました。今回は関数の呼び出しです。関数コンポーネントに定められた関数も、再描画のたびにつくり直されます。関数の生成をメモ化するのがuseCallbackフックです。
2021.02.08
FN2102002「Create React App 入門 08: useMemoフックで無駄な再計算を省く」
関数コンポーネントは、たびたび描画し直されます。すると、表示のために用いられる値も、そのたびに計算が繰り返されるのです。useMemoフックは、計算に使われている値が変わらず、同じ結果となる場合には、前回の算出値を覚えておいて(memorize)使います。いわばキャッシュのようなものです。プログラミングの用語では「メモ化(memorization)」と呼ばれます。
2021.02.03
FN2102001「Create React App 入門 07: ゲームの履歴をさかのぼる」
Create React Appのひな形からReact公式チュートリアルと同じマルバツゲームをつくる「Create React App 入門」シリーズ第07回は、新たな機能を加えます。それは、待ったをかけることです。盤面の配置データを履歴でもたせ、何手でもさかのぼれるようにします。
2021.01.29
FN2101006「Create React App 入門 06: アプリケーションのロジックをコンテクストに切り出す」
前回は、ルートコンポーネントの状態を、コンテクスでコンポーネントツリー内に共有しました。今回は、状態とその操作のロジックを、コンテクストのモジュールに切り出してみます。インタフェースと表示に専念するコンポーネントとロジックのモジュールを分ければ、見通しがよくなり、動作の確認や機能の拡張もしやすくなるのです。
2021.01.26
FN2101005「Create React App 入門 05: useContextで状態をコンポーネントツリー内に共有する」
コンテクストは、親コンポーネントのデータを子やさらにその下のコンポーネントから参照できるようにする仕組みです。useContextフックが、コンポーネントツリー内の関数コンポーネントからコンテクストを使えるようにします。前回は、クラスコンポーネントをuseStateフックで関数に書き替えました。今回はさらに、useContextフックを加えてみることがお題です。
2021.01.25
「Create React App 入門」シリーズの全面改訂にとりかかりました。関数コンポーネントにフックを使い、公式チュートリアルよりも最新の技術に準拠します。
FN2101001「Create React App 入門 01: 3×3マスのゲーム盤をつくる」
React公式サイトのチュートリアル作例はコンポーネント分けされてはいるものの、ひとつのJavaScriptファイルです。「Create React App」を使えば、モジュール分けされたシングルページアプリケーション(SPA)のひな形が簡単につくれます。そのひな形に手を加えてチュートリアルと同じマルバツゲームに仕上げようというのが、この「Create React App 入門」シリーズです。
FN2101002「Create React App 入門 02: クリックしたマス目にXをつける」
Create React Appのひな形からチュートリアルと同じマルバツゲームをつくるシリーズの第2回は、クリックしたマス目に「X」印をつけます。9つのマス目のデータやその操作をどこで行い、コンポーネント間でどのようにやり取りするのかがポイントです。
FN2101003「Create React App 入門 03: マルバツで勝ち負けを決める」
第3回は、いよいよゲームとして成り立たせます。つまり、XとOを交互につけ、勝ち負けを決めるということです。
FN2101004「Create React App 入門 04: クラスのコンポーネントをuseStateで関数に書き替える」
これまでのReactのコンポーネントでは、状態(state)をもたせたいときはクラス(class)で定めました。けれど、React 16.8からは、関数コンポーネントでも、状態が保てます。そのための機能がフックです。今回は、もっとも基本となるステートフックuseStateにより、状態が備わったクラスコンポーネントを関数コンポーネントに書き替えます。
2020.12.07
FN2012001「Create React App フックによる状態管理 04: カスタムフックにUnstated Nextを組み合わせる」
「Create React App フックによる状態管理 03: コンテキストにuseReducerを組み合わせる」では、コンテキストから状態の保持をリデューサに分けました。状態の操作は、コンテキストだけでなく、カスタムフックでも可能です。本稿では、まず前回のサンプルのコンテキストを、カスタムフックに差し替えます。つぎに試すのが、Unstated Nextというライブラリです。このライブラリを用いると、カスタムフックから改めてコンテキストがつくり出せます。
2020.11.23
FN2011001「Create React App フックによる状態管理 01: 基本のuseStateを使う」
このチュートリアルシリーズでは、Reactにおける状態(state)の管理について、おもにフックを使った解説をしてゆきます。React 16.8からは、関数コンポーネントでも、状態が保てるようになりました。そのための機能がフック(hook)です。本稿では、もっとも基本となるステートフックuseStateで、関数コンポーネントに状態を備えます。サンプルに採り上げるのは簡単なカウンターのアプリケーションです。
FN2011002「Create React App フックによる状態管理 02: useContextでコンテクストを使う」
「Create React App フックによる状態管理 01」では、基本のフックuseStateで状態をコンポーネントにもたせました。親コンポーネントに状態をまとめれば、子コンポーネントから参照することはできます。けれど、できれば状態やロジックは、要素の表示やインタフェースとは分けたいところです。useContextフックを用いれば、この切り分けができます。作例は引き続きカウンターです。
FN2011003「Create React App フックによる状態管理 03: コンテキストにuseReducerを組み合わせる」
「Create React App フックによる状態管理 02」では、ロジックが含まれたカスタムコンテキストのプロバイダで、アプリケーションを包みました。。今回はさらに、useReducerフックと組み合わせて、状態の操作と保持を切り分けます。
2020.06.01
FN2006001「Create React App + TypeScript: 関数コンポーネントにTypeScriptで型づけする」
Reactアプリケーションにデータ型を定めたいとき、TypeScriptが標準として使われるようになってきました。関数コンポーネントで組み立てたサンプルを、TypeScriptにより型づけしてみます。
2020.05.26
FN2005005「React Hooks: useContext()フックを使う」
コンテクストは、親コンポーネントのデータを子やさらにその下のコンポーネントから参照できるようにする仕組みです。useContext()フックが、関数コンポーネントからコンテクストを使えるようにします。「React Hooks: クラスのコンポーネントをuseState()で関数に書き替える」では、React公式サイトのチュートリアルにもとづいた作例(○×ゲーム)のクラスコンポーネントを関数に書き替えました。このサンプルに、さらにuseContext()フックを加えてみようというのが本稿のお題です。
2020.05.20
FN2005003「Create React App + React Router入門 03: ルーティングを入れ子にする」
React Routerのルーティングは入れ子にできます。とくにむずかしいことは考えることなく、ルーティングしたコンポーネントの中に、お約束どおりのルーティングを定めればよいのです。
FN2005004「Create React App + React Router入門 04: フックuseRouteMatch()とuseHistory()を使う」
React Router v5.1からフックAPIが備わりました。今回は、その中からふたつのフックをご紹介します。
2020.05.11
FN2005002「Create React App + React Router入門 02: ページの遷移と状態の保持」
シングルページアプリケーション(SPA)には、状態をもたせることができ、それに応じてコンポーネントの表示が変えられます。今回確かめるのは、ルーティングで状態がどのように扱われるのかということです。
2020.05.08
FN2005001「Create React App + React Router入門 01: ルーティングを定める」
シングルページアプリケーション(SPA)は、ひとつのページでコンテンツを切り替えます。画面が素速く遷移でき、ユーザー体験を高めるための仕組みです。けれどURLが変わらないと、遷移した画面の中のひとつを見ることがむずかしくなります。画面に表示するコンポーネントとURLを結びつけるのが、ルーティングモジュールであるReact Routerの役割です。
2019.04.30
FN2004004「React + Redux入門 07: React ReduxのフックuseDispatch()とuseSelector()を使う」
React Redux 7.1.0からフック(Hook)が備わりました。React標準のフックが状態などの機能を関数コンポーネントにつなぐのに対して、ReduxのStoreにつなぐのがReact Reduxのフックです。高階(Higher-Order)コンポーネントのconnect()を使わずに済み、コードの組み立てがすっきりします。
FN2004005「React + Redux入門 08: Redux公式サイトのTodoリストの作例をフックuseDispatch()とuseSelector()で書き替える」
Redux公式サイトの「Example: Todo List」を少し手直ししたうえで、フックuseDispatch()とuseSelector()により書き替えまます。フックを使うことでコードが見やすくなるとともに、状態をもったコンポーネント(コンテナ)は必ずしも切り分けなくてよくなります。
2019.04.19
FN2003001「Create React App + React DnD 01: ドラッグ&ドロップの前に ー クリックで動かす」
React DnDは、ドラッグ&ドロップのインタフェースをコンポーネントから分けて処理できる、Reactのユーティリティです。React DnDのサイトの「Tutorial」作例を、コードは少し修正したうえで、順を追って解説することにします。今回は、ドラッグ&ドロップの前の準備です。クリックでオブジェクトを動かします。
FN2004001「Create React App + React DnD 02: ドラッグ&ドロップで動かす」
React DnDサイトの「Tutorial」でつくられるドラッグ&ドロップのサンプルコードに、少し手を加えて解説し直すチュートリアルの第2回です。いよいよ、ドラッグしてみます。
FN2004002「Create React App + React DnD 03: React DnD公式サイトの作例に書き替える ー 副作用フックuseEffect()を使って」
React DnDサイトの「Tutorial」には、でき上がりと称するCodeSandboxの作例も公開されています。でも、コードを見ると、「Tutorial」の解説と微妙に違っているようです。それどころか、文中にひとことも触れられていないモジュールまで加わっています。そこで今回は、前回のコードにさらに手を加えて、この公式サイトの作例に書き替えてみましょう。前回に引き続き、細かいところは手直ししました。
FN2004003「React Hooks: クラスのコンポーネントをuseState()で関数に書き替える」
これまでのReactのコンポーネントでは、状態(state)をもたせたいときはクラス(class)で定めました。けれど、React 16.8からは、関数コンポーネントでも、状態が保てます。そのための機能がフック(Hook)です。本稿では、もっとも基本となるステートフックuseState()により、状態が備わったクラスコンポーネントを関数コンポーネントに書き替えてみます。
2020.02.01
FN2002001「Create React App 入門 05: 無駄な処理を省く」
本チュートリアルシリーズ最終回のテーマは、無駄な処理を省く断捨離です。細かな修正だとしても、無駄はなくした方がよいでしょう。
2020.01.19
FN2001002「Create React App 入門 03: マルバツで勝ち負けを決める」
Create React Appのひな形からチュートリアルと同じマルバツゲームをつくるシリーズ第3回は、いよいよゲームとして成り立たせます。つまり、XとOを交互につけ、勝ち負けを決めるということです。
FN2001003「Create React App 入門 04: ゲームの履歴をさかのぼる」
Create React Appのひな形からチュートリアルと同じマルバツゲームをつくるシリーズ第4回は、新たな機能を加えます。それは、待ったをかけることです。盤面の配置データを履歴でもたせ、何手でもさかのぼれるようにします。
2009-2019年情報 2008年情報 2007年情報 2006年情報 2005年情報 2004年情報 2003年情報 2002年情報 2001年情報
「非公式テクニカルノート」のご利用について
ノートの作成にあたっては、必要な調査や検証を行っております。ただし、記載の誤りや漏れ、解説にしたがって発生した問題、およびそれらにより生じた損害につきましては、一切責任を負いかねます。あらかじめ、ご了承ください。
