キミもAngular日本語ドキュメントの翻訳に協力しよう！

:::note warn
## 2024-07-10追記
昨年度末にリリースされたv17から、Angularルネッサンスと称した取り組みの一環で、ドキュメントサイトの一新が行われています。

これにより、今後は [angular.io(v17.angular.io/docs)](https://v17.angular.io/docs) から [angular.dev](https://angular.dev) にドキュメントを置き換えていく動きがあるようです。

angular.dev ではまだローカライズの仕組みが整っていないため、本記事はv17までの angular.io におけるローカライズ活動の紹介ということに留意してください。

- *Discord | #angular-ja翻訳 | Angular日本ユーザー会* より
![20240710201648.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104311/c7bfe12a-045d-eb91-94b3-865c84ceeb93.png)

(ということで、v17以前の翻訳活動自体はまだ続けられています！)
:::

---

こんにちは、[あかい](https://twitter.com/Ver1000000000)です🐗

本記事は [Angular Advent Calendar 2022](https://qiita.com/advent-calendar/2022/angular) の5日目の記事です！！ 遅刻してスミマセン😢

4日目は[@Jialipassionさん](https://qiita.com/Jialipassion/items/b65d4231fe389d8e9f14)で6日目は[@beltway7さん](https://ksakae1216.com/entry/2022/12/06/070000)です！

---

Angularには非常に丁寧で網羅性のある、高品質なドキュメントがあります。

- [Angular](https://angular.io)

これは、[Angular開発チーム](https://github.com/orgs/angular/people)と有志の編集者たちによって管理されているドキュメントプロジェクトです。

ドキュメントは英語で書かれていますが、
[Angular 日本語ドキュメンテーション](https://angular.jp)のドメインに、日本語化されたものがあります。

[angular.jp](https://angular.jp)は、主に有志の開発者たちの手で管理されており、
[angular.io](https://v17.angular.io/docs)に追従するために日々コミットがなされています。


本記事では、[angular.jp](https://angular.jp)に日本語訳を提供して貢献するために必要な技術的手法と、その手順をお伝えいたします！

みなさまもぜひ、翻訳をして[angular.jp](https://angular.jp)にコントリビューションしましょう！

## 翻訳のための必要技術要件
[angular.jp](https://angular.jp)は、Angularを用いて構成されており、
ドキュメントの動作環境をローカルで構築するために、gitコマンドなどを使います。

よって、次のコマンドが動く環境と知識が必要です。

- git
- yarn

また、[angular.jpのリポジトリ](https://github.com/angular/angular-ja)はGitHubで管理されているため、
[GitHubアカウント](https://github.co.jp/)も必要になります。

## リポジトリのクローンと大本リポジトリの同期
まずは[angular.jp](https://angular.jp)のリポジトリをローカル環境にクローンしましょう。

```sh
$ git clone git@github.com:angular/angular-ja.git
```

[angular.jp](https://angular.jp)は、[angular.io](https://v17.angular.io/docs)に対して、[git submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules)を利用することで大本リポジトリの同期を実現しています。
そのため、リポジトリをクローンしたあとはsubmoduleでのsyncが必要になります。

リポジトリディレクトリ内に移動して、次のコマンドで同期とビルドを完了してください。
(ちなみに5分くらいかかりました)

```sh
$ cd angular-ja
$ yarn build
```

これで、翻訳の前準備は大方終わりました。

## 翻訳箇所の宣言表明
[angular.jp](https://angular.jp)は複数人の有志の手によって翻訳されているため、
同時におなじファイルを変更しないよう協調が必要です。

翻訳に入る前に、まずは[angular.jpのIssue](https://github.com/angular/angular-ja/issues)で翻訳/担当したいページや箇所を表明しましょう。

![ss.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104311/92484ccd-6029-9c64-f5ee-c3f81ff96cb2.png)

(このとき、PRが出せる予定日時を添えてあげると丁寧かもしれません。)

(現在は基本的に、翻訳が必要なページはすでに[lacoさん](https://github.com/lacolaco)がIssue化していますので、
新しくIssueを作るのではなく、既存のIssueにコメントして意思表明をする形になると思います。)

しばらくすると、[lacoさん](https://github.com/lacolaco)からお返事をもらえるので、それから翻訳作業に入ってください。

## 翻訳作業とコミット
[angular.io](https://v17.angular.io/docs)はAngularで構築されています。
yarnを利用してサービングを行うことで、翻訳したファイルをWeb上でリアルタイムプレビューできます。

http://localhost:4200/ でAngularのドキュメントが閲覧できるようになります。

```
$ yarn start
```

それではお待ちかね、実際の翻訳作業です。

Issueで宣言した担当ページをブラウザで確認したら、URLから該当のファイルを探し出します。

- 翻訳するファイルは`/aio-ja/content/**`配下にあります
- [もしも該当ファイルが存在しない場合、originディレクトリから新しくファイルをコピーする必要があるかもしれません](https://github.com/angular/angular-ja/blob/main/CONTRIBUTING.md#%E7%BF%BB%E8%A8%B3%E3%81%AE%E8%BF%BD%E5%8A%A0)

ファイルを変更して保存すると、リアルタイムでブラウザのリロードが走り、ドキュメントが翻訳されているのが確認できるかと思います。

翻訳が終わりましたら、commitしてpushし、PRを作成しましょう。

```sh
$ git add .
$ git commit -m 'translate: animation.mdの翻訳 (#111)' # コミット文はもちろん書き換えてネ
```

PRを提出し、レビューやフィードバックがあれば、あらたに修正をコミットして再度PRを行ってください。

おつかれさまでした！

## その他
## CLAへのサインイン
PRを作成してしばらくしたあと、google-claというコメントがPRにつくことがあります。

英語のコメントで説明が書いてあるのですが、これはCLA(Contributor License Agreement)と言って、
初めてのコントリビューションするユーザーのPRに出てきてCIを落とします。

google-claのコメントがついてCIが落ちているときは、提示されたURLにアクセスしてCLAを完了し、
`I signed it!`などとリプライをすることでCLAが完了してCIが通るようになります。

## CONTRIBUTING.md
筆者のこの記事を読まなくても、実は貢献のための詳細な情報はこちらにまとまっております！

- [angular-jaへのコントリビューション - angular/angular-ja](https://github.com/angular/angular-ja/blob/main/CONTRIBUTING.md)

翻訳にうつる前に、かならず目を通しておくようにしましょう。

## Discordコミュニティについて
翻訳についての議論は、Angular日本ユーザー会のDiscordの翻訳チャンネルでも行われています。

だれでも参加可能ですので、この機会にぜひjoinしましょう！
(こちらのサーバーは、翻訳以外のものでもAngularの話題ならなんでもあります！)

- http://join-discord.angular.jp/

---

さぁ、キミも一緒にAngular日本語ドキュメントの翻訳に協力しよう！