Mathematical Function Plotter

Julia Oxygen.jlバックエンドとTypeScript + Reactフロントエンドを使用した数学関数可視化アプリケーション。

機能

• sin(x)とcos(x)関数のグラフ可視化
• インタラクティブな関数選択UI
• リアルタイムグラフ生成
• レスポンシブデザイン

プロジェクト構造

oxygensandbox/
├── backend/                 # Julia Oxygen.jl バックエンド
│   ├── Project.toml        # Julia プロジェクト設定
│   ├── Manifest.toml       # Julia 依存関係ロックファイル
│   ├── requirements.txt    # Python 依存関係（venv用）
│   ├── venv/              # Python 仮想環境
│   └── src/
│       ├── oxygen_server.jl # メインサーバーファイル
│       └── server.jl       # 代替サーバーファイル
├── frontend/               # React TypeScript フロントエンド
│   ├── package.json        # Node.js 依存関係
│   ├── package-lock.json   # Node.js 依存関係ロックファイル
│   ├── tsconfig.json       # TypeScript 設定
│   ├── public/
│   │   └── index.html      # HTML テンプレート
│   └── src/
│       ├── index.tsx       # React エントリーポイント
│       ├── App.tsx         # メインアプリコンポーネント
│       ├── App.css         # アプリスタイル
│       ├── index.css       # グローバルスタイル
│       └── components/     # Reactコンポーネント
│           ├── FunctionSelector.tsx
│           ├── FunctionSelector.css
│           ├── GraphDisplay.tsx
│           └── GraphDisplay.css
├── specification.md        # プロジェクト仕様書
└── README.md               # このファイル

セットアップ手順

前提条件

• Julia (1.9以上推奨)
• Node.js (18以上推奨)
• npm または yarn

バックエンドセットアップ

1. バックエンドディレクトリに移動:

   cd backend

2. Julia依存関係をインストール:

   julia --project=. -e "using Pkg; Pkg.instantiate()"

フロントエンドセットアップ

1. フロントエンドディレクトリに移動:

   cd frontend

2. npm依存関係をインストール:

   npm install

実行手順

バックエンドの起動

1. バックエンドディレクトリで:

   cd backend
   julia --project=. src/oxygen_server.jl

2. サーバーが http://localhost:8080 で起動します

フロントエンドの起動

1. 新しいターミナルでフロントエンドディレクトリに移動:

   cd frontend

2. 開発サーバーを起動:

   npm start

3. ブラウザで http://localhost:3000 にアクセス

API エンドポイント

• GET /api/1/sin - sin(x)関数のプロット画像（PNG形式）
• GET /api/1/cos - cos(x)関数のプロット画像（PNG形式）
• GET /health - ヘルスチェック

使用技術

バックエンド

• Julia: 高性能数値計算言語
• Oxygen.jl: 軽量Webフレームワーク
• Plots.jl: グラフ描画ライブラリ
• HTTP.jl: HTTPサーバー機能
• JSON3.jl: JSON処理

フロントエンド

• React: UIライブラリ
• TypeScript: 型安全なJavaScript
• CSS3: モダンスタイリング（グラデーション、ブラー効果）
• Fetch API: バックエンド通信

開発のヒント

バックエンド開発

• Julia REPLで対話的に開発可能
• Plots.jlのバックエンドはGRを使用
• CORS設定により任意のオリジンからアクセス可能

フロントエンド開発

• TypeScriptによる型安全性
• React Hooksを使用した状態管理
• レスポンシブデザイン対応
• エラーハンドリングとローディング状態管理

トラブルシューティング

よくある問題

1. Julia依存関係エラー:

   julia --project=. -e "using Pkg; Pkg.resolve(); Pkg.instantiate()"

2. フロントエンドビルドエラー:

   rm -rf node_modules package-lock.json
   npm install

3. CORS エラー:

   • バックエンドが正しく起動していることを確認
   • package.jsonのproxy設定を確認

4. "Expected PNG image but received different content type" エラー:

   • このエラーは修正済みです
   • バックエンドが適切な Content-Type ヘッダーを設定するようになりました

5. 無限リクエストループ:

   • この問題は修正済みです
   • React useEffect の依存関係が最適化されました

6. npm セキュリティ警告:

   • 開発環境のみに影響する警告です
   • 本番環境では npm run build を使用してください

ポート設定

• バックエンド: 8080（oxygen_server.jlで変更可能）
• フロントエンド: 3000（React標準）
• プロキシ設定により自動的に連携

最近の更新

v1.1.0 (最新)

• 修正: PNG Content-Type ヘッダーの問題を解決
• 修正: 無限リクエストループの問題を修正
• 改善: React useEffect 依存関係の最適化
• 改善: エラーハンドリングの強化

v1.0.0 (初期リリース)

• sin(x) と cos(x) 関数の可視化機能
• Julia Oxygen.jl バックエンド
• React TypeScript フロントエンド
• レスポンシブデザイン

貢献

プルリクエストや Issue の報告を歓迎します。

ライセンス

MIT License

OxygenSandbox.jl