皆さん、おはようございます！マイクです。今日は2024年7月19日、金曜日です。ようこそ「zenncast」へ！今日もZennでトレンドの記事を紹介していきますが、その前に、前回ご紹介した記事を少し振り返ってみましょう。

前回は「Vitest Browser Modeがアツい」、「GCPという呼び名はもう古いので気をつける」、そして「DDDを実践するための手引き（ドメインイベント編）」についてお話ししましたね。特に、Vitest Browser Modeについては、新しいテスト環境の可能性を感じさせる内容でした。

さて、今日紹介する記事は全部で5つあります。早速いってみましょう！

まず1つ目の記事です。「より良いユーザー体験を求めて "角丸" を深掘りする」。この記事では、Flutter製アプリのデザイン品質を高めるために「角丸」について深掘りしています。特に「Corner smoothing」という技術が注目されています。これは通常の角丸よりも滑らかな印象を与える技術で、人間にとってより優しい印象を与えるそうです。

Flutterでの角丸表現には`RoundedRectangleBorder`がよく使われますが、これではCorner smoothingが実現できません。代わりに`ContinuousRectangleBorder`を使う方法があり、Radiusに「x 2.3529」を掛けることで意図した形状に近づけることができます。

また、`figma_squircle`や`smooth_corner`といったパッケージも紹介されています。これらを使うことで、Corner smoothingを簡単に実装することができますが、それぞれのパッケージには利点と欠点があるため、プロジェクトに応じて適切なものを選ぶ必要があります。

デザイナーとエンジニアがこうしたデザインの微細な部分について議論することで、より良いユーザー体験を提供できることが強調されています。特にFlutterを使用する際には、エンジニアもデザインについて深く理解することが求められます。

....

次に2つ目の記事です。「つくりながら学ぶ！生成AIアプリ＆エージェント開発入門」を出版しました。2024年7月18日にこの書籍が出版されました。この書籍は昨年出版したWEB Bookの進化版で、実際に「作って動かす」体験を通じて技術を学ぶスタイルを継続しています。

今回の書籍では、ClaudeやGeminiなど複数のLLMに対応し、LangChainを使用して新たなモデルが登場しても柔軟に対応できる点が強調されています。また、LangChainの`AgentExecuter`を使って情報検索やカスタマーサポート、データ分析などのAIエージェントを簡単に実装する方法が解説されています。

LangChainとStreamlitの新機能を活用し、AIアプリとエージェントでStreaming表示を簡単に実現する方法も紹介されています。さらに、OpenAIの新プロダクト、例えばDALL-E 3による画像認識・生成やAssistants APIを使った実装も取り上げられています。

本書に掲載されたコードはGitHubのレポジトリに保存され、読者が直接アクセスして活用できるようになっています。生成AI技術の基本的な考え方や実装方法を学びたい方にとって、長く活用できる内容となっています。興味のある方はぜひ手に取ってみてください。

....

3つ目の記事です。「VercelのEdge Requestに課金が発生している！」。Vercelの新料金体系が2023年6月から適用され、Proプランにおいて「帯域幅」と「機能」が細分化されました。これに伴い、Edge Requestという新たな課金項目が追加されました。

Edge Requestは、エッジネットワークへのすべてのリクエストに対して課金されます。著者のプロジェクトでは、Edge Requestの使用量が多く、従量課金が発生しています。ユーザーがサイトにアクセスする、商品を閲覧する、カートを更新するなどのすべての段階でEdge Requestが発生し、特にPV数が多いサイトでは課金が増えることが分かります。

Edge Requestを減らすための対策として、再レンダリングの削減、fetchリクエストの最適化、Linkコンポーネントのprefetchの除去が挙げられています。ただし、PV数が多いプロジェクトでは、これらの対策を講じても課金を完全に抑えることは難しいです。

Edge Requestの料金は地域によって異なり、日本ではTokyo Regionの場合、100万リクエストごとに$2.6となっています。Proプランでは、1,000万リクエストを超えると追加料金が発生します。VercelのProプランを使用中のエンジニアや、他のホスティングサービスと比較したい方は、この新料金体系を考慮する必要があります。

....

4つ目の記事です。「tfcmtのいい感じのテンプレート」。TerraformとGitHubのCI連携に便利なツール「tfcmt」のデフォルトコメントフォーマットは英語であったり、削除・追加の変更がわかりづらかったりする問題がありました。これを解決するために、2024年6月に改善されたtfcmt用のテンプレートが作成され、チーム内で運用が開始されました。

このテンプレートの特徴は、リソースの追加・変更・削除が色分けされることです。追加は緑、非破壊的変更は黄色、削除または破壊的変更は赤で表示されます。また、コメントがコンパクトで、リソースが多くても折りたたみ表示されるため、見やすさが向上しています。さらに、日本語化されているため、日本人エンジニアにとって読みやすいのも特徴です。

テンプレートの設定例も記事内で紹介されており、実際の運用に即した内容となっています。Terraformを使用するエンジニアにとって、非常に便利な情報が満載のこの記事、ぜひチェックしてみてください。

....

最後、5つ目の記事です。「Typescript これ使ってみて Part 1」。この記事では、TypeScriptの新しい機能をいくつか紹介しています。まず、`using` キーワードについて説明しています。これはリソースの管理を簡単にするもので、リソースの解放を自動化します。特にテストコードで有用です。

次に、`const T` という定数型パラメータについて紹介されています。これにより、ジェネリック関数の型推論をより具体的に行うことができます。例えば、`useStatus`関数に`const T`を使うと、戻り値がより具体的な型になります。

最後に、`Awaited` ユーティリティ型についても触れられています。これはPromiseが解決する型を抽出するために使用され、ネストされたPromiseでも対応可能です。Reactの開発では、非同期fetchデータをuseStateに型定義する際に非常に便利です。

これらの新機能は、TypeScriptの最新バージョンで導入されており、開発効率を大幅に向上させます。次回の記事では、さらに多くの機能を紹介する予定ですので、お楽しみに。

....

さて、今日は「より良いユーザー体験を求めて "角丸" を深掘りする」、「つくりながら学ぶ！生成AIアプリ＆エージェント開発入門」、「VercelのEdge Requestに課金が発生している！」、「tfcmtのいい感じのテンプレート」、そして「Typescript これ使ってみて Part 1」の5つの記事をご紹介しました。詳しい内容はショーノートに書いてありますので、ぜひチェックしてみてください。

今日もzenncastをお聞きいただきありがとうございました。次回もお楽しみに。それでは、良い一日をお過ごしください！マイクでした。