Skip to content

Latest commit

 

History

History
314 lines (191 loc) · 12.9 KB

CONTRIBUTING.md

File metadata and controls

314 lines (191 loc) · 12.9 KB

本プロジェクトへの参加方法・ガイドライン

本サービスの開発・運営には、皆さまのご協力が不可欠です。

また、GitやGitHubを利用した共同開発の経験を積むための場所にもしたいと考えています(可能な限りサポートいたします)。

本プロジェクトへの参加方法

なお、GitやGitHubの利用が困難な場合は、@KATO-HiroまでDMをお願いいたします。

開発環境

バックエンド

フロントエンド

  • 開発言語
  • JavaScriptのランタイム
  • 汎用フレームワーク
  • UIライブラリ
  • テスティングフレームワーク
    • Vitest: 単体テスト (ユーティリティ、コンポーネント)
    • Playwright: e2eテスト
    • Nock: API 統合テスト用の HTTP モック
  • 認証ライブラリ
  • ORM
  • バリデーション
  • パッケージマネージャ
  • 文法およびフォーマットチェッカー
    • ESLint
    • Prettier
    • lefthook: Git hooks 管理ツール（コミット前の自動フォーマット・リント）
  • Search Engine Optimization (SEO) 対策
    • Svelte Meta Tags: メタタグ、Open Graph などの設定
    • super-sitemap: SvelteKit 専用の sitemap ジェネレータ
    • robots.txt: Webクローラーのアクセス制御に関する設定

インフラ

エディタと拡張機能

ホスティング、CI・CD関連

プルリクエストの作成方法

GitHubアカウントを持っていない場合は?

有効なメールアドレス・ユーザ名・パスワードを用意して、アカウントの登録とGitHubでssh接続をしましょう

(初回のみ) 本レポジトリの内容をローカル環境にダウンロード

  1. AtCoder NoviStepsにメンバー申請をします。@KATO-HiroにDMなどでご連絡いただければ、GitHubで登録しているメールアドレスに招待メールが届きますので、承認してください。

  2. ターミナルなどを利用して、本レポジトリの内容をローカル環境にダウンロードします。

    git clone https://github.com/AtCoder-NoviSteps/AtCoderNoviSteps.git

  3. 作業ディレクトリをAtCoderNovistepsに変更します。

  4. 本レポジトリの最新情報を反映できるように、ご自身のリモートレポジトリに登録します。git remote -vで登録状況を確認できます。

    git remote add root_branch https://github.com/AtCoder-NoviSteps/AtCoderNoviSteps.git

(共通、Dockerのみ利用するユーザ向け) 開発環境のインストールとローカルの開発サーバを起動

手順

  • Docker Composeのバージョンを確認します (動作チェックも兼ねています)。

    docker compose --version

  • コンテナの利用状況を確認します。

    docker compose ps

  • もしコンテナが起動している場合は、一度停止させます。

    docker compose down

  • コンテナを起動し、webコンテナとdbコンテナが起動しているか確認します。

    docker compose up -d

    docker compose ps

  • 関連するパッケージのインストールとDBの初期設定を行います。

    docker compose exec web pnpm install

    docker compose exec web pnpm exec playwright install

    docker compose exec web pnpm exec playwright install-deps

    docker compose exec -e DATABASE_URL=postgresql://db_user:db_password@db:5432/test_db?pgbouncer=true&connection_limit=10&connect_timeout=60&statement_timeout=60000 -e DIRECT_URL=postgresql://db_user:db_password@db:5432/test_db web pnpm prisma db push

    docker compose exec web pnpm prisma generate

  • 開発サーバ(port番号: 5174)を起動します。その後、以下のリンクを順番にクリックしてください。

    • Note: リンクのアドレス・ポート番号は、環境によって変わる可能性もあります。

    docker compose exec web pnpm dev --host

    http://localhost:5174/

  • ホーム画面が起動し、ユーザの登録・ログインができれば、環境構築は完了です。

  • Note: 後述の「(共通) ローカルの開発サーバを起動」の操作を実行したい場合は、該当コマンドの前にdocker compose exec web を追加してください。

(共通) 開発環境のインストール

ローカルサーバを起動するための準備をします。公式ドキュメントも併せてご参照ください。

  1. DockerとVS Codeを起動します。
  2. コマンドパレットから、**Dev Containers: Open Folder in Container...**を選択し、AtCoderNovistepsフォルダを開きます。
    • Mac: Cmd + Shift + P
    • Windows: Ctrl + Shift + P
  3. ローカルサーバを動作させるために必要な環境が自動的に構築され、VS Codeの拡張機能もインストールされます。

