今回話たいこと
- Rust プロジェクトの始め方について
方法
- cargo-new
- cargo-generate
構成
はじめに
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 を使うことでプロジェクトがスムーズに始められますね
もちろん自分でオリジナルのテンプレートを用意することも可能ですが
それは次に取っておくことにします
それでは👋