アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

Ruby on Rails 入門

Featured image of the post

Ruby on Rails入門用のドキュメントです。

Railsのディレクトリ構成

Railsのディレクトリ構成は、アプリケーションのMVC(モデル、ビュー、コントローラ)パターンに従って整理されています。

以下に、典型的なRailsプロジェクトのディレクトリ構成を示します。


my_rails_app/
├── app/
│   ├── assets/
│   │   ├── config/
│   │   ├── images/
│   │   ├── javascript/
│   │   └── stylesheets/
│   ├── controllers/
│   ├── helpers/
│   ├── mailers/
│   ├── models/
│   ├── views/
│   ├── channels/
│   ├── jobs/
│   └── services/
├── bin/
├── config/
│   ├── environments/
│   ├── initializers/
│   ├── locales/
│   └── credentials.yml.enc
├── db/
│   ├── migrate/
│   ├── schema.rb
│   └── seeds.rb
├── lib/
│   ├── assets/
│   └── tasks/
├── log/
├── public/
├── storage/
├── test/ or spec/
├── tmp/
└── vendor/

各ディレクトリの説明
app/

Railsアプリケーションの主なコードが格納されるディレクトリ。

  • assets/: JavaScript、CSS、画像などのアセットファイルを格納。
  • controllers/: アプリケーションのコントローラファイルを格納。
  • helpers/: ビューヘルパーモジュールを格納。
  • mailers/: アプリケーションのメール送信機能を格納。
  • models/: アプリケーションのモデルファイルを格納。
  • views/: アプリケーションのビュー(テンプレート)ファイルを格納。
  • channels/: Action Cable(WebSocket)のチャンネルファイルを格納。
  • jobs/: Active Jobのジョブクラスを格納。
  • services/: サービスオブジェクトを格納。
bin/

アプリケーションの起動スクリプトを格納。railsrakeなどのスクリプトが含まれる。

config/

アプリケーションの設定ファイルを格納。

  • environments/: 環境ごとの設定ファイル(development、production、test)。
  • initializers/: アプリケーションの初期化設定ファイル。
  • locales/: 国際化対応の翻訳ファイル。
db/

データベースに関するファイルを格納。

  • migrate/: データベースマイグレーションファイル。
  • schema.rb: データベースのスキーマ情報。
  • seeds.rb: データベースのシードデータ。
lib/

ライブラリコードを格納。

  • assets/: アセット関連の追加ライブラリ。
  • tasks/: Rakeタスクファイル。
log/

アプリケーションのログファイルを格納。

public/

静的ファイルを格納。ここに置いたファイルは直接ブラウザからアクセス可能。

storage/

Active Storageのファイルを格納。

test/ または spec/

テストコードを格納。デフォルトではtest/だが、RSpecを使用する場合はspec/になる。

tmp/

一時ファイルを格納。

vendor/

サードパーティのコードやプラグインを格納。

これが基本的なRailsのディレクトリ構成です。

MVCモデルとは

MVC(Model-View-Controller)モデルは、ソフトウェア設計パターンの一つで、特にWebアプリケーションの開発で広く用いられています。MVCパターンは、アプリケーションを3つの主要なコンポーネントに分割することで、コードの再利用性や保守性を高めることを目的としています。それぞれのコンポーネントは以下のような役割を持ちます。

1. Model(モデル)

役割:

  • データとビジネスロジックを管理します。
  • データベースへのアクセス、データの保存、更新、削除などの操作を行います。
  • データの検証やデータベースとの通信を担当します。

:

  • ユーザー情報を管理するUserモデル
  • 記事情報を管理するArticleモデル

class User < ApplicationRecord
  # バリデーション
  validates :name, presence: true
  validates :email, presence: true, uniqueness: true

  # 関連
  has_many :articles
end

2. View(ビュー)

役割:

  • ユーザーにデータを表示するためのテンプレートを担当します。
  • HTML、CSS、JavaScriptなどを使用して、ユーザーインターフェースを構築します。
  • コントローラから受け取ったデータを利用して、最終的な出力を生成します。

:

  • ユーザー情報を表示するためのERBテンプレート
  • 記事一覧を表示するためのHTMLファイル

<!-- app/views/users/show.html.erb -->
<h1><%= @user.name %></h1>
<p>Email: <%= @user.email %></p>

3. Controller(コントローラ)

