【Rails/JS】Simpackerを使って、お手軽にモダンな開発環境を整える
こんにちは、しきゆらです。
今回は、SimpackerというGemを使ってサーバ・フロント両方が良しなに動いてくれる環境を整えていきます。
今回はWSL2環境にUbuntuを入れ、そこで動かすことを想定しています。
いきさつ
Railsで開発を行う上で、フロント側の開発環境も必要ですよね。
最近のRailsさんはWebpackerというGemを使って、JSのバンドルツールであるWebpackに依存関係や変換などの対応をよしなにしてもらっている世界です。
しかし、Webpackの設定は難解です。
だいぶ前に触ったことがありますが、あれをもう一度書けと言われたら書ける自信がありません。
Railsさんは設定を特にしなくても良しなに動いてくれるので、出来ればJS側も似たような形で勝手に動いてほしい。
そこで思い出すのが、Parcelさん。
こちらもだいぶ前に触りましたが、設定がなくても必要なものを勝手に入れて動くようにしてくれる便利な人です。
これをRailsで使いたいなぁ、でもWebpackerを使うと便利なヘルパーを用意してくれるから頑張ったほうがいいのかなぁ、などあれこれ考えているといいものがありました。
それがSimpacker。
Webpackerのことはよくわかりませんが、Webpackerのつらいところをある程度の自由度をもって設定できるようにしてくれるGemのようです。
設定のサンプルもある程度用意してくれているので、ほしい環境を整えることができるでしょう。
こいつのいいところは、「Webpacker専用では」ないというところ。
Simpacker は基本的なところは Webpacker と同じです。manifest.json という、ハッシュ値が付与されたファイル名ともとのファイル名のマッピング情報を持つファイルをもとに、JS や CSS を読み込むタグを生成するヘルパーを提供します。
https://techlife.cookpad.com/entry/2019/07/08/100000
ということで、manifest.jsonの情報を保持するだけでWebpackと同じようなタグ生成ヘルパーを作ってくれる便利さんです。
今回は、このSimpackerを使って、フロント側のコードを設定ファイルレスで良しなに動くようにしてもらうにしたのでそれをメモしておきます。
準備
Yarnの導入
JSのパッケージを管理するマネージャを導入します。
今回は、Windows上にあるWSL環境のUbuntuに導入していきます。
手順としては、Yarn公式サイトある通りリポジトリを追加して「apt install yarn」。
[bash]
# Ubuntuにリポジトリを追加
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add –
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
# インストール
sudo apt update
sudo apt install yarn -y
#確認
yarn –version #=> 1.19.1
[/bash]
Parcelの導入
上記で入れたyarnを使ってインストールしていきます。
Parcelと、Parcelでマニフェストファイルを作るためのプラグインを導入します。
[bash]npm install –save-dev parcel-bundler parcel-plugin-bundle-manifest[/bash]
Simpackerの導入
Gemとして配布されているので、Gemfileに追加してインストールするだけです。
[bash]
gem "simpacker"
[/bash]
[bash]
bundle install
[/bash]
Simpackerの初期設定
Simpackerさんは、「app/config/simpacker.yml」というファイルで少しだけ設定を書いてあげる必要があります。
といっても、「bundle exec rails simpacker:install」というコマンドを用意してくれているので、コマンドをたたけば必要なものを用意してくれます。
ただし、これをたたくとパッケージをnpm経由で入れられてしまうので、コマンドをたたいた後で一旦node_modulesを削除した後、yarn installしてあげるとよいかと思います。
また、SimpackerさんはParcelを使った場合のサンプルも用意してくれています。
この通りに進めると間違いないと思います。
[ruby]
default: &default
manifest_path: public/packs/parcel-manifest.json
development:
<<: *default
cache_manifest: false
test:
<<: *default
cache_manifest: false
production:
<<: *default
cache_manifest: true
[/ruby]
開発するファイルの構成
方針としては、すべてのファイルを１つにまとめるのではなく、画面ごとに１つのJSファイルを吐き出すようにしていこうと思います。
例としては、hogeコントローラのindexではhoge.jsを読み込む、fugaコントローラのindexではfuga.jsを読み込む、のような形です。
「app/javascript/packs」以下に、ビューごとのJSファイルを置きます。
今回は、「hoge.js」を作りながら進めていきます。
「hoge.js」にすべてのコードを記述するのは正気の沙汰ではありませんよね。
良しなにファイルを分割し、hoge.jsにまとめるようにします。
ファイル構成としては、以下のような形で配置しました。
[bash]
├── packs # viewごとにまとめるJSファイル置き場
│ ├── application.js # デフォルトで入っているやつ
│ └── hoge.js
└── src # 分割したファイル置き場
├── part.js
└── test.ts
[/bash]
[javascript]
// hoge.js
import Part from "../src/part.js"
import Test from "../src/test.ts"
function hoge() {
console.log("hoge");
console.log(Part);
Part.console();
}
window.onload = () => {
hoge();
const test = new Test("hogehoge");
console.log(test.messageExport("fuga"))
}
[/javascript]
[javascript]
// src/part.js
const Part = {
console: () => {
console.log("ファイル分割");
},
}
export default Part;
[/javascript]
[javascript]
// src/test.ts
class Test {
message: string;
constructor(theMessage: string) {
this.message = theMessage;
}
messageExport(str: string) {
return `Hello TypeScript! args: ${this.message}/ str: ${str}`;
}
}
export default Test;
[/javascript]
今回は、ファイルを複数読み込むのと、TypeScriptも混ぜてみました。
これでも良しなに変換してくれるのがParcelさんのいいところです。
Parcelさんに良しなにやってもらう
まとめたファイルをParcelさんでがっちゃんこしてもらいます。package.jsonにちょっとした設定を記述しておきます。
[javascript]
"scripts": {
"parcel:dev": "parcel watch –out-dir public/packs –public-url /packs app/javascript/packs/**.js"
}
[/javascript]
こう記述しておくと、ターミナルから「yarn run parcel:dev」を実行するだけで、「app/javascrpt/packs/」いかにあるJSファイルを管理してくれます。
では、実行してみます。
[bash]
> yarn run parcel:dev
yarn run v1.19.1
$ parcel watch –out-dir public/packs –public-url /packs app/javascript/packs/**.js
Built in 856ms.
PackageManifestPlugin
bundle : application.js => /packs/application.js
manifest : /path/to/rails_app/public/packs/parcel-manifest.json
update manifest file
PackageManifestPlugin
bundle : hoge.js => /packs/hoge.js
manifest : /path/to/rails_app/public/packs/parcel-manifest.json
Built in 92ms.
[/bash]
良しなに変換してくれていますね。
初回実行時は、必要なパッケージをインストールしてくれます。
今回の場合は、TypeScript関連の物などを入れてくれるはずです。
これで、JSファイルを良しなに変換してpublic/packs/いかにファイルが配置されているはずです。
[bash]
public/
└─ packs
├── application.js
├── application.js.map
├── hoge.js
├── hoge.js.map
└── parcel-manifest.json
[/bash]
ファイルが出来たので、View側で読み込んでみます。
[html]
h1 HOGE
p index!
= javascript_pack_tag "hoge"
[/html]
分割したファイルもしっかり読み込めていますね。
これにて、お手軽にモダンなフロントサイドの開発環境を作ることができました。
まとめ
これで、ある程度モダンな開発環境を作ることができました。
もっとよい構成、便利ツールなどがあれば教えていただけると幸いです。
今回は、ここまで。
おわり