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