役割:

  • ユーザーからの入力を処理し、適切なモデルを呼び出してデータを取得・操作し、その結果をビューに渡します。
  • ユーザーのリクエストに応じて、適切なレスポンスを返します。
  • URLのルーティングを処理し、どのコントローラがどのアクションを実行するかを決定します。

:

  • ユーザー情報を表示するためのUsersController
  • 記事を管理するためのArticlesController

class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    # @userオブジェクトをビューに渡す
  end
end

MVCモデルの動作の流れ
  1. ユーザーリクエスト:
    • ユーザーがブラウザでURLを入力したり、リンクをクリックしたりして、リクエストを送信します。
  2. ルーティング:
    • リクエストがルーティングによって適切なコントローラとアクションに振り分けられます。
  3. コントローラ:
    • コントローラがリクエストを受け取り、必要なデータをモデルから取得します。
  4. モデル:
    • モデルがデータベースにアクセスし、データを取得または操作します。
  5. コントローラ:
    • モデルから取得したデータをコントローラが受け取り、それをビューに渡します。
  6. ビュー:
    • ビューがコントローラから受け取ったデータを使ってHTMLを生成し、ユーザーに表示します。

このように、MVCモデルは役割ごとにコードを分割することで、コードの見通しを良くし、保守性を向上させることができます。質問があれば、さらに詳しく解説しますので教えてください。

ハンズオン

ビューを編集してみよう!

具体的な例として、ユーザーのプロフィールページを作成および編集する流れを紹介します。

1. アプリケーションのセットアップ

📄Arrow icon of a page linkDockerでRails環境を構築する手順

開発環境の構築は上記のリンクを参照してください。

Railsが動作しているコンテナのshellで以下のコマンドを実行してください。

rails generate scaffold User name:string email:string
rails db:migrate

次にDBにサンプルのデータを登録します。

db/seeds.rb


User.create([
  { name: 'Alice', email: 'alice@example.com' },
  { name: 'Bob', email: 'bob@example.com' },
  { name: 'Charlie', email: 'charlie@example.com' }
])

と入力しrails db:seed を実行します。

2. ビューの編集

生成されたユーザーのプロフィールページを編集します。以下は、ユーザーの詳細ページ (show アクション) をカスタマイズする例です。

ビューのファイルの場所

app/views/users/show.html.erb

現在の内容を確認する

まず、生成された show.html.erb ファイルの内容を確認します。デフォルトでは以下のような内容になっているはずです:


<p>
  <strong>Name:</strong>
  <%= @user.name %>
</p>

<p>
  <strong>Email:</strong>
  <%= @user.email %>
</p>

<%= link_to 'Edit', edit_user_path(@user) %> |
<%= link_to 'Back', users_path %>

ビューのカスタマイズ

この show.html.erb をカスタマイズしユーザープロフィールページを作成します。例えば、以下のように編集します:


<div class="user-profile">
  <h1><%= @user.name %>'s Profile</h1>

  <div class="user-details">
    <p>
      <strong>Name:</strong>
      <%= @user.name %>
    </p>

    <p>
      <strong>Email:</strong>
      <%= @user.email %>
    </p>
  </div>

  <div class="user-actions">
    <%= link_to 'Edit Profile', edit_user_path(@user), class: 'btn btn-primary' %>
    <%= link_to 'Back to Users', users_path, class: 'btn btn-secondary' %>
  </div>
</div>

<style>
  .user-profile {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
  }

  .user-details {
    margin-bottom: 20px;
  }

  .user-actions .btn {
    margin-right: 10px;
  }
</style>

3. サーバーの起動と動作確認

Railsサーバーを起動して、変更内容をブラウザで確認します。

rails server

ブラウザで http://localhost:3000/users/1 にアクセスすると、カスタマイズされたユーザープロフィールページが表示されます。Dockerの場合はRaildが動作しているポート番号を確認しURLを修正してください。

4. ビューのレイアウトを改善

さらに、アプリケーション全体のレイアウトを改善するために、共通のレイアウトファイルも編集できます。例えば、app/views/layouts/application.html.erb を以下のように編集します:


<!DOCTYPE html>
<html>
  <head>
    <title>MyRailsApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <header>
      <nav>
        <%= link_to 'Users', users_path %>
      </nav>
    </header>

    <main>
      <%= yield %>
    </main>

    <footer>
      <p>&copy; 2024 MyRailsApp</p>
    </footer>
  </body>
</html>

これで、ナビゲーションバーとフッターが追加されます。



▼ 目次