Bootstrapを使ったフロントエンド開発入門【スタイリング編】

BootstrapではWeb制作で頻繁に使うタイポグラフィー、画像、表組み、フォントサイズ、マージン、パティングなどのスタイルが予め設定されています。これらの定義済みスタイルを用いることで高速に要素のスタイリングができます。

解説の内容は以下Codepenにサンプルを用意しているので適宜見比べながら読んで頂ければと思います。

See the Pen
bootstrap_style by Tim_Yone (@kazuki-yonemoto)
on CodePen.

見出しの定義済みスタイル

Bootstrapにはh1~h6までの見出しのスタイルが既に設定されています。見出しの場合、クラスを設定しなくてもBootstrapのスタイルが調整されます。

見出しに対して副題を付けたい場合は 副題をsmallタグで囲みtext-muted と呼ばれるクラスを付与します。

<h3>Heading3 <small class="text-muted">Sub Heading</small></h3>

見出しをさらに目立たせたい場合は次のようにdisplay-{1~4}の４段階でクラス分けしてサイズを調整することができます。

<h1 class="display-1">display-1</h1>
<h2 class="display-2">display-2</h2>
<h3 class="display-3">display-3</h3>
<h4 class="display-4">display-4</h4>

テキストの定義済みスタイル

テキストのなかで文字を目立たせたい場合などはleadクラスを付与します。次の場合"Normal text"が通常の表示、"Lead text"がleadクラスを入れたものの比較になります。leadクラスではフォントサイズが1.25rem, フォントウェイト（文字の太さ）が300に定義されています。

<p>Normal text</p>
<p class="lead">Lead text</p>

リストの定義済みスタイル

リストの表示では基本縦並びに表示されます。しかし、実際にはリストを横に並べたいパターンが多いかと思います。
そこでBootstrapではlist-inlineクラスをulタグに、list-inline-itemクラスをliタグに付与することでリストをインライン要素（つまり横並び）で表示させることができます。

<ul class="list-inline">
    <li class="list-inline-item">List Inline1</li>
    <li class="list-inline-item">List Inline2</li>
    <li class="list-inline-item">List Inline3</li>
    <li class="list-inline-item">List Inline4</li>
    <li class="list-inline-item">List Inline5</li>
</ul>

画像の定義済みスタイル

レスポンシブ対応する場合、画像の縦横比を維持したまま画像を伸縮させたいことがあるかと思います。コンテンツ（親要素）のいっぱいまで画像を表示させる場合はimg-fluidクラスをimgタグに付与します。

画像に対してサムネイル（枠）を付けたい場合はimgタグにimg-thumbnailクラスを付与します。

<img class="img-fluid" src="画像のパス" alt="画像のALT">
<img class="img-fluid img-thumbnail" src="画像のパス" alt="画像のALT">

テーブルの定義済みスタイル

テーブル要素にtableクラスを付与することでレスポンシブに対応した幅調整が簡単に行えるようになります。
tableクラスに設定されているプロパティがこちらです。

.table {
    width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
}

さらにtable-darkクラスを利用することで簡単にテーブルを暗色モードに切り替えることが可能です。またテーブルのデザイン表現で縞模様（ストライプ）で色付けするパターンが多いですが、このような表現もtable-stripedクラスで実現することができます。他にも罫線を無くしたい場合、table-borderlessクラスを利用したり、テーブルのマウスオーバー表現もtable-hoverクラスというものが予め用意されています。

<table class="table table-dark">
    <thead>
      <tr>
        <th>Table Heading1</th>
        <th>Table Heading2</th>
        <th>Table Heading3</th>
        <th>Table Heading4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Table Heading</th>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
      <tr>
        <th>Table Heading</th>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
      <tr>
        <th>Table Heading</th>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
      </tr>
    </tbody>
  </table>

図表の定義済みスタイル

図表をHTMLでマークアップする際にはfigure要素を利用することが多いかと思います。
figure要素にはfigureクラス、img要素にはfigure-imgクラス、figurecaption要素にはfigure-captionクラスという定義済みのクラスが用意されています。これらを使うことで基本的なスタイルを適用することが可能になります。

<figure class="figure">
    <img  class="figure-img img-fluid d-block" src="画像パス" alt="Sample Figure">
    <figurecaption class="figure-caption">Caption</figurecaption>
</figure>

これまで説明したようにBootstrapでは定義済みスタイルを如何に利用することができるかで大幅な制作工数の削減が変わってくるかと思います。他にもここでは紹介し切れていない定義済みスタイルがありますので用途に応じて調べてみてください。

