10/10(Thu)

今日の生放送

かいせつ先輩

エンジニアだけでなく、ITに携わる多くの人が使っているツールとして、Gitというものがあるよね。便利だといわれているけど、使ったことがない人にとっては、何ができるのかよくわからないツールかもしれないね。

 

そこでオススメしたいのが、Git超入門 -Gitってなあに?+あなたのパソコンでGitを使えるようにしよう-

 

本授業では、Gitの概要や導入手順について学べるよ。そもそもGitが何なのかわからない、どうやってインストールすれば良いのかわからないという人の参考になるから、チェックしてみてね。

 

「Git」とは?

 

 

猫田くん

Gitって何?どんなことができるものなの?

 

かいせつ先輩

Gitとは、バージョン管理ツールの名前だよ。プログラムのソースコードなど、コンピュータ上のファイルに発生した変更を記録して、記録履歴を管理してくれるんだ。

 

ファイルの内容を何度も変更して保存し直したとしても、記録が遡れるからいつでも過去の記録を閲覧したり、状態を再現したりできるのが大きな特徴だね。個人での作業はもちろん、チームでの共同作業に使われることも多いよ。

 

かいせつくん:ここからは、授業で先生が解説してくれた、Gitの概要や導入手順を学んでいくよ!Gitを使えばどんなメリットを得られるか理解したうえで、自分のPCにインストールしてみよう!

 

先生のご紹介

湊川あい

湊川あい (みなとがわ あい)

フリーランス/Webデザイナー・マンガ家・イラストレーター

1989年生まれ。絵を描くWebデザイナー。高等学校教諭免許状「情報科」取得済。 会社員としてWebデザイン・マーケティングを行うかたわら、空いた時間に「マンガでわかるWebデザイン」をインターネット上に投稿していたところ、出版の声がかかり2016年に『わかばちゃんと学ぶ Webサイト制作の基本』を出版。 続編の『マンガでわかるGit』も書籍化が決定し、2017年に『わかばちゃんと学ぶ Git使い方入門』として出版。 マンガと図解で、物事をわかりやすく伝えることが好き。楽しみながら学べるコンテンツを制作・配信中。 Amazon著者ページ:湊川あい

 

 Git超入門 -Gitってなあに?+あなたのパソコンでGitを使えるようにしよう-

 

 

湊川先生:ここで、Gitがあるときとないときを比較してみたいと思います。まず、Gitがないとどうなってしまうのか、こちらをご覧ください。「修正版」とか「新機能追加中のやつ」とか、同じようなファイルがいくつもできてしまって結局どれが正しく動くのかわかりません。また、戻したいタイミングのバックアップがないこともありますし、ほかの人が編集しようと思ったときにどれを編集すれば良いのかわからないですよね。

 

 

これがGitがあるとどうなるかというと、このようにスッキリします。あんなにたくさんあったのに、1つのファイルで済むんです。これでいつでも過去に戻れるんだったら、とても便利ですよね。

 

 

もう1つ、別のケースを見てみましょう。Gitがないとき、複数人で一緒に同じファイルを修正してそれを1つにまとめようとすると、手動でまとめることになります。テキストをコピペするならまだしも、プログラムだとどこをコピーしたのかとか、相手がどこを追加したのかわからなくて面倒くさいですし、ミスも発生しやすいです。

 

 

では、Gitがあるとどうなるかを見てみましょう。これは、Gitがうまいこと結合してくれるんです。楽だしミスも少なくなるし、良いことづくめですよね。

 

 

続いて、Gitの全体像を見てみましょう。Gitと一言でいっても、いろいろな要素があるんです。まず、個人でGitという枠だけ見てください。自分のPCのなかにGitのファイルを記録する場所を作って、そこにどんどんファイルの更新履歴を貯めていくんですね。そのときに使うツールが、SourceTreeです。

 

個人でバージョン管理するだけでなく、共同作業もしたいよってときは、また別のツールが出てきます。これが、GitHubやBitbucketと呼ばれるものです。個人でやるのも複数人でやるのも、全部Gitだということですね。

 

 

GitHubってよく聞くけど、どういうものなの?という質問がよくあります。GitHubはデータ置き場だと説明されることが多いんですが、それよりも重要なのは、コミュニケーションの場として活用できるものなんですね。

 

 

