はじめに

Qiita では初めまして、主に ProjectHL2 という名義で活動している何でも屋のおじさんです。
小さなソフトウェア開発会社でエンジニアをやっており、主に Ruby on Rails を用いた業務システム開発を行っておりました。
最近は会社にも後輩のエンジニアが増え、フロントやモバイルの開発もバンバン行うようになり、こうした技術についてもっと世のエンジニアの皆さんとも共有して行きたい（ついでに仕事も欲しい）と思い記事を書いていく事にしました。
今後ともよろしくお願いします。

動機

元々 React + Redux はたまたま実案件でご一緒させて頂いたエンジニアさんと「全然分からないんですか！僕もです、やりましょう！」といった流れで勉強しました。意味不明ですが、人生とはそういうものだと思います。
ともあれ Vue + Vuex でも同じような事ができそうだったので、後輩エンジニアに React を教える傍らで自分の学習を兼ねてサンプルを作りました。

リポジトリ

以下に動作するサンプルを用意しています。

動作方法は README に詳しいと思うので、確認してみてください。

これは何？

表題の通り Rails 5.1 の Webpacker を使いつつ Vue + Vuex や ActionCable 周りを動作させた Todo リストのサンプルです。捻りはありませんが Todo リストです。すまない…

具体的には

通常の REST API 経由によるリスト一覧取得
ActionCable を経由した閲覧中の全端末向けのリスト追加
上記を Vue + Vuex で実現

あたりまでをカバーしています。

バックエンドについて

当然ながら Ruby on Rails による実装なわけですが、普段自分が仕事で作るとしてもこれくらいのテストは書くだろう程度のテストは記述しております（なお、コントローラーのテストは書かず Request Spec を書いて行くのが今のところのベターなやり方だと思っています）。

また、普段からフォームオブジェクトやデコレーターの導入によるロジックの分離（最近では Trailblazer や Hanami.rb と言った技術もこの辺りに触れています）なども行っているのですが、今回はそこまでに至るような複雑さは持たなかったので素の MVC をレールに乗って使っています。

ActionCable についてはチャンネルがコントローラーのように使われるべきと公式に書いてあったので、そのような実装になっています。

フロントエンドについて

実は、これに近いものを React + Redux でも作っており、一部そこから影響を受けた設計になっています。

具体的には app/javascript/packs 以下が Vue で作られた範囲ですが、今回は Vue コンポーネントの入るディレクトリを components と containers に分けています。
これは Redux のドキュメントで述べられている内容を意識しているのですが components/AddTodo.vue で

this.$emit('post-from-child', todo)

と書いてしまっているあたりイマイチ結合度を下げ切れていない気もします。Vuex 公式のショッピングカートのサンプルでも特に分離していないので、そのあたり Vuex では割り切って実装を優先しているのかもしれません。

カバーできていない範囲

Github のリポジトリでも記載しましたが ActionCable については実装、テスト含めてとりあえず動かした感が否めません。フロント側にしても、エラー時の制御は必要ないのかなど気になります。

またフロント側のテストについても Vuex のテストは書いても良さそうですが今回は含める事ができませんでした。入れるとしたらどこのディレクトリに入れるべきかなどご意見頂けるとありがたいです。

展望

当たり前ですが、終わった Todo の削除などを実装するのが良いと思います。

他に簡単にできる改良としては、例えばページングの追加などが挙げられます。バックエンドでは Kaminari Gem あたりによるページ処理、フロント側では State にページ状態を持たせて管理する事になるので RoR と Vue 双方の知識が深まると思います。