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

Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで

Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで

Floor sponsor LT by Yuki Hattori (yhatt) in Vue.js v-tokyo Meetup #9
https://vuejs-meetup.connpass.com/event/124393/

Web version:
https://yhatt-lt-vuejs-v-tokyo-meetup-9.netlify.com/

Marp Vue:
https://github.com/marp-team/marp-vue

marp-vue-slide (Real-world use case of Marp Vue):
https://github.com/yhatt/marp-vue-slide

Yuki Hattori

April 24, 2019
Tweet

More Decks by Yuki Hattori

Other Decks in Programming

Transcript

  1. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 1/35 Marp

    Vue Vue を 1mm も触ったことない人がコンポーネントを公開するまで Floor sponsor LT by Yuki Hattori (@yhatt) | Speee, Inc. 2019‑04‑24 | Vue.js v‑tokyo Meetup #9
  2. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 6/35 Marp

    Markdown Presentation Writer https://yhatt.github.io/marp/ 現在、開発は中止しています 現在、開発は中止しています 6 6
  3. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 8/35 Marpit

    Base framework Marp Core The core of Marp tools Marp CLI CLI converter Marp VSCode VS Code extension Marp React React renderer component Marp Web Web interface (PWA) Marp Desktop Marp Web wrapper for desktop 8 8 Stable | Stable | In development | In development | Planned Planned
  4. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 10/35 e.g.

    Marp React Marp renderer component for React import { Marp } from '@marp-team/marp-react' import React from 'react' import ReactDOM from 'react-dom' const markdown = '# Hello!' ReactDOM.render( <Marp markdown={markdown} />, document.getElementById('react-app') ) 10 10
  5. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 13/35 <template>

    <div id="app"> <Marp :markdown="markdown" /> </div> </template> <script> import { Marp } from '@marp-team/marp-vue' const markdown = '# Page 1\n\n---\n\n## Page 2' export default { components: { Marp }, data: () => ({ markdown }), } </script> <style> #app [data-marpit-svg] { background: #eee; box-shadow: #ccc 0px 5px 10px; margin: 40px; } </style> 13 13
  6. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 15/35 Marp

    レンダラーの基本 1. Marp Core に Markdown を渡す 2. 変換された HTML と CSS を描画 15 15
  7. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 17/35 React:

    React: https://codesandbox.io/s/kkryjmyy75 https://codesandbox.io/s/kkryjmyy75 | Vue: | Vue: https://codesandbox.io/s/2x994l3roj https://codesandbox.io/s/2x994l3roj 17 17
  8. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 18/35 React

    / Vue 共通の要件を抽出 Extract requirements for Marp renderer component 18 18
  9. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 19/35 仮想

    DOM で表示| Virtual DOM rendering カスタムレンダラー| Custom renderer Web Worker (Experimental) 19 19
  10. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 22/35 createElement

    in React & Vue <div id="html">Hello, <b>World!</b></div> // React createElement('div', { id: 'html' }, [ 'Hello', createElement('b', null, 'World!'), ]) // Vue createElement('div', { attrs: { id: 'html' } }, [ 'Hello', createElement('b', null, 'World!'), ]) 22 22 ※ Markdown ※ Markdown HTML HTML HTM HTM createElement (JSX) createElement (JSX)
  11. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 24/35 Custom

    renderer for React Render Props: スライドの内容を受ける関数を渡す <Marp markdown="# Hello, Marp!"> {slides => ( <div className="marp"> {slides.map(({ slide }) => ( <div className="slide" key={i}> {slide} </div> ))} </div> )} </Marp> 24 24
  12. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 25/35 In

    case you are wondering what's the equivalent pattern in Vue, it's called scoped slots (and if using JSX it works the same as React) — Evan You (@youyuxi) 25 25
  13. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 26/35 Custom

    renderer for Vue Scoped slots で変換結果を受ける <Marp markdown="# Hello, Marp!" v-slot="slides"> <div class="marp"> <div class="slide" v-for="slideObj in slides"> <MarpSlide :slide="slideObj.slide" /> </div> </div> </Marp> 26 26 ※ Vue 2.6 の ※ Vue 2.6 の v-slot v-slot を使用、レンダリング用コンポーネント を使用、レンダリング用コンポーネント MarpSlide MarpSlide も一緒に必要 も一緒に必要
  14. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 27/35 Web

    Worker (Experimental) 一連の変換処理を Worker に逃がす 27 27 ※ Vue 固有の処理ではないので、興味があればコードをご覧ください ※ Vue 固有の処理ではないので、興味があればコードをご覧ください
  15. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 28/35 メインスレッドがブロックされない

    ライブプレビューの体感速度がさらに向上 重い Marp Core を Worker で遅延読み込み JS バンドルサイズの大幅な縮小 28 28
  16. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 30/35 コンポーネントの実装

    Vue v3 系を見越して実装 vue-class-component + JSX vue-property-decorator (for TypeScript) Babel やビルドツールは今のところ未使用 TypeScript の --jsx react を Vue にマップ 30 30
  17. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 32/35 まとめ

    1mm も触ってなくても大丈夫!! React が分かるなら、知識を大部分で活かせる Vue は日本語の資料が手厚く、難なく移植できた Marp Vue + Marp React の実用性を高めていき、 Marp エコシステムの発展に繋げたい 32 32
  18. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 33/35 Welcome

    to contribute https://github.com/marp‑team/marp https://github.com/marp‑team/marp‑vue 33 33
  19. 2019/4/24 Marp Vue: Vue を 1mm も触ったことない人がコンポーネントを公開するまで localhost:8080 35/35 marp‑vue‑slide

    Marp Vue + Vuex + vue‑awesome‑swiper https://github.com/yhatt/marp‑vue‑slide f / F11 : Fullscreen p : Presenter view Ctrl/Cmd+P To PDF 35 35