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
360
PWA_Toolkitについて.pdf
scrpgil
0
1.7k
Other Decks in Programming
See All in Programming
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
Immutable ActiveRecord
megane42
0
130
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
AHC041解説
terryu16
0
590
sappoRo.R #12 初心者セッション
kosugitti
0
230
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.5k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Practical Orchestrator
shlominoach
186
10k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Speed Design
sergeychernyshev
25
780
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Done Done
chrislema
182
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Optimizing for Happiness
mojombo
376
70k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Writing Fast Ruby
sferik
628
61k
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フォローしてください