おはようございます、皆さん！「zenncast」にようこそ。今日も元気にお届けします、マイクです。今日は2024年6月20日、木曜日ですね。さて、今日もZennでトレンドの記事を紹介していきますよ。
前回は「Apple Intelligence時代のApp Intents設計」、「Server-Sent Events を複数パターンで実装して理解を試みる」、「Datadog でアラート通知の質を向上させるための取り組み」といった興味深い記事をお届けしましたが、覚えている方も多いでしょうか？
さて、今日は4つの記事をご紹介します。まずはその本数からお伝えしますね。
今日紹介する記事は全部で5本です。それでは、一つずつ見ていきましょう。
....
まず一つ目の記事は「【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み」です。この記事は、Next.jsを用いたSSR（サーバーサイドレンダリング）とクライアントルーティングの違いや通信パターンについて解説しています。
この記事では、SPA（シングルページアプリケーション）の誕生と原始的SSRの歴史を振り返りながら、初回表示時にデータがない状態で表示される欠点をSSRで解決する方法を紹介しています。Next.jsは、初回レンダリング時にはSSRを用い、ページ遷移時にはクライアントルーティングを行うことで、通信処理とHTML組み立て処理を一つのコードでまかなう仕組みを説明しています。
具体的には、`getServerSideProps`を使用してデータを取得し、クライアントルーティング時には`/_next/data/...`経由でデータを取得する仕組みが詳しく解説されています。Networkタブでの動作確認や実際の開発に役立つ情報が満載です。特に、ジュニア〜ミドルレベルのエンジニアにとって有益な情報が含まれており、社内勉強会の資料としても活用できます。
....
次にご紹介するのは、「本番環境のテーブルカラムを安全に変更する」という記事です。データベースのテーブルカラムを本番環境で安全に変更する方法についての解説がされています。
具体的な例として、`books` テーブルの `description` カラムのデータ型を `VARCHAR(255)` から `TEXT` に変更する手順が紹介されています。既存のカラムを直接変更するのではなく、新しいカラムを追加し、アプリケーションのコードを変更して少しずつデータを移行する方法が取られています。この方法により、データの整合性を保ちつつ、サービスを停止させずに変更を行うことができます。
手順としては、新しいカラムの追加、データの移行、アプリケーションのコード変更、古いカラムの削除が含まれます。この方法は、ロールバックが必要になった場合でも安全に対応できるため、非常に実用的な手法です。
....
3つ目の記事は「銀行振込の入金確認を自動化した話」です。令和トラベルの高橋氏による、海外旅行予約アプリ「NEWT」での銀行振込の入金確認を自動化した事例が紹介されています。
クレジットカード以外に銀行振込も提供していたため、お客様の手間や社内の業務工数が増える課題がありました。これを解決するために、GMOペイメントゲートウェイのPGマルチペイメントサービス内のバーチャル口座機能を導入しました。これにより、予約ごとに固有のバーチャル口座を作成し、入金があるとWebhookで通知を受け取る仕組みを実装しました。
この仕組みにより、経理担当が手動で入金確認を行う手間が省け、お客様への負担も軽減されました。企業のリソースを効率的に活用するための実例として非常に参考になります。
....
続いては、「Nianticが発表したWeb3D/WebXR開発のためのビジュアルエディター「Niantic Studio」について」という記事です。Nianticは、Web3DおよびWebXRコンテンツの開発を支援する新しいビジュアルエディター「Niantic Studio」を発表しました。
このツールは、シーンのオーサリング、ライブプレビュー、シミュレーション機能を備えており、エンジニアやクリエイターが視覚的にコンテンツを作成しやすくしています。UnityやBlenderに慣れ親しんだ方には馴染みやすい操作性を提供し、エディタで行った変更が即座にプレビューに反映されるため、開発スピードが向上します。
Niantic Studioは、Entity Component System（ECS）を採用しており、柔軟なカスタマイズが可能です。今後の機能拡張や改善にも期待が寄せられています。
....
最後にご紹介するのは、「React 19 RCのSuspenseに関する問題と現状のまとめ」という記事です。React 19 RCにおけるSuspenseの問題について解説されています。
React 18では並列にレンダリングされていたコンポーネントが、React 19 RCでは直列にレンダリングされるよう変更され、その結果パフォーマンスの低下が報告されています。Reactチームはこの問題に対して対応する方針を示しており、レンダリング方式を選択できるオプションの提供が検討されています。
最終的には適切な解決策が見つかることが期待されていますが、現状のまとめとして、問題の詳細とReactチームの対応策について詳しく解説されています。
....
今日もたくさんの興味深い記事を紹介できましたね。次回もお楽しみに！詳しい内容はショーノートに書いてありますので、ぜひチェックしてみてください。また、番組の感想もお待ちしています。それでは、マイクでした。良い一日をお過ごしください！