Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webフロントエンド入門
Search
uzimaru0000
August 22, 2020
Programming
1
450
Webフロントエンド入門
8/22 Zli × サイバーエージェント 合同LT
uzimaru0000
August 22, 2020
Tweet
Share
More Decks by uzimaru0000
See All by uzimaru0000
OGPを使いたい
uzimaru0000
0
170
git入門
uzimaru0000
1
340
WebフロントエンジニアはOSの夢を見る
uzimaru0000
0
360
BrainFuckをつくった
uzimaru0000
0
520
Elmで作るCLI
uzimaru0000
0
130
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
190
Compression Vue App
uzimaru0000
0
130
好きなライブラリ_OSS
uzimaru0000
0
230
Other Decks in Programming
See All in Programming
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
個人軟體時代
ethanhuang13
0
300
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
410
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
110
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
450
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
🔨 小さなビルドシステムを作る
momeemt
3
650
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
270
複雑なドメインに挑む.pdf
yukisakai1225
5
960
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
810
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
For a Future-Friendly Web
brad_frost
179
9.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Side Projects
sachag
455
43k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Fireside Chat
paigeccino
39
3.6k
Scaling GitHub
holman
463
140k
Transcript
Webフロントエンド入門 8/22 Zli × サイバーエージェント 合同LT
自己紹介 - 会津大学25期 - s1250087 - うじまる - Webフロントエンド -
TypeScript - Elm - 最近VTuberにはまってます - Twitter - @uzimaru0000 - GitHub - @uzimaru0000
今回話すこと
Webフロントエンド
普通のWebフロントエンド?
いいえ
RustでWebフロントエンド をやってみた話
Rustとは? Rust言語は速度、並行性、安全性を言語仕様として保証するC言語、C++に代わるシス テムプログラミングに適したプログラミング言語を目指している。 ── wikipediaより - 速度:GCやランタイムが無いため高速 - 安全性:型システムと所有権モデルによるメモリ安全性とスレッド安全性
どうやってやるの?
WebAssembly
WebAssemblyとは? WebAssemblyは、ウェブブラウザのクライアントサイドスクリプトとして動作するプログラミ ング言語(低水準言語)である。 ── wikipediaより JSよりも構文解析と実行速度が高速!
全部自分でやると大変なので・・・
フレームワークをつかう
Yew
Yewとは? Yew は WebAssembly によってマルチスレッドなWebアプリのフロントエンドを作ることが できる、モダンな Rust のフレームワークです。 ── 公式Docより
- コンポーネントベースのフレームワーク - ReactとElmから影響を受けている
Yewのコード カウンターアプリ のコード
Yewのコード - Model - アプリケーションの状態 - Msg - アプリケーションの状態を更新するた めのMsg
Yewのコード - `impl Component for Model` - ModelにComponent Traitを実装 -
type Message - MessageにさっきのMsgを設定 - type Properties - 今回はUnit Type
Yewのコード - createメソッド - 状態の初期化 - linkはRuntimeにmsgを送るためのもの
Yewのコード - changeメソッド - propsの変更があったかを返すメソッド - 今回はpropsが無いので常にfalse
Yewのコード - updateメソッド - msgの内容に応じて状態を変更 - 返り値はUIを更新するかどうか
Yewのコード - viewメソッド - macroを利用してviewを構築する - ほぼHTML
ここでElmのコード
None
実質Elm!!
実際にアプリを作ってみる
作ったもの uzimaru0000/github_repo_list - 任意のユーザーのGitHub上のリポジトリを取得出来る 余談 CSS頑張ったらRustより多くなってしまった
Elmとの違い 副作用の扱い方 - ElmはCmd / Subを利用する - Yewは →
DEMO https://uzimaru.dev/github_repo_list
まとめ - ビルド周りで詰むかなって思ったけどそんなことなかった - Parcelでbuild出来るのでWebフロントエンジニアにも優しい - 実質Elmだった - Docが日本語訳されていてよかった -
wasmをやりたい人はYewから入ってみても良さそう
ありがとうございました!