[Rails] Action Cableの実装方法

JQueryは古いテクノロジーとはいえ、さくっと動くものを作るときは異常に簡単です。
古いテクノロジーは悪ではなく適材適所で使っていくのが大事だと思っています。

まずは、最初からあるapp/assets/javascripts/cable.jsを該当layoutで読み込みます。

全部のViewでApp.cableを呼ぶ必要はないのでcontent_forでActionCableとの通信をとるViewだけJSを走らせるようにします。

JSでは、App.cableにイベントを登録していきます。 引数のchannelにはクラス名、引数を渡すとparamsに入ってサーバ側で処理できます。this.performを使ってクラス内のメソッドを呼ぶことができます。development環境では別プロセスで動作確認ができないのでsetTimeoutを用いてテストしています。

HTML部分は下記のような感じ。

で最後になりますが、ActionCableを継承したクラスです。subscribedがconnectionとともに走ります。 stream_for MODELでモデルに関係したチャネルが接続されます。 そして、broadcast_to(MODEL, object)でそのモデルへの接続を確率したチャネルにプッシュすることができます。

これでダイナミックにDOMを操作できるようになりました。

ReduxでReducerのファイルを分割する方法

stateが多くなるとreducerのファイルが巨大化してきます。ファイルを分けた方が編集も楽になるし、コード全体の見通しもよくなると思います。

分割方法は簡単で、index.jsファイルを作り、各状態のファイルを読み込み、configureStore.jsでそのindex.jsを読み込みます。

ディレクトリツリー

configureStore.js

index.js

user.js

これで巨大reducerファイルを編集しなくて良くなる:)

ES6のimport/exportを理解する[javascript]

React Nativeをやってると暗黙の了解として、import/exportが使われてる。
requireで書いてたみたいだけど、その歴史を知らないのでrequireは気にしないでimport/exportを理解する。

下記のようにlib.jsとmain.jsがあった場合、importするファイルのlib.js内でfunctionをexportしておくと
import {} fromでそれを個々に呼ぶことができる。

またアスタリスクを使用することで、オブジェクトを参照してexportした関数が呼べる。

default

よくわからないのがexport default
セミコロンなしで呼ぶことで関数・クラスをそのまま呼べる。
読む込むファイルごとに 1 つだけ呼ぶことができる。

defaultは一つだけというのがポイントですね。

Scroll to top