TypeScript を使ってオセロを実装してみた(2)
やったこと
前の続きです。
mayokoex.hatenablog.com
今回は通信対戦できるようにしました。
また, せっかくなので, それを web 公開しました。こちらから遊べます。(出来がアですが)
- 「1」と書いてあるところで番号を選んで部屋を選択し, Name と書いてあるところに名前を入れると, 指定した番号の部屋に入れます。
- 部屋に二人入ると対戦が始まります。
方針
今回は, nodejs と socket.io を使いました。
nodejs はサーバーを立てるときによく使うっぽくて, また, socket.io はチャットをするときとかによく使われるっぽいです。
(実際, socket.io でググるといろんな人がチャットツールを作っています)
で, 公開するために heroku というのを使いました。
jp.heroku.com
苦労したこと
実装はかなり簡単だったのですが(さすが socket.io), 環境構築系ですごく苦労しました。
npm
まず, javascript は外部ライブラリをインストールしないといけないです。
で, このインストールは gcc みたいに一回インストールしたらもうやらなくていいみたいなものではなく, 作りたいアプリごとにインストールするものです(node_modules というディレクトリに全部入ります)。
このインストールは, npm install [package 名] --save とやると出来ます。
また, node_modules に入るのは javascript のコードなので, typescript からすると型とかそもそもインストールしたのが何かわからない, という状況なので, 型情報を教える必要があります。
このインストールは npm install @types/[package名] --save とやると出来ます。
これらのことを, たたもさんに教えていただきました。ありがとうございました!
はい。たとえば import なんとか from 'foo';とやると、./node_modules/fooディレクトリを見に行くのでfooというライブラリを読み込むことができます(実際には./node_modules/foo/index.js等が読み込まれます)。 npm installはこのnode_modulesディレクトリに外部ライブラリをダウンロードする操作です
— たたもさん@がんばらない (@__tatamo__) 2018年6月23日
ここら辺のことを把握すると, このページで書かれていることのコマンドの意味が分かりやすいです。
ics.media
browserify
今回の構成では,
- typescript コードを書く
- javascript コードにコンパイルされる
という流れで javascript コードが生成されますが, main.js の方は, コンパイルしたコードを動かそうとしても「require ってなんだよ」みたいなことを言われて実行することが出来ません(require が nodejs 専用の機能で普通に js を動かす分には利用できないとかなんとか)。
今回は socketio を使う際に require がコンパイル後に使われていて, そこでエラーになりました。
この問題は, browserify というのを使うと解決しました。
ただこれをやると行数が 500 行くらいから 8000 行くらいになるのでこれで正しいのかと若干心配になります…
express パッケージの追加
- 結局オセロプレイ画面になる index.html を開いてほしかったのですが, それをやるときに app.js 内で
const app = express(); const server = http.createServer(app); app.use(express.static(__dirname + '/public')); app.get('/', (request, response) => { response.sendFile(__dirname + '/index.html'); });
とやると出来ました。
ただし, フォルダ構成として, /public/ に index.html, style.css, main.js が置いてあります。
app.use で「public にあるファイル使うぜー」って言って, app.get で, 「アクセスされたら index.html 開くぜー」と言っていそう。
ポート番号
上のコードのあとに,
server.listen(process.env.PORT || 8000);
をやるとアクセスしたときにちゃんとページを開いてくれます。
process.env.PORT ってお前どっから出てきたんだ。
ローカルで実験するときは localhost:8000 とかでやってたので出来てるんですが, heroku でやるときはポート番号が違うっぽいです(どこで決めてるのかは知らないですが)。
node_modules は git の管理下に置かない
node_modules を git の管理下に置いておくと, push したときに reject されます。
.gitignore で node_modules を消しておく必要があります。
まとめ
web 難しい…