Ruby on Railsを使ったwebアプリ開発の記録の投稿 - Crieit

2020.12.31 ＊テスト機能作成

2020-12-31T18:28:25+09:00

本日のゴール

■ テスト機能を作る

設計を少し見直しました。
単語の編集機能は無くして、追加・削除のみにします。

Test画面生成

チャプターごとに単語テストができる画面を作ります！
久々にこのコマンド
$ rails g controller Tests
tests_controller.rbにテスト画面表示用のindexアクションを作成します。

class TestsController < ApplicationController
    def index
        @chapter_id = params[:chapter_id]
        @words = Word.where(chapter_id: @chapter_id)
    end

routes.rbには以下を追加

get 'test/', to: 'tests#index'

chapters/index.html.erbにテスト画面へのリンクを追加

<% @chapters.each do |chapter| %>
    
        <%= chapter.name %>
        <%= link_to 'Show Words', words_path(chapter_id: chapter.id) %>
        <%= link_to 'TEST', test_path(chapter_id: chapter.id) %>
    
<% end %>

こんな感じです

テスト画面のviewを作成します。
tests/index.html.erb

TEST - CHAPTER<%= @chapter_id %>

<%= form_with url: score_path do |f| %>
    <% @words.each do |word| %>
        
            <%= word.english %>
            <%= f.text_field :"answers[#{word.id}]" %>
        
    <% end %>
    <%= f.hidden_field :chapter_id, :value => @chapter_id %>
    <%= f.submit 'SUBMIT' %>
<% end %>

単語のIDと回答をanswersというハッシュに格納してコントローラに渡すようにしています。
（キーがID, 回答が値）
hidden_fieldのチャプターIDはスコア画面で表示させるためのものです。

画面はこうなりました。

テストを採点する

tests_controller.rb

    def score
        answers = params[:answers]
        should_retest_values = {}
        session[:answers] = answers
        # 正誤判定
        answers.each do |answer|
            should_retest = is_wrong(answer)
            should_retest_values[answer[0]] = should_retest
        end
        # wordsテーブルのshould_retestを更新
        should_retest_values.each do |k, v|
            word = Word.find(k)
            word.should_retest = v
            word.save
        end
        # 正答数を算出
        score = count_correct_answers
        # テンプレートに返却
        redirect_to showscore_path(score: score, chapter_id: params[:chapter_id])
    end

    def show
        @score = params[:score]
        @chapter_id = params[:chapter_id]
        @words = Word.where(chapter_id: @chapter_id)
        @answers = session[:answers]
    end

    private

    def is_wrong(answer)
        correct_answer = Word.find(answer[0])
        return answer[1] != correct_answer.japanese
    end

    def count_correct_answers
        Word.where(should_retest: false).size
    end

scoreメソッドがやっている処理は以下のとおりです。
1. viewから渡された回答をセッションに入れる（スコア画面で表示させるため）
2. 正誤判定し、{ ID: 再テストtrue/false } という形式のハッシュを作成
3. ハッシュの値をもとにDB(wordsテーブルのshould_retestカラム)を更新
4. スコア（正答数）を算出
5. スコア画面にリダイレクト

showメソッドはスコア画面を表示します。
ルーティングは以下のようにしました。
routes.rb

  post 'score/', to:'tests#score'
  get 'showscore/', to:'tests#show'

スコア画面作成

tests/show.html.erb

SCORE - CHAPTER<%= @chapter_id %>

    score:<%= @score %>


    <% @words.each do |word| %>
    
        <%= word.english %>
        <%= word.japanese %>
        <%= @answers[word.id.to_s] %>
    
    <% end %>

showメソッドから渡された変数を使ってスコア、英単語・正解・ユーザの回答を表示させています。

DBの値もちゃんと更新されました！

おわり*0 v 0

2020.12.11 ＊ chapter機能

2020-12-11T23:17:05+09:00

本日のゴール

■ chapterごとに登録・削除できるようにする

chapterテーブルの初期値を投入

Index and Edit and Delete画面を作りたいと思います。
今までwordsテーブルのchapter_idはnullのままにしていたので、まずここを登録できるようにします。

chapterテーブルはとりあえず初期データを登録しておくことにするので、seed.rbを使います。
db/seed.rb

# This file should contain all the record creation needed to seed the database with its default values.
# The data can then be loaded with the rails db:seed command (or created alongside the database with db:setup).
#
# Examples:
#
#   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
#   Character.create(name: 'Luke', movie: movies.first)
for i in 1..5 do
    Chapter.create(name: "chapter#{i}")
end

