CrowdWorks流！Webpacker活用術

今年の4月に入社した@sawadashota です。

「カイゼンチーム」というデザイナー2名、エンジニア2名のチームで新規会員の応募率の向上に取り組んでいます。

Rails 5.1で導入されたWebpacker、みなさん使ってますか？

CrowdWorksにはコツコツ約7年書き溜められてきた約1.8万行にのぼるCoffeeScriptがあります。

既存箇所では、Sprocketsで全部のJSをひとかためにしていたのを読んでいたので、思わぬ影響を及ぼすことが多々ありました。

少なくとも新規開発部分では、局所的に読める仕組みを作っていきたいと思い、Webpackerを導入してみたので、導入時のポイントをご紹介したいと思います。

目次

Controller Based Endpoint

Controllerごとに読み込むJavaScriptを限定的にします。 実は既存のJavaScriptにも取り入れられている運用実績のやり方で、今回のWebpackerにも同じ仕組みを導入することにしました。 Actionごとに読み込むことも検討しましたが、Actionは必ずしもページと一致するわけではないため、少しスコープは大きくなってしまいますがController単位にしました。

app/javascript/packs/controller_based/#{controller_path}/application.tsにそのコントローラで使いたいJavaScriptをimportします。 application_helper.rbにコントローラに応じて読み込み先を変えるヘルパーを定義して、viewのレイアウトでヘルパーを呼ぶようにします。

ヘルパーの実装例

def controller_based_javascript_pack_tag
  pack_path = "controller_based/#{controller_path}/application"

  if Rails.root.join("app/javascript/packs/#{pack_path}.ts").exist?
    javascript_pack_tag(pack_path)
  else
    ""
  end
end

viewではヘルパーを呼ぶだけです。

<%= controller_based_javascript_pack_tag %>

ES6のSyntaxで書けるようにする

ES6からexport文、import文が使えるようになりました。 この文法を使えば依存関係を明らかになるため、影響範囲が限定的になります。

Endpointとなるpacks以下にロジックを書かない

app/javascript/packs/ディレクトリ以下がWebpackerのエンドポイントになりますが、今後、恒久的にWebpackerを使い続けるとも限らないので、ロジックは書かず、「何を使うか」を関心事とするようにしました。

一部、Vue.jsを使っていることもあり、以下のようなディレクトリ構成になりました。

app/javascript
├── components # Vue.jsのコンポーネント
├── lib
└── packs
    ├── application.ts # application全体にかかわるscript
    └── controller_based

i18n

app/assets/javascripts/ではI18n.jsを使って、railsで定義した言語ファイルをJavaScriptでも使用していました。

しかし、JavaScriptがRailsに依存するのに抵抗があったり、Railsの言語ファイル修正したときにJavaScriptまで気を配るのは難しいので、JavaScriptは独自に言語ファイルを持つことにしました。

また、jQueryにはi18next、Vue.jsにはVue I18nを使って、1つの言語ファイルを複数のフレームワークで使い回せるようにしました。

Vue I18nは以下のような実装をしました。

import Vue from 'vue';
import VueI18n, {I18nOptions} from 'vue-i18n';
import ja from './ja';

Vue.use(VueI18n);
const options: I18nOptions = {
  locale: 'ja',
  messages: {
    ja,
  },
};

export default new VueI18n(options);

i18nextはこちら。

import {init, InitOptions} from 'i18next';
import ja from './ja';

const options: InitOptions = {
  lng: 'ja',
  resources: {
    ja: {
      translation: {
        ...ja,
      }
    },
  },
};

export default init(options);

やりすぎない

Webpackではなく、Webpackerを使う利点は「Railsの中でサクッとモダンなフロントエンド環境を作れること」だと思っています。

フロントエンドを専門としていないエンジニアも、「少し調べれば使える」という状態にすることを意識しました。

• クラススタイル Vue コンポーネントなど日本語ドキュメントが少ないやり方は採用しない
• TypeScriptは使うものの、型付けを強制しないゆるめのLinter
• ドキュメントの充実 (鋭意作成中)

まとめ

以上、クラウドワークスでどのようにWebpackerを活用しているかご紹介しました！

気軽に導入できるので、ぜひ導入を検討してみてください！

最後までお読みいただき、ありがとうございました！

クラウドソーシングのクラウドワークスでは、成長し続けたいエンジニアを募集しています！

www.wantedly.com