投稿者: limer 日付: 2022年6月12日 コメント: コメントなし

サーバーを確認

サーバーに接続できるかチェックしてみましょう

ただいま急に確認するとエラーが出ます

config/environment/developmentファイルをこのように編集します

ファイルはここです

#  省略
  #この一文を追加
  config.hosts.clear
end

endの上に追加してください

ではサーバーを立ち上げましょう

ターミナルに

$ rails s

で起動します

そしてPreviewをクリックし、上から2番目をクリック

するとこのような画面が開くので画像の赤丸の部分をクリック

このような画面になればOKです

その際に下にRubyとRailsのバージョンも記載されています

設定したものとあっているかもここで確認

サーバーを切るときはターミナルで「ctrlキー」と「c」を同時に押してください

gemのインストール

づついてgemをインストールしていきます

今回はメモに画像を添付できるようにしたいのでそういうgemをインストールしましょう

gemファイルを開いてください

最後にこれを追加

gem 'carrierwave', '~> 1.3', '>= 1.3.1'

ターミナルでgemファイルを更新します

$ bundle

今は新たなgemを入れましたがRailsフォルダを作ったらとりあえず念の為

$ bundle

しておいてください

ER図の確認

ER図とはデータベースを作る際の設計図です

今回どのようなデータを格納するのか確認しておきましょう

id,created_at,updated_atは自動で生成されます

(  )の中はデータをどの型で保存するかを示しています

string型は文字列ですが255文字までの制限があります

text型は256文字以上が予想される時に使います

メモのタイトルはそこまで長くならないのでString

メモ内容は文字数が多くなると想定されるのでtext

気をつけてほしいのは画像を格納するときの型はStringです

Modelの作成

では次はModelを作ります

Modelでは先程確認したER図に沿って作っていきます

Modelはこのように作ります

$ rails g model Content

Model名は基本的に単数形で作ります

Enterを押して実行するとマイグレートファイルが作られます

db/migrateの中にあります

ここにどのようなデータを入れるかER図をもとに設定していきます

    create_table :contents do |t|
      # ここから
      t.string :title
      t.string :image
      t.text :body
      # ここまで追加
      t.timestamps
    end

それではこのModelをデータベースに反映させます

入力ミスが無いか確認してください

今だと修正は出来ます

ターミナルでこちらを打って反映

$ rails db:migrate

dbフォルダのschemaファイルを開いて正しく反映されているか確認してください

こうなってたらOK

 

必要なViewとControllerを確認

確認していきます

今回必要なViewは

  • index.html.erb(メモ一覧ページ)
  • new.html.erb(新規メモ作成ページ)
  • show.html.erb(メモ詳細ページ)
  • edit.html.erb(メモ編集ページ)

拡張子の「html.erb」はhtmlファイルの中でRubyを扱う時に使います

そして必要なControllerについて

Contentモデルのに紐づけて使います

名前はContentsとしましょう

ここはモデル名の複数形にすることが多いです

ではControllerを作っていきます

$ rails g controller Contents

これで実行してください

作成出来たらファイルを確認します

開いてそこにメソッドを書いていきます


class ContentsController < ApplicationController
  
  # index.htmlにメモ一覧を表示させるメソッド
  def index
  end

  # new.htmlで新規投稿する時に使うメソッド
  def new
  end
  
  # 投稿された内容を保存するメソッド
  def create
  end

  # show.htmlに投稿詳細を表示するメソッド
  def show
  end

  # edit.htmlで投稿を編集する時に使うメソッド
  def edit
  end
  
  # 編集された内容を保存するメソッド
  def update
  end
  
  # 投稿を削除する時に使うメソッド
  def destroy
  end
end

メソッドの役割もしっかりコメントしておきましょう

そしてindexメソッドに書かれた処理はindex.html.erbに反映されます

newメソッドはnew.html.erbに反映されます

create,update,destroyは保存、更新、削除を担当するメソッドです

特にViewは必要ありませんね

Viewを作る

それでは先程確認した４つのViewを作ります

ここに作って行きます

ここに右クリック、NewFileで

  • index.html.erb
  • new.html.erb
  • show.html.erb
  • edit.html.erb

を作りましょう

各ファイルにh1タグを入れます

indexなら<h1>メモ一覧</h1>

newなら<h1>新規作成</h1>

といった具合に入れてみてください

ルーティングの確認

今回はここまでです

あと一息頑張りましょう

ルーティングとは

index.html.erbやnew.html.erbに行くためのURLのようなものです

まずはルーティングを設定してどういうルーティングになったか確認しましょう

config/routes.rb

ここにこう記述


Rails.application.routes.draw do
   # これを追加
   resources :contents
end

これでルーティングの設定は終わり

これだけでコントローラのPathやViewのURLがしっかり設定されます

次はルーティングを確認します

サーバーを一度切ってもう一度立ち上げてください

そしてURLの最後に「/rails/info」を入力してください

このような画面になりましたね

では確認してみましょう

左がPath、真ん中がURL、右が対応してるContentsコントローラーのメソットです

新規画面(new.html.erb)に行くにはcontents#newの部分を確認します

URLは「contents/new」になってますね

では一旦ブラウザの戻るボタンを押してその後URLの最後に「contents/new」を追加しましょう

このような画面になれば成功です

先程のルーティングの画像は頻繁に確認しますのでメモやスクショなどで保存しておきましょう

続いてサーバーを立ち上げたときのこの画面

ここにアクセスした時にindex.html.erbが表示されるようにします

config/routes.rbを編集


Rails.application.routes.draw do
  # これを追加
  root "contents#index"
  resources :contents
end

サーバーを一旦切ってもう一度立ち上げます

こうなっていたら成功

今回はここまで

お疲れさまでした

絶対に挫折しないRailsアプリ制作03

コメントを残す

メールアドレスが公開されることはありません。

Rating

wp-puzzle.com logo