皆様ごきげんよう。東京ラビットハウスのえるきちと言います。Modern JavaScriptというモダン (現代的) な JavaScriptを書くための知見を一通りまとめたガチな本を技術書典2で頒布しました。とても密度の濃いイベントでとても良かったです。来てくれた方、買っていってくれた方、運営の方、声を掛けてくれた方、参加者のみなさま、どうもありがとうございました。

感想・制作秘話・当日の様子などをまとめました。あなたもぜひ技術書典3でサークル参加してみてください。絶対に楽しいです。

最後に告知事項があります。

制作秘話

東京ラビットハウスでは過去にElectron本を初回の技術書典に委託で参加しました。冬コミも同様です。今回の技術書典2は単独のサークルとしての初参加になります。

制作のモチベーション

じつは申し込み時点に予定していたのは、チートで楽々エンジニアリングみたいな感じの本でした。Qiitaに書いた異世界に転生しなくてもチートで最強エンジニアを手直しして本を作ろうかなーと思っていたんですが、あまり反響が無かったというのもあって、うーんどうしようかなーと思いながら、気付いたら全然手を付けないまま2月も半ばを過ぎていました。これはヤバいのでは？と思って、急遽題材を変更したのです。

そこで考えたのが、未だに古いJS (たとえばES5とか) の情報が入り交じって混乱している状況でモダンなJavaScriptに絞り込んでガチの一冊の本を書きたいというものです。

元々僕はJavaScriptにはほとんど縁の無い人生を送ってきていたのですが、Electronをさわり始めたことをきっかけにJavaScriptをやり始めました。普通のJSエンジニアはブラウザ拡張だったり、ウェブページ向けのJSから入る人が多いと思うのですが、僕はそこらへんを完全にスキップしていたために、jQueryだとか旧世代の遺跡には一切触れず、モダンなJavaScriptの世界だけを追求できました。

たとえば現状でJavaScriptの情報を調べたとき、未だに高確率でvarを使ってる事例を見かけてしまいますが var は、今の時代には letやconstに置き換えるべきです。

JavaScriptはとてもポテンシャルの高い処理系です。バックエンドからフロントエンドまでを完璧にこなせるだけではなく、アプリを書いたりもできます。環境整備で苦労している人もいたりして、JavaScriptに対する評価はまだ不当に低いのでは？と僕は考えています。

そんな感じの思いを原稿にぶつけてみました。

執筆

執筆期間は構想含めて一ヶ月半くらいでしょうか。実際には執筆が進み出したのはラストの二週間ちょっとくらいです。ただいま心身の事情により働けない状態なので時間があり、がっつり記事に集中できました。もっとも心身の事情で執筆できないタイムロスもそれなりにあったわけですが。

最初は大ざっぱにJavaScriptとは、みたいなところから書き始めました。ある程度書いてからアウトラインを大ざっぱに決めました。3/14時点で、概要説明と環境整備とユニットテストの章だけgithubのプライベートリポジトリに最初のコミットをしました。この時点だとまだ30ページ程度だったでしょうか。

そこからひたすら原稿を書いて一通りが書き終わったのが3/25くらいでした (細かい日付は失念)。よーし、印刷所に回せる形にするぞーというところから苦難の道が始まりました。

LaTeXとの戦い

今回執筆に使用したのがRe:Viewで、Electron本の時は一応PDFは作成したものの、実際に印刷はしてないものでした。「いけるいけるー」と思ってたんですが次々と問題が降りかかってきました。元々僕は専門学校卒でほとんどLaTeXに縁の無い人生を歩んでいたのですが、印刷所に回せるデータを作る為にはLaTeXとの戦いが必須だったのです。

• B5用のPDFデータを作らないといけない
• フォントを埋め込む必要がある

