こんにちは、最近「業務改善ユニット」に異動した渡部です。
業務改善ユニットでは営業の方々が行なっている日々の業務の改善用のシステムを作成しています。
ユニット異動に伴い、あるシステムの開発を任されました。
今後のメンテナンス性・拡張性のために記事名にあるRails5.1とVue.jsを使い始めたのですが、開発に到るまで思った以上に苦戦したので今回はその共有です。
今回はOSはCentOS 7.3.1611、Ruby 2.4.1を使っていますので、環境はそれぞれで合わせてください。
$ rails new . –webpack=vue に至るまで
最初につまずいたのは、Railsをインストールする段階でした(はやっ
今までの開発ではRails 3を使っていたので、Rubyが入っていればRailsのインストールはできるだろうと思っていたのです。
Qiitaなどを調べてみて、初期設定を行なっている記事を見つけたので、嬉々として
$ rails new . --webpack=vue
を叩いたのですが、途中でエラーが起こりました。
エラー内容としては
- Node.js がない！
- Yarnがない！(?)
と言ったものでした。
よくよく考えたら、WebpackはNode.js上で動いています。
Node.jsが必要なのは当然でした。
Railsをインストールする時点で、Webpack系のモジュールをインストールしたりしているのでしょう。
そうなると至極当然、Yarnも必要なのでありましょう。
Yarnというのは、
Yarnは……
Yarnってなんだ……。
Yarnとは
渡部はYarnがわかりませんでした。
名は体を表すと言いますが、外国の方には通用しないようで、ツール名からは何をするためのツールかすらわかりませんでした。
ということで続いての僕の行動はYarnについて調べることでした。
簡単にまとめると、YarnはFacebook社がGoogleなどとコラボして作った、npmに代わる新しいJavaScriptパッケージマネージャです。
(公式サイトのトップページにはJavaScriptのパッケージマネージャとか書いてないけど……)
npmと互換性があり、package.json にインストールしたモジュールが追記されていきます。Gemfile.lockと同じようにyarn.lockができたりと違いはありますが、ほとんどnpmと同じ感覚で使うことができます。
Rails5.1+からJavaScriptの管理をYarnでできるようになったようです。
YarnでインストールしたものはAsset Pipelineでも共通して使用できるようという特徴があるようです。
Yarnのインストール
RailsではWebpackerというWebpackのラッパーGemでVue.jsファイルをトランスパイルしているようで、そのWebpackerでは、Yarn 0.20.1以上が必要とされていたので、先にYarnをインストールする必要があるようです。
インストールは公式ドキュメントを参考にしました。
# npm install -g yarn でもいけるっぽい $ sudo wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo $ sudo yum install -y yarn
Node.jsとYarnを揃えたら、あとは rails new . --database=mysql --webpack=vue としたら今度はエラーなくインストールすることができました。
Webpackerを試してみる
JavaScriptファイルの読み込み
WebpackerではJavaScriptをロードするために、javascript_pack_tag というヘルパーメソッドを追加してくれます。
このメソッドはViewファイルで
<head> ... <%= javascript_pack_tag 'hello_vue' %> ... </head>
という具合にすると、app/javascript/packs 以下にあるファイルをロードしてくれます。
javascript_pack_tag で生成されるHTMLは普通の <script src="..."></script> タグなので、JavaScriptでECMA6以上の文法を使う場合、現在のブラウザ環境でも使用できるようにトランスパイルをする必要があります。
Railsでは開発時用に bin/webpack-dev-server という開発用のサーバーが用意されています。
webpack-dev-server では app/javascript/packs 以下のファイルの変更を検知して、自動的にBabelでトランスパイルをかけ、ブラウザで開いているページを自動的に更新してくれるとても便利な機能があります。
デフォルトではwebpack-dev-serverを起動すると localhost:8080 でトランスパイル済のファイルを配信してくれます。
設定を変えたい場合は、config/webpack/development.server.yml を修正すると良いようです。
default: &default enabled: true host: 0.0.0.0 # 仮想ゲストマシンで開発しているのでIPアドレス指定でアクセスできるように変更 port: 3001 # 8080ポートは使われていたので、3001に変更 development: <<: *default test: <<: *default enabled: false production: <<: *default enabled: false
変更後、bin/webpack-dev-serverの再起動すると、javascript_pack_tag で生成されるURLのポートなどが変わってくれます。
このサーバーは rails s で起動するサーバーとは別で起動しておく必要があるので注意です。
$ rails s
$ bundle exec rails s -b 0.0.0.0 -p 3000
Rails5.1からPumaというRackサーバーがデフォルトで付いてきます。
Pumaにはバグがあるらしく、開発用サーバー起動時に -b 0.0.0.0 オプションをつけるとなぜか9292ポートをリッスンし始めます。
解決策として、-p 3000 をつければこれまで通り、3000ポートでアクセスできるようです。
余談
Yarnに関する注意
Yarnの存在を知らなかったので、最初に見たときは新しいRailsのJavaScript管理用のコマンドラインツールかと思いました。
注意点として、YARNという語はHadoop関連でも使われているようで、ググってみるとそちらの方の記事も出てきます。
YARNは"Yet-Another-Resource-Negotiator"の略称で、汎用的なクラスタリソース管理フレームワーク
「え、クラスタ??? JavaScript用のツールじゃないの???(ﾟﾍﾟ;)」となりますが、別物です！
感想
今回は開発環境をガラリと変えたので、つまずくところは一通りつまずいた気がします。
Rails5.1+、Yarn、Webpackerと色々ありましたがなんとか開発にまでこぎつけました。
Vue.js もしっかりとは使ったことがなかったので現在進行形で詰まりまくっているのですが、今後はそちらについて色々勉強していこうと思います。
それでは、同じような苦労をする人が減りますように、Rails wayでお会いましょう(-人-)ナムナム
