※追記
Sentence Builder は構成検証用のデモとして作り始めたツールですが、
現在は 個人開発の公開 Web サービス としても利用できるようにしています。
👉 https://sentence-builder.notegridx.dev/
公開 Web サービス版では、
ユーザーが教材（JSON）を差し替える仕組みは提供しておらず、
学習コンテンツは運営側で管理・追加していく形をとっています。
現在は以下の教材を用意しています。
- IT業界で働く人向けのビジネス英語：10カテゴリ・計200問
- 日常会話表現：10カテゴリ・計200問
いずれも、記事内で紹介している
「単語を並べ替えて英文を組み立てる」形式で学習できます。
今後は、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 側で自由に定義できます。
JSON を差し替えるだけで用途が変わる
phrases.json を入れ替えることで、例えば次のような使い方ができます。
- IT 技術者向けの業務英語フレーズ集
- 営業・カスタマーサポート向け表現
- 資格試験対策用の例文
- 日常会話の練習
- 英語以外の言語学習（日本語 → フランス語 など）
どんな内容を学習に使うかは、すべてユーザーが自由に決められます。
カテゴリも教材データ由来
カテゴリも JSON から自動的に生成されます。
{
"category": "進捗報告"
}
- フロントエンドにカテゴリ定義は持たない
- JSON を編集するだけで出題範囲を制御できる
ファイル構成
アプリケーションは非常にシンプルな構成です。
.
├── index.html # 画面構成
├── styles.css # スタイル定義
├── app.js # アプリケーションロジック
└── phrases.json # 出題データ（教材）
教材にあたるのは phrases.json のみで、
それ以外のファイルは汎用的な UI / ロジックとして固定されています。
まとめ
Sentence Builder は、
- 特定の教材を提供するためのツールではなく
- 教材を自由に定義できる学習の「器」
として作っています。
JSONを編集することで、
自分に必要な学習内容をそのまま教材として利用できます。