ekplabz計算ツール基盤の開発ロードマップ

工学計算ツールを、単発のWebページとして一つずつ作るのではなく、共通のデータと仕組みから継続的に増やせる基盤を構築する。

最初の対象は油圧配管の圧力損失計算ツールとする。ただし、最初から計算機能へ直接進むのではなく、まず複数のツールを管理・表示できる共通の入口を作る。

最初の目標

最初の目標は、Vite＋React＋TypeScriptで、tools.jsonからカードを自動生成するトップページを作ることである。

この段階では、ツールの名称や説明をReactコンポーネントやHTMLへ直接記述しない。ツール情報を独立したデータとして管理し、そのデータを読み込んで画面を生成する。

基本構造は次のようになる。

tools.json
    ↓
TypeScriptで読み込み
    ↓
Reactコンポーネント
    ↓
ツールカードを自動生成
    ↓
トップページへ表示

この構造を採用すれば、新しいツールを追加するときにトップページのHTMLやReactコードを直接編集する必要がない。原則としてtools.jsonへデータを追加するだけで、カードを増やせるようになる。

ツール情報を独立したデータとして管理する

ツール情報は、コードやHTMLの一部ではなく、再利用可能なデータとして扱う。

初期段階では、次のような項目を持たせる。

[
  {
    "id": "hydraulic-pressure-loss",
    "name": "油圧配管の圧力損失計算",
    "description": "流量、配管内径、配管長、作動油の物性値から圧力損失を計算します。",
    "category": "hydraulics",
    "path": "/tools/hydraulic-pressure-loss",
    "status": "development",
    "featured": true,
    "public": true
  }
]

各フィールドの役割は次のとおり。

• id：プログラム内部で使う一意の識別子
• name：画面に表示するツール名
• description：ツールの概要
• category：油圧、機械設計、物理などの分類
• path：ツールを開くためのURL
• status：計画中、開発中、公開済みなどの状態
• featured：トップページで目立たせるかどうか
• public：一般公開してよい情報かどうか

将来フィールドが増えても、表示処理とデータを分離しておけば拡張しやすい。

フェーズ0：開発環境の作成

Viteを使ってReact＋TypeScriptのプロジェクトを作成する。

この段階の完成条件は次のとおり。

• ローカル環境で開発サーバーが起動する
• Reactの初期画面が表示される
• TypeScriptによる型チェックが機能する
• Gitで変更履歴を管理できる

フェーズ1：ツールデータの作成

tools.jsonを作成し、ツール情報をコードから分離する。

最初に登録するツールは、油圧配管の圧力損失計算ツールとする。必要に応じて、開発予定のツールもstatusを付けて登録する。

完成条件は次のとおり。

• tools.jsonが独立して存在する
• ツール情報がReactやHTMLへ直接書かれていない
• TypeScript側にツールデータの型定義がある
• 不正なデータを検出できる構造になっている

フェーズ2：カードの自動生成

Reactで共通のToolCardコンポーネントを作成する。

tools.jsonを読み込み、配列の各レコードからツールカードを自動生成する。

完成条件は次のとおり。

• tools.jsonの件数に応じてカード数が変わる
• 名称、説明、カテゴリ、状態が表示される
• featuredのツールを視覚的に強調できる
• publicがfalseのツールを公開画面へ表示しない
• カードから各ツールのページへ移動できる

フェーズ3：圧力損失計算ツールのMVP

共通トップページが動作した後、最初の実用ツールとして油圧配管の圧力損失計算を実装する。

初期入力は次の範囲とする。

• 流量
• 配管内径
• 配管長
• 作動油の密度
• 作動油の動粘度

初期出力は次の範囲とする。

• 管内流速
• レイノルズ数
• 層流または乱流の判定
• 管摩擦係数
• 直管部の圧力損失

計算にはDarcy–Weisbach式を基本として使用する。

とする。

計算ロジックはReactコンポーネントへ直接埋め込まず、独立したTypeScript関数として実装する。これにより、画面の変更、テスト、API化、Python版との比較がしやすくなる。

フェーズ4：実務機能の追加

MVPで計算結果を検証した後、次の機能を段階的に追加する。

• エルボやバルブなどの局部圧力損失
• 複数配管区間の合算
• 配管サイズ候補の比較
• 推奨流速範囲からの逸脱警告
• 損失動力と発熱量の計算
• 計算過程と使用式の表示
• JSON形式での計算条件と結果の保存
• CSV、PDFなどへの出力
• URLによる計算条件の共有

今日の作業範囲

今日の目標は次の二点とする。

1. Vite＋React＋TypeScriptでトップページを作る
2. ツール情報をtools.jsonへ分離し、データからカードを自動生成する

可能であれば、圧力損失計算ツールのカードをトップページへ表示し、リンク先となる空のページまで用意する。

今日の完成状態は次のようになる。

トップページ
├── tools.jsonからカードを生成
├── publicによる公開判定
├── featuredによる強調表示
└── 圧力損失計算ツールの入口

圧力損失の本格的な計算ロジックは、この共通基盤が動作した次の段階で実装する。

この構造を採用する理由

重要なのは、一つの計算ページを完成させることだけではない。工学知識、ツール情報、計算ロジック、画面表示を分離し、後から何度でも再利用できる形にすることである。

この構造なら、将来ツールが増えても、共通のトップページとデータ構造を使い続けられる。

工学知識
    ↓
構造化データ
    ↓
計算ロジック
    ↓
Webツール
    ↓
継続的な追加と改善

最初は小さなトップページと一件のツールデータから始める。その小さな構造を崩さずに、圧力損失、油圧動力、シリンダ推力、配管選定などへ展開していく。