はじめに

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

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

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

cargo new my_project

結果

my_project/
├── Cargo.toml
└── src/
    └── main.rs

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

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

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

cargo-generate とは

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

特徴

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

やってみましょう

まずはインストールから

cargo install cargo-generate

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

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 … プロジェクト名の指定も可能

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

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 が必要なのでインストールします

cargo install wasm-pack

rust のコードを build して WebAssembly にビルドします

wasm-pack build

pkg ディレクトリとファイルが生成されましたね

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 を使いました

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

vite.config.js, main.js, index.html をプロジェクトルートに作成します

my_wasm_temp_project/
├── vite.config.js
├── main.js
├── index.html

vite.config.js

export default {
  server: {
    open: true
  }
}

main.js

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

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

index.html

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

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

いざ！

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

成功ですね！ (wasm じゃなくても良いと思ったとしても口には出さない🤫)

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