はい、では始めましょう！

---

皆さん、こんにちは！マイクです！今日は2024年12月22日、土曜日です！今日も「zenncast」のお時間がやってまいりました！さあ、今日はZennでトレンドの記事をいくつかご紹介しますよ！

まずは、前回紹介した記事ですが、今回は特に触れることはありませんので、さっそく今日の内容に移りましょう！

今日紹介する記事の本数は、全部で5本です！それでは早速、最初の記事からご紹介しますね。

1つ目の記事は「学校向けサイトに Cloudflare Turnstile を使わないで！」というタイトルです。この内容では、Cloudflare TurnstileやUnder Attack Modeを学校向けサイトに使わない理由について解説しています。実は、学校のフィルタリングシステムがプロキシを利用しているため、Cloudflareが多くのリクエストを同一IPからのものと勘違いしてしまうことがあるんです。これが原因で、Turnstileを導入したサイトにアクセスできない生徒が増えてしまう恐れがあります。

具体的な事例としては、Quizletの使用が制限されていることが挙げられています。このように、Cloudflare Turnstileが影響を及ぼすサービスは他にもあって、CanvaやChatGPT、Padletなども同様の問題を抱えています。学校でのWebサービスを開発する際には、Cloudflare Turnstileは避けて、GoogleのreCAPTCHAやhCAPTCHAを使うことが推奨されていますよ。著者は、日本の学校のフィルタリング事情を考慮するように求めています。

次に、2つ目の記事に進みます！タイトルは「ユーザー名をURLに含めるなら@始まりにするとよさそう」です。この提案では、ユーザー名をURLに含める際に、`@`で始まる形式が好ましいとされています。これにより、ユーザー名にシステムで使う文字列が含まれるリスクを軽減し、URLをより整然と見せることができるんです。

多くのサービスがユーザー名をURLに使っていますが、`/user/{ユーザー名}`のような形式はあまり普及していないようです。Mediumが初めてこの形式を採用したのですが、今ではサブドメイン方式に移行しています。Twitterも一時的に試みましたが、最終的にはリダイレクトのみに留まったんです。一方で、YouTubeや最近のmixi2などがこの形式を採用していて、注目を集めています。

この`@`始まりのURLの利点は、ユーザー名が明示的で、視覚的にもおしゃれに見える点です。ただし、URLとして慣れ親しんでいないため、ユーザーにとっては異質に感じることもあります。また、フィッシング攻撃のリスクも指摘されていますので、注意が必要ですね。

さて、3つ目の記事に参りましょう！タイトルは「オニオンアーキテクチャにおけるテストコーディングガイド」です。この内容では、オニオンアーキテクチャにおけるテストの書き方について具体例を交えながら解説しています。特に、インテグレーションテストとユニットテストの重要性が強調されています。

Domain層では、EntityやValueObjectに対して網羅的なユニットテストを書くことが推奨されています。DomainServiceについては、実装に依存しない振る舞いを重視し、ユニットテストとインテグレーションテストをうまく使い分ける必要があります。

Application層では、ApplicationServiceがユースケースを正しく実現できるかを確認するためのインテグレーションテストが推奨されています。Infrastructure層では、基本的にインテグレーションテストが主流で、必要な部分を慎重に判断することが求められます。

Presentational層では、ControllerやFileParserは薄い設計を心がけつつ、複雑な処理には単体テストが必要になります。全体として、テスト設計にはガイドラインを参考にし、適切にテストを実施することが推奨されています。

それでは、4つ目の記事に進みます！タイトルは「getServerSidePropsがわかれば'use client'がわかる」です。この記事では、React Server Components（RSC）について、その仕組みや使い方が解説されています。RSCは、コードを「サーバー」と「クライアント」の2つの環境に分けて、特定のマーカーを使って実行環境を示します。

具体的には、`import 'client-only'`はクライアント環境専用のコードを指定し、`import 'server-only'`はサーバー環境専用を示します。これにより、境界が明確になり、データのやりとりが効率的に行えるんです。

App Routerでは、RSCの仕組みを活用し、`'use client'`を使って境界を設定します。RSCは柔軟な境界の変更や多様なデータ型のシリアライズを可能にし、開発者にとって使いやすくなっています。このように、サーバーとクライアントのデータのやり取りが一層スムーズになることが期待されます。

さて、最後の5つ目の記事に行きましょう！タイトルは「Live2DをWebで動かしたい！」です。この内容では、Live2DモデルをWeb上で動かす方法について、公式SDKと`pixi-live2d-display`を使ったアプローチが紹介されています。

公式SDKでは、モデルファイルを適切に配置し、`npm`コマンドでビルド・サーブを行うことで動作を確認します。モデルのカスタマイズには、`model3.json`ファイルを編集してモーションを定義する必要がありますよ。

一方、`pixi-live2d-display`を用いると、モデルの読み込みや表示が簡単になります。このライブラリは`PIXI.js`を基盤にしており、リップシンク機能もサポートされているため、音声に応じた口パクも可能です。

Next.js環境での実装についても触れられており、サーバーサイドレンダリングを考慮したスクリプトの動的インポート方法が説明されています。これにより、依存関係のエラーを回避しつつ、Live2Dコンポーネントを適切にマウントできるようになります。

さて、今日はここまでで、5本の記事を駆け足でおさらいしました！学校向けサイトのCloudflare Turnstileの利用について、ユーザー名をURLに含める際のスタイル、オニオンアーキテクチャのテストガイド、React Server Componentsの仕組み、そしてLive2DモデルのWebでの動かし方についてお伝えしました。

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