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

公開日: : 最終更新日:2017/02/10 イラスト, マンガ, マンガでわかる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(エルエス)」と打つと
(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でリポジトリを作ったことはあったけど、黒い画面で作ったのは初めてです!
なんだか嬉しい!

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

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 連載一覧をTogetterにまとめて分かったこと

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

記事を読む

Windows版SourceTreeがVer 2.1系列になって、ローカルリポジトリの作り方がわからなくなった方へ

ローカルリポジトリの作り方がわからない問題 「わかばちゃんと学ぶGit使い方入門」の読者様より、

記事を読む

「マンガじゃなくてもGitぐらいわかるでしょ」と言われたことがあります

わかばちゃんと学ぶGit使い方入門 Web連載から始まった「マンガでわかるGit」の書籍版がついに

記事を読む

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

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

記事を読む

マンガでわかるGitが書籍化!2017年4月21日 書店にて発売予定

マンガでわかるGitが書籍になります Web連載中の「マンガでわかるGit」の書籍用原稿が完成いた

記事を読む

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

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

記事を読む

「esa 3歳 お誕生日おめでとう」 – あるWebサービスが3歳を迎えた日に立ち会ってきた

「esa 3歳 お誕生日おめでとう」 プレートにはそう書いてあった。 「esa社 3周年 おめで

記事を読む

GitHub上でプルリクを出す方法:「Compare & pull request」のボタンが見当たらない場合

GitHubで「Compare & pull request」のボタンが見当たらない 「わ

記事を読む

マンガでわかるGIt第1話

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

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

記事を読む

マンガでわかる確定申告 第1話 源泉徴収ってなあに?

第1話 源泉徴収ってなあに? 書籍「わかばちゃんと学ぶWebサイト制作の基本」、Web連載「マンガ

記事を読む

Comment

  1. llminatoll より:

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

  2. piro_or より:

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

  3. tbpg より:

    つながるせかい

  4. DQNEO より:

    ヨサ

  5. ガノー より:

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

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

    • 湊川 あい より:

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

    • Piro より:

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

  6. trashtoy より:

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

Message

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

DIST.16に登壇しました【わかばちゃんと学ぶ フリーランスのための情報整理術】 #dist16

こんにちは! フリーランスWebデザイナー/技術書執筆/マンガ家/

Windows版SourceTreeがVer 2.1系列になって、ローカルリポジトリの作り方がわからなくなった方へ

ローカルリポジトリの作り方がわからない問題 「わかばちゃんと学ぶGi

正式公開されたGoogleの「Cloud Source Repositories」を使ってみた

Google製Gitリポジトリのクラウドサービスが正式公開 Go

GitHub上でプルリクを出す方法:「Compare & pull request」のボタンが見当たらない場合

GitHubで「Compare & pull request」

「esa 3歳 お誕生日おめでとう」 – あるWebサービスが3歳を迎えた日に立ち会ってきた

「esa 3歳 お誕生日おめでとう」 プレートにはそう書いてあった。

→もっと見る

PAGE TOP