7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Webpacker + Vue + Vuex + ActionCable で動作するサンプルを作った話

Last updated at Posted at 2017-09-17

はじめに

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 を書いて行くのが今のところのベターなやり方だと思っています)。

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

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

フロントエンドについて

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

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

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

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

カバーできていない範囲

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

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

展望

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

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

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?