2018/03/15

requestAnimationFrameの処理落ちをフレームスキップで対応する

ブラウザゲームやアニメーションを作るときなど、定期的に画面を再描画するときにはrequestAnimationFrameやsetInterval、setTimeoutが使われる。

当記事ではrequestAnimationFrameにフォーカスし、ブラウザゲームを開発する際に必要なフレームスキップ処理について紹介する。



requestAnimationFrameとsetInterval, setTimeoutは何が違うのか?


requestAnimationFramesetIntervalsetTimeoutには明確な違いがある。

requestAnimationFrameはブラウザの状態により実行間隔を自動で調整してくれるのに対し、
setIntervalsetTimeoutは時間どおりに実行するため、処理がすべて終わる前に次の処理が実行されてしまう。

そのため、ブラウザゲーム開発ではrequestAnimationFrameを使うことが多い。


ただ、わざとブラウザに負荷をかけたりバックグラウンドで実行させたりすると、描画を遅らせることができてしまう。このような処理落ちはゲームバランスを壊す要因になりうるため、フレームスキップ処理の実装が必要になってくる。


ということで、今回は処理落ちしたときにフレームスキップする方法を紹介する。

2018/03/13

CSS Grid Layoutの練習で黄金比(フィボナッチ数列)の図形を描く


CSS Grid Layoutが登場してからというもの、スタイリングが格段にやりやすくなった。
ということで練習もかねて、CSS Grid Layoutを使って黄金比(フィボナッチ数列)の例のアレを描いてみる。

2018/03/12

CSS変数をJavaScriptで動的に変更し、複数のスタイルに一括適用する

いつの間にかVanilla CSS(ブラウザ標準のCSS)でもSassみたいにCSS変数(CSS Variales)が使えるようになっていた。

CSS変数の何が嬉しいかというと、たとえばベースカラーを定義しておいて複数のスタイルで参照しておく。後日ベースカラーを変更したくなったらCSS変数を変更するだけで他は弄らなくてよくなりメンテがしやすくなる点だ。

2018/03/08

[Node.js]指定したパス配下(サブディレクトリ含む)のファイル一覧を取得する

Node.jsで指定したパスにどんなファイルがあるか一覧にしたいのだが、そんな都合の良いメソッドはなかった。fs.readdirSync(path, { recursive: true })なんてオプションがあったら便利なのに。

ということで、パス一覧を取得する方法を紹介する。

環境は以下のとおり。

  • Node@7.6+
    • fs.readdirSyncとfs.statSyncが使えるバージョンならOK

2018/03/06

JavaScriptとTypeScriptを共存させ、段階的に移行する方法

某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。


TypeScriptに移行して、型に守られたい!



ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。
ということでJavaScriptとTypeScriptを共存させる方法をまとめる。

環境は以下のとおり。
  • webpack@4.0.1
  • webpack-cli@2.0.9
    • webpack v3系の場合は不要
  • typescript@2.7.2
  • ts-loader@4.0.0
※ あとでbabel-loaderについて追記予定です!
→ 2018/03/23 追記しました

2018/03/01

Prettierの手の届かないところはESLintでカバーして自動整形する(prettier-eslint)



コードから手書きによるぬくもりを排除して、精神的安定を手に入れたい!




唐突だが、先日行われた「メタプログラミング勉強会@さくらインターネット」に参加して以来、「コードの整形とか人間がやる仕事じゃない!」と思うようになった。
人間の手で書くコードのぬくもりは時として作業効率を下げてしまう。だから、ぬくもりを排除したほうが精神的安定を得られるのではないかと。

ということで、今回はPrettierとESLintを併用して、保存時またはコミット前に自動フォーマットする方法をまとめる。

2018/02/21

押しっぱなしのkeydownまたはkeypressイベントの初動をスムーズにする

勉強がてらCanvasをつかったブラウザゲームを作っている。そこでkeydownまたはkeypressイベントでCanvas内に描画したオブジェクトを動かそうとしたときに問題が生じた。

次のgifアニメを見てほしい。

