サイト構築からデプロイまで。AIが変えるフロントエンド開発

「新発見！フロントエンド技術の今」の連載。第16回のテーマはAIが変えるフロントエンド開発です。

• keyboard_arrow_down はじめに
• keyboard_arrow_down デザインとアプリケーション構築
• keyboard_arrow_down コーディング支援
• keyboard_arrow_down テストとデプロイ
• keyboard_arrow_down おわりに

本稿では、AIが変えるフロントエンド開発を紹介します。AIは生活のいろいろなところに入り込んでおり、フロントエンド開発も無縁ではありません。Webサイト構築、デザイン、コーディング支援、テスト支援、デバッグ、デプロイなど、さまざまな局面でAIを使ったサービスが提供され始めています。ここでは、具体的なサービスをカテゴリごとにチョイスして紹介し、AIがフロントエンド開発をどのように変えていくのかを示します。

アプリケーション構築は、多くの手順を必要とすることから比較的難易度の高い作業です。専用のウィザードがステップ・バイ・ステップで構築をフォローするスタイルは、今では「やりたいこと」を述べるだけでAIが代行してくれるようになりました。デザインも、直接アプリケーション構築に持ち込むことができます。

スタイリッシュなUIを生成するv0

v0（ブイゼロ）は、Next.jsの開発元であるVercel Labsによる、AIを活用したノーコードのUIデザインツールです。テキストプロンプトやデザインモックアップから、高品質なUIコードを生成することができます。

対話型デザイン機能を備え、人間のデザイナーと対話するように、AIと対話しながらUIを作成できます。ユーザーは日本語をはじめとする自然言語で指示を出し、AIがそれに基づいてUIを生成します。生成されたUIに対しては、さらに自然言語で変更や追加を指示することができます。
例えば、「ユーザー登録フォームの作成」と指示を出すと、それに基づいた項目によるコンポーネントが生成されます。コンポーネントには複数のデザインバリエーションが提供され、ユーザーはその中から最適なものを選択できます。

v0で生成されるUIは、shadcn/ui（Radix UIベースのUIコンポーネント）とTailwind CSS（CSSフレームワーク）をベースにしたスタイリッシュなスタイルとなっており、ReactやNext.jsのプロジェクトにすぐに統合可能です。
ReactやNext.jsによるアプリケーション開発を行っていれば、まず使ってみたくなるサービスではないでしょうか？

デザインカンプからUIを生成できるFRONT-END.AI

FRONT-END.AIは、CFPコンサルティング社によるフロントエンド開発を効率化するためのAIサービスです。もともとはTsunagu.AI社のサービスでしたが、2024年6月に同社に事業譲渡されました。デザインカンプ（デザインの完成図）の画像からサイトの構造を解析し、UIとなるHTMLやCSSのコードを自動生成することで、初期コーディング時間を大幅に削減するローコードサービスです。

FRONT-END.AIに渡すのはカンプ画像（JPEG形式）とアセットファイルです。デザインがPhotoshopなどで作成されていて、アセットファイルが別になっている場合には、それらを渡すことでHTMLの構造をシンプルにできます。エディタ機能が提供されており、HTMLの構造を変化させたり、CSSをカスタマイズしたりすることも可能です。

後述するFigmaや、Adobe XDなどのデザインツールとプラグインによって連携することも可能です。VS Code連携機能がリリースされており、生成したHTML/CSSをエディター画面上ですぐに確認できます。
PhotoshopやIllustratorといった従来型のデザインツールを使ってデザインカンプを作成している場合には、有効な選択肢ではないでしょうか？

オンラインのデザイン作業をAIがサポートするFigma

Figmaは、Figma社によるデザイナーや開発者に向けた共同デザインのためのツールです。リアルタイムでの共同作業をサポートしており、複数のユーザーによる同時並行のデザインに対応します。デザインから直接プロトタイプを作成し、インタラクションやアニメーションを追加して、UXをシミュレートする機能も備えています。

Figmaは、AIを活用してデザインプロセスの効率化とクリエイティビティの向上のためのさまざまな機能を提供しています。以下はFigmaとAIの関係についての主なポイントです。FigmaとFigJamでは、生成AIの活用によりテキストを入力するだけで要求に応じたオブジェクトやデザイン要素を生成することができます。また、FigmaにはAIプラグインが用意されており、例えば「AI image generator」によってテキストから画像を生成したり、「Relume Ipsum」によって文章を自動生成したりすることができます。

