ソフトウェア開発プラットフォーム「GitHub」。バージョン管理システム（Git）によって複数人数での開発ができます。「黒い画面」を叩いて開発するイメージがありますが「SourceTree」というGUIツールもありますよ。さらになんと！GitHubはローカル環境と連携せず、ブラウザ上だけでもお手軽に体験できちゃうんです！バージョン管理システム？なにそれ？おいしいの？まずはここから初めてみる。
【目次】
- ブラウザだけでGitHubを体験する
- リポジトリ作成
- HTMLファイルを作成
- CSSファイルを作成
- JSファイルを作成
- HTMLファイルのプレビューを確認
- ファイルを修正してみる
- 修正をプレビューで確認
- コミットのバージョン履歴を確認
- 最後に
※参考：ぎっとはぶ（GitHub）、始めてました。 - クモのようにコツコツと
※Web開発環境まとめ
qiita.com
ブラウザだけでGitHubを体験する
以前書いたように、GitHubはアカウントだけ作成しており、その後は放置気味だったのですが、そろそろ理解を深めたい。
※参考：ぎっとはぶ（GitHub）、始めてました。 - クモのようにコツコツと
黒い画面を叩いたり、「SourceTree」というローカル開発環境を作るのがセオリーですが、それが敷居の高さになっていました。
ブラウザ上で作業を完結できたら素敵なんだけどなー、と調べてみたら、なんと、可能っぽいじゃないですか！
※参考：[GitHub] ブラウザでGitHubにコードをアップロード | Sukohi's tech blog!!
まずはこの方法で「バージョン管理システム」とやらの恩恵を預かって、いざ、ローカル環境構築のモチベーションとせんと欲すもの也。いざゆかん。
リポジトリ作成
それでは早速いきましょう。まずは「リポジトリ」を作成します。え？リポジトリってなんの鳥？そうなんです。GitHubというかバージョン管理システム（Git）では聞きなれない専門用語にたくさん遭遇します。これも敷居の高さになっていますよね。
Gitの用語は「サルでもわかるGit入門」に詳しく解説されています。
※参考：履歴を管理するリポジトリ｜サル先生のGit入門【プロジェクト管理ツールBacklog】
リポジトリとは、ファイルやディレクトリの状態を記録する場所です。保存された状態は、内容の変更履歴として格納されています。変更履歴を管理したいディレクトリをリポジトリの管理下に置くことで、そのディレクトリ内のファイルやディレクトリの変更履歴を記録することができます。
GitHubのトップ画面で右上のプラス（＋）アイコンを開き「New repository」をクリック
リポジトリの設定を入力します。
- 「Repository name」にリポジトリ名を入力（
github_onlyとしました） - 「Description」に説明を入力（後述するREAD MEと共通の内容になります）
- PublicとPrivateは「Public」を選択（無料プランは公開になります）
- 「READ ME」ファイルを作成しますか？するのでチェックを入れる
- 「Create repository」でリポジトリ作成
リポジトリが作成されました！
「Create new file」をクリックしてください。ブラウザ上でリポジトリに新規ファイルを追加できます！
HTMLファイルを作成
ファイルの作成画面が開きます。まずはHTMLファイルを作成しましょう。
ファイル名はindex.htmlとしました。
HTMLのコードを書いていきます。
※参考：HTML、CSS、JSの基本はこちら
【HTML、CSS、JSの書式】これを読めばコードが読める！書ける！まとめ！（基本5+応用1記事） - クモのようにコツコツと
前回「黒い画面」のviエディタに書いたコードをベースにします。
※参考：黒い画面だけでWebページを作成-後編：viエディタでコーディング！ - クモのようにコツコツと
こんなコードです。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>GitHubOnly</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <article> <h1>GitHubだけでコーディングはできた！</h1> <p>テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。</p> <p>テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。</p> <p>テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。テストです。テストです。テストですったらテストです。</p> </article> <script src="js/script.js"></script> </body> </html>
GitHub向けに少しテキストを打ち替えました。
編集画面。シンタックスハイライト（言語ごとに固有のワードや記号に色が付く）はありませんね。
書き終わったら下にスクロールします。（下に保存ボタンがあります）
緑色の「Commit changes」ボタンで変更を保存します。
ちなみにボタンの上にある入力フォームで変更内容などのコメントを入れることができます。 （今回は入れませんが複数人で作業しているときにはコメントがあると一目瞭然ですね！）
なお、「コミット」もGit用語で「変更を保存する」といった意味があります。
ファイルやディレクトリの追加・変更を、リポジトリに記録するにはコミットという操作を行います。
※参考：変更を記録するコミット｜サル先生のGit入門【プロジェクト管理ツールBacklog】
保存後の画面。シンタックスハイライトがついてますね！
github_onlyをクリックして親階層に移動します。
HTMLファイルindex.htmlが追加されました！
次はCSSファイルを作ります。先ほどと同様に「Create new file」をクリックしてください。
CSSファイルを作成
先ほどHTMLコードでCSSファイルはcss/ディレクトリ内というパスにしました。
<link rel="stylesheet" href="css/style.css">
そのため、ファイル作成画面でまずディレクトリ名css/を打ちます。
そうするとディレクトリが作れられるので、その中にCSSファイルstyle.cssを作ります。
CSSコードを書きます。
h1 { color: red; }
h1タグの文字色を赤に。
また画面下にスクロールして「Commit changes」で保存。
CSSファイルstyle.cssが追加されました！
github_onlyをクリックして親階層に移動します。
親階層にはディレクトリcssが作られていることがわかります！
最後に、JSファイルを作ります！「Create new file」をクリックしてください。
JSファイルを作成
こちらもCSSと同じ流れです。
HTMLコードでJSファイルはjs/ディレクトリ内というパスにしました。
<script src="js/script.js"></script>
ディレクトリjs/を作成したあとファイル名script.jsを入力。
JSのコードを書きます。
alert("はろー、ぎっとはぶ");
ページ読み込み時にアラートを開く。文字列ははろー、ぎっとはぶです。
下にスクロールして「Commit changes」で保存。
JSファイルscript.jsが作成されました！
github_onlyをクリックして親階層に移動。
親階層にディレクトリjsが作られています！これで完成です！
GitHubではWebコンテンツのプレビューを確認することができます。プレビューしたいHTMLファイルindex.htmlを開いてください。
HTMLファイルのプレビューを確認
GitHubのプレビューは「GitHub & BitBucket HTML Preview」というページで確認できます。
※参考：GitHub & BitBucketをプレビュー表示するWebサービス | webOpixel
プレビューしたいHTMLファイルindex.html画面
まずこのページのURLをコピーしてください。
「GitHub & BitBucket HTML Preview」を開く。
※参考：GitHub & BitBucket HTML Preview
コピーしたHTMLファイルindex.htmlのURLをペースト。>>ボタンをクリック。
プレビューが開きます。
まずアラートが開くのでJSのスクリプトが動いていることがわかります。
アラートを閉じる。
h1タグが赤くなっているのでCSSのスタイルが当たっていることがわかります。
ブラウザ上だけでリポジトリを作成し、Webページが作れましたね！
ファイルを修正してみる
さて、このままだと「CodePen」などのオンラインテキストエディタとあまり変わらない感じですよね。 バージョン管理システム（Git）の便利さを感じるために、あえてファイルを修正してみましょう。
CSSファイルを開いてください。ファイルの編集は右上の鉛筆アイコンです。
CSSのコードを修正します。h1の文字色を赤から青にしてみます。
先ほどと同じく下にスクロールして「Commit changes」で保存。
CSSのコードが修正されました！
同様の流れでJSも修正します。アラートのはろーを日本語のこんにちはに。
HTMLも修正。h1のコーディングはできた！のはをがに打ち替え。
修正をプレビューで確認
さあこれを「GitHub & BitBucket HTML Preview」でプレビューするとどうなるか？ページをリロードします。*1
アラートの文字列はろーがこんにちはに！JSのスクリプトが変更されていますね。
アラートを閉じるとh1の文字色が青に！CSSのスタイルが替わっています。HTMLの文字もがに打ち替わっています。
ブラウザ上だけで修正も完結できましたね！！次はいよいよ「バージョン管理システム」がどんな仕組みか見ていきます。
コミットのバージョン履歴を確認
GitHub画面に戻ります。左の時計アイコンに8 commitsとありますね。これは「変更の履歴が8件あります」という意味です。
クリックして開いてみましょう。
コミットの履歴です。下に行くほど古いバージョンです。
一番上の最新のJSファイルを開いてみます。
開くと行に赤と緑の色がついてします。
これは赤が変更前、緑が変更後という意味です。
- 赤：変更前のコード
- 緑：変更後のコード
前のバージョンのJSも開いてみましょう。
最初のバージョンは赤い行はありません。
このバージョンがオリジナルだとわかります。
このように、コミットの前のバージョンと変更点が色で確認することができます！
最後に
バージョン管理システム、便利ですね！複数人で作業するときにはさらに分岐（ブランチ）や合体（マージ）もできます！こちらはあらためて触れていきます。（仲間はいないので一人作業ですがw）
また、本来の使い方であるローカル環境からのリポジトリ作成もやっていきます。まだまだGitHubの入り口に片足を突っ込んだくらいですがシリーズ化していくので引き続きよろしゅう。それではまた！
※参考：Web開発環境の記事まとめ
qiita.com
*1:私の環境では修正の反映に少し時間がかかりました。キャッシュクリアなど試みましたがが法則性が見出せず。。
