この記事は「構造パスで作るシンプルなフロントエンドフレームワーク (Structive)」Advent Calendarの2日目です。
Structiveについて詳しくはこちらより

前回のおさらい

1日目では、従来のフレームワークが抱える課題と、構造パスという新しいアプローチを紹介しました。今日は、その核となる「構造パス」の仕組みを深く掘り下げていきます。

構造パスとは何か？

構造パスは、階層的なデータ構造における特定の値の位置を、文字列で一意に表現したものです。

例えるなら、郵便の住所のようなものです：

住所: "東京都渋谷区1-2-3" → 特定の建物を指す
構造パス: "user.profile.name" → 特定のデータを指す

基本的な例

const data = {
  user: {
    profile: {
      name: "Alice",
      age: 25
    },
    settings: {
      theme: "dark",
      notifications: true
    }
  }
};

// 構造パス → 値
"user.profile.name"          // → "Alice"
"user.profile.age"           // → 25
"user.settings.theme"        // → "dark"
"user.settings.notifications" // → true

ドット（.）で区切られた各部分が、オブジェクトの階層を表しています。
JavaScriptのオブジェクト階層を表現するドット記法とほぼ変わりませんね。

ワイルドカードによる配列の抽象化

ちょっと違うのが、構造パスでは、配列の要素をワイルドカード（*）を使ってパスで表現してしまうところなんです。

配列データの例

const data = {
  users: [
    { name: "Alice", age: 25, city: "Tokyo" },
    { name: "Bob", age: 30, city: "Osaka" },
    { name: "Carol", age: 28, city: "Kyoto" }
  ]
};

ワイルドカード（`*`）の使い方

*を使うことで、配列の全要素を抽象的に表現できます：

// ワイルドカードを使った構造パス
"users.*.name"  // → すべてのユーザーの name を指す
"users.*.age"   // → すべてのユーザーの age を指す
"users.*.city"  // → すべてのユーザーの city を指す

// 実際には以下のように展開される
"users.0.name"  // → "Alice"
"users.1.name"  // → "Bob"
"users.2.name"  // → "Carol"

"users.0.age"  // → 25
"users.1.age"  // → 30
"users.2.age"  // → 28

"users.0.city"  // → "Tokyo"
"users.1.city"  // → "Osaka"
"users.2.city"  // → "Kyoto"

なぜワイルドカードが重要か？

UIテンプレートでは、配列の各要素に対して同じ操作を繰り返すことがよくあります：

<!-- すべてのユーザーの名前を表示したい -->
<ul>
  <li>Alice</li>
  <li>Bob</li>
  <li>Carol</li>
</ul>

ワイルドカードを使えば、これを抽象的に記述できます：

{{ for:users }}
  <li>{{ users.*.name }}</li>
{{ endfor: }}

ポイント: users.*.nameという一つの構造パスで、すべてのユーザーの名前を表現できます。

構造パスの実装イメージ

実際の実装では、構造パスを解析してデータにアクセスします。

基本的な get 関数

function get(obj, path) {
  const keys = path.split('.');
  let current = obj;
  
  for (const key of keys) {
    if (current == null) return undefined;
    current = current[key];
  }
  
  return current;
}

// 使用例
const data = { user: { profile: { name: "Alice" } } };
console.log(get(data, "user.profile.name")); // "Alice"

ワイルドカードを含む場合

function getAll(obj, path) {
  const keys = path.split('.');
  let current = [obj];
  
  for (const key of keys) {
    if (key === '*') {
      // 配列の全要素を展開
      current = current.flatMap(item => 
        Array.isArray(item) ? item : []
      );
    } else {
      current = current.map(item => item?.[key]);
    }
  }
  
  return current;
}

// 使用例
const data = {
  users: [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 }
  ]
};
console.log(getAll(data, "users.*.name")); // ["Alice", "Bob"]

UIとの関係

構造パスの本当の威力は、UIと状態を結びつけるときに発揮されます。

同じ構造、同じパス

状態とUIが同じ構造を持つため、同じ構造パスでアクセスできます：

// 状態の定義
class State {
  product = {
    name: "Laptop",
    price: 999
  };
}

<!-- UIテンプレート -->
<div>
  <h2>{{ product.name }}</h2>
  <p>Price: ${{ product.price }}</p>
</div>

ここが重要: UIの{{ product.name }}と状態のproduct.nameは、まったく同じ構造パスです。

なぜこれが革新的なのか？

中間層が不要: UIと状態の間に変換層が不要
明示的な依存関係: {{ product.name }}を見れば、このUIがproduct.nameに依存していることが一目瞭然
ピンポイントな更新: product.nameが変わったら、そのパスを使っているUIだけを更新すれば良い

構造パスの記法まとめ

構造パス	説明	例
`object.property`	オブジェクトのプロパティ	`user.name`
`object.nested.property`	ネストしたプロパティ	`user.profile.age`
`array.*.property`	配列の各要素のプロパティ	`users.*.name`
`array.*`	配列の各要素	`items.*`

実践例：商品リスト

構造パスを使って、商品リストを表現してみましょう：

// 状態
class State {
  products = [
    { id: 1, name: "Laptop", price: 999 },
    { id: 2, name: "Mouse", price: 29 },
    { id: 3, name: "Keyboard", price: 79 }
  ];
}

<!-- UI -->
<ul>
  {{ for:products }}
    <li>
      {{ products.*.name }} - ${{ products.*.price }}
    </li>
  {{ endfor: }}
</ul>

展開されるHTML:

<ul>
  <li>Laptop - $999</li>
  <li>Mouse - $29</li>
  <li>Keyboard - $79</li>
</ul>

まとめ

今日は構造パスの基本を学びました：

構造パスとは:

データの位置を文字列で表現する「住所」
ドット記法でネストを表現
ワイルドカードで配列を抽象化

構造パスの利点:

データへの統一的なアクセス方法
動的なパス構築が可能
UIと状態を同じパスで表現できる

次回予告:
明日は、「UIと状態を同じ構造で表現する思想」について、より深く掘り下げます。なぜこのアプローチがシンプルさとスケーラビリティを両立できるのか、具体例とともに解説します。

次回: Day 3「UIと状態を同じ構造で表現する思想」

構造パスについて質問があれば、ぜひコメント欄で！