さらに、FRONT-END.AIのプラグインを提供しており、作成したデザインをそのまま持ち込むことができるなど、他ツールとの連携も可能となっています。

ChatGPTでWebアプリを瞬時でつくるGPTApp

GPTAppは、福田孝之氏によるChatGPTを活用したWebアプリ構築のためのサービスです。「どんなアプリを作ってみますか？」というようなライトなプロンプトにアプリのイメージや機能をテキストで入力すると、ChatGPT（GPT-3.5）がその内容をもとにコードを生成し、Webアプリとして実装します。生成にかかる時間は約30秒と非常に短く、アプリを素早く作成することができます。

このサービスは、ゲームアプリの企画・開発を手掛けるミリオンダウト代表の福田孝之氏の個人プロジェクトとして提供されています。アプリ完成後には、ChatGPTが生成したコード（CSSとJavaScriptが埋め込まれたHTML）を実際に確認することができます。

このサービスは無料です。生成されたHTMLはコピペしてすぐに実行できますし、生成画面でも実行できます。大がかりなWebアプリの構築には向きませんが、アイデアをとりあえず試したいといったシンプルな用途に活用できるのではないでしょうか？

コーディング支援は、早くからAIの恩恵を受けてきた分野ではないでしょうか。ChatGPTに質問してコードを提示してもらっていたスタイルが変化し、今ではツールやサービスに統合されて非常に使い勝手の良いものになっています。

コーディング支援とVS Code統合が便利なGitHub Copilot

GitHub Copilot Xは、GitHubが2023年5月に発表した、開発者の生産性向上とコードの品質改善を目指すサービスの総称です。以下の3つのサービスから構成されます。

• ・GitHub Copilot：ChatGPT-4をベースとしたコーディングアシスタント。開発者の生産性向上のためのサービス
• ・GitHub Copilot Voice：音声によるコーディング。プログラミングへのアクセシビリティを改善するサービス
• ・GitHub Pull Requests：AIによるコードレビューの自動化。バグやパフォーマンスの問題を検出するサービス

このうちGitHub Copilotは、ChatGPT（GPT-4）を活用したペアプログラミングツールで、主にコーディング支援の機能を提供します。Python、Ruby、JavaScript、Java、C#、Goなど多くの言語に対応し、入力済みのコードのコンテキストを解析して次に書くべきコードを提案する補完機能、コメントや関数の説明からのコード生成、単体テストや統合テストのためのコードの自動生成、入力済みのコードをより効率的で読みやすい形にするリファクタリング機能などを利用できます。

GitHub Copilotは、VS Code、IntelliJ IDEAなどの主要なコードエディタと統合されています。これらのコードエディタを使っていれば、すぐに恩恵を受けられます。真っ先に試してみる価値があるのではないでしょうか？

AWSユーザなら選択肢に入れたいAmazon Q Developer

Amazon Q Developerは、Amazonが提供するコーディング支援サービスです。Amazon Qという、AIを活用した複合的なサービス（Q Business、Q Developer、QuickSight、Connect、Supply Chain）のうち、開発者向けのサービスがQ Developerです。以前はAmazon CodeWhispererというサービスでしたが、Amazon Qへの統合でQ Developerに名称が変わりました。

Amazon Q Developerは、コメントや入力済みのコードに基づいてリアルタイムの提案を行うコード補完機能、機能の実装・文書化・テスト・レビュー・リファクタリングからソフトウェアのアップグレードまで、さまざまなタスクを自律的に実行するエージェント機能、クラウドのコストとリソースの最適化、アーキテクチャに関するガイダンス、運用上のインシデントの調査、ネットワーク問題の診断と解決など、AWSとの統合機能を利用できます。

Amazon Q Developerは、VS Code、IntelliJ IDEA、Eclipseなどの主要なコードエディタあるいは統合開発環境で使用でき、コードの提案、脆弱性のスキャン、チャット機能を提供します。AWSにてアプリ開発を行っているなど、AWSとの親和性を重視したい場合に適しているサービスでしょう。

