Rails newしたらなんかファイルできてた!!
早速ですがこのファイルの意味をそれぞれ理解できていますか?
私がRails初学者の時はrails new
をターミナルに打ち込んだ瞬間に思考停止してしまいました。
しかし、これらはなんら難しいものではありません。
まずは広く浅い知識をつけて今後の学習をより楽しくしていくための基礎知識を学んで行きましょう!
よく使う「ファイルorディレクトリ」一覧
※このファイルで大体の作業ができます。
- app(MVCとか色々入ってる)
- assets
(見た目css
や非同期js
) - controller
(アクションdef index
とインスタンス変数@user
) - helpers
(controllerやmodleに書きたくないもの) - models
(DBとの処理def befor_time
やアソシエーションhas_many
) - views
(構造と文章html
)
- assets
- config (設定)
- routes.rb
(ルーティングrake routes
で見れるやつ)
- routes.rb
- db (データベース)
- migrate
(rails g migration
でDBを作成するファイル) - schema.rb
(作成・編集したDBの状態をみれる)
- migrate
- Gemfile
(Railsの拡張機能) - Gemfile.lock
(ダウンロードしたgemの詳細) - README.md
(説明書)
app(アプリケーション中核)
いわゆる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に変数の値を渡すことができるのです!
なお、private
とparams
については重要だけど今回は割愛!
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