mirror of
https://github.com/wailsapp/wails.git
synced 2025-05-02 10:21:20 +08:00
131 lines
4.3 KiB
Plaintext
131 lines
4.3 KiB
Plaintext
---
|
|
sidebar_position: 2
|
|
---
|
|
|
|
# プロジェクトの開始
|
|
|
|
## プロジェクトの生成
|
|
|
|
CLIのインストールが終わったら、`wails init`コマンドで新しいプロジェクトを生成しましょう。
|
|
|
|
好きなフレームワークを選択してください:
|
|
|
|
```mdx-code-block
|
|
import Tabs from "@theme/Tabs";
|
|
import TabItem from "@theme/TabItem";
|
|
|
|
<Tabs
|
|
defaultValue="Svelte"
|
|
values={[
|
|
{label: "Svelte", value: "Svelte"},
|
|
{label: "React", value: "React"},
|
|
{label: "Vue", value: "Vue"},
|
|
{label: "Preact", value: "Preact"},
|
|
{label: "Lit", value: "Lit"},
|
|
{label: "Vanilla", value: "Vanilla"},
|
|
]}
|
|
>
|
|
<TabItem value="Svelte">
|
|
JavaScriptによる<a href={"https://svelte.dev/"}>Svelte</a>プロジェクトを生成する場合:<br/><br/>
|
|
|
|
wails init -n myproject -t svelte
|
|
|
|
TypeScriptによるプロジェクトを生成する場合:<br/>
|
|
|
|
wails init -n myproject -t svelte-ts
|
|
|
|
</TabItem>
|
|
<TabItem value="React">
|
|
JavaScriptによる<a href={"https://reactjs.org/"}>React</a>プロジェクトを生成する場合:<br/><br/>
|
|
|
|
wails init -n myproject -t react
|
|
|
|
TypeScriptによるプロジェクトを生成する場合:<br/>
|
|
|
|
wails init -n myproject -t react-ts
|
|
|
|
</TabItem>
|
|
<TabItem value="Vue">
|
|
JavaScriptによる<a href={"https://vuejs.org/"}>Vue</a>プロジェクトを生成する場合:<br/><br/>
|
|
|
|
wails init -n myproject -t vue
|
|
|
|
TypeScriptによるプロジェクトを生成する場合:<br/>
|
|
|
|
wails init -n myproject -t vue-ts
|
|
|
|
</TabItem>
|
|
<TabItem value="Preact">
|
|
JavaScriptによる<a href={"https://preactjs.com/"}>Preact</a>プロジェクトを生成する場合:<br/><br/>
|
|
|
|
wails init -n myproject -t preact
|
|
|
|
TypeScriptによるプロジェクトを生成する場合:<br/>
|
|
|
|
wails init -n myproject -t preact-ts
|
|
|
|
</TabItem>
|
|
<TabItem value="Lit">
|
|
JavaScriptによる<a href={"https://lit.dev/"}>Lit</a>プロジェクトを生成する場合:<br/><br/>
|
|
|
|
wails init -n myproject -t lit
|
|
|
|
TypeScriptによるプロジェクトを生成する場合:<br/>
|
|
|
|
wails init -n myproject -t lit-ts
|
|
|
|
</TabItem>
|
|
<TabItem value="Vanilla">
|
|
JavaScriptによるバニラなプロジェクトを生成する場合:<br/><br/>
|
|
|
|
wails init -n myproject -t vanilla
|
|
|
|
TypeScriptによるプロジェクトを生成する場合:<br/>
|
|
|
|
wails init -n myproject -t vanilla-ts
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
```
|
|
|
|
<hr />
|
|
|
|
様々な機能やフレームワークを提供する[コミュニティテンプレート](../community/templates.mdx)を利用することもできます。
|
|
|
|
プロジェクト生成時に使用可能なオプションを確認するには、`wails init -help`を実行してください。 詳しくは、[CLIリファレンス](../reference/cli.mdx#init)を参照してください。
|
|
|
|
## プロジェクトのディレクトリ構成
|
|
|
|
Wailsのプロジェクトディレクトリの構成は次のとおりです:
|
|
|
|
```
|
|
.
|
|
├── build/
|
|
│ ├── appicon.png
|
|
│ ├── darwin/
|
|
│ └── windows/
|
|
├── frontend/
|
|
├── go.mod
|
|
├── go.sum
|
|
├── main.go
|
|
└── wails.json
|
|
```
|
|
|
|
### プロジェクトの構造
|
|
|
|
- `/main.go` - アプリのメインコード
|
|
- `/frontend/` - フロントエンドのプロジェクトディレクトリ
|
|
- `/build/` - ビルドディレクトリ
|
|
- `/build/appicon.png` - アプリアイコン
|
|
- `/build/darwin/` - Mac固有のプロジェクトディレクトリ
|
|
- `/build/windows/` - Windows固有のプロジェクトディレクトリ
|
|
- `/wails.json` - プロジェクト構成ファイル
|
|
- `/go.mod` - Goモジュール定義ファイル
|
|
- `/go.sum` - Goモジュールチェックサムファイル
|
|
|
|
`frontend`ディレクトリ内は、Wailsで決まったファイル構成等は無く、お好きなフロントエンドプロジェクトを配置することができます。
|
|
|
|
`build`ディレクトリは、アプリのビルド時に使用されます。 この中のファイルは、ビルドの挙動をカスタマイズするために、適宜ファイル内容を書き換えることができます。 buildディレクトリ内のファイルを削除すると、デフォルトのファイルが再生成されます。
|
|
|
|
`go.mod`のモジュール名は、最初は"changeme"になっています。 このモジュール名は、あなたのプロジェクトに適切な名前に変更しましょう。
|