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
450
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
110
フレーム問題で考えてみるやる夫スレViewer
scrpgil
0
42
ChatGPTとLangChain さわってみた
scrpgil
0
110
久しぶりに ionic startしてみた
scrpgil
0
250
Ionic 6でWeb3やってみた
scrpgil
0
220
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
450
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
scrpgil
0
650
夢のクロスプラットフォーム開発
scrpgil
0
380
PWA_Toolkitについて.pdf
scrpgil
0
1.9k
Other Decks in Programming
See All in Programming
CSC305 Lecture 05
javiergs
PRO
0
220
CSC305 Lecture 08
javiergs
PRO
0
220
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
160
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
580
品質ワークショップをやってみた
nealle
0
490
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
900
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
430
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
930
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
YesSQL, Process and Tooling at Scale
rocio
173
14k
BBQ
matthewcrist
89
9.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Why Our Code Smells
bkeepers
PRO
340
57k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Side Projects
sachag
455
43k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
KATA
mclloyd
32
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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フォローしてください