Tauri + Rust + Svelte 環境構築（WSL / Ubuntu）
お仕事で Tauri + Rust + Svelte という構成でWEBアプリを作るかもしれないので、開発環境を構築する手順をまとめてみた。
ここでは「とりあえずアプリが起動する」をゴールとする。
🎯 ゴール
npm run tauri dev
このコマンドでウィンドウが立ち上がる状態がゴールや
📚 目次
- 前提条件
- Node.js インストール
- Rust インストール
- Tauri用のLinux依存ライブラリ
- プロジェクト作成
- 依存関係インストール
- アプリ起動
【参考１】フォルダ構成
【参考２】 クリーンアップ（必要になったら）
1. 前提条件
- WSL上のUbuntuで実施する
- WSLgが必要（GUI表示に必要）
- 空き容量は10GBくらいほしい
2. Node.js インストール
nvmを使ってインストール（推奨）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash source ~/.bashrc
Node（LTS）をインストール
※ LTS = 長期サポート版（安定していて実務でよく使われる）
nvm install --lts nvm use --lts
インストール確認
node -v npm -v
⇒バージョンが表示されたらOK
💡 メモ
- aptで入れるとバージョンが古い場合がある
- nvmを使うことで複数バージョンの切り替えが可能
- TauriはNodeに依存するため、ここで失敗すると後続も動作しない
3. Rust インストール
curl https://sh.rustup.rs -sSf | sh
環境反映
source $HOME/.cargo/env
インストール確認
rustc --version cargo --version
バージョンが表示されたらOK
Rustの動作確認
cargo new hello_rust cd hello_rust cargo run
Hello, world! が表示されればOK
4. Tauri用のLinux依存ライブラリ
🔧 インストール
sudo apt update sudo apt install -y \ libwebkit2gtk-4.1-dev \ build-essential \ curl \ wget \ file \ libxdo-dev \ libssl-dev \ libayatana-appindicator3-dev \ librsvg2-dev
❓ なぜインストールが必要か
Tauriは以下の構成で動作する。
- フロント：Svelte（HTML / CSS / JS）
- バックエンド：Rust
- 表示：OSのWebView
つまり、OSにインストールされているブラウザ機能（WebView）を利用して画面を描画するので、これができるようにするために色々と部品が必要ということ。
🔍 具体的に
■ libwebkit2gtk
画面表示に必要（最重要）
- Linux版WebView
- これがないと画面が表示されない
■ build-essential
Rustビルドに必要
- gcc などを含む
- Rustのコンパイル時に使用
■ libxdo-dev
ウィンドウ操作に関係
- ウィンドウ制御
- 入力操作
■ libssl-dev
セキュリティ通信
- HTTPS通信で使用
■ libayatana-appindicator3-dev
トレイアイコン表示
- タスクバーアイコンに使用
■ librsvg2-dev
SVG画像対応
- アイコン表示などで使用
⚠ よくあるエラー
未インストールの場合、以下のエラーが発生することがある。
failed to run custom build commandwebkit2gtk not foundpkg-config error
多くの場合、ライブラリ不足が原因
5. プロジェクト作成
mkdir -p ~/workspace cd ~/workspace npm create tauri-app@latest
❓ 何が起きるか
コマンドを実行すると、対話形式（質問に答えていく形式） が始まる
✔ Project name · tauri-svelte-practice ✔ Identifier · com.tauri.dev ✔ Choose a frontend framework · Svelte ✔ Choose a language · TypeScript ✔ Choose a package manager · npm
基本はこう選べばOK
- Project name → 好きな名前
- Identifier → そのままでOK（あとから変更可能）
- Frontend → Svelte
- Language → TypeScript
- Package manager → npm
💡 メモ
- 矢印キーで選択、Enterで決定
- 間違えてもやり直せるので気楽に進めてOK
- この時点で Svelte + Tauri + Rust のひな形が自動生成される
🎯 結果
選択が終わると以下のようなプロジェクトが作成される
~/workspace/<プロジェクト名>
6. 依存関係インストール
cd ~/workspace/<プロジェクト名> npm install
❓ 何が起きるか
プロジェクトに必要なライブラリをすべてダウンロードする
🔍 もう少し具体的に
このプロジェクトにはpackage.jsonというファイルがあって
この中に
"dependencies": { ... } "devDependencies": { ... }
のような情報が書かれており
これをもとに npm が必要なパッケージを取得してくれる
📦 インストールされるもの
- Svelte関連
- TypeScript関連
- Tauri CLI関連
- Vite（開発サーバ）
- その他内部ライブラリ
🔗 依存関係の解決
npmは単にダウンロードするだけではなく、以下も実施してくれる
- バージョンの整合性チェック
- 依存の依存（ネスト）も解決
- lockファイルの生成
📄 package-lock.json
package-lock.json
これは「完全な依存関係のスナップショット」
- 同じ環境を再現するためのファイル
- チーム開発では重要
⚠ 注意
時間がかかる（数十秒〜数分）けど お使いのPCは正常です
初回は数百パッケージがインストールされるため仕方ない
🎯 まとめ
npm install = 「このプロジェクトを動かすための準備をすべて実行するコマンド」
7. アプリ起動
npm run tauri dev
これで画面が表示されたら成功
【参考１】フォルダ構成（SvelteKit）
project/ ├─ src/ ← フロント（SvelteKit） │ ├─ routes/ ← ページ（URLに対応する） │ │ ├─ +layout.ts ← 全体の設定・共通処理 │ │ └─ +page.svelte ← トップページ（/） │ │ │ ├─ lib/ ← コンポーネント・共通処理（自分で作る） │ └─ app.html ← HTMLテンプレート │ ├─ static/ ← 静的ファイル（画像・faviconなど） │ ├─ src-tauri/ ← バックエンド（Rust） │ ├─ src/ │ │ └─ main.rs ← Rustのメイン処理 │ │ │ ├─ icons/ ← アプリアイコン │ ├─ target/ ← ビルド成果物（自動生成） │ ├─ Cargo.toml ← Rustの依存管理 │ └─ tauri.conf.json ← Tauri設定 │ ├─ .svelte-kit/ ← SvelteKitのビルド用キャッシュ（自動生成） │ ├─ node_modules/ ← npmが管理（触らない） ├─ package.json ← Nodeの中心設定 ├─ package-lock.json ← 依存関係の固定 ├─ tsconfig.json ← TypeScript設定 ├─ vite.config.ts ← Vite設定 ├─ svelte.config.js ← SvelteKit設定 └─ README.md
📂 フロント側（SvelteKit）
routes
ファイル構造 = URLになる
+page.svelte→ ページ本体+layout.ts→ 共通設定
+page.svelte
ここに画面を書く
+layout.ts
全ページ共通の処理を書く
lib
コンポーネントや関数をまとめる場所 （最初はなくてもOK。必要になったら作る）
static
画像やfaviconを置く場所
📂 バックエンド（Rust）
src-tauri/
TauriのRust側
main.rs
Rustのエントリポイント フロントから呼ばれる処理を書く
📂 設定ファイル
package.json→ npmの設定Cargo.toml→ Rustの設定tauri.conf.json→ アプリの設定
📂 自動生成フォルダ
.svelte-kit/node_modules/target/
消しても再生成される（基本触らない）
🎯 これだけ
- src/routes/+page.svelte ← 画面
- src-tauri/src/main.rs ← Rust処理
- package.json ← Node設定
【参考２】クリーンアップ
不要ファイルを削除して環境を軽くする。
🔧 Rust側
cargo clean
target/フォルダ（ビルド成果物）を削除
🔧 Node側
rm -rf node_modules
- ライブラリを削除
npm installで再構築可能
💡 メモ
- 容量削減時に使用
- エラー解消の手段としても有効
- 削除しても再生成できるため安全
markdownについて
何か技術っぽい記事を書くときに便利なmarkdownを習得したいので、自分で利用しがてらまとめてみることにする。
見出し
ポイント
- 見出しの文字の前に#(シャープ) を付与する
- #の後には半角スペースを入れる
- #の数が少ないほど大きい見出しになる
- #は最大で６つまで
コード
# 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 ####### 見出し7
プレビュー
※実際に書くと目次がバグるので画像を貼っています
太字
ポイント
- ** または __で文字を挟む
コード
アスタリスクふたつで挟むと**太字**になるよ アンダースコアふたつでも__同じ__だよ
プレビュー
アスタリスクふたつで挟んだものが太字になるよ
アンダースコアふたつでも同じだよ
斜字
ポイント
- * または _ で文字を挟む
- 日本語は斜字にならない？
コード
abcdefg *abcdefg* _abcdefg_ 1234567 *1234567* _1234567_ 愛うえお *愛うえお* _愛うえお_
プレビュー
abcdefg abcdefg abcdefg
1234567 1234567 1234567
愛うえお 愛うえお 愛うえお
取り消し線
ポイント
- ~~で文字を挟む
コード
チルダふたつで挟むと~~取り消し線~~が入ります
プレビュー
チルダふたつで挟むと取り消し線が入ります
改行
ポイント
- <br>で改行できる
- 半角スペースの2連続でも改行できる（※行末のみ有効）
コード
1行目<br>あああ<br> 2行目(コード上は改行してるけど実際は改行されない) 3行目 4行目(この後ろに半角スペースx2あり) 5行目
プレビュー
1行目
あああ
2行目(コード上では改行してるけど実際は改行されない)
3行目
4行目(この後ろに半角スペースx2あり)
5行目
リスト（箇条書き）
ポイント
- 先頭に「-」「*」「+」のいずれかを付与するとリストになる
- 後ろに半角スペースを入れる必要あり
- 先頭に半角スペースを付与することでインデントを増やせる
コード
- 箇条書き１
- 箇条書き２
- 先頭に半角スペースをふたつ入れると深くなる
- さらにふたつ入れるとさらに深くなる
プレビュー
- 箇条書き１
- 箇条書き２
- 先頭に半角スペースをふたつ入れると深くなる
- さらにふたつ入れるとさらに深くなる
- 先頭に半角スペースをふたつ入れると深くなる
数字付きリスト
ポイント
- 先頭に数字＋ピリオドを付与することで数字付きリストになる
- ピリオドの後には半角スペースが必要
- 数字を付けるのは最初だけでもOK
コード
1. ひとつめ - ふたつめ 1. ふたつめの一つ目 - ふたつめの二つ目 - みっつめ - よっつめ
プレビュー
- ひとつめ
- ふたつめ
- ふたつめの一つ目
- ふたつめの二つ目
- みっつめ
- よっつめ
チェックボックス
※はてなでは表示できないようです
ポイント
- リストの後ろに
[ ]を付与すると未チェックのボックスになる [x]を付与するとチェック済のボックスになる- 前後に半角スペースが必要
コード
- [x] タスク１ - [ ] タスク２
プレビュー
- [x] タスク１
- [ ] タスク２
コードブロック
ポイント
- バッククォート（ [Shift]+[＠のキー] で入力できる記号）で囲む
- コードブロック内でバッククォートをしたいときは、囲んでるバッククォートの数を増やす
- バッククォート３連で行を挟むことで、複数行に渡ってブロック化できる
- プログラミング言語を記載するとシンタックスハイライトさせることも可能
コード
`hello world`ってなに。`` `Hi` world``ではあかんの。
``` python
def hi_world():
print("Hi world")
```
プレビュー
hello worldってなに。`Hi` worldではあかんの。
def hi_world(): print("Hi world")
文書を書くときに意識すること
私の今までの経験から得られたものをまとめておきたかったので書きます。
システムエンジニア目線の内容ですが、一般的にも通用する部分もあるかもです。
また、ここでの「文書」ってのは「正式な書類に記載する文書」を指しているつもりです。（設計書とか、、ね）
なにが言いたいかっていうと、話し言葉とか、ビジネスチャットとかメールとかはこんなこと意識しなくてもいいよねってことですわ。
それでは本題へ、、、
■だれが読む文書か？を把握して言葉を選ぶ
だれにとっても読みやすい文書であればそれに越したことはないが、一番重要なのは、その文書のターゲットにとって理解し易い文書であること。
読み手が理解しやすい単語を選ぶようにすると良い。（というか選ばないといけない）
■句点の入れどころを意識しよう
（執筆中）
■一つの文はできるだけ短く
句点(。)にたどり着くまでの読点(、)の数は３個くらいを上限にしてみたら良い。（あくまでも目安）
一つの単語が長くて文書が長くなることは問題ない。
■その修飾語ってほんとに必要？
副詞とか形容詞は無しでも問題ないことが多い気がする。
どうしても修飾する必要がある場合を除いて基本は省いてもよいかもね。
■主語は省略しても大丈夫か？
日本語の文では主語がないことが多い。
執筆側からしたら省略しても問題ない主語でも、読み手が「この文書よく理解できない」ってなることもあるので、「主語を省略しても読み手が理解できるか？」をセルフチェックしてみるといいですねえ。
■箇条書きは積極的に
たとえば、設計書を書くとき、特定の処理を実行するときの条件を記載することはよくあります。
そんなときに「AとBとCを満たす場合・・・」と書くよりも、「以下の３つをすべて満たすとき・・・」と書いて箇条書きを活用するほうが読みやすい。（A,B,C のそれぞれが長めの文章で表現されるものであれば、その効果は絶大）
■接続詞は正しく使われているか
間違った接続詞は文書を読み難くする要因になります。
よくあるのは、「～だが」「～ですが」という接続詞について、本来は逆説で使用する接続詞ですが順接で使用されることが多いですね。
後でなにか思い出したら追記していこうとおもいます！
あとは参考になった記事をご紹介しまっす
【未来の私へ】SEとして生きる上で意識してほしいこと
■知ったかぶりはしない
わからないことは理解していないこと伝えて、理解する必要があるなら全力で理解しようとしましょう！
■恥ずかしいとか思わない
自分がその発言をすることによって自分が周りからどう思われるか、を気にしないで動いてくれ。
仕事ができないやつに見られたくないプライドが働きがちで、思ったことを言わないとか聞きたいことを聞かない状況に陥っています。
発言にはある程度は気にするべきだが（例えば、人を傷付ける発言は避けるとか）、考えすぎて発言を避けるのはやめよう。
■あまり真面目になりすぎない
責任を感じ過ぎて気を病むことがあります。
気を病むとパフォーマンスが悪くなるので、責任を感じすぎないようにしましょう。
言ってしまえば、ほとんどの仕事はチームでやっているので個人ではなくチームの責任です。
そのため、個人が責任を感じ過ぎる必要はありません。（これは責任放棄ではなく正論）
もちろん、ミスに対して反省はしましょう。
強いメンタルを持つというよりは、少しは「たかが仕事やし、どうでもいいか」という気持ちを持って仕事と向き合いましょう。
また、責任を背負う必要がないような立ち回りも意識しましょう。（自分で0から100までやるではなく、周りを巻き込むとか）
■謙虚で毅然とした人であれ
人を下にみて接し方を変えたりしないこと。
また、偉い人に対しても堂々としていること。
それでいて謙虚な気持ちは忘れないこと。
■アウトプットは早くしましょう
成果物の作成の目標としては、納期の50％の期間で80％の進捗の状態を目指しましょう。
初めての分野で質の高い成果物が作れる自信がないなら、スピードだけは最速を目指しましょう。
また、自分ボールのタスクはできるだけ早くに手放すことを意識しましょう。
