SassとTypeScriptのインストールから自動コンパイルまで（Windows, Eclipse, Maven）

①この記事のゴール

• Mavenでプロジェクトフォルダ内にNodeとYarnをインストールする。
• YarnでDart SassとTypeScriptをインストールする。
• Sass, TypeScriptファイルが変更されたら自動でコンパイルさせる。

②本件の動機を喋る

CSSを素で書きたくない

CSSを素で書くのはそろそろ卒業したいと思い、色々調べてみました。CSSについては、Sass以外にも選択肢はありSassにも何種類かあり…といった感じでしたが、これから使うならDart Sass一択のような印象を受けました。

JavaScriptを素で書きたくない

JavaScriptを素で書くのもそろそろ卒業したいと思い、色々調べてみました。ReactやVue等魅力的な選択肢が多くありましたが、環境構築でつまづいているような初心者なのでまずはTypeScriptから始めようと思いました。

Eclipseで完結させたい！

現在、EclipseでMaven, Spring Bootを用いてWebアプリを作成しています。そのフロントエンド開発のために上記を使用したいというわけです。これを踏まえ、以下の方針で環境構築方法を調べました。

• 全部Eclipseで書きたい。（他のエディタを開くのは面倒。）
• プロジェクトフォルダの中にインストールしたい。（何も考えずグローバルな環境にインストールしていくと後々大変なことになりそう。）
• Mavenのplugin等で済ませたい。（一元管理したい。）

もちろん自動でコンパイルさせたい

ファイルを編集するたびにいちいち手動でコンパイルするのは嫌すぎますし、出来る限り自動化したいと考えました。結果的に「コマンドの実行により監視モードに入らせ、変更があり次第コンパイルされるようにする」ことができました。開発時にコマンドを1つ実行しておくだけでOKということですね。

③ frontend-maven-pluginでYarnをインストールする

調べてみると、すぐに良さげなものが見つかりました。
frontend-maven-plugin

Node.js, Yarn, webpack等、フロントエンド開発に役立つソフトをインストールできるプラグインのようです！今回、Yarnというパッケージマネージャーを使用してSass, TypeScriptをインストールすることにしました。まずは、frontend-maven-pluginでYarnとその実行環境であるNode.jsをインストールします。以下に手順を記載しますね。

(1) frontend-maven-pluginを利用可能にする。

公式に書いてある通りですが、pom.xmlのproject > build > pluginsタグ内に以下を追加することで利用できます。versionはこちらのリンクを参照して一番新しいものを指定します。
frontend-meven-plugin Repository

2023/2/7執筆時点では、2021/12/29にリリースされた1.12.1が最新でした。

pom.xml

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.12.1</version>
</plugin>

(2)frontend-maven-pluginでNode.js, Yarnをインストールする。

Node.jsとYarnをインストールするため、以下を①のpluginタグの中に追記します。nodeVersion, yarnVersionについては、それぞれ下記サイトで確認しました。（YarnはClassic版を使用します。）公式のサンプルに従い、バージョン番号の前にvをつけて記述しています。
Node.jsのバージョン確認
Yarnのバージョン確認

pom.xml

<executions>
    <execution>
        <id>install node and yarn</id>
        <goals>
            <goal>install-node-and-yarn</goal>
        </goals>
        <phase>generate-resources</phase>
    </execution>
</executions>
<configuration>
    <nodeVersion>v18.14.0</nodeVersion>
    <yarnVersion>v1.22.19</yarnVersion>
</configuration>

これでpom.xmlの編集は完了です！EclipseでAlt+F5キーを押して対象のMavenプロジェクトを更新すると、プロジェクトフォルダ直下にnode, node\yarnフォルダが作成されるかと思います。

④ YarnでSassとTypeScriptをインストールする

(1) パスが通っているか確認する。

まずはシステム環境変数のPathを確認しておきましょう。node\及びnode\yarn\dist\bin\が入っていない場合は追加します。

(2) Yarnの初期化を行う。

Eclipseでプロジェクトを右クリック > ローカル・ターミナルに表示 > ターミナルをクリックするか、コマンドプロンプトでプロジェクトフォルダまでcdして以下のコマンドを実行します。

terminal

C:\pleiades\workspace\sample_project > yarn init -y

成功すると、プロジェクトフォルダ直下にpackage.jsonというファイルが追加されます。これでYarnの初期化が出来ました。

(3) Dart SassとTypeScriptをインストールする。

Yarnのドキュメントに従い、以下コマンドでインストールします。
sass | Yarn
typescript | Yarn

terminal

C:\pleiades\workspace\sample_project > yarn add --dev sass

terminal

C:\pleiades\workspace\sample_project > yarn add --dev typescript

