Skip to content

Latest commit

 

History

History
83 lines (61 loc) · 2.8 KB

architecture.md

File metadata and controls

83 lines (61 loc) · 2.8 KB
Raw

アーキテクチャ

コーディング

  • 基本はrefを利用する。
  • ロジックはuseなんとかという形で composables として抽出する。
  • ほかのコンポーネントでも利用する composables は別ファイルに切り出す。
  • computedが複雑になるときは中の関数を純粋関数にしてlibにおく。純粋関数にすることでテストがしやすくなるため。

コードの依存関係

  1. lib
  2. composables
  3. components
  4. views

の依存関係になるようにする。

スタイル

  • テーマで利用するものは CSS 変数を利用する。<body>に CSS 変数が注入される。
  • SCSS からは$theme-ui-primaryなどのように利用可能である。頻出のものは mixin があるので、@include color-ui-primaryのように使う。
  • ロジックによる出し分けが必要な場合は、WAI-ARIA の属性またはdata-属性を利用する。
  • 直接 style を設定するのは、複雑な処理を行う場合以外は避ける。

例:

<template>
  <div :class="$style.po" :disabled="bar">foo</div>
</template>

<script lang="ts" setup>
const bar = ref(false)
</script>

<style lang="scss" module>
.po {
  opacity: 1;
  &[disabled] {
    opacity: 0.5;
  }
}
</style>

font-sizeに関して

一貫性を保つため、特殊な事例を除いて mixin のsize-*を利用すること。

font-weightに関して

normalとboldを利用すること。 一貫性を保つため、またフォントがそれらしかロードされないため。

MainPage のコンポーネントの構造

MainPage はチャンネル表示やクリップフォルダの表示があるページのこと。

  • NavigationBar
  • MainView
    • MainViewHeader (!1)
    • PrimaryView
      • PrimaryViewHeader: !1 へ teleport
      • PrimaryViewContent
      • PrimaryViewSidebar: モバイル時は!3 へ teleport
        • PrimaryViewSiderbarContent
        • PrimaryViewSidebarOpener: !2 へ teleport
    • PrimaryViewSidebarHidden (!2): 現在は未使用
    • SecondaryView
  • SidebarMobile (!3)

image image image image

参考: #3172

ユーザーから見たデータの流れ

  1. NavigationSelector: 「ホーム」「アクティビティ」
  2. NavigationContent: 「チャンネル」「クリップフォルダ」
  3. MainView: 「メッセージ一覧」