「railsでアプリを作る」の記事 - 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テーブルの初期値を投入

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

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

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

2020.11.11 ＊削除機能

2020-11-12T00:09:25+09:00

削除view

どの画面で削除できるようにするかまだ考えていないので、とりあえずshow画面にボタンを置いておきます。
words/show.html.erb

SHOW

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

コントローラ作成時に作られたwords/delete.html.erbは要らないので削除。
http://localhost:3000/words/1にアクセスすると

ボタンが変な所にいますがとりあえず気にしない。

id=3のDeleteボタンを押してみます。

word３が消えました✨

宿題

全件表示する画面にhttp://localhost:3000/words/1でアクセスするっていうのはおかしいですね。
ちゃんと画面構成考えないと。

おわり*0 v 0

2020.11.10 ＊英単語の登録機能

2020-11-10T17:12:09+09:00

登録用のアクションとviewを作成

前回wordsコントローラを作成した際、アクションはnew, show, edit, delete としました。
しかしnewは登録画面を表示する関数なので、「DBに登録する」という処理用のアクションが必要です。
なのでwordコントローラにcreateアクションを追加します。

class WordsController < ApplicationController
  def new
  end

  def create
    @word = Word.new(params.require(:word).permit(:english, :japanese))
    @word.save
    redirect_to @word
  end

  def show
  end

  def edit
  end

  def delete
  end
end

処理の意味は以下のとおりです。
1. フォームに入力された値を引数として受け取り、Wordモデルをインスタンス化
　英単語と日本語訳だけ入力する想定なので、許可する引数はenglishとjapaneseのみにしました。
2. DBに保存
3. showアクションにリダイレクト

viewも実装します。
new.html.erb

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

http://localhost:3000/words/newにアクセスするとこんな画面になりました。

EnglishとJapaneseを入力してsaveボタンを押してみます。

ルーティングエラー・m・
[POST]"/words/create"にしたいのに"words/new"になってしまっていますね。
form_withに:urlオプションを追加しましょう。
先ほどのエラー画面に表示されたルートを参考にします。

words_pathのPOSTがcreateアクションに割り当てられているので、words_controller.rbの１行目にurl: words_pathを追加します。

<%= form_with scope: :word, url: words_path, local:true do |f| %>

で、http://localhost:3000/words/newにアクセスしてsaveボタン押下。

ちゃんとshowアクションにリダイレクトされました！URLはhttp://localhost:3000/words/1となっています。

showアクションを実装

登録されたデータを画面で確認できるようにします。
まずwords_controller.rb

class WordsController < ApplicationController
　　中略
  def show
    @word = Word.find(params[:id])
  end

@wordの受け取り先はshow.html.erbです。

SHOW

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

これで先ほどのhttp://localhost:3000/words/1にアクセスしてみます。

無事登録できていました✨

パラメータの処理を切り出し

パラメータの許可を逐一書くのはよくないので共通化します。
words_controller.rb

class WordsController < ApplicationController
　
  def create
    @word = Word.new(word_params)
    @word.save
    redirect_to @word
  end

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

※変更のない部分は割愛しています。
word_paramsという関数を作成し、createのWord.new( )の中で呼び出すようにしました。

2020.11.9 ＊最初のコントローラとWord・Chapterモデル

2020-11-09T19:02:51+09:00

全体像を考える

まずはシンプルに作っていこうと思います。
実装したい機能は以下の通り。
* 英単語とその日本語訳を登録することができる
* 登録した英単語は編集、削除もできる
* 30語くらいの単位で章分けする
* 章ごとに小テスト（英単語が表示され、その日本語訳を答える）が作られる
* 小テストが採点される
* 間違えた問題を集めた再テストが作られる

最初のコントローラ

TOP画面を作ります。まだモデルは関連しないのでコントローラを作成。
$ rails g controller Top index
Topコントローラにindexというアクションを作りました。

サーバを起動してhttp://localhost:3000/top/indexにアクセスすると画面が表示されます。

これをトップ画面にしたいので、http://localhost:3000でアクセスできるようにルーティングを変更します
routes.rbにroot 'top#index'を追加

Rails.application.routes.draw do
  root 'top#index'
  get 'top/index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

「ルートURLはTopコントローラのindexアクションです」という意味ですね。これで完了です！

TOP画面をどうするかは未定なのですが、とりあえずwelcomeな感じにしておきます。
先ほどの$ rails gコマンドで作成されたindex.html.erbファイルを編集します。

＊WELCOME＊
take it easy! 0 v 0

