技術同人誌『ばぶでもわかるおぶざばぶる』をつくりました

このたび、すぎもと組は技術同人誌『ばぶでもわかるおぶざばぶる』をつくりました。すぎもと組とは、わたしが授業連絡などでつかっているSlackのワークスペース名です。決してあやしい団体ではありません。

すぎもと組編，2020，『ばぶでもわかるおぶざばぶる : D3.jsとObservableではじめるデータビジュアライゼーション』すぎもと組．

技術書典応援祭（オンライン開催、2020年3月日−4月5日）

つくった経緯

この同人誌は、「技術書典8」にはじめて出展する予定でした。新型コロナウイルス感染症のため開催中止となり、代わりに開催されている技術書典応援祭に出展しています。

技術書典は、来場者1万人規模の大きな技術同人誌の即売会イベントです。2018年秋、わたしは出張の合間に技術書典5に参加者として訪れました。開場前からの長蛇の列に、身動きがとれないほどの会場内の混雑ぶりに驚きながら、こんな場に参加するなら、出展者として参加したほうが楽しいだろう。そう思いましたが、地方在住者（当時は佐賀在住）としては、東京でしか開催されない技術書典への出展は現実的ではありませんでした。もちろん地方から参加しているサークルも多数あるとはおもいますが。

それから1年──。2019年の秋、わたしは東京に引っ越していました（！）。メールマガジンで技術書典8サークル参加申込みの締切が迫っていることを知り、出展することを思いついたのです。締切前日（2019年11月30日）に、いっしょに同人誌作ってみないかとデータ可視化の演習授業の受講生に呼びかけました。すると数人の学生が手をあげたので、翌日ぎりぎりに申し込みました。12月15日、当選発表があり、参加費を支払って制作をはじめました。

2月中旬にできあがったので、制作期間は約3か月です。ただし実質はもっと短い短期集中で作りました。学生は第2章の作例を担当し、わたしは前半の第1章を担当しました。第2章の内容や、タイトル、カバーデザイン、イラストなどは、どれも学生の発案です。

目次

はじめに
第I部 入門編
第1章 D3.js をはじめよう
　1.1 D3.jsとは
　1.2 はじめてのD3
　1.3 D3 vs.jQuery vs. JavaScript
第2章 Observable 入門
　2.1 Observableとは
　2.2 ノートブックの編集
第3章 Observable の JavaScript
第4章 ノートブック・ギャラリー
第II部 実践編
第5章 シンプルな表
　5.1 ここで作れる表
　5.2 2次元配列の場合
　5.3 オブジェクトの配列の場合
第6章 ロリポップチャート
　6.1 ここで作れるグラフ
　6.2 データの準備
　6.3 チャートの作成
第7章 折れ線グラフ
　7.1 ここで作れるグラフ
　7.2 データの準備
　7.3 チャートの作成準備
　7.4 チャートの作成
第8章 ドーナツチャート
　8.1 ここで作れるグラフ
　8.2 データの準備
　8.3 チャートの作成
第9章 箱ひげ図
　9.1 ここで作れるグラフ
　9.2 データの準備
　9.3 チャートの作成
第10章 ヒートマップ
　10.1 ここで作れるグラフ
　10.2 データの準備
　10.3 チャートの作成
第11章 地図
　11.1 ここで作れる地図
　11.2 データの準備
　11.3 地図の作成
著者紹介
おわりに

誰のための本か

この本で紹介しているのは、JavaScriptのライブラリD3.jsと、JavaScriptの共有ノートブックWebサービスのObservableです。データビジュアライゼーション超入門と謳ったとおり、はじめてデータからビジュアルをつくってみたい初学者のためのガイドブックです。そのため本書で取り扱っているのは、棒グラフなどの基本的なチャートです。複雑なデータビジュアライゼーションではありませんが、データセット（CSVやJSONなど）があれば、ちょっとしたスケッチを描くように可視化できるので、ぜひ体験していただきたいです。

Image from Gyazo
わたしのObservableノートブックは200個を超えています。

デザイナーの方でも、エンジニアの方でも、データの可視化にすこしでも興味のある方は、ぜひ読んでいただきたいです。また、学生やお子さんも、プログラミングの入門として気軽に読んでいただけます。

感想は、ハッシュタグ #ばぶでもわかるおぶざばぶる #ばぶ本 でお待ちしています。続編の希望があれば、動的なデータの取り扱いや、ボタンなどをつかったインタラクションなどについても書いてみたいです。

同人誌づくりは楽しい！

はじめて技術同人誌をつくってみて、よかったと思ったことがいくつかありました。

第一に、誰かといっしょにつくる楽しさがあります。今回は、学生といっしょに作ったことでなんとかできあがりました。ひとりでつくっていたらモチベーションを維持できず、途中で頓挫したかもしれません。

第二に、テーマとなる技術の勉強になります。執筆した学生は、「文章で伝えるって難しいですね」とつぶやいていました。何となく理解しているつもりのことでも、伝えるために文章に起こすと、意外と分かっていなかったりします。だれかに教えるためには、まず書き手が学ぶ必要があるんですね。わたしも内容に間違いがないように、D3.jsのソースコードを確認することがあり、大いに勉強になりました。

第三に、出版物の理解が深まります。同人誌でも商業書籍でも、1冊の本が生まれるまでには、企画、執筆、編集、デザイン、組版、印刷、製本、営業（宣伝）、流通、販売など、数多くのプロセスがあります。同人誌を作ることは、そのプロセス全部に関われます。世の中に流通している本にも、ひとつひとつ制作のストーリーがあることに思いをはせると、本が生まれることへの感謝の気持ちが生まれました。

今回、同人誌最大の醍醐味である対面販売の機会がなくなったのは残念ですが、同人誌づくりは楽しかったです。技術書典に関心のある人は、ぜひ何か作ってみてはいかがでしょうか。複数人で書くのが気楽でよいとおもいます。丸ごと1冊書ける人でも、デザインや校正など他者の協力をもらいながら作ることを強くおすすめします。その方が完成度も上がりますし、なによりつくる過程を楽しめますから。

制作プロセスについては、別途エントリーをあげる予定です。