| 163行目: | 163行目: | ||
全てのリソースが含まれているため、アプリケーションのサイズが約2[MB]大きくなる。<br> | 全てのリソースが含まれているため、アプリケーションのサイズが約2[MB]大きくなる。<br> | ||
<br><br> | <br><br> | ||
== ディレクトリ構成 == | |||
==== Blazorプロジェクトの構造と分割パターン ==== | |||
* 共有ライブラリ | |||
* コアクラス | |||
*: コアクラスを保持する<code><Project Sdk="Microsoft.NET.Sdk"></code>型の<code>OpenHabitTracker</code> | |||
* Razoorファイル | |||
*: Razoorファイルを保持する<code><Project Sdk="Microsoft.NET.Sdk.Razor"></code>型の<code>OpenHabitTracker.Blazor</code> | |||
<br> | |||
以下に示すように分割することにより、ロジックはUIから分離されて、Razorファイルには数行のC#コードが含まれるようになる。<br> | |||
C#のソースコードを.razor.csファイル (コードビハインドファイル) に記述するとエディタの動作が改善される。<br> | |||
<br> | |||
また、C#のソースコードを別のライブラリに記述することもできる。<br> | |||
<br> | |||
Razorコンポーネント / Razorページのみを共有ライブラリに配置して、<br> | |||
App.razor、_Imports.razor、MainLayout.razor、JsInterop.cs、jsInterop.js、app.cssは共有ライブラリに移動しない。<br> | |||
<br> | |||
.csとindex.htmlを除く全てのファイルを共有ライブラリに移動することができる。<br> | |||
プラットフォーム固有の動作がある場合は、C#インターフェースで解決することができる。<br> | |||
<br> | |||
全ての.cssと.jsファイルは共有ライブラリに格納することができ、<br> | |||
index.htmlの_content/OpenHabitTracker.Blazor/...のように、プラットフォーム固有のプロジェクトにインクルードすることができる。<br> | |||
<br> | |||
==== ディレクトリとファイル構成 ==== | |||
* wwwrootディレクトリ | |||
*: アプリケーションの静的ファイルを格納するディレクトリ | |||
*: CSS、JavaScript、画像等のクライアントサイドリソースを格納する。 | |||
*: <br> | |||
* Pagesディレクトリ | |||
*: Blazorのページコンポーネントを配置するディレクトリ | |||
*: 各ページは、.razor拡張子を持つ。 | |||
*: <br> | |||
* Sharedディレクトリ | |||
*: 複数のページで共有されるコンポーネントを配置するディレクトリ | |||
*: レイアウトやナビゲーションメニュー等が含まれる。 | |||
*: <br> | |||
* Dataディレクトリ | |||
*: データモデルやサービスクラスを配置するディレクトリ | |||
*: ビジネスロジック、データアクセスコードもここに含まれる。 | |||
*: <br> | |||
* /ディレクトリ (プロジェクトのトップディレクトリ) | |||
*: Program.cs : アプリケーションの起動処理を定義する。 | |||
*: Startup.cs : サービスの設定やミドルウェアの構成を行う。 | |||
*: .csproj : プロジェクトの設定やパッケージ参照を管理する。 | |||
<br> | |||
上記のディレクトリ構成は標準的なものであるが、プロジェクトの要件に応じて適宜カスタマイズする。<br> | |||
<br> | |||
例えば、以下に示すようにディレクトリを構成することも一般的である。<br> | |||
* Services | |||
*: ビジネスロジックを分離する場合 | |||
* Models | |||
*: データモデルを別途管理する場合 | |||
* Helpers | |||
*: ユーティリティクラスを配置する場合 | |||
<br> | |||
# ディレクトリ構成例 | |||
PhotinoProject/ | |||
├── wwwroot/ # 静的ファイル用ディレクトリ | |||
│ ├── css/ # CSSファイル | |||
│ ├── js/ # JavaScriptファイル | |||
│ └── index.html # メインのHTMLファイル | |||
│ | |||
├── Pages/ # Blazorのページコンポーネント | |||
│ ├── _Host.cshtml # アプリケーションのホストページ | |||
│ ├── Index.razor # メインページ | |||
│ └── NextPage.razor # 他ページ | |||
│ | |||
├── Shared/ # 共有コンポーネント | |||
│ ├── MainLayout.razor # メインレイアウト | |||
│ └── NavMenu.razor # ナビゲーションメニュー | |||
│ | |||
├── Data/ # データモデルとサービス | |||
│ └── Data.cs # サンプルデータモデル | |||
│ | |||
├── Program.cs # アプリケーションのエントリーポイント | |||
├── Startup.cs # アプリケーションの設定 | |||
└── PhotinoProject.csproj # プロジェクトファイル | |||
<br><br> | |||