Cafeアクセスお問い合わせフロントエンドテスト勉強会フロントエンドテスト勉強会こんにちは。技術チームでインターンをしている柴田です。今月の社内勉強会は高崎さん主催でフロントエンド開発改善についての勉強会を開催しました!レガシーフロントエンドレガシーコードというものがありますが、一般的に仕様が把握されていないコードでネガティブな言葉として利用されています。フロントエンドでもこうしたものは存在しています。長い間手を加えてないなどが挙げられます。した問題のあるフロントエンドの改善の方法について説明していただきました。フロントエンドのテスト今回は改善方法としてフロントエンドのテスト方法を以下の3つほど紹介していただきました。今回はE2Eテストとビジュアルリグレッションテストの概要だけ取り上げたいと思います。テストは二つのツールを用いて行いました。(https://jestjs.io/ja/)→フロントエンド向けテストフレームワークの一つでFacebook社がOSSで開発。Chrome向けのAPI。ブラウザを起動せずにコマンドラインでChromeを操作することができます。jest-puppeteerのコマンドでインストールできます。E2Eテストの場合のテスト内容としてはJestを用いて1.HTMLファイルをロード2.テストしたいHTML要素(例えば#title)が描画されることを確認3.その要素、ここでは#titleに「ページタイトル」などテストしたい文字列が付与されているかをチェックするといった具合に行います。一方でビジュアルリグレッションテストではJestの機能により事前にページのスクリーンショット(__image_snapshots__)がキャプチャされます。Viewの修正をして後にもう一度スクリーンショットがキャプチャされます。それらのスクリーンショットの差分を1px単位で比較することができます。差分がある場合にはエラーとともに差分画像(__diff_output__)が出力されます。E2Eと同じような例だと次のような流れになります。※1回目ではない場合が正しい時にはテスト実行時に̶updateSnapshotオプションを追加することでそれを正しいものとすることができます。今回は2つの概略だけ説明しました。どちらのテストの方法がいいというわけではなく、使いどころを見極めて利用することが必要だと思います。「TypeScript」の二つがあります。ここでは特にモジュール分割について説明します。既存関数で機能が多すぎるものを小さく分割します。分割した関数をexport/importすることで既存の機能と同じものを実現します。Javascriptではモジュール間の依存関係解決に便利なモジュールバンドラ(webpack)というものを利用することができます。イメージとしては下の画像です。Entryファイルを決めて、その後に分割された関数が依存関係を考慮した上でwebpackによって一つのファイル(dist用ファイル)にコンパイルされるような感じです。モジュール分割のメリットとしては以下の点が挙げられます。依存関係の解決はモジュールバンドラが行うため、人間が考えなくても良いViewファイルが参照するものはいつでもwebpackでコンパイルしたdist用のファイルであるので、JSの変更はViewから切り離せるメンテナンスはコンパイル前の分割されたファイルについて行えばいいので非常に楽になります。まとめリファクタリングの王道としてはまず仕様の正確な把握があります。その上でこれはテストをすべきかなどの意思決定を行い、テストを書きます。この工程をきちんとしすぎることは逆効果にもなるので最初は小さな部分やすぐに必要な部分に行うと良いと思います。リファクタリングの効果は短期的には現れないので長期的な目が必要だとも思います。感想まだフロントエンドの勉強は始めていないため、わからない部分もありましたが非常に勉強になったと思います。フロントエンドにもテストがあるということを初めて知りました。印象に残ったのは画像を使ってテストをするビジュアルリグレッションテストの話です。CommentsRubyメタプログラミング勉強会を実施しました。Reserved.FacebookTwitterEmail。