chapter1~chapter5を登録するスクリプトです。
コマンドでデータを投入します。
$ rails db:seed
sqliteでテーブルを確認すると

ちゃんと投入できていました！

chapter一覧画面作成

まずChapterコントローラを作成して、indexで一覧表示させます。
$ rails g controller Chapters
chapters_controller.rb

class ChaptersController < ApplicationController
    def index
        @chapters = Chapter.all
    end
end

views/chapters/index.html.erb

<% @chapters.each do |chapter| %>
    
        <%= chapter.name %>
    
<% end %>

単語をchapterごとに表示させる

先ほど作成したviews/chapters/index.html.erbにwords一覧画面へのリンクを付けます。
リンクが呼ぶのはwordsコントローラのindexアクションです。パラメータとしてchapter_idを渡します。

<% @chapters.each do |chapter| %>
    
        <%= chapter.name %>
        <%= link_to 'Show Words', words_path(chapter_id: chapter.id) %>
    
<% end %>

localhost:3000/chaptersはこうなりました

indexアクションは今までwordsを全件抽出していましたが、これをchapter_idで絞り込むようにします。
words_controller.rb

class WordsController < ApplicationController
  def index
    @words = Word.where(chapter_id: params[:chapter_id])
  end

DBにレコードを登録しておいて（chapter_id=1が3件、chapter_id=2が2件にしました）
localhost:3000/chaptersからリンクを踏んでみます。

URLはhttp://localhost:3000/words?chapter_id=1となっていました。
ここをTOP画面にしたいので、routes.rbを修正します。

Rails.application.routes.draw do
  root 'chapters#index'

index, create, deleteをまとめる

chapterを選択した後の画面でwordsの一覧表示、追加、削除を行えるようにします。
words/index.html.erb

WORDS - CHAPTER<%= @chapter_id %>

<% @words.each do |word| %>
    
        ID: <%= word.id %> |
        ENGLISH: <%= word.english %> |
        JAPANESE: <%= word.japanese %>
        <%= button_to 'Delete', word_path(word), method: :delete %>
        ----------
    
<% end %>
＊ADD NEW WORDS＊
<%= render 'form' %>

以前作成していたフォームを追加して、editを削除しました。
_form.html.erb

<%= form_with model: @new, local:true do |f| %>
    
        <%= f.label :english %>
        <%= f.text_field :english %>
    
    
        <%= f.label :japanese %>
        <%= f.text_field :japanese %>
    
    <%= f.hidden_field :chapter_id, :value => @chapter_id %>
    <%= f.submit %>
<% end %>

model: @word だった部分を@newとし（words/index.html.erbにはもともと@wordsを渡しているのでややこしいから変更）、hidden_fieldを使ってchapter_idが勝手に登録されるようにしています。
words_controllerも修正

class WordsController < ApplicationController
  def index
    @chapter_id = params[:chapter_id]
    @words = Word.where(chapter_id: params[:chapter_id])
    @new = Word.new
  end
   〜中略〜
  def create
    @word = Word.new(word_params)
    @word.save
    redirect_to words_path(word_params)
  end

indexアクションにはフォームで使用する@newを追加、
createアクションにはredirect_toの引数を追加しました。word_paramsは[:chapter_id]を引数として受け取るように定義してあるので、これによってチャプターの単語一覧画面にリダイレクトされます。

こんな感じになりました

宿題

ルーティングやアクションをいろいろ変更したので、リダイレクト先がおかしかったり使わないviewsが出てきたりしてしまいました。
整理したい！！

おわり*0 v 0

2020.11.17 ＊画面設計

2020-11-17T17:27:34+09:00

本日のゴール

■ 画面設計を考える

こんな感じにしていきたいと思います。

おわり*0 v 0

2020.11.16 ＊編集機能

2020-11-16T18:01:31+09:00

本日のゴール

■ 編集機能作成

editアクション作成

まず編集画面に遷移させるアクションを作成します。
words_controller.py

  def edit
    @word = Word.find(params[:id])
  end

showアクションと同じく、idをキーに単語を１つ探してviewに渡すという処理です。

createアクション作成

続いて、viewから受け取った値をDBに格納するアクションを作成します。
words_controller.py

  def update
    @word = Word.find(params[:id])
    @word.update(word_params)
    redirect_to words_path
  end

  中略

  private
  def word_params
    params.require(:word).permit(:english, :japanese)
  end

処理の内容は以下の通り。
1. idをキーに更新対象の単語を探す
2. viewから受け取った引数をword_paramsに渡し、updateメソッドでDB更新
3. 一覧画面にリダイレクト

view作成

最後に編集画面を作成します。
words/edit.html.erb

<%= render 'form' %>

