【Ruby】eachを動的に使う方法(〇〇.each_with_index)JavaScriptとの連携

更新日:

【Railsでアプリ開発中】プログラミング初心者の勉強ブログ #37

こんにちは。

37日目。Rubyでeachを実行した際の各要素にインデックス番号を振り、動的に扱う方法をやっていきます。

はじめに

この記事は、railsフレームワークでオリジナルwebアプリ「免許学科試験学習サイト」作成中の僕が、プログラミングをしている中で気づいたことや学んだことを書いております。プログラミング初心者なので知識は少ないですが、現在通っているプログラミングスクール「DIVE INTO CODE」で学んでいることや、ネットで見つけた様々な記事を参考に記事を作成しております。

 

目次

 

前回までの内容

前回の記事(【HTML】セレクトボックスの使い方(selectタグの書き方、JavaScriptで要素取得))では、免許アプリの「一問一答機能」を拡張し、セレクトボックスを用いて「問題数」と「出題範囲」を絞れるようにしました。セレクトボックスについて1から使い方を解説した記事になります。

今回は「問題一覧」ページを編集。「答えを確認」をクリックすると解答と解説が現れるようにするため、eachを動的に処理できる「each_with_index」メソッドを使用していきます。

 

each_with_indexメソッドでeachを動的に使う

eachを動的に利用するメリット

Railsでrubyを書いていくにあたって、「each文の繰り返しを用いたデータの表示をしたい」ってなる時が結構頻繁にあります。

最近JavaScriptをrailsで書いてると、このeach文に悩まされることが多いのです。

 

例えば、

@questions = Question.all

@questions.each{ |question| }とすれば、Questionモデル内のデータを全て取り出して表示することができます。大変便利です。

 

しかし、このように書くと、データ1つずつに何か動きや見た目を変えたいときに、

全部データがまとまっててどう区別つければいいか、いつも悩んでいました。

 

この悩みを解決してくれたのが「each_with_index」メソッドです。今回はこちらを使い JavaScriptで表示の動きを一つのデータごとに付けていきます。

 

 

完成品

 

 

こうしてみると大したことないように見えますが、

問題ごとにJavaScriptが対応しております。この動きをさせたかったんです。

indexをつけないと「答えを確認」クリック時、1つずつではなく、全ての問題の答えが一遍に表示されてしまいます。

 

(〇〇.each_with_index)実際のコーディングと仕組み

コード部分

完成品

 

上の画像の実際のコードです。

views/questions/devide.html.erb

 

views/questions/devide.html.erb(scriptタグ内)

 

controllers/questions_controller

 

仕組みと解説

以下のコードが基本となります。

こうすることで「index」にインデックス番号が入ります。

このときindexは0から始まります。(@questions配列の一つ目がquestionに代入され、処理が行われる際「index = 0」で自動定義されてます。)

 

divに設けたidは、直接rubyを書き込んでindexをつけてやります。

こうすることで、devide_question_div_0、devide_question_div_1・・・

のようなidを持ったdivが問題数分生成されます。

 

次がscriptです。

 

先ほど解説した、rubyで生成されている

devide_question_div_0、devide_question_div_1・・・

のように連続したidがついたdivそれぞれに、クリック時のfanctionを定義するため、

こちらでも繰り返し文whileを使います。

 

このとき重要なこと。それは、

「(const index = i ;)で定数indexを定義し、繰り返すごとに増えてしまうiを固めておく」

ことです。

 

実は詰まったのがここでした。

「 i 」はdevide.html.erbが呼び出され、scriptタグ内のwhileが起動し、表示された段階で

「最後の問題のdivにつけられたインデックス番号」に変わってしまう点。

 

つまり、最初のwhile起動時の「i」と、

実際にユーザーが「答えを確認」ボタンをクリックした時の「i」が異なるということ。

 

すると、「答えを確認」ボタンを押しても「devide_answer_div」クラスがつけられたdivのインデックスが対応しなくなり、答えが確認できなくなります。

 

なので一旦iを保存しておく器として、indexを用意します。

 

これでうまいこと表示されます。

完成品

 

今は質素です。

今度cssつけてリッチにさせます。

 

まとめ

今回はeachを動的に使い、各要素に対しそれぞれJavaScriptでアクションを定義しました。

悩みが一個解消されました。よかったです。

 

JSで変数を用いて処理を行う場合、「表示」のタイミングと、そのときの「変数の中身」を確認する必要があるなと。

ajaxもそうですが、定義の仕方とタイミングの違いで、だいたい上手く行ってないことが多いです。

 

「動的」という言葉も今までしっくりきてなかったので使えなかったのですが、

今回の勉強でやっと理解できました。

 

定数も今まで使ったことなかったですし、いつ使うんだよって思ってたというか、

定数の存在自体忘れかけていました。貴重なアウトプットいただきました。

 

まあこんなところです。

 

以上ありがとうございました。

 

保存保存

保存保存

-プログラミング学習
-, , , ,

Copyright© s u p ? , 2019 All Rights Reserved.