AIがShopifyをクリーンコードに回帰させた

EコマースプラットフォームのShopifyは、ソースコードの可読性を再び重視する動きを見せている。その意外な味方がAIエージェントだ。同社は顧客（「マーチャント」）向けに新しいストアフロントテーマを発表し、HTMLの知識が少しでもあれば誰でも完全に理解できると主張している。このテーマは人間と機械の両方が容易に解析・改造できるように設計されている。

この新しいテーマはまだ名称が決定していないが、現在のJSONベースのベーステーマであるHorizonの後継として開発者フォーラムで公開されている。新しいコードは主にHTMLで構成され、同社独自のブロックベースのテンプレート言語Liquidが組み込まれており、これも視認性が高い。マーチャントがこの新しいテーマのテンプレートディレクトリを覗くと、解読困難なJSONの長い文字列ではなく、解析しやすいプレーンテキストファイルが表示される。このテーマのコード行数はHorizonより93%少ない。

Shopifyのますます人気が高まっているAIサービスが、このアーキテクチャ再設計を推進している。Shopifyのストアフロント製品ディレクター、ベン・セール氏はXへの投稿で、「主要なモデルはすべてすでにHTMLを理解している。HTMLは表現力豊かで、局所的で、トークン効率が良い」と述べている。そしてShopifyのLiquidテンプレート言語はHTMLと完全に調和する。

セール氏は、10年前に自身がマーチャントだった頃、Shopifyは基本的なテンプレートしか提供していなかったことを回想する。当時、初心者ウェブコーダーだったセール氏は、サードパーティのスターターキットで簡単に修正できた。その後、Shopifyはテンプレートを充実させ、ユーザーが本格的なデザイナーになれるようにした。オンラインストアエディターは、ページとそのさまざまな「ブロック」コンポーネントの外観をより細かく制御できるようにした。しかし、柔軟性は複雑さを生んだ。ユーザーテンプレートの指示はJSONに変換された。「そのトレードオフにより、マーチャントははるかに多くの制御を得たが、開発者体験の代償を払った。1つのファイルを読むだけではページを理解できなくなった」とセール氏は書いている。

最近、ShopifyはAIアシスタントのShopify Sidekickを追加し、ユーザーがページをデザインする際の制御をさらに強化した。今年、Shopifyマーチャントの20%がSidekickを使用してテーマを編集しており、今年だけで2500万回の編集が行われている。これにより、ShopifyはAIエージェント自身のために物事を簡素化する必要に迫られた。エージェントは人間と同じものを求めていることが判明した。読みやすいコード、明示的な契約、建設的なフィードバックだ。そこで同社は、これらの品質を第一原理としてテーマアーキテクチャを再編成した（既存のLiquidテーマは「永遠のAPI」として維持しながら）。これらの変更は新しいAIの支配者をよりよくサポートする一方で、基礎となるコードも人間にとって読みやすくなった。

新しいベーステーマでは、Liquidに新しい構文とパーサーが追加され、バックエンドでより複雑な命令を実行するための規律が強化された。ユーザーが見るのは、通常のHTMLと並んで簡単にフィットする、構成可能で型付けされたブロックである。この新しいアプローチでは、各ユーザーデザインテーマには特別なディレクトリと、追加の成果物を生成する方法の指示とポインタを含むファイルが与えられる。さらに、拡張されたドキュメントタグには、コントラクトとスニペットを処理するための例と指示が含まれている。

新しいテーマの鍵は、新しい構成可能なブロックタグである。これは、ページコンポーネントを記述するネストされたパラメータのセットを含み、開発者は値、構成、オーバーライド、その他の指示を与えることができる。React開発者は、パラメータがReactのpropsと同様の役割を果たすが、仮想DOMを作成する必要がないことを認識するだろう。Reactユーザーにとっても馴染み深いのは、新しい部分プリミティブで、ページ全体を再レンダリングせずに特定の領域を更新できる。チームはまた、サイトのイベントトリガーのコレクションである標準アクションも追加した。例えば、ショッピングカートの更新などだ。「この1つのプリミティブにより、Horizonから数千行のリアクティビティコードを削除できる」とセール氏は書いている。

Shopifyはまた、生成されたテーマが契約、構造、検証、複雑さ、ネスト、ファイルサイズ制限に関する同社のポリシーに準拠していることを保証するために、20の新しいルールを開発した。ユーザーが凝ったことをしたい場合、Liquidはブール式、優先順位付き中置演算子、リテラル配列やオブジェクトなどの論理機能をサポートするようになった。将来的には、Tailwind CSSフレームワークもサポートされる予定だ。

これらの改善はすべて、カスタマイズされたストアフロントを組み立てようとしている自宅のマーチャントにとって物事を簡素化するはずだ。例えば、宣言的で設定駆動型のアーキテクチャでは、開発者はレイアウトを開始する前に使用するボタンの数を予測しなければならない。HTMLでは、マーチャントが追加のボタンが必要だと気づいた場合、それらをすべてHTMLのdivタグでラップするだけでよい。

AI専門家は、AIにとって最適な「食事」は、少なくとも非コーディングタスクにおいては、密度の高いシンボル重視のコードではないという考えに徐々に気づきつつある。人間と同様に、LLMはより理解しやすい散文でうまく機能するようだ（LLMは結局、人間の言語で訓練されている）。例えば、ある開発者は、17の異なるツールのドメイン固有言語（DSL）と比較して、SQLの方が処理しやすいことを発見した。プロンプトに関しては、Anthropicは意味的にリッチなXMLを推奨しているが、10年前にはそのフォーマットはよりスリムで冗長でないJSONのために業界でほとんど捨てられていた。

おそらく、ShopifyがAIをなだめようとする努力は、より多くのスラップロジーではなく、より読みやすいコードへの動きにつながるかもしれない。