2017/4/20 渋谷GMO Yoursにて発表したスライドです。エンジニアさん向けに、Git初心者へ教えるときのポイントや、GitHubで原稿管理してわかったことなどをまとめています。

1. Git初心者に
どう教える？
湊川あい
Webデザイナー/技術書執筆
マンガでわかるGit

2. 湊川あい – マンガと図解で物事をわかりやすく
Webデザイナー
技術書執筆
マンガ家
イラストレーター
書籍 Web連載
・わかばちゃんと学ぶ
Webサイト制作の基本
・わかばちゃんと学ぶ
Ｇｉｔ使い方入門
・マンガでわかるGit
・わかばちゃんが行く
オフィス訪問マンガ

3. CodeIQ MAGAZINEにてWeb連載
→2017年4月21日 書籍化

4. CodeIQ MAGAZINEにて連載
https://codeiq.jp/magazine/2016/10/45631/

5. 目次
（１） Git初心者にどう教える？マンガでわかるGit
（２） GitHubで原稿管理してわかったメリット3つ
👈

6. 社内で誰かしらに
Ｇｉｔを教える機会がある方✋
Ｑ.

7. 新入社員に
Ｗｅｂデザイナーに
人事や企画の方に

8. Gitを教えるとき
どうしてますか？
Ｑ.

9. 口頭で教える
ドキュメントを紹介する
etc…
教え方いろいろ

10. 聞かれるたびに手を止めて回答

11. Ｇｉｔを教えるのは
大変！

12. なぜなら
初心者にとってGit用語は
ソース：過去の私
異国の言葉 に聞こえる

13. たとえば
こんな言葉

14. ステージから
コミットすれば
リポジトリに
記録されるよ。
初心者だった頃の私にはこう聞こえる👉

15. この状態だと👉
＿＿＿＿してから
＿＿＿すれば
＿＿＿＿に
記録される？
?
?
?

16. まず
伝わらない

17. なら
どうするか

18. ステージっていうのは……
逐一説明していく？
コミットっていうのは……
リポジトリっていうのは……
プッシュっていうのは……
で、ステージって
なんでしたっけ？

19. 時間的コスト！

20. 解決策

21. ビジュアルで
脳内イメージを伝える！！
ビジュアル化すると何がいいの？メリット２つ👉

22. 理解が早まる！
参考： Merieb, E. N. & Hoehn, K. (2007). Human Anatomy & Physiology 7th Edition, Pearson International Edition
ビジュアル化すると
見たものを理解するのにかかる時間

23. 覚えやすくなる！
聞いたことの10％
人は 読んだことの20％ を覚えている
見てしたことの80％
参考： Lester, P. M. (2006). Syntactic Theory of Visual Communication.
ビジュアル化すると

24. 参考： Dowse, R. & Ehlers, M. (2005).
Medicine labels incorporating pictograms: Do they influence understanding and adherence?
薬のラベルに関するこんな研究結果
正しく理解された
割合

25. ＋マンガだと
•時間軸
•状況
•登場人物の心理 を表現できる
→私がマンガという手法を選択している理由

26. 例

27. マンガで
「リポジトリ」を
説明してみる

28. テキストの場合
仕様・デザイン・ソースコード・テスト情報・インシデント情報な
ど、システムの開発プロジェクトに関連するデータの一元的な
貯蔵庫を意味する。
一種のデータベースであり、ソフトウェア開発および保守にお
ける各工程の様々な情報を一元管理する。
参考：https://ja.wikipedia.org/wiki/リポジトリ

29. マンガの場合

31. Gitの内部構造に詳しい
メルカリエンジニア ＤＱＮＥＯさんが監修
Ｇｉｔ上級者の脳内イメージが
そのまま絵になったような
素晴らしい図解もあります
初心者～中級者まで
楽しめる内容！

32. 仕事中に発生しやすいシチュエーションで
「こんなときどうする？」という実用編も書籍版には入っている
一例：

34. これ1冊渡しておけば
後輩からの質問が減る
・・・はず！
明日4月21日から
全国の書店・Amazonで発売

35. GitHubで原稿管理して
わかったメリット3つ

36. その１．
GitHub Flowによる効率的な執筆
masterにマージされるのは
監修の方の
目が通ったものだけ✨

37. テーマごとにプルリクを作る

38. レビューしてもらう

39. ヨサソウならマージされる

40. 出版社さんがリアルタイムで
進捗具合を確認できる
その２．
📩 進捗どうですか～？
📩 今こんなかんじです～
というやりとりがゼロに！
今問題になっていることもIssueを見ればOK

41. その３．
レビューアさんを呼んで
チェックしてもらうときはinviteすればＯＫ
・レビュー要項はGitHub内のWikiにまとめておけば
各個人に個別で連絡する必要がなくなる
・過去のプルリクを見ればどういう経緯で
この内容になったかもわかる

42. 原稿を全部書き上げたあとの話
出版社さんがインデザインに流し込んでくれた
初校～念校を
PDFでやり取りすることになるが・・・
課題と展望

45. 差分が見られない) ˘ω˘(

46. （複雑なレイアウトじゃなければ）
書籍執筆支援システム「Re:VIEW」を使うことで、最後まで差分を追える
出典元： http://dev.classmethod.jp/tool/try-review-01/

47. https://github.com/kmuto/review

48. 今回の本は、マンガ・図解が多く
レイアウトが凝った作りになっている
→どっちにしろRe:VIEWで書くことはできなかった
→でも、シンプルなレイアウトの文書を書くときは
Re:VIEWは、かなり便利そう！
課題と展望

49. •Gitは学習コストが高いと言われるけれど
•ビジュアル化されていれば、短時間で理解できる
おわりに
初心者さんにもスッと楽しくＧｉｔを使ってもらって
エンジニアさんをラクにする！

50. Thank you!