1. Runbookデモ
  2. マニュアルのサンプル
  3. 開発規約
マニュアルのサンプル/

開発規約

qloba（内部モジュール名: Pizzicato）の開発を行う際に守るべき規約をまとめます。新しくプロジェクトに参加した場合は、まずこの記事を通読してください。

技術スタック

分類

採用技術

言語

Ruby 4.0.6

フレームワーク

Rails 8.1 系

データベース

MySQL 8.0 / セッションは DynamoDB

フロントエンド

Shakapacker 10（webpack）+ React 19

スタイル

Tailwind CSS 4（プレフィックス tw:）+ Bootstrap Sass

非同期処理

Sidekiq / Shoryuken（AWS SQS）

認証・決済

Devise / Stripe

パッケージ管理

pnpm

開発環境

Docker で起動する

開発・テストは原則として Docker 上で行います。ホスト側の Ruby や Node を直接使わないでください。

docker-compose up -d
docker-compose exec rails <コマンド>

サービス名は rails（web ではありません）、その他に db（MySQL）と dynamodb があります。

アクセス URL

開発環境は localhost ではなく qloba-local.com 系のホスト名でアクセスします。Rails サーバーは HTTPS（443番ポート）で起動し、rails/cert/ の自己署名証明書を使用します。

ブランチとコミット

ブランチ運用

  • ブランチ名は feature-<Issue番号>/<概要> または bug-<Issue番号> の形式にします。
  • 作業ブランチは開発中のリリースブランチ（例: v5.0）から作成し、同じブランチへ Pull Request を出します。
  • master へ直接コミットしないでください。

コミットメッセージ

  • 先頭に対応する Issue 番号を #216 の形式で書きます。
  • 本文は日本語で、「何を変更したか」が一文で分かるように書きます。
#216 エディタを開いたときの自動フォーカスと折りたたみのちらつきを修正

コーディング規約

共通

  • コード中のコメントはすべて英語で記述します。（記事・ドキュメント・コミットメッセージは日本語）
  • インデントは半角スペース 2 個、タブは使用しません。
  • 文字列はシングルクォートを優先し、末尾カンマ（trailing comma）を付けます。
  • 整形は Prettier に任せます。
npx prettier --write "**/*.{rb,js,jsx}"

Ruby / Rails

RuboCop の設定は rails/.rubocop.yml にあります。主なルールは次のとおりです。

項目

規約

Layout 系

Prettier に任せるため無効（行長のみ有効）

メソッド長

40 行まで（マイグレーションは除外）

AbcSize

30 まで

循環的複雑度

10 まで

別名定義

alias ではなく alias_method

例外

独自例外は StandardError を継承

find / reduce

detect / inject を使う

  • API コントローラーは Api::ApplicationController を継承し、ビューは Jbuilder テンプレート（app/views/api/**/*.json.jbuilder）で返します。
  • リクエストパラメーターの検証は ScalarParams concern で集約しています。個別の params.permit を増やさないでください。
  • ほとんどの機能はプロジェクト単位にスコープされます。サブドメイン制約（lib/subdomain.rb）と authenticate_user! の組み合わせを踏襲してください。

JavaScript / React

ESLint（Flat Config、rails/eslint.config.js）でチェックします。

docker-compose exec rails npm run lint
  • JSX は .js ファイルに書きます（.jsx も設定上は対象です）。
  • エントリーポイントは app/javascript/packs/、React コンポーネントは app/javascript/components/ に置きます。
  • Prettier と競合する整形ルールは ESLint エラーとして報告されます。lint が通らないコードはマージできません。

CSS / Tailwind

  • Tailwind は v4 を使用し、すべてのユーティリティクラスに tw: プレフィックスが必要です（例: tw:flex tw:items-center）。
  • 設定は app/javascript/stylesheets/application.css の @theme が主体で、tailwind.config.js の safelist や variants は v4 では無視されます。
  • 記事本文の HTML はサニタイザーを通ります。style 属性や b / i タグは除去されるため、装飾は必ず class ベースで出力してください。

テスト

RSpec + FactoryBot を使用します。

docker-compose exec rails bundle exec rspec
docker-compose exec rails bundle exec rspec spec/models/project_spec.rb
docker-compose exec rails bundle exec rspec spec/models/project_spec.rb:42
  • テストは spec/models/、spec/requests/、spec/jobs/ などに配置します。
  • ファクトリーは spec/factories/ に定義し、フィクスチャーの直接編集は行いません。
  • モデルのテストには Shoulda Matchers を利用できます。

国際化

  • デフォルトロケールは日本語（:ja）、対応ロケールは :ja と :en です。
  • 画面に表示する文字列はハードコードせず、必ずロケールファイルに定義します。
  • JavaScript からは i18n-js でエクスポートされた辞書を参照します。
  • 固有名詞（都道府県名など、翻訳すると意味が変わるもの）は翻訳対象にしません。

レビュー

  • Pull Request には対応する Issue 番号を記載します。
  • レビュー指摘の修正コミットは、「保存データに影響するもの」と「軽微なもの」を分けると差し戻しの影響範囲が把握しやすくなります。
  • マージ前に、lint（npm run lint）と RSpec がグリーンであることを確認してください。
最終更新:
Runbookデモ
マニュアルのサンプル
カテゴリー１
カテゴリー２
カテゴリー３