![見出し画像](https://assets.st-note.com/production/uploads/images/83631105/rectangle_large_type_2_8953c740b6a258400cc76bdfcc757f83.jpeg?width=1200)
1年以上にわたる初めての技術書の商業執筆活動を終えての感想と今後挑戦したいという方へ -TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 -
2022年7月25日より「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」が技術評論社より発売されました。3人の著者(@tejitak, @Kourin1996, @tamanyan55)、編集者(@nodawep)、レビュワーの方々が1年以上にわたり執筆に携わった本で紆余曲折しながらもゴールした技術書となっています。本を手にとっていただいた皆様のおかげで非常に好調な滑り出しとなり、早くも増刷が決定となりました。Amazonでの評価もよくソフトウェア開発・言語のカテゴリーで1位を取ることができました。
私自身初めての商業執筆という事で勝手が分からないながらも最後までやり遂げたので、今後商業執筆に挑戦する方に向けて参考になるかと思い筆を執った次第です。
![](https://assets.st-note.com/img/1659176177308-v0QqIRhb0G.png?width=1200)
誰に向けた本なのか?
モダンなWebフロントエンドに興味のある方
React/Next.jsを初めて使う方,本番に導入したい方
React/Next.jsとTypeScriptを組み合わせた開発スタイルに興味のある方
TypeScriptを中心に据えたWebフロントエンド開発に興味のある方
Atomic DesignやStorybookなど,コンポーネント指向で実務に沿った開発に興味のある方
フロントエンドは開発経験はあるがTypeScript, React/Next.jsで実践的なアプリケーション開発をやった事がないへオススメの本だと思います。
技術評論社へ企画持ち込み
この企画は2020年にバンコクでのとある開発案件で著者の@tejitak, @Kourin1996と共にNext.jsを活用した時まで遡ります。初のNext.jsの活用でしたが結果的に開発体験が良く、良いアプリケーションを開発できた経験から、皆にこれを共有できないかという事で @tejitak から2021年の2月頃に技術評論社 @nodawep さんに企画を持ち込みました。最初はWeb連載ができればという話でしたがで、Next.jsの本がまだ市場に多く出ていない事もあり @nodawep さんの一声でいきなり商業執筆はどうかという話になりました。
本のタイトル及び目次決め
最初に本のタイトル、大まか目次、担当範囲の決めを行いました。基本はGoogle Meetで各自考えてきた章の説明をGoogle Docsを用いて行い、情報共有をしていきました。@nodawep さんにもレビュー頂きながら大凡一ヶ月程度で大枠は決まりました。今見返すと10月発売 (2021年)という文字が書かれており、随分とずれ込んだなという印象です。
私の担当は5章から7章前半の具体的なサンプルアプリのコードの準備及び執筆で最もウェイトが大きい部分となりましたが、良い経験だと思い自ら買って出ました。
![](https://assets.st-note.com/img/1659022003009-K3E1q727Q7.png?width=1200)
![](https://assets.st-note.com/img/1659022460302-eI4HDAPMvd.png?width=1200)
Githubでのプロジェクト&原稿管理
プロジェクト&原稿管理はGithub上で行いました。普段使い慣れている事もあり違和感なく作業できたと思います。編集者の @nodawep さんを中心にプロジェクト管理を行い、各々が気がついた点などはイシューにあげていきました。特にレビュワーの方が入って以降は内容の修正が主な作業だったため、Githubはより活発に使用され、数多くイシューが上げられていく事となりました。実はレビュワーの方には昨年(2021年)の11月-12月に入って頂きましたが、実際の発売は今年(2022年)の7月で半年以上経っていた事となります。この期間の間色々な事があったわけですが、、、最終的にはプルリクエストの数は164個、イシューの数は139個がGithubに登録されていました。
![](https://assets.st-note.com/img/1659092685979-OgNz6GlS4q.png?width=1200)
また執筆に対してはtextlintも非常に役に立ちました。これはJavaScriptで書かれた校正ツールで用語と表現の統一を行う上で素晴らしいツールとなっています。皆様も執筆の際は是非使用して下さい。
サンプルアプリの開発
本で実際に準備するサンプルアプリの元ネタですが、以下のNext.js Commerceを利用する事としました。理由としては検索、一覧、詳細、投稿、ログイン等アプリケーション開発における基本となる要素が詰め込まれており一通り実装する事で実力がつくと良い題材だと思ったからです。ソースコードなどは流用せずに、機能や一部のデザインからインスパイアする形でサンプルアプリの開発を行いました。
サンプルアプリの実装に入る前にAtomic Designにおけるコンポーネントの分類を本書で定めた定義に基づいて行い、デザインから要素(Atoms/Molecules/Organisms等)分割していきました。これはデザインファイルから実際にアプリケーションの開発するまでの流れに沿った形になります。
![](https://assets.st-note.com/img/1659023813118-refxepgilV.png?width=1200)
通常のアプリケーション開発はページ駆動で開発していく事が多いと思いますが、本書は最初Storybookのみを用いてコードを書き先に小さなコンポーネントから開発します。Storybookで独立してコンポーネントを表示できる = 疎結合になっているという事でコンポーネントの再利用性も高まり非常にオススメできる設計手法です。
![](https://assets.st-note.com/img/1659091861928-OcedM9Vfwc.png?width=1200)
このアプリケーションの実装を一通り終えるまでに3,4ヶ月程度は費やしたと思います。この期間私はほぼ数行しか本文を書いてなかったので、焦りとともに前準備にかなり苦労したのを覚えています。
ソースコードの説明は予想以上に難しい
私の担当は本文にサンプルアプリのソースコードの解説書くことでしたが、ソースコードの説明を書くことは意外と。数十分程度あーでもないこーでもないと一切書き進める事ができなかったのは珍しくなかったと思います。量が多かった事も原因でしたが、ソースコードの説明を書いている時間がなにより苦痛で大変だった記憶があります。
一つ学びがあるとすれば、無理に本文で全て解説を行わないでソースコードコメントを丁寧に書く事で補足するという手法です。これを覚えてからは本文に書くことに拘らず筆が進んだと思います。
次々と訪れるバージョンアップと使用ライブラリの開発中止
この執筆を通して何が一番辛かったというと「Next.js/Reactのバージョンアップの追従」と「使用予定だったライブラリの開発中止」の2つが上げられます。
執筆開始時点でのNext.jsのバージョンは10.1で、ここに至るまで大きなリリースが6回行われました。この間に様々なアップデートが入ってくる事で我々の本は何度も書き直しを余儀なくされました。例えば、執筆当初はJavaScriptのトランスコンパイラにBabelがメインで使用されていましたが、Next.js 12からはSWCが使用されるようになり周辺のJestやstyled-componentsなど当時実験的にSWCのサポートがあっただけでした。そのような中どこまで本に盛り込むべきかというなど議論が行われる事になりましたが、このような事を考えている間にNext.js 12.1からはJestやstyled-componentsなどが正式にSWCのサポートがされる事となり右往左往しながら何度も書き換えを余儀なくされたわけです。古いバージョンの解説でもある程度互換性はありますが、できるだけ最新のものを読者に届けたいと思いから締め切りまで取り組みました。
使用するはずだったライブラリの開発中止も執筆に影響を受けました。当時styled-componentsを拡張したStyled SystemというProps経由でスタイルを調整するライブラリを使用していましたが、メンテされず開発中止になっている事に途中で気が付きました。似たようなライブラリはまだどれも未成熟で、かつ大きく現状のコードを変更する事になりどのように対応するか検討する事となりました。結果的に現状のインターフェースを極力変えずに自前の実装をするという結論になりましたが、やはり多くのユーザーや開発者がついていないライブラリを主軸として使用するのはソフトウェアの寿命を考えると使用を控えた方がよいのだなと再確認しました。
執筆のモチベーション維持
執筆は何よりモチベーション維持が大事になります。終わりが遠く見える中どのように継続したかいうと、@tejitak からの提案で毎週週末に2,3時間程度リモートでもくもく会を行っていました。半強制的に書く時間を設けるというのは何より効果的だというのが分かりますね。下はコミットの履歴ですが、比較的止まる事なく続けられたと思います。
![](https://assets.st-note.com/img/1659103375184-jizsB1wyHv.png?width=1200)
今後技術書の商業執筆する方へ
最後に技術書の商業執筆する方へ。今回私は企画立案者の @tejitak が技術評論社の @nodawep さんと「Vue.js入門: 基礎から実践アプリケーション開発まで」の件で繋がりがあった事、Next.jsの本がまだ市場に出回っていないかつ注目されたテーマという条件の揃う事で執筆までだどりつきました。今後人気になり得るテーマで、まだ商業執筆がされていないものはチャンスがあります。その機会はあったら是非知人とともに出版社に持ち込んでみて下さい。複数人で書いたほうが互いにレビューできますし、なにより発売後はお祭り気分を味わえるのでオススメです!
技術書の商業執筆は簡単なものではありません。ソフトウェアのように不完全な状態でも世の中に出してから修正すれば良いという常識も通用しません。しかし予想以上の反響と身の回りの方に手にとっていただいたという知らせを数多く報告を受けて、私はまた機会があれば挑戦してみたいと思うようになりました(しばらくは休みたいですがw)。編集者の @nodawep さんと話していて印象に残った事として「我々は技術者だが物書きを生業にしている者ではない」という話で、実際私の書いた部分を @nodawep さんに丸ごと直された経験も多々あります。こんなに編集者の方もコミットしてくれるのかという事に驚きと嬉しさの両方を感じましたが、我々は物書きのスペシャリストではないので、文の書き方は詳しい編集者のサポートを得る事ができるのは非常に心強いのではないでしょうか?
これが今回経験した技術書の商業執筆の話の一部になりますが、みなさんの参考になれば幸いです。
本を購入した方へ
ご購入ありがとうございます。サポートページはこちらになります。正誤表なども記載されていますので、よろしければご覧下さい。
よろしければサポートお願いします!今後の執筆の励みになります。