Monacaでのスマホアプリ開発環境を快適にしようとして躓いた話

最近少しずつ、自宅で自己開発を行うことが苦じゃなくなってきました。

そしてついに「Monacaで簡単なスマホゲーム開発するぞ！」と思い立ったのですが環境構築回りで色々悩まされて結局まだ何もできていないという状態になりましたので今の現状を記録しておこうと思います。

HTML、CSS、javascriptを使ってスマホアプリが作れる開発フレームワークです。

Electronのオンラインサービス版・・・みたいなイメージ。

結構前からあった(2014年11月にブクマされる程度)のに私は最近知りました。

このサービスはオンラインで使用でき、ブラウザ上でお手軽に開発が進められます。

でも通常の開発環境ではHTMLやCSSを生で書く必要があり、長年railsでHamlやSassに触れてきた私にとっては苦痛でしかありません。（※閉じタグ書かなきゃいけない、CSSに変数使えない等）

そのため、もっと快適に開発する方法を調べました。

Monacaには端末デバッガのアプリが存在し、PC側でソースを更新したらライブリロードさせることが可能です。しゅごい。

まずはこれをインストールします。

ローカルPC上でソースを編集したい場合はLocalkitが必要です。

これでソースコードをローカルに置き、Gitで管理したりSassからコンパイルしたCSSをアップロードしたりできます。

ここまでで当初目標としていた環境構築は完了です。

しかし今日の私はこれで満足できませんでした。

今まで私は「Prepros」という有料ツールを使用していました。

これはHamlやSass等の更新監視/自動コンパイル/ライブリロード等の機能を持ち合わせた便利ツールで、たった$29で購入できます。

しかし個人で使用するには便利なツールも、仕事で使うとなるとライセンスを人数分用意する必要があります。

しかもこの手のツールはいつまで活発に更新されるか不明で、もし会社が開発をやめてしまえば使えなくなるかもしれません。

だったらOSSで環境を用意した方が良いのだろうか・・・

と悩んでいた時に出逢ったのがGulpでした。

Gulpはタスクランナーと呼ばれ、開発に必要なコマンド達を必要なタイミングで自動実行してくれるツールです。

これならnode.jsが生きている限りは恐らく有効に使用することができ、環境も無料で構築できます。（node.jsがいつまで生きているかの議論は据え置き）

Let's install！！！

と思ったらここでも悩みが出てきます。

なんとGoogle先生に「gulp」と聞いてみた所、4番目に優先度の高い記事は「[意訳]私がGulpとGruntを手放した理由 - Qiita」だと言われてしまったのです。

この記事で言っているGulpの問題点は大きく3つあります。

1.プラグイン作者への依存
2.デバッグでのストレス
3.バラバラのドキュメント

私はこのうち「2.デバッグでのストレス」を、サーバ環境自動構築ツールのChefを勉強していた時に痛感しました。

つまり『ChefやGulpという「環境構築のためのツール」を使った場合、そのツール自体の不具合が起きた時の対処が非常に困難になる』ということです。

この問題は非常に厄介で、一度手を出すと戻るのは大変（全て一から構築し直し）、進むのも面倒（新しいツールは大抵ドキュメントが少ない）という状況に陥ります。

結局私はChefの時、「開発/検証用のVagrantのprovisioningにはchefよりshellスクリプトを選ぶと幸せになれるかも知れない - Qiita」といった情報を参考にshellscriptでの解決を試みて、「『個人の開発環境』程度の複雑さの場合は自分でスクリプトを書いた方が早そうだ」という意識を持ちました。

という訳で私はGulpの導入を諦め、とりあえず「npm scriptsを使おう - Qiita」の記事を元にnpm scriptsでの解決を試みてみようと思ったのでした。