🌟

TauriでRustもフロントエンドも身につけたいので、最初の一歩を踏み出した

8 min read

Tauriって?

  • 公式サイトは→こちら
  • Tauriは、RustツールとWebviewで表示されるHTMLを組み合わせてデスクトップコンピュータ用のアプリが作れる、アプリケーションフレームワークです。
  • 公式もまだベータ版であり、日本語の資料は大変少ない・・・
  • でも、これならRustへの理解をもっと深めるのもフロントエンドの勉強も同時に進められるじゃん!俺得!

ということで、早速インストールしてみます。

読むと今後得するかも?な人

  • ReactとかVueは触ったことあるけど、Rustは触ったことない。Rustの勉強はしたいけど、コンソールで文字を表示するところから入るのは気が乗らない・・・っていう人
  • Rustは触ったことあるけど、GUIのフレームワークにピンとくるものがない。画面をフロントエンドの技術で作れないかなぁ・・・と思っている人(私です😇)
  • バックエンドとフロントエンドを、ローカル環境で一気に勉強したい人(私です😇)
    • ただし、CもHTML・CSS・Javascriptも未経験、とかだと学習コストがやばいです。
    • 本当のプログラミング初心者がTauriから始めるのは挫折の可能性が高い気がするのであんまりオススメはしません・・・。

前提

  • 公式のセットアップガイドは→こちら(英語です)
  • Windows 10 Pro 20H2で実施してます。
  • Windows Subsystem for Linux (WSL) を使用する場合は別途手順が必要なので注意。
    • 今回は素のWindowsでセットアップします。
  • このセットアップはアプリ開発環境のみで必要です。実際にアプリが動く端末では、これらの作業は不要です。
  • 以下のインストール手順にてユーザーアカウント制御のダイアログが出たら、全て「はい」をクリックしてください。

「まだ始めないんかい!」と思った人、すみません・・・次の項目からインストール始まります!

Microsoft Visual Studio C++ build toolsのインストール

※Visual Studio2017のビルドツールがインストール済であれば、アンインストールする必要があるかもしれません。2017と2019の両方がインストールされていると、Tauriが動作しないという報告があるようです。

  1. Microsoftのダウンロードページにて「Build Tooldのダウンロード」をクリック
    starting-tauri_2021-09-13-22-20-10

  2. ダウンロードしたファイルを実行

  3. 「続行」をクリック
    starting-tauri_2021-09-13-22-22-36
    ※この後、自分の場合はVisual Studio 2019がインストール済だったので以下の画面になりました。未インストールであれば出ないかもです。ひとまず「閉じる」をクリックしました。
    starting-tauri_2021-09-13-22-28-56

  4. 「使用可能」タブから、「VisualStudio Build Tools 2019」→「インストール」をクリック
    starting-tauri_2021-09-13-22-39-09

  5. 「ワークロード」タブから、「C++によるデスクトップ開発」にチェックをつけて、「インストール」をクリック
    starting-tauri_2021-09-13-22-51-33
    ※ここでインストールに結構かかるので、Tauriのサイトにもあるようにコーヒーでも飲みながら待ちましょう。

  6. インストールが終わったら再起動が促されるので、「再起動」をクリック
    starting-tauri_2021-09-13-22-59-43

  7. 再起動後、Windowsボタンから「Visual Studio Installer」を起動し、「インストール済み」に「Visual Studio Build Tools 2019」が表示されていればインストール完了
    starting-tauri_2021-09-14-02-42-22

Node.jsのインストール

  • Tauri公式ではnvm-windowsが推奨されていますが、素のNode.jsでもよいと思います。
  • 今回はnvm-windowsを入れてみます。
  • nvm-windowsを導入する際には、既にNode.jsが入っていれば、以下のアンインストール手順が必要です。
    • Node.jsのアンインストール
    • %ProgramFiles%\nodejsフォルダの削除
    • npmモジュールのインストールディレクトリ(C:\Users<user>\AppData\Roaming\npm 等)の削除

