【GitHub + DEV 2023 Hackathon】ハッカソンで賞金獲と…ｺﾞﾎﾝｺﾞﾎﾝ、自作GitHubActions作成！

## まえおき

何気なくAWSでアプリケーションを稼働させてました。その月は仕事が忙しく使用料金を監視していなくて、月末にふと明細を見たんですよ。
![1654750206246912001.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759541/60f59488-a9b1-e7fe-14b4-6d1fdbdc2a34.gif)

これは不味い・・・。
ちょうどその頃、以下の記事を見つけました。

https://dev.to/devteam/announcing-the-github-dev-2023-hackathon-4ocn

そして私は思ったわけですよ。
「「これしかない・・・。」」

## 概要

[dev.to](https://dev.to/)で開催されるハッカソンに作品を投稿して~~賞金を獲得する~~自身の技術力を向上するのが目的です！٩( ᐛ )و
また、このハッカソンはGitHub Actions もしくは GitHub Codespacesを使用したオープンソースのアプリケーションを競うものだそうです。

作品のカテゴリは以下の5つ

1. Maintainer Must-Haves: Make the lives of Open Source maintainers easier.
Codespacesを用いた環境の構築や、ドキュメンテーションのサポートツールの開発。
2.  DIY Deployments: Improve the deployment process for open source projects.
デプロイの自動化やその周辺ツール。CI/CDパイプラインの構築
3. Interesting IoT: Cool projects that integrate with IoT.
IoT関連
4. Phone Friendly: Projects built for Mobile (PWA readiness, iOS/Android)
PWAアプリケーションやスマートフォン向けアプリのビルドプロセスの構築
5. Wacky Wildcards: Build a random app that doesn’t fit into one of the categories above.
なんでも🙆‍♂️

そして、それぞれのカテゴリで優勝者が１人ずつ選ばれ、優勝者以外の１０人に賞が贈られるようです！

とりあえず、敵を知り己を知ればなんやらで、過去の優勝者を見てみました。

https://dev.to/devteam/congrats-to-our-2021-github-actions-hackathon-winners-1fhk

・・・

面白い！面白すぎます！
Wacky Wildcardsの優勝者作品凄すぎます。

https://dev.to/paulasantamaria/using-github-actions-to-turn-contributors-into-heroes-of-an-open-source-game-4cei

PRをマージしたらGitHub Pagesにゲームをデプロイするそう💡
なんて素敵な発想なんでしょうか✨

いろいろありますが、自分が特に気に入ったのはこれ。

https://dev.to/darthbenro008/action-paniker-stimulate-your-sense-physically-when-your-build-fails-3ah9

GitHub actionがfailしたら物理的なランプが点灯するそうです、斬新😂
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759541/a8c7344b-86f1-802e-8794-7b8724e6952d.png)
【引用：https://dev.to/darthbenro008/action-paniker-stimulate-your-sense-physically-when-your-build-fails-3ah9】

## 作品

さて、私もいくつか作品を作ったので、紹介していきます。

### 1. yaml-replacement-action

https://dev.to/okamos102/placeholder-title-1ceh

`yaml`ファイルの任意の`value`を`YYYYMMDDhhmm`のフォーマットで置換するActionです。
オプションで置換後の変更をcommit&pushすることも可能です。

#### モチベーション

ブラウザキャッシュを更新するために、静的ファイルのURL末尾にユニークな値をセットすることあるじゃないですか？

例えば
```html
<script src="production.min.js?ver=1"></script>
```
のようなjsファイルのブラウザキャッシュを更新したい場合、以下のように`ver`を変更したりすると思います。

```html
<script src="production.min.js?ver=2"></script>
```
このパラメータは`yaml`か何かで値を保存すると思うのですが、いちいちデプロイの度に更新するのは面倒ですよね。それを解消するためにこのアクションを作成しました🎉

#### 振り返り

「`yq`でよくね？」「既にある気が・・・。」「車輪の再発明じゃね？」
はい、そうなんです。[yqコマンド](https://github.com/mikefarah/yq)で直接変更できる上に、上位互換のActionがありますね。こちらは、jsonもxmlも置換可能な優れものです。。。完全敗北しました。

https://learn.microsoft.com/ja-jp/azure/developer/github/github-variable-substitution

### 2. star_tweet

https://dev.to/okamos102/githubhack23-startweet-5e87

自分のリポジトリにスターをつけてくれた人にメンション付きツイートするActionです。

#### モチベーション
GitHubのAPIをちょこちょこ触ってて気づいたんです。
「**TwitterのアカウントをGitHubと連携していたら、アカウント情報を取得できる**」という事実に！

```bash
% curl -s https://api.github.com/users/<userId> | jq '.twitter_username'
```
（なんでTwitterだけ取得できるのでしょうか？インスタとかは無理でした。。。）

同時に何かの記事で[リポジトリにスターした際にワークフローを実行できる](https://docs.github.com/ja/actions/using-workflows/events-that-trigger-workflows#watch)ことも知りました。
これを組み合わせたら・・・

![1654710256742846464.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759541/9be4eaed-d8d0-f794-3d4f-8cdc04ca65f4.gif)

こんな感じでスターをしてくれた人にメンション付きツイートが送信されます✨

<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--U1N1KMTt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9wki43z6xfeqxck7lbv.png">

#### 振り返り
本当は1つTwitterのアカウントを作成してツイートさせようと考えていました。
しかし、実行元のリポジトリで認証キーを取り扱う方法がわからず断念しました・・・。いい方法があるのでしょうか？

### 3. ssm-to-heroku-env-action

https://dev.to/okamos102/shipping-environment-variables-from-aws-to-heroku-3i6a

最後はこちら！AWS SSM Parameter Storeの環境変数をHerokuに持ってくるActionです。

#### モチベーション

AWSの費用がちょっと高いなと思った私は、Herokuへのアプリケーションの移行を行いました。
環境変数は元々Parameter Storeで保管していたのですが
1. Herokuにポチポチ移動するのが面倒
2. もしAWSに戻すとき、今度はHeroku→Parameter Storeへ移動する必要がある

のような点から、Parameter Storeを正とし、Herokuはあくまでそれを参照するようなインフラを考えました。これを自動化するようなActionになります🚀

#### 振り返り

これは機能もそうですが、何よりソースコードをキレイに書けたことが嬉しいです😉
フレームワークなしでTypeScriptを書くことがほぼないので、いい経験になりました！

https://github.com/iisyos/ssm-to-heroku-env-action

## まとめ
GitHub Actionsの作成は思っていた以上に奥が深く楽しいです！みなさんもぜひハッカソンに挑戦してみてください！（Actionの作成方法は公式ドキュメントに詳しく載っています！）

https://docs.github.com/ja/actions/creating-actions

JavaScript・TypeScriptのテンプレートもあるので、ぜひ使ってみて下さい٩( ᐛ )و

https://github.com/actions/javascript-action

https://github.com/actions/typescript-action