AIに読ませやすくしたら人間にも読みやすくなった — ShopifyがコードをJSON地獄からHTMLへ93%削減した理由

7月26日、DevClassが「How AI drove Shopify back to clean code」と題した記事を公開した。この記事では、ShopifyがAIエージェントの要求に応えようとした結果、コードが人間にとっても読みやすくなったという開発プラクティス上の逆説について詳しく紹介されている。

「AIのためのリファクタリング」が人間を救った

AIエージェントが求めるものは、人間が求めるものと変わらない――読みやすいコード、明示的な契約、建設的なフィードバック。

Shopifyが新ストアフロントテーマの設計から得た教訓は、そのひとことに集約される。AIに優しいコードを書こうとした結果、人間にとっても格段に読みやすいコードが生まれた。

JSONがテンプレートを壊した

Shopifyは現在、Horizonという基盤テーマを提供している。マーチャント（加盟店）はこれをカスタマイズして自分のストアを作る。柔軟性を高めるため、テンプレートの定義はJSONで記述される形になっていった。

Shopifyのストアフロント担当プロダクトディレクター、Ben SehlはXへの投稿でこう書いた（以下、元記事からの引用）。

「テンプレートがJSONになった瞬間、それは優れた開発者向けのサーフェスではなくなった。自動保存された出力物になった。」

1ファイルを読めばページ全体を把握できた時代は終わり、長大なJSONを解析しなければ何も分からない状態になっていた。

AIアシスタントの登場が転機に

Shopifyは「Sidekick」というAIアシスタントを導入した。マーチャントは「背景色を青にして」と宣言するだけで、エージェントがHTMLを書き換えてくれる。今年だけで2500万回の編集がSidekickを通じて行われており、全マーチャントの20%が利用している。

問題はここで生じた。AIエージェント自身が、複雑なJSONの構造を扱いにくいと感じていたのだ。Sehlはこう説明する（元記事からの引用）。

「シリアライズされた設定の深刻な問題は、JSONが本質的に悪いということではない。設定には制約された語彙しかないということだ。」

LLMはもともと人間の言語で訓練されている。密なシンボル列よりも、意味的に豊かな記述の方が処理しやすいというのは、AIの世界では徐々に常識になりつつある知見だ。実際、AnthropicはプロンプトエンジニアリングにXMLを推奨している。JSONが業界標準として台頭した10年前とは逆の流れだ。

新テーマの構造：HTMLとLiquidへの回帰

Shopifyが現在開発者プレビューとして公開中の新テーマはまだ名称未定だが、技術的な方向性は明確だ。

コード量はHorizonより93%削減
テンプレートディレクトリに並ぶのはJSONではなく、HTMLとShopify独自のLiquidテンプレート言語で書かれた平文ファイル
「すべての主要モデルはすでにHTMLを理解している。表現力があり、局所的で、トークン効率が良い」（Sehl、元記事より）

新テーマの主要な追加要素は以下のとおりだ。

コンポーザブルなブロックタグ：ページコンポーネントをネストしたパラメータで記述する。Reactのpropsに近い役割を果たすが、仮想DOMは不要
パーシャル（partial）プリミティブ：ページ全体を再レンダリングせず、特定領域だけを更新できる。Reactの部分更新に馴染みのある開発者には直感的な概念
標準アクション：カートの更新などサイト共通のイベントトリガーのコレクション。「このひとつのプリミティブで、Horizonから数千行のリアクティビティコードを削除できる」（Sehl、元記事より）
Liquidの表現力強化：Boolean式、演算子の優先順位、リテラルの配列・オブジェクトが使えるようになった。将来的にはTailwind CSSのサポートも予定

さらに、生成されたテーマがShopifyのポリシーに準拠しているかをチェックする20の新しいルールが追加された。対象はコントラクト、構造、バリデーション、複雑性、ネスト、ファイルサイズ制限など。

既存のLiquidテーマは「永続的なAPI」として引き続きサポートされる。

宣言型アーキテクチャの実用的なメリット

Sehlは具体例を挙げている。従来のJSON設定駆動の設計では、開発者はレイアウトを始める前にボタンの数を宣言しなければならない。一方、HTMLなら後からボタンが増えてもdivで囲むだけでいい。設定ではなく構造で語ることが、柔軟性と可読性を両立させる鍵だ。

SQLが17種類のDSLよりAIに扱いやすかったという事例も報告されており、Shopifyの判断はこうした業界の知見とも一致している。なお、この事例は元記事には明示的な言及がなく、編集部が関連情報として追記したものだ。※編集部の考察

AIに読ませるためにコードをクリーンにしようとしたら、人間にも読みやすくなった。その当たり前の結論が今改めて注目されているのは、業界がいかに複雑さに慣れ切っていたかを示している。「AI対応」を口実に技術的負債を返済できるなら、それはむしろ好機と捉えるべきだろう。

詳細はHow AI drove Shopify back to clean codeを参照していただきたい。