Open9

Re1999コミュニティサイトを作ろう

Nakajima.jsNakajima.js

経緯

最近日本の攻略サイトが更新を辞めたりして情報の停滞を感じている中、動画投稿者などは攻略情報を発信しているので、その熱を絶やさないためのコミュニティーサイトの構築を行いたいと考えました。

主に攻略wikiをメインに、攻略情報などの更新は自分が動画投稿や既存のwikiを参照して更新していきたい

ゆくゆくはDiscord鯖を立てて攻略班を作成してコンテンツを活性化していきたい

Nakajima.jsNakajima.js

技術一覧

ライブラリ名 バージョン
nuxt ^3.15.1
vue latest
vue-router latest
Nakajima.jsNakajima.js

GitHub設定あれこれ

Gitフローをシステムで制限したりする
コミュニティ活性化を目的にしているので今後自分1人だけで開発とは限らないため初期のタイミングで法整備を行っておく

mainリポジトリに直接pushすることを禁止する

CodeRabbitを導入するのでmainに直接pushしてしまっては意味がなくなってしまうため

https://zenn.dev/json_hardcoder/articles/f9b534377103a4

ターゲットはmainに設定

設定項目はこんな感じ

Require a pull request before mergingに追加の設定をする項目があるがいじらずにしておく

ブランチの命名規則

GitHubのissueからブランチを作成
issueを立ち上げてから作業を基本行なっていく
ブランチ名は日本語になっていても問題ないとする
作業ブランチの切り替えのコマンドも生成してくれるので楽

issueのテンプレート

  1. バグ報告 (Bug Report):
    • ソフトウェアの不具合や予期しない動作を報告するためのテンプレートです。再現手順、期待される結果、実際の結果、環境情報などを含めると良いでしょう
bug_report
---
name: バグ報告
about: バグを報告してプロジェクトの改善に貢献する
title: "[BUG] バグの簡単な説明"
labels: bug
assignees: ''

---

**バグの説明**
バグが何であるかを明確かつ簡潔に説明してください。

**再現手順**
バグを再現するための手順を記載してください:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

**期待される動作**
期待される動作を明確かつ簡潔に説明してください。

**スクリーンショット**
可能であれば、問題を説明するのに役立つスクリーンショットを追加してください。

**デスクトップ (以下の情報を記入してください):**
 - OS: [e.g. Windows, macOS]
 - ブラウザ [e.g. Chrome, Safari]
 - バージョン [e.g. 22]

**スマートフォン (以下の情報を記入してください):**
 - デバイス: [e.g. iPhone6]
 - OS: [e.g. iOS8.1]
 - ブラウザ [e.g. stock browser, safari]
 - バージョン [e.g. 22]

**追加のコンテキスト**
ここに問題に関する他のコンテキストを追加してください。
  1. 機能リクエスト (Feature Request):
    • 新しい機能や改善を提案するためのテンプレートです。提案の詳細、利点、関連するスクリーンショットやモックアップを含めることができます
feature_request
---
name: 機能リクエスト
about: 新しい機能の提案
title: "[FEATURE] 機能の簡単な説明"
labels: enhancement
assignees: ''

---

**機能の説明**
提案する機能が何であるかを明確かつ簡潔に説明してください。

**動機**
この機能がなぜ必要か、どのように役立つかを説明してください。

**提案する解決策**
機能の実装方法についてのアイデアがあれば記載してください。

**代替案**
考えられる代替案や機能について記載してください。

**追加のコンテキスト**
ここに機能に関する他のコンテキストやスクリーンショットを追加してください。

  1. 質問 (Question):
    • プロジェクトに関する質問やサポートを求めるためのテンプレートです。具体的な質問内容や関連する背景情報を記載します
question
---
name: 質問
about: プロジェクトに関する質問
title: "[QUESTION] 質問の簡単な説明"
labels: question
assignees: ''

---

**質問の内容**
質問を明確かつ簡潔に説明してください。

**関連する背景情報**
質問に関連する背景情報や試したことを記載してください。

**追加のコンテキスト**
ここに質問に関する他のコンテキストを追加してください。

  1. ドキュメント改善 (Documentation Improvement):
    • ドキュメントの誤りや改善点を報告するためのテンプレートです。具体的な改善提案や誤りの詳細を含めます
documentation_improvement
---
name: ドキュメント改善
about: ドキュメントの誤りや改善点を報告する
title: "[DOCS] ドキュメントの簡単な説明"
labels: documentation
assignees: ''

---

**改善の説明**
改善が必要なドキュメントの部分を明確かつ簡潔に説明してください。

**提案する変更**
提案する具体的な変更内容を記載してください。

**関連するドキュメント**
関連するドキュメントやページへのリンクを記載してください。

**追加のコンテキスト**
ここに改善に関する他のコンテキストを追加してください。

  1. タスク (Task):
    • プロジェクト内の特定のタスクや作業項目を追跡するためのテンプレートです。タスクの詳細、目的、期限などを記載します。