Bootstrapを使ったフロントエンド開発入門【レイアウト編】

Bootstrapではグリッドシステムと呼ばれるレイアウト手法が採用されています。この概念を知る為にはまずコンテナー "container" やカラム "colum" 、ガター（溝） "gutter" について学ぶ必要があります。

解説の内容は以下Codepenにサンプルを用意しているので適宜見比べながら読んで頂ければと思います。

グリッドシステム

グリッドシステムは横幅12列に分割したレイアウトを主な枠組みとして利用します。まず、グリッドシステム使う際には基本的にコンテナー"container"要素（側）を配置します。
コンテナー"container"はコンテンツを入れる為の箱でコンテンツを水平中央に配置する機能を持ちます。基本的には各要素は"container"というクラスを付与したラッパーに内包されます。固定幅ではなく横いっぱいに広がったコンテナにする場合は"container-fluid"クラスを利用します。

<div class="container">
  コンテンツが入ります
</div>

コンテナーの中には"row"クラスを付与した要素が入ります。rowは「行」という意味の単語で、row「行」の中にカラムが内包されます。

<div class="container">
  <div class="row">
    <div class="col">Col-1</div>
    <div class="col">Col-1</div>
    <div class="col">Col-1</div>
  </div>
</div>

前述のようにグリッドは全部で12分割することができます。列をカラム（Colum）と呼び、各カラムの間には15pxずつガター(Gutter)が左右内側に割り振られています。ガターを削除したい場合は"no-gutters"クラスを利用します。

カラムには"col"というクラスを付与します。カラムは12分割されるうちいくつ分をその列で利用したいかを指定することができます。"col-6"とするとカラム6個分の幅が割り当てられます。またBootstrapのグリッドシステムにはflexboxと呼ばれるレイアウト手法が採用されています。flexboxでは1カラムを指定すると残りのカラム幅は等幅で割り振られます。

レスポンシブ対応したグリッドシステム

Bootstrapではブレイクポイントが５段階で設定されています。col-(*ブレイクポイントのclass)となるクラスの命名規則でブレイクポイントを任意に設定することができます。可変幅のカラムを作りたい際はcol-autoクラスを利用します。

ブレイクポイントは以下の５つに分けられます。例えば画面幅が768px以下であれば「.col-md」を指定します。Bootstrapはモバイルファーストを前提に設計されています。その為、モバイルのスタイルを基準として画面サイズの小さいものからスタイルを上書きしていく仕様となります。

• Extra small (<576px) .col
• Small (>=576px) .col-sm
• Medium (>=768px) .col-md
• Large (>=992px) .col-lg
• Extra large (>=1200px) .col-xl

Flexユーティリティーを用いたカラムの整列

カラムの整列にはFlexユーティリティーを利用するのが一般的です。例えば水平方向の整列では以下のクラスを整列したい要素の親要素に付与することでレイアウトの変更ができます。

• .justify-content-start（左揃え）
• .justify-content-center（中央揃え）
• .justify-content-end（右揃え）
• .justify-content-around（等間隔に配置）
• .justify-content-between（両端から均等に配置）

今回はBootstrapで使われるグリッドの概要とレイアウトの整列について学習しました。次回は要素のスタイリングについてまとめていきたいと思います。

Bootstrapを使ったフロントエンド開発入門【導入編】

Webフロントエンド開発においてフレームワークを使わない機会というのは年々少なくなってきていると思います。むしろ昨今のWeb制作ではフレームワークを使って少ない費用と短い期間で必要最低限の機能を実装してリリースするというパターンがベターとされてきています。

本記事ではWebサイト、Webアプリケーション開発において最も有名なフレームワークといっても過言ではない Bootstrap(Bootstrap4) の概要と導入方法についてまとめていきたいと思います。

フレームワークとは

そもそもフレームワークを使ったことがない方やこれからweb制作に携わりたい方にとって「フレームワークってなんぞや」といった状態かもしれないので一応その定義について紹介しておきたいと思います。

フレームワークの定義は「開発・運用・意思決定を行う際に、その基礎となる規則・構造・アイデア・思想などの集合のこと。」です。（Wikipediaより引用）

