JSXのプロジェクトをすばやく作る 〜 jsx-init

Visual C++の豊富な新規プロジェクトウィザード、Ruby on Railsのscaffold、Djangoのdjango-admin.py、node.jsのexpressコマンドなど、プロジェクトのひな形を生成して、すぐに実行してトライ＆エラーできる環境を作るというのはソフトウェア開発で良く利用されるプラクティスです。

JSXをnpmでインストールすると、他の言語でいうところのコンパイラ、リンカがくっついたような jsx コマンドが導入されます。これだけ使って開発しても、今までのJavaScriptよりもずっと快適なんですが、JSX開発の今のところベストだな、と思っているプラクティスを実践しやすくするために、プロジェクトのひな形を生成するツールを作りました。jsx-initというやつです。

jsx-initのワークフロー 〜インストールからひな形生成まで〜

インストールはnpmコマンドを使って行います。

$ npm install jsx-init # あるいは、sudo npm install -g jsx-init

今から、前人未到なすばらしいプロジェクトをJSXで作ろうとしているとします。きっと転職のお誘いがガンガンやってくるようになるでしょう。

まずはプロジェクトのフォルダを作ってその中に移動します。

$ mkdir i-am-awesome
$ cd i-am-awesome

jsx-init コマンドをすかさず実行します。

$ jsx-init
jsx-init: version 0.3.3
    By Yoshiki Shibukawa (https://github.com/shibukawa/jsx-init)

Project name [i-am-awesome] >>> 

あとは質問に答えていけば必要なファイルがもろもろ生成されます。 プロンプト(>>>)の前に [値] が書かれていれば、Enterを押せばカッコの中の値が入力されたものとして扱います。こんな内容が聞かれます。プロジェクト種類とライセンス種類以外はEnter連打でも一応動きます。

• プロジェクト名
• npmのパッケージ名
• プロジェクトの説明
• バージョン(0.1.0)
• プロジェクト種類(選択)
• ライセンス種類(選択)
• 著者名、メールアドレス
• リポジトリ、ウェブサイト、issue trackerのURL(デフォルトはgithub)
• travis.ciのファイル作る？(Y/N)

ウィザートが完了したらnpm installを実行します。これでビルドに必要なgrunt、grunt-jsx、JSX処理系そのもの(grunt-jsxに付随して入る)がインストールされます。Canvasのひな形の場合は、ローカルのWebサーバ(ないとローカルリソースアクセスに厳しいChromeでうまくテストできなかったり)のconnectもインストールされます。JSX開発を始める際に、jsx-initだけ入れれば後のツールはjsx-initがすべて面倒みてくれるというすんぽーです。

実際にプロジェクト内で設定済みなコマンドはこんな感じです。(gruntを-gでインストールしていない場合は、node_modules/.bin/gruntに置き換えること)

$ grunt build # ビルド
$ grunt test # テスト実行
$ grunt runserver # Webサーバ起動 (一部プロジェクト種類のみ)

プロジェクトのひな形の種類

jsx-initで提供しているのは今のところこんな感じです。

• JavaScript用ライブラリ。コードを一度書いてgrunt buildと叩くだけで、スのJSXコンパイル形式(JSX.require でアクセス)、グローバル名前空間にモジュール名を登録しちゃうお手軽形式(大規模非推奨)、requireで扱えるcommon.js形式、AMD形式、Closure Compiler形式(未テスト)の5種類のJSファイルが生成されます。
• JSX用のライブラリ。他のアプリから利用されるもの。サンプルプロジェクトのビルドとユニットテストぐらいが含まれるだけのシンプルなプロジェクト。
• node.jsを使ったコマンドラインのユーティリティプログラム。getopt.jsxを使ってコマンドライン引数をパースする部分も最初から入っています。
• Canvasを使ったHTML5アプリ。Webサーバも含む。
• WebWorker。ブラウザでバックグラウンドで動きます。WebWorkerはChromeを使ってもデバッグが面倒なので、コンパイル時にエラーがたくさん拾える＆既存のコードと切り離されているので、WebWorkerでJSXガンガン使うと幸せになれるよ！
• Sencha Touch。実験的な実装です。Sencha社に行った時に将来の方針に関するうれしい話が聞けたので(Ext.js 5.0とSencha Touch 3.0?)、今後中身は大きく変わる予定。

Chrome Package Applicationとか、JSFLとか、Ext.js(実験的)もAPIラッパーは作ってあるのでそのうち足すかも。ngCoreもあるよ。

ひな形を使った開発

test以下にテストコードがあります。テスト駆動開発したい方はどうぞ。必要なモジュールがあれば、npm [モジュール名] --save や npm [モジュール名] --save-dev とか使ってインストールと同時にpackage.jsonに追加していってください。peerDependenciesに追加するコマンドもあるのかな・・・

必要なコードが書けて、テストも通って、READMEを修正したら、 npm publishと打てば、i-am-awesome パッケージがnpmで世界中に公開され、あなたの素晴らしさに涙(;_;)することになるでしょう。社内プロジェクトとかで公開したくない場合はpackage.jsonに "private": true という行を追加するのをお忘れなく。

もし、ウィザードでtravis-ci用の設定ファイルを生成していたのであれば、githubにリポジトリを作ったあと、travis-ciの設定画面でonにするだけで自動CIテストが実行できるようになります。

ひな形作りたい！

よくある(あって欲しい)質問への回答です。内部ではMustache(というかhoganのJSX実装)を使ったテンプレートになっています。良いものができたらPRください。

ライセンスも、LGPL v2、LGPL v3、AGPLの条文が長くてMarkdownへの書き換えを怠っている状態です。もし手元にMarkdown形式のこれらのファイルをお持ちの方はください。

長くなってしまったので、jsx-inkerについてはまた後日。