wordモデルとchapterモデルを仮で作成します。
主キーのidは自動で追加されるのでここでは明記しません。また、wordモデルのchapter_idも抜いておきます。
$ rails g model Word english:string japanese:string should_retest:boolean
$ rails g model Chapter name:string
これでマイグレーションファイルが２つ作られました。

chapter : word = 1 : n にしたいので、wordの方のマイグレーションファイル20201109_create_words.rbにt.references :chapter, foreign_key: trueを追記します。

class CreateWords < ActiveRecord::Migration[6.0]
  def change
    create_table :words do |t|
      t.string :english
      t.string :japanese
      t.boolean :should_retest
      t.references :chapter, foreign_key: true  # ←ここを追記

      t.timestamps
    end
  end
end

DBに反映させます。
$ rails db:migrate

== 20201109093357 CreateWords: migrating ======================================
-- create_table(:words)
   -> 0.0140s
== 20201109093357 CreateWords: migrated (0.0141s) =============================

== 20201109093405 CreateChapters: migrating ===================================
-- create_table(:chapters)
   -> 0.0029s
== 20201109093405 CreateChapters: migrated (0.0029s) ==========================

コマンドで確認してみます。
$ sqlite3 db/development.sqlite3
sqlite> .tables

ar_internal_metadata  schema_migrations   
chapters              words

chaptersとwordsというテーブルが作成されています。

wordsのカラムを確認すると
sqlite> PRAGMA table_info(words);

cid|name|type|notnull|dflt_value|pk
0|id|integer|1||1
1|english|varchar|0||0
2|japanese|varchar|0||0
3|should_retest|boolean|0||0
4|chapter_id|integer|0||0
5|created_at|datetime(6)|1||0
6|updated_at|datetime(6)|1||0

先ほど主キーのidとchapter_idはマイグレーションファイルに記載していなかったのですが、ちゃんと作成されています。chapter_idはt.references :chapter, foreign_key: trueを追加したおかげで自動作成されたんですね。

Wordコントローラ

モデルができたので、CRUD(Create, Read, Update, Delete)を定義するコントローラを作成します。
命名規則にしたがってwordは複数形に。
$ rails g controller Words new show edit delete
words_controller.rb

class WordsController < ApplicationController
  def new
  end

  def show
  end

  def edit
  end

  def delete
  end
end

４つ分のhtml.erbも作成されました。もしかしたらdelete.html.erbは要らないかもな

ルーティング

wordコントローラを作成した際にルーティングも↓こんな風に反映されましたが、
routes.rb

Rails.application.routes.draw do
  get 'words/new'
  get 'words/show'
  get 'words/edit'
  get 'words/delete'
  root 'top#index'
  get 'top/index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

resourceメソッドを使えばCRUDのルーティングをまとめて定義することができます。
routes.rb

Rails.application.routes.draw do
  root 'top#index'
  get 'top/index'
  resources :words
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

これで、たとえばnew画面にはhttp://localhost:3000/words/newでアクセスできるようになりました。

本当はCRUDの処理も書きたかったですが時間切れです！

おわり*0 v 0

2020.11.6 ＊サーバ起動まで

2020-11-06T18:26:29+09:00

rescue in load': Webpacker configuration file not found
Please run rails webpacker:install

みたいな感じでした。

言われた通りに
$ rails webpacker:install
したら

Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/

yarnがインストールされていないと。Homebrewでインストールします！
$ brew install yarn

インストールしてるっぽいログがたくさん出力されたので確認！
$ yarn -v

zsh: command not found: yarn

できてなかった！

いっぱい出てきたログの中に↓こう書いてあったので

Error: yarn 1.22.0 is already installed
To upgrade to 1.22.10, run `brew upgrade yarn`.

upgradeします
$ brew upgrade yarn

いけたっぽいので確認
$ yarn -v

1.22.10

やったー！

本題に戻ってwebpackerを入れます
$ rails webpacker:install

長ーいログが出て

Webpacker successfully installed 🎉 🍰

だそうです。わーい！

最後に
$ rails s
で起動できました✨

おわり*0v0

「railsでアプリを作る」の記事 - 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.11.11 ＊ 削除機能

SHOW

SHOW

2020.11.10 ＊ 英単語の登録機能

SHOW

2020.11.9 ＊ 最初のコントローラとWord・Chapterモデル

＊WELCOME＊

2020.11.6 ＊ サーバ起動まで

2020.12.31 ＊テスト機能作成

2020.11.17 ＊画面設計

2020.11.16 ＊編集機能

2020.11.12 ＊単語の一覧表示

2020.11.11 ＊削除機能

2020.11.10 ＊英単語の登録機能

2020.11.9 ＊最初のコントローラとWord・Chapterモデル

2020.11.6 ＊サーバ起動まで