大昔に奥村先生の本を読んだこともあって大ざっぱな概要くらいはわかるんですが、細かい部分がさっぱりです。jsbookって何、B5ってどうやったらいいの、フォントはどうすれば指定できるの？などなど。しかもそれらを調べていけば行くほど「同人誌のフォント、明朝体だと退屈そうに感じられる可能性があるから丸ゴ使った方がいいよ」みたいな話とかも見つかって、どうすればいいんだ！状態になりました。

当初考えていたのが、日光企画さんで早割で申しこもうというものだったんですが、「うーん、どう考えても時間かかりそうだからもうちょっと腰を据えてやるか」という事で、LaTeX関連を調べまくって、スタイルファイルをあれこれ修正をしていきました。ちなみにこの時点ではまだ表紙とか全くありません。

Macだとヒラギノフォントを埋め込む事例がやたら見つかったので調べてみると、印刷とかに使ってもライセンス的にOKだからということだったので、さまざまなトラブルと戦いながらヒラギノフォントを使えるように環境整備したりしました。フォントやB5向けの設定をしていくと、60ページだったのがいきなり80ページ位に膨らんでしまったので、フォントサイズや余白の調整とかをして70ページ位まで減らしたんですが、文字を詰め込みすぎると良くないとのことだったので、フォントのサイズを戻しました。

Re:Viewデフォルトの奥付だとかなりシンプルなので、たとえば著者紹介とか後書き、みたいな物をやるなら結局自前で書くっていう感じになりました。

そのあとはLaTeX固有の問題、ブロック要素やキャプションが変に前後するというやつと戦いながら、加筆・修正していきました。「どうせならもっとクォリティあげてやるぞ！！！」という謎のテンションでひたすらクォリティアップをしていました。

表紙を作成する

さて原稿はそんな感じである程度一段落(?)ついたんですが、問題は表紙です。サークルカットの作成時は、Online Photo Editorというのを使って作ったんですが、ぶっちゃけかなり微妙でした。どうしようか考えましたが結局採用したのはMacのプレゼンツールであるKeynoteでした。細かい微調整がしづらいのは難点ですが、ポップの作成や表紙・裏表紙、サークルカットの修正などなど大活躍をしました。知り合いのサークルの表紙とか参考にしたりしながら、適当に作ってみたんですが、意外に悪くない表紙にしあがったのではないかと自画自賛しております。ほんとは絵師の人に依頼をして表紙を描いてもらったりもしたかったのですが、いかんせんギリギリだったので…。

表紙データを作って、PDFに結合だ！となったんですが表紙に余白が入る、を初めとしてさまざまなLaTeX的問題がまた生じたもののなんとかPDFが完成しました。

入稿する

当初日光企画さんにと思ってたんですが、入稿についてやり方がさっぱりわからないという問題が生じました。たとえば表紙ってどうすればいいの？みたいなところですね。厚みを調べて表紙・背表紙・裏表紙の結合した画像ファイル作るの？どうやって？みたいなところで困ってたんですが、技術書典オンデマンドというサービスでは、表紙・裏表紙も画像として織り込んでPDF作れば、そのまま入稿できるという初心者にとって楽な仕様だったので、こちらを利用しました。

技術書典オンデマンドでは4/3(月曜日)の朝10時までに入稿すれば一番安いプランで、PDFが完成したのがその数時間前。ギリギリなんとか一番安いプランに間に合いました。これ、お試し印刷として、一冊だけ試し刷りを自宅に送ってもらえるサービスもあったのでそちらももちろん申しこみました。

4/5にお試し版が届いたんですが、これがなんというか今までアレコレやったものが物理的な本になっていてめちゃくちゃ感動しました。「あれ、これなんか悪くないぞ？」というか「ちゃんとした薄い本ができてる」という感じでした。

技術書典オンデマンドはとにかく楽でした。難点は、ステータスが入稿済みになってるから大丈夫だとは思いつつも、料金とかがメールで来なかったので、「うーん、大丈夫なのかなー」という不安が少しありました (僕はかなり心配性です)。

EPUBを作る

