(#29BEDC, #517AED)
(#3193FF)
(#FFF)
(#3193FF)
+コミュニティリソースと追加資料 +
+ +## メイン {#main} + +import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx" +import { StarOutlined, SearchOutlined, TeamOutlined, VerifiedOutlined } from "@ant-design/icons"; + ++FSD設計方法論、チーム、コミュニティ、そして発展の歴史に関する一般情報 +
+ +## 主な内容 {#main} + +import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx" +import { StarOutlined, TrophyOutlined, BulbOutlined, TeamOutlined } from "@ant-design/icons"; + +| テーマ | +ロゴ (Ctrl/Cmd + Clickでダウンロード) | +使用法 | +
| primary (#29BEDC, #517AED) |
+ |
+ ほとんどの場合に推奨されます | +
| flat (#3193FF) |
+ |
+ 単色コンテキスト用 | +
| monochrome (#FFF) |
+ |
+ 白黒コンテキスト用 | +
| square (#3193FF) |
+ |
+ 正方形サイズ用 | +
+
+
+## ソーシャルプレビュー
+
+作業中...
+
+## プレゼンテーションテンプレート {#presentation-template}
+
+作業中...
+
+## 参照 {#see-also}
+
+- [ディスカッション (github)](https://github.com/feature-sliced/documentation/discussions/399)
+- [リブランディングの歴史と参考資料 (figma)](https://www.figma.com/file/RPphccpoeasVB0lMpZwPVR/FSD-Brand?node-id=0%3A1)
+- [リブランディングデモ](https://rebrand-sliced.netlify.app/en/)
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/get-started/cheatsheet.mdx b/i18n/ja/docusaurus-plugin-content-docs/current/get-started/cheatsheet.mdx
new file mode 100644
index 0000000000..d5d502f9b4
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/get-started/cheatsheet.mdx
@@ -0,0 +1,28 @@
+---
+# sidebar_position: 3
+unlisted: true
+---
+
+# 分解のチートシート
+
+インターフェースをレイヤーに分割する際の参考書として使用してください。以下にPDFバージョンもあり、印刷して枕の下に置いておくことができます。
+
+## レイヤーの選択 {#choosing-a-layer}
+
+[PDFをダウンロード](/files/choosing-a-layer-en.pdf)
+
+
+
+## 例 {#examples}
+
+### ツイート
+
+
+
+### GitHub
+
+
+
+## 参照 {#see-also}
+
+- [(記事) ロジックの分解におけるさまざまなアプローチ](https://www.pluralsight.com/resources/blog/guides/how-to-organize-your-react--redux-codebase)
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/get-started/faq.md b/i18n/ja/docusaurus-plugin-content-docs/current/get-started/faq.md
new file mode 100644
index 0000000000..062f018fed
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/get-started/faq.md
@@ -0,0 +1,68 @@
+---
+sidebar_position: 20
+pagination_next: guides/index
+---
+
+# FAQ
+
+:::info
+
+質問は、[Discordコミュニティ][discord]、[GitHub Discussions][github-discussions]、および[Telegramチャット][telegram]で聞くことができます。
+
+:::
+
+### ツールキットやリンターはありますか？ {#is-there-a-toolkit-or-a-linter}
+
+公式のESLintコンフィグ — [@feature-sliced/eslint-config][eslint-config-official]、およびコミュニティメンバーのアレクサンドル・ベロウスによって作成されたESLintプラグイン — [@conarti/eslint-plugin-feature-sliced][eslint-plugin-conarti]があります。これらのプロジェクトへの貢献や独自のツールの作成を歓迎します！
+
+### ページのレイアウト/テンプレートはどこに保存すればよいですか？ {#where-to-store-the-layouttemplate-of-pages}
+
+シンプルなレイアウトテンプレートが必要な場合は、`shared/ui`に保存できます。より上層のレイヤーを使用する必要がある場合、いくつかのオプションがあります。
+
+- レイアウトが本当に必要ですか？レイアウトが数行で構成されている場合、各ページにコードを重複させる方が合理的です。
+- レイアウトが必要な場合は、個別のウィジェットやページとして保存し、App層のルーター設定にそれらを組み合わせることができます。ネストされたルーティングも一つのオプションです。
+
+### フィーチャーとエンティティの違いは何ですか？ {#what-is-the-difference-between-feature-and-entity}
+
+エンティティはアプリケーションが扱う現実世界の概念です。フィーチャーはユーザーに実際の価値を提供するインタラクションであり、ユーザーがエンティティで行いたいことです。
+
+詳細および例については、参考書セクションの[スライスについてのページ][reference-entities]を参照してください。
+
+### ページ/フィーチャー/エンティティを相互に埋め込むことはできますか？ {#can-i-embed-pagesfeaturesentities-into-each-other}
+
+はい、しかし、この埋め込みはより上層のレイヤーで行う必要があります。例えば、ウィジェット内で両方のフィーチャーをインポートし、プロップス/子要素として一方のフィーチャーを他方に挿入することができます。
+
+一方のフィーチャーを他方のフィーチャーからインポートすることはできません。これは[**レイヤーのインポートルール**][import-rule-layers]で禁止されています。
+
+### Atomic Designはどうですか？ {#what-about-atomic-design}
+
+現在、アトミックデザインをFeature-Sliced Designと一緒に使用することを義務付けていませんが、禁止もしていません。
+
+アトミックデザインは、モジュールの`ui`セグメントにうまく適用できます。
+
+### FSDに関する有用なリソース/記事などはありますか？ {#are-there-any-useful-resourcesarticlesetc-about-fsd}
+
+はい！ https://github.com/feature-sliced/awesome
+
+### なぜFeature-Sliced Designが必要なのですか？ {#why-do-i-need-feature-sliced-design}
+
+FSDは、プロジェクトの主要な価値を提供するコンポーネントの観点から、あなたとあなたのチームが迅速にプロジェクトを把握するのに役立ちます。標準化されたアーキテクチャは、オンボーディングを迅速化し、コード構造に関する議論を解決するのに役立ちます。FSDが作成された理由については、[モチベーション][motivation]のページを参照してください。
+
+### 初心者の開発者にFSDのアーキテクチャ/設計方法論は必要ですか？ {#does-a-novice-developer-need-an-architecturemethodology}
+
+おそらく必要です。
+
+*通常、一人でプロジェクトを設計・開発する場合、すべてが順調に進みます。しかし、開発に中断が生じたり、新しい開発者がチームに加わると問題が発生します。*
+
+### 認証コンテキストをどのように扱えばよいですか？ {#how-do-i-work-with-the-authorization-context}
+
+[こちら](/docs/guides/examples/auth)で回答しています。
+
+[import-rule-layers]: /docs/reference/layers#import-rule-on-layers
+[reference-entities]: /docs/reference/layers#entities
+[eslint-config-official]: https://github.com/feature-sliced/eslint-config
+[eslint-plugin-conarti]: https://github.com/conarti/eslint-plugin-feature-sliced
+[motivation]: /docs/about/motivation
+[telegram]: https://t.me/feature_sliced
+[discord]: https://discord.gg/S8MzWTUsmp
+[github-discussions]: https://github.com/feature-sliced/documentation/discussions
diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/get-started/index.mdx b/i18n/ja/docusaurus-plugin-content-docs/current/get-started/index.mdx
new file mode 100644
index 0000000000..75b532c1b0
--- /dev/null
+++ b/i18n/ja/docusaurus-plugin-content-docs/current/get-started/index.mdx
@@ -0,0 +1,38 @@
+---
+hide_table_of_contents: true
+pagination_prev: intro
+---
+
+import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx"
+import { RocketOutlined, PlaySquareOutlined, QuestionCircleOutlined } from "@ant-design/icons";
+
+# 🚀 クイックスタート
+
++ようこそ！このセクションでは、Feature-Sliced Designの適用方法とその基礎知識が簡単に紹介されます。また、FSDの主な利点とその作成理由についての内容も記載されています。 +
+ +上の図には、左から右に「レイヤー」、「スライス」、「セグメント」とラベル付けされた3つの列があります。
+「レイヤー」列には、上から下に「app」、「processes」、「pages」、「widgets」、「features」、「entities」、「shared」とラベル付けされた7つの区分があります。「processes」区分は取り消し線が引かれています。「entities」区分は2番目の列「スライス」と接続されていて、2番目の列が「entities」の内容であることを示しています。
+「スライス」列には、上から下に「user」、「post」、「comment」とラベル付けされた3つの区分があります。「post」区分は「セグメント」列と同様に接続されていて、「post」の内容であることを示しています。
+「セグメント」列には、上から下に「ui」、「model」、「api」とラベル付けされた3つの区分があります。
+知識を共有する場
+{article.description}
+ 続きを読む... +知識を共有する場
+知識を共有する場
+人気のタグ
+ + +知識を共有する場
+人気のタグ
+ + ++ アカウントをお持ちですか？ +
+ + {registerData?.error && ( ++ アカウントが必要ですか？ +
+ + {signInData?.error && ( +人気のタグ
+ + +知識を共有する場
+{article.description}
+ もっと読む... +{article.article.body}
++ サインイン + または + 登録 + して記事にコメントを追加しましょう！ +
+{comment.body}
++小さな実践的な例を通じて、FSDの適用方法を示します。 +
+ +## 主要 {#main} + +import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx" +import { UserSwitchOutlined, LayoutOutlined, FontSizeOutlined } from "@ant-design/icons"; + ++Feature-Sliced Designの適用に関する実践的なガイドと例です。このセクションでは、移行ガイドや悪習のハンドブックも説明されています。具体的な何かを実現しようとしているときや、FSDを「実戦」で見たいときに最も役立ちます。 +
+ +## 主な内容 {#main} + +import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx" +import { ToolOutlined, ImportOutlined, BugOutlined, FunctionOutlined } from "@ant-design/icons"; + +Post id: {post.id}
+{post.body}
++FSDの重要な概念に関するセクション +
+ +
+ 
+ 
+
+
+1. App (アップ)
+2. Processes (プロセス、非推奨)
+3. Pages (ページ)
+4. Widgets (ウィジェット)
+5. Features (フィーチャー)
+6. Entities (エンティティ)
+7. Shared (シェアード)
+
+プロジェクトで全てのレイヤーを使用する必要はないので、プロジェクトに価値をもたらすレイヤーだけを追加してください。
+
+## レイヤーのインポートルール {#import-rule-on-layers}
+
+レイヤーは、強く結合されたモジュールのグループであるスライスから構成されています。Feature-Sliced Designは低い結合度をサポートしているため、スライス間の依存関係はレイヤーのインポートルールによって制御されます。
+
+> _スライス内のモジュールは、下層のレイヤーにあるスライスのみをインポートできる。_
+
+例えば、`~/features/aaa` では、スライスは `aaa` であるため、`~/features/aaa/api/request.ts` ファイルは `~/features/bbb` フォルダー内のモジュールからコードをインポートすることはできませんが、`~/entities` や `~/shared` から、また `~/features/aaa` 内の隣接モジュールからはインポートできます。
+
+## レイヤーの定義
+
+### Shared層
+
+Shared層は、プロジェクトやビジネスの特性から切り離された、孤立したモジュール、コンポーネント、抽象化のことです。
+
+このレイヤーは他のレイヤーとは異なり、スライスではなく直接セグメントで構成されています。
+
+**内容の例**
+
+* UIライブラリ
+* APIクライアント
+* ブラウザAPIと連携するコード
+
+### Entities層
+
+Entities層は、プロジェクトの本質を形成する現実世界の概念です。通常、これはビジネスがプロダクトを説明するために使用する用語です。
+
+このレイヤーの各スライスは、ユーザーインターフェースの静的要素、データストレージ、およびCRUD（作成・読み取り・更新・削除）操作を含みます。
+
+**スライスの例**
+
+| SNS | Gitフロントエンド（例：GitHub） |
|---|---|
|
|
| SNS | Gitフロントエンド（例：GitHub） | ユーザーの代わりに行うアクション |
|---|---|---|
|
|
|
| SNS | Gitフロントエンド（例：GitHub） |
|---|---|
|
|
| SNS | Gitフロントエンド（例：GitHub） |
|---|---|
|
|