実際の画面を見てみましょう。コードを書いて、ほかのメンバーに共有できます。このときにほかのメンバーが間違いに気づいたら、「ここ間違ってるよ」と教えてくれるんですね。コミュニケーションしながら共同で開発できるというのが、GitHubの特徴です。

 

 

 

それではここから、SourceTreeのインストールについてご説明します。まずは、インストールできるURLにいきましょう。クリックすると、AtlassianさんのSourceTreeのページが表示されると思います。WindowsでもMacでもダウンロードできるので、「ダウンロード」ボタンを押してください。

 

 

ダウンロードするとファイルが届くので、ダブルクリックして起動してください。するとこのように新しい画面が表示されるので、「Next」をクリックしてください。そのあとにインストールをクリックしていただき、Macの場合はSourceTreeのアイコンをApplicationsの方にドラッグ&ドロップしてもらえればと思います。Windowsの場合はセットアップが完了すると「Finish」というボタンが出てくるので、クリックします。

 

 

すると、こんな画面が表示されます。ライセンスに同意する場合は「同意します」にチェックを入れて、「続行」をクリックしてください。すると、ログインが求められます。すでにAtlassianのアカウントを持っている場合は右側の「Go to My Atlassian」、持っていない場合は左側の「Use an existing account」をクリックしましょう。SourceTreeは無料のツールですが、無料のユーザー登録が必要です。Googleアカウントでもログインできます。

 

 

ログインが完了すると、こんな画面に切り替わります。GitHubやBitbucketをすでに使っている方は、ここで連携しましょう。使ったことがない方は、下の「スキップ」ボタンを押してください。すると「SSHキーを読み込みますか?」という確認が出てくるので、「No」を押して大丈夫です。

 

 

そのあとに、おそらくGitを使ったことがないと、このような画面が出てくると思います。これは、1番上をクリックしてください。これを押すことで、SourceTreeをインストールすると同時にGitもインストールされます。こうすると、SourceTreeの画面が開いて使えるようになります。

 

 

ここから、よりGitを効率的に使えるように、パソコンの表示設定を2点やってもらえればと思います。1つ目は、パスバーの表示です。パスバーは、パソコンのどこにファイルがあるか表示されている窓のことです。Windowsの方は、デフォルトでパスバーが見えています。

 

 

Macの場合はデフォルトで表示されていないので、表示されるように設定してください。Finderを開き、「表示」から「パスバーを表示」をクリックします。すると、パスバーが表示されるようになります。なぜパスバーが表示されていると良いかというと、Gitの場合は今自分がどこのディレクトリにいるのかちゃんとチェックしながらやっていった方が、ミスが少なくなるからです。パスバーが表示されている方が、より便利に使えるんですね。

 

 

2つ目の設定は、隠しファイルの表示です。隠しファイルは、ファイル一覧したときに見える色が薄いファイルのことです。Gitの場合だと隠しファイルを見れた方が効率的なので、見えるように設定します。こちらはWindowsとMacで設定方法が違うので、詳細をまとめたURLを参考にしながら各自設定してもらえればと思います。

 

Q&A!みんな気になる、あの疑問に先生が回答

かいせつ先輩

ここでは、授業を受けた方の質問とそれに対する回答を紹介していくよ!

 

Q1:GitHubとBitbucketの違いを教えてください。

 

A1:そもそも運営会社が異なるものです。GitHubで無料で作れるのは、公開リポジトリだけなんですね。なので、プライベートリポジトリと呼ばれる自分しか見られない非公開のリポジトリを作るには、有料になります。

 

Bitbucketの場合は、自分だけにしか見えないプライベートのリポジトリを5ユーザーまでなら無料で作ることができるんですね。なので、自分で書いたソースコードを公開したくない、でもWeb上に保存しておきたいという方はBitbucketがおすすめです。

 

むしろ、ガンガン自分のソースコードを公開してみんなに見てもらって良くしていきたいという方であれば、無料でGitHubにあげるのがおすすめですね。

 

Q2:コードだけでなく、個人またはグループで書く書類の保存にもGitHubは使えますか?

 

A2:もちろん、使えます。実は私が出した本も、GitHubを使って書いたんですよ。テキストのバージョン管理ができるので、例えば編集さんが「ここ編集してください」と言ったら私がGitHubにアップロードして、それをまた編集さんが見て、みたいな感じで進めました。

今日の生放送

  • このエントリーをはてなブックマークに追加

まとめ記事の記事一覧