TypeScriptについて色々書くよ。忍者！ http://typescript.ninja// Mon, 05 Sep 2016 00:09:11 +0900 Mon, 05 Sep 2016 00:09:11 +0900 Jekyll v3.2.1 <h2 id="web">Web版公開しました</h2> <p>どうも、<a href="https://twitter.com/vvakame">vvakame</a>です。</p> <p>去る8月14日、<a href="http://www.comiket.co.jp/">コミックマーケット90</a>にてRevised TypeScript in Definitelylandという冊子を<a href="http://techbooster.github.io/c90/#typescript">頒布</a>しました。</p> <p>booth.pmでの事前通販予約で買ってくれた人、当日会場に来て買ってくださった人、電子版を購入してくれた人、どうもありがとうございます。 調子こいてラバストを量産したおかげで微妙に赤字でございます。 今からでも電子版・紙版も購入可能ですので、まだの方はなにとぞ…！ 後日、booth.pmにブツが入庫され次第ラバストも通販される予定です。</p> <p>今回も、C87に第1版を頒布したときと同様、その<a href="http://typescript.ninja/typescript-in-definitelyland/">全文を公開</a>します。 GitHubリポジトリは<a href="https://github.com/typescript-ninja/typescript-in-definitelyland/">こちら</a>。</p> Sun, 04 Sep 2016 00:00:00 +0900 http://typescript.ninja//2016/09/04/revised-typescript-in-definitelyland.html http://typescript.ninja//2016/09/04/revised-typescript-in-definitelyland.html <h2 id="section">公開しましたよ</h2> <p>どうも、<a href="https://twitter.com/vvakame">vvakame</a>です。</p> <p>去る12月30日、<a href="http://www.comiket.co.jp/">コミックマーケット87</a>にてTypeScript in Definitelylandという冊子を<a href="http://techbooster.github.io/c87/#typescript">頒布</a>しました。 当日買いに来てくださった方、本当にありがとうございました！見本誌が見られている間、なかなかドキドキするものですね。 前回C86でお昼すぎから初コミケを観戦に行き、今回は初めてサークル入場で売り子(の後ろから在庫出すマン)をしました。 落ち着いて周囲を回ってみると、TechBoosterみたく在庫ガン積みしてる所が見当たらなくて、あってくぶって変なサークルだったの…？？と知りました。 <a href="http://www.unity-bu.com/2014/12/unibook2.html">Unity部さんはバウチャー販売になってて</a>在庫の山を積んでいなかったので、賢いな…！と思いました。</p> <p>頒布前から宣言していた通り、その<a href="http://typescript.ninja/typescript-in-definitelyland/">全文を公開</a>します。 GitHubリポジトリは<a href="https://github.com/typescript-ninja/typescript-in-definitelyland/">こちら</a>。 本書はTypeScriptリファレンス（<a href="http://www.amazon.co.jp/gp/product/484433588X?tag=damenako-22">Amazon</a>、<a href="http://tatsu-zine.com/books/typescript-reference">達人出版会</a>）の既読、未読に関わらず読めるようになっています。 本書ではJavaScriptの細かい仕様については解説していません。もし、JavaScript自体の仕様について、TypeScriptと共に学びたい場合はTypeScriptリファレンスの購入をお勧めします。 TypeScriptリファレンスはTypeScript 1.0対応の書籍です。 1.0から今までの差分は、<a href="http://qiita.com/vvakame/items/5e53c392867ebc604267">TypeScript 1.1.0 変更点</a>と<a href="http://qiita.com/vvakame/items/0b5060de5566f210479b">TypeScript 1.3.0 変更点</a>を参照してください。</p> <h2 id="section-1">本書を支える技術</h2> <p>折角なので、本書を支える技術について言及しておきます。 技術書をこれから執筆したい、興味がある、という人に役立つかもしれません。 なお、TechBoosterの中でプロジェクト構成改善ガチ勢は多分僕だけなので僕のプロジェクトが一番研究が進んでいると思います。</p> <p>最近だと<a href="http://azu.github.io/promises-book/">Promise本</a>や<a href="https://github.com/akinomurasame/learning-fuzoku-sample">Fuzoku実践入門 環境サンプルファイル</a>あたりが技術的に頑張ってる技術書だと思うので、そちらと見比べてみても楽しいかもしれません。</p> <h3 id="section-2">ツールの選定</h3> <ul> <li><a href="https://github.com/kmuto/review">Re:VIEW</a> <ul> <li>日本の出版業界を支えるプロが利用・メンテナンスしている <ul> <li><a href="https://github.com/kmuto">kmuto</a>さんは<a href="http://www.topstudio.co.jp/">トップスタジオ</a>の人なので商業（紙を含む）に持ってきたい時相談しやすそう（たぶん）</li> <li><a href="http://tatsu-zine.com/">達人出版会</a>の<a href="https://github.com/takahashim">takahashim</a>さん</li> </ul> </li> <li>WordなどのGitHub上でdiffが取れなかったり手で変更をmergeできない書式を使うのは嫌だ <ul> <li>よーするにテキストファイルがいい</li> </ul> </li> <li>和文組版についてのdomain specificな事情も考慮されている <ul> <li>エッジケースが色々なところにあって、何も考えずに小賢しいパッチを当てると後で「それにはこういう悲しい事情があってね…」という話を伺って涙腺が緩んだりする</li> </ul> </li> <li>書籍固有の拡張を行うのが比較的容易 <ul> <li>競合に<a href="http://sphinx-users.jp/">Sphinx</a>、<a href="http://sky-y.github.io/site-pandoc-jp/users-guide/">Pandoc</a>、<a href="http://www.methods.co.nz/asciidoc/">asciidoc</a>などがある。 <ul> <li>asciidocは米O’Reillyが<a href="https://atlas.oreilly.com/">atlas</a>という書籍執筆プラットフォームに採用</li> </ul> </li> <li>拡張の容易さという意味では、Markupな言語が強い。Markdown類似のものは新規文法導入のコストが高い(記法から追加しないといけない)</li> <li>記述の容易さで張り合うには、テキストエディタによる気持ちのよいバックアップが必要 <ul> <li>Markdown系に一歩劣るというのは事実…</li> </ul> </li> </ul> </li> <li>セットアップがダルいのが玉に瑕 <ul> <li>Ruby処理系とlatex(PDF出力する場合)など。</li> <li><a href="https://github.com/TechBooster/FirstStepReVIEW">はじめてのRe:VIEW</a>あたりを参考にするとよい</li> <li>latexで出したいわけじゃなくてPDFが得られればそれでいいので、<a href="http://www.antenna.co.jp/AHF/">AH Formatter</a>（有料）または<a href="http://vivliostyle.co.jp/">vivliostyle</a>さんのプロダクトに期待するのも手 <ul> <li>atlasはAF Formatterを採用しているそうな（CSS組版だ！</li> </ul> </li> </ul> </li> <li><a href="https://vvakame.github.io/review.js/">review.js</a>作ってるけどやりたい事が多すぎてリソースが回ってない状態…</li> </ul> </li> <li><a href="https://github.com/">GitHub</a> <ul> <li>言わずと知れた… これを使わないとかありえない <ul> <li>Issue管理とpull requestがあればまぁなんでも良い</li> <li><a href="https://help.github.com/articles/creating-project-pages-manually/">gh-pages</a>が大変便利</li> </ul> </li> <li>gitが使えない人と組んではいけない（共著者、編集者、などなど） <ul> <li>組む場合はパッと想像した負担の5倍の苦労(または諦め)を背負う覚悟が必要</li> <li>GitHub自体については能力の高い技術者でも仕事環境や興味の方向次第ではびっくりするくらい慣れていない場合も結構あるので随時色々教えてあげよう</li> </ul> </li> </ul> </li> <li><a href="https://atom.io/">Atom</a> <ul> <li>JavaScriptで拡張可能なエディタ ということで使っている</li> <li>Re:VIEWに限ればSublime Text 2と<a href="http://y-anz-m.blogspot.jp/2013/08/sublime-text-2-review.html">yanzm製プラグイン</a>が一番いいと思う</li> <li><a href="https://atom.io/packages/language-review">language-review</a>を作っているがこれまた時間が足りない</li> </ul> </li> <li><a href="https://github.com/vvakame/prh">prh</a> <ul> <li>今回の原稿後に作り始めたので実戦投入はまだ</li> <li>校正を簡単な単語の置き換えレベルで自動化する <ul> <li><a href="https://github.com/vvakame/prh/blob/master/misc/techbooster.yml">てくぶ用設定</a></li> <li>誤検出を抑える代わりに検出漏れが発生しやすいかも</li> </ul> </li> <li>azuパイセンが<a href="https://github.com/azu/textlint">textlint</a>というツールを作り始めたっぽい <ul> <li>textlintのほうが筋は良さそうな気がする</li> </ul> </li> </ul> </li> <li><a href="http://bundler.io/">bundler</a> <a href="https://github.com/typescript-ninja/typescript-in-definitelyland/blob/master/Gemfile">例</a> <ul> <li>Re:VIEWのどのバージョンを使ってコンパイルするか表すため</li> <li>最新のリリースを使いたい場合やmaster/HEADが使いたい場合などがあるため</li> </ul> </li> <li><a href="http://gruntjs.com/">grunt</a> <a href="https://github.com/typescript-ninja/typescript-in-definitelyland/blob/dd6b0f18655397782e61ec1e8faff13844e83199/Gruntfile.js#L200">例</a> <ul> <li>使い慣れているタスクランナーならなんでもよいと思う</li> <li>わかめはRuby慣れてないのとTypeScriptバトラーなのでgrunt <ul> <li>gulpは使ったことない</li> </ul> </li> <li>pdf, epub, html の生成用タスクを準備しておく</li> <li>本書の場合、サンプルコードのビルドチェックと原稿への埋め込み（review-preproc）なども行う</li> </ul> </li> <li><a href="https://circleci.com/">Circle CI</a> <ul> <li>これから設定する… masterにpushがあるとgh-pagesを自動更新するやつ</li> <li>CIサービスの中で最近一番流行ってる奴</li> <li>Travis CIよりUIがこなれていて使いやすい</li> <li>テスト実行時にインスタンスが割り当てられるのが早い</li> <li>本当を言うと、好きなDockerimageをベースにビルドできるCIサービスがあればそれを使いたい <ul> <li><a href="https://registry.hub.docker.com/u/vvakame/review/">Re:VIEW用イメージ</a>を作ってある(使ってないけど)</li> <li>drone.ioを自分のサーバで運用すればそれが出来るんだけど自前サーバはめんどくさい</li> <li>Circle CIはビルドフェーズを細かく管理している(のでわかりやすいUIが提供できる)ので、すぐにはbaseのDocker image指定対応とかは入らなさそうな気がする</li> </ul> </li> </ul> </li> <li><a href="https://tcb.mowa-net.jp/griflet/">griflet</a> <ul> <li><a href="https://twitter.com/amedama">amedama</a>さんがやってるRe:VIEW専用謎CIサービスっぽいもの <ul> <li>本人による<a href="http://www.slideshare.net/mowamowa3/201412-42460693">スライド</a></li> </ul> </li> <li>多分、誰でも使えるわけではないクローズドなサービス（まだ）</li> <li>本書のPDF, epub入手先はgrifletを使っています</li> <li>GitHubへのpushを検知して自動ビルドしておいてくれます 良い子</li> </ul> </li> <li><a href="https://twitter.com/mhidaka">mhidaka</a> <ul> <li>非常にハイエンドかつ多機能なマネージメントが行なわれる</li> <li>自動で稼働するためこちらの要望を伝えておくだけでいい感じになる</li> <li>編集・構成、入稿、表紙の絵・デザインの依頼、コミケ当日の搬入の手配までやっておいてくれる</li> <li>非売品</li> </ul> </li> <li><a href="https://twitter.com/muo_jp">muo_jp</a> <ul> <li>高性能レビュワー</li> <li>非常に有用なアドバイスをくれる</li> <li>〆切なんてなんのその</li> <li>非売品</li> </ul> </li> </ul> <h3 id="section-3">ワークフロー</h3> <p>書籍執筆時のワークフローをまとめておきます。 書籍執筆自体についての手引は<a href="http://qiita.com/vvakame/items/d657baf26cf83ac98bd0">こちら</a>。</p> <h4 id="section-4">企画</h4> <ul> <li>本を書きたいなーという気持ちにする</li> <li>対象読者をざっくり決める</li> <li>目次をざっくり書く <ul> <li>今回は深さ2で設計</li> <li>これから書く予定の所はTODOとかTBDとか書いてしまい、目次が出力できるところまでさくさく作業する</li> </ul> </li> <li>目標ページ数をざっくり決め（られ）てしまう <ul> <li>mhidakaが96Pを1ヶ月で書いてね☆ とか言ってきた時はこいつ頭おかしいな！？と思った（104P書いた）</li> </ul> </li> </ul> <h4 id="section-5">書く</h4> <ul> <li>プロジェクト構成はどっかからコピーしてくる <ul> <li>大抵一個前の著書から</li> <li>review-init とかでもいいと思う</li> </ul> </li> <li>とりあえずまずは分量をたくさん書く <ul> <li>調査過程で役に立ったURLなどはコメントとしてしっかり残す</li> <li>案外、後から再調査する必要が生じる事があるもの</li> <li>自分の文章のソースがどれか追跡できるようにしておくのは重要</li> </ul> </li> <li>構造の変更、文章の練り上げなどは後からでも出来る！ <ul> <li>特に慣れないうちはレビュアーに依るところが大きいのでまずレビューしてもらえる所まで頑張って持ってく</li> <li>節A, B, Cの間の依存関係は最初に整理しておく <ul> <li>変数と関数、どちらを先に教えるか で文章の内容がガラっと変わる</li> <li>この依存関係を変える場合、大幅な書き直しが発生するので気をつける</li> </ul> </li> </ul> </li> </ul> <h4 id="section-6">レビュー取り込み</h4> <ul> <li>レビュワーからの修正はpull request経由で受け取る <a href="https://github.com/typescript-ninja/typescript-in-definitelyland/pull/7/files">例</a> <ul> <li>typoの修正は直接、構成変更についてはコメントとして書く</li> <li>コメントの書式はある程度決めておく <ul> <li><code class="highlighter-rouge">#@# REVIEW 名前</code> など あとから検索しやすく</li> <li>対応したものは <code class="highlighter-rouge">#@# OK REVIEW 名前</code> などに改変する 定期的に消す</li> <li>修正後のレビュワーによる再確認は基本行わない <ul> <li>そんな時間があるならもう一回通しで読んで貰ったほうがよい</li> </ul> </li> </ul> </li> </ul> </li> <li>個人毎にレビューの能力に大幅な違いがあるので気をつける <ul> <li>誤字の発見が上手い人 <ul> <li>わかめは誤字は脳内で自動補正がかかるらしくてあまり気がつかない…</li> </ul> </li> <li>わかりやすい言い回しに変更するのが上手い人</li> <li>わかりやすい構成に組み替えるのが上手い人</li> <li>特定のパターンの検知・修正が得意な人</li> </ul> </li> <li>レビュワーには対象読者に近い人を必ず入れる <ul> <li>常識だと思っていた範囲が実は常識じゃなかった！みたいなことが結構多い</li> <li>その人に教える過程でどういう書き方をするのが良いか整理される場合も多い <ul> <li>人によって理解の方法は違うのでその人に特化しないように留意する</li> </ul> </li> </ul> </li> </ul> <h4 id="section-7">校正</h4> <ul> <li>このフェーズに入ったら基本的には文章を直接触らない <ul> <li>著者がpull requestを出す側に回る</li> </ul> </li> <li>編集者の修正は直接masterにpushする場合が多い <a href="https://github.com/typescript-ninja/typescript-in-definitelyland/commit/9335e77a8c3f6214b97a61702a2ea0e5c44194a0">例</a> <ul> <li>変更点が気になる場合はコミットログを追って確認する <ul> <li>作業速度的に問題がないのであればpull request運用でも良いだろう</li> </ul> </li> </ul> </li> <li>商業の場合、編集者の言うことは基本的に鵜呑みにする <ul> <li>相手は文章のプロなので</li> <li>こっちは技術のプロなので内容の正確さの担保が最低限の責務</li> </ul> </li> </ul> <h3 id="section-8">プロジェクト構成</h3> <ul> <li>articles/ <ul> <li>原稿を置く</li> <li>昔はプロジェクトルートに置いてたけど、プロジェクトルートにあるファイルが多くなりすぎたのと、1段掘っても何も困らなかったので</li> </ul> </li> <li>articles/images/ <ul> <li>章単位でフォルダを切る Re:VIEW 1.3.0か1.4.0くらいからこれが可能 <a href="https://github.com/kmuto/review/wiki/ImagePath">このへん</a></li> </ul> </li> <li>code/ <ul> <li>サンプルコードは全部ここに置く</li> <li>章・節 程度のレベルでフォルダ分けする</li> <li>原稿中のソースコードは全部<a href="https://github.com/typescript-ninja/typescript-in-definitelyland/blob/dd6b0f18655397782e61ec1e8faff13844e83199/articles/types-basic.re#L32">#@#mapfile</a>でサンプルコードから展開する <ul> <li>ビルドが通るコードが原稿に載っていることを保証しやすくなる</li> <li>コンパイラやライブラリのアップデート後の自動チェックが行い易くなる</li> <li>Javaのような重要ではないコードが多く入る言語の時どうするかはまだ知見がない <ul> <li>maprangeを使えるようにするべき # でコメントが始まる言語じゃないといけないのが問題</li> <li>dedentも適当に処理してほしい</li> </ul> </li> <li>TypeScriptリファレンスではmapfileの他にtslistという独自記法を導入していた <ul> <li>独自記法による飾り枠の自動判別とかも考慮していたが諸般の事情で使われなかった</li> <li>独自記法によるTypeScriptコンパイラの制御が慣れないとわかりにくい <ul> <li>今回はサンプルコードのファイル名のルールで制御 <a href="https://github.com/typescript-ninja/typescript-in-definitelyland/blob/dd6b0f18655397782e61ec1e8faff13844e83199/Gruntfile.js#L5">このへん</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> <h3 id="section-9">未解決の問題</h3> <ul> <li>金銭に変換する方法 <ul> <li>KDP, 達人出版会, booth, gumroadなど？</li> <li>個人的には 雑誌記事 &gt; 紙の本 &gt; 電子書籍 で儲かるかな？という気持ち</li> <li>自分が頑張らなくても人様が既にレールを引いてくれてる金銭変換システムに乗るのほんと楽</li> <li>ユーザの時の便利さとはわりと両立しない <ul> <li>Googleがインデックスしてくれる形式＝金にならない</li> </ul> </li> </ul> </li> <li>Webサイトで公開するためのノウハウ <ul> <li>Re:VIEWは出版物の生成に主眼を置いているのでWebサイトで公開する形式への変換が弱い</li> <li>epubとWebサイト用HTML生成が微妙に切り離しにくい <ul> <li>epubが内部的にHTMLビルダに依存しているため</li> <li>今回はgruntタスク中でcssとlayout.html.erbの使用ON/OFFをファイルコピーで切り抜けている</li> </ul> </li> <li>文章間のリンク生成がめんどくさそう</li> </ul> </li> <li>epub内でのソースコードのリフローの制御 <ul> <li>今回全然調整してないです</li> <li>検証環境、そもそも何にすればいいかわからんな？</li> </ul> </li> </ul> Thu, 01 Jan 2015 00:00:00 +0900 http://typescript.ninja//2015/01/01/typescript-in-definitelyland.html http://typescript.ninja//2015/01/01/typescript-in-definitelyland.html