vue2.5でTypeScript統合が改善されthisが推論されるようになったので試してみた

2017年10月13日に、ついにvue 2.5（コードネーム: Level E）がリリースされた。
今回のリリースの目玉はなんといってもTypeScript統合の改善！ TypeScriptのアップデートにともない、vueの憎きオブジェクトリテラルの中で、なんと「thisが推論される」ようになったのだ！

vue 2.4以前は、vue-class-componentのデコレータを使いクラスベースで実装しなければならなかったのが、vue 2.5からはvue.jsのAPIのままTypeScriptで開発できるようになった。

vue 2.4以前のTypeScriptでの開発については、以下の記事を参照してほしい。

ということで、今回はvue 2.5を使ってTypeScriptで実装する方法をまとめる。
ついでにvue 2.4から2.5へのアップデート方法もまとめる。

実装するにあたりハマった点があるので、参考になればと思う。

Canvasに表示したオブジェクトに当たり判定（衝突判定）をつける方法

HTML5 Canvas APIをつかってゲームをつくろうとしている。もちろん自作ゲームエンジンで！
ということで前回Canvas上に表示したオブジェクトをキーボード操作で移動させる方法をまとめた。

今回はその続きで、移動させたオブジェクトが他の何らかのオブジェクトに当たったときの判定（当たり判定、衝突判定）を実装する。

[Vue.js]imgタグのsrcをバインドして404NotFoundになったときの対処法

Atomic Designの原則を取り入れ開発しており、イメージ用コンポーネントを作っていた。そして親コンポーネントから子コンポーネントに画像ファイルのパスを渡し、動的に画像を表示させたかったのだが、imgタグのsrcに画像ファイルのパスをバインドすると「404 (NotFound)」というエラーになってしまった。

Vue.jsのGitHub上にあるIssueの内容も古く（Vue1.x系）対応できなかったが、いろいろ試したら解消できた。

そこで、対処法をまとめる。

Canvasに表示したオブジェクトをキーボード操作で移動させる方法

Canvas+JavaScriptでゲームをつくろうとしている。もちろん自作ゲームエンジンで！
その第一歩として、Canvasに表示したオブジェクト（Player）をキーボード操作で移動させる方法をまとめる。

ゲームエンジンの基本は無限ループ

ゲームの基本は無限ループなので、以下のような流れで処理していく。

1. Canvasをクリアする（白紙に戻す）
2. キーボード操作などを受け付る
3. オブジェクトの座標や画像を変更する
4. Canvasに描画する
5. 1に戻ってループする

このループをfps30なら1秒間に30回、fps60なら1秒間に60回繰り返す。
ループ内でキーボード操作（keydown、keypress、keyupなど）を取得し、オブジェクトの座標を変更することで、移動させることができる。

Canvasを用いた9つの画像処理フィルターとそのアルゴリズムの解説

頭の体操のためにCanvasを用いたフィルタリングを学びはじめた。
当記事では、画像フィルターの中でも（独断と偏見で選んだ）代表的な9つの画像処理アルゴリズムを解説する。

1. グレースケール
2. 色調反転（ネガポジ変換）
3. 二値化
4. ガンマ補正
5. ブラー（ぼかし）
6. シャープ化（輪郭強調）
7. メディアンフィルタ
8. エンボス
9. モザイク

たたみ込み演算を知らなくても、理解していただけると思う。