task
---
name: タスク
about: プロジェクト内の特定のタスクや作業項目を追跡する
title: "[TASK] タスクの簡単な説明"
labels: task
assignees: ''

---

**タスクの説明**
タスクが何であるかを明確かつ簡潔に説明してください。

**目的**
このタスクの目的や達成したい結果を記載してください。

**作業項目**
- [ ] 作業項目1
- [ ] 作業項目2
- [ ] 作業項目3

**期限**
このタスクの完了期限を記載してください。

**追加のコンテキスト**
ここにタスクに関する他のコンテキストや関連情報を追加してください。

Nakajima.jsNakajima.js

CodeRabbit導入

※既に住み着いているのだが、設定ファイルを書いていないのでちゃんと小屋を用意してあげる

設定の詳細は下記を参照
https://zenn.dev/shunsuke_stack/articles/aaef31597a9c05

設定ファイルの詳細

code-rabbit.yaml
name: CodeRabbit

permissions:
  contents: read
  pull-requests: write

on:
  pull_request:
    types: [opened]
    branches-ignore:
      - master
      - main
  pull_request_review_comment:
    types: [created]
  issue_comment:
    types: [created]

concurrency:
  group: ${{ github.repository }}-${{ github.event.number || github.head_ref || github.sha }}-${{ github.workflow }}-${{ github.event_name == 'pull_request_review_comment' && 'pr_comment' || 'pr' }}
  cancel-in-progress: ${{ github.event_name != 'pull_request_review_comment' }}

jobs:
  review:
    runs-on: ubuntu-latest
    if: (github.event_name == 'issue_comment' && contains(github.event.comment.body, '[run review]') && github.event.issue.pull_request) || (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '[run review]')) || (github.event_name == 'pull_request' && !contains(github.event.pull_request.title, 'release') && !contains(github.event.pull_request.title, 'Release'))
    timeout-minutes: 15
    steps:
      - uses: coderabbitai/openai-pr-reviewer@latest
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
        with:
          debug: false
          review_simple_changes: false
          review_comment_lgtm: false
          openai_light_model: gpt-4 # 好みで変更
          openai_heavy_model: gpt-4 # 好みで変更
          openai_timeout_ms: 900000 # 15分.
          language: ja-JP
          path_filters: |
            !db/**
            !**/*.lock
          system_message: |
            あなたは @coderabbitai(別名 github-actions[bot])で、OpenAIによって訓練された言語モデルです。
            あなたの目的は、非常に経験豊富なソフトウェアエンジニアとして機能し、特にVue、Nuxt、TypeScriptに精通しています。
            コードの一部を徹底的にレビューし、以下のようなキーエリアを改善するためのコードスニペットを提案することです:
              - ロジック
              - セキュリティ
              - パフォーマンス
              - データ競合
              - 一貫性
              - エラー処理
              - 保守性
              - モジュール性
              - 複雑性
              - 最適化
              - ベストプラクティス: DRY, SOLID, KISS
            些細なコードスタイルの問題や、コメント・ドキュメントの欠落についてはコメントしないでください。
            重要な問題を特定し、解決して全体的なコード品質を向上させることを目指してくださいが、細かい問題は意図的に無視してください。
          summarize: |
            次の内容でmarkdownフォーマットを使用して、最終的な回答を提供してください。

              - *ウォークスルー*: 特定のファイルではなく、全体の変更に関する高レベルの要約を80語以内で。
              - *変更点*: ファイルとその要約のテーブル。スペースを節約するために、同様の変更を持つファイルを1行にまとめることができます。

            GitHubのプルリクエストにコメントとして追加されるこの要約には、追加のコメントを避けてください。
          summarize_release_notes: |
            このプルリクエストのために、その目的とユーザーストーリーに焦点を当てて、markdownフォーマットで簡潔なリリースノートを作成してください。
            変更は次のように分類し箇条書きにすること:
              "New Feature", "Bug fix", "Documentation", "Refactor", "Style",
              "Test", "Chore", "Revert"
            例えば:
            ```
            - New Feature: UIに統合ページが追加されました
            ```
            回答は50-100語以内にしてください。この回答はそのままリリースノートに使用されるので、追加のコメントは避けてください。



Nakajima.jsNakajima.js

コーディング規約を設定

コードの品質を担保するためにESLintの導入

https://qiita.com/fmai/items/2d27d394d31e994d3878

issue

作業したissue

https://github.com/nakajima-sh-cnctor/re1999/issues/8

インストール

@nuxt/eslintモジュールを追加

npx nuxi module add eslint

設定ファイル

eslint.config.mjs
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs';

