目指せAmplifyコントリビューターへの道〜セットアップ編〜

POLアドベントカレンダー22日目担当、ゲバラです。
21日目はにゅうさんのLNIE botに関する記事です。是非読んでみてください！

https://qiita.com/NibutaniA/items/d4ffd52c49f91bfd04d8

#焦り
エンジニアかれこれ8年くらいやってますがOSSにコントリビュートしたことがありません。やばいなーとか思ってたらこんなものが流れてきました。

https://twitter.com/AWSAmplify/status/1471580371695419396

#Amplify Contributor Bash 2022
AmplifyのOSSに参加するための招待状だそうです。Amplifyのエコシステムを勉強しながら、オープンソースに貢献ができます。Githubのissueに特定のラベルがついており、そのプルリクエスト出してマージされると25ドル分のAWSクレジットがもらえます。かれこれ2年近くお世話になっているAmplifyなので恩返しのつもりでチャレンジしてみようと思います。

https://www.contributetoamplify.com/

#Amplify JSプロジェクトを始める
今回対象となっているプロジェクトAmplify JSです。Amplify CLIがいいなあと思ったんですがこれはまたの機会に。
始め方は以下にまとまっているで非常にありがたいです。

https://www.contributetoamplify.com/getting-started

とはいえやっていることはGitbunからforkしてるだけです。

#レッツチャレンジ
##ローカル環境の構築
あらかじめ必要なものはこちら

* Nodejs
* yarn

以下のコマンド叩いていく

```
git clone git@github.com:[username]/amplify-js.git
cd amplify-js

yarn
yarn bootstrap
yarn build
```
yarn buildは10分くらいかかるのでお時間ある時に叩きましょう。
Amplify JSはmonorepoで一つのリポジトリ内で複数のパッケージが含まれており、Lernaというツールでビルドされています。

##動作確認
ローカルで動作確認をするには、`yarn link`を行い、開発中のパッケージをプロジェクトに取り込むようにします。Lernaにはwatch modeもあるようなので、高速で動作確認することもできます。複数パッケージを取り込んだ状態でもwatch modeは動かせるようです。便利。

とりあえずReactで動かしてみます。

```
npx create-react-app react-amplified
```

起動

```
yarn start
```

いつもの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541992/e7c77cac-fbe3-ef3a-e6f5-deac8b8d6aff.png)

起動できたので動かしたいパッケージをwatch modeにします。今回はわかりやすくログイン画面を出したいので`@aws-amplify/ui-react`を使ってみます。ただui-reactはui-compornentをラップしているだけなので複数のパッケージをwatch modeにします。forkしたリポジトリで以下のコマンドを叩きます。

```
yarn build # Build the whole library
yarn link-all # Make all the packages available to link
yarn build:esm:watch # All packages are building ES6 modules in watch mode
```

Reactのプロジェクト内で`@aws-amplify/ui-react`してから、`yarn link`します。

```
npm install aws-amplify @aws-amplify/ui-react
yarn link @aws-amplify/ui-react
```

再度起動してAdmin UIの新しくなったやつ使えると思ったのですが、どうやらAmplify JSに入っているUI Compornentが古いようで古い方のログイン画面が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541992/571426b8-bd0d-af21-0dad-46e951f39ca8.png)

試しに`yarn unlink`してみると

```
yarn unlink @aws-amplify/ui-react
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541992/4196098a-54b8-7baa-1349-f16d9ccd7d76.png)

新しいAmplify UIのログインコンポーネントが表示されました。これで`yarn link`の動きは確認できました。新しいAmplify UIはバージョン2.0以降、Amplify JSとは別のリポジトリで開発されているため、注意が必要です。
ちなみにyarn linkできていると、VSCode上でlinkしている側のnode module内のソース側でも実体化されているように見えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541992/b7b64ee9-5b78-f25f-7de2-b1b74f7541b5.png)


再度`yarn link`をして、以下のコードを修正してみます。

```typescript:before：packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx
<amplify-form-section
	headerText={I18n.get(this.headerText)}
	handleSubmit={this.handleSubmit}
	testDataPrefix={'sign-in'}
>
```

ログインコンポーネントのヘッダーに表示されるテキストを直接表示するようにしてみます。本来絶対やらない修正ですが。

```typescript:after：packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx
<amplify-form-section
	headerText={`OSSコントリビュートにチャレンジする`}
	handleSubmit={this.handleSubmit}
	testDataPrefix={'sign-in'}
>
```

保存すると自動でビルドが走りますが、画面表示は自動更新されないので手動リロードが必要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541992/e5796df3-55df-b479-5d6a-d5eef73de7cf.png)

0.5歩くらいは進んだ気がする。


##テスト方法
ローカルで動作確認することも重要ですが、ユニットテストも書かないとPRが通りません。テストはjestを採用されています。

テストする前に実行してコケる確認しましょう。

```console:Testing
yarn run test --scope @aws-amplify/ui-components
```

コケました。画面表示するものを修正したのでスナップショットの比較で失敗しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541992/6932db87-8a20-f6ed-5023-ed881ceb38a1.png)
ここまでくれば影響範囲を確認しつつユニットテストを書いていって、プルリクエスト出すところまでいけますね。

##次回何をやるか
初めてのコントリビューター向けにIssueに`good first issue`というラベルをつけられており、ここから選ぶのがおすすめされています。パッと見てみましたが全然できる気がしませんが、冬休み中に色々触ってみます。失踪しないように頑張ります。

https://github.com/aws-amplify/amplify-js/contribute

#23日目
明日はPOLプロダクトのインフラ守護神、ゾネスさんです。