去る1月15日、韓国NHN本社において第15回「TOAST FORWARD」が開催されました。
NHN FORWARDとは、IT関連の最新トレンド、技術情報などを技術者間で共有し、組織や企業全体の技術レベルを向上させることを目的に、NHNで開催している技術カンファレンスです。2020年最初の教育プログラムは、「フロントエンドテスト – 基礎から実践まで」のテーマで、FE開発ラボのキム・ドンウさんにご登壇いただきました。

本セミナーのレジュメ

以下のような内容で進行されました。テスト、およびテスト駆動開発（Test-Driven Development: TDD）の必要性と、定義を確認した後は、参加者が実習を通じて理解を深めていくという内容です。

本セミナーを通しての目標

• 今や開発時にテストコードを作成するのは当然のこととされていますが、どのような方法でテストを作成するのがよいかについては、明確なガイドを見つけることが難しい状況です。
• 特にフロントエンドの開発では、視覚的要素を処理しなければならず、ユーザーのさまざまな実行環境も考慮する必要があるため、テストコードの作成がより困難な状況です。
• また、フロントエンドには数多くのテストツールが存在しますが、開発方式の発展速度があまりにも速く、ある程度の経験がなければ、プロジェクトに合わせてツールやテスト戦略を選択するのが困難です。
• 今回のセミナーでは、さまざまなプロジェクトでの試行錯誤によって蓄積された経験に基づき、実際の実務に役立つ最も重要なノウハウを習得できるように、次のような内容を扱います。
  • フロントエンドのコードをテストする環境とさまざまなツールを調べて、それぞれの長所と短所について理解する。
  • TDDの概念を理解し、実践を通してJestの基本的な使い方とTDDの開発サイクルを学習する。
  • 良いテストコードの条件について調べ、テストのコストと効果を考慮した効率的なテスト戦略の重要性を理解する。
  • 視覚的要素と機能的要素を分離する理由を調べ、DOM Testing Libraryを用いてアプリケーションの状態を効率的にテストする方法を学習する。
  • Mockオブジェクトの使用とユニットテストと統合テストの長所と短所を理解し、Cypressを用いて統合テストを作成する方法を学習する。

本セミナーの進め方

• このセミナーはフロントエンド開発者向けのため、実習を進行するにはJavaScriptの文法やNode.js基盤の開発ツールなどに慣れている必要があります。幸いに参加者のほとんどがフロントエンドの開発者で、実習を進行する上で全く無理がありませんでした。
• セミナー後半は実務的な内容を多く取り扱いますが、最初の1〜2時間は入門者のためにテストの種類、TDD、テスト環境などの基礎概念を詳しく説明します。そのためテストに慣れ親しんでいる方は、最初の1〜2時間が若干退屈に感じられるかもしれません（もちろんそのような方にも基礎知識をより強固にできる良い機会になります）。今回参加いただいた方は、フロントエンドのテストを作成した経験があまり多くなかったので、最初から非常に高い集中力で授業に参加している印象を受けました。
• このセミナーで特に重点的に扱う内容は、視覚的要素と機能的な要素を分離するものです。しかし、すべての内容を4時間以内で発表したことがなく、ストーリーブックを使って視覚的要素を管理する内容を実習に落とし込む部分までは進行することができませんでした。代わりに昨年末のNHN FORWARDの発表で準備したデモ映像をいくつか使用して、可能な限り実際の適用例をたくさんお見せすることにしました。

セミナー後記

• 終了後、多くの方から質問をいただきました。「今ちょうど業務でテストを導入しようとしていますが、どのようにすればよいか分かりませんでした」「実際にテストコードを作成していますが、途方もなくテストすることが多く、十分にテストできているか不安です」という方も大勢いらっしゃいました。あらためて感じたことが、現業のフロントエンド開発者が最も難しいと感じている部分が、「テストコードをどのように作成すればよいか」についてガイドラインがないという点でした。
• 私たちも数年にわたりテストを作成しながら同じような経験をしました。たくさんの試行錯誤を経てさまざまな試みを行い、その過程で少しずつノウハウを蓄積することができました。このセミナーは、その数年間の経験で得られた結果を他のフロントエンド開発者たちと最大限に共有することで完成した内容です。うれしいことに、多くの方からこれまで苦労していた部分が解決できたと感謝のフィードバックをいただくことができました。
• 最も記憶に残ったフィードバックを紹介します。「”視覚的要素のテストが技術的に難しく、費用対効果が大きくない場合は、自動化しなくてもよい”という言葉が、大きく私の心を慰めてくれました。実際のところテストにはまだまだ幻想が多いように思われます。テストカバレッジは高くなければならないし、テストコードは多ければ多いほど良く、すべてをテストしなければならないと思います。しかし、本当に重要なのは、実際にこのテストが開発スピードと品質の向上に役立つかであり、そのためにテストにかかるコストと効果を考慮することは必須だと思います。」この重要かつシンプルな教訓を得るために、私たちのチームでは実際に数多くの試行錯誤を経験してきました。このセミナーに参加されたみなさんが、私たちの経験を最大限に活かして、最小限でより意味のあるテストを作成できるように願っています。

参加者の声

• JavaScriptのテストについて、よく整理された資料をインターネット上から見つけるのに苦労していましたが、講師がまとめてくださった資料のおかげで大きな流れと学習の方向を見つけることができました。
• フロントテストで悩んでいた内容が整理でき、イメージでテストするストーリーブックなどを知ることができてよかったです。
• 充実した講義資料と実習がとても役立ちました。
• サンプルコードと並行して進めていく方式もよかったです。
• フロントエンドのテストをしながら蓄積されたノウハウを聞くことができてよかったです。参加者が理解しやすいように、ユニットテストから回帰テストまで段階的に準備していただき勉強になりました。
• 単純な使い方のほかに実例（公開可能なサンプル）コードがあったら、もっと有用だったと思います。
• たくさん準備されて臨まれていると感じました。会社に戻ってから学んだ内容を復習して、うまくテストを作成できるようにがんばりたいです。
• 講義がとても上手でした！内容を初級者レベルに合わせて説明いただき、理解しやすかったです。

2020年のTOAST FORWARD運営計画

過去に15回のセミナーを運営し、多くの方々に参加いただきました。
参加いただいた方々にアンケートを行い、よかった点や残念な点についてもご回答いただきました。残念な点としては、セミナー会場へのアクセスが不便であること、もっと多くの人員が収容できる場所にしてほしいというご意見を多くいただきました。限られた空間で進行していたので、大勢の方々をお迎えすることができず、私たちも残念な気持ちでいっぱいです。

2020年には「TOAST FORWARDが行く！」のキャッチコピーで、私たちが直接現場を訪ねてみたいと思います。詳細は、後日TOASTページ（https://www.facebook.com/toast.nhnjp/）に更新する予定ですので、今後の活動にもぜひご期待ください！