📦

[Rust: Yew] Trunk の build と watch の設定

2022/03/22に公開約2,800字

この記事が役立つかもしれない人

Trunk を使って Yew の開発をしている人の中で、「index.html の場所は変えられないのかな?」 もしくは 「コードを変更してもリアルタイムに更新されなくなっちゃった……。」 と調べている人。

この記事では扱わないこと

  • Rust について
    (Yew という単語だけだと植物のイチイも検索で引っかかってしまうため、タイトルに Rust と入れています)
  • Yew とは何か・Yew の使い方について
    (Trunk.toml の話に終始しますが、私が Yew と Trunk の組み合わせでしか使ったことがないので一応タイトルに入れておきました)
  • Trunk とは何か・Trunk の細かい話
    (私が開発している過程で必要となった部分についてのみ書かれています)

本題

結論から言えば Trunk.toml という名前のファイルを作成して、そこに少しの設定を書き込みます。

英語でも「短文なら大丈夫!」という方は以下のリンクから、本家の解説付き Trunk.toml を読む方がこの記事を読み進めるよりも良いと思います。
(また、この記事を読み終えた際に「欲しい情報がなかった……。」という場合は検索作業に戻るよりも下記リンクを参照すると Trunk の設定周辺の問題は大抵解決すると思います。)

あとは手早く済ませたい方用に「index.html の場所を移動しても動くようにする」+「移動した後も自動更新される」ように記述した Trunk.toml を示します。

Trunk.toml
[build]
target = "public/index.html"
dist = "dist"

[watch]
watch = ["public/", "src/"]

上記の Trunk.toml に対応するディレクトリ構成は以下の通りです。

📂 root
 ┣ 📁 public ━ 📄 index.html
 ┣ 📁 src ━━━━ 📄 main.rs
 ┣ 📄 Cargo.lock
 ┣ 📄 Cargo.toml
 ┗ 📄 Trunk.toml

index.html 移動編 ~[build] 内の簡単な解説~

target には、移動した後の index.html の場所を教えてあげてください。
例の場合だと "public/index.html" ですが、ディレクトリの名前は public 以外でも大丈夫です。好きな名前でディレクトリを作って、そこに index.html を移動させたら target に渡す……と、これだけです。
そうすれば index.html を root ディレクトリ以外に移動させても、コンパイルや trunk serve が実行できます。

dist では出力される WASM や JavaScript などが入るディレクトリの名前を設定できます。
例のように "dist" を渡すだけならば設定する必要もありませんが、例えば "build" や "output" といった名前のディレクトリに出力したいという場合はこれで設定できます。

trunk serve 自動更新編 ~[watch] 内の簡単な解説~

watch には、編集して保存した後に自動で build して欲しいファイルがあるディレクトリを指定します。
index.html を移動した際に、これを設定しないと「編集して → trunk serve → 動作確認 → 修正する → 一旦、Trunk を停める → trunk serve ...」といったような Trunk を使っている意味が皆無な状況になってしまいます。

くわえて注意点として、index.html のあるディレクトリだけを監視対象にしても main.rs 等を編集した際に自動で build されません。
index.html と main.rs のあるディレクトリの両方を指定しておくのが安心だと思います。

本題終了

以上が、index.html の場所を移動させる方法と移動した後も変更を加えたら自動で build されるようにする設定でした。
その他にも、先に紹介した全てのフィールドとそのデフォルト設定が記述されている Trunk 本家の Trunk.toml には、紹介はしていないものの便利そうな設定がいくつかあったので、今後も Trunk を使う方は一読しておくと役に立つと思います!

おまけ

私が Trunk と Yew を使用して作ったウェブサイトを置いておきます。

(2022-03-23現在、スマホでもアクセスはできますが、操作できません。修正予定……。)

実験的な作りで、友人らに見せたとき「初見殺し」「不親切」と言われました。
一応、説明しておくとマウスホイールとクリックで操作します。
ちなみにマウスホイールができないと最初のカード以降には進めません……。

「Yew を使うときのサンプルが増えれば――!」という思いでソースコードへの直リンクも貼っておきます。

上記のコードはあまり良い出来でも良い例でもないので、あくまで一例だと思って見て頂ければ幸いです。

「Yew 勉強したい!」という方の期待に応えるようなサンプルコードとしては、下記にある Yew 本家のリポジトリで公開している Example のコードを活用しながら勉強するのがオススメです。
(バージョンが違う等の問題がある場合もありますので、そこだけはお気を付けください。)


最後まで読んで頂きありがとうございます。

この記事が役に立ったら "いいね" をもらえると嬉しいです!
また、些細なコメントでもリアクションを頂けるとありがたいです!

Discussion

ログインするとコメントできます