mayoko’s diary

プロコンとかいろいろ。

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 とやると出来ます。

これらのことを, たたもさんに教えていただきました。ありがとうございました！

ここら辺のことを把握すると, このページで書かれていることのコマンドの意味が分かりやすいです。
ics.media

browserify

今回の構成では,

という流れで javascript コードが生成されますが, main.js の方は, コンパイルしたコードを動かそうとしても「require ってなんだよ」みたいなことを言われて実行することが出来ません(require が nodejs 専用の機能で普通に js を動かす分には利用できないとかなんとか)。

今回は socketio を使う際に require がコンパイル後に使われていて, そこでエラーになりました。

この問題は, browserify というのを使うと解決しました。
ただこれをやると行数が 500 行くらいから 8000 行くらいになるのでこれで正しいのかと若干心配になります…

heroku でちゃんと表示されるようにする

わけもわからずコードをランダムウォークさせてたらいつの間にか表示されるようになりました。

重要な変更点としては,

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 難しい…