これは矢印キーを押しっぱなしにしたときのオブジェクトの動きだ。
わかりづらいかもしれないが、初動(正確には2回目のイベント)が遅れて、「ダッ、ダダダダ…」みたい感じで動いている。

これを解決するための方法をまとめる。

2018/01/31

[Vue.js]ページ内の全フィールドを監視し変更されたらイベントを発火する(deep watch)

設定ページの設定内容が変更されたら自動的に保存。検索フォームで条件を追加したら自動的に検索。このようにユーザがボタンを押下しなくても、changeイベントで自動的に処理してくれるアプリケーションをよく見かける。

ただ実際やろうとすると、すべてのフィールドにchangeイベントを登録し、変更されたかどうかを監視させなければならないので面倒だ!
もっと良い方法はないかとvueの公式ドキュメントを読んでいたら良さそうなものを見つけたので、実例を交えて紹介する。


↓こんな感じの検索フォームを例に紹介する。
※ 当記事では使っているバージョンはvue@2.x系(2.5で動作確認)

2018/01/26

Flexboxを疑似要素(::before, ::after)で使う方法(例: タイトルのスタイリング)

以前はposition: absolutedisplay: table-cellをつかっていた上下中央揃え、float: leftをつかっていた横並び。
これらがすべてFlexboxで実現できるようになって久しいが、CSSをいじっているときに擬似要素に対してFlexboxが使えないかと試していたらできたので、よくあるタイトルのスタイリングを例にとり紹介する。

2018/01/17

[Vuex]karma+webpack+inject-loaderを使ってactionsのテストをしようとしたらハマった

vue+vuexという定番の組み合わせでフロントエンド開発でvuex周りのテストをしたくなった。
そこで公式ドキュメントを参考にしながらkarma+webpack+inject-loaderを使って実施しようとしたところ、actionsのテストで大いにハマってしまった。

当記事ではハマった原因とその解消方法についてまとめる。


使っているバージョンは以下のとおり。
  • vuex@3.0
    • ハマりポイントには関係ない
  • webpack@3.10
    • モジュールバンドラー
  • karma@2.0
    • テストランナー
  • inject-loader@3.0.1
    • APIの依存性注入(モック化するため)
  • axios@0.17.1
    • HTTPクライアント
  • mocha@4.1.0
    • テストフレームワーク(お好みで)
  • chai@4.1.2
    • アサーション(お好みで)

2018/01/16

【SIerサバイバルガイド】職場での巻き込まれ事故を防ぐ7ヵ条

ブラック企業の炎上プロジェクトで働いていたとき(2014年1月頃)に書いたメモを発掘したので、一部修正し公開する。


みなさんは、職場で事故に巻き込まれたことはないだろうか?

自分の責任じゃないのに、なぜか悪者扱いされた。
話を聞いただけなのに、なぜかタスクが全部降ってきた。
サポートのはずで参加したのに、なぜかメインをはっていた。

社会人であれば誰もが経験したであろう巻き込まれ事故の数々。
この事故を防ぐため、体験から考えた方法を紹介する。

2018/01/15

[Vue.js]タイトルラベルクリックでソート可能なテーブルをつくる

なんらかのサービスでテーブル要素を使うとき、多くの場合はタイトルラベルをクリックしたらテーブル内のデータがソートされるような機能がある。

ということで、シンプルな構成でソート可能なテーブルをVue.jsをつかってつくる。
vueのバージョンは2系(2.5で動作確認)を使う。

2018/01/10

2017年活動報告と2018年行動指針

photo by miniai

2017年はお世話になりました。
2018年もひきつづきダーシノ、当ブログともによろしくお願いします。


2017年のBlack Everyday Company



まずは当ブログについての総括を。

ブログ 85.8万PV

2017年の1年間で、858,582PVあった。

投稿数は過去最多の75記事。1月には67,125だったPVが12月には77,826PVまで伸びた。2017年はとくにバズる記事もなかったのだが、コンスタントに成長できた。10月、11月には8万PVまで伸びた。