入社して早々、QA指摘潰しやリファクタリングの作業に取り掛かっているのですが、正直なところ言語系のチュートリアルをまともにやっていない状態だと何もわからない…。
というわけで、休日を使って基礎から勉強したので、ログを残す。
今日は実際に手を動かして何か作ってみよう!ということで、2つのWebアプリを作ってGitHub Pagesに公開するところまでした。
作ったもの(1)寿司タイピング
遊べます: https://238sakurai.github.io/sushi-typing-game/
お寿司のネタをローマ字でタイピングするシンプルなゲームです。
主な機能
- 30秒/60秒のゲームモード
- マグロ、サーモン、ネギトロなど10種類のネタ
- WPM(1分間あたりの単語数)やタイプ率の計測
- 3...2...1のカウントダウン演出
技術スタック
- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS
遊べます: https://238sakurai.github.io/kuku-time-attack/
子どもが楽しく九九を学べるWebアプリです。うちの子と一緒に遊べるように作ってみた。
主な機能
- タイムアタック&練習モード
- キャラクター選択(犬・猫・鳥・恐竜・車)
- 正解するたびにキャラクターが走る演出
- 青空と草原の背景
- 効果音(ON/OFF可能)
- ベストタイム保存
- 間違えた問題の復習モード
技術スタック
- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS
- Web Audio API(効果音)
LINE から Minecraft サーバを操作できる Bot を開発中。
参考にした記事
AWSで低コストなMod環境のMinecraftサーバー構築[前編] - クロスパワークラウドブログ
元記事では Discord Bot を使っているが、今回は LINE Bot に置き換えて実装している。スポットインスタンスを使ったコスト削減や、EBSスナップショットでのワールドデータ永続化など、インフラ構成の部分が参考になった。
構成の概要
- LINE Bot を AWS Lambda 上で動かす
- LINE からメッセージを送信してサーバを起動/停止
- スポットインスタンスでコスト削減
- EBS スナップショットでワールドデータを永続化
- AWS CDK(TypeScript)でインフラをコード管理
学んだこと
- LINE ビジネスアカウントの登録(初めて登録した)
- LINE Messaging API の設定
- AWS CDK を使った Infrastructure as Code
- Lambda + API Gateway の構成
Cursor に MCP を接続した
ここまでできたのは、Cursor エディタに MCP(Model Context Protocol)を接続して、AIアシスタントから外部ツールを直接操作できるようしたから。
接続した MCP サーバ
| MCP サーバ |
用途 |
| Context7 |
ライブラリの最新ドキュメントを取得 |
| Notion |
Notion との連携 |
| Figma |
Figma デザインの参照・操作 |
| GitHub |
リポジトリ、Issue、PR、Actions の操作 |
| spec-workflow |
仕様書ワークフローの管理 |
| aws |
AWS リソースの操作 |
| terraform |
Terraform ドキュメント検索、コマンド実行 |
できるようにはなってないけど、触れた事。
- AI に指示するだけで GitHub の Issue 作成や PR 確認ができる
- Terraform のリソース情報を調べながらインフラコードを書ける
- ライブラリの最新ドキュメントを参照しながらコーディングできる
- Figma のデザインを見ながら実装できる
学んだこと
1. GitHub Actions による自動デプロイ(IaC/CI/CD)
今回初めて GitHub Actions を使って自動デプロイを設定した。
.github/workflows/deploy.yml にワークフローを書くと、main ブランチにプッシュするたびに自動でビルド → GitHub Pages にデプロイされる。
これが Infrastructure as Code (IaC) の考え方。手動でやっていた作業を「コードで定義」して自動化できるのは便利。
2. Next.js の静的エクスポート
GitHub Pages で Next.js アプリを公開するには、next.config.ts に以下の設定が必要だった:
const nextConfig = {
output: 'export',
basePath: '/リポジトリ名',
images: { unoptimized: true },
};
個人的に一番嬉しかったのがこれ。
今まで作ったものをローカルで動かすだけで終わっていたが、GitHub Pages を使えば無料でインターネットに公開できる。
友達や家族に「これ作ったよ」と見せられるのが良い。
4. AWS CDK と IaC
Minecraft サーバの構築で AWS CDK を触ってみた。TypeScript でインフラを定義できるのは、普段のコーディングと同じ感覚で書けて良い。
まとめ
12月20日は、2つのWebアプリを作成してGitHub Pagesに公開するという流れを一通り体験できた充実した1日だった。
業務ではいきなりコードを触っているけど、やっぱり基礎から手を動かして学ぶのは大事だと実感。これからも休日に少しずつ勉強を続けていきたい。
リポジトリ
- https://github.com/238sakurai/sushi-typing-game
- https://github.com/238sakurai/kuku-time-attack