はてなブックマーク

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

この記事は Recruit Engineers Advent Calendar 2019 の 23日目の記事です。 TypeScript のプロジェクトで React コンポーネントを書いていると、コンパイラに怒られることがたびたびあります。ネット上にあるサンプルコンポーネントが JavaScript で書かれていると、プロジェクトにもってきたときにコンパイルできないということはよくあるんじゃないでしょうか。any でコンパイラを黙らせることもできますが、せっかく TypeScript を使っているので、安全に解決したいよねってことでこのような記事を書きました。 型定義は @types/react@16.9.17 にしたがっています。目次をみて、この程度のことはもう知っているよという方は react-typescript-cheatsheet をみてください。React + TypeScr

概要 CreateJSのイベントの仕組みはEventクラスとEventDispatcherクラスにより提供されています。DOMのイベントモデルと似たような感じになっています。JavaScriptのライブラリではよくあるイベント周りの実装だと思います。 EaselJSなどの各ライブラリはEventDispatcherを継承するなりMixinするなりして、CreateJS共通のイベントモデルを使えるようにしています。直接関係するクラスは以下のような感じ（漏れてるかも）。ExtendsとUsesは実装を見れば違いがわかると思う。 EaselJS DisplayObject Class: Extends EventDispatcher MouseEvent Class: Uses EventDispatcher Ticker Class: Uses EventDispatcher SpriteSh

Tickerを起動してステージを更新するくらいならテンプレでいろんなとこに情報があるけど、それ以外の使用方法についてはあまりないのでまとめる。最終的に公式ドキュメントの訳みたいになってしまいました。 Tickerクラス EaselJSに含まれているクラスで、タイマを管理している。一定間隔でなにか処理したいときに使う。 内部的にはsetTimeoutを一元管理している。ブラウザが対応していればrequestAnimationFrameを使うこともできる。 FPSを設定できたりするので、このクラス使ってゲームループなんかを作れる。 なぜタイマを一元管理するのか？ 余談ですが、タイマを一元管理する理由をざっと書いておく。ちなみにJavaScriptでタイマの一元管理はよく使われるテクニックのようで、僕自身はJavaScript Ninjaを読んで知りました。 複数タイマを使うと以下のようなことが

EaselJS canvas描画ライブラリ。最近WebGLに対応した。 http://blog.createjs.com/webgl-support-easeljs/ Stageに表示オブジェクト（DisplayObject）をくっつけていくスタイルで記述していく。Stage自体も表示オブジェクトにあたる。 Stageをルートとして表示オブジェクトのツリー構造をつくっていくあたりがActionSctiptぽいらしい（ASやったことないので適当） setTimeoutなどのタイマーを一元管理するTickerクラスも含まれている。 MovieClip EaselJSでMovieClipクラスを使うためのプラグインのようなもの。 EaselJSとTweenJSに依存している。Toolkit for CreateJSを使う場合は必須。 MovieClipクラスを一言で言うと、タイムライン（Twee