ソースのモジュール化とビルドの自動化について

（著者：Cstap 落合 雄一）

はじめに

こんにちは。落合@cstapです。

簡単なJavaScriptやCSSの開発では問題なかったが、少し規模が大きくなると開発が不便に感じるようになっていませんか？
そんな時は、先人の開発した便利なツールを利用してみましょう(^^♪

本Tipsでは、npm + Browserifyでパッケージ管理とソースのモジュール化を行い、CoffeeScriptやSassをGulpで自動ビルドするシステムについて紹介します。

 

CoffeeScript

CoffeeScriptは、JavaScriptに変換可能な中間言語です。こういった中間言語をAltJSと呼び、他にはTypeScriptやClojureScriptなどがあります。

 

Sass

Sassは、「Syntactically Awesome StyleSheet」の略で、CSSの拡張メタ言語です。他にはLessやStylusなどがあります。

 

Gulp

Gulpは、ビルドシステムで今回紹介するビルドの自動化の中核を担うツールになります。他のビルドシステムでは、Gruntも良く使われています。

 

npm

npm は、Node.jsのパッケージマネージャーです。Node.js自体はJavaScriptで出来たWeb Serverですが、フロントエンドを管理するためのツールも揃っています。他のフロントエンドのパッケージマネージャーには、BowerやDuoなどがあります。

 

Browserify

Browserifyは、Node.jsスタイルで書かれたモジュール(CommonJS)をブラウザで利用できるように変換するコマンドラインツールです。

 

サンプル

実際のサンプルを見ないことには、よくわからないですね^^;

GitHubにサンプルを用意しましたので、これをベースにkintoneカスタマイズを行うと上記のツールの理解も深まるかと思います。なお、サンプルを利用するにはGitをインストールする必要があります。

簡単にサンプルの構成を見てみましょう(^^♪

npmに関する定義を記述しているのが、package.jsonになります。devDependenciesにビルドなど直接kintoneカスタマイズには関係ないパッケージを記述しています。具体的にはGulpやBrowserifyなどです。jQueryなどkintoneにアップロードする必要のある依存パッケージは、dependenciesに記述します。サンプルでは、適当なものを記述しています。scriptsには”npm run ***”で実行できるスクリプトの定義が記述できます。サンプルでは、buildとwatchが定義されています。

gulp/tasks/ディレクトリにGulpタスクがいくつか用意されています。実際に開発したソースをビルドするタスクは、browserify.jsとsass.jsに記述されています。browserify.jsでは、gulp/jsConfig.jsの定義に沿って、srcDirにあるmodulesのentryPointFileを、destDirにmodules名.jsとmodules名.min.js(圧縮ファイル)で出力します。sass.jsも同様に、gulp/cssConfig.jsの定義に沿って、modules名.cssとmodules名.min.css(圧縮ファイル)を出力します。

実際の開発は、src/example1/を参考にしてください。

 

最後に

ソースのモジュール化とビルドを自動化することにより、開発をスムーズに行うことができます。ぜひ、ソースのモジュール化とビルド自動化し皆さんのkintoneカスタマイズを快適なビルド環境のもと行っていただければと思います(^^)