【コラボマンガ】怖くない!黒い画面入門【 #シス管系女子 + #マンガでわかるGit 】

公開日: : マンガでわかるGit

こんにちは!絵を描く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もインストールされました。

 

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(エルエス)」と打つと

$ 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でリポジトリを作ったことはあったけど、黒い画面で作ったのは初めてです!
なんだか嬉しい!

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

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のコマンド操作・シェルスクリプトの世界を楽しく解説してくれます!

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

マンガでわかる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連載分)

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

発売中の本

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

謝辞

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

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

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

cspy4xnvmaemd4w

Next

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

The following two tabs change content below.

湊川 あい

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

関連記事

マンガでわかるGit コードIQにて連載

CodeIQ Magazineにて、マンガでわかるGitの連載が始まりました

こんにちは、Webデザイナーの湊川あいです。 最近やっと一段落ついたので、改めて怒濤の3ヶ月をまと

記事を読む

emojigit_catch01

絵文字でわかるGit🍣 マージとリベースの違い・リセットとリバートの違い

こんにちは。絵を描くWebデザイナーの湊川あいです。 絵文字 / Emoji Advent Cale

記事を読む

マンガでわかるGIt第1話

マンガでわかるGit 第一話「Gitってなあに?」

次回以降の流れは?(2016/04/11 0

記事を読む

catch_git_03_800x800

フロー情報をストック情報へ。マンガでわかるGit 連載一覧をTogetterにまとめて分かったこと

絵を描くWebデザイナーの湊川(みなとがわ)あいです。 先日、CodeIQ MAGAZINEさ

記事を読む

Comment

  1. llminatoll より:

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

  2. piro_or より:

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

Message

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

Gitコラボ漫画
【コラボマンガ】怖くない!黒い画面入門【 #シス管系女子 + #マンガでわかるGit 】

こんにちは!絵を描くWebデザイナーの湊川あいです。 普段 マンガでわ

emojigit_catch01
絵文字でわかるGit🍣 マージとリベースの違い・リセットとリバートの違い

こんにちは。絵を描くWebデザイナーの湊川あいです。 絵文字 / Em

phpstudyコラボ画像
PHP勉強会@東京に登壇します 2016.11.30

マンガでわかるWebデザイン・マンガでわかるGitの湊川あいです。

mfmeetup02
マネーフォワードmeetup vol.7に登壇しました (エンジニア×個の力をForward)

絵を描くWebデザイナーの湊川あいです。 今回、マネーフォワードさん

catch_git_03_800x800
フロー情報をストック情報へ。マンガでわかるGit 連載一覧をTogetterにまとめて分かったこと

絵を描くWebデザイナーの湊川(みなとがわ)あいです。 先日、C

→もっと見る

PAGE TOP