テンプレートを使った Rust プロジェクトのはじめかた

### 今回話たいこと
- Rust プロジェクトの始め方について

### 方法
- cargo-new
- cargo-generate

### 構成
- cargo-new の方法を簡単におさらい [#1](#はじめに)
- cargo-generate を使った方法を紹介 [#2](#cargo-generate-とは)
- WASM を使った動作確認 [#3](#動かしてみましょう)

# はじめに
Rust やってますか 🙋‍♂️？
Rust プロジェクトを始める時はどうしてますか？

公式の cargo-new を使う方法がポピュラーですよね
プロジェクトルートとなるディレクトリと
エントリーポイントが書かれた main.rs を生成してくれるので
まずはこのコマンドを実行する方が多いのではないでしょうか？

cargo-new でプロジェクトを作成
```bash
cargo new my_project
```

結果
```bash
my_project/
├── Cargo.toml
└── src/
    └── main.rs

# エントリーポイントが自動で作られる
cat src/main.rs 
fn main() {
    println!("Hello, world!");
}
```

簡単にプロジェクトを始めることができますね！
しかし、同じ構成のプロジェクトを作りたいときに
このようなやり方では手間ですよね…
おそらくは別で管理しているプロジェクトのテンプレートを用意していることが
多いのではないでしょうか？

そこで cargo-generate を使ったプロジェクトの始め方のご紹介です！！

# cargo-generate とは
作成済みのプロジェクトテンプレートを使って新たにプロジェクトを始めることができる
便利なコマンドです！
詳細は [crates.io](https://crates.io/) の[公式ページ](https://crates.io/crates/cargo-generate)をご覧ください

# 特徴
- GitHub 上で管理されているテンプレートプロジェクトを使って Rust プロジェクトを作成できる
- 同じ構成のプロジェクトを何度でも素早く再作成可能
    - create-react-app を使ったことがある人はイメージしやすいかも

# やってみましょう
まずはインストールから
```bash
cargo install cargo-generate
```

インストールが終わったら
公開されているテンプレートを使ってプロジェクトを作成してみましょう！
使用するテンプレートは wasm-pack-template です
https://github.com/rustwasm/wasm-pack-template
```bash
cargo generate --git https://github.com/rustwasm/wasm-pack-template

🤷   Project Name: my_wasm_temp_project
🔧   Destination: /Users/my/rust-project/my_wasm_temp_project ...
🔧   project-name: my_wasm_temp_project ...
🔧   Generating template ...
[ 1/14]   Done: .appveyor.yml
[ 2/14]   Done: .github/dependabot.yml
[ 3/14]   Done: .github
[ 4/14]   Done: .gitignore
[ 5/14]   Done: .travis.yml
[ 6/14]   Done: Cargo.toml
[ 7/14]   Done: LICENSE_APACHE
[ 8/14]   Done: LICENSE_MIT
[ 9/14]   Done: README.md
[10/14]   Done: src/lib.rs
[11/14]   Done: src/utils.rs
[12/14]   Done: src
[13/14]   Done: tests/web.rs
[14/14]   Done: tests
🔧   Moving generated files into: `/Users/my/rust-project/my_wasm_temp_project`...
🔧   Initializing a fresh Git repository
✨   Done! New project created /Users/my/rust-project/my_wasm_temp_project
```
#### オプションの説明
- —git … GitHub に公開されているテンプレートを指定する
- —name … プロジェクト名の指定も可能

プロジェクトが生成されたので確認しましょう
```bash
cd my_wasm_temp_project/

my_wasm_temp_project/
├── .appveyor.yml
├── .github
│  └── dependabot.yml
├── .gitignore
├── .travis.yml
├── Cargo.toml
├── LICENSE_APACHE
├── LICENSE_MIT
├── README.md
├── src
│  ├── lib.rs
│  └── utils.rs
└── tests
   └── web.rs
```

テンプレートと同じものができてますね！


# 動かしてみましょう
せっかくなので WASM を動かしてみましょう
wasm を動かすには `wasm-pack` が必要なのでインストールします
```bash
cargo install wasm-pack
```

rust のコードを build して WebAssembly にビルドします
```bash
wasm-pack build
```

pkg ディレクトリとファイルが生成されましたね
```bash
my_wasm_temp_project/
├── pkg
│  ├── .gitignore
│  ├── my_wasm_temp_project.d.ts
│  ├── my_wasm_temp_project.js
│  ├── my_wasm_temp_project_bg.js
│  ├── my_wasm_temp_project_bg.wasm
│  ├── my_wasm_temp_project_bg.wasm.d.ts
│  ├── package.json
│  └── README.md
```

動作確認用に html と js を用意します

ここでは Vite を使いました

```bash
npm init -y
npm install --save-dev vite
```

vite.config.js, main.js, index.html をプロジェクトルートに作成します
```bash
my_wasm_temp_project/
├── vite.config.js
├── main.js
├── index.html
```

vite.config.js
```jsx
export default {
  server: {
    open: true
  }
}
```

main.js
```jsx
import init, { greet } from "./pkg/my_wasm_app.js";

init().then(() => {
  greet("Vite + WASM!");
});
```

index.html
```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>WASM からこんにちわ</title>
</head>
<body>
<h1>こんにちわ</h1>
</body>
</html>
```

それでは実際に動かしてみましょう

いざ！

```bash
npx vite

  VITE v6.3.5  ready in 86 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
```

![スクリーンショット 2025-05-25 15.06.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4002550/78c79f39-1e60-4836-9caa-429cbe9821bb.png)
成功ですね！ (wasm じゃなくても良いと思ったとしても口には出さない🤫)

cargo-generate を使うことでプロジェクトがスムーズに始められますね
もちろん自分でオリジナルのテンプレートを用意することも可能ですが
それは次に取っておくことにします
それでは👋