Tweet
Tweet

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もっと流行れ