Ruby on Rails 入門：初心者向けガイド

Ruby on Rails（以下Rails）は、Webアプリケーション開発のためのフレームワークです。シンプルな構文のRuby言語を活用し、迅速にアプリケーションを開発できるため、初心者から経験者まで広く愛用されています。本記事では、Railsの基本と環境構築、簡単なアプリ作成の流れを解説します。

まずは下記記事を参考にRailsの開発環境を構築してみましょう！

📄DockerでRails環境を構築する手順

[目次を開く]

Ruby on Railsとは？ Railsの特徴 Railsのディレクトリ構成各ディレクトリの説明 app/ bin/ config/ db/ lib/ log/ public/ storage/ test/ または spec/ tmp/ vendor/ ハンズオンビューを編集してみよう！ 1. アプリケーションのセットアップ 2. ビューの編集ビューのファイルの場所現在の内容を確認するビューのカスタマイズ 3. サーバーの起動と動作確認 4. ビューのレイアウトを改善まとめ

Ruby on Railsとは？

Railsは、Ruby言語で開発されたオープンソースのWebアプリケーションフレームワークです。

「MVC（Model-View-Controller）」という設計パターンを採用し、コードの分離がしやすく、保守性が高いのが特徴です。

Railsの特徴

✅ DRY（Don’t Repeat Yourself）：同じコードを何度も書かない設計

✅ CoC（Convention over Configuration）：設定不要でデフォルトのルールに従うだけで開発可能

✅ 強力なジェネレーター：Railsコマンドを使って、コードのひな型を自動生成

MVCモデルについては下記の記事を参照してください。

📄MVCモデルとは？Web開発における基本設計パターンを解説！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/`

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

`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のディレクトリ構成です。

ハンズオン

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

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

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

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>

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

まとめ

Ruby on Railsは、日本で人気のある協力なWeb開発用のフレームワークです。この記事で基礎をみにつけて、ぜひ、ご自身の開発に取り入れてみてください。

アルアカ - Arcadia Academia