Gatsby.jsで.md／.adocが混在できるテンプレートを作ったときの苦しみ / Pain-to-create-gatsby-template-that-supports-markdown-and-asciidoc

2020.08.26
フロントエンドLT会 vol.1 - 2020夏祭り
「Gatsby.jsで.md／.adocが混在できるテンプレートを作ったときの苦しみ」

Transcript

1. #frontendlt
   Gatsby.jsで.md/.adocが
   混在できるテンプレートを
   作ったときの苦しみ
   2020.08.26
   フロントエンドLT会 vol.1 -2020夏祭り
   Isamu Suzuki, Rakus
   

   View Slide

2. #frontendlt
   ● 株式会社ラクス
   ○ ガンプラ部 部長
   ○ 先行技術検証
   ○ アーキテクチャ選定
   ○ 技術イベント司会
   ● 先月引っ越し
   ○ 作業部屋兼サーバールーム確保！
   ○ 先週やっとNuro光開通
   ● 自転車買いました
   ● Fat Project作者
   ● ポケモンはじめました
   ○ 緑→ソード
   鈴木 勇 / Isamu Suzuki
   

   View Slide

3. #frontendlt
   今日のお題
   Gatsby.jsのテーマを作った話
   

   View Slide

4. #frontendlt
   Gatsby.js？
   ● React.jsベースのWebページ／SPA作成用フレームワーク
   ○ いわゆるSSG : Static Site Generator
   ■ Markdownでコンテンツを作成
   ■ React.jsでテンプレートを作成
   ● ブログエンジンとしても
   ○ 今回は技術ブログを作り直そうと思った
   

   View Slide

5. #frontendlt
   SSGでブログを構築する仕組み
   Netlify
   GraphQL
   transformer
   plugin
   remark
   Gatsby.js
   template
   頑張って記事を書く
   

   View Slide

6. #frontendlt
   Asciidoc
   使いたい!!
   

   View Slide

7. #frontendlt
   ● かんたんに書けるけど表現力がない
   ○ 注釈とか（文中に）カンタンに入れたい
   ○ 定義リスト使いたい
   ○ 吹き出し付きブロック要素使いたい
   Markdownの不満点
   

   View Slide

8. #frontendlt
   すべて出来ます
   Asciidocならね
   

   View Slide

9. #frontendlt
   Asciidoc
   ● 軽量マークアップ言語という意味だとMarkdownと同じカテゴリ
   ● 電子書籍を構造化対象に含む構造化言語
   ● オライリーからもAsciidocで組版された書籍が出版されている
   つまり
   「技術書が書ける」
   

   View Slide

10. #frontendlt
    SSGでブログを構築する仕組み
    Netlify
    GraphQL
    transformer
    plugin
    remark
    Gatsby.js
    template
    頑張って記事を書く
    ここの……
    

    View Slide

11. #frontendlt
    これを
    こうする
    transformerプラグインの追加でいけそう
    

    View Slide

12. #frontendlt
    Asciidoc用のtransformer自体はある
    transformerの追加はnpm installして、設定ファイルへの追記で OK
    

    View Slide

13. #frontendlt
    世界に平和が訪れた
    

    View Slide

14. #frontendlt
    . . .
    

    View Slide

15. #frontendlt
    わけはなく
    

    View Slide

16. #frontendlt
    マルチtransformerは考慮されていない？
    ● 多分Gatsby.jsの設計思想
    ● 複数のtransformerで取り込んだデータは別グラフ
    Markdownの記事群 Asciidocの記事群
    

    View Slide

17. #frontendlt
    何が困る？
    ● グラフが別なので「記事群から取得」ができない
    ○ 「mdの記事群」「adocの記事群」に分かれる
    ○ 「全ファイル群（条件：ブログ記事）から取得」となる
    ● 記事のデータ構造がtransformer間で統一されていない
    ○ 変換して共通形式に
    ■ asciidocのエイリアス機能を駆使してるけど……
    ● 「最新10件取得」が困難
    ○ 共通形式にした後マージしてソートして……
    

    View Slide

18. #frontendlt
    つらい
    

    View Slide

19. #frontendlt
    どうするのが正解だったのか
    ● （おそらく）１概念＝1 transfer にするべき
    ● MarkdownとAsciidocを混在させるためには両対応のtransformerを
    つくるべきなのではないか
    誰かいい方法知ってたら教えて下さい……m(_ _)m
    

    View Slide

20. #frontendlt
    苦労の跡
    https://github.com/moomoo-ya/gatsby-starter-ts-asciidoc
    

    View Slide

21. #frontendlt
    宣伝
    

    View Slide

22. #frontendlt
    次回の司会担当イベントは9/9(水)
    

    View Slide

23. #frontendlt
    Thank ☺ you
    ● Asciidocで技術書が書ける
    ● Gatsby.jsでMarkdown/Asciidocの混在はつらい？
    ● 「ブログ記事」の統一構造が定義されてほしい
    

    View Slide

24. #frontendlt
    Thank ☺ you
    ● Asciidocで技術書が書ける
    ● Gatsby.jsでMarkdown/Asciidocの混在はつらい？
    ● 「ブログ記事」の統一構造が定義されてほしい
    ● Asciidocで技術書が書ける
    ● Gatsby.jsでMarkdown/Asciidocの混在はつらい？
    ● 「ブログ記事」の統一構造が定義されてほしい
    ● Asciidocもっと流行れ
    

    View Slide