2017年07月07日

現状のjavascript開発環境のベストプラクティス

最近サボってたゲーム作成、また再開しようと思う。
javascriptでゲームブック風のやつを作るっていうの。
少し離れてから再度プロジェクトに向き合うと色々見えてくる部分があるので
ここに書き溜めておこう



増えるファイル、複雑化するフォルダ

そろそろcoffeescript卒業し、生のES6で色々かけるようになったんだけど
使ってるうちにこんなフォルダ構成にしたほうが開発回しやすい、ってのがわかってきた

┌ index.html ..... ゲーム表示用画面
├ view.css ....... 画面用のcss
├ jquery.js ...... jqueryライブラリ(必須!!)
├ controller.js .. ゲーム画面の情報と処理本体への引き継ぎ
├ logic/
│ └ logic.js ... 処理本体
├ test/
│ ├ test.html .. QUnit表示用画面
│ ├ qunit.css .. QUnit表示用css
│ ├ qunit.js ... QUnitライブラリ
│ └ tests.js ... テスト本体
└ docs ........... この下にyuidocのファイルいっぱい生成する

増えたな!いっぱい増えたな!

ところどころ半端にMVCの用語が混じってるのはご愛嬌。
modelはlogic.jsという名前で主処理とデータ構造がごっちゃになってるので完全MVCではない。
このlogic.jsが今回のベストプラクティスの肝だ!!

テストしやすい

なぜこのようなフォルダ構成にしたのかその1
少しでもjqueryの関数を呼び出しそうな部分はcontroller.jsにくくりだした
こうすることで、logic.jsの中の関数はすべてQUnitの単体テスト対象にできる!
うっかりあれ?この関数jquery関数呼んでたっけ??って悩むリスクを最小限にするため
やっぱりcontrollerとmodelは分離したほうがよかったんですよ!
すばらしいねMVC!(やや古い知識)

それにしてもjqueryに依存しないようにするQUnitとは何たる矛盾
お前もともとjquery用のテストライブラリだったんじゃ

ドキュメント作りやすい

なぜこのようなフォルダ構成にしたのかその2
yuidocでドキュメント自動生成できるようにしてるんですが、
何も考えずにjquery.jsとcontroller.jsとlogic.jsを同じフォルダに置くと
そのすべての関数に対してドキュメント生成しようと
yuidocが頑張っちゃうんですね

というわけでlogic.jsだけど単体のフォルダにわけておくという解決策にいたり
このようなフォルダ構成にしたわけだ。
要するに周辺ツール依存ってわけ

つまり、今後vue.js+mochaみたいなナウで重厚なライブラリを使うようになると
現在のフォルダ構成かえてしまうかもしれないのだ。うむー
まあでも今の状態ならこれでもいいわ

副作用

ついでに、yuidocでドキュメント作るようになったため
自然とjavascirptでもclass作ってオブジェクト指向でコーディングするように
なりましたー。

ん?ちょっと前までclassいらないんじゃないかって言ってなかったかって?
まあ、それはそれ。

ま、今後必要に応じてまたベストプラクティスは更新されるかもしれないけど
そういうの探っていくのもまたプログラム人生よな!
posted by LoyalTouch at 05:20| Comment(0) | TrackBack(0) | ゲーム | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック