##この記事について
ProgateのWeb開発コースを終えた後に始めたRailsチュートリアルが難しすぎて途方に暮れていた私が、Railsビギナーを通して、アプリ開発ができるようになるための学習記録です。
##Railsビギナーとは
Railsビギナー
フリーランスでプログラマーをされている、真木裕也さんが作成されたプログラミング初心者向けの教材です。
第0章〜3章まであり(2020/6/13現在)、丁寧な説明に沿って質問サイトを作っていきます。無料とは思えない丁寧さと内容です。感謝。。。
##第1章「質問投稿機能を作ろう」
(第0章については、VSCodeの簡単なセットアップですので省きます)
desktopに移動し、beginner_appを作成(rails new
コマンド)
フォルダを開きrails s
起動
#####⚠️rails s起動時のエラー
Please run rails webpacker
などと言われることがあります。起動が成功するまでとにかく言われた通りのものをインストールしていきます
➡️zsh: command not found: yarn
yarnが無いよと言われました。Homebrewをインストールし、brewからyarnをインストールします(brew install yarn
)
終わったらバージョン確認しておきます(yarn --version
)
無事起動後localhost:3000にアクセスするとあの画面が出ます
####とりあえずページを作る
・questionsコントローラーの作成(rails g controller コントローラ名
)
・questionsコントローラーにindexアクションを追加
・ルートファイルに追加(get "/questions", to: "questions#index"
)
・indexアクションに対応するビューの作成(viewフォルダ内部のquestionsフォルダにindex.html.erbを手動作成)
・作成したら<%= @test %>
を追加 ←同名のコントローラーで定義した@testをビューで使用可能
####質問を保存するデータベースを用意
●モデル(データベースとのやりとりを行う)の作成 rails g model モデル名
※モデル名は単数
・マイグレーションファイルを開き、テーブルを追加する t.型名 :カラム名
※カラム=データの種類(タイトル・投稿時間など)
※データ型:stringは255字以下の文字列、textはstringよりも長い文字列
・データベースに反映させる rails db:migrate
####質問の新規作成機能を作る
●newアクションを定義しルーティング、ビューを作成
⭐️ビューのコードにある<%= form_with(model: @question, local: true) do |f| %>
って何?
データベースに保存するためのフォームを作成するコード。
localの意味
do |f|
については「ブロック引数」で検索。
・作成したフォームの送信ボタンは/paramsにpostでアクセスするようになっているため、その通りルーティングを行う
●createアクションを定義する
・Question.new(question_params)によって、フォームに送られた値でインスタンスが作成されるので、それを@questionに代入する
➡️@question.saveでデータベースに保存
➡️保存に成功すれば新規作成ページに移動(redirect_to"/questions/new"
)、そうでなければviews/questions/new.html.erbファイルを画面に表示する(render "questions/new"
)
●フォームで受け取る要素を指定
・Question.newの引数となるquestion_paramsを、privateメソッド下に定義する
ストロングパラメータ(params:require(:モデル名).permit(:テーブル名)
)を使うと、指定されたパラメータのみ受け付けることができる
●適切なデータか検証する–バリデーション
・questionモデルのファイルでvalidates :テーブル名
に続けて指定する
指定する内容は 入力必須にするpresence: true
、文字列の長さlength: { maximumまたはminimum: 数値 }
などがある
・createアクションとapplicationビューにflashを追加する
⭐️[:notice]キー・[:alert]キーについて:通知・警告用にあらかじめ用意されているが、キーには好きな名前を付けられる
####質問表示機能を作る
●showアクションの定義とルーティング、ビューファイルの作成
●localhost:3000にアクセスしたときのルーティング:root to: "URL"
第1章はここまで。
###学んだこと
基本的なことが頭に入っていないことに気づかされ、もっとしっかりしようと思いました(小並感)
●ルーティング➡️コントローラー➡️ビューの流れで処理が行われる
●newアクションで空のインスタンスを変数に代入し、その変数をビューで引数として渡すことで新規作成と判断してくれる(インスタンスが空である=新規作成)
●form_withヘルパーでフォームを簡単に作成できる text_fieldは1行、text_areaは複数行のフォーム
●ストロングパラメータ:セキュリティを強固にするために、指定されたパラメータのみ受け付ける仕組み
●redirectした時はflash、renderの時はflash.nowを使う
●redirect_toの後は"URL"で、新しいリクエストを発行する。入力したフォームが空欄になる
redirectの後は"ビューのファイル名"で、ビューを呼び出す=コントローラを介さない。入力内容が保持される