こんにちは、マイクです！今日は2024年9月6日、金曜日ですね！さて、今日はZennでトレンドの記事をいくつか紹介していきますよ〜！

まず、前回紹介した記事は「ウェブエンジニアでもWasmを使いたい! アフタートーク」「Cloud Run のサービスメッシュを試した」「簡単にシームレスな遷移を実装！View Transitions APIでページ遷移を進化させる」の3本でしたね。あれこれ盛りだくさんでしたが、今日は新しい内容に移ります！

それでは、今日紹介する記事の本数は全部で5本です！

最初の1本目は、「URLシェアを支える技術 lz-string」です。

Webアプリにおいて、URLシェア機能を実装する時に、情報をクエリ文字列にそのまま含めると、文字数制限に引っかかることがあります。そこで「lz-string」というライブラリを使うことで、URLセーフな形式でデータを圧縮できるんです！具体的には、`compressToEncodedURIComponent`というAPIを使って、データを圧縮します。

例えば、589文字の長文を圧縮すると、407文字に短縮され、約7割もサイズが小さくなります。この圧縮したデータは、共有先で`decompressFromEncodedURIComponent`を使って復元できます。TypeScript PlaygroundやReact Compiler Playgroundでの実際の使用例もあって、URLを開くだけで同じ状態を再現できるんです。

ただし、注意点もあって、lz-stringは暗号化機能を持たないので、機密データの共有には不向きです。また、復元データの形式チェックやクロスサイトスクリプティング対策も必要です。要するに、lz-stringはURLでのデータシェアに便利なツールですが、セキュリティには注意が必要ですね。

。...。

次の2本目は、「Real World ISUCON ~海外ツアー検索のパフォーマンスチューニングの事例~」です。

海外旅行アプリ『NEWT（ニュート）』では、増加するツアー数に伴い、検索機能のレスポンス遅延が問題になっていました。2024年7月に行ったパフォーマンス改善では、MySQLからElasticsearchへ移行し、レスポンス時間を大幅に短縮しました。改善前のピーク時のレスポンスは4.9秒から1.3秒に減少し、ローディングアニメーションなしでの表示が可能になったんです！

改善策として、ツアーデータの非正規化を行い、Elasticsearchを利用して1次フィルタで在庫確認を完結させることができました。また、料金計算にはGraphQLとDataLoaderを利用し、データベースへのクエリ数を削減。これによってレスポンス速度が1〜2秒向上しました。

今後もパフォーマンスのさらなる向上を目指して、理想的な検索体験の実現に向けた改善に取り組む予定です！いいですね〜！

。...。

続いて3本目は、「Azure OpenAIでStructured Outputsを使う！」です。

2024年9月4日にAzure OpenAI Serviceに新機能「Structured Outputs」が追加されました。この機能は、OpenAIが提供する自然言語処理を使ったアプリケーションとの連携を強化し、ユーザーの入力を解析して構造化されたデータを生成することができるようになります。

これにより、開発者が指定したスキーマに100%一致するデータが生成されるため、より安定したデータ処理が期待できます。利用するにはgpt-4oモデルおよび2024年8月6日以降のバージョンが必要です。

Structured Outputsでは、String、Number、Boolean、Objectなどの型がサポートされていますが、いくつかのキーがサポート外となっているため、より安全にデータを扱うことができます。また、Function Callingでも利用できるため、開発者にとっては強力なツールですね！

。...。

4本目の記事は、「Zag.js が良いかもしれない」です。

Zag.jsは、Chakra UIのユーザーがランタイムCSS-in-JSのパフォーマンスを考慮して、移行先として注目したライブラリです。Zag.jsは状態管理に特化したフレームワーク非依存のライブラリで、複雑でインタラクティブなUIコンポーネントを実装するためのツールキットです。

状態の数や状態間の遷移を定義することで状態管理が行われ、例えばトグルの実装では、activeとinactiveの2つの状態を管理して、クリックイベントで遷移させることができます。Zag.jsの魅力は、状態管理のコア部分がフレームワークに依存せず、グローバル状態をProxyオブジェクトで監視している点です。

今後もZag.jsを深く学びながら、フレームワーク依存の少ないコンポーネントの実装に挑戦していく意向だそうです。これからの展開が楽しみですね！

。...。

最後の5本目は、「TypeScript 5.6の更新点など: Cybozu Frontend Weekly (2024-09-03号)」です。

2024年9月3日のサイボウズ Frontend Weeklyでは、最新のフロントエンド関連ニュースが取り上げられました。新機能として、TypeScript 5.6 RCでは、if文の条件が常に`true`または`false`である場合に警告を出す機能が追加されました。

また、Nuxt 3への移行やMaterial UI v6リリース、TypedSQLの導入、Storybookを用いたコンポーネントテストなど、多くのトピックが紹介されました。これらの情報はフロントエンドエンジニアにとって重要なアップデートで、実際のプロジェクトに活かせる内容が多く含まれています！

。...。

さて、今日は5本の記事をおさらいしてきました！URLシェアを支える技術、海外ツアー検索のパフォーマンスチューニング、Azure OpenAIの新機能、Zag.jsの魅力、そしてTypeScriptの最新情報についてお話ししましたね。

次回もまたお会いできるのを楽しみにしています！詳しい内容はショーノートに書いてありますので、ぜひチェックしてください。番組の感想もお待ちしていますよ！それでは、またね〜！