Skip to content

Commit

Permalink
feat: Japanese full support (#728)
Browse files Browse the repository at this point in the history
  • Loading branch information
ratomiru authored Sep 29, 2024
1 parent b68ece7 commit ae9c386
Show file tree
Hide file tree
Showing 69 changed files with 7,173 additions and 1 deletion.
3 changes: 3 additions & 0 deletions DEV.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ This website is built using [Docusaurus 2](https://docusaurus.io/), a modern sta
- [Russian docs version](i18n/ru)
- [English docs version](i18n/en)
- [Uzbek docs version](i18n/uz)
- [Japanese docs version](i18n/ja)

## Installation

Expand All @@ -20,6 +21,8 @@ pnpm install
pnpm start # for default locale
pnpm start:ru # for RU locale
pnpm start:en # for EN locale
pnpm start:uz # for UZ locale
pnpm start:ja # for JA locale
```

> About [docusaurus/i18n commands](https://docusaurus.io/docs/i18n/git#translate-the-files)
Expand Down
5 changes: 4 additions & 1 deletion config/docusaurus/i18n.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const { DEFAULT_LOCALE } = require("./consts");
/** @type {import('@docusaurus/types').DocusaurusConfig["i18n"]} */
const i18n = {
defaultLocale: DEFAULT_LOCALE,
locales: ["ru", "en", "uz", "kr"],
locales: ["ru", "en", "uz", "kr", "ja"],
localeConfigs: {
ru: {
label: "Русский",
Expand All @@ -17,6 +17,9 @@ const i18n = {
kr: {
label: "한국어",
},
ja: {
label: "日本語",
},
},
};

Expand Down
410 changes: 410 additions & 0 deletions i18n/ja/code.json

Large diffs are not rendered by default.

40 changes: 40 additions & 0 deletions i18n/ja/docusaurus-plugin-content-docs/community/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
hide_table_of_contents: true
---

# 💫 コミュニティ

<p class="summary">
コミュニティリソースと追加資料
</p>

## メイン {#main}

import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx"
import { StarOutlined, SearchOutlined, TeamOutlined, VerifiedOutlined } from "@ant-design/icons";

<NavCard
title="素晴らしいリソース"
description="興味深いビデオ、記事、ツールキットのコレクション"
to="https://github.com/feature-sliced/awesome"
Icon={StarOutlined}
/>
<NavCard
title="チーム"
description="コアチーム、チャンピオン、コントリビューター、企業"
to="/community/team"
Icon={TeamOutlined}
/>
<NavCard
title="ブランドブック"
description="FSDのブランドアイデンティティの使用に関するガイドライン"
to="/docs/branding"
Icon={VerifiedOutlined}
/>
<NavCard
title="コントリビューション"
description="始め方、ワークフロー、支援と協力"
to="#"
Icon={SearchOutlined}
disabled
/>
18 changes: 18 additions & 0 deletions i18n/ja/docusaurus-plugin-content-docs/community/team.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
sidebar_class_name: sidebar-item--wip
sidebar_position: 2
---

import WIP from '@site/src/shared/ui/wip/tmpl.mdx'

# チーム

<WIP ticket="192" />

## コアチーム

### チャンピオンズ {#champions}

## コントリビューター {#contributors}

## 会社 {#companies}
54 changes: 54 additions & 0 deletions i18n/ja/docusaurus-plugin-content-docs/current.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
{
"version.label": {
"message": "v2.0.0 🍰",
"description": "現在のバージョンのラベル"
},
"sidebar.getstartedSidebar.category.🚀 Get Started": {
"message": "🚀 はじめに",
"description": "サイドバーの「はじめに」カテゴリのラベル"
},
"sidebar.guidesSidebar.category.🎯 Guides": {
"message": "🎯 ガイド",
"description": "サイドバーの「ガイド」カテゴリのラベル"
},
"sidebar.referenceSidebar.category.📚 Reference": {
"message": "📚 参考書",
"description": "サイドバーの「参考書」カテゴリのラベル"
},
"sidebar.aboutSidebar.category.🍰 About": {
"message": "🍰 メソッドについて",
"description": "サイドバーの「メソッドについて」カテゴリのラベル"
},
"sidebar.aboutSidebar.category.Understanding": {
"message": "理解",
"description": "サイドバーの「理解」カテゴリのラベル"
},
"sidebar.aboutSidebar.category.Promote": {
"message": "推進",
"description": "サイドバーの「推進」カテゴリのラベル"
},
"sidebar.guidesSidebar.category.Examples": {
"message": "実装例",
"description": "サイドバーの「例」カテゴリのラベル"
},
"sidebar.guidesSidebar.category.Migration": {
"message": "移行",
"description": "サイドバーの「移行」カテゴリのラベル"
},
"sidebar.guidesSidebar.category.Tech": {
"message": "技術",
"description": "サイドバーの「技術」カテゴリのラベル"
},
"sidebar.referenceSidebar.category.Units": {
"message": "ユニット",
"description": "サイドバーの「ユニット」カテゴリのラベル"
},
"sidebar.referenceSidebar.category.Isolation": {
"message": "分離",
"description": "サイドバーの「分離」カテゴリのラベル"
},
"sidebar.referenceSidebar.category.Layer": {
"message": "レイヤー",
"description": "サイドバーの「レイヤー」カテゴリのラベル"
}
}
103 changes: 103 additions & 0 deletions i18n/ja/docusaurus-plugin-content-docs/current/about/alternatives.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
---
sidebar_class_name: sidebar-item--wip
sidebar_position: 3
---

import WIP from '@site/src/shared/ui/wip/tmpl.mdx'

# 代替案

<WIP ticket="62" />

## ビッグボールオブマッド

<WIP ticket="258" />

- [(記事) DDD - Big Ball of mud](https://thedomaindrivendesign.io/big-ball-of-mud/)


## スマート&ダムコンポーネント

<WIP ticket="214" />

- [(記事) Dan Abramov - Presentational and Container Components (TLDR: 非推奨)](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)


## デザイン原則

<WIP ticket="59" />

## DDD

<WIP ticket="1" />

## 参照 {#see-also}

- [(記事) DDD, Hexagonal, Onion, Clean, CQRS, … How I put it all together](https://herbertograca.com/2017/11/16/explicit-architecture-01-ddd-hexagonal-onion-clean-cqrs-how-i-put-it-all-together/)

## クリーンアーキテクチャ

<WIP ticket="165" />

- [(記事) DDD, Hexagonal, Onion, Clean, CQRS, … How I put it all together](https://herbertograca.com/2017/11/16/explicit-architecture-01-ddd-hexagonal-onion-clean-cqrs-how-i-put-it-all-together/)

## フレームワーク

<WIP ticket="58" />

- [(記事) FSDの作成理由 (フレームワークに関する断片)](/docs/about/motivation)


## Atomic Design

### これは何か?

アトミックデザインでは、責任の範囲が標準化された層に分かれています。

アトミックデザインは**5つの層**に分かれます(上から下へ)。

1. `pages` - FSDの`pages`層と同様の目的を持つ。
2. `templates` - コンテンツに依存しないページの構造を定義するコンポーネント。
3. `organisms` - ビジネスロジックを持つ分子から構成されるモジュール。
4. `molecules` - 通常、ビジネスロジックを持たないより複雑なコンポーネント。
5. `atoms` - ビジネスロジックを持たないUIコンポーネント。

同じ層のモジュールは、FSDのように下の層のモジュールとだけ相互作用しています。
つまり、分子(molecule)は原子(atom)から構築され、生命体(organism)は分子から、テンプレート(template)は生命体から、ページ(page)はテンプレートから構築されます。
また、アトミックデザインはモジュール内での**公開API**の使用を前提としています。

### フロントエンドでの適用性
アトミックデザインはプロジェクトで比較的よく見られます。アトミックデザインは、開発者の間というより、ウェブデザイナーの間で人気です。ウェブデザイナーは、スケーラブルでメンテナンスしやすいデザインを作成するためにアトミックデザインをよく使用しています。
開発では、アトミックデザインは他のアーキテクチャ設計方法論と混合されることがよくあります。

しかし、アトミックデザインはUIコンポーネントとその構成に焦点を当てているため、
アーキテクチャ内でビジネスロジックを実装する問題が発生してしまいます。

問題は、アトミックデザインがビジネスロジックのための明確な責任レベルを提供していないため、
ビジネスロジックがさまざまなコンポーネントやレベルに分散され、メンテナンスやテストが複雑になることです。
ビジネスロジックは曖昧になり、責任の明確な分離が困難になり、コードがモジュール化されず再利用可能でなくなります。

### FSDとの統合
FSDの文脈では、アトミックデザインのいくつかの要素を使用して柔軟でスケーラブルなUIコンポーネントを作成することができます。 `atoms``molecules`の層は、FSDの`shared/ui`に実装でき、基本的なUI要素の再利用とメンテナンスを簡素化しています。

```sh
├── shared
│   ├── ui 
│   │   ├── atoms
│   │   ├── molecules
│   ...
```

FSDとアトミックデザインの比較は、両方の設計方法論がモジュール性と再利用性を目指していることを示していますが、
異なる側面に焦点を当てています。アトミックデザインは視覚的コンポーネントとその構成に焦点を当てています。
FSDはアプリケーションの機能を独立したモジュールに分割し、それらの相互関係に焦点を当てています。

- [Atomic Design](https://atomicdesign.bradfrost.com/table-of-contents/)
- [(動画) Atomic Design: What is it and why is it important?](https://youtu.be/Yi-A20x2dcA)

## Feature Driven

<WIP ticket="219" />

- [(講演) Feature Driven Architecture - Oleg Isonen](https://youtu.be/BWAeYuWFHhs)
- [Feature Driven-Short specification (from the point of view of FSD)](https://github.com/feature-sliced/documentation/tree/rc/feature-driven)
44 changes: 44 additions & 0 deletions i18n/ja/docusaurus-plugin-content-docs/current/about/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
hide_table_of_contents: true
pagination_prev: reference/index
---

# 🍰 FSDについて

<span class="badge badge--violet margin-bottom--md">背景指向</span>

<p class="summary">
FSD設計方法論、チーム、コミュニティ、そして発展の歴史に関する一般情報
</p>

## 主な内容 {#main}

import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx"
import { StarOutlined, TrophyOutlined, BulbOutlined, TeamOutlined } from "@ant-design/icons";

<NavCard
title="ミッション"
description="FSDの目的と制約"
to="/docs/about/mission"
Icon={TrophyOutlined}
/>
<NavCard
title="モチベーション"
description="FSDの創造と発展の理由"
to="/docs/about/motivation"
Icon={StarOutlined}
/>
<NavCard
title="理解"
description="FSD概念の深掘り"
to="/docs/about/understanding/architecture"
Icon={BulbOutlined}
tags={['アーキテクチャについて', 'ニーズ駆動', 'ネーミング']}
/>
<NavCard
title="プロモーション"
description="企業におけるFSDのプロモーションと統合について"
to="/docs/about/promote/integration"
Icon={TeamOutlined}
tags={['統合', 'チーム内でのプロモーション', '企業内でのプロモーション']}
/>
50 changes: 50 additions & 0 deletions i18n/ja/docusaurus-plugin-content-docs/current/about/mission.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
sidebar_position: 1
---

# ミッション

ここでは、私たちがFSD方法論を開発する際に従う方法論適用の制限と目標について説明します。

- 私たちは、目標をイデオロギーとシンプルさのバランスとして考えている
- 私たちは、すべての人に適した銀の弾丸を作ることはできない

**それでも、FSD方法論が広範な開発者にとって近く、アクセス可能であることを望んでいます。**

## 目標 {#goals}

### 幅広い開発者に対する直感的な明確さ {#intuitive-clarity-for-a-wide-range-of-developers}

FSD方法論は、プロジェクトチームの大部分にとってアクセス可能であるべきです。

*なぜなら、将来のすべてのツールがあっても、FSD方法論を理解できるのは経験豊富なシニアやリーダーだけでは不十分だからである*

### 日常的な問題の解決 {#solving-everyday-problems}

FSD方法論には、プロジェクト開発における日常的な問題の理由と解決策が示されるべきです。

また、開発者が*コミュニティーの経験に基づいた*アプローチを使用できるようにし、長年のアーキテクチャや開発の問題を回避できるようにするには、**FSD方法論はこれに関連するツール(CLI、リンター)を提供することも必要です。**


> *@sergeysova: 想像してみてください。開発者が方法論に基づいてコードを書いているとき、開発者の直面している問題は10倍少なく発生しています。それは他の人々が多くの問題の解決策を考え出したから、可能になったのです。*
## 制限 {#limitations}

私たちは*自分たちの見解を押し付けたくありません*が、同時に*多くの開発者の習慣が日々の開発の妨げになっていることを理解しています。*

すべての開発者にはシステム設計と開発経験レベルが異なるため、**次のことを理解することが重要です。**

- FSD方法論は、すべての開発者にとって、同時に非常にシンプルで、非常に明確にするのは不可能
> *@sergeysova: 一部の概念は、問題に直面し、解決に数年を費やさない限り、直感的に理解することはできない。*
>
> - *数学の例 — グラフ理論。*
> - *物理の例 — 量子力学。*
> - *プログラミングの例 — アプリケーションのアーキテクチャ。*
>
- シンプルさ、拡張性は、実現可能であって望ましい

## 参照 {#see-also}

- [アーキテクチャの問題][refs-architecture--problems]

[refs-architecture--problems]: /docs/about/understanding/architecture#problems
Loading

0 comments on commit ae9c386

Please sign in to comment.