さて、Re:ViewではマルチアウトプットなのでPDFだけではなくEPUBも簡単に作れます。まぁ簡単と言ってもCSSを用意しないといけないんですけどね。で、EPUB作って、こちらはねこのしっぽ×BOOK☆WALKERコラボ企画にお願いしました。BOOK☆WALKERインディーズに著者登録・EPUBと表紙の登録を経て、ねこのしっぽさんでカードを発注という流れです。

途中ねこのしっぽさんから電話がかかってきて「これ72DPIだけど大丈夫？」みたいなことを聞かれて、あまりわかってなかったので、「はい、お任せします！！！」という返答をしておきました。いい感じによしなに処理してくれました。

値段を決める

実は最初、60P位で500円にするかーとか考えていたんですが、さすがに安すぎるっていうのと、元々詰め込んだ分量でそれだったので、LaTeXの調整をしてページ数が増えだしたあたりで、値段800円位にして分量も増やすか、なんて考えていました。ただまぁ個人で参加するわけだしおつりという面倒が生じるのは誰も得しなさそうだったので、1000円という値段設定にしました。これが価格バランスとしてどうなのかはよくわかってないんですが、結果として完売できたので、ちょうど良かったのかなと思っています。

当日の準備をする

サークルとして初参加なので準備が必要でした。実は最初100均のコインケースも買ってたんですが、1000円にしようって決めた段階で不要になりました。まぁ次回とかに使えるだろうから無駄というわけではありませんが。

• テーブルクロス
• ポスタースタンド http://amzn.to/2nA4F0f
• ブックスタンド http://amzn.to/2olQokR
• はさみ・カッター
• マスキングテープ
• ボールペン

などを用意しました。100均＆Amazonマジ便利。

今回持って行ってなくて持って行くべきだったのは、ガムテープ、値札に使える汎用的なもの、たとえば大きな付箋とかあればよかったなーと思いました。コインのやりとりをする場合は、コインケースとお金を受け渡す皿状の物もあるといいでしょう。

あとはポップの作成とペーパーの作成です。ポップはやはりKeynoteでさっくり作りました。この時点ではもう大体慣れていたのか10分程度でしょうか。ペーパーはどうしようかなーと悩んでいました。Keynoteで作るには面倒だし、Re:ViewやLaTeXで作るのも面倒が多いと思って、よくよく考えてみるとWordでいいのでは？と思ってWordで作りました。

ただ、技術書典2でペーパーを配った感じだと、あまりペーパーを持って行く人っていないんですね。同人イベントと言えばペーパーがむしろメインだろくらいの認識だったんですが、そんなわけではなかったようです。

こうやって大体の準備ができたのが前日でした。キンコーズでポップとペーパー刷るかと思ってたんですが、色々あって間に合いませんでした。

まなび

• LaTeXを避けて通ることはできない。素直に奥村先生のLaTeX本の最新のヤツを買って読んでおきましょう。
• 余裕のあるときに、余裕のあるスケジュールで、一度16Pくらいの本を作成して実際に印刷所で印刷してみてもらってフローを確立すべきです。ぶっつけ本番で表紙込み84Pをいきなりガチでやると僕みたいに大変なことになります。

次はもうちょっとLaTeX周りちゃんと調べた上でもっと綺麗に調整していきたいものです。

当日

さて、そんなこんなで迎えた当日ですが、前日テンションが上がりすぎてて布団に入っても全然眠れないモードだったので実質睡眠時間3時間くらいでした。ちゃんと朝アラームで起きれてよかったです。寝坊してたら目も当てられないことに。

会場入りは10時でした。「あ、なんか人いっぱいいる」という感じのところから入場すると、完璧に入り口の真ん前というスペースが僕のブースで「うーん、やっぱり恐ろしい場所だ」などと思ってました。

技術書典オンデマンドの印刷物を受け取りに行ったり、設営準備をしてからセブンイレブンにペーパーの印刷とポップの作成にいきました。ペーパーはB4でポップはA3で作成しました。ペーパーは最初100用意しようかと思ってたんですが、前日にもらってた助言と、僕の気分を勘案して50に変更したんですが、実は50部でちょうど良い位の分量でした。

