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
630
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.3k
はじめてのオンラインイベント配信 with COVID-19 バグ修正版 / Online-Event-bugfixed
moomooya
0
120
一番安い子だーれだ?~黒字化のための無慈悲なタスク配分~ / Distribute tasks
moomooya
1
3.1k
はじめてのオンラインイベント配信 with COVID-19 バグあり版 / Online-Event-includes-bug
moomooya
0
830
やはり俺のLT登壇はまちがっている。 / my-lightning-talk-is-wrong-as-i-expected
moomooya
4
2.3k
LADRのすすめ&先行技術検証PRJの紹介 / Introducing-LADR-and-Technology-verification
moomooya
5
2.5k
技術書へのアクセスを劇的に向上させた話 / oreilly-safari-and-acm-membership
moomooya
2
7.4k
モノリスにおけるビジネスロジックの設計 ~アグリゲートパターン~ / aggregate-pattern-for-domain-modeling-on-monolithic
moomooya
2
1.6k
オブジェクト指向を学んでから20年間でモヤったこと / Object-Oriented-groomy-in-20-years
moomooya
0
520
Other Decks in Programming
See All in Programming
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
220
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.5k
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
480
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
150
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
190
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
650
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
220
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Building Applications with DynamoDB
mza
95
6.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How to train your dragon (web standard)
notwaldorf
96
6.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fireside Chat
paigeccino
37
3.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Done Done
chrislema
184
16k
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もっと流行れ