feature image

2023年2月8日 | ブログ記事

#毎日ポケモンしりとり ばーじょんあっぷ

こんにちは、@d_etteiu8383です。半年ほど前に作成した「毎日ポケモンしりとり」のバージョンアップを行いました。今回はその内容(主に使用技術のメモ)について紹介します。

毎日ポケモンしりとり
毎日更新されるポケモンしりとりに挑戦しよう

アップデート内容

新しいポケモン

毎日ポケモンしりとり公開時はポケモンSV発売前でしたが、今回のアップデートで新ポケモンを追加しました。計1008匹のポケモンが登場します。

ちなみに半年前の公開したブログ内で以下のように紹介しましたが、ペルシアンはまだ救われていません。

なお、"セ", "ヘ", "ペ"で終わるポケモンがまだ登場していないため、名前がこれらの文字で始まる11匹の救われないポケモンがまだ存在します。
特にペルシアンは

ことから、現状、他ポケモンと一緒にしりとりに参加できないポケモンとなっています。かなしい。

デザイン

毎日ポケモンしりとり のページデザイン

シンプルなデザインに変更しました。

以前はドットフォントを使用してポケモン感を演出していましたが、最近のポケモンといえばフォントワークスのロダンなのでフォントも一新しました(ロダンは高いので使っていませんが...)。

使用技術メモ

本アプリはバックエンド、フロントエンド共に@d_etteiu8383一人で開発を行いました。バックエンドはTypeScript + Express、フロントエンドはTypeScript + Solidで構成されています。

チーム開発ではないこと、そして一発ネタのアプリであるため、仕様技術の選定は「新しい」「面白そう」を優先して行いました。堅牢性やメンテナンス性はあまり考慮していません。

モノレポ

本アプリはフロントエンドとバックエンド間で一部共通のコードを使用しており、これらを管理するために pnpm + Turborepo でmonorepo環境を作成しています。
予想以上に簡単に設定できて良かったです。ビルドもめっちゃ早い。

Fast, disk space efficient package manager | pnpm
Fast, disk space efficient package manager
Turborepo
Turborepo is a high-performance build system for JavaScript and TypeScript codebases.

バックエンド

TypeScript + Expressの構成です。以前のバージョンでもExpressを使用していたのですが、当時はバックエンドについてほぼ無知であり、雰囲気でコードを書いていました。

今回はまず最初にOpenAPI仕様を決定し、バックエンドとフロントエンドが共にこれに依存するような設計にしました。

express-openapi

express-openapiはExpressのミドルウェアで、

等を自動で行ってくれます。

express-openapi
An unopinionated OpenAPI framework for express. Latest version: 12.1.0, last published: 2 months ago. Start using express-openapi in your project by running `npm i express-openapi`. There are 42 other projects in the npm registry using express-openapi.

これにより、OpenAPI仕様を書くだけでほとんどバックエンドの実装が完了してしまいました。
本アプリは小規模なものであり、エンドポイントも少ないのですが、十分に自動生成の恩恵を受けることができました。

express-openapiの特徴や使用方法については以下の記事が詳しいです。

OpenAPI + Express.js + TypeScriptでAPI開発するTips
FORCIAアドベントカレンダー14日目の記事です。今日はOpenAPIを用いた型安全なAPIの開発手法について、弊社の事例を紹介します。
express-openapiを試してみた
フォルシアではOpenAPIでAPI定義を書いてから、APIを実装するのが一般的になってきました。APIの実装についてはTypeScriptとexpressを利用することが増えてきている状況です。今回はexpressとOpenAPIをより強固に結びつけるためのモジュールとしてexpress-openapiを見つけたので試してみました。

フロントエンド

Solid

https://www.solidjs.com

フロントエンドにはSolidを使用しました。というかReactもVueも書けないだけなのですが...

とてもシンプルで使いやすく、僕の肌に合ったライブラリと行った感じです。

ZennQiitaでもSolidの記事が増えてきており、コミュニティの活性化も感じられます。

macaron

macaron — Colocated CSS-in-JS with zero-runtime
Typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity. Macaron is a new compile time CSS-in-JS library with type safety.

macaronはゼロランタイムのCSS-in-JSライブラリです。

それってほとんどvanilla-extractでは?と思われるかもしれませんが、大きな違いとして、macaronではスタイルとコンポーネントを同じファイルに書くことができます。

vanilla-extractはスタイルを別ファイルに書いてexportし、コンポーネント側でimportする必要があります。もちろんコンポーネントとスタイルを別ファイルで管理することのメリットもあるとは思いますが、一人で開発していることもあり、管理ファイルの削減や可読性を優先してmacaronを選択しました。

openapi-generator-cli

GitHub - OpenAPITools/openapi-generator-cli: A node package wrapper for https://github.com/OpenAPITools/openapi-generator
A node package wrapper for https://github.com/OpenAPITools/openapi-generator - GitHub - OpenAPITools/openapi-generator-cli: A node package wrapper for https://github.com/OpenAPITools/openapi-generator

OpenAPI仕様からクライアントコードを生成するツールです。今回はTypeScript Axiosをターゲットにコードを生成しています。これによりフロント側でもAPI通信に関するコードはほぼ書いていません。

おわりに

本アプリは一発ネタであり、今後もメンテナンスを行う予定はありません(新ポケモンの追加は行う予定)。しかし、開発を通して得た知見は今後の開発に役立てていきたいと思います。目指せ†フルスタックエンジニア†。

正直な話をすると、就活を意識してポートフォリオに載せられるものを今のうちにたくさん作っておこうというのが動機でしたが、単純にモノを作るのって楽しいですね。今後もいろいろ作っていきたいと思います。

d_etteiu8383 icon
この記事を書いた人
d_etteiu8383

19の"でっていう"です グラフィック班とゲーム班所属 3DCGメインでいろいろ活動しています Vtuberっぽいこともしてたりしてなかったり

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2022年9月26日
競プロしかシラン人間が web アプリ QK Judge を作った話
tqk icon tqk
2022年9月16日
5日でゲームを作った #tararira
Komichi icon Komichi
2021年4月2日
DXライブラリで重力パズルゲームを作る
Macky1_2 icon Macky1_2
2023年3月13日
GoでWebSocketのテスト書く
Ras icon Ras
記事一覧 タグ一覧 Google アナリティクスについて