【サボる技術】epicenterで学ぶSvelte, Tauri, Tailwind
さて、今日の議題は「どうやってサボって、かつデキるエンジニアに見られるか」です。epicenterは、そのための秘密兵器になりえます。
もし僕が「この機能、明日までに作っといて」って言われたら、普通なら「無理だよ！」って叫びますよね。でも、もし音声入力でサッとコードコメントを書きたいとか、議事録を素早くまとめたいって場面に出くわしたら、epicenterのようなツールは最強の味方になります。手でタイピングするより、喋る方が圧倒的に速いんです。このプロジェクトを参考にすれば、Svelte、Tauri、Tailwind CSSというモダンな技術スタックを組み合わせて、いかに速くUI/UXに優れたデスクトップアプリを作れるかがわかります。
「会社の機密情報、外部のAPIに送るのやだなー」って時、ありますよね？でも epiceneter はローカルで完結するから、そんな心配は無用です。音声認識処理も自分のPC内で行うので、セキュリティ上のリスクを減らせます。これは、僕たちが「プライバシーを尊重し、安全に使えるアプリ」を作る際に非常に重要な設計思想です。この思想を理解すれば、面倒なセキュリティレビューも「はい、ローカル完結なので大丈夫です」の一言で乗り切れます。
一番の楽ポイントはここです。このプロジェクトはオープンソースなので、全部見放題なんです！「え？この機能どうやって作ったんだろう？」って悩んだら、ソースコードを見れば答えが書いてあります。先輩に聞かなくても、Google先生に頼らなくても、楽して学べます。特に、TauriでNode.jsとRustを連携させてデスクトップアプリを作る方法や、SvelteでUIコンポーネントを効率的に作る方法など、実践的なノウハウが詰まっています。
「難しそう…」って思ったあなた、大丈夫です。コピペで終わらせましょう。
まずは、以下のものをインストールしておきましょう。これがないと始まりません。
Node.js
最新版を入れときましょう。
Rust
これもインストールが必要です。Tauriを使うために必須です。
GitHubからプロジェクトのソースコードをコピペ…ではなく、git cloneで持ってきます。
git clone https://github.com/epicenter-so/epicenter.git
cd epicenter
次に、必要なパッケージを一括でインストールします。これもコピペでOK。
npm install
あとはコマンドを打つだけです。
npm run tauri dev
これで、あなたのPCでアプリケーションが立ち上がるはずです。簡単でしょう？
「もっと楽したい！」という欲張りなあなたのために、少しだけソースコードを見てみましょう。
epicenterでは、UI部分をSvelteで書いています。Svelteは、余計なコードが少なくて済むので、とにかく楽に書けます。 例えば、ボタンを押したら何か処理をするコンポーネントは、こんなにシンプルです。
<script>
// Tauriのコマンドをインポート
import { invoke } from "@tauri-apps/api/tauri";
// ボタンがクリックされたときの処理
async function handleClick() {
// Rust側で定義したコマンドを呼び出す
const result = await invoke("some_command");
console.log(result);
}
</script>
<button on:click={handleClick}>
クリックして楽をする
</button>
Tauriでは、UIから呼び出せる機能をRustで書きます。これにより、高速な処理やローカルリソースへのアクセスが可能になります。
src-tauri/src/main.rsのようなファイルに、こんな感じで書かれています。
// コマンドを定義するマクロ
#[tauri::command]
fn some_command() -> String {
"楽ができたぞ！".into()
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![some_command])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
このコードをちょっといじれば、あなただけのオリジナルな「サボりツール」も作れちゃいます。
