皆さん、おはようございます！マイクです。2024年7月12日、金曜日の朝、いかがお過ごしでしょうか？今日も「zenncast」にお付き合いいただきありがとうございます。さて、今回はZennで今日トレンドの記事を紹介していきます。

前回ご紹介した「時系列データのための大規模言語モデル」「クリーンアーキテクチャをパン工場で説明する【Go】」「RAG vs ファインチューニング（コーディング性能で比較）」、皆さんチェックしていただけましたか？どれも興味深い内容でしたね。.

さて、今日は5つの記事を紹介していきますよ。

まず一つ目の記事は「結局 useEffect はいつ使えばいいのか」です。Reactを使った開発をしている方には必見の内容です。`useEffect`はReactの中でも扱いが難しいフックであり、コンポーネントの純粋性と副作用に関連して使用されます。純粋なコンポーネントは冪等で、副作用がないことが前提ですが、実際の開発では副作用を完全に排除することは難しいですね。そこで登場するのが`useEffect`です。この記事では、`useEffect`の使い方を具体例を交えて詳しく説明しています。特に、コンポーネントを外部システムと同期させるためにどう使うか、そしてエフェクトのライフサイクルについても触れられています。公式ドキュメントを参照することの重要性も強調されていますので、React開発者の方はぜひチェックしてみてください。

....

次に二つ目の記事、「CSSの擬似要素に代替テキストをつける」です。この記事では、CSSの擬似要素`::before`や`::after`に代替テキストをつける方法を紹介しています。`content`プロパティにおいて`/`で区切って代替テキストを指定することができるんですよ。例えば、星のアイコンに対して「Favorite」という代替テキストを指定する方法が具体例として挙げられています。この機能はChrome 77から実装されており、最新のChromeでは`attr()`関数を使って動的にHTMLのattributeの値を参照することもできます。各ブラウザ間で若干の差異があるものの、今後この機能が普及すれば、擬似要素のアクセシビリティが向上することが期待されています。開発者の方には一読の価値ありです。

....

三つ目の記事は「より良いユーザー体験を求めて "ボタン" を深掘りする」です。Flutterでボタンを一から作成する際のポイントを詳しく解説しています。まずは、HoverやPressedの状態を考慮したボタンの設計について触れています。`InkWell`を使用してUIの状態を表現し、マテリアルデザインのState layersの概念を活用する方法が説明されています。次に、アクセシビリティを考慮したボタン設計について、`Semantic`を使ってスクリーンリーダー対応を促進する方法が紹介されています。また、デスクトップアプリを考慮したボタン設計についても詳しく解説されており、`MouseRegion`や`Focus`、`Actions`を用いた設計方法が具体例とともに紹介されています。Flutterでボタン設計を学びたい方には非常に有益な内容です。

....

続いて四つ目の記事、「スタートアップなのにフロントエンドのテストカバレッジが90%を超えている話 | Resilire Tech Blog」です。この記事はResilireのエンジニア、奥村さんが執筆したもので、フロントエンドのテストカバレッジを90%以上保っている理由と戦略について詳しく説明しています。特にIntegration Testを重視し、APIレスポンスのモックを活用して低コストで高いカバレッジを実現している点が注目ポイントです。また、テスト文化の醸成や実装コストの削減についても具体的な方法が紹介されています。Resilireのテスト戦略は非常に参考になるので、テストカバレッジを向上させたいと考えている開発者の方はぜひ読んでみてください。

....

最後に五つ目の記事、「その try-catch、意味がありますか？NestJSにおける例外処理の戦略 | TrustHub テックブログ」です。この記事では、NestJSを用いた例外処理のベストプラクティスについて紹介しています。まず、try-catchを多用することの問題点や、例外をログに出力するためにcatchを使うことの実用性について触れています。提案として、例外が発生しうる箇所で逐一try-catchを書かないこと、そして逐一ログ出力のコードを書かないことが挙げられています。これを実現するために、NestJSのglobal exception filterを活用する方法が紹介されています。また、例外発生時にログを出力するために、custom exception filterを作成し、global exception filterを拡張する方法も具体的に説明されています。TypeScriptやNestJSを使用している開発者には必見の内容です。

....

さて、今日は「結局 useEffect はいつ使えばいいのか」「CSSの擬似要素に代替テキストをつける」「より良いユーザー体験を求めて "ボタン" を深掘りする」「スタートアップなのにフロントエンドのテストカバレッジが90%を超えている話 | Resilire Tech Blog」「その try-catch、意味がありますか？NestJSにおける例外処理の戦略 | TrustHub テックブログ」の5つの記事をご紹介しました。詳しい内容はショーノートに書いてありますので、ぜひチェックしてみてくださいね。今日も最後までお付き合いいただきありがとうございました。次回もお楽しみに！皆さんからの感想もお待ちしています。それでは、またお会いしましょう！