📄
Swiftで始めるWebAssembly
※この記事は Life is Tech!School秋葉原校のメンバー・メンターが執筆するakihabara-school Advent Calendar 2024 22日目の記事になります。
はじめまして！私はLife is Tech!Schoolの秋葉原校でiPhoneコースのメンターをしている、ショーン🐑といいます！
本記事では、SwiftWasmを用いたカウントアプリを作成しWasmを体感していきます！
今回作成したもの
WebAssemblyって何？
WebAssembly(Wasm)はsafari,chrome等のブラウザで、ネイティブに近いパフォーマンスで動作する、バイナリー形式の低レベルなアセンブリー風言語。
つまりWebブラウザ上でJavaScript以外のプログラム言語をネイティブの速度で実行できると言うこと!
Wasmの使用例
- Photoshop on the Web
- eBay
- Figma
- Google Earth
代表的なバイナリー生成法
- C/C++: Emscripten
- Rust: wasm-pack
- Go: TinyGo
今回はSwiftを使ってWebAssemblyを始めてみましょう！
使うもの
【入門】カウントアプリを作ってみる
1. 開発フォルダーを作成:
mkdir CountApp && cd CountApp
2. Swiftのプロジェクトを作成:
swift package init --type executable
3. VSCodeで開く:
code .
問題なければ以下の構成になっているとおもいます。
.
├── Package.swift
└── Sources
└── main.swift
4. SPMを編集:
Package.swiftを以下のようにします。
import PackageDescription
let package = Package(
name: "CountApp",
dependencies: [
.package(url: "https://github.com/swiftwasm/carton", from: "1.1.3"),
.package(url: "https://github.com/swiftwasm/JavaScriptKit", from: "0.22.2"),
],
targets: [
.executableTarget(
name: "CountApp",
dependencies: [
.product(name: "JavaScriptKit", package: "JavaScriptKit"),
]
),
]
)
5. 一度コンパイルしてみる:
swift run carton dev
初回は結構待ちます🥲
しばらくするとWebブラウザが自動で立ち上がります。
検証ツールのコンソールから
Hello, world!と出力されていたら成功です！
試しにprintを変えてみる
main.swiftのpirntを変えてWasmを体感してみましょう!
print("Life is Tech!")
すると
上手くいきました🥳
6.JavaScriptKitを使ってDom操作
SwiftでのWasmに慣れてきたところで早速カウントアプリを作ってみましょう！
main.swiftを編集して、まずは必要な要素を配置していきます。
import JavaScriptKit
let document = JSObject.global.document
var button = document.createElement("button")
var counter = document.createElement("div")
button.innerText = "カウントアップ"
counter.innerText = "カウント: 0"
document.body.appendChild(counter)
document.body.appendChild(button)
次にボタンを押した時にカウントされていく関数を作っていきましょう!
var count = 0
button.onclick = .function { _ in
count += 1
counter.innerText = "カウント: \(count)".jsValue()
return .undefined
}
完成🎉
Swiftでカウントアプリを作る事ができました!
全体のコード
import JavaScriptKit
let document = JSObject.global.document
var button = document.createElement("button")
var counter = document.createElement("div")
button.innerText = "カウントアップ"
counter.innerText = "カウント: 0"
var count = 0
button.onclick = .function { _ in
count += 1
counter.innerText = "カウント: \(count)".jsValue()
return .undefined
}
document.body.appendChild(counter)
document.body.appendChild(button)
最後に
今回はSwiftでWebAssemblyを使いました。
実は紹介したcarton以外にも
- SwiftUIライクにWebが書ける: Tokamak
- Apple公式GitHubのWasmExample: swift-for-wasm-examples
などもあります。
最後までお読みいただきありがとうございました！
Discussion