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
380
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
ChatGPTとLangChain さわってみた
scrpgil
0
59
久しぶりに ionic startしてみた
scrpgil
0
190
Ionic 6でWeb3やってみた
scrpgil
0
170
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
350
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
scrpgil
0
520
夢のクロスプラットフォーム開発
scrpgil
0
330
PWA_Toolkitについて.pdf
scrpgil
0
1.6k
Stencil.js触ってみた
scrpgil
0
560
時間管理術_ポモドーロテクニック_について
scrpgil
0
97
Other Decks in Programming
See All in Programming
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
【Go言語】golangci-lintの使い方
tomo1227
0
270
CSC307 Lecture 09
javiergs
PRO
1
500
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Advanced App Shrinking Techniques
cbeyls
2
150
Featured
See All Featured
For a Future-Friendly Web
brad_frost
173
9.2k
YesSQL, Process and Tooling at Scale
rocio
166
14k
RailsConf 2023
tenderlove
16
720
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Practical Orchestrator
shlominoach
185
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Automating Front-end Workflow
addyosmani
1362
200k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
How GitHub (no longer) Works
holman
305
140k
In The Pink: A Labor of Love
frogandcode
139
22k
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フォローしてください