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

by moomoo-ya

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

#frontendlt Asciidoc 使いたい!!

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

#frontendlt 世界に平和が訪れた

Slide 14

Slide 14 text

#frontendlt . . .

Slide 15

Slide 15 text

#frontendlt わけはなく

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

#frontendlt つらい

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

#frontendlt 宣伝

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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