クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

ブラウザ上だけでお手軽GitHub体験(リポジトリの作成と変更)

ソフトウェア開発プラットフォーム「GitHub」。バージョン管理システム(Git)によって複数人数での開発ができます。「黒い画面」を叩いて開発するイメージがありますが「SourceTree」というGUIツールもありますよ。さらになんと!GitHubはローカル環境と連携せず、ブラウザ上だけでもお手軽に体験できちゃうんです!バージョン管理システム?なにそれ?おいしいの?まずはここから初めてみる。

【目次】

※参考:ぎっとはぶ(GitHub)、始めてました。 - クモのようにコツコツと

※Web開発環境まとめ
qiita.com

ブラウザだけでGitHubを体験する

以前書いたように、GitHubはアカウントだけ作成しており、その後は放置気味だったのですが、そろそろ理解を深めたい。

※参考:ぎっとはぶ(GitHub)、始めてました。 - クモのようにコツコツと

黒い画面を叩いたり、「SourceTree」というローカル開発環境を作るのがセオリーですが、それが敷居の高さになっていました。

ブラウザ上で作業を完結できたら素敵なんだけどなー、と調べてみたら、なんと、可能っぽいじゃないですか!

※参考:[GitHub] ブラウザでGitHubにコードをアップロード | Sukohi's tech blog!!

まずはこの方法で「バージョン管理システム」とやらの恩恵を預かって、いざ、ローカル環境構築のモチベーションとせんと欲すもの也。いざゆかん。

リポジトリ作成

それでは早速いきましょう。まずは「リポジトリ」を作成します。え?リポジトリってなんの鳥?そうなんです。GitHubというかバージョン管理システム(Git)では聞きなれない専門用語にたくさん遭遇します。これも敷居の高さになっていますよね。

Gitの用語は「サルでもわかるGit入門」に詳しく解説されています。

※参考:履歴を管理するリポジトリ|サル先生のGit入門【プロジェクト管理ツールBacklog】

リポジトリとは、ファイルやディレクトリの状態を記録する場所です。保存された状態は、内容の変更履歴として格納されています。変更履歴を管理したいディレクトリをリポジトリの管理下に置くことで、そのディレクトリ内のファイルやディレクトリの変更履歴を記録することができます。

GitHubのトップ画面で右上のプラス(+)アイコンを開き「New repository」をクリック f:id:idr_zz:20181128204704j:plain

リポジトリの設定を入力します。 f:id:idr_zz:20181128204713j:plain

  • 「Repository name」にリポジトリ名を入力(github_onlyとしました)
  • 「Description」に説明を入力(後述するREAD MEと共通の内容になります)
  • PublicとPrivateは「Public」を選択(無料プランは公開になります)
  • 「READ ME」ファイルを作成しますか?するのでチェックを入れる
  • 「Create repository」でリポジトリ作成

リポジトリが作成されました! f:id:idr_zz:20181128202043j:plain

「Create new file」をクリックしてください。ブラウザ上でリポジトリに新規ファイルを追加できます!

HTMLファイルを作成

ファイルの作成画面が開きます。まずはHTMLファイルを作成しましょう。 f:id:idr_zz:20181128202052j:plain ファイル名は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向けに少しテキストを打ち替えました。

編集画面。シンタックスハイライト(言語ごとに固有のワードや記号に色が付く)はありませんね。 f:id:idr_zz:20181128202102j:plain 書き終わったら下にスクロールします。(下に保存ボタンがあります)

緑色の「Commit changes」ボタンで変更を保存します。 f:id:idr_zz:20181128202109j:plain

ちなみにボタンの上にある入力フォームで変更内容などのコメントを入れることができます。 (今回は入れませんが複数人で作業しているときにはコメントがあると一目瞭然ですね!)

なお、「コミット」もGit用語で「変更を保存する」といった意味があります。

ファイルやディレクトリの追加・変更を、リポジトリに記録するにはコミットという操作を行います。

※参考:変更を記録するコミット|サル先生のGit入門【プロジェクト管理ツールBacklog】

保存後の画面。シンタックスハイライトがついてますね! f:id:idr_zz:20181128202116j:plain github_onlyをクリックして親階層に移動します。

HTMLファイルindex.htmlが追加されました! f:id:idr_zz:20181128202124j:plain 次はCSSファイルを作ります。先ほどと同様に「Create new file」をクリックしてください。

CSSファイルを作成

先ほどHTMLコードでCSSファイルはcss/ディレクトリ内というパスにしました。

<link rel="stylesheet" href="css/style.css">

そのため、ファイル作成画面でまずディレクトリ名css/を打ちます。 f:id:idr_zz:20181128202132j:plain そうするとディレクトリが作れられるので、その中にCSSファイルstyle.cssを作ります。

CSSコードを書きます。

h1 {
color: red;
}

h1タグの文字色を赤に。 f:id:idr_zz:20181128202140j:plain また画面下にスクロールして「Commit changes」で保存。

CSSファイルstyle.cssが追加されました! f:id:idr_zz:20181128202148j:plain github_onlyをクリックして親階層に移動します。

