こんにちは！マイクです。今日は2024年11月19日、月曜日ですね。皆さん、元気にお過ごしでしょうか？さて、今日の「zenncast」では、Zennでトレンドになっている記事をいくつかご紹介しますよ！
さて、前回紹介した記事についてですが、今回はお便りが届いていないので、さっそく今日の内容紹介に移りますね。
今日ご紹介する記事は全部で5本です。それでは、さっそく最初の記事からいきましょう！
1つ目の記事は「Ubieが2024年にReact Nativeを選ぶ理由」です。Ubieは2024年初頭に、IonicからReact Nativeにアプリをリプレイスしました。その理由として、技術資産や事業展望へのフィット感が挙げられています。特に、フルスタックTypeScriptを採用しているため、React NativeのTypeScript対応が大きな魅力だとか。さらに、Webアプリ資産の活用も容易で、統一された環境が保てるんです。ただし、Webアプリとのシナジーは薄いと感じているようで、デザインやナビゲーションの違いからReactの考え方をそのまま適用するのは難しいとのこと。ExpoのContinuous Native Generationによってアップデート作業が簡素化され、管理負担が軽減されるのもポイントですね。パフォーマンス面では、Hermesエンジンへの移行や新アーキテクチャの導入が進み、リッチなアプリが実現可能に。UbieはReact Nativeの可能性に賭け、コミュニティの活性化を目指しているそうです。
。...。
2つ目の記事は「Next.jsのsearchParamsはas stringせずに必ずバリデーションしてくれ。またはvalibotのちょいテクニック」です。Next.jsの`searchParams`は、型が`string | string[] | undefined`で、型チェックが複雑なんですね。このため、型をごまかすような使い方は避け、必ずランタイムでバリデーションを行うべきだとされています。具体的には、同じパラメーターキーを複数指定した場合、`string[]`として受け取られることがあるため注意が必要です。`valibot`を使用すると、検索パラメータのバリデーションが宣言的に行え、バンドルサイズが小さく記述も簡潔です。具体的な実装例では、`fallback`を使用してバリデーション失敗時にデフォルト値を設定する方法が紹介されていて、Next.jsにおける安全性を高める手助けになるようです。
。...。
3つ目の記事は「2024年6月から2024年10月までに登場したWeb技術のつまみ食い (MyWebちぇんじろぐ2024part2)」です。この期間に、Googleがサードパーティークッキーの廃止を延期し、新機能を導入することになりました。また、モバイルファーストインデックスが導入され、デスクトップ版Googlebotが廃止されるなど、SEO対策としてモバイル最適化が重要になっています。Chromeのデベロッパーツールの改善では、CPUのスロットリング機能が追加され、より現実に即したデバッグが可能になりました。Firefoxでは生成AI機能が追加され、右クリックで要約や翻訳ができるように。TypeScriptの新機能やWebAssembly関連の進展もあり、GitHubではCopilot Chatが導入され、自然言語での質問が可能に。これらの進展は、エンジニアにとって非常に便利な開発環境を提供しているようです。
。...。
4つ目の記事は「GitHubでファイル差分が表示されない！？レビューを快適にするための差分の非表示ロジックを解説」です。GitHub上で、あるファイルが突然「generated file」と判定され、プルリクエストの差分が表示されなくなる問題が発生しました。特に、Go言語ではファイル冒頭に`// Code generated`というコメントが含まれると自動的に「generated file」と見なされるので、これが原因で差分表示がされなくなったそうです。解決策としては、`.gitattributes`で明示的に差分表示の条件を設定する方法や、`gqlgen`の設定ファイルでそのコメントの生成を省略する設定をすることが提案されています。これにより、GitHubの差分表示に関するルールを理解し、適切に対処することが重要だとされています。
。...。
5つ目の記事は「ChromeのDocument Picture-in-Picture APIを試してみた」です。この新しいAPIは、任意のDOM要素をミニプレイヤーとして表示できる機能を提供します。Google MeetやSpotifyなどで活用されており、ユーザーは他の作業をしながらも重要な情報を常に目に留めることが可能になるんですね。具体的には、`documentPictureInPicture`オブジェクトを使ってウィンドウを表示します。ウィンドウのサイズや内容をカスタマイズでき、常に他のアプリケーションの上に表示されるため、見た目もスッキリしています。興味がある方は、ぜひ実際にAPIを試してみてくださいね。
さて、今日の内容を駆け足でおさらいしてみましょう！UbieがReact Nativeを選んだ理由や、Next.jsのsearchParamsのバリデーション、最近のWeb技術の進展、GitHubのファイル差分の問題、そしてChromeのDocument Picture-in-Picture APIについてお話ししました。
次回お会いできるのを楽しみにしています！詳しい内容はショーノートに書いてありますので、ぜひチェックしてくださいね。それでは、番組の感想もお待ちしております！またね！