Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Stencil JSについて
scrpgil
April 07, 2021
Programming
0
110
Stencil JSについて
Ionic Meetup #16 [Web技術でモバイルアプリをつくる]用の資料です。
https://ionic-jp.connpass.com/event/208425/
scrpgil
April 07, 2021
Tweet
Share
More Decks by scrpgil
See All by scrpgil
scrpgil
0
1k
scrpgil
0
420
scrpgil
0
58
scrpgil
2
840
scrpgil
0
87
Other Decks in Programming
See All in Programming
samjulien
0
460
manfredsteyer
PRO
0
100
fancyweb
1
100
y__mattu
0
230
kodetr
0
160
tkmnzm
1
250
rukiadia
3
960
bamboooo
1
130
ryosogawa
0
110
dhmegane
0
270
mrtc0
1
240
d_endo
1
530
Featured
See All Featured
brad_frost
157
6.5k
jensimmons
208
10k
lauravandoore
440
29k
tanoku
86
8.6k
scottboms
252
11k
chriscoyier
146
20k
hatefulcrawdad
257
17k
jeffersonlam
330
15k
brettharned
93
3.1k
roundedbygravity
84
7.9k
ddemaree
273
31k
danielanewman
202
20k
Transcript
Stencil JSについて Ionic Meetup #16 in Online
自己紹介 • 榊原宏祐 • scrpgil • 株式会社キネカ所属 • Ionicヘビーユーザー(仕事 &
趣味) • エンタメマッチングアプリ作成 • ASCII artが趣味(Webアプリ公開) • 最近、ascii.artドメイン取得
Ionic本書きました 「Ionicで始めるWebサービス開発」 • Webサービス(質問箱風)を開発しながら、 IonicとFirebaseについて学ぶ本 • 特定フレームワークを使わず、Ionic/core を使用 • ionic/core
= stencil.jsを利用しています
アジェンダ • Webコンポーネントについて • Stencilについて • Stencil APIについて • もっとStencilを知りたい場合
Webコンポーネントについて • JavaScript標準のコンポーネント機能。 • 特定フレームワークに依存せず、コンポーネントの仕組みを実現できる
コード例
果たしてWebコンポーネントの作成は簡単か? • 変更検知とか使いたい • TypeScript使いたい
Stencilについて • Webコンポーネントを作成するためのコンパイラ • フレームワークを利用せずにWebコンポーネントを作成する • 主要なフレームワークについてる機能(変更検知とか)はだいたい持っている • Ionicで利用しているし、Ionic Teamが開発している
なぜStencilか? • パフォーマンス:従来のフレームワークは、要求の厳しいモバイルプログレッシブ Webアプリケーションには重すぎる • 安定性:フレームワークの絶え間ない変更を回避したい • 相互運用性:主要なフレームワーク(Angular、Vue)で動作する
Stencilのコード例
Stencilが持っている機能 • VirtualDOM • TypeScript • JSX • データバインディング •
LazyLoading
StencilのAPI • @Component(): タグ名に関連するスタイルシートを設定 • @Prop():コンポーネントにプロパティを作成 • @State():変更検出中に監視する必要があるローカル状態 • @Event():コンポーネントでイベントをトリガー
• @Listen():各DOMから発生したイベントをリッスン • @Element():このコンポーネントのDOM要素を取得
事例 • ionic/core:https://github.com/ionic-team/ionic-framework/tree/master/core • Who use Ionic:https://ionicframework.jp/case/ • AA fontbook:https://fonts.aahub.org
• AAUI:https://codepen.io/scrpgil/pen/BOVBae • apple tv(beta):https://twitter.com/stenciljs/status/1190253680085360640
StencilJSをもっと知りたい場合 日本語doc: https://stenciljs.jp
ご視聴ありがとうございました ・StencilJSはWebコンポーネント作成コンパイラ ・Webコンポーネントを使えばFWに頼らずコンポーネント志向の開発が可能 ・IonicはStencilJSを使ってコンポーネント作ってる ・StencilJSの日本語ドキュメント:https://stenciljs.jp ・キネカに興味あったらDMください ・アスキーアートに興味あったらTwitterフォローしてください