こちらの記事は「MEDLEY Summer Tech Blog Relay」の19日目の記事です🎉 今週はFY25新卒エンジニアの4人が連続して記事をお届けします！
はじめに
こんにちは！株式会社メドレーの人材プラットフォームでソフトウェアエンジニアをしている池田です。
最近、Claude Codeの学習モードなど、AIを活用した技術力向上の取り組みが注目されていると感じています。
ただし、デフォルトの仕組みだけではUIの挙動を確かめながら学ぶフロントエンド開発の学習には十分ではありません。
そこで私は、仮想ブラウザを操作できる Playwright MCP を使って学習を行ってみました。
本記事ではPlaywright MCPを使用した学習で得たメリット・デメリットを紹介したいと思います。
Playwright MCPの導入方法・機能については多くの記事があるので、本記事では割愛します。
本記事のゴール
- フロントエンド学習にAIを活用したい方に、Playwright MCPを使うことのメリット・デメリットを知っていただくこと
- フロントエンド学習の方法を考える際に、Playwright MCPを選択肢のひとつとして検討してもらうこと
Playwright MCPを使うメリット
結論から言うと、Playwright MCPを使うことのメリットは、AIがブラウザ上の実際の動きとコードの処理を関連付けて解説してくれる点です。
AIはPlaywright MCP経由でブラウザを操作し、その動作結果とコードの処理を対応付けて説明してくれます。これにより「コードだけでは気づけなかった学び」を得ることができます。
実例
Reactで実装しているプロジェクトで、次のような問題がありました。
現象 : 要素を選択できるDialog(モーダル)で、Dialogを一度閉じて再度開くと、以前の選択内容がそのまま残ってしまう。
私は、コンポーネントが画面から消えればアンマウントされ、状態も初期化されるものだと理解していました。そのため、なぜ状態が保存されてしまうのかをすぐには理解できませんでした。
この問題についてPlaywright MCPを使って原因を調査してみようと思います。
Playwright MCPを使用し、問題を特定してもらう
Playwright MCPを使用して、AIにブラウザを操作してもらい原因を特定してもらいます。
プロンプト例 :
課題 : キャンセルボタンが押下した後にDialog内の要素がリセットされない
以下の手順で確認して課題の原因を教えてください。
1. Playwright MCPでurlを開く
2. ダイアログを開くボタンを押下する
3. ダイアログのcheckboxを一つ押下し、キャンセルボタンを押下する
4. ダイアログを開くボタンを押下する
Playwright MCPのtoolを読んでAIが確認してくれています。仮想ブラウザが立ち上がり確認してくれています。
全部の操作を終えた結果、AIがブラウザの挙動とReactでの実装がどう対応しているのかを教えてくれました。
この初期化は、SampleDialogコンポーネントが初回マウント時にのみ実行されます。しかし、Reactでは以下のような動作になります：
初回ダイアログオープン時：menus.filter((menu) => menu.checked)は空配列を返す（全てchecked: falseなので）
ダイアログ内でチェックボックスを変更：selectedMenuIds状態が更新される
キャンセルボタンでダイアログクローズ：SampleDialogコンポーネントはアンマウントされない（openプロパティで表示制御しているだけ）
再度ダイアログオープン時：selectedMenuIdsの状態が前回の値（メニュー1が選択された状態）のまま残っている
上記の内容から、Dialogの表示/非表示はコンポーネントのマウント/アンマウントで制御されているわけではないことがわかりました。
さらに深掘ると、Dialogの開閉時はHTMLのデータ属性を変更し、それに応じて当てられるCSSを変化させているということを知り、HTMLとCSSが関係していることを学ぶことができました。
UIライブラリを使用すると、CSSを意識せずに開発できるため、この観点を持つのは難しいのではないでしょうか。
私はPlaywright MCPを使用することで、フロントエンド実装に必要な技術を一つ再確認することができました。
Playwright MCPを使うデメリット
一方、デメリットはブラウザの挙動を逐次確認することによるトークンの増加です。
トークンが増加することで、以下2点の影響が出ます。
- AIからの返答に時間がかかる
- 利用できるトークンに上限があるツールの場合、上限に達しやすくなる
最後に
本記事では、Playwright MCPをフロントエンド学習に使用することのメリット・デメリットを紹介しました。本来はE2Eテストなどで利用されることが多いPlaywright MCPですが、学習用途としても活用できると感じました。
フロントエンド学習の際に、ぜひ試していただけると幸いです！
今日で４日間続いたFY25新卒エンジニアの記事は終了です。お読みいただきありがとうございました。
20日目は、医療プラットフォームの山下さんの記事です！お楽しみに！！
メドレーでは生成 AI 利用のガイドラインが社内で展開されており、各部門の業務ではそのガイドラインに沿って利用をしています。
Discussion