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
Stencil JSについて
Search
scrpgil
April 07, 2021
Programming
0
420
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
Firebase Realtime DB から ActionCable 移行のマネジメントの話
scrpgil
0
79
フレーム問題で考えてみるやる夫スレViewer
scrpgil
0
14
ChatGPTとLangChain さわってみた
scrpgil
0
83
久しぶりに ionic startしてみた
scrpgil
0
230
Ionic 6でWeb3やってみた
scrpgil
0
200
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
410
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
scrpgil
0
610
夢のクロスプラットフォーム開発
scrpgil
0
370
PWA_Toolkitについて.pdf
scrpgil
0
1.7k
Other Decks in Programming
See All in Programming
SwiftUI Viewの責務分離
elmetal
PRO
1
220
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
520
Rails アプリ地図考 Flush Cut
makicamel
1
110
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
320
CNCF Project の作者が考えている OSS の運営
utam0k
6
710
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
120
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
120
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
Spring gRPC について / About Spring gRPC
mackey0225
0
220
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Featured
See All Featured
A Tale of Four Properties
chriscoyier
158
23k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Designing Experiences People Love
moore
139
23k
A better future with KSS
kneath
238
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
KATA
mclloyd
29
14k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
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フォローしてください