親階層にはディレクトリcssが作られていることがわかります! f:id:idr_zz:20181128202159j:plain 最後に、JSファイルを作ります!「Create new file」をクリックしてください。

JSファイルを作成

こちらもCSSと同じ流れです。

HTMLコードでJSファイルはjs/ディレクトリ内というパスにしました。

<script src="js/script.js"></script>

ディレクトリjs/を作成したあとファイル名script.jsを入力。 f:id:idr_zz:20181128202207j:plain

JSのコードを書きます。

alert("はろー、ぎっとはぶ");

ページ読み込み時にアラートを開く。文字列ははろー、ぎっとはぶです。 f:id:idr_zz:20181128202214j:plain 下にスクロールして「Commit changes」で保存。

JSファイルscript.jsが作成されました! f:id:idr_zz:20181128202221j:plain github_onlyをクリックして親階層に移動。

親階層にディレクトリjsが作られています!これで完成です! f:id:idr_zz:20181128202228j:plain GitHubではWebコンテンツのプレビューを確認することができます。プレビューしたいHTMLファイルindex.htmlを開いてください。

HTMLファイルのプレビューを確認

GitHubのプレビューは「GitHub & BitBucket HTML Preview」というページで確認できます。

※参考:GitHub & BitBucketをプレビュー表示するWebサービス | webOpixel

プレビューしたいHTMLファイルindex.html画面 f:id:idr_zz:20181128202235j:plain まずこのページのURLをコピーしてください。

「GitHub & BitBucket HTML Preview」を開く。

※参考:GitHub & BitBucket HTML Preview

コピーしたHTMLファイルindex.htmlのURLをペースト。>>ボタンをクリック。 f:id:idr_zz:20181128202241j:plain

プレビューが開きます。 f:id:idr_zz:20181128202248j:plain まずアラートが開くのでJSのスクリプトが動いていることがわかります。

アラートを閉じる。 f:id:idr_zz:20181128202254j:plain h1タグが赤くなっているのでCSSのスタイルが当たっていることがわかります。

ブラウザ上だけでリポジトリを作成し、Webページが作れましたね!

ファイルを修正してみる

さて、このままだと「CodePen」などのオンラインテキストエディタとあまり変わらない感じですよね。 バージョン管理システム(Git)の便利さを感じるために、あえてファイルを修正してみましょう。

CSSファイルを開いてください。ファイルの編集は右上の鉛筆アイコンです。 f:id:idr_zz:20181128202301j:plain

CSSのコードを修正します。h1の文字色を赤から青にしてみます。 f:id:idr_zz:20181128202308j:plain 先ほどと同じく下にスクロールして「Commit changes」で保存。

CSSのコードが修正されました! f:id:idr_zz:20181128202347j:plain

同様の流れでJSも修正します。アラートのはろーを日本語のこんにちはに。 f:id:idr_zz:20181128202354j:plain

HTMLも修正。h1のコーディングはできた!に打ち替え。 f:id:idr_zz:20181128202401j:plain

修正をプレビューで確認

さあこれを「GitHub & BitBucket HTML Preview」でプレビューするとどうなるか?ページをリロードします。*1

アラートの文字列はろーこんにちはに!JSのスクリプトが変更されていますね。 f:id:idr_zz:20181128202410j:plain

アラートを閉じるとh1の文字色が青に!CSSのスタイルが替わっています。HTMLの文字もに打ち替わっています。 f:id:idr_zz:20181128202418j:plain

ブラウザ上だけで修正も完結できましたね!!次はいよいよ「バージョン管理システム」がどんな仕組みか見ていきます。

コミットのバージョン履歴を確認

GitHub画面に戻ります。左の時計アイコンに8 commitsとありますね。これは「変更の履歴が8件あります」という意味です。 f:id:idr_zz:20181128202424j:plain クリックして開いてみましょう。

コミットの履歴です。下に行くほど古いバージョンです。 f:id:idr_zz:20181128202431j:plain 一番上の最新のJSファイルを開いてみます。

開くと行に赤と緑の色がついてします。 f:id:idr_zz:20181128202439j:plain これは赤が変更前、緑が変更後という意味です。

  • 赤:変更前のコード
  • 緑:変更後のコード

前のバージョンのJSも開いてみましょう。 f:id:idr_zz:20181128202447j:plain

最初のバージョンは赤い行はありません。 f:id:idr_zz:20181128202455j:plain このバージョンがオリジナルだとわかります。

このように、コミットの前のバージョンと変更点が色で確認することができます!

最後に

バージョン管理システム、便利ですね!複数人で作業するときにはさらに分岐(ブランチ)や合体(マージ)もできます!こちらはあらためて触れていきます。(仲間はいないので一人作業ですがw)

また、本来の使い方であるローカル環境からのリポジトリ作成もやっていきます。まだまだGitHubの入り口に片足を突っ込んだくらいですがシリーズ化していくので引き続きよろしゅう。それではまた!


※参考:Web開発環境の記事まとめ
qiita.com

*1:私の環境では修正の反映に少し時間がかかりました。キャッシュクリアなど試みましたがが法則性が見出せず。。