第３回の時にフォームのパーシャルを作成しているので、editでもこれを使います。

http://localhost:3000/words/1/editにアクセスしてみます。

登録済みの値が表示されました！

値を変えてSaveボタンを押してみます。

　↓ボタンクリック

更新できました！
と思ったらIDが５になっている 0 _ 0

フォームのパーシャルを修正

updateを実行するはずがcreateしてしまっている原因はフォームにありそうです。
words/_form.html.erb

<%= form_with scope: :word, url: words_path, local:true do |f| %>
    
        <%= f.label :english %>
        <%= f.text_field :english %>
    
    
        <%= f.label :japanese %>
        <%= f.text_field :japanese %>
    
    <%= f.submit %>
<% end %>

１行目のurl: words_pathがwords#createを指しているので削除してみます。

<%= form_with scope: :word, local:true do |f| %>
　以下略

http://localhost:3000/words/newにアクセスして

Saveボタンクリック↓

0 _ 0...

いろいろ調べて以下に落ち着きました。
words/_form.html.erb

<%= form_with model: @word, local:true do |f| %>

words_controller.rb

  def new
    @word = Word.new
  end

仕組みがあんまり理解できていないのでもやもやする....

editのリンク作成

一覧画面から編集画面に遷移できるようリンクを作っておきます。

editはedit_word_pathというルーティングになっているので、index.html.erbに
<%= button_to 'Delete', word_path(word), method: :delete %>
という行を追加します。

words/index.html.erb

INDEX

<% @words.each do |word| %>
    
        ID: <%= word.id %> |
        ENGLISH: <%= word.english %> |
        JAPANESE: <%= word.japanese %>
        <%= button_to 'Edit', edit_word_path(word), method: :get%>
        <%= button_to 'Delete', word_path(word), method: :delete %>
        ----------
    
<% end %>

http://localhost:3000/wordsにアクセス

これで一通りのCRUDが完成しました〜🎉

おわり*0 v 0

2020.11.12 ＊単語の一覧表示

2020-11-12T23:37:19+09:00

本日のゴール

■ 一覧表示作成
■ トップ画面にリンクを作成

indexアクション作成

前回showアクションを一覧表示用のアクションにしましたが、単語のIDを指定して全件表示するのはおかしいです。
Railsの定石通り、全件表示はindexアクションにします。
words/index.html.erbを新しく作成します。

INDEX

<% @words.each do |word| %>
    
        ID: <%= word.id %> |
        ENGLISH: <%= word.english %> |
        JAPANESE: <%= word.japanese %>
        <%= button_to 'Delete', word_path(word), method: :delete %>
    
<% end %>

中身はh1タグ以外すべてshow.html.erbのコピペです。

続いてコントローラ！
words_controller.rb

class WordsController < ApplicationController
  def index
    @words = Word.all
  end

  以下略

先頭にindexアクションを作りました。

http://localhost:3000/wordsにアクセスしてみます。

やったー！

showアクションを本来の姿に戻す

IDを指定して１件だけ表示するやつに戻します。
words_controller.rb　※showメソッドのみ抜粋

  def show
    @word = Word.find(params[:id])
  end

words/show.html.erb

SHOW

    ID: <%= @word.id %> |
    ENGLISH: <%= @word.english %> |
    JAPANESE: <%= @word.japanese %>

http://localhost:3000/words/1にアクセスします。

無事に本来の姿に戻りました。

トップ画面にindex, newのリンクを作る

http://localhost:3000/words/やhttp://localhost:3000/words/newにいちいちアクセスするのが面倒なので、ついでにリンクを作ってしまいます。
第２回目の投稿で作成したトップ画面を使うことにしました。
top/index.html.erb

＊WELCOME＊
<%= link_to 'Add A Word', new_word_path %>
<%= link_to 'Show All Words', words_path %>

http://localhost:3000/にアクセス

動作確認もOKでした！

おわり*0 v 0

Ruby on Railsを使ったwebアプリ開発の記録の投稿 - Crieit

2020.12.31 ＊ テスト機能作成

TEST - CHAPTER<%= @chapter_id %>

SCORE - CHAPTER<%= @chapter_id %>

2020.12.11 ＊ chapter機能

WORDS - CHAPTER<%= @chapter_id %>

2020.11.17 ＊ 画面設計

2020.11.16 ＊ 編集機能

INDEX

2020.11.12 ＊ 単語の一覧表示

INDEX

SHOW

＊WELCOME＊

2020.12.31 ＊テスト機能作成

2020.11.17 ＊画面設計

2020.11.16 ＊編集機能

2020.11.12 ＊単語の一覧表示