はじめに
この記事はC3 Advent Calendar 2022 16日目の記事です
今回の記事では，Rustでフロントエンド開発の概要について書いたのち，ハンズオン形式でYewについて説明していきたいと思います．
概要
Rustでフロントエンド開発を行うことの概要についてです．手が動かしたくてたまらない人はこの章は飛ばしてハンズオンの章まで行ってもらって大丈夫です．
なぜRustでフロントエンド開発を行うのか
RustはStack Overflowの「もっとも愛されているプログラミング言語」に選ばれ続けている現在最も注目されているプログラミング言語の一つです．
フロントエンドにおいてはRustからWebAssemblyを生成してそれをJavaScriptに埋め込んで実行という形で用いられます．ただし，現状ではWebAssemblyから直接DOMを操作したりすることはできないため，処理のパフォーマンスを向上させたい部分に対して部分的に使用されるのが主流です．そんな中でも，全てをRustで書いてやろうというフレームワークも存在しており今回はそれを用いてフロントエンド開発を行なっていきたいと思います．
で，結局なぜRustでフロントエンド開発を行うのか．はっきり言います．ロマンです.
だってRustでフロントエンドが書けたら面白いじゃないですか．
今後，WebAssemblyがブラウザでJavaScriptと同様に動作するようになったらより優れたパフォーマンスを期待することができます．その前に技術の先取りをしちゃいましょう！
フレームワーク-Yew-
RestにはSeedやPercyといったフロントエンドフレームワークがありますが，今回この記事で取り上げるのはYewというフレームワークです．採用理由としては，Reactっぽい書き方であることとgithubのスター数が比較的多いことです．普段，Reactを触ってる人なら結構親しみやすいと思います．
ハンズオン
環境構築
今回はRustそのものの環境構築は割愛させていただきます．以下に公式のinstallサイトを置いておきます．
また，Yewの公式サイトに環境構築なしでブラウザ上でYewを動かせるPlayGroundもありますので，少しだけ遊んでみたいよって方はそちらをご利用ください.
動作環境
- cargo 1.64.0 (387270bc7 2022-09-16)
- rustc 1.64.0 (a55dd71d5 2022-09-19)
- rustup 1.25.1 (2022-07-12)
- Yew Version: 0.20
必要なツールのインストール
以下にYewで開発を行う上で必要なツールの軽い説明とコマンドを示します．
- RustをWebAssemblyをターゲットにコンパイルできるようにするためのコマンド．
rustup target add wasm32-unknown-unknown
- トランク（デプロイやパッケージ化を管理するためのツール）のインストール
cargo install --locked trunk
- cargo-generate（既存のgitリポジトリをテンプレートとしてプロジェクトを立ち上げるためのツール）のインストール
cargo install cargo-generate
テンプレートプロジェクトの作成
以下のコマンドを実行することによりgithub上にあるテンプレートプロジェクトを作成することができます．コマンドを実行するとプロジェクト名を聞かれるので任意の名前をつけてあげてください．（Rustの命名規則は基本的にスネークケースであるためプロジェクト名もスネークケースにしておくことを推奨します．）
cargo generate --git https://github.com/yewstack/yew-trunk-minimal-template
その後作成したディレクトリに移動し，アプリケーションをローカルでビルドして実行します．
cd <プロジェクト名>
trunk serve
コンパイルが終わったらhttp://127.0.0.1:8080/ にアクセスすると以下のような画面が表示されると思います．これでテンプレートプロジェクトの作成は完了です．今回はとりあえずここまでです．お疲れ様でした．
最後に
今回はYewのテンプレートプロジェクトの作成まで行いました．次回は，この続きで簡単なWebアプリケーションを作っていきたいと思います．近日中に公開予定なのでお楽しみに！
Rustはフロントエンドだけでなくバックエンドや組み込み系の開発も行える汎用性の高い言語です．（むしろその用途の方が多い）ということで，明日のC3 Advent Calendar 2022はyamato0211さんの「Rustでgraphqlサーバーを作る！」です．お楽しみに！