MVCの復習（自分用） - noke

アプリケーションの基盤を作るための操作手順を

復習できるように書き残しておきます🙇‍♂️

使用言語:ruby 使用フレームワーク:ruby on rails

【はじめに】
ターミナルにて、以下実行

指定ディレクトリに移動
% cd ~/ディレクトリ名

新規アプリを-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...を加えていきながら作成していく

大まかな流れはこれであっているかな…
自分で色々確認しながらアプリ作ってみないと頭に入っていかなそうですね💧