ゲームプログラミングレシピ集

前回の「2Dゲームライブラリpixi.jsのインストール方法と簡単な使い方」の続きになります。記事を書いている途中で体調が悪くなって切り上げてしまったので、今回はキー入力で前回表示した紫の四角を動かせるようになるまでやってみましょう。

pixi.jsは2Dゲームライブラリと書きましたが、ゲームだけに限らずHTML5でインタラクティブなコンテンツを作ることが出来るライブラリになります。今回はゲームに絞って行きたいのでゲームライブラリと表現させていただいています。

Web制作をしているとこのような細かい面倒くさい作業がいっぱい出てきます。毎回同じコマンドを打ち込んで実行するだけなのですが、段々と面倒臭くなってきます。一連の流れは決まってるのに手動でやるのはバカバカしい！ってことを解決できるのがgulpです。

Node.jsをご存知でしょうか？名前からしてjavascriptの仲間かな？と思った方は正解です。大雑把にいうとサーバーサイド用のjavascriptと言いましょうか。サーバーサイドとはなんぞや？と思う方もいらっしゃるので簡単に説明すると普段Webブラウザで動いているjavascriptがフロントサイドで動くjavascript。Node.jsはサーバーサイドで動くjavascript。

TypeScriptは何度か触ったことがあったのですが、ちゃんと覚えてなかったのでこれを期に覚えようと思います。そのままTypeScriptに乗せ換えてみてもよかったのですが、調べたら去年のReactアドベントカレンダー2018で私のやりたかったmaterial-uiのやり方がまとまってあったので、ありがたくチャレンジさせていただきました。

今日、Reactに使う時間をかなりオーバーしてしまったのですが何とかReact-Reduxと友達になれたので、後悔はないです。create-react-appで生成してそこにReduxとreact-reduxを組み込んでボタンを押して数値を増やすだけのアプリケーションがやっと動いてくれたので忘れないうちに記事書きだしてしまおうと思います。

しかしReact-Reduxはやっぱり覚えることが多すぎて難しいですね。自分の理解力が追いついていないのがすごく悔しくなってきたので徹底的に調べ上げて1月中React-Reduxをマスターしようと思います。

このままではいけないと思い、12月からReduxを学ぶことを決意しました。とりあえず公式のReduxチュートリアルをやってみたら意外と簡単でした。ただ、ReactとReduxを結ぶReact-Reduxが曲者でくじけそうになりました。しかし先ほど集中して調べていると下記のエントリーを見つけてやっと70%ほど理解出来ました。