高卒クズ男の再興戦略

高卒クズ男こと堀川登喜矢がエンジニア転職を皮切りにクズ脱却を目指すブログです。

Rails初学者のための「このファイルなに?」をざっくり解説!!

Rails newしたらなんかファイルできてた!!

早速ですがこのファイルの意味をそれぞれ理解できていますか?

f:id:xmobile:20180312224644p:plain:w150

私がRails初学者の時はrails newをターミナルに打ち込んだ瞬間に思考停止してしまいました。

しかし、これらはなんら難しいものではありません。
まずは広く浅い知識をつけて今後の学習をより楽しくしていくための基礎知識を学んで行きましょう!

よく使う「ファイルorディレクトリ」一覧

※このファイルで大体の作業ができます。

  • appMVCとか色々入ってる)
    • assets
      (見た目cssや非同期js
    • controller
      (アクションdef indexインスタンス変数@user
    • helpers
      (controllerやmodleに書きたくないもの)
    • models
      (DBとの処理def befor_timeやアソシエーションhas_many
    • views
      (構造と文章html
  • config (設定)
    • routes.rb
      (ルーティングrake routesで見れるやつ)
  • db (データベース)
    • migrate
      rails g migrationでDBを作成するファイル)
    • schema.rb
      (作成・編集したDBの状態をみれる)
  • Gemfile
    Rails拡張機能
  • Gemfile.lock
    (ダウンロードしたgemの詳細)
  • README.md
    (説明書)

app(アプリケーション中核)

f:id:xmobile:20180312232931p:plain:w200

いわゆるMVCが詰まったディレクトリです。かなりの頻度でこの中のどれかを使ってアプリケーションを作成していくこととなります。

viewsディレクト

その中でもHTMLが書かれたviewsファイルは初心者でもとっつき易いのではないでしょうか?

特にRailsではlayouts以下のapplication.html.erbの様な大元 のファイルが用意されているので共通部分はここで定義します。

また、application.html.erbを大枠として<%= yield %>を用いて以下にそれぞれのhtmlが埋め込まれる形になります。

<!DOCTYPE html>
<html>
  <head>
    <title>テストです</title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  </head>
  <body>
    <header class="header">
      <h1>テスト</h1>
    </header>

    <%= yield %><!-- ここに埋め込むファイルが入る-->

    <footer>
      <p>フッターです</p>
    </footer>
  </body>
</html>

assetsディレクト

みなさん大好き「見た目」と「非同期動作」です! ここではデザイナーさんやフロントエンドの方々が驚異の力を発揮します!たかがcssやjsくらいとなめてかかると痛い目を見ることでしょう(笑)

見た目のcssでは色や大きさといった指定ができます。

body {
  height: 200px;
  width: 120px;
  margin: 0 auto;
}

.header {
  height: 120px;
}

h1 {
  font-size: 16px;
  color: #ddd;
}

fotter {
  font-size: 11px;
  color: #fff;
}

そして非同期動作のJavaScliptでは最近流行りのぬるぬる動くあんなことやこんなことまでできます。(割愛)

$(function() {
  function buildHTML(comment){
    var html = `<p>
                  <strong>
                    <a href=${comment.id}>${comment.user_name}</a>
                    :
                  </strong>
                  ${comment.text}
                </p>`
    return html;
  }
  $('#new_comment').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).atter('action')
    $.ajax({
      url: url,
      type: 'POST',
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false;
    })
    .done(fnction(data) {
      var html = buildHTM(data);
      $('.comments').append(html)
      $('.textbox').val('')
    })
    .fail(function() {
      alert('error');
    })
  });
});

controllersディレクト

ここでルーティングに従ったアクション(def indexなど)を定義することで、そのアクション名に対応したviewsファイルでインスタンス変数(@testsなど)を呼び出すことができ、htmlに変数の値を渡すことができるのです!

なお、privateparamsについては重要だけど今回は割愛!

class TestsController < ApplicationController
 //トップ
  def index
    @tests = Test.includes(:user).order("created_at DESC").page(params[:page]).per(5)
  end
 
  def new
  end
  //データをcreateする
  def create
    Test.create(fp[image: test_params[:image], text: tests_params[:text], user_id: current_user.id)
  end
  //データを消す
  def destroy
    test = Test.find(params[:id])
    test.destroy if test.user_id == current_user.id
  end

  //ここ以下はプライベートメソッド(外からは呼び出せない)
  private
  // viewsから取得したparamsを正しい形で取得する。
  def tweets_params
    params.permit(:image, :text)
  end
end

modelsディレクト

アプリケーションとデータベースを繋ぐ役割を持っています。そのためDBのテーブル同士の関係を繋ぐアソシエーション(1対多の関係など)もここで定義します。

そのほか、DBに密接し様々な場面で用いるメソッドもmodelsで定義します。今回はタグ付けと検索機能をmodelsで定義している例です。

class Test < ApplicationRecord

  has_many :test, dependent: :destroy
  belongs_to :user
 
  # タグ付け
  acts_as_taggable

  # 検索機能
  def self.search(key)
    if key
      Test.where(['test LIKE ?', "%#{key}%"])
    else
      Test.all
    end
  end

end

route.rbファイル

ここではパスを定義している訳なのですが、連動してcontrollerのアクションやviewsを定義していると考えると楽です!

そしてRailsさんはresourcesというエンジニアをダメにするツールを備え付けてくれているので楽々ですよね!でも一応Pathは自分で書ける様になっておいてくださいね〜

Rails.application.routes.draw do
  // deviseはログイン確認時に一番先に読まれるから一番上に書いとけ!
  devise_for :users
  root 'tests#index'
  resources :tests do
    resources :comments, only: [:create]
  end
  resources :users, only: [:show]
end

migrateディレクト

データベースのテーブル作りのためのファイルです!すごく奥が深く私も「設計」のをまだ修めていないので思った様に書いていますが本来はユーザーからどの様な値を与えられるかを考えて堅牢で正確なシステムを作る要となります。

「エンジニアのやらかしは大体データベース!!」

              某PHPエンジニア様より

class CreateTests < ActiveRecord::Migration
  def change
    create_table :tests do |t|
      t.string    :name
      t.text      :text
      t.text      :image
      t.timestamps
    end
  end
end