MENU
Engineering Knowledge, Built as an Open World.
  1. HOME
  2. プログラミング・Web
  3. ekplabz計算ツール基盤の開発ロードマップ

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

プログラミング・Web 工学・設計

工学計算ツールを、単発の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式を基本として使用する。

Δp=λLDρv22\Delta p = \lambda \frac{L}{D} \frac{\rho v^2}{2}
(Δp)：圧力損失(λ)：管摩擦係数(L)：配管長(D)：配管内径(ρ)：流体密度(v)：平均流速とする。(\Delta p)：圧力損失 (\lambda)：管摩擦係数 (L)：配管長 (D)：配管内径 (\rho)：流体密度 (v)：平均流速 とする。

とする。

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

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

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

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

今日の作業範囲

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

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

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

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

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

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

この構造を採用する理由

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

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

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

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

プログラミング・Web 工学・設計
参考になったらシェアしてください
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

ekplabzのアバター ekplabz

機械設計・油圧・CAD・Python・AIなど、ものづくりに関わる技術を扱っています。工学知識を整理・構造化し、設計や自動化に再利用できる形へ変えていくことを目指しています。

関連記事

目次