「scaffold」を使わずにアンケートフォームを作ってみる〜後編〜

1. 初心者向けプログラミング講座
第4回目
「scaffold」を使わずにアンケートフォームを作ってみる
〜後編〜

2. はじめに
ハンズオンのはじめかた
・コマンドやコードについてはslackのチャンネルでも共有しますが
慣れてもらうためにも基本的にはキーボードでの入力をしてください
※長文のコードの場合はコピペしてください。その際は案内します。
・わからない箇所が出てきた場合はすぐに呼んでください
無闇にコマンド入力するなどすると対処できなくなる場合があります。
・ハンズオンで進めることを前提とするので、
時間の関係上、コードの役割など詳細については割愛します。
別途slackで質問していただければ答えることは可能です。
・コマンドおよびコードについては “”囲みで記載しますが
“”については無視してください

3. 前回の資料はこちら
https://goo.gl/oYqVEQ
Slideshareのリンク

4. 注意事項
・今回は前回の内容(第3回〜前編〜)を引き継いだ形となります。
・開発環境などについても前回分をそのまま利用しますので
今回から参加されている方については同じ作業ができません。
前回分の資料から進めていただくようお願いいたします。
・また、今回はかなりコードを書いていきます
長文コードについてはslackにてコード共有しますが
プログラムの書き方に慣れてもらうためにも
できる限り手打ちしていただくようお願いします。

5. フォーム登録時にユーザの情報を参照させるようにする
sample_q/config/routes.rbに
“resouces :users”を追加する

6. アンケートフォームを作成する
“sample_q/app/views/user/new.html.erb”に
ユーザモデルを作成した時に与えた属性を記入するフォームを作成する
<%= f.label 〜>や
<%= 〜 class:’form-controll’ %>
などについてはコピペしてしまい
必要箇所だけ変更する方が良い
(同じようなコードであり、
なおかつ引用した方がタイプミスが
少なくなるため)

7. アンケートフォームを作成する
viewファイルが作成できたのでcontrollerファイルをコーディングしていく
“sample_q/app/controller/user_controller.rb”
この時にユーザ情報を参照するshowについてもついてに作成しておく

8. ユーザ情報画面を作成する
“sample_q/app/views/user”に右クリックでnew fileを選択して
show.html.erbのファイルを作成し以下のようにコーディングする
※補足
以下のようにターミナルでコマンドを打ってもファイルが作成できる

9. 重要な訂正
コードを書きながらブラウザで確認していくとエラーが発生します
これは当初ユーザのcontrollerを生成する時に
本来であれば”users”としなければならないところ
“user”と単数形で作成したことが原因です。
従って以下ファイル・ディレクトリおよびコードを
userからusersへとリネームしてください
◆“app/views/user”
◆“app/helpers/user_helper.rb”
→ファイル内のコード”module UserHelper”も変更
◆“app/controller/user_controller.rb”
●“app/config/routes.rb”内のコード
“get ‘question’, to: user#new”

10. 入力ミス時のエラーメッセージを作る
new.html.erbにコードを書いた際に
エラーメッセージを表示させる記述をしていたので
そのメッセージをどのようにして表示させるかを
コーディングしていく
↑この部分
“app/views/shared/_error_messages.html.erb”として作成
←“shared”のフォルダは作成する

11. 一度ブラウザで確認してみる
ここまでできればほぼ完成に近づいているので
一度サーバを立ち上げてブラウザで確認してみる
ランディングページについては
大きく変化はなし

12. 一度ブラウザで確認してみる
ページのボタンをクリックしてフォームにリンクした状態

13. フォームを入力してみる
適当にフォームを入力してみる

14. データベースに保存されてるか確認したい
データベースの扱い方は基本的にRailsの場合
デフォルトではSQLite3という規格を使用します
ただ普通のファイルエクスプローラーでは開けないので
別途でアプリをダウンロードします
googleで「DBBrowser」と検索すると一番上に出てくる
OSおよびbit数に注意して
DL、インストールを
実行してください

15. データベースに保存されてるか確認したい
「DBBrowser for SQLite」がインストールできたらアプリを実行
mac版は以下の通り

16. データベースに保存されてるか確認したい
“sample_q/db/development.sqlite3”を右クリックしてダウンロードする
これ

17. データベースに保存されてるか確認したい
「Open Database」からダウンロードしたファイルを展開する

18. データベースに保存されてるか確認したい
「Browse Data」タブを開いて「Table」を「users」に設定すると
フォームに入力した内容が全て反映されているのがわかる

19. ブラウザでユーザを参照するとこうなる
反映元のファイルは”app/views/users/show.html.erb”になるのだが
データを引用するコードしか書いてないので
見た目としてはテキスト(文字)がカンマ区切りで並んでいるだけになる
もちろんコードを書けば綺麗なレイアウトに仕上げることも可能だが
時間的都合により今回は割愛
複数ユーザの回答がある場合、
usersのあとの数字を変更すると
閲覧することが可能になる

20. ふりかえり
・今回やった内容でどこが一番むずかしかったか。
・第3回、第4回の内容の中で
自分でも変更できそうな部分があったか。
・誰でもいいので
プログラミングをやったことがない人に対して
今回までの内容なら自分で教えられるかどうか

21. 今後について
今後はよりしっかりとしたアプリケーションを作成していくので
動画配信を利用してチュートリアルサイトをトレースしていきます。
最短でも50時間ほどの学習時間が必要になるので
オンラインでサポートする体制の方が適切と考えるため
実際に集まって勉強していくことに関しては
月に1度もしくは隔月1度をめどにしていく予定です。
詳細についてはslackにて発表します。

22. おわりに
・今回で初心者向けの勉強会は全て終了です
おつかれさまでした。
・時間の都合上、引数や変数など細かい内容については
紹介してませんが、自身で学習していく際に
必ず出てくる内容のものばかりです。
・あくまで今回はサンプルのアプリケーションを作っただけなので
実際の開発ではより多くの工程が存在します。
・またプログラミングに終わりはありません
日進月歩で技術革新していくので
常に向上していく精神が必要になります。