Git初心者にどう教える？

湊川あいWebデザイナー/技術書執筆

マンガでわかるGit

湊川あい –マンガと図解で物事をわかりやすく

Webデザイナー

技術書執筆

マンガ家

イラストレーター

書籍 Web連載・わかばちゃんと学ぶ

Webサイト制作の基本

・わかばちゃんと学ぶＧｉｔ使い方入門

・マンガでわかるGit

・わかばちゃんが行くオフィス訪問マンガ

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

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

目次

（１） Git初心者にどう教える？マンガでわかるGit

（２） GitHubで原稿管理してわかったメリット3つ

👈

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

Ｑ.

新入社員に

Ｗｅｂデザイナーに

人事や企画の方に

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

Ｑ.

口頭で教えるドキュメントを紹介する

etc…

教え方いろいろ

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

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

なぜなら

初心者にとってGit用語は

ソース：過去の私

異国の言葉 に聞こえる

たとえばこんな言葉

ステージからコミットすればリポジトリに記録されるよ。

初心者だった頃の私にはこう聞こえる👉

この状態だと👉

＿＿＿＿してから＿＿＿すれば＿＿＿＿に記録される？

???

まず伝わらない

ならどうするか

ステージっていうのは……

逐一説明していく？

コミットっていうのは……

リポジトリっていうのは……

プッシュっていうのは……

で、ステージってなんでしたっけ？

時間的コスト！

解決策

ビジュアルで脳内イメージを伝える！！

ビジュアル化すると何がいいの？メリット２つ👉

理解が早まる！

参考：Merieb, E. N. & Hoehn, K. (2007). Human Anatomy & Physiology 7th Edition, Pearson International Edition

ビジュアル化すると

見たものを理解するのにかかる時間

覚えやすくなる！

聞いたことの10％

人は 読んだことの20％ を覚えている

見てしたことの80％

参考： Lester, P. M. (2006). Syntactic Theory of Visual Communication.

ビジュアル化すると

参考： Dowse, R. & Ehlers, M. (2005).

Medicine labels incorporating pictograms: Do they influence understanding and adherence?

薬のラベルに関するこんな研究結果

正しく理解された割合

＋マンガだと

•時間軸

•状況

•登場人物の心理 を表現できる

→私がマンガという手法を選択している理由

例

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

テキストの場合

仕様・デザイン・ソースコード・テスト情報・インシデント情報など、システムの開発プロジェクトに関連するデータの一元的な貯蔵庫を意味する。

一種のデータベースであり、ソフトウェア開発および保守における各工程の様々な情報を一元管理する。

参考：https://ja.wikipedia.org/wiki/リポジトリ

マンガの場合

Gitの内部構造に詳しいメルカリエンジニアＤＱＮＥＯさんが監修

Ｇｉｔ上級者の脳内イメージがそのまま絵になったような素晴らしい図解もあります

初心者～中級者まで

楽しめる内容！

仕事中に発生しやすいシチュエーションで

「こんなときどうする？」という実用編も書籍版には入っている

一例：

これ1冊渡しておけば後輩からの質問が減る・・・はず！

明日4月21日から全国の書店・Amazonで発売

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

その１．

GitHub Flowによる効率的な執筆

masterにマージされるのは

監修の方の

目が通ったものだけ✨

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

レビューしてもらう

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

出版社さんがリアルタイムで進捗具合を確認できる

その２．

📩 進捗どうですか～？

📩 今こんなかんじです～

というやりとりがゼロに！

今問題になっていることもIssueを見ればOK

その３．

レビューアさんを呼んで

チェックしてもらうときはinviteすればＯＫ

・レビュー要項はGitHub内のWikiにまとめておけば

各個人に個別で連絡する必要がなくなる

・過去のプルリクを見ればどういう経緯で

この内容になったかもわかる

原稿を全部書き上げたあとの話

出版社さんがインデザインに流し込んでくれた

初校～念校を

PDFでやり取りすることになるが・・・

課題と展望

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

（複雑なレイアウトじゃなければ）

書籍執筆支援システム「Re:VIEW」を使うことで、最後まで差分を追える出典元： http://dev.classmethod.jp/tool/try-review-01/

https://github.com/kmuto/review

今回の本は、マンガ・図解が多くレイアウトが凝った作りになっている→どっちにしろRe:VIEWで書くことはできなかった

→でも、シンプルなレイアウトの文書を書くときはRe:VIEWは、かなり便利そう！

課題と展望

•Gitは学習コストが高いと言われるけれど

•ビジュアル化されていれば、短時間で理解できる

おわりに

初心者さんにもスッと楽しくＧｉｔを使ってもらってエンジニアさんをラクにする！

Thank you!