Skip to content

Commit

Permalink
feat(翻訳): FSD 2.1 (#773)
Browse files Browse the repository at this point in the history
  • Loading branch information
ratomiru authored Dec 3, 2024
1 parent 76f4f18 commit a1985ee
Show file tree
Hide file tree
Showing 15 changed files with 272 additions and 527 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ sidebar_position: 2

Feature-Sliced Designの特徴は、ページが互いに依存できないことです。つまり、1つのページが他のページのコードをインポートすることはできません。これは**層のインポートルール**によって禁じられています。

*スライス内のモジュールは、下層にあるスライスのみをインポートできる。*
*スライス内のモジュール(ファイル)は、下層にあるスライスのみをインポートできる。*

この場合、ページはスライスであるため、そのページ内のモジュール(ファイル)は、他のページではなく、下層からのみコードをインポートできます。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ FSDプロジェクトには、ユーザーエンティティや現在のユー

APIクライアントは通常、`shared/api`に配置されるか、エンティティ間で分散されるため、このアプローチの主な問題は、他のリクエストがトークンにアクセスできるようにしつつ、[レイヤーのインポートルール][import-rule-on-layers]を破らないことです。

> スライス内のモジュールは、下層にあるスライスのみをインポートできる。
> スライス内のモジュール(ファイル)は、下層にあるスライスのみをインポートできる。
この問題にはいくつかの解決策があります。

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 3
sidebar_position: 1
sidebar_label: カスタムアーキテクチャからの移行
---

Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
sidebar_position: 4
sidebar_position: 2
---

# v1からの移行
# v1からv2への移行

## なぜv2なのか? {#why-v2}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
sidebar_position: 3
---

# v2.0からv2.1への移行

v2.1の主な変更点は、インターフェースを分解するための「ページファースト」という新しいメンタルモデルです。

v2.0では、FSDは分解のためにエンティティ表現やインタラクティビティの最小部分まで考慮し、インターフェース内のエンティティとフィーチャーを特定することを推奨していました。そうしてから、エンティティとフィーチャーからウィジェットやページが構築されていきました。この分解モデルでは、ほとんどのロジックはエンティティとフィーチャーにあり、ページはそれ自体にはあまり重要性のない構成層に過ぎませんでした。

v2.1では、分解をページから始めること、または場合によってはページで止めることを推奨します。ほとんどの人はすでにアプリを個々のページに分ける方法を知っており、ページはコードベース内のコンポーネントを見つける際の一般的な出発点でもあります。この新しい分解モデルでは、各個別のページにほとんどのUIとロジックを保持し、Sharedに再利用可能な基盤を維持します。複数のページでビジネスロジックを再利用する必要が生じた場合は、それを下層のレイヤーに移動できます。

Feature-Sliced Designへのもう一つの追加は、`@x`表記を使用したエンティティ間のクロスインポートの標準化です。

## 移行方法 {#how-to-migrate}

v2.1には破壊的な変更はなく、FSD v2.0で書かれたプロジェクトもFSD v2.1の有効なプロジェクトです。しかし、新しいメンタルモデルがチームや特に新しい開発者のオンボーディングにとってより有益であると考えているため、分解に対して小さな調整を行うことを推奨します。

### スライスのマージ

移行を始めるための簡単な方法は、プロジェクトでFSDのリンターである[Steiger][steiger]を実行することです。Steigerは新しいメンタルモデルで構築されており、最も役立つルールは次のとおりです。

- [`insignificant-slice`][insignificant-slice] — エンティティ、またはフィーチャーが1ページでのみ使用されている場合、このルールはそのエンティティ、またはフィーチャーをページに完全にマージすることを提案します。
- [`excessive-slicing`][excessive-slicing] — レイヤーにスライスが多すぎる場合、通常は分解が細かすぎるサインです。このルールは、プロジェクトのナビゲーションを助けるためにいくつかのスライスをマージ、またはグループ化することを提案します。

```bash
npx steiger src
```

これにより、1回だけ使用されるスライスを特定できるため、それらが本当に必要か再考することができます。そのような考慮において、レイヤーはその内部のすべてのスライスのための何らかのグローバル名前空間を形成することを念頭に置いてください。1回だけ使用される変数でグローバル名前空間を汚染しないようにするのと同様に、レイヤーの名前空間内の場所を貴重なものとして扱い、慎重に使用するべきです。

### クロスインポートの標準化

以前にプロジェクト内でクロスインポートがあった場合、Feature-Sliced Designでのクロスインポートのための新しい表記法`@x`を活用できます。これは次のようになります。

```ts title="entities/B/some/file.ts"
import type { EntityA } from "entities/A/@x/B";
```

詳細については、リファレンスの[クロスインポートの公開API][public-api-for-cross-imports]セクションを参照してください。

[insignificant-slice]: https://github.com/feature-sliced/steiger/tree/master/packages/steiger-plugin-fsd/src/insignificant-slice
[steiger]: https://github.com/feature-sliced/steiger
[excessive-slicing]: https://github.com/feature-sliced/steiger/tree/master/packages/steiger-plugin-fsd/src/excessive-slicing
[public-api-for-cross-imports]: /docs/reference/public-api#public-api-for-cross-imports
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export default defineNuxtConfig({
例えば、プロジェクトに`Home`ページを追加するには、次の手順を行います。
- `pages`層内にページスライスを追加する
- `app`層内に適切なルートを追加する
- スライスのページとルートを統合する
- スライスのページをルートに接続する

ページスライスを作成するには、[CLI](https://github.com/feature-sliced/cli)を使用します。
```shell
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ fsd pages home
`ui`セグメント内に`home-page.svelte`ファイルを作成し、公開APIを介してアクセスできるようにします。 

```ts title="src/pages/home/index.ts"
export { default as HomePage } from './ui/home-page';
export { default as HomePage } from './ui/home-page.svelte';
```

このページのルートを`app`層内に作成します。
Expand All @@ -81,7 +81,7 @@ export { default as HomePage } from './ui/home-page';
│ │ │ ├── index.ts
```

最後に`index.svelte`ファイル内にページコンポーネントを追加します。
最後に`+page.svelte`ファイル内にページコンポーネントを追加します。

```html title="src/app/routes/+page.svelte"
<script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ FSDの重要な概念に関するセクション
/>
<NavCard
title="公開API"
description="堅牢で統合しやすいモジュール設計に関する実践"
description="公開APIの定義と目標、@xによるクロスインポート、トラブルシューティング"
to="/docs/reference/public-api"
Icon={ApiOutlined}
/>

This file was deleted.

This file was deleted.

This file was deleted.

Loading

0 comments on commit a1985ee

Please sign in to comment.