{"pageProps":{"bread_crumbs":[{"name":"トピック一覧","href":"/topics","as":"/topics"},{"name":"フロントエンド","href":"/topics/[topic]","as":"/topics/[object Object]"}],"topic":{"id":"7g0_p4_2n4x","createdAt":"2021-04-11T08:01:16.410Z","updatedAt":"2021-04-11T08:01:16.410Z","publishedAt":"2021-04-11T08:01:16.410Z","revisedAt":"2021-04-11T08:01:16.410Z","name":"フロントエンド","posts":[],"path_name":"frontend"},"posts":[{"id":"9p_4c8cgyonl","createdAt":"2021-04-11T14:51:48.689Z","updatedAt":"2021-04-11T14:51:48.689Z","publishedAt":"2021-04-11T14:51:48.689Z","revisedAt":"2021-04-11T14:51:48.689Z","title":"MixLeap 勉強会 Study ＃64に参加したぜ","description":"こんにちは、よしでぶです。\nMixLeapの勉強会に参加しましたので報告します！今日のタイトルは『MixLeap Live Study ＃35 - 「フロントエンドのテスト効率化」』です！","body":"<p><a style=\"color:#007bff\" href=\"https://yahoo-osaka.connpass.com/event/201930/\" target=\"_blank\" rel=\"noopener noreferrer\">MixLeap Live Study ＃64 - 「フロントエンドのテスト効率化」</a> に参加</p><h2 id=\"heeeaaa9a75\">史 宇華さん「Yahoo! JAPANトップページの E2E テスト導入の話」</h2><p>ヤフーのトップページの開発を担当される<br>トップページのスマホ版の話<br>機能確認にはコストがかかる<br>理由：</p><ul><li>機能がたくさんある</li><li>多数なユーザ属性がある</li></ul><p>ってことで、機能確認のコスト削減のためにE2Eテストを導入した！<br>課題</p><ul><li>失敗しやすい（ネットワークの遅延）</li><li>フィードバックが遅い（テストの実行時間が長い）</li><li>コストが高い（導入コスト）</li><li>メンテナンスしにくい（デザイン変更）</li></ul><p>つまり、陳腐化しがち<br>陳腐化させないために</p><ul><li>安定性を高める</li><li>開発チームへの導入をサポート</li></ul><p>結果、継続できるE2Eテストを実現できるんじゃないかと考察される<br>質問も多く来ていて、たくさんの視聴者さんの興味を引いてました^^</p><h2 id=\"h7b50787f87\">三宮 肇さん「アクセシビリティ検証の自動化と、カラーコントラスト問題について」</h2><p>サービス横断デザインシステムの開発が主務<br>全社のWebフロントエンド技術の推進もされる<br>サービス横断システム「Riff」というものがある<br>スタイルガイドに則って作られたUIライブラリを提供している。</p><ul><li>Sketchライブラリ</li><li>Reactライブラリ</li></ul><p>Riffでアクセシビリティテストを導入している話。<br>アクセシビリティテストを実施できるOSSの導入</p><ul><li>@storybook&#x2F;addon-storyshots-puppeteer</li><li>aXe</li><li>acot</li></ul><p>カラーコントラストテストを行ってる、現状課題が多いらしい。。。<br>W3Cが定めるアクセシビリティのガイドラインがあり、4.5:1を満たさなければならない</p><h2 id=\"h2bb82a9e51\">宇城 毅犠さん 「フロントエンド開発初学者が自動テストで試行錯誤した話」</h2><p>学生の時はWebフロントエンド開発の経験はなかった<br>0の状態からフロントエンドの技術を身につけていったか<br>そこからテストをどうやって学んできたか<br>スキル習得のためにやったこと</p><ol><li>入門書を一通りなぞる：「なんとなくわかった」</li><li>ペアプロ：着眼点や考え方を学ぶ</li><li>データフローを理解する（インプットからアウトプットまでのデータの流れを理解する）</li></ol><p>テスト自動化の話<br>初めてのユニットテスト<br>最初はユニットテストの意味がわからなかったが、実際にやってみて</p><ul><li>ロジックミスを発見できる</li><li>修正箇所があっても動作を担保できる</li></ul><p>ってことがわかった。<br>結果、自分の書いたコードの質が向上！<br>リソースが足りない時もユニットテストを書くべき？<br>→明確な答えはないが、書くのは厳しそう。<br>ユニットテストの捉え方</p><ul><li>コードの質を向上させる一つの手段</li><li>アプリの動作を担保するものではない</li><li>質の高いコードを書くために経験しておきたい</li></ul><p>テストに対して感じたこと・考えていること</p><ul><li>ユニットテストは実装と同じタイミングで実装したい</li><li>自動化＝コスト削減とも限らない</li><li>E2Eテストやインテグレーションテストの網羅はとても厳しい</li></ul><p>ユニットテストの捉え方に共感する視聴者が多くみられたのが印象的でした！</p><h2 id=\"h23ce4a7115\">パネルトーク</h2><p>事前に参加者から募ったフロントエンドのテストに関する質問・課題を抜粋してトークテーマにした。</p><h3 id=\"h70d0b58800\">エンジニアのフロントエンドテストに対する捉え方</h3><p>社内の雰囲気的にはテストは大事にしてる<br>フロントエンドはユーザが一番先に触るところなので不安な点が多いが、テストがあると安心する<br>個人的に、t-wadaさんのテストの話は良い<br>コードの質を上がるし、実装の質もアップする気がする</p><h3 id=\"h039aee65f5\">フロントエンドのテストの価値について</h3><p>プロダクト開発において、長期的な視点に立った時に、長期的にユーザに価値を提供するって考えたら良いと思う<br>最初はチーム内で普及してなかったが、ペアプロなどの活動を通してテストの知見を共有するという方法をとったことがある</p><h3 id=\"hdfb8101df1\">テストを手動でやるか&#x2F;自動化するか問題</h3><p>自動化のデメリットはコスト、仕様変更とか、確かに存在する<br>各サービスで絶対に落としてはいけないところはどこだろうって考えてコアなところからテストを自動化していくって判断基準が良いかも<br>テストは投資に近いですよねー<br>初期コストと運用時にかかるコストがあり、運用時にかかるコストが低い方が良いとは思う。長期的なスパンを考えると良いかも</p><h3 id=\"h0fe2cebd43\">フロントエンドテストの技術選定</h3><p>ビジュアルリグレッションテスト（reg-suit）がおすすめ<br>Storybook<br>自分もむしろ教えて欲しいw<br>playwrightは本当におすすめ！</p>","thumbnail":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/0b7bcd5fe9254e2abbb4a65b7e4a98a6/about.png","height":630,"width":1200},"topics":[{"id":"qyq-p49fyxj4","createdAt":"2021-04-11T08:00:02.719Z","updatedAt":"2021-04-11T08:00:02.719Z","publishedAt":"2021-04-11T08:00:02.719Z","revisedAt":"2021-04-11T08:00:02.719Z","name":"イベント報告","posts":[],"path_name":"event-report"},{"id":"7g0_p4_2n4x","createdAt":"2021-04-11T08:01:16.410Z","updatedAt":"2021-04-11T08:01:16.410Z","publishedAt":"2021-04-11T08:01:16.410Z","revisedAt":"2021-04-11T08:01:16.410Z","name":"フロントエンド","posts":[],"path_name":"frontend"}],"category":{"id":"6tg5du2jx","createdAt":"2021-04-11T07:55:46.137Z","updatedAt":"2021-04-11T07:55:57.125Z","publishedAt":"2021-04-11T07:55:57.125Z","revisedAt":"2021-04-11T07:55:57.125Z","name":"Web開発","path_name":"web-develop","logo":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/90ef5ba6a28045f8a80261a594973d43/web_develop.svg","height":85,"width":111},"description":"プログラミングや開発設計、フロントエンドやバックエンド、データベースやネットワークのインフラ等、分野問わず私が経験したWeb開発の話を発信していきます。","posts":[]}}],"service_url":"https://yotteq.net"},"__N_SSG":true}