お隣さんと挨拶したり、11時ぎりぎりまで設営をしてて、なんとか席に付いたら「見本誌のチェックが終わったら入場開始です」というアナウンスが流れてて、わくわくしながら入場開始を待っていました。オープンのアナウンスと拍手でテンションが上がりながらお客さんが少しずつ入ってきました。もっといっぱい入ってくるのかと思いきや、混乱を防ぐために少しずつの入場だったわけですね。

今回紙の本を100部、電子版(のダウンロードカード)を100準備していきましたが、12時30分頃には紙の本が完全に売り切れてしまいました。その後は電子版のみになったんですが、電子版は紙より少し客足が鈍い感じはありました。

一つ失敗だったなーと思ったのが、見本誌をもうちょっと用意しておけばよかった、というものです。紙の本があった時は見本はいくらでもあったわけですが、電子版販売時点だと見本誌が1部しかなかったので、見本誌を見れずに離れていく人がけっこういました。なので、電子販売の時見本誌は最低2部用意しておくといいかもしれません。

ちなみに電子版が売り切れたのが16時30分頃でした。けっこうな人に「紙が欲しい」って言われて、これ紙の本200部用意してたらもっと早い時間に200部はけてたのかなーという雰囲気でした。まぁそもそも紙の本山積みだった時は、電子版を買っていく人がかなり少なかったですね。

紙の本100、電子版100という数なんですが、前回の委託の経験と会場規模とサークル配置から予測をたてたのが紙100がなんとか売り切れて、電子は売り切れない位かなーという予想でした。でも結果を見るとなんじゃこりゃという位予想を裏切る結果になりました。さすがに12時30分頃に紙が売り切れるのは想定外でした。

もっとも、今回はテーマが強かったとは思っていて、今のJavaScriptってほんとポテンシャル高すぎるので、そこで下駄をはいたところはあるかなと感じました。あとやっぱり強い場所でしたね！

ちょっと困ったのはソロでの参加だったので割と大変でした。体力が極限まで削られた感じです。トイレ休憩を15時頃にとったんですがそのタイミングまで尿意が来なくて助かりましたが、次回は誰かにお手伝いしてもらいたいなーとしみじみ思いました。設営がバタバタしてしまってたので開始前に、挨拶回りとかもできなかったんですよね…。次回はもっと余裕をもって参加したいです。

感想

興味を示して、ブースに立ち止まってくれた人がいっぱいいて嬉しかったですね。本が完売したのも嬉しいです。「Qiita読んでます」って言ってくれる人がいたのがさらに嬉しかったです。Twitterで感想をくださった方もいて、この本を作って本当に良かった、としみじみ思ったものです。リアクションをもらえるのが何よりのご褒美ですね。ほんとありがたいです。

本を書くのはそこそこ大変でしたが、自分自身のレベルアップにはなるという実感はありました。詳しく調べ直したり、まとめなおしたりするのは学習手段としてとても良いです。

技術サークル的には技術書典は純度が高いために、他のイベントに参加するよりもよっぽどありがたいですね。これで年二回開催になったら最高です。あと、これは他の方もつぶやいていたネタなのですが、せっかく技術者が集まるのだからLT広場とかあると面白いなーと思いました。あと、秋葉原というロケーションは最高に利便性が良いのですが、待機列がかなり大変そうだったので、次回はどうなるんだろうとどきどきしています。

告知

ただいま、Modern JavaScript - 東京ラビットハウス - BOOTH（同人誌通販・ダウンロード） にて、電子版をダウンロード販売しております。

早速なのですがインプレスR&Dさまから声を掛けて頂いて、商業出版することが決まりました。6月に出たらいいなーという流れで作業が始まっています。

現時点では次回参加はどうなるかは不明ですが、恐らく技術書典3なのではないでしょうか。秋頃を希望します！書きたいネタはまだ大量にあるので、何かしらアウトプットを続けていきたいです。