mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-14 00:35:52 +02:00

Files

おさむのひと f6ea52b1be docs: AI コーディングエージェント共通設定を追加 (#17396 )

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-05-12 17:56:06 +09:00

2.8 KiB

Raw Blame History

Frontend (`packages/frontend`) 規約

Vue 3.5 + Vite + Storybook + Cypress E2E。

コンポーネント命名

共有 / 再利用コンポーネントは Mk プレフィックス (例: MkButton.vue, MkInput.vue, MkAbuseReport.vue)。
ページ単位のものは packages/frontend/src/pages/ 配下に置く。

SFC スタイル

Composition API + <script setup lang="ts"> を基本とする (Options API は新規導入しない)。型宣言や module スコープのユーティリティを置きたい時は、setup ブロックと併用する形で追加の <script lang="ts"> ブロックを置いて構わない (例: MkInput.vue は SupportedTypes 型を別ブロックで宣言してから setup を書いている)。SCSS は CSS Modules で書き、<style lang="scss" module> を使う:

<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->

<template>
  <div :class="$style.root">
    <!-- ... -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// ...
</script>

<style lang="scss" module>
.root {
  /* ... */
}
</style>

国際化 (i18n)

文字列リテラルを直書きしない。
引数なし: i18n.ts.<path> で参照する (例: i18n.ts.deleted)。
引数あり: i18n.tsx.<path>(...) で関数呼び出しする (例: i18n.tsx.takeOverConfirm({ name }))。
新規キーは locales/ja-JP.yml のみ に追加する (他言語は Crowdin で自動配信)。
i18n は packages/frontend/src/i18n.ts (または共有モジュール) から import する。

モーダル / 通知

os.ts (packages/frontend/src/os.ts) 経由で呼ぶ。
os.alert(...) / os.confirm(...) / os.popup(...) / os.success(...) など。
ブラウザ標準の window.alert() / window.confirm() を 直接呼ばない。

アクセシビリティ (PR レビューで指摘されやすい点)

クリックハンドラを付けるなら <button> を使うか、role="button" + tabindex を付ける。
フォーム要素には <label> または aria-label を付ける。
キーボード操作可能であること。

Storybook

新規共有コンポーネントには <ComponentName>.stories.impl.ts を併設するのが慣習 (MkButton.stories.impl.ts 等の例多数)。

pnpm --filter frontend storybook-dev    # localhost:6006

ビルド・開発

開発: pnpm dev (ルート) で backend + frontend が watch で立ち上がる。
ビルド: pnpm --filter frontend build
型チェック: pnpm --filter frontend typecheck (vue-tsc)
ESLint: pnpm --filter frontend eslint

テスト

Unit (Vitest): pnpm --filter frontend test
Cypress E2E: pnpm e2e (ルートから; start-server-and-test で起動)

2.8 KiB Raw Blame History

Frontend (packages/frontend) 規約