Zenn
🌠

Tauriで使えるWebフレームワークたち（VSCodeのプラグインも添えて）

2021/10/09に公開
Rust
Tauri
tech

※Tauriって何？という方はお先にこちら↓の記事をどうぞ。

この記事は？

  • Tauriで使えるWebフレームワークを探してみよう、という記事です。
  • まずはRust部分（バックエンド）のコーディングに関係するVSCodeのプラグインを紹介してから、Webフレームワークの調査に入っていこうと思います。
  • なぜVSCodeのプラグインかというと・・・単純に私が普段VSCodeでコーディングしているからです😋

TauriでのRustコーディングに関係するVSCodeのプラグイン

Tauri

  • Tauriコマンドと、tauri.conf.json編集時の機能を追加してくれるプラグイン。
  • 機能
    • コマンドパレットに、init、deps、dev、buildコマンドが追加
    • ドキュメントやオートコンプリートの表示
  • Rust自体のコーディングにはあまり関係ないので、入れるかどうかはお好みでよいかと。

rust-analyzer

  • コーディングを補助してくれる様々な機能を追加してくれるプラグイン。
  • Language Serverと呼ばれるものの一種。
  • 機能（代表的なもの）
    • コード補完
    • 定義へ移動
    • すべての参照を検索
    • シンボルの名前変更
    • ホバーするとドキュメントを表示
    • シンタックスハイライト
    • 等々・・・
  • Rustという拡張機能（こちらは「RLS」というLanguage Serverを使用）とは競合してしまうようなので、どちらかにしましょう。
  • rust-analyzerのマニュアルは→こちら

CodeLLDB

  • Rustに対応したデバッガを追加してくれるプラグイン。
  • Rustのソースコードでブレークポイントやステップ実行等のデバッグ機能が使えるようになります。
  • Tauriでの開発でどこまで使えるかは今のところわかりません・・・が、とりあえず導入しておいても良いのではないでしょうか。Rust単体での開発時は重宝すると思います。

Tauriでプロジェクトフォルダをセットアップ

まずはcreate tauri-appから

  • Tauriがインストールできたら、まずはプロジェクトフォルダのセットアップをしましょう。
  • 基本的にはcreate tauri-appからプロジェクトフォルダの作成をはじめることができます。

※本記事の手順ではyarnを使用する前提としています。npmを使用する方は適宜読み変えてください。

  1. まずは、プロジェクトフォルダを作りたい場所で以下コマンドを実行してみましょう。

    yarn create tauri-app

    実行結果
    tauri-and-web-framework_2021-09-28-20-37-39

  2. そのままEnterキーを押してみましょう。プロジェクトフォルダセットアップのための質問が始まります。

  3. アプリの名前を決めましょう。そのままEnterを押すとデフォルトの「tauri-app」という名前になります。

    tauri-and-web-framework_2021-09-28-20-46-52

  4. アプリのウィンドウのタイトルバーに表示される文字を決めましょう。そのままEnterを押すとデフォルトの「Tauri App」という文字になります。

    tauri-and-web-framework_2021-09-28-20-49-31

  5. ここまできたら、作成するアプリのWebフレームワークの選択になります。上下で矢印（>）を動かして、自分の好きなフレームワークを選択しましょう。（私は一応一通りプロジェクトフォルダだけ作っておきました）

    tauri-and-web-framework_2021-09-28-20-55-19

  6. フレームワークの選択後、「tauri-apps/api」のnpmパッケージを導入するかどうか訊かれます。とりあえず入れておきましょう。（そのままEnterを押すとデフォルトで入ります）

ここから、各Webフレームワーク毎のセットアップ手順に入っていきます。

Vanilla.js（フレームワークなし）

  • フレームワークなしでプロジェクトを作成します。
    tauri-and-web-framework_2021-09-28-21-09-24

Vanilla.jsのセットアップ

  1. フレームワークでVanilla.jsを選択し、「tauri-apps/api」の導入有無を選択したら、パッケージのインストールが始まります。インストールにかかる時間は30秒ほど。
  2. 以上でセットアップ完了です。
    tauri-and-web-framework_2021-10-02-11-16-58

React

  • 公式サイト
  • React (リアクト) は、Facebookとコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリ。
  • 有名フレームワークその１ですね。

Reactのセットアップ

  1. フレームワークでcreate-react-appを選択し、「tauri-apps/api」の導入有無を選択したら、create-react-appを使用したReactのセットアップが始まります。
  2. JavaScriptを使用するかTypeScriptを使用するかを選択できます。ここではTypeScriptを選択しました。
    tauri-and-web-framework_2021-09-28-21-25-34
  3. パッケージのインストールが始まります。インストールにかかる時間は1分30秒ほど。
  4. 以上でセットアップ完了です。
    tauri-and-web-framework_2021-10-02-11-27-39