よく似た使われ方でライブラリという言葉を聞く機会が多いかと思いますが、ライブラリとフレームワークは定義がそれぞれ異なります。ライブラリはよく使う機能を部品化して再利用可能な形で一まとまり（パッケージ）にしたものです。例えばWeb制作で有名なjQueryはライブラリの一つです。一方でフレームワークは全体の土台（骨組み）が予めできており、開発者はその土台（骨組み）に沿って自由に肉付けすることができるものです。

フレームワークのメリットは主に以下の二つが上げられると思います。

• 開発速度を高めることができる
• 一定のメンテナンス性を担保できる

Bootstrapとは

Bootstrapは元々Twitter社によって作られたフロントエンドフレームワークの一つです。現在オープンソースのプロジェクトとしてリリースされており、多くのWeb制作者に利用されています。記事執筆時点（2019/5/12）ではバージョン４が最新版となっていますので以降の説明ではBootstrap4の仕様に沿って説明していきます。

Bootstrapの導入方法

Bootstrapの導入自体はそれほど難しくありません。まずはBootstrapを提供する公式サイトを見てみましょう。
getbootstrap.com

Bootstrapを導入するにはダウンロードする方法とCDNを利用する方法の二つがあります。まずはダウンロードして利用する方法をみていきたいと思います。

ダウンロードして利用する方法

Compiled CSS and JSという見出しにあるDownloadボタンを押します。

ダウンロードしたファイルをエディタで展開すると以下のように複数のCSSファイルとJSファイルが確認できると思います。まずはCSSファイルの中身を見ていきましょう。

Bootstrapにはレイアウトや体裁を整える機能、配置や表示に関わる機能など多岐に渡ります。そこでBootstrapでは必要な機能をある程度分けて部分的に利用できるようにしてくれています。

getbootstrap.com

• bootstrap.css (bootstrap.min.css) 全部盛り
• bootstrap-grid.css (bootstrap-grid.min.css) グリッドシステムとFlexユーティリティのみ
• bootstrap-reboot.css (bootstrap-reboot.min.css) Rebootのみ

