BETA

【Rails/JS】Simpackerを使って、お手軽にモダンな開発環境を整える

投稿日:2019-11-03
最終更新:2019-11-03
※この記事は外部サイト(https://shikiyura.stars.ne.jp/blog/windows...)からのクロス投稿です

こんにちは、しきゆらです。
今回は、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」。

# 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  

Parcelの導入

上記で入れたyarnを使ってインストールしていきます。
Parcelと、Parcelでマニフェストファイルを作るためのプラグインを導入します。

npm install --save-dev parcel-bundler parcel-plugin-bundle-manifest  

Simpackerの導入

Gemとして配布されているので、Gemfileに追加してインストールするだけです。

gem "simpacker"  
bundle install  

Simpackerの初期設定

Simpackerさんは、「app/config/simpacker.yml」というファイルで少しだけ設定を書いてあげる必要があります。
といっても、「bundle exec rails simpacker:install」というコマンドを用意してくれているので、コマンドをたたけば必要なものを用意してくれます。
ただし、これをたたくとパッケージをnpm経由で入れられてしまうので、コマンドをたたいた後で一旦node_modulesを削除した後、yarn installしてあげるとよいかと思います。

また、SimpackerさんはParcelを使った場合のサンプルも用意してくれています。
この通りに進めると間違いないと思います。

default: &default  
  manifest_path: public/packs/parcel-manifest.json  

development:  
  <<: *default  
  cache_manifest: false  

test:  
  <<: *default  
  cache_manifest: false  

production:  
  <<: *default  
  cache_manifest: true  

開発するファイルの構成

方針としては、すべてのファイルを1つにまとめるのではなく、画面ごとに1つのJSファイルを吐き出すようにしていこうと思います。
例としては、hogeコントローラのindexではhoge.jsを読み込む、fugaコントローラのindexではfuga.jsを読み込む、のような形です。

「app/javascript/packs」以下に、ビューごとのJSファイルを置きます。
今回は、「hoge.js」を作りながら進めていきます。

「hoge.js」にすべてのコードを記述するのは正気の沙汰ではありませんよね。
良しなにファイルを分割し、hoge.jsにまとめるようにします。
ファイル構成としては、以下のような形で配置しました。

├── packs # viewごとにまとめるJSファイル置き場  
│   ├── application.js # デフォルトで入っているやつ  
│   └── hoge.js  
└── src # 分割したファイル置き場  
    ├── part.js  
    └── test.ts  
// 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"))  
 }  
// src/part.js  
const Part = {  
  console: () => {  
    console.log("ファイル分割");  
  },  
}  

export default Part;  
// 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;  

今回は、ファイルを複数読み込むのと、TypeScriptも混ぜてみました。
これでも良しなに変換してくれるのがParcelさんのいいところです。

Parcelさんに良しなにやってもらう

まとめたファイルをParcelさんでがっちゃんこしてもらいます。
package.jsonにちょっとした設定を記述しておきます。

"scripts": {  
    "parcel:dev": "parcel watch --out-dir public/packs --public-url /packs app/javascript/packs/**.js"  
}  

こう記述しておくと、ターミナルから「yarn run parcel:dev」を実行するだけで、「app/javascrpt/packs/」いかにあるJSファイルを管理してくれます。

では、実行してみます。

 > yarn run parcel:dev                                                                                                    
yarn run v1.19.1  
 $ parcel watch --out-dir public/packs --public-url /packs $npm_package_inputs  
   Built in 856ms.  
  PackageManifestPlugin  
  bundle : application.js => /packs/application.js  
  manifest : /home/touhouota/develop/RTS/public/packs/parcel-manifest.json  
   update manifest file  
  PackageManifestPlugin  
  bundle : hoge.js => /packs/hoge.js  
  manifest : /home/touhouota/develop/RTS/public/packs/parcel-manifest.json  
   Built in 92ms.  

良しなに変換してくれていますね。
初回実行時は、必要なパッケージをインストールしてくれます。
今回の場合は、TypeScript関連の物などを入れてくれるはずです。

これで、JSファイルを良しなに変換してpublic/packs/いかにファイルが配置されているはずです。

public/  
 └─ packs  
    ├── application.js  
    ├── application.js.map  
    ├── hoge.js  
    ├── hoge.js.map  
    └── parcel-manifest.json  

ファイルが出来たので、View側で読み込んでみます。

h1 HOGE  
p index!  

= javascript_pack_tag "hoge"  


はい、割と雑ですがJSを読み込んでくれています。
分割したファイルもしっかり読み込めていますね。

これにて、お手軽にモダンなフロントサイドの開発環境を作ることができました。

まとめ

これで、ある程度モダンな開発環境を作ることができました。
もっとよい構成、便利ツールなどがあれば教えていただけると幸いです。

今回は、ここまで。

おわり

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

頭は記憶リムーバブルデバイス

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!