Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gatsby.jsで.md/.adocが混在できるテンプレートを作ったときの苦しみ / Pai...
Search
moomoo-ya
August 26, 2020
Programming
0
580
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が混在できるテンプレートを作ったときの苦しみ」
moomoo-ya
August 26, 2020
Tweet
Share
More Decks by moomoo-ya
See All by moomoo-ya
サービスを陳腐化させない組織だった技術刷新 / Technology Renewal Initiatives
moomooya
0
1.2k
はじめてのオンラインイベント配信 with COVID-19 バグ修正版 / Online-Event-bugfixed
moomooya
0
98
一番安い子だーれだ?~黒字化のための無慈悲なタスク配分~ / Distribute tasks
moomooya
1
2.9k
はじめてのオンラインイベント配信 with COVID-19 バグあり版 / Online-Event-includes-bug
moomooya
0
800
やはり俺のLT登壇はまちがっている。 / my-lightning-talk-is-wrong-as-i-expected
moomooya
4
2.2k
LADRのすすめ&先行技術検証PRJの紹介 / Introducing-LADR-and-Technology-verification
moomooya
5
2.4k
技術書へのアクセスを劇的に向上させた話 / oreilly-safari-and-acm-membership
moomooya
2
7.3k
モノリスにおけるビジネスロジックの設計 ~アグリゲートパターン~ / aggregate-pattern-for-domain-modeling-on-monolithic
moomooya
2
1.4k
オブジェクト指向を学んでから20年間でモヤったこと / Object-Oriented-groomy-in-20-years
moomooya
0
490
Other Decks in Programming
See All in Programming
Swift Testingのモチベを上げたい
stoticdev
2
140
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
240
Unity Android XR入門
sakutama_11
0
180
Jakarta EE meets AI
ivargrimstad
0
490
React 19アップデートのために必要なこと
uhyo
8
1.5k
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
Introduction to kotlinx.rpc
arawn
0
770
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
2
390
Domain-Driven Design (Tutorial)
hschwentner
13
22k
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
250
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
Ça bouge du côté des animations CSS !
goetter
2
160
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Facilitating Awesome Meetings
lara
53
6.2k
How to train your dragon (web standard)
notwaldorf
91
5.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Building an army of robots
kneath
303
45k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Transcript
#frontendlt Gatsby.jsで.md/.adocが 混在できるテンプレートを 作ったときの苦しみ 2020.08.26 フロントエンドLT会 vol.1 -2020夏祭り Isamu Suzuki,
Rakus
#frontendlt • 株式会社ラクス ◦ ガンプラ部 部長 ◦ 先行技術検証 ◦ アーキテクチャ選定
◦ 技術イベント司会 • 先月引っ越し ◦ 作業部屋兼サーバールーム確保! ◦ 先週やっとNuro光開通 • 自転車買いました • Fat Project作者 • ポケモンはじめました ◦ 緑→ソード 鈴木 勇 / Isamu Suzuki
#frontendlt 今日のお題 Gatsby.jsのテーマを作った話
#frontendlt Gatsby.js? • React.jsベースのWebページ/SPA作成用フレームワーク ◦ いわゆるSSG : Static Site Generator
▪ Markdownでコンテンツを作成 ▪ React.jsでテンプレートを作成 • ブログエンジンとしても ◦ 今回は技術ブログを作り直そうと思った
#frontendlt SSGでブログを構築する仕組み Netlify GraphQL transformer plugin remark Gatsby.js template 頑張って記事を書く
#frontendlt Asciidoc 使いたい!!
#frontendlt • かんたんに書けるけど表現力がない ◦ 注釈とか(文中に)カンタンに入れたい ◦ 定義リスト使いたい ◦ 吹き出し付きブロック要素使いたい Markdownの不満点
#frontendlt すべて出来ます Asciidocならね
#frontendlt Asciidoc • 軽量マークアップ言語という意味だとMarkdownと同じカテゴリ • 電子書籍を構造化対象に含む構造化言語 • オライリーからもAsciidocで組版された書籍が出版されている つまり 「技術書が書ける」
#frontendlt SSGでブログを構築する仕組み Netlify GraphQL transformer plugin remark Gatsby.js template 頑張って記事を書く
ここの……
#frontendlt これを こうする transformerプラグインの追加でいけそう
#frontendlt Asciidoc用のtransformer自体はある transformerの追加はnpm installして、設定ファイルへの追記で OK
#frontendlt 世界に平和が訪れた
#frontendlt . . .
#frontendlt わけはなく
#frontendlt マルチtransformerは考慮されていない? • 多分Gatsby.jsの設計思想 • 複数のtransformerで取り込んだデータは別グラフ Markdownの記事群 Asciidocの記事群
#frontendlt 何が困る? • グラフが別なので「記事群から取得」ができない ◦ 「mdの記事群」「adocの記事群」に分かれる ◦ 「全ファイル群(条件:ブログ記事)から取得」となる • 記事のデータ構造がtransformer間で統一されていない
◦ 変換して共通形式に ▪ asciidocのエイリアス機能を駆使してるけど…… • 「最新10件取得」が困難 ◦ 共通形式にした後マージしてソートして……
#frontendlt つらい
#frontendlt どうするのが正解だったのか • (おそらく)1概念=1 transfer にするべき • MarkdownとAsciidocを混在させるためには両対応のtransformerを つくるべきなのではないか 誰かいい方法知ってたら教えて下さい……m(_
_)m
#frontendlt 苦労の跡 https://github.com/moomoo-ya/gatsby-starter-ts-asciidoc
#frontendlt 宣伝
#frontendlt 次回の司会担当イベントは9/9(水)
#frontendlt Thank ☺ you • Asciidocで技術書が書ける • Gatsby.jsでMarkdown/Asciidocの混在はつらい? • 「ブログ記事」の統一構造が定義されてほしい
#frontendlt Thank ☺ you • Asciidocで技術書が書ける • Gatsby.jsでMarkdown/Asciidocの混在はつらい? • 「ブログ記事」の統一構造が定義されてほしい
• Asciidocで技術書が書ける • Gatsby.jsでMarkdown/Asciidocの混在はつらい? • 「ブログ記事」の統一構造が定義されてほしい • Asciidocもっと流行れ