Re1999コミュニティサイトを作ろう
リバース:1999 公式サイト
経緯
最近日本の攻略サイトが更新を辞めたりして情報の停滞を感じている中、動画投稿者などは攻略情報を発信しているので、その熱を絶やさないためのコミュニティーサイトの構築を行いたいと考えました。
主に攻略wikiをメインに、攻略情報などの更新は自分が動画投稿や既存のwikiを参照して更新していきたい
ゆくゆくはDiscord鯖を立てて攻略班を作成してコンテンツを活性化していきたい
技術一覧
ライブラリ名 | バージョン |
---|---|
nuxt | ^3.15.1 |
vue | latest |
vue-router | latest |
GitHub設定あれこれ
Gitフローをシステムで制限したりする
コミュニティ活性化を目的にしているので今後自分1人だけで開発とは限らないため初期のタイミングで法整備を行っておく
mainリポジトリに直接pushすることを禁止する
CodeRabbitを導入するのでmainに直接pushしてしまっては意味がなくなってしまうため
ターゲットはmainに設定
設定項目はこんな感じ
Require a pull request before mergingに追加の設定をする項目があるがいじらずにしておく
ブランチの命名規則
GitHubのissueからブランチを作成
issueを立ち上げてから作業を基本行なっていく
ブランチ名は日本語になっていても問題ないとする
作業ブランチの切り替えのコマンドも生成してくれるので楽
issueのテンプレート
-
バグ報告 (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]
**追加のコンテキスト**
ここに問題に関する他のコンテキストを追加してください。
-
機能リクエスト (Feature Request):
- 新しい機能や改善を提案するためのテンプレートです。提案の詳細、利点、関連するスクリーンショットやモックアップを含めることができます
feature_request
---
name: 機能リクエスト
about: 新しい機能の提案
title: "[FEATURE] 機能の簡単な説明"
labels: enhancement
assignees: ''
---
**機能の説明**
提案する機能が何であるかを明確かつ簡潔に説明してください。
**動機**
この機能がなぜ必要か、どのように役立つかを説明してください。
**提案する解決策**
機能の実装方法についてのアイデアがあれば記載してください。
**代替案**
考えられる代替案や機能について記載してください。
**追加のコンテキスト**
ここに機能に関する他のコンテキストやスクリーンショットを追加してください。
-
質問 (Question):
- プロジェクトに関する質問やサポートを求めるためのテンプレートです。具体的な質問内容や関連する背景情報を記載します
question
---
name: 質問
about: プロジェクトに関する質問
title: "[QUESTION] 質問の簡単な説明"
labels: question
assignees: ''
---
**質問の内容**
質問を明確かつ簡潔に説明してください。
**関連する背景情報**
質問に関連する背景情報や試したことを記載してください。
**追加のコンテキスト**
ここに質問に関する他のコンテキストを追加してください。
-
ドキュメント改善 (Documentation Improvement):
- ドキュメントの誤りや改善点を報告するためのテンプレートです。具体的な改善提案や誤りの詳細を含めます
documentation_improvement
---
name: ドキュメント改善
about: ドキュメントの誤りや改善点を報告する
title: "[DOCS] ドキュメントの簡単な説明"
labels: documentation
assignees: ''
---
**改善の説明**
改善が必要なドキュメントの部分を明確かつ簡潔に説明してください。
**提案する変更**
提案する具体的な変更内容を記載してください。
**関連するドキュメント**
関連するドキュメントやページへのリンクを記載してください。
**追加のコンテキスト**
ここに改善に関する他のコンテキストを追加してください。
-
タスク (Task):
- プロジェクト内の特定のタスクや作業項目を追跡するためのテンプレートです。タスクの詳細、目的、期限などを記載します。
task
---
name: タスク
about: プロジェクト内の特定のタスクや作業項目を追跡する
title: "[TASK] タスクの簡単な説明"
labels: task
assignees: ''
---
**タスクの説明**
タスクが何であるかを明確かつ簡潔に説明してください。
**目的**
このタスクの目的や達成したい結果を記載してください。
**作業項目**
- [ ] 作業項目1
- [ ] 作業項目2
- [ ] 作業項目3
**期限**
このタスクの完了期限を記載してください。
**追加のコンテキスト**
ここにタスクに関する他のコンテキストや関連情報を追加してください。
ここをGitHub運用例として記事を作成するか検討中
CodeRabbit導入
※既に住み着いているのだが、設定ファイルを書いていないのでちゃんと小屋を用意してあげる
設定の詳細は下記を参照
設定ファイルの詳細
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語以内にしてください。この回答はそのままリリースノートに使用されるので、追加のコメントは避けてください。
デザイン
下記のポストのデザインで作成する
#eae8e1
#f49340
#373735
#fbdcaf
コーディング規約を設定
コードの品質を担保するためにESLintの導入
issue
作業したissue
インストール
@nuxt/eslintモジュールを追加
npx nuxi module add eslint
設定ファイル
// @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-if
とv-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のコマンドを実行できるように追加
{
"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を推奨します
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"recommendations": [
"dbaeumer.vscode-eslint"
],
"editor.tabSize": 2
}