Vite

  • 公式サイト
  • Vite（フランス語で「速い」という意味の単語で /vit/ と発音）は、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。（公式サイトより）
  • Vanilla.js、React、Vue、Preact、Svelte等のフレームワークが使える、ビルドツールなどのツール群のようです。
    tauri-and-web-framework_2021-09-28-21-42-12
  • 以下のようなたくさんのテンプレートの中から選べます。
    • vanilla
    • vanilla-ts
    • vue
    • vue-ts
    • react
    • react-ts
    • preact
    • preact-ts
    • lit-element
    • lit-element-ts
    • svelte
    • svelte-ts
      tauri-and-web-framework_2021-09-28-21-48-09

Viteのセットアップ（ここでは、テンプレートにpreact-tsを選択）

  1. フレームワークでcreate-viteを選択し、「tauri-apps/api」の導入有無を選択したら、create-viteを使用したセットアップが始まります。
  2. ここでは、テンプレートとしてpreact-tsを選択しました。
    tauri-and-web-framework_2021-10-02-11-37-37
  3. パッケージのインストールが始まります。インストールにかかる時間は1分ほど。
  4. 以上でセットアップ完了です。
    tauri-and-web-framework_2021-10-02-11-40-23

Vue.js

Vue.jsのセットアップ

  1. フレームワークでVue CLIを選択し、「tauri-apps/api」の導入有無を選択したら、Vue CLIを使用したセットアップが始まります。
  2. Vue CLIのインストールを求められます。同意して入れましょう。
    tauri-and-web-framework_2021-09-28-21-54-17
  3. プリセットの選択です。ここでは、自分で機能を選択する、Manually select featuresを選びました。
    tauri-and-web-framework_2021-10-02-11-47-30
  4. 入れる機能の選択です。スペースキーでどの機能を入れるか選択できます。ここでは、デフォルト設定に加えてTypeScriptを有効にしました。
    tauri-and-web-framework_2021-10-02-11-49-32
  5. Vue.jsのバージョン選択です。ここでは、新しい方の3.xを選びました。
    tauri-and-web-framework_2021-10-02-11-50-36
  6. class-styleのコンポーネントを使用するかどうかの選択です。ここでは、使用しない（デフォルト）を選びました。
    tauri-and-web-framework_2021-10-02-11-55-55
  7. Babel alongside TypeScriptを使用するかどうかの選択です。ここでは、使用する（デフォルト）を選びました。
    tauri-and-web-framework_2021-10-02-11-59-17
  8. linter（静的解析ツール）とformatter（コード整形ツール）の選択です。ここでは、ESLint + Prettierを選択しました。
    tauri-and-web-framework_2021-10-02-12-01-01
  9. linterによる静的解析の設定です。ここでは、Lint on save（デフォルトで有効になっている。ファイル保存時に静的解析を実行する）のみ選択しました。
    tauri-and-web-framework_2021-10-02-12-05-26
  10. BabelとESLint等の設定をpackage.jsonファイルに持たせるか、それぞれの設定ファイル（.babelrcファイル、.eslintrc.jsonファイル等）に持たせるかの設定です。
    ここでは、In dedicated config files（それぞれの設定ファイルに持たせる）を選択しました。
    tauri-and-web-framework_2021-10-02-12-09-28
  11. ここまで設定してきた内容をプリセットとして保存しておくかどうかの選択です。ここでは、保存しない（デフォルト）を選択しました。
    tauri-and-web-framework_2021-10-02-12-11-56
  12. パッケージのインストールが始まります。インストールにかかる時間は1分30秒ほど。
  13. 以上でセットアップ完了です。
    tauri-and-web-framework_2021-10-02-12-15-03

Angular

