こんにちは!絵を描くWebデザイナーの湊川あいです。
普段
マンガでわかるGit
わかばちゃんと学ぶWebサイト制作の基本
わかばちゃんが行くオフィス訪問マンガ
などを執筆しています。

今回、シス管系女子 アドベントカレンダー22日目、「怖くない!黒い画面入門」として担当させていただきます!

登場人物紹介

わかばちゃん

icon_wakaba_normal

みんとちゃん

icon_mint_normal

マンガでわかるGit コラボマンガ1
マンガでわかるGit コラボマンガ2

icon_mint_normal
へぇ~、大学のゼミでGitを使ってるんだ!すごいね!

 

icon_wakaba_normal
Gitをコマンドで操作できれば、よりGitの理解が深まるのかなと思うけど、なんかハードルが高くて( ꒪⌓꒪)

 

icon_mint_normal
やってみれば簡単だよ!
コマンドが打てるといざというときに役立つし、慣れてくるとクリックで操作するツールよりも早く操作できたりするよ。
 

実践

icon_mint_normal
まずはコマンドを打つための画面を表示しよっか。
こういう画面ね。
ss02

Macの場合

Macの黒い画面(CUI)は「ターミナル」と呼ばれているよ。
Launchpadの「その他」からクリックするか、[Control]+[スペース]を同時に押してterminalと検索すると出てくるよ。
ss01

Windowsの場合

Windowsでは、「コマンドプロンプト」と呼ばれているよ。
[スタートボタン]>[すべてのプログラム]>[アクセサリ]>[コマンドプロンプト]で出てくると思うよ。

Gitのインストール

icon_mint_normal
大学で使ってるってことはGitはインストールしてあるんだよね?

 

icon_wakaba_smile
はい、SourceTreeをインストールしたときに同時にGitもインストールされました。
https://codeiq.jp/magazine/2016/05/41303/

 

icon_mint_normal
なら大丈夫だね。

一番簡単なコマンドを使ってみよう

icon_mint_normal
じゃあ、まずは「pwd」って打って、エンターを押してみて。
 

icon_wakaba_normal
えっ、たった3文字でいいんですか?ピーダブリューディー……っと

$ pwd

icon_wakaba_normal
おおっ、これは!?

$ pwd
/Users/wakaba

icon_mint_normal
これが、わかばちゃんが今いるディレクトリだよ。
pwdは「Print Working Directory」の略なの。「今どこにいるか表示して」っていう意味ね。
 

icon_mint_normal
さらに「ls(エルエス)」と打つと
(Windowsコマンドプロンプトの場合は「dir」)

$ ls

ss03

icon_wakaba_smile
おお〜!
icon_mint_normal
今自分がいるディレクトリの直下にあるものが表示されたね。ちなみにlsはlist segmentsの略だよ。

試しに、今表示された中の「Desktop」に移動してみよっか。
「cd」というコマンドに続けて、ディレクトリ名を打つと、階層を移動できるよ。

$ cd Desktop

ディレクトリを作ろう

icon_mint_normal
さて、デスクトップに移動したところで、Gitの練習用のディレクトリ(フォルダ)を作ろっか。
「mkdir」に続けて、希望のディレクトリ名を打ってみて。

$ mkdir lesson

ss04
icon_wakaba_smile
わわ!デスクトップにフォルダができた!
いつもマウスでやってる作業が、少し文字を打つだけでどんどん出来ていく……!すごい!

リポジトリを作ろう

icon_mint_normal
それじゃ、lessonディレクトリに移動して

$ cd lesson

リポジトリを作る。

$ git init

lesson
※「.git」が見当たらない場合は、隠しファイルを表示する設定にすれば見られると思います。
icon_wakaba_smile
やった!リポジトリができた!
SourceTreeでリポジトリを作ったことはあったけど、黒い画面で作ったのは初めてです!
なんだか嬉しい!
https://codeiq.jp/magazine/2016/06/42023/

サンプルファイルを作ってコミットしよう

icon_wakaba_normal
リポジトリを作ったはいいけど、lessonディレクトリにはまだ何もファイルがないや……
よーし、テキストエディタを開いて適当なファイルを作ろうかな
 

icon_mint_normal
おっと!
せっかくならファイルの作成もコマンドでやってみようよ!

$ echo “こんにちは” > sample.txt

ss05

icon_wakaba_normal
わわっ!ファイルが出来て、しかも内容も入力されてるっ!?
 

icon_mint_normal
へへ、便利だよね。
じゃあステージして

$ git add sample.txt

コミットメッセージをつけてコミット。

$ git commit -m “first commit”

ss06
 

コミットの履歴はこう打てば見られるよ。

$ git log

image
 

icon_wakaba_smile
おお〜!!黒い画面、怖くなかった!
っていうかむしろ便利!
 

icon_mint_normal
ちなみに「↑」キーを押せば、最近自分が打ったコマンドが選択できるから、ラクできるよ。
 

icon_wakaba_smile
みんとさんってすごいですね!
さすが社会人!✨
 