export default withNuxt([
  {
    rules: {
      'no-console': 'warn',                    // console.logの使用を警告
      'no-unused-vars': 'error',               // 未使用の変数をエラーとして報告
      'eqeqeq': 'error',                       // 厳密等価演算子(===)の使用を強制
      'curly': 'error',                        // すべての制御文に波括弧を強制
      'semi': ['error', 'always'],             // セミコロンの使用を強制
      'quotes': ['error', 'single'],           // シングルクォートの使用を強制
      'no-trailing-spaces': 'error',           // 行末の空白を禁止
      'indent': ['error', 2],                  // インデント2スペース
      'comma-dangle': ['error', 'always-multiline'], // 複数行の場合は末尾カンマを強制
      'no-var': 'error',                       // varの使用を禁止
      'prefer-const': 'error',                 // 再代入がない場合はconstを強制
    },
    languageOptions: {
      globals: {
        browser: true,
        node: true,
        es6: true,
      },
      ecmaVersion: 2020,
      sourceType: 'module',
    },
  },
  {
    files: ['**/*.vue'],
    rules: {
      'vue/require-v-for-key': 'error',        // v-forディレクティブでkeyの指定を強制
      'vue/no-use-v-if-with-v-for': 'error',   // v-ifとv-forの同時使用を禁止
      'vue/multi-word-component-names': 'error', // コンポーネント名は複数単語を強制
      'vue/html-indent': ['error', 2],         // テンプレートのインデントを2スペースに
      'vue/html-closing-bracket-newline': ['error', {
        'singleline': 'never',                 // 単一行の場合は改行なし
        'multiline': 'always',                  // 複数行の場合は改行を強制
      }],
    },
  },
  {
    files: ['**/*.vue', '**/*.ts'],
    rules: {
      'no-console': 'error',                   // 本番環境ではconsole.logを禁止
      '@typescript-eslint/no-explicit-any': 'error',           // any型の使用を禁止
    },
  },
]);

ルール内容

  • no-console: console.logの使用を警告します。デバッグ用のコードが本番環境に残らないようにするためです。

  • no-unused-vars: 未使用の変数をエラーとして報告します。これにより、不要なコードを削除し、コードのクリーンさを保ちます。

  • eqeqeq: 厳密等価演算子(===)の使用を強制します。これにより、型の不一致によるバグを防ぎます。

  • curly: すべての制御文に波括弧を強制します。これにより、コードの可読性と安全性が向上します。

  • semi: セミコロンの使用を強制します。これにより、文の終わりを明確にし、予期しない動作を防ぎます。

  • quotes: シングルクォートの使用を強制します。これにより、文字列の一貫性を保ちます。

  • no-debugger: debuggerステートメントの使用を禁止します。デバッグ用のコードが本番環境に残らないようにします。

  • no-trailing-spaces: 行末の空白を禁止します。これにより、コードのクリーンさを保ちます。

  • eol-last: ファイルの末尾に改行を強制します。これにより、ファイルの一貫性を保ちます。

  • indent: インデントをスペース2つに強制します。これにより、コードの可読性を向上させます。

  • vue/require-v-for-key: v-forディレクティブでkeyの指定を強制します。これにより、リストレンダリングの際に効率的なDOM更新が可能になります。

  • vue/no-use-v-if-with-v-for: v-ifv-forの同時使用を禁止します。これにより、意図しない動作を防ぎ、コードの可読性を向上させます。

  • vue/multi-word-component-names: コンポーネント名は複数単語を強制します。これにより、コンポーネントの名前が他のHTML要素と衝突するのを防ぎます。

  • vue/html-indent: テンプレートのインデントをスペース2つに強制します。これにより、コードの可読性を向上させます。

  • vue/html-closing-bracket-newline: HTMLタグの閉じ括弧の後に改行を強制します。単一行の場合は改行なし、複数行の場合は改行を強制します。これにより、コードの一貫性を保ちます。

  • no-console: 本番環境ではconsole.logを禁止します。デバッグ用のコードが本番環境に残らないようにします。

  • @typescript-eslint/no-explicit-any: any型の使用を禁止します。これにより、型安全性を向上させます。

npm scriptsにlintコマンドを追加

lintのコマンドを実行できるように追加

package.json
{
  "scripts": {
    ...
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    ...
  },
}

実行してみる

npm run lint
> lint
> eslint .


/Users/nakajijmashunsuke/Documents/Workspace/re1999/nuxt.config.ts
  6:3  error  Missing semicolon  semi

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

エラー内容

nuxt.config.tsファイルの6行目にセミコロンが不足しているため、ESLintがエラーを報告しています。
semiルールが有効になっているため、各文の末尾にセミコロンを付ける必要があります。

コードエディタの設定

対象コードエディタは下記

  • VScode
  • Cursor

CursorはVScodeの設定をそのまま使えるので対象にしてます
OpenAIなどを使えるならCursorを推奨します

.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "recommendations": [
      "dbaeumer.vscode-eslint"
  ],
  "editor.tabSize": 2
}