今回はKanbanGantt(仮)の技術構成(テックスタック)について紹介します。

KanbanGantt(仮)を開発する大きな理由の一つに「タスク管理サービスを無料で使いたい」という貧乏根性まるだしの理由がありますが、それを実現するためにサーバー代などのランニングコストはあまりかけたくありません。
ただし、タスク管理サービスの性質上、オンラインで複数人のプロジェクトメンバーと情報は共有しなければいけませんので、サーバーの無いオフラインで動作するアプリというのもできません。

AWS Amplify

そこで今回のプロジェクトで採用したのがサーバーレスアーキテクチャです。
レンタルサーバーやVPS、AWS EC2などのクラウドサービスなど、探せは安いものはありますが、サーバーレスアーキテクチャはそれよりもさらに、そして遥かに安価です。(システム構成やサービスの性質上、サーバーレスの方が高くつくということはあり得ますが、そういうのは例外として。)

レンタルサーバーの様にサーバーが常時稼働している場合、月額料金だったり、稼働時間に応じた課金になります。
サーバーレスでは、ユーザーからのリクエストがあった場合、その処理に必要な分だけサーバーを利用します。よって処理にかかった時間や回数などに応じた課金になります。
(なので、"サーバーレス"といっても完全にサーバーが存在しないわけではありません。)

サーバーレスアーキテクチャのサービスを開発するにあたって、AWS Amplifyというフレームワークを採用しました。

サーバーレスアーキテクチャのフレームワークは他にもいくつかありますが、AWSに慣れていたのと、前職でAmplifyを使った経験があったので今回もAmplifyにしました。

このAmplifyというヤツが中々の曲者で、一応ドキュメントは充実しているのですがいざ実際のサービス開発となると、どう使ってよいのか困惑する場面が多々あります。
ドキュメントに書いていないことだったり、バグだったりと闘いながら根気よく理解を深めてきました。
この開発日誌を書こうと思い立った理由の半分はAmplifyのノウハウを書きたかったからです。それらの記事はまた追々書いていければと思います。念のため断っておくと、Amplifyを悪く言うつもりはなくてむしろ私はAmplifyが大好きです。

ちなみに、私はAmplifyの様にちょっとクセのあるツールに惹かれる傾向があります。やりたいことを実装するために、ノウハウが必要だったり(大抵そういうものはドキュメントの隅っこや、誰かのブログで書かれている。)、バグかと思ったものがよく調べるとよく考えられた末の正しい挙動だったり。
こういったツールは単なる「使いづらいツール」とは一線を画す何かがあります。うまく言語化できませんが。
私の好きなツールで他にvvvvやHoudiniというものがありますが、Amplifyもそれらと同じ様な匂いがします。

Amplifyは裏側ではLambdaやDynamoDB、S3などのAWSコンポーネントが使われていますが、それらはAmplifyコマンドにより自動で設定されますので、詳しいバックエンド構成は割愛します。

GraphQL

クライアント-サーバー間の通信はRESTful APIが使われることが多いですが、KanbanGantt(仮)ではGraphQLを使用しています。
特にRESTful APIに不満を持っていたわけではないですが、Amplify開発ではGraphQLが推されているのでそのまま使用した形です。
新しい技術要素に触れてみたかったというのが大きいです。

GraphQLも最初はとっつきにくいですが本一冊読めば大体のことはわかります。
こちらはおすすめです。

まだ今のところRESTful APIよりGraphQLにして良かった! と強く思えるような場面には遭遇していませんが、デフォルトでサブスクリプションの機能があるのは面白いなと思いました。
未実装ですが、他のユーザーがタスクを登録すると、リアルタイムで自分のPCで表示している画面に反映したりできそうです。

VTL

GraphQLのサーバー処理(リゾルバー)を記述するのにVTLという言語を使います。これがまたすごい大変…。読みにくいし…。

と、誰しもが思っていたのでしょう。最近VTLは廃止予定となり、JavaScriptを使用する方法に舵を切りました。KanbanGantt(仮)もJavaScriptに移行していきたいと思います。

TypeScript

バックエンドの話はこれくらいにしてフロントエンドに行きましょう。フロントエンドの言語はTypeScript。
数年前までは(貧弱なPC使っていたこともあり)一々ビルドに時間かかって、こんなもん使ってられるか…と思ったこともありましたが今は後述するViteの助けもあって快適です。
TypeScriptの良さを語れる程には思い入れはないですが、よく言われる静的型付けになったことによって、エディタのコードの補完が効きやすくなったのが一番良さを実感するポイントです。
ちなみに、私はあまり言語の違いや型付けが動的なのか静的なのかとかはどっちでも良い派です。

Vite

Viteの無いフロントエンド開発は考えられなくなってしまいました。プロジェクト作成から開発サーバーの起動、リアルタイムにコード変更を反映しながらの動作確認する環境が速攻で組みあがり、快適すぎます。

Vue.js

フロントエンドのフレームワークはVue.jsを使用しています。
Vue.js大好きです。

Pinia

ステート管理はPiniaを使用しています。

Vitest

テストフレームワークはVitest。

Bulma

CSSフレームワークはBULMAを使っています。

ぱっと見が可愛く前々から気になっていたので今回使ってみましたが、BootstrapやFoundation、Tailwindと比べるとちょっと機能不足やUIの整理が出来ていない気がします。とはいえ今更変える程でもないので、しばらくはBULMAを使うことにしました。

以上、KanbanGantt(仮)の技術構成でした。
それではまた次回。