Vue.jsのフォームバリデーションはHTML5 input要素の設定で十分かもしれない

Vue.jsでフォームバリデーションをするとき、以前ならvue-validatorという公式コンポーネントがあった。しかし、vue@2.0のリリースにともない公式から外れてしまった。

気づいている人はいるかと思うけど、vue-validator も vue-resource と同様に実はこちらから願いでて、公式から retire してます。理由は、vue.js のコアに必要なくっているのと、開発時間をキープするのが難しくなっているということで。

— 🐤kazuya kawaguchi🐤 (@kazu_pon) 2016年12月1日

そのため、何か良いFormValidatorがないか調べていたのだが、HTML5 input要素のバリデーション用の属性を思い出した。

ということで、HTM5 input要素の設定でフォームバリデーションを行う。

[Vue.js2.x]ページ番号付きのページネーション（ページナビゲーション）を実装する

2年ほど前に以下のような「Vue.jsでページネーションをつくる」系の記事を書いた。


2年前の記事なのでVue.jsのバージョンもv0.12とかなり古い。
これらの記事を参考にしてくだっている方の中に、バージョンが違うことでハマっている方がいらっしゃった。

ということで、Vue2.x系で書き直す。
動作イメージは以下のとおり。

使用してるバージョンは以下のとおり。

• vue@2.5.2
• bootstrap@4.0.0-beta.2（←なくても大丈夫）

golangでSlack Real Time Messaging APIを使ってメッセージに応答するまで

以前、Node.js+botkitでSlack用botを作成した。
もう一度Slack botを作ってみたい欲が湧いてきたのだが、いつもどおりNode.jsで書いてしまうと他の言語が全然勉強できないので、今回はgolangを使って書いてみた。

この記事では、Slack Appの登録・設定・作成し、ユーザからのメッセージに対して応答するシンプルなbotを作成する。

Slack APIのページが完全に迷いの森で、慣れるまでどこで何が設定できるのかわかならい。そのため、スクリーンショット多めで説明する。

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. モザイク

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