電脳麻将のプログラム構成(0) ~ 全体編

電脳麻将 のプログラム構成について。

ver.1.0.0 より電脳麻将は、npm対応のパッケージ になっています。ソースからビルドするには Node.jsnpm が必要になりました。今回はこの新しいプログラム構成について説明します。

次回リリースする ver.1.4.0 で構成を再度見直す予定なので、今回の説明も先駆けてそれに合わせています。

全体構成

プログラムは以下のファイルとディレクトリで構成されます。

ファイル 説明
package.json npm用構成ファイル
README.md パッケージの説明
LICENSE ライセンスファイル
ChangeLog.md 変更履歴
package-lock.jsonモジュール構成ファイル
webpack.config.jswebpack設定ファイル
www/ Webリソース
src/ ソースファイル
test/ 自動試験用プログラム

package.jsonwebpack.config.js はnpmでの開発ならばお馴染みのファイルですので説明は省略します。

まず、開発に先立ち

$ npm ci

の実行が必要です*1。これにより node_modules/ が生成され、そこに開発に必要なパッケージがインストールされます。

Webリソース

電脳麻将は HTML5 + CSS3 + JavaScript で動作します。動作に必要なファイルは全てこの www/ に配置されます。

ファイル 説明
./ HTMLを配置
css/ CSSを配置
js/ JavaScriptを配置
img/ 画像を配置
audio/ 音声を配置

ver.1.0.0 以降は HTML, CSS, JavaScript は別の形式で記述されたソースファイルを変換して生成し、ここに配置するようになっています(これをビルドと呼ぶ)。ですので初期状態では変換の必要がない img/audio/ のみが配置されています。ビルドは以下のコマンドで行います。

開発用にビルド*2

$ npm run build

リリース用にビルド*3

$ npm run release

ソースファイル

src/ には以下が配置されます。*4

ファイル 説明
html/ HTMLのソースファイル(pug形式)
css/ CSSのソースファイル(stylus形式)
js/ JavaScriptのソースファイル

それぞれ個別に以下のコマンドでビルドできます。

HTMLのみ(pug形式のソースをHTMLに変換)

$ npm run build:html

CSSのみ(stylus形式のソースをCSSに変換)

$ npm run build:css

JavaScriptのみ(webpack で複数のファイルを1つにバインド)

$ npm run build:js

自動試験用プログラム

test/ には mocha で自動試験可能なテストプログラムを配置しています。現在はDOM操作(画面描画やマウスクリックなどのイベント検知)のない部分についてのみ自動試験しています。

以下のコマンドで自動試験を実施します。

$ npm test

以下のコマンドで istanbul*5 を使用して自動試験のカバレッジレポートを作成します。

$ npm run test:cover

カバレッジレポートは coverage/lcov-report/index.html に作成されます。


次回はJavaScriptソースファイルの構成を説明予定です。

*1:以前は npm install でしたが、現在は npm ci を使うことで packeage-lock.json の通りにモジュールを構成するように変わっています

*2:Chromeの開発ツールでデバッグ可能な形式

*3:プログラムを圧縮して最小化した形式

*4:ver.1.3.7 まではPerl製のサーバサイドのプログラムもあったのですが、別プロジェクトに移動させました。電脳麻将で天鳳の牌譜を検討する - koba::blog 参照

*5:なぜかパッケージ名は nyc