こんにちは、@d_etteiu8383です。半年ほど前に作成した「毎日ポケモンしりとり」のバージョンアップを行いました。今回はその内容(主に使用技術のメモ)について紹介します。
アップデート内容
新しいポケモン
毎日ポケモンしりとり公開時はポケモンSV発売前でしたが、今回のアップデートで新ポケモンを追加しました。計1008匹のポケモンが登場します。
ちなみに半年前の公開したブログ内で以下のように紹介しましたが、ペルシアンはまだ救われていません。
なお、"セ", "ヘ", "ペ"で終わるポケモンがまだ登場していないため、名前がこれらの文字で始まる11匹の救われないポケモンがまだ存在します。
特にペルシアンは
- "ぺ"で終わるポケモンがいない
- "ン"で始まるポケモンがいない
ことから、現状、他ポケモンと一緒にしりとりに参加できないポケモンとなっています。かなしい。
デザイン
シンプルなデザインに変更しました。
以前はドットフォントを使用してポケモン感を演出していましたが、最近のポケモンといえばフォントワークスのロダンなのでフォントも一新しました(ロダンは高いので使っていませんが...)。
使用技術メモ
本アプリはバックエンド、フロントエンド共に@d_etteiu8383一人で開発を行いました。バックエンドはTypeScript + Express、フロントエンドはTypeScript + Solidで構成されています。
チーム開発ではないこと、そして一発ネタのアプリであるため、仕様技術の選定は「新しい」「面白そう」を優先して行いました。堅牢性やメンテナンス性はあまり考慮していません。
モノレポ
本アプリはフロントエンドとバックエンド間で一部共通のコードを使用しており、これらを管理するために pnpm + Turborepo でmonorepo環境を作成しています。
予想以上に簡単に設定できて良かったです。ビルドもめっちゃ早い。
バックエンド
TypeScript + Expressの構成です。以前のバージョンでもExpressを使用していたのですが、当時はバックエンドについてほぼ無知であり、雰囲気でコードを書いていました。
今回はまず最初にOpenAPI仕様を決定し、バックエンドとフロントエンドが共にこれに依存するような設計にしました。
express-openapi
express-openapiはExpressのミドルウェアで、
- OpenAPI仕様に従ったルーティング
- リクエストパラメータのバリデーション
- リクエスト・レスポンスの型生成
等を自動で行ってくれます。
これにより、OpenAPI仕様を書くだけでほとんどバックエンドの実装が完了してしまいました。
本アプリは小規模なものであり、エンドポイントも少ないのですが、十分に自動生成の恩恵を受けることができました。
express-openapiの特徴や使用方法については以下の記事が詳しいです。
フロントエンド
Solid
フロントエンドにはSolidを使用しました。というかReactもVueも書けないだけなのですが...
とてもシンプルで使いやすく、僕の肌に合ったライブラリと行った感じです。
ZennやQiitaでもSolidの記事が増えてきており、コミュニティの活性化も感じられます。
macaron
macaronはゼロランタイムのCSS-in-JSライブラリです。
それってほとんどvanilla-extractでは?と思われるかもしれませんが、大きな違いとして、macaronではスタイルとコンポーネントを同じファイルに書くことができます。
vanilla-extractはスタイルを別ファイルに書いてexportし、コンポーネント側でimportする必要があります。もちろんコンポーネントとスタイルを別ファイルで管理することのメリットもあるとは思いますが、一人で開発していることもあり、管理ファイルの削減や可読性を優先してmacaronを選択しました。
openapi-generator-cli
OpenAPIToolsOpenAPI仕様からクライアントコードを生成するツールです。今回はTypeScript Axiosをターゲットにコードを生成しています。これによりフロント側でもAPI通信に関するコードはほぼ書いていません。
おわりに
本アプリは一発ネタであり、今後もメンテナンスを行う予定はありません(新ポケモンの追加は行う予定)。しかし、開発を通して得た知見は今後の開発に役立てていきたいと思います。目指せ†フルスタックエンジニア†。
正直な話をすると、就活を意識してポートフォリオに載せられるものを今のうちにたくさん作っておこうというのが動機でしたが、単純にモノを作るのって楽しいですね。今後もいろいろ作っていきたいと思います。
