FumioNonaka.com

Director Flash 書籍 業務内容 プロフィール
初めにお読みください:「非公式テクニカルノート」のご利用について

■See also:
F-site.org

ActionScript Samples
Flash 8 Samples

Mailing List   ActionScript 3.0

CreateJS, Away3D and other HTML5 code samples
CreateJS Samples

Facebook Page   CreateJS

現在公開中の講座一覧

サイトの新ネタやセミナー情報をダイジェストでお知らせしてきた「FumioNonaka.com Newletter」は2019年5月13日第180号をもちまして配信を終了しました。

 
Google
WWWを検索 FumioNonaka.comを検索
What's New
新規情報
絹更月

21年01月トップ5テクニカルノート
01. FN2004004「React + Redux入門 07: React ReduxのフックuseDispatch()とuseSelector()を使う
02. FN1609004「TypeScript入門 03: クラスを継承して使う
03. Creators MeetUp「ネイピア数 〜美しきムダな数〜
04. FN2004003「React Hooks: クラスのコンポーネントをuseState()で関数に書き替える
05. FN1702008「Vue.js入門 05: 項目を数えて表示する

21年01月注目テクニカルノート
07. FN1809001「Vue CLI 3入門 06: CLIサービス」 09. FN1312003「平面上の2直線の交点を外積により求める

 

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年情報


「非公式テクニカルノート」のご利用について
ノートの作成にあたっては、必要な調査や検証を行っております。ただし、記載の誤りや漏れ、解説にしたがって発生した問題、およびそれらにより生じた損害につきましては、一切責任を負いかねます。あらかじめ、ご了承ください。

ノートおよび掲載されているスクリプトの著作権は、作成者に属します。著作権者(作成者名または本サイト)を明示しての引用およびノートへのリンクは、差支えありません。スクリプトの利用・修正も、個人利用・商用ともに、自由に行えます。ただし、解説やスクリプトそのものを販売の目的とすることは、固く禁じます。

ノートに関するご意見・ご要望は、歓迎いたします。また、ノートの中の問題点・わかりにくかった点などでも、結構です。メールにてお寄せください。今後のテーマ選定や内容の改善にあたって、参考にさせていただきます。ただし、原則として返信は差し上げません。ご了承ください。

[トップへ]


CreateJS Style Book

WebクリエイターのためのCreateJS スタイルブック
>>>もくじとサンプル

ActionScript 3.0 Performance Tuning

ActionScript 3.0パフォーマンスチューニング

  ActionScript 3.0 for 3D

ActionScript 3.0による三次元表現ガイドブック
>>>補足および正誤表

ActionScript 3 Professional Guide

ActionScript 3.0プロフェッショナルガイド
>>>補足および正誤表

  Copyright © 2001-2021 Fumio Nonaka.  All rights reserved.