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
140
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
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
220
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
410
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
はじめてのMaterial3 Expressive
ym223
2
890
Swift Updates - Learn Languages 2025
koher
2
510
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A Tale of Four Properties
chriscoyier
160
23k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Statistics for Hackers
jakevdp
799
220k
RailsConf 2023
tenderlove
30
1.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Navigating Team Friction
lara
189
15k
Unsuck your backbone
ammeep
671
58k
The Cult of Friendly URLs
andyhume
79
6.6k
We Have a Design System, Now What?
morganepeng
53
7.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
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から入ってみても良さそう
ありがとうございました!