Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話

Vue Fes Japan 2023 LT登壇資料です
https://vuefes.jp/2023/sessions/yud0uhu

Transcript

1. 1 Vue3/Electronで自作したマーク ダウンエディタをVue3/Tauriに リプレイスした話 Vue Fes Japan 2023
2. 自己紹介 • 名前：0yu（おゆ） • 所属：合同会社DMM.com動画配信開発部 23新卒 • 出身：北海道 2 っっっz yud0uhu
3. 3 作ったもの
5. サポートする機能 • .txt .md形式での保存 • リアルタイムプレビュー • コードハイライト 5
6. 6 作ったもの
8. 追加で実装した機能 • 絵文字、マークダウンサジェスト • Mermaid.js記法の対応 8
9. 概説 Electron 9
11. 概説：Electron • Webフロントエンドの技術でデスクトップアプリが作れるGUIフ レームワーク • ChromiumとNode.jsがバイナリに組み込まれている ◦ 単一のJavaScriptコードベースを維持しつつ、クロスプラッ トフォームアプリが開発可能 • 開発元はGitHub社 ◦ VSCodeやSlackはElectronで作られている 11
12. 12 概説 Tauri
13. 概説：Tauri 13
14. 概説：Tauri • RustとWebフロントエンドの技術でデスクトップアプリが作れる GUIフレームワーク • 一言で言うと「小さいElectron」 • Chromiumなどのブラウザを組み込んでおらず、OSのWebView機 能を呼び出すラッパー(WRY)を用いている ◦ 軽量・高速に動いてくれることが特徴 ◦ ブラウザの脆弱性に関する対策を行う必要がない 14
15. 15 WRY is 何？
16. WRY(Webview Rendering librarY) • 「OSに備わっているWebViewを使ってレンダリングする」機能 をラップしたクレート ◦ Windows 👉 WebView2 ◦ Linux 👉 WebKitGTK ◦ macOS 👉 WKWebView 16
17. 17 Core Ecosystem
18. Core Ecosystem 18
19. 19 • tauri-build 👉実行可能なインストーラとバイナリを生成する • tauri-codegen 👉アイコンやシステムトレイなどのアセットを埋め込み、ハッ シュ化・圧縮する 👉コンパイル時にtauri.conf.jsonを解析し、Config構造体を生成 する Core Ecosystem(1/3)
20. 20 • tauri-macros 👉tauri-codegenクレートを用いて、コンテキスト、ハンド ラー、コマンドのマクロを作成する • tauri-runtime 👉TauriとWebViewライブラリ(WRY,TAO)の連携を行う層 • tauri-utils 👉tauri-codegenクレートを用いて、コンテキスト、ハンド ラー、コマンドのマクロを作成する Core Ecosystem(2/3)
21. 21 TauriのWebView部分を支える外部モジュール • WRY 👉WebViewを扱うためのクレート • TAO 👉Windowを操作するためのクレート Core Ecosystem(3/3)
22. 22 Tauriのプロセスモデル
23. 23 Tauriのプロセスモデル
24. 24 Tauriの プロセス間通信の仕組 み
25. 25 プロセス間通信：具体例
26. プロセス間通信：具体例 26 // … #[tauri::command] fn generate_mermaid_img(code: String) -> String { let encoded_code = encode_to_base64(&code); let response = ApiResponse { img: format!("https://mermaid.ink/img/{}", encoded_code), }; format!("{}", response.img) }
27. プロセス間通信：具体例 27 // … fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![generate_mermaid_img]) .run(tauri::generate_context!()) .expect("error while running tauri application"); }
28. 28 プロセス間通信：具体例
29. プロセス間通信：具体例 29 import { invoke } from "@tauri-apps/api"; // … const generateMermaidImg = async (code: string) => { try { const response = await invoke("generate_mermaid_img", { code: code }); return response; } catch (error) { // …
30. 30 Tauriの セキュリティ
31. 31 Tauriのセキュリティ • tauri/allowlist 👉アプリケーション内でのJSの実行・API呼び出しを制御するた めの機構 👉使用する機能を個別に有効化、無効化できる
32. tauri/allowlist:具体例 "tauri": { "allowlist": { "all": false, ... "dialog": { "open": true, "save": true }, "fs": { "all": true, "writeFile": true }, ... }, 32
33. tauri/allowlist:具体例 <script setup lang="ts"> import Header from "./components/Header.vue"; import MarkdownEditor from "./components/MarkdownEditor.vue"; import { ref } from "vue"; import { open, save } from "@tauri-apps/api/dialog"; import { readTextFile, writeFile } from "@tauri-apps/api/fs"; import { appDir } from "@tauri-apps/api/path"; 33
34. tauri/allowlist:具体例 const openFile = async () => { try { const selected = await open({ directory: false, multiple: false, defaultPath: await appDir(), filters: [{ name: "Markdown and Text Files", extensions: ["md", "txt"] }], }); 34
35. tauri/allowlist:具体例 if (selected !== null) { if (!Array.isArray(selected)) { const filePath = selected; const contents = await readTextFile(filePath); onMarkdownUpdate(contents); } } } catch (error) { // … 35
36. tauri/allowlist:具体例 const saveFile = async () => { try { const result = await save({ defaultPath: "untitled.txt", filters: [{ name: "Markdown and Text Files", extensions: ["md", "txt"] }], }); if (result) { const fileContents = markdownText.value; await writeFile({ path: result, contents: fileContents ? fileContents : "", }); 36
37. 37 パフォーマンスを計測 してみる
38. 38 パフォーマンスを計測してみる 比較 Tauri Electron インストーラサイズ 3.1MB 52.1MB メモリ利用量 180MB 462MB 起動速度 0.39秒 0.8秒 レンダリング WRY Chromium
39. 39 実際のアプリケーションサイズ・実行時間の比較 パフォーマンスを計測してみる 比較 Tauri Electron 起動速度 0.49秒 0.58秒 アプリケーションサ イズ 31.1MB 588MB
40. 最終的な実装 40 https://github.com/yud0uhu/markdown-editor-tauri-web
41. 41 ご静聴ありがとうござ いました ！