(共通) ローカルの開発サーバを起動

  • 新しいターミナルを開いてください。

  • 依存関係にあるライブラリのインストールとデータベースの初期化を行い、開発サーバを起動します。

    pnpm install

    pnpm exec playwright install

    pnpm exec playwright install-deps

    pnpm exec prisma db push

    pnpm dev

  • 以下のリンクをクリックしてください。

    http://localhost:5174/

  • また、開発サーバの起動と同時に新しいブラウザタブでアプリを開くこともできます。

    pnpm dev --open

  • 先ほどとは異なるターミナルで以下のコマンドをそれぞれ実行すると、データベースの初期データ投入やローカル環境でのテーブル・サンプルデータが閲覧できます。

    pnpm db:seed

    sh -lc "pkill -f 'prisma.*studio' || true"

    pnpm db:studio --port 5555

  • 以下のリンクをクリックしてください。

    http://localhost:5555/

(共通) ソースコードやドキュメントの加筆・修正

注: 2024年4月以降、ブランチを以下のように分けています。

staging : 開発・運営チームの検証用環境です(デフォルトブランチ)。

main: 一般公開用の環境です。バグの修正のような緊急性の高い作業ときのみ指定します。

本レポジトリの最新の状態を反映させる方法

  1. 本レポジトリの最新の内容を取得します。

    git fetch root_branch

  2. 取得した内容をご自身のローカル上のブランチにマージします。stagingの部分を変えれば、別のブランチにすることも可能です。

    git merge root_branch/staging

  3. ご自身のリモートブランチを更新します。

    git push origin staging

作業用のブランチ作成からプルリクエスト作成まで

  1. 作業用のブランチを作成します。

    git checkout -b <your-new-branch-for-working> origin/staging

    例: GitHubのIssue番号や機能名・ドキュメントやバグの種類などを表すキーワードを使います。

    git checkout -b "#998244353" origin/staging

    git checkout -b "feature/feature-name" origin/staging

    git checkout -b "docs/docs-name" origin/staging

    git checkout -b "bugfix/bug-name" origin/staging

  2. ソースコードやドキュメントの加筆・修正を行います。以下のコマンドを実行し、アプリが意図した通りに動作するか確認してください。

  • 本レポジトリの最新の状態を取り込み、開発サーバが起動するか確認

    git pull origin staging

    pnpm install

    pnpm dev

  • 文法・フォーマットの確認および自動修正

    pnpm lint

    pnpm format

  • アプリの製品バージョンの作成と動作確認

    pnpm build

    pnpm preview

  1. 2.の内容をレポジトリに反映します。コミットメッセージは、加筆・修正した内容を端的に表したものであることが望ましいです。

    git add .

    git commit -m "your-commit-message (#IssueID)"

    例:

    git commit -m "feat: Add new feature (#998244353)"

    git commit -m "docs: Update README (#1333)"

    git commit -m "chore: Fix typo (#10007)"

  2. プルリクエストを作成する前に、加筆・修正した内容を確認します。

    git diff origin <your-current-branch>

  3. 本レポジトリに更新内容を反映させます。

    git push origin <your-current-branch>

  4. プルリクエストを作成します。

Git Hooks（フォーマット・リント）

本プロジェクトでは、lefthookを使用して、コミット前に自動的にコードの書式チェック・フォーマットを行います。

  • Pre-commit Hook: ステージ済みファイルのみに対して以下を実行
    • prettier --write: コード書式の自動修正（JavaScript、TypeScript、Markdown、Svelte）
    • eslint: リント（JavaScript、TypeScript、Svelte）

Hook は自動的にセットアップされるため、特別な操作は不要です。

Hook を実行したくない場合

環境変数 LEFTHOOK=0 を設定して commit してください。

LEFTHOOK=0 git commit -m "コミットメッセージ"

(既存ユーザ向け) husky から lefthook への移行

husky でセットアップ済みの開発環境で新しい PR をマージした場合、以下を実行してください：

git config --unset core.hooksPath
pnpm exec lefthook install

これにより、古い husky の設定をクリアして lefthook に切り替わります。

トラブルシューティング

  • エラー: ローカル環境で開発用サーバを立ち上げても、ブラウザに表示されない

  • エラー: Docker Desktop で Vite を利用したときに Segmentation Fault が発生