nvm-windowsのインストール

  1. nvm-windowsのページにて「Download the latest installer」をクリック
    starting-tauri_2021-09-13-23-20-19

  2. 最新版の「nvm-setup.zip」をクリック
    starting-tauri_2021-09-13-23-22-29

  3. 解凍して出てきたインストーラを実行

  4. 「I accept the agreement」をチェックして、「Next」をクリック
    starting-tauri_2021-09-13-23-25-20

  5. 任意のインストール先を選択して、「Next」をクリック
    starting-tauri_2021-09-13-23-27-08

  6. 任意のNode.js(シンボリックリンク)のパスを選択して、「Next」をクリック
    starting-tauri_2021-09-13-23-30-19

  7. インストール内容を確認して、「Install」をクリック
    starting-tauri_2021-09-13-23-32-16

  8. インストールが終わったら、「Finish」をクリック
    starting-tauri_2021-09-13-23-32-55

nvm-windowsでNode.jsを有効化

  1. Windowsボタン上で右クリックして、「Windows PowerShell(管理者)」をクリック
    starting-tauri_2021-09-13-23-39-02
    ※ここでPowerShellではなくコマンドプロンプトが出る場合は、Windowsの設定 → 「個人用設定」→「タスクバー」から、「[スタート]ボタンを右クリックするかWindows キー + Xキーを押したときに表示されるメニューで、コマンド プロンプトを Windows PowerShell に置き換える」をオンにしてください。
    starting-tauri_2021-09-13-23-43-47

  2. 開いたPowerShellにて、以下のコマンドを実行する

    nvm install latest
    

    starting-tauri_2021-09-13-23-48-28

  3. Node.jsの最新版がダウンロードされるので、有効化するために以下のコマンドを実行する(先程のコマンド実行結果の最後に表示されているコマンドを実行する)

    nvm use {先程ダウンロードした最新バージョン}
    

    →今回は16.9.1がダウンロードされたので、以下のコマンドとなる。

    nvm use 16.9.1
    

    starting-tauri_2021-09-13-23-58-38

  4. 以下のコマンド実行でNode.jsのバージョンが表示されれば有効化完了

    node -v
    

    starting-tauri_2021-09-14-00-07-22

Yarn(Node.jsのパッケージマネージャ)のインストール

  • Tauriのチームではyarnが好まれているみたいなので、せっかくなのでインストールします。
    • npmで十分!という方はこの手順は不要です。
    • ここでは一旦グローバルインストールにしておきます。
  • Node.jsのパッケージマネージャ自体についてはここでは説明しません。
  1. PowerShellを起動(これ以降は管理者権限でなくても大丈夫です)して、以下のコマンドを実行する

    npm install -g yarn
    

    starting-tauri_2021-09-14-00-38-43

  2. 以下のコマンド実行でYarnのバージョンが表示されれば、インストール完了

    yarn -v
    

    starting-tauri_2021-09-14-00-41-09

Rustのインストール

  1. Rustの公式サイトにて「RUSTUP-INIT.EXE(64-BIT)をダウンロードする」をクリック
    starting-tauri_2021-09-14-00-49-23

  2. ダウンロードしたインストーラを起動

  3. コマンドプロンプトが開く。「Proceed with installation」がデフォルトとなっているが、特に問題はないので、そのままEnterキーを押下する
    starting-tauri_2021-09-14-00-52-45

  4. 自動でインストールが始まる。終わったら、Enterキーを押下する
    starting-tauri_2021-09-14-00-56-14

  5. PowerShellまたはコマンドプロンプトで以下のコマンドを実行し、バージョンが表示されれば、インストール完了

    rustup show
    

    starting-tauri_2021-09-14-01-03-15

WebView2のインストール

  1. Microsoftのダウンロードページにて、「Evergreen Bootstrapper」の「Download」をクリック
    starting-tauri_2021-09-14-01-10-37

  2. 「Accept and Download」をクリック
    starting-tauri_2021-09-14-01-11-59

  3. ダウンロードしたインストーラを起動

  4. ウィンドウが開き、自動でインストールが始まる

  5. インストールが終わったら、自動でウィンドウが閉じる

  6. Windowsキー + 「r」キーを押下して、以下のファイル名を入力し、「OK」をクリックする

    appwiz.cpl
    

    starting-tauri_2021-09-14-01-17-20

  7. プログラムと機能ウィンドウにて、「Microsoft Edge WebView2 Runtime」が表示されていれば、インストール完了
    starting-tauri_2021-09-14-01-19-16


以上で、Tauriを使い始められる環境が整いました!
次からは、(VSCodeの設定を挟んで)どんなフロントエンドフレームワークが使えるか見ていきます!
(近日投稿予定・・・)

Discussion

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