アプリケーションのデータ保存(createアクション実装)
newアクションの実装に続き
createアクションの実装手順を記載
①ルーティングの設定
Rails.application.routes.draw do root to: 'tweets#index' resources :tweets, only: [:index, :new, :create] end
②コントローラーの設定(ストロングパラメータを使用)
意図しないデータの変更を防ぐために使用。require / permitメソッドを組み合わせて使う。
# require / permitの書き方 params.require(:モデル名) #パラメータからどの情報を取得するか選択 params.require(:モデル名).permit(:キー名) #取得したいキーとそのキーの値のみを取得できるようになる params.require(:post).permit(:text, :image) #textとimageの値のみ取得
この記述はプライベートメソッドとして記述する。
Class外から呼び出すことが不可能になるため、エラーを防ぐ役割を担うため
繰り返し使用するコードを集約等できることで、コードが見やすくなるため
class PostsController < ApplicationController def index (処理) end def new (処理) end def create (処理) end private # private以下の記述はすべてプライベートメソッドになる def private_method # プライベートメソッド (処理) end def any_method # プライベートメソッド (処理) end end
これらを踏まえてtests_controller.rbを記述する
class TweetsController < ApplicationController def index @tweets = Tweet.all end def new @tweet = Tweet.new end def create Tweet.create(tweet_params) #tweet_paramsがストロングパラメータ。createメソッドの引数に使用し、プライベートメソッドのtweet_paramsを呼び出す。中身をtweetsテーブルに保存できるように設定。 end private def tweet_params #createメソッドの引数に指定しているため、tweet_paramsメソッドの処理が行われる params.require(:tweet).permit(:name, :image, :text) #行われる処理 end end
③create用のviewを作成
④バリデーションをかける
空のデータは登録できない、同じメールアドレスは登録できない、パスワードの文字数等、制限をつけることができる
validates :カラム名, バリデーションの種類
validates :name, presence: true #presence: trueでnameカラムが空でないかというバリデーションがかかり、登録にはnameカラムが空欄以外である必要がある
※バリデーションはモデルに記載する
app/models/tweet.rb
class Tweet < ApplicationRecord validates :text, presence: true end
アプリケーションのデータ保存(newアクション実装)
前回に続いて復習用に書きます。
今回は「投稿」を実装するための手順
まずはnewアクションの実装
【大まかな流れ】
投稿ページにアクセス → 投稿ページへ遷移する処理(newアクション) → 投稿 → テーブルへ投稿内容登録(createアクション)
【newアクションの設定】
①ルーティングの設定
Rails.application.routes.draw do root to: 'tweets#index' resources :tweets, only: [:index, :new] #:newを加えることで、/tweets/newにアクセスした際にtweetsコントローラーのnewアクションが実行される end
②コントローラーの設定
class TweetsController < ApplicationController def index @tweets = Tweet.all end def new @tweet = Tweet.new #@tweetのインスタンスを生成 end end
form_withを使用して投稿フォームを作成するときにモデルオプションを使用する
form_with model: @tweet, local: true, class: "form" do |form|
※model: @tweetの記述でurlの指定や、methodでHTTPメソッドの指定が不要になる
※form_withをhamlで使用する際にclass名の付与で少し悩んだので記述方法を残しておく
③viewの作成
MVCの復習(自分用)
アプリケーションの基盤を作るための操作手順を
復習できるように書き残しておきます🙇♂️
使用言語:ruby 使用フレームワーク:ruby on rails
【はじめに】
ターミナルにて、以下実行
新規アプリを-dオプションでMySQLの使用を明示して作成
% rails new アプリ名 -d mysql
作成したアプリのディレクトリに移動
% cd ディレクトリ名
⓪ DBの作成 コマンド:rails db: create
DBを作成。複数のデータ管理、データ検索、データ編集ができるようになる。
① モデルの作成 コマンド:rails g model モデル名(単数形)
DBとデータのやり取りをする。実際にDBからデータを引っ張ってくるのはモデルだと解釈。
例)model「データAがほしい」
DB「データAあげる」
※モデル名を複数形にしてしまう等、間違えた場合はrails d modelで削除できる。
※コマンドを実行すると
・db/migrateディレクトリに2020xxxxxxxx_create_モデル名複数形.rb
・app/modelsディレクトリにモデル名.rb
上記2つ(それ以外もあるが)が生成される。
② テーブル(DB内の情報を整理しておく場所)を作成するためのマイグレーションファイルの編集 コマンド:
db/migrateディレクトリの2020xxxxxxxx_create_モデル名複数形.rbを編集する。
このマイグレーションファイルがテーブルの「設計図」となり、テーブルはこの設計図をもとに作られる。
テーブルには「レコード」「カラム」があり、カラムに「何の情報」を「どんなタイプ」で入れるのかを設定する必要がある。
class CreateTweets < ActiveRecord::Migration[6.0] def change create_table : tweets do |t| t.string :name #t.カラムの型 :カラム名 t.string :text t.text :image t.timestamps end end end
カラムのタイプ(型)に関しては記述を割愛。
③ ルーティングの設定 コマンド:
configディレクトリのroutes.rbを編集(コントローラーのアクションを実行するため)
rootパスの設定
resourcesメソッドを使用すると、index,create,new,edit,show,update,destroy全てを設定可能
※不要なものを設定するとバグの原因になるため、onlyオプションを活用し必要なものを記述する
resourcesメソッドにシンボルを指定(:シンボル名)すると/シンボル名のパスに対応するルーティングが生成される
Rails.application.routes.draw do root "tweets#index" #ルートへアクセスした際にコントローラーのindexアクションを返す resources :tests, only: :index #indexアクションを実行 end
④ コントローラーの作成 コマンド:rails g コントローラー名(複数形)
※コントローラー名を間違えた、単数形にしてしまった等の場合rails d controllerで削除可能
⑤ コントローラーにアクションを定義
indexアクションを定義する場合
class TweetsController < ApplicationController def index @tweets = Tweet.all #@tweetsの変数にTweetモデルの情報を全て入れている end
❻-1 haml導入
https://github.com/haml/haml-rails
Gemfileにジェムを追加
bundle installを実行し適応
VScodeにBetterHamlを追加し拡張
railsの場合はrails newを実行時、.erbファイルが生成されているのでhamlファイルへ変換する コマンド:rails haml:erb2haml
コマンド実行時、Would you like to delete the original .erb files? (This is not recommended unless you are under version control.) (y/n)
と質問をされるので、.erbファイルが初期状態であれば「y」を選択して実行(.erbファイルをdeleteしてくれる)
※VScodeにBetterHaml拡張済み
application.html.hamlファイルの中身
!!! %html %head %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/ %title Pictweetorigin = csrf_meta_tags = csp_meta_tag = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %body = yield #各hamlファイルがyieldメソッドによって読み込まれるようになる
❻-2 sass(scss)を使用
app/assets/stylesheetsディレクトリのapplication.cssを削除し、application.scssを作成
読み込ませたいscssファイルを用意(ファイル名は_tweets.scssのようにアンダースコアを先頭につける)
application.scssに@import "tests";を記述(_tweets.scssを読み込むようになる)
※_reset.scssを別途用意し、application.scssに読み込ませておく
@import "reset"; @import "tweets";
※❻-1,❻-2の作業は必須ではない
⑥ viewの作成
views/コントローラー名と同名のディレクトリの中にコントローラーのアクションと対応したビューファイルを作成
例)indexアクションに対応したビューファイル
views/tweets/index.html.haml
あとは必要なコントローラーアクション、対応するビュー、ジェムetc...を加えていきながら作成していく
大まかな流れはこれであっているかな…
自分で色々確認しながらアプリ作ってみないと頭に入っていかなそうですね💧