※追記
Sentence Builder は構成検証用のデモとして作り始めたツールですが、
現在は 個人開発の公開 Web サービス としても利用できるようにしています。

公開 Web サービス版では、
ユーザーが教材（JSON）を差し替える仕組みは提供しておらず、
学習コンテンツは運営側で管理・追加していく形をとっています。

現在は以下の教材を用意しています。

いずれも、記事内で紹介している
「単語を並べ替えて英文を組み立てる」形式で学習できます。

今後は、TOEIC 対策をはじめとした試験対策向けコンテンツ や、
特定分野に特化したカテゴリの追加も予定しています。

技術的な構成や設計思想はデモおよびリポジトリで公開しつつ、
公開版は「そのまま使える学習ツール」として運用しています。

英語学習用の Web ツールは数多くありますが、使っているうちに次のようなことを感じていました。

多くの場合、学習内容はツール側であらかじめ決められており、
ユーザーはその枠の中で学習することになります。

そこで今回は、

学習ツール側が教材を規定するのではなく、
教材はユーザーが自由に定義できる構成にしたい

という考えで、軽量な学習ツール Sentence Builder を作りました。

Sentence Builder とは？

Sentence Builder は、表示された日本語文をヒントに、
単語を並べ替えて英文を完成させるブラウザベースの学習ツールです。

👉 デモ
https://notegridx.github.io/sentence-builder/

UI や操作は最小限に抑え、
学習内容そのものはすべて外部データで管理する ことを重視しています。

教材は phrases.json で定義する

出題されるフレーズは、phrases.json という JSON ファイルにまとめています。

{
  "id": "m001",
  "category": "会議",
  "ja": "会議を始めましょう。",
  "text": "Let's get started with the meeting."
}

アプリケーション側はこの構造にのみ依存しており、

といった点は、すべて JSON 側で自由に定義できます。

phrases.json を入れ替えることで、例えば次のような使い方ができます。

どんな内容を学習に使うかは、すべてユーザーが自由に決められます。

カテゴリも JSON から自動的に生成されます。

{
  "category": "進捗報告"
}

アプリケーションは非常にシンプルな構成です。

.
├── index.html     # 画面構成
├── styles.css     # スタイル定義
├── app.js         # アプリケーションロジック
└── phrases.json   # 出題データ（教材）

教材にあたるのは phrases.json のみで、
それ以外のファイルは汎用的な UI / ロジックとして固定されています。

Sentence Builder は、

として作っています。

JSONを編集することで、
自分に必要な学習内容をそのまま教材として利用できます。