Calendarへの参加も今年で4回を数えます。フロントエンドなAndyです。Applicationの世界にも静的型付けの考え方が浸透してきました。VuexのようなRepositoryレイヤーからUIコンポーネント内のビジネスロジック、ひいてはDOMにいたるまで一気通貫に型の恩恵を感じることのできる開発体験は、今後もしばらくメイントレンドとして受け入れられていくことでしょう。このように型という「銀の弾丸」によって一見安全な世界が保証されたかに見えるフロントエンド開発ですが、実は無視することのできない大きな課題が残されています。それは「ネットワーク境界」という壁です。ネットワーク境界における課題と既知の解(この章はWebアプリケーション開発を経験したことのある開発者の方には自明の内容かと思うので、読み飛ばしていただいて結構です。)まず前提としてWebブラウザで動くSPAとバックエンドのAPIサーバーではその実行環境も、デプロイのサイクルもセキュリティモデルも監視の方法も全てが基本的に異なります。そのようなコンテキストの差異を吸収するほどの抽象的なプログラミングメンタルモデルがまだ(*2019年12月現在)浸透していない以上、この二者は基本的に別個のアプリケーション単位として実装されることとなるでしょう。アプリケーション単位が分散するということは、実務という具象においてもコードベースそのものや利用されるプログラミング言語・フレームワーク・ライブラリ等に必然的に差異が発生するわけで、まさにそのうちの言語・FWにおける差異が今回の課題の発端となります。雑にいうならば「TSという銀の弾丸を活用したいフロントエンド開発」と「TSの利用をそもそもの前提としていないバックエンド開発」という二項対立な状況ですね。いう概念を生み出しました。Bufferなどでしょうか。これらの共通点はドキュメンテーション用途での手軽さだけでなく、Codegenによって実装に組み込むことのできるClient/Serverを自動生成できる点にあります。仕様として確定したAPI定義を人間の手で実装に落とし込むのではなく、機械に一気通貫でやらせてしまえというわけですね。SchemaからTypeScriptで利用するコードを自動生成するCodegenです。Clientは実装としての具象度がやや高めです。codeは使い勝手が悪かったりします。Clientを作るのに便利なコードを自動生成するよ!」くらいの温度感で開発しました。記事執筆時点の段階でSqueletteが提供するツールはこんな感じ。lernaを使ってmonorepoで管理しています。社内でDogFoodingしたら、v1に上げようかと考えています。parse関数を提供してくれるくんmonorepo全体での共通型などもexportしています単体で利用されることは想定していませんが、自前のTS向けCodegenを作成したり独自templateを利用したい際に活用していただければと思います。componentとして定義したリソース型も自動生成してくれる使い方は簡単。file、プロジェクト名、出力先を指定して実行します。Pets;それぞれ変換されます。file、プロジェクト名、出力先を指定して実行します。APIRequest<U>は下記のようなシグネチャを持っています。Clientを定義してあげれば下記のように利用できるわけです。Objectを自動生成してくれます。}};factory関数の型を定義してあげてるのがこだわりポイントです。Squeletteの今後まずはちゃんとtestとexampleを追加します。(この記事の公開までにはやろうと思ってたけど忙しすぎて間に合いませんでした。SideをTSで書くためのCodegenを追加する予定です。例としてはExpressやfastifyのmiddlewareやrouterを想定しています。Resource用のtemplateを自動生成するのも面白そうかなーなんて考えたり。APIの定義をするだけで型安全な世界が手に入れられるような仕組みを作っていければ嬉しいです。怠惰なエンジニアとしてあるべき姿を標榜していきたい。Thanks最後になりましたがSqueletteのために素晴らしいロゴデザインを提供して生命を吹き込んでくれたコウガくん(@_pilecks)に感謝です。Identityの議論ができてすごく楽しかったなー。本当にありがとうございます!また、業務時間を使っての本ツールの開発と本番環境への投入を快諾していただいたクライアント様各社にもこの場を借りて謝辞を伝えたいと思います。明日はkmconnerさんの記事です。