Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stencil JSについて

scrpgil
April 07, 2021

Stencil JSについて

Ionic Meetup #16 [Web技術でモバイルアプリをつくる]用の資料です。
https://ionic-jp.connpass.com/event/208425/

scrpgil

April 07, 2021
Tweet

More Decks by scrpgil

Other Decks in Programming

Transcript

  1. Stencil JSについて
    Ionic Meetup #16 in Online

    View full-size slide

  2. 自己紹介
    ● 榊原宏祐
    ● scrpgil
    ● 株式会社キネカ所属
    ● Ionicヘビーユーザー(仕事 & 趣味)
    ● エンタメマッチングアプリ作成
    ● ASCII artが趣味(Webアプリ公開)
    ● 最近、ascii.artドメイン取得

    View full-size slide

  3. Ionic本書きました
    「Ionicで始めるWebサービス開発」
    ● Webサービス(質問箱風)を開発しながら、
    IonicとFirebaseについて学ぶ本
    ● 特定フレームワークを使わず、Ionic/core
    を使用
    ● ionic/core = stencil.jsを利用しています

    View full-size slide

  4. アジェンダ
    ● Webコンポーネントについて
    ● Stencilについて
    ● Stencil APIについて
    ● もっとStencilを知りたい場合

    View full-size slide

  5. Webコンポーネントについて
    ● JavaScript標準のコンポーネント機能。
    ● 特定フレームワークに依存せず、コンポーネントの仕組みを実現できる

    View full-size slide

  6. コード例

    View full-size slide

  7. 果たしてWebコンポーネントの作成は簡単か?
    ● 変更検知とか使いたい
    ● TypeScript使いたい

    View full-size slide

  8. Stencilについて
    ● Webコンポーネントを作成するためのコンパイラ
    ● フレームワークを利用せずにWebコンポーネントを作成する
    ● 主要なフレームワークについてる機能(変更検知とか)はだいたい持っている
    ● Ionicで利用しているし、Ionic Teamが開発している

    View full-size slide

  9. なぜStencilか?
    ● パフォーマンス:従来のフレームワークは、要求の厳しいモバイルプログレッシブ
    Webアプリケーションには重すぎる
    ● 安定性:フレームワークの絶え間ない変更を回避したい
    ● 相互運用性:主要なフレームワーク(Angular、Vue)で動作する

    View full-size slide

  10. Stencilのコード例

    View full-size slide

  11. Stencilが持っている機能
    ● VirtualDOM
    ● TypeScript
    ● JSX
    ● データバインディング
    ● LazyLoading

    View full-size slide

  12. StencilのAPI
    ● @Component(): タグ名に関連するスタイルシートを設定
    ● @Prop():コンポーネントにプロパティを作成
    ● @State():変更検出中に監視する必要があるローカル状態
    ● @Event():コンポーネントでイベントをトリガー
    ● @Listen():各DOMから発生したイベントをリッスン
    ● @Element():このコンポーネントのDOM要素を取得

    View full-size slide

  13. 事例
    ● 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

    View full-size slide

  14. StencilJSをもっと知りたい場合
    日本語doc: https://stenciljs.jp

    View full-size slide

  15. ご視聴ありがとうございました
    ・StencilJSはWebコンポーネント作成コンパイラ
    ・Webコンポーネントを使えばFWに頼らずコンポーネント志向の開発が可能
    ・IonicはStencilJSを使ってコンポーネント作ってる
    ・StencilJSの日本語ドキュメント:https://stenciljs.jp
    ・キネカに興味あったらDMください
    ・アスキーアートに興味あったらTwitterフォローしてください

    View full-size slide