あぱれる男子のつぶやき

プログラミングを奮闘中

【超初心者向け】GitHubを使ってみる① ~まずは流れを知ろう~

GitHub

GitHub

何となく、名前だけは知っていたというだけのド素人、マサです。

GitHubってめちゃくちゃ英語だらけですよね。初見で、

「うわ、ハードル高そう、、」

と感じた方は私以外にもたくさんいることでしょう。

日本語訳があると使いやすいのになあ、と思いつつ最低限使う上での英語の意味はググれば載っています。なので、

「本当に最低限であれば別に英語できなくてもいけそうだな」と感じたので、苦労しながらもとりあえず一通りの操作をやってみました。


ですが。

まずはひとつ言いたい、、

ググってヒットする「初心者向け」と書かれたGit系の記事が全然初心者向けじゃない!

こっちはターミナル?ナニソレオイシイノ?な状態。。

いくら簡単ですと言われたっていきなり「git init...」されても「まずはターミナルを開く」から始まっても、まずはその土俵に立てていない初心者がどれだけいるかを知ってもらいたい!(初心者の威張り)


そんな私のような初心者のために今回は、GitHubを使い最低限のことをできるようになることを目標として書きます。

書いているうちにかなり長くなったので、見返すときのことも考え

  1. GitHubについてと学習の流れ
  2. GitHubの使い方
  3. GitHubを使って制作物を公開

の3本立てにしようと思います。

絶っっ対に挫折せずに最低限は使えますし、難しい言葉も使わないのであなたも付いてきてください!


そんなわけで、

この記事の対象となる方

  • GitとGitHubの違いが分からない
  • ターミナルが何なのか分からない
  • HTML/CSSなどのフロントの言語くらいしか触ったことがない

というようなつい数日前の私のような方です。

これくらい駆け出しのレベルでもこの記事たちを続けて読めば

  • ある程度ターミナルやGitについて勉強の順序が分かる
  • それらを使って何ができるのか分かるようになる

といったレベルまではこなせるようになりますし、最終的に
自分で作った制作物をものの5分ほどで公開することもできるようになります。

ちなみに、何となくで使ってみるのはやめましょう!
(私はそれでよくわからないうちにうっかり過去の制作物を消してしまいました、、)


では、参りましょう。

GitHubについて

そもそもGitHubって何?何ができるの?

はてなを浮かべた女性


まずは、GitHubについてですが、公式よりコチラ

GitHubは、ユーザのみなさんからヒントを得て作成された開発プラットフォームです。オープンソースプロジェクトやビジネスユースまで、GitHub上にソースコードホスティングすることで数百万人もの他の開発者と一緒にコードのレビューを行ったり、プロジェクトの管理をしながら、ソフトウェアの開発を行うことができます。

https://github.co.jp/より


ようは、自身のPCでHTMLやCSSを打つときに、デバイスに「Visual Studio Code」や「Atom」といったテキストエディタがあるじゃないですか。

それを使ってコーディングをしたファイルなどをネット上でいつでもどこでも誰とでもどんなデバイスでも共有できたら便利だよね~、
っていうサービスのことです。
(本当に超簡単に解釈したものなので語弊があるかもしれません)

公式にも、

と書かれています。

(念の為、テキストエディタに関してはこちら)
www.pc-master.jp

GitHubを使うメリットは?

メリット

GitHubを使えば何ができるのかは先ほど書いたことが全てですが、この誰とでもというのがポイントで、
チームで共同開発をするときに管理や共有がとても便利なのです。

しかも、コードのどこがどう変わったか?がひと目で分かるようになるので、開発がスムーズに進みます。
(正確にはこれはGitHubの機能とは言えないので半分正解といったニュアンスですが)

更にはデバイスMacOSWindowsかも気にしなくていいのでそう言った意味でも非常に使い勝手がいいのです。

よく、共同開発、共同開発と言われますがこういった理由があったんですね。

しかも大企業でも積極的に使用されていますから、ユーザーはかなり多く、エンジニアには必須のスキルと言えるでしょう。

転職する際にも大きなアドバンテージになるようです。



転職を目指している自分にとって、転職成功組のこのお二方のツイートはかなり参考になりました!いつも参考にさせていただいています!


また個人利用でもGitHubと連携して他のホスティングサービスを使用することで、簡単に自分の作ったサービスや制作物をアップすることができます。

私がフロントの勉強をしているときにGitHubをやろうと思ったのもそこに魅力を感じたからです。

スマホでもURLを入れれば自分で作ったHTML/CSSのみの静的ページを見れるってかなりモチベーション上がりませんか?

それについての具体的なやり方は③の記事まで行けばできますので、まずはGitHubについて触ってみましょう!

GitHubを使うまでの流れを知る

まず、GitHubだけじゃ何もできない

バツ

「え、そうなの?」

私はここに行き着くまでに何時間か時間を使ってしまいました。。

そうなんです、GitHubはそれだけじゃ意味がないものなんです。

まず、ここにHTMLなどのコードを共有するには、Gitというものを使わないといけません。

Git(ギット[2][3][4])は、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。

Gitは分散型のソースコード管理システムであるため、リモートサーバ等にある中心リポジトリの完全なコピーを手元(ローカル環境)に作成して、そのローカルリポジトリを使って作業を行う。

Git - Wikipediaより

さっぱりだと思います。

何となくの理解でいいので、進めていきましょう。

ようはコードを管理するためのものです。

GitHubを使うとソースコードを管理できるから便利だと言いましたが、じゃあそこに共有するには何を使うのか?それがGitです。

イメージ的には、
自分のPC → Gitを使ってコードを管理 → GitHubで共有ができる!

といった感じです。
GitHubは開発プラットフォームだと公式の説明にも書かれていましたが、その土台を使うにあたりGitというデータベースが必要といった感じ。

Gitについてはこちらの記事に詳しく書かれていますので参考にどうぞ。
liginc.co.jp

Gitを最低限使うには

git

「とりあえずGitというものを使えばいいということは分かったけどどうやって使うの?」

これですよね。

私も何から始めりゃ良いのか分からずとりあえずググって調べまくりましたが、結論は、

Progateを見ろ!

これに尽きます。
ありがたいことに、無料でGitを学べるレッスンがあります!

ただ、Gitをやる前にCommand lineをやっておくのがオススメです。

というか絶対にやっておいたほうがいい。

どちらも合わせて2時間あれば終わる内容ですので、サクッと終わらせましょう!

prog-8.com

prog-8.com


ここまで終わらせたら次の ②GitHubの使い方 に移ります!