Stencil JSについて

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フォローしてください

Stencil JSについて

Stencil JSについて

scrpgil

More Decks by scrpgil

Other Decks in Programming

Featured

Transcript