【Rails/vue.js】モデルデータをJavaScriptで取得してIDで検索できるようにする方法

  • このエントリーをはてなブックマークに追加

バックエンドがRuby on Railsの場合に、vue.jsでデータベースのデータを操作したい場合の話です。

1レコード分だけ取得するのであれば、インスタンス変数「@で始まる変数」にそれぞれ値を入れて渡すだけでもいいのですが、複数レコード(もしくは全レコード)を一気にjavascript側に持ってきたい場合もあります。

今回はRailsの機能ベースで部分的にvue.jsを使うシチュエーションで進めていきます。

複数レコードを一気に持ってくるメリットは?

まず、複数レコード(全レコード)を一回で持ってくるメリットを考えてみましょう。

 

1.vue.jsのv-forが使える

「v-for」は同じ要素をデータ分だけ繰り返し表示させたい時に便利な文法です。

データベースに登録されているデータの数だけ繰り返し表示が出来るメリットがあります。

例として、僕が作っているAnybookの問題集一覧表示を見てみましょう。

 

問題集リストをv-forを使ってデータの数だけ表示させています。

これを実現するには、テーブルのデータを配列もしくはオブジェクト形式でデータを取得する必要があります。

 

2.通信回数を最小限に抑えられる

SPAサイトを作成している場合は特に動きが止まりにくい、スムーズなデータのやり取りが好ましいので、

頻繁にデータを取りに行くのはあまりいいとは言えません。(場合にもよります)

javascript側にデータがあれば、ID検索もjavascriptで行えますので、サーバーのやり取りは最初の1回で事足ります。

 

実際につくってみよう!

では実際にどのように作ればいいのか、説明します。

 

1.ActiveRecoadで取得したデータをオブジェクト化する

あるテストの成績テーブルを取得する場合で考えていきます。

【seisekiテーブル】

id kamoku point
1 国語 65
2 算数 70
3 理科 80
4 社会 50

 

これをActiveRecoadでデータを取得した後、javascriptで扱えるようにJSON化させます。

 

モデルデータは「.to_json」でデータをJSON化させることができます。

不要なカラムがある場合、または特定のカラムだけに絞る場合、以下のようにして省くことができます。

たったこれだけでモデルをJSON化できるのはメチャ便利!!

 

JavaScriptでモデルデータを受け取る

上で作成したモデルデータを格納したインスタンス変数「@seiseki」をjavascript側で受け取ります。

Ajax通信で受け取る場合は「~.js.erb」、ビューで受け取る場合は「~.html.erb」に処理を記述します。

今回はビューで受け取る方で説明します。

 

グローバル変数「modeldata」にRailsからのインスタンス変数を代入します。

その時、JSONデータを「JSON.stringify」で文字列化して「JSON.parse」再度JSON化する加工を行っています。

(これをやらずにそのまま値を代入すると、処理が固まってしまった・・・)

 

これで、javascript側にモデルデータを引き継ぐことが出来ました!

 

javascriptで使ってみる

v-forでの使い方

通常のv-forの使い方と同じです。

モデルデータを格納しているdata項目を設定するだけです。

 

モデルデータのID検索方法

取得したモデルデータのID検索用メソッドを作ります。

 

filterで特定のレコードを絞り込んでいます。

使い方はこんな感じです。

 

この関数を使えば、Railsのモデルクラスのような感覚で「data.kamoku」とキーを指定すれば値が取り出せます。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*