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年04月トップ5テクニカルノート
01. FN1609006「TypeScript入門 05: get/setアクセサをを使う
02. Creators MeetUp「ネイピア数 〜美しきムダな数〜
03. FN1702006「Vue.js入門 03: データから動的にリストをつくる
04. FN1609004「TypeScript入門 03: クラスを継承して使う
05. FN1707007「Sass: SCSSの基本的な書き方

21年04月注目テクニカルノート
09. FN2004001「Create React App + React DnD 02: ドラッグ&ドロップで動かす
10. FN1009002「力のモーメント

 

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


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

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

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

[トップへ]


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.