HTML5モバイルアプリでは、ページ数が多くなるほどCSSのメンテナンス性を高める必要が出てきます。そこで便利なのがSassをはじめとしたCSSプリプロセッサです。プリプロセッサの導入によりCSSの中で変数や制御構文などが使えるようになり、開発生産性が大幅に向上します。
今回新しくなったMonacaのクラウドIDEにはLinuxコンテナが搭載されており、ターミナル機能からアクセスすることでプロジェクトをLinuxコマンドで操作することができます。
npm install のようなコマンドも使えますので、非常に自由度の高い環境構築が可能です。
今回は、プロジェクトにSassを組み込んで開発する方法をご紹介します。
ターミナルを起動する
まだ新IDEに切り替えていない方は、右上のリンクから切り替えてください。あとで旧IDEに戻ることもできますので安心してください。
新IDEが立ち上がったら、ターミナルを開きます。中央下部にあるプラスアイコンをクリックしてターミナルを追加してください。
ここでは通常のLinuxコマンドがそのまま使えます。ディストリビューションはDebian、バージョンは9.4です（執筆時）。
ターミナルが起動したら、以下のコマンドを実行します。
npm install node-sass nodemon --save-dev
これでNode.jsを使ってSassを扱うライブラリと、監視ライブラリがインストールされます。
スクリプトを用意する
インストールが完了したら、プロジェクトのファイル一覧の一番下に表示されている package.json というファイルをエディターで開き、scripts プロパティを追記します。
{
"name": "monaca-template-minimum",
: 省略
"scripts": {
"build": "node_modules/node-sass/bin/node-sass --include-path scss scss/style.scss www/css/style.css",
"watch": "node_modules/nodemon/bin/nodemon.js -e scss -x \"npm run build\""
}
}
各エイリアスコマンドは、以下のシェルスクリプトを実行するように指定しています。
buildコマンド ：scss/style.scssをwww/css/style.cssに変換します。watchコマンド ： ファイルの変更があった場合にbuildコマンドを自動実行します。
ファイルを作成する
つづいてSCSSファイルを作成します。これもターミナルから行うと簡単です。
mkdir scss
touch scss/style.scss
左側のファイル一覧を更新すると、フォルダとファイルができあがっているはずです。
style.scss ファイルをエディターで開き、例えば以下のように編集します。
$my-color: #3d3d3d;
body {
color: $my-color;
background-color: blue;
h1 {
size: 2em;
color: white;
}
}
コマンドを実行する
ファイルを編集したら以下のコマンドをターミナルで実行します。
npm run build
プレビューの内容が更新されたら成功です。
更新に対応する
このままですとファイルを編集する度に build コマンドを叩かなければなりません。そこで watch コマンドを使ってファイルの変更を監視、さらに変換作業まで自動で実行できるようにします。
npm run watch
このコマンドを一度実行すると以降はファイルの監視が行われ続けて、SCSSファイルを編集するとプレビューにも自動反映されるようになります。
まとめ
Sassを使うことで、アプリ全体で使う共通のテーマを一括で管理するといったことが簡単にできるようになります。さらにターミナル機能の活用によって、編集したファイルをプレビューに反映する作業まですべて自動化できます。
今回はSassを利用しましたがこれはあくまで一例で、ターミナル機能によって他にも様々なツールをインストールすることが可能です。ぜひ本格的なアプリ開発にお役立てください！