--dev（-D）オプションを付けると開発用パッケージとしてインストールします。Sass, TypeScriptとも開発でしか使用しないので、今回は全てこのオプションを付けます。

インストールされるバージョンはsass@x.x.xのように指定できますが、今回は指定せずにインストールします。指定しない場合は最新バージョンがインストールされます。

⑤ コンパイルしてみる

Sass, TypeScriptはそのままでは実行できず、それぞれCSSとJavaScriptに変換（コンパイル）する必要があります。

(1) Sassをコンパイルしてみる。

Sassは特別な設定をしなくても、コマンド1つでコンパイルできます。拡張子scssのファイルを1つ作成し、こちらのコマンドを実行してみてください。

terminal

C:\pleiades\workspace\sample_project > yarn sass scssファイルが入っているフォルダ:cssを出力するフォルダ

例として、src\sassフォルダ内のファイルをコンパイルしてdist\cssフォルダに出力する場合は以下のようになります。

terminal

C:\pleiades\workspace\sample_project > yarn sass src/sass:dist/css

(2) TypeScriptをコンパイルしてみる。

TypeScriptはコンパイルのために設定ファイルを用意する必要があります。こちらのコマンドを実行して設定ファイルを作成しましょう。

terminal

C:\pleiades\workspace\sample_project > yarn tsc --init

プロジェクトフォルダ直下にtsconfig.jsonが作成されるので編集します。設定可能な項目は大量にあり調べれば解説が出てきますが、ひとまず最低限動けばよしとしましょう。（私も意味がわからないまま設定している項目があります…。）
ただ、rootDir, outDir, includeはご自身で設定してください。

rootDir, include

TypeScriptファイルを格納するルートフォルダ

outDir

出力されるJavaScriptファイルを格納するルートフォルダ

tsconfig.json

{
  "compilerOptions": {
    "target": "es2022",
    "module": "commonjs",
    "rootDir": "./src/main/ts",
    "outDir": "./src/main/resources/static/js",
    "allowJs": true,
    "checkJs": true,
    "sourceMap": true,
    "removeComments": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": [
    "./src/main/ts"
  ]
}

tsconfig.jsonの編集が終わったら、rootDir以下に拡張子tsのファイルを保存し、こちらのコマンドでコンパイルしてみます。

terminal

C:\pleiades\workspace\sample_project > yarn tsc

⑥ コンパイルを自動化する

(1) ファイルの変更を監視する。

動作確認のたびにコンパイルを行うのは手間なので、ファイルの変更を監視して自動でコンパイルされるようにしていきます。Sass, TypeScriptのどちらか片方であれば、コンパイルのコマンドに-wオプションをつけることで実現できます。（監視モードはCtrl+Cで終了できます。）

terminal

C:\pleiades\workspace\sample_project > yarn sass src/sass:dist/css -w

terminal

C:\pleiades\workspace\sample_project > yarn tsc -w

(2) 監視コマンドをスクリプトとして登録する。

Yarnのコマンドはpackage.jsonにスクリプトとして定義することができます。(1)のコマンドを登録しておきましょう。

package.json

"scripts": {
  "watch:sass": "sass src/sass:dist/css -w",
  "watch:tsc": "tsc -w"
}

スクリプトはこのようにして実行できます。

terminal

C:\pleiades\workspace\sample_project > yarn watch:sass

terminal

C:\pleiades\workspace\sample_project > yarn watch:tsc

(3) SassとTypeScriptを同時に監視する。

SassとTypeScriptのどちらを編集してもコンパイルされるようにします。まず、Yarnでnpm-run-allというパッケージをインストールしましょう。

terminal

C:\pleiades\workspace\sample_project > yarn add --dev npm-run-all

その後、package.jsonで同時実行のスクリプトを登録します。npm-run-all --parallelにより列記したスクリプトを並列実行するものです。

package.json

"scripts": {
+ "watch": "npm-run-all --parallel watch:sass watch:tsc",
  "watch:sass": "sass src/sass:dist/css -w",
  "watch:tsc": "tsc -w"
}

登録したら、動作を確認してみましょう。以下のコマンドを実行し、Sass, TypeScriptファイルを編集してみます。保存後、CSS, JavaScriptファイルに変更が反映されれば成功です。

terminal

C:\pleiades\workspace\sample_project > yarn watch

動作確認が終わったらCtrl+Cを押し、バッチジョブを終了しますか？にyで返答して監視モードを終了してください。お疲れ様でした。

⑦おまけ：.gitignore

.gitignoreでコミットしないファイルを管理している場合は、node_modules\を追加しておきましょう。node_modulesフォルダにはインストールしたパッケージ（Sass, TypeScript等）が入ります。これらはyarn installコマンドによりpackage.jsonに従ってインストールされるので、コミット不要です。