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
410
Webフロントエンド入門
8/22 Zli × サイバーエージェント 合同LT
uzimaru0000
August 22, 2020
Tweet
Share
More Decks by uzimaru0000
See All by uzimaru0000
OGPを使いたい
uzimaru0000
0
150
git入門
uzimaru0000
1
290
WebフロントエンジニアはOSの夢を見る
uzimaru0000
0
340
BrainFuckをつくった
uzimaru0000
0
360
Elmで作るCLI
uzimaru0000
0
120
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
160
Compression Vue App
uzimaru0000
0
110
好きなライブラリ_OSS
uzimaru0000
0
200
Other Decks in Programming
See All in Programming
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4.1k
Site Reliability Engineering for GMO
pyama86
8
1k
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
SIMD Parallel Programming with the Vector API
josepaumard
0
180
PHPはいつから死んでいるかの調査
chiroruxx
1
400
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.1k
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
2
800
Rethinking UI building strategies @ SFI 2024
letelete
0
270
2 週間で Twitter Bot を作ってみた
contour_gara
0
540
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Code Review Best Practice
trishagee
55
15k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
A Tale of Four Properties
chriscoyier
151
22k
Design by the Numbers
sachag
274
18k
A Philosophy of Restraint
colly
197
16k
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から入ってみても良さそう
ありがとうございました!