VS Codeに替わる新しいコードエディタCursor

Cursorは、Anysphere社が提供するコードエディタです。「The AI Code Editor」を謳う通り、AIによってコーディングを支援するコードエディタです。インストールは、macOS、Windowsともにインストーラを起動するだけと簡単です。なお、アプリケーションでのAI機能の利用にはサインアップが必要です。日本語によるAIの利用も可能です。

CursorはVS Codeとは異なるコードエディタですが、VS Codeのフォークであり、キーバインディングが既定でVS Code互換となっているほか、VS Codeがインストールされている環境では、拡張機能やキーバインディングを含む各種設定を取り込むことができます。

Cursorでは、コンテキストを解析して次に書くべきコードを提案するコード補完機能、日本語などの自然言語によるコード生成機能、実行時に発生したエラーを自動的に検出して原因と解決策を提案するデバッグ機能、SOC 2認証（米国公認会計士協会によるセキュリティや可用性を評価するフレームワーク）によるプライバシーモードなどの機能を備えています。

VS CodeはGitHub Copilotとの連携に優れていますが、別のAI機能を試したいという場合にはCursorは有用な選択肢でしょう。

テスト設計は面倒で穴も発生しやすいことから、AIのメリットを感じやすい用途です。また、デプロイにもAI導入の動きが進んでいます。

ブラウザ操作だけでテストコードを生成するmabl

mabl（メイブル）は、mabl社によるAIを活用したローコードのテスト自動化プラットフォームです。ブラウザにおいて操作履歴を記録するだけで、それに基づくテストコードを自動的に生成します。コーディングの知識は基本的に不要ですが、テストの種類によってはコーディングによるチューニングが必要になることもあります。

生成AIを含む複数のAI技術を活用した自動修復機能を備えます。UIが変更された場合にそれを検出し、自動的にテストコードに反映させます。一般的には、UIが変更されたら手動でのコードの修正が必要になることが多いので、この自動化はテストカバレッジの拡大、信頼性の向上、メンテナンス作業の削減などに有効です。

高度な機能を持つmablですが、基本的には操作履歴に基づくテストとなるので、非エンジニアでもテストが設計できるというメリットがあります。

モバイルアプリのテストに対応するMagicPod

MagicPodは、MagicPod社によるAIを活用したローコードのテスト自動化プラットフォームです。moblに似ていますが、Webアプリに加えてモバイルアプリのテストに対応しているので、単一のサービスで両者のテストに対応できるメリットがあります。

テストケースは、ブラウザなどの画面に置かれたボタンなどの入力項目を選択すると、AIがそれを解析して作成してくれます。また、mabl同様にUIの変更を検出して、テストコードを自動的に修正する機能も備えています。

MagicPod社は日本国内の企業であり、日本語のサービスや情報が充実しています。海外のサービスでは少し不安だという場合でも、利用のハードルが低いのもメリットでしょう。

インフラストラクチャコード（IaC）に対応するPulumi AI

Pulumi AIは、同名のPulumi社によるプロビジョニングツールに組み込まれたAI機能です。プロビジョニングとはITインフラをセットアップすることであり、特にPulumiは、プログラミング言語でインフラストラクチャを記述するIaC（Infrastructure as Code）に特化しているのが特徴です。

Pulumi AIは、日本語などの自然言語を使用して、インフラストラクチャコード（IaC）のためのプログラムを生成します。ユーザーが「AWS上にCloudFront CDNを使った静的Webサイトをつくりたい」といった具体的な要求を入力すると、PulumiAIがその要求に基づいてコードを生成します。生成されるコードは、TypeScript、JavaScript、Python、Go、C#、Java、YAML、Terraformなど、さまざまなプログラミング言語に対応します。

IaCには馴染みのないというケースも多いと思いますが、AIがアシストしてくれるので、AIの使えるプロビジョニングツールとして取り組んでみるのが良いのではないでしょうか。

今回は、フロントエンド開発へのAIの導入について紹介しました。いずれも、AIの力を借りながらアプリ構築、コーディング作業、デバッグ、テスト、デプロイなどの効率を向上させるものです。興味を持ったものがあれば、ぜひテスト導入して試していただきたいと思います。