(＊RebootはBootstrap特有のリセットCSSです。ブラウザ毎のスタイル解釈を一定にすることができます。）

次にJSファイルの中身を見ていきましょう。
JSファイルは主にbootstrap.jsとbootstrap.bundle.jsに分けることができます。違いはプラグインで必要なpopper.jsを含むか含まないかです。

BootstrapのJavascriptはjQueryというライブラリを基本的に利用します。必要な場合は以下のリンク先からダウンロードしましょう。

jquery.com

では各ファイルの説明はほどほどにして早速サンプルのHTMLファイルを作成して読み込んでみましょう。
ここではダウンロードしたBootstrapファイルをもとにindex.htmlを作成しています。今回はCSS、JSファイルとも圧縮済のファイルを用意しました。

①ではbootstrap.min.cssをheadタグ内で読み込みます。
②ではjQueryファイル（jquery-3.4.1.slim.min.js）とbootstrap.bundle.min.jsを読み込みます。

ここで気をつけるべきポイントはJSファイルの読み込み順です。まず始めにjQueryファイルを読み込み、次にJavascriptファイルを読み込みます。

サンプルで作ったhtmlファイル（index.html）をローカルで展開してみます。サンプルでBootstrap特有のClassを入れてみましたが、BootstrapのCSSがちゃんと適用されています。

CDNを利用する方法

CDNとはContent Delivery Networkの略でインターネット上にキャッシュサーバーを分散配置して、ユーザーに最も近い経路でコンテンツを安定して高速配信する仕組みです。CDNを使うメリットは既に用意されている外部ファイルを絶対パスで読み込むことでダウンロードの必要なくBootstrapを利用できることにあります。以下の記述をダウンロードで利用したようにHTMLファイルへ配置すれば同様に利用することができます。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

今回はBootstrap4の導入方法を紹介しましたが次回はBootstrapのレイアウト、グリッドシステムについて焦点を当てていきたいと思います。

Nuxt.jsを使ったWebアプリ開発を始めてみよう【導入方法】

今のフロントエンド界隈で注目を集める Vue.js（jsライブラリの一つ）には Nuxt.js と呼ばれるフレームワークが存在します。普段Web制作に携わっている方ならば一度は聞いたことがあるのではないでしょうか？実はこの Nuxt.js は公式に提供されているものではなくサードパーティー（第三者）によって提供されています。

Nuxt.jsが人気を集める理由はSSR（サーバーサイドレンダリング）の機能をデフォルトで提供しており、SEO対策と初回表示の高速化を測ることができるという点にあると思われます。実際 Vue.js単体でもSSR（サーバーサイドレンダリング）が可能ですが自前で対応するにはかなりの労力を必要とします。公式でも実装速度を重視する場合はNuxt.jsの利用が推奨されています。

Vue.js サーバーサイドレンダリングガイドssr.vuejs.org

Nuxt.jsは 上記以外にも昨今のWeb開発で必要となる開発環境をコマンド一つで簡単に用意することができます。

• Babelによるトランスパイル
• Vue.jsに合わせたUIフレームワーク
• 開発ローカルサーバー
• ホットリローディング
• Sass、Less、Stylusなどのプリプロセッサ

前書きはほどほどにして早速Nuxt.jsを利用する環境を準備していきましょう。
以下のコマンドをプロジェクトを作成したいディレクトリに移動して実行します。ここではyarnを用いますがnpmでも可能です。
yarnのインストールはこちらのガイドにしたがってください。
yarnpkg.com

公式からも以下作業のガイドが出ています
インストール - Nuxt.js

$ yarn create nuxt-app (プロジェクト名)

プロジェクト名の確認と説明書きを入力します（任意）

サーバーサイドで利用するフレームワークを選択します。

LinterやPWAのサポートまでもここで設定することができます。

利用したいUIフレームワークを選択します。

セットアップの参考までに以下の記事がオススメです。
なんとなくVue.jsのUIフレームワークを紹介する
qiita.com

テストフレームワークを選択します。

SPAで開発するかSSR（サーバーサイドレンダリング）を行うか選択します。
SSR（サーバーサイドレンダリング）する場合はUniversalを指定します。

次にようにコマンドが提示されるので早速始めてみましょう。

To get started: 

    cd (プロジェクト名)
    yarn run dev

 To build & start for production:

    cd (プロジェクト名)
    yarn run build
    yarn start

では以下コマンドを打ってローカルサーバーを起動させて表示を確認してみます。
$ yarn run dev

ローカルサーバーが立ち上がるのでアクセスします。
http://localhost:3000/

以下のように表示されればOKです。

以上で開発準備は整いました。実際にルーティングを追加したり、コンポーネントを作成したりして機能面の確認をしてみてください。

Gitでの変更の取り消し方

Gitでバージョン管理をしているとステージしちゃったけど元に戻したい、コミットしちゃったけどやっぱりやり直したいという状況になることがあると思います。今回はそんな時にどうすれば良いのか解説していきたいと思います。

Gitを使っていて変更を取り消すケースは大きく分けて３パターンあります。

• 作業中の変更を取り消す
• ステージしたファイルを取り消す
• コミットしたファイルを取り消す

作業中の変更を取り消す

作業中のファイルを取り消すには git checkout コマンドを利用します。最後のコミットから作業をしてステージするまでにやっぱり初期状態（最後にコミットした状態）に戻そうと思った時に使えます。まず、変更を加えたファイルを戻す場合は 'git checkout --' 以降に変更したファイル名を記述します。ファイルではなくディレクトリーで指定したい場合はディレクトリーを記述してください。とりあえず変更があったファイル全てを戻したい場合は 'git checkout -- .' と ピリオドを最後に打ちます。

$ git checkout -- <ファイル名>
$ git checkout -- <ディレクトリー名>
$ git checkout -- .

ステージしたファイルを取り消す

作業してステージした後からやっぱりステージを取り消したいと思った時には git reset コマンドを利用します。先ほどの git checkout と同じようにファイルを指定する場合は 'git reset HEAD -- ' 以降にファイル名を記述し、ディレクトリーの場合や全変更を対象とする場合も同じロジックです。ポイントは git reset してもステージの解除が行われるだけで、ファイルの内容は戻らないというところです。もし、ファイルの変更内容も戻したい場合は git reset した後、 git checkout をしましょう。実のところこのコマンドは git add した後（ステージした後）に git status すると (use "git reset HEAD ..." to unstage) と アンステージする場合はこのコマンド使ってねとTipsを表示してくれています。コマンドなんだっけと思った時には git status してみましょう。

$ git reset HEAD -- <ファイル名>
$ git reset HEAD -- <ディレクトリー名>
$ git reset HEAD -- .

コミットしたファイルを取り消す

コミットした後にやっぱり取り消したいと思った時には以下のコマンドを利用します。直前のコミットを修正したいとなった時はまず修正作業を行い、一旦保存してから再度ステージします。ここで 'git commit --amend' を打ち込みます。するとエディタが立ち上がりますので、コミットのコメントを書き直して保存すれば完了です。この 'git commit --amend' はコミットしたコメントを書き直したい場合などでも利用することができます。
（＊リモートリポジトリに一度プッシュしたコミットは取り消してはいけません。）

$ git commit --amend

まとめ

Gitで変更を取り消したい状況をいうのは作業しているとよく発生すると思いますのでぜひ活用頂ければと思います。

Gitコマンドの入力をエイリアスを使って短縮しよう

Gitでのバージョン管理をコマンドラインで行うとなるとやはりそれぞれのコマンドを短縮したいと思うことが多々あるかと思います。特に良く使うgit コマンドなどは少ない文字数で打ち込めると便利です。記事タイトルにあるエイリアスとはコマンドを別名で登録することを意味します。

では早速gitコマンドにエイリアスつける方法を見ていきましょう！

エイリアスの付け方

globalにするとプロジェクトだけでなくPC全体の設定とすることができます。その為globalを入れるのがオススメです。

$git config --global alias.ci commit
$git config --global alias.st status
$git config --global alias.br branch
$git config --global alias.co checkout

参考になれば幸いです。

Gitでのバージョン管理について

Webサイト製作やアプリケーション開発などITに関わる仕事をしているとGitという言葉を耳にしたり目にしたりすることがよくあるのではないでしょうか？今回はGitとは何者なのかとGitを利用することのメリットについて紹介したいと思います。また最後にGithubを使ったバージョン管理の始め方についても少し解説したいと思います。

Gitとは何か

Gitとはプログラムのソースコードを記録し、変更を追跡することができる分散型のバージョン管理システムのことです。元々GitはLinux開発者であるリーナス・トーバルズさんが開発で利用する為に作ったツールですが、2005年から現在まで多くのプログラマーやエンジニアに利用されてきたという歴史があります。

急にバージョン管理といった言葉が出てきて何だそれ！？と思われた方もいるかも知れませんがバージョン管理はファイルをバージョンとして記録することでファイルの状態を管理していく手法です。

もう少しわかり易く解説するとテキストファイルを複数人で共有サーバーを用いて管理する場合などがある場合、ファイル名に "kaisetsu.txt", "kaisetsu190301.txt", "kaisetsu190302.txt"といった具合に他の人と被らないようにまた、元のファイルを上書きしてしまわないように管理することがあったりするのではないしょうか？実はこのような管理も歴としたバージョン管理と言えるでしょう。

バージョン管理例

ただ、このような管理をしていた場合であってもチーム内でお互いの管理認識が統一されていなかったり、ふとした瞬間に気を抜いていてファイルを上書きしてしまったなんて経験をしたことがないでしょうか？このような誤操作防ぐ為にも管理を人間の頭で手動管理するのではなくより効率的にファイルの状態を管理しようというのがGitを使ったバージョン管理です。また、Gitでバージョン管理することで原稿を書いていてやっぱりこの時のデータに戻したいと思った時にも簡単にその時のデータ（バージョン）に戻すことができるようになります。

Gitのメリット

Gitのメリットは上述のGitとは何かで解説しているように毎回保存したデータを記録し、人間の代わりにその時のデータにバージョンを割り振ってくれることにあります。また、誰かどのような操作をしたかもGitに記録されたログを見ることでいつでも確認することができます。主なメリットは以下の通りです。

• ファイルの最新の状態がわかる
• いつ、誰が、何をどうしたか（When, Who, What, How）がわかる
• 以前の状態に戻せる

Githubを使ったバージョン管理の始め方

Gitではバージョン管理する為にリポジトリというデータを管理する場所を用意して利用します。リポジトリにはリモートリポジトリとローカルリポジトリが存在し、そこにファイルの変更履歴などを保存します。リモートリポジトリはその名の通り、リモート（遠隔）で操作する保存先で複数人で作業する場合などはこのリポジトリを基点にファイルを管理します。ローカルリポジトリは個人のPC内でバージョン管理する場所になります。簡単にGitを使った操作の流れをまとめるとざっと以下のようになります。
作業 => ローカルリポジトリに保存 => リモートリポジトリに保存

では早速Gitを使ったツールの準備をしていきましょう。まずリモートリポジトリを用意する為にGithubでアカウントを作成します。
Githubは先ほど紹介したGitの仕組みを利用して世界中の人がソースコードを公開し、保存できるようにしたサービスです。Githubを利用することでリモートリポジトリを無料で作成し、チームメンバーと共有することができます。

ただし、Github自体オープンソースを前提としたサービスの為誰でも作成したファイルの中身を見ることができてしまいます。仕事で利用する場合など、あまりソースコードやファイルの中身をオープンにしたくない場合は有料版でプライベートなリポジトリを作成することもできます。また、Github以外にもBitbucketといったようにリモートリポジトリを利用できるサービスがあるので状況に応じて使い分けてもらえればと思います。

Gitでリポジトリを用意するに当たって２種類の方法があります。まず一つ目がローカルリポジトリを先に作成して作業を行い、リモートリポジトリへ保存するパターンです。

ローカルリポジトリから用意するパターン

Githubでアカウントを作成したらまずはローカル環境でGitを使えるようにしていきましょう。
ターミナル（Macの場合）を開いて任意のファイルまで移動します。ここでは git というファイルを用意したとします。

 $ cd (ファイルをドラッグアンドドロップ) 

次にgit init コマンドでGitを初期化します。この操作を行うと以下のようなファイルが作成されていることが確認できるはずです。

 $ git init

.		..		.DS_Store	.git

ls -aコマンドでファイルの中身を確認すると .git という隠しファイルが存在していることがわかります。さらに.gitファイルの中身を展開すると以下のようなファイル構成になっています。

.gitファイルの中身

主にこのファイルの中でファイルのバージョン管理に関する処理が行われます。以上でローカルでバージョン管理する準備が整いました。では早速、何かファイルを作成しローカルリポジトリに記録を残していきましょう。ここでは以下のようにindex.htmlをgitファイル内に作成したとします。

作業ファイル例 index.html

Gitでは作業の履歴を記録する際には以下のように段階的に操作を行います。各操作の詳しい説明はここでは割愛します。Gitコマンドの操作やコマンドラインを普段行ったことがない方はとりあえず真似て打ち込んでみてください。

ファイル変更 => ステージ => コミット => リモートリポジトリへプッシュ

index.html作成後、git addコマンドでステージへindex.htmlを上げます。

 $ git add .

ステージしたファイルを以下コマンドでコミットします。-m 以降のシングルクォテーションの間には作業の履歴に残すコメントを記述します。ここではCreate index.htmlとコメントを残しておきます。

 $ git commit -m 'Create index.html'

次にリモートリポジトリをGithubに用意します。Githubアカウントの管理画面を開き、Repositories を選択します。

[

Newボタンからリポジトリを新規作成します。

Repository nameは自由に決めてもらって問題ありません。ここではtestとしておきます。Descriptionは空白でもOKです。リポジトリはPublicにすれば無料で利用できます。あとはそのまま何も変更せずにCreate repositoryしましょう！

では早速ローカルリポジトリの内容をリモートリポジトリにも反映（プッシュ）したいと思うところなのですが、その前にGitでリモートリポジトリの登録を行う必要があります。それには以下のコマンドを利用します。originはリモートリポジトリ名で慣例的にoriginと名付けます。orogin以降のURLは先ほど作成したリモートリポジトリのURLになります。リモートリポジトリを選択するとこのURLをコピーできますのでそのままコピペしましょう。

 $ git remote add origin http://xxxxxx.xxx/xxxx

これでリモートリポジトリに反映（プッシュ）する準備が整いました。早速以下コマンドでプッシュして行きましょう。プッシュというのはローカルリポジトリでコミットした内容をリモートリポジトリのブランチに反映することを意味します。

 $ git push origin master

このコマンドはoriginというリモートリポジトリのmasterというブランチに反映してくださいという命令になります。
Githubのリモートリポジトリを確認すると先ほどローカルで作成したindex.htmlファイルがアップされていることが確認できたかと思います。

既存のリモートリポジトリから用意するパターン

既存のリモートリポジトリから用意する場合は簡単です。利用するリモートリポジトリをGithubで開きClone or DownloadボタンをクリックしてURL若しくはSSHをクリップボードにコピーします。次に以下コマンドにコピーした内容を貼り付けて実行します。

 $ git clone http://xxxxxx.xxx/xxxx

まとめ

以上でGitでバージョン管理する環境が整いました。Gitは今やエンジニアだけでなく幅広い職種の方々が利用するようになってきています。実際、バージョン管理が必要とされる機会は社会のITインフラが整うにつれ増えてくると思いますのでこれまで使ったことがなかったという方はぜひ利用してみてはいかがでしょうか？