3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Railsビギナーやってみた【第1章】

Last updated at Posted at 2020-06-13

##この記事について
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の後は"ビューのファイル名"で、ビューを呼び出す=コントローラを介さない。入力内容が保持される

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?