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
360
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
46
久しぶりに ionic startしてみた
scrpgil
0
160
Ionic 6でWeb3やってみた
scrpgil
0
140
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
310
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
scrpgil
0
480
夢のクロスプラットフォーム開発
scrpgil
0
300
PWA_Toolkitについて.pdf
scrpgil
0
1.5k
Stencil.js触ってみた
scrpgil
0
550
時間管理術_ポモドーロテクニック_について
scrpgil
0
92
Other Decks in Programming
See All in Programming
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
350
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
370
코틀린으로 멀티플랫폼 만들기
pangmoo
0
120
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
340
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.6k
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
490
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
Milestoner
bkuhlmann
1
400
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
470
"config" ってなんだ? / What is "config"?
okashoi
0
220
Featured
See All Featured
Visualization
eitanlees
135
14k
How to Ace a Technical Interview
jacobian
272
22k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
How GitHub (no longer) Works
holman
304
140k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Fireside Chat
paigeccino
20
2.6k
Design by the Numbers
sachag
274
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
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フォローしてください