icon_mint_normal
あ、ありがと……///
あたしも最初はちんぷんかんぷんだったけどね(笑)
大野先輩に教えてもらったおかげかな!
 

icon_wakaba_smile
おかげさまで黒い画面への苦手意識が減りました!
あっ、みんとさん、サインもらっていいですか!?
(あとでゼミのメンバーに自慢しよ~っと)

シス管系女子について

発売中の書籍

book-1st
まんがでわかるLinux シス管系女子

book-2nd
まんがでわかるLinux シス管系女子2

Piro先生作「マンガでわかるLinux シス管系女子」は、日経BP社さんの月刊情報誌「日経Linux」誌上で好評連載中のマンガです。
新人女子社員のみんとちゃんと大野先輩が、Linuxのコマンド操作・シェルスクリプトの世界を楽しく解説してくれます!

みんとちゃんのツイッターアカウント

https://twitter.com/sysadgirl_mint/status/808597963798757376

マンガでわかるGitについて

catch_git_syosekika.png (411.8 kB)
Web上で連載しているマンガでわかるGitの書籍化が決定しました。
出版社はC&R研究所さんです。
只今、書籍用の原稿を書き貯めています。
書籍版の内容は、ガッツリ増し増しになりますのでご期待ください(頑張ります)!

Gitコマンドのクイズ

Gitコマンドの選択式クイズがCodeIQさんで出題されています。
2〜3分でサクッと答えられますので、ぜひチャレンジしてみてくださいね〜。

おまけの1コママンガ付き Gitクイズ


emoji_q01.png (62.0 kB)


emoji_q02.png (79.5 kB)


emoji_q03.png (72.5 kB)

マンガでわかるGit(Web連載分)

https://codeiq.jp/magazine/2016/05/41303/
https://codeiq.jp/magazine/2016/07/42744/
https://codeiq.jp/magazine/2016/09/44989/
https://codeiq.jp/magazine/2016/10/45609/
https://codeiq.jp/magazine/2016/12/47695/

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

https://codeiq.jp/magazine/2016/10/45631/
https://codeiq.jp/magazine/2016/11/46648/
https://codeiq.jp/magazine/2016/12/47650/

発売中の本

「わかばちゃんと学ぶ Webサイト制作の基本」
わかばちゃんと学ぶ Webサイト制作の基本
8割以上が書籍限定の内容となっております。
HTML5・CSS3のコーディングだけでなく、Webサイトの企画・運用(SEO・アクセス解析)についても解説しています。
アマゾンで冒頭を試し読みできます

謝辞

今回、コラボマンガを描くにあたって、シス管系女子の作者のPiro先生直々に、みんとちゃんの喋り方のチェックをしていただきました。
ご多忙のところご確認いただき、誠にありがとうございました!

Piro先生曰く「みんとちゃんはいつも大野先輩に教わる立場なので、誰かに教えているのは不思議」とのことでした。
言われてみれば、確かにそうですね!
大学生のわかばちゃんから見たみんとちゃんは、きっと憧れの社会人なのだと思います。

Piro先生の、わかりやすく表現するための工夫、登場キャラクターへの愛、学習マンガに対する姿勢……本当に学ぶところが多いです!
今後とも、みんとちゃんたちの活躍を楽しみにしております!

cspy4xnvmaemd4w

Next

シス管系女子 アドベントカレンダー、23日目はKittyAngelさんです!


湊川 あい

湊川あい(みなとがわ あい) 絵を描くWebデザイナー。2014年より「マンガでわかるWebデザイン」をインターネット上に公開していたところ、出版社より声がかかる。 著書「わかばちゃんと学ぶWebサイト制作の基本」 Web連載「マンガでわかるGit」「わかばちゃんが行くオフィス訪問マンガ

8件のコメント

llminatoll · 2016/12/22 2:20 AM

描きました! #シス管系女子 アドベントカレンダー [git] [cui]

piro_or · 2016/12/22 2:42 AM

たいへんな労作ありがとうございます!!!!!

tbpg · 2016/12/22 8:01 AM

つながるせかい

DQNEO · 2016/12/22 1:44 PM

ヨサ

ガノー · 2016/12/22 2:10 PM

可愛いイラスト満載ですね!

Windowsだと
pwdの代わりにcdだったり、
その他補足を入れて欲しいかもです。

    湊川 あい · 2016/12/22 10:05 PM

    コメントありがとうございます!
    Macでキャプチャ撮りながらだったので至らぬ点がありスミマセン;;
    Windowsのコマンドプロンプトだと、lsが動かないということだったので、補足を入れてみました!

    Piro · 2016/12/23 2:41 AM

    WindowsでGitをCLIで使用する場合、普通にGit for WindowsをインストールするとコマンドプロンプトではなくGit Bash上でUNIX由来のコマンド群と組み合わせて使う事になるので、Windows特有の事情についてはあまり考えなくてもよいのではないかと思います。

trashtoy · 2016/12/22 4:56 PM

Windows の場合は Powershell + Posh-git も超オススメ / Mac のコンソールはアンチエイリアス付きの Monaco 派です

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です