はい、こんにちは!マイクです!今日は2024年8月28日、火曜日です。さて、今日の「zenncast」では、Zennでトレンドの記事を紹介しますよ!

それでは、まず今日の内容紹介に移りましょう!

今日紹介する記事は全部で5本です。それでは、1つ目の記事から始めましょう!

1つ目の記事は、「弊社のフロントエンドのテストについて、考え方・方針・やっていることなど全部紹介します(2024年版)」です。

この記事では、ソーシャルPLUSのフロントエンドチームによるテスト手法とその方針について詳しく紹介しています。フロントエンドのテストはプロジェクトやチームの性質に応じて異なるため、具体的な事例を通じて実務に役立つ情報が提供されています。

フロントエンドチームは5名で、設計からリリースまで全工程に関わっているそうです。主に3つのReactベースのBtoBウェブアプリを開発し、モノレポによる管理を行っています。

テストの種類は静的解析や結合テスト、ユニットテスト、E2Eテストなどがあり、特に結合テストに重きを置いているとのこと。テストの目的は、機能が正しく動作することの確認と将来的な問題発見の迅速化です。

また、テストは全実装に対して何らかの形で行い、可能な限り自動化を進めているそうです。静的解析ツールにはESLintやPrettier、TypeScriptを使用し、結合テストにはJestとReact Testing Libraryを採用しています。さらに、Playwrightを用いて本番環境でE2Eテストを実施しているとのことです。

課題としては、ESLintのルール設定の複雑化やテスト実行速度の問題、VRTにおける差分検出のブレなどが挙げられていますが、今後の改善に向けた意向も示されています。

さて、次に進みましょう!次の記事は「Web標準のバックエンドアプリのテスト」です。

この内容では、Cloudflare Workers、Deno、BunなどのWeb標準に対応したバックエンドアプリのテスト手法について解説しています。テストは非常にシンプルで、実際のサーバーを立ち上げずにリクエストとレスポンスの抽象化されたやり取りを試験することが特徴です。

最初に、簡単なアプリを作成し、`fetch`ハンドラを定義。次に、Bunを使用してテストを作成し、レスポンスのステータスコードやボディを確認する方法を示しています。また、Honoフレームワークを用いた場合のテスト方法も紹介されています。Honoでは、テストがより効率的に行えるよう設計されており、簡潔なコードで同様のテストが実行可能です。

さらに、Cloudflare Workers固有のBindingsやExecutionContextのテスト方法も言及されており、特にKVストレージを利用した具体例を通じて実際のテストコードの記述方法が解説されています。

さて、3つ目の記事に行きましょう!タイトルは「package.jsonでのバージョン指定は完全固定にしよう」です。

この記事では、`package.json`におけるバージョン指定について解説しています。デフォルトで緩やかになっているバージョン指定は、意図しない挙動を引き起こす可能性があるため、バージョンを完全に固定することが推奨されています。

例えば、`"package-name": "^5.4.3"`という指定は「5.4.3以上かつ6.0.0未満」を意味しますが、意図せず動作を変更することが多いため、`"package-name": "5.4.3"`のように完全に固定するべきです。

また、npmやpnpmではインストール時に`-E`オプションを付けることで、現在のバージョンを固定することが可能で、設定ファイルに`save-exact=true`を記載することでデフォルトでバージョンを固定することもできます。

一方で、ライブラリを公開する場合は、バージョンを完全に固定することは望ましくなく、利用者にとっての柔軟性を持たせるために、範囲指定を行うことが重要です。

.. .. ..

さあ、4つ目の記事に移りましょう!タイトルは「autoなheightでもアニメーションができるようになる!calc-size() について」です。

Chrome129からデフォルトで使用可能になる`calc-size()`関数について紹介しています。この新しいCSS機能は、固有サイズ設定キーワードの実際の数値を計算に利用できるようにするもので、アコーディオンなどの可変高さ要素に対してCSSのみでアニメーションを追加することが可能になります。

使い方は、`calc-size(<basis>, <calculation>)`という形で、第1引数に使用したい設定キーワード、第2引数に計算式を指定します。この機能を活用すると、アコーディオンの実装がシンプルになり、従来のJavaScriptやグリッドを使用した複雑な方法から解放されるとのことです。

ただし、`calc-size()`は要素の固有サイズが変化した場合のアニメーションには対応していないため、使用する際は注意が必要です。また、全てのブラウザでまだ対応していないため、`auto`をフォールバックとして用意しておくと安全です。

.. .. ..

さて、最後に5つ目の記事です!タイトルは「Go1.23 New Features」です。

Go1.23が2023年8月13日にリリースされ、多くの新機能が追加されました。主な変更点はイテレータ関数の本格導入や型エイリアスの型パラメータ、Go Telemetryの導入、コマンドの改良などです。

特に、イテレータ関数が正式にサポートされることで、ループの際に柔軟な型を扱えるようになりました。また、型エイリアスに型パラメータが使えるようになり、よりダイナミックな型定義が可能になりました。

さらに、HTTP関連の変更もあり、エラーハンドリングの改善が行われています。これにより、Go言語はさらに使いやすくなり、エンジニアにとっての開発効率が向上しています。

.. .. ..

さて、今日は以上の5本の記事を紹介しました!振り返りますと、フロントエンドのテスト手法、Web標準のバックエンドアプリのテスト、package.jsonのバージョン指定の重要性、calc-size()によるアニメーションの実現、そしてGo1.23の新機能についてお話ししました。

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

Related episodes

内容の近いエピソードを推薦しています