---
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"になっています。 このモジュール名は、あなたのプロジェクトに適切な名前に変更しましょう。