Angularのセットアップ

  1. フレームワークでAngular CLIを選択し、「tauri-apps/api」の導入有無を選択したら、Angular CLIを使用したセットアップが始まります。
  2. Angular Materialを導入するか訊かれます。ここでは、入れる（デフォルト）を選択しました。
    tauri-and-web-framework_2021-10-02-10-14-34
  3. Angular ESLintを導入するか訊かれます。ここでは、入れる（デフォルト）を選択しました。
    tauri-and-web-framework_2021-10-02-10-15-34
  4. angular cliの導入が求められます。同意して入れましょう。
    tauri-and-web-framework_2021-10-02-10-17-28
  5. Angular routingを導入するか訊かれます。ここでは、入れない（デフォルト）を選択しました。
    tauri-and-web-framework_2021-10-02-10-19-14
  6. CSSのフォーマットを訊かれます。ここでは、SCSSを選択しました。
    tauri-and-web-framework_2021-10-02-10-20-58
  7. パッケージのインストールが始まります。インストールにかかる時間は2分ほど。
    • Angular Materialを導入した場合
      1. テーマカラーを訊かれます。好きなものを選びましょう。ここでは、一番上にあったIndigo/Pinkを選びました。
        tauri-and-web-framework_2021-10-02-10-25-07
      2. グローバルでtypographyを設定するか訊かれます。ここでは、設定しない（デフォルト）を選択しました。
        tauri-and-web-framework_2021-10-02-10-29-17
      3. アニメーションを設定するか訊かれます。ここでは、設定する（デフォルト）を選択しました。
        tauri-and-web-framework_2021-10-02-10-31-13
      4. パッケージのインストールが始まります。インストールにかかる時間は1分ほど。
  8. 以上でセットアップ完了です。
    tauri-and-web-framework_2021-10-02-10-35-40

Svelte

  • 公式サイト
  • 比較的最近登場し、注目されているフレームワーク。コード量を少なくし、読みやすさを重視しているフレームワークのようです。
    tauri-and-web-framework_2021-10-02-10-46-29

Svelteのセットアップ

  1. フレームワークでSvelteを選択し、「tauri-apps/api」の導入有無を選択したら、Svelteを使用したセットアップが始まります。
  2. Typescriptを使用するか訊かれます。ここでは、使用する（デフォルト）を選択しました。
    tauri-and-web-framework_2021-10-02-10-48-27
  3. degitパッケージのインストールを求められます。同意して入れましょう。
    tauri-and-web-framework_2021-10-02-10-50-11
  4. パッケージのインストールが始まります。インストールにかかる時間は1分ほど。
  5. 以上でセットアップ完了です。
    tauri-and-web-framework_2021-10-02-10-53-08

Dominator

Zero-cost ultra-high-performance declarative DOM library using FRP signals for Rust!

（githubのREADMEより）

  • DOMをRustから使用するためのライブラリのようです。
  • GitHubのリポジトリは4年前くらいからあるようですが、日本語情報は見つからず・・・。
    tauri-and-web-framework_2021-10-02-11-07-14

Dominatorのセットアップ

  1. フレームワークでDominatorを選択し、「tauri-apps/api」の導入有無を選択したら、セットアップが始まります。
  2. パッケージのインストールが始まります。インストールにかかる時間は30秒ほど。
  3. 以上でセットアップ完了です。
    tauri-and-web-framework_2021-10-02-11-09-55

TauriでHello Worldする

基本的には、プロジェクトフォルダに移動して、

yarn tauri dev

でアプリが起動し、ウィンドウが開きます。

上記フレームワークの中では、Vue.jsのみ

yarn tauri:serve

で起動でした。（TauriはVue CLIのプラグインがあるので、それでコマンドが違うのかもです）

※初回起動時はRustのパッケージインストールが入るので、1,2分ほど時間がかかります。

Vanilla.js

tauri-and-web-framework_2021-10-09-10-09-36
tauri-and-web-framework_2021-10-09-10-11-27

React

tauri-and-web-framework_2021-10-09-10-23-28
tauri-and-web-framework_2021-10-09-10-23-48
Reactの場合は、ブラウザでも画面が開きました。
tauri-and-web-framework_2021-10-09-10-26-20

Vite(preact)

tauri-and-web-framework_2021-10-09-10-31-33
tauri-and-web-framework_2021-10-09-10-31-47

Vue.js

tauri-and-web-framework_2021-10-09-10-36-22
tauri-and-web-framework_2021-10-09-10-36-52

Angular

tauri-and-web-framework_2021-10-09-10-41-48
tauri-and-web-framework_2021-10-09-10-42-04

Svelte

tauri-and-web-framework_2021-10-09-10-46-09
tauri-and-web-framework_2021-10-09-10-46-23

Dominator

tauri-and-web-framework_2021-10-09-10-50-15
tauri-and-web-framework_2021-10-09-10-50-37
Dominatorでアプリを起動した時、Rustのコンパイルエラーが出ていました・・・
tauri-and-web-framework_2021-10-09-11-02-38
現時点ではアプリの画面が正しいかもわからないので、Dominatorについては、この記事では一旦ここまでにします。（src/lib.rsにはDOM操作のコードらしきものが書かれていたので、正しい画面ではない気が・・・）

以上、Tauriで使えるWebフレームワークのセットアップ＆Hello Worldでした。
次からは、Tauriの設計パターンと、RustでバックエンドのAPI作成に入っていければと思います。

Discussion