Linux での利用を前提としたリポジトリには、ファイル名に Windows の禁則文字が含まれている場合があります。¹ しかし、Git for Windows ではファイル名に禁則文字を含むリポジトリを Clone できません。² とはいえ、禁則文字を含まないファイルまで Clone できないのでは不便です。どうにかできないものか。

「まばらに」 Clone して問題を回避する

protectNTFS をオフにした状態で、sparse-checkout を活用すれば無事に Clone できます。

# 空のリポジトリを作成する
mkdir <リポジトリ名>
Set-Location <リポジトリ名>
git init
git remote add origin <リポジトリのURL>

# 禁則文字を含むファイルをチェックアウトするとエラーになる機能を無効化
git config core.protectNTFS false
# sparse-checkout を有効化
git config core.sparsecheckout true

# .git\info\sparse-checkout にクローン対象とするパスを記述する
# このとき、エンコードが UTF-8（BOMなし）であることに注意する
[System.IO.File]::WriteAllLines("${PWD}\.git\info\sparse-checkout", @("クローン対象1";"クローン対象2";...), (New-Object "System.Text.UTF8Encoding" -ArgumentList $false))

# 「まばらに」 Clone
git pull origin master

protectNTFS が有効な状態では、sparse-checkout でクローン対象とするパスを限定しても、 禁則文字を含むファイルがあると問答無用でエラーになってしまいます。なお、protectNTFS は Git for Windows 2.25.0 から含まれており、以前のバージョンでは sparse-checkout するだけで問題を回避できていました。

参考リンク

• Git for Windows now fails as expected when trying to check out files with illegal characters in their file names.
• git sparse checkout で clone せずに一部のサブディレクトリだけを pull/checkout する
• Git pullエラー：ファイルを作成できません（無効な引数）
• Partial Clone

---

1. 一例です。 ↩

2. Windows 10 の場合、「\」「/」「:」「*」「?」「"」「<」「>」「|」がファイル名に利用できません。 ↩

作業ブランチを作成

ブランチ一覧を表示

$ git branch -a

ブランチを作成して移動

$ git checkout -b [branch_name]

push

全ファイルをステージング

$ git add .

コミット

$ git commit -m "Commit Message"

リモートリポジトリにプッシュ

$ git push origin [branch_name]

ブランチをマージ

masterブランチに移動

$ git checkout master

[branch_name]をマージ

$ git merge [branch_name]

push

$ git push origin master

参考

[Git] 基礎 ~master反映まで~
git mergeを使ってブランチをマージする方法【初心者向け】
gitを使用したブランチ作成からpushまでの簡単な流れ
【Git】安全にリモートブランチにPushする

背景

Macでgit-completionを使いたくなって設定方法を調べてみたが、Homebrewを使ってGitをインストールした前提での説明ばかりがヒットする。
私はひねくれ者だったらしく、GitのインストールにはHomebrewを使っていなかった。

Homebrewを使わずにGitをインストールした場合でも、git-completionを使えるようにする手順をまとめる。
ついでに、git-promptも設定した。

手順

1. 本体をダウンロード

# git-completion
curl https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash -o ~/.git-completion.bash

# git-prompt
curl https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh -o ~/.git-prompt.sh

2. ~/.bashrcの編集

下記を追記する。
ファイルが存在しない場合は新規に作成する。

~/.bashrc

source $HOME/.git-completion.bash
source $HOME/.git-prompt.sh

GIT_PS1_SHOWDIRTYSTATE=true
export PS1='\h\[\033[00m\]:\W\[\033[31m\]$(__git_ps1 [%s])\[\033[00m\]\$ '

3. ~/.bash_profileの編集

ターミナル起動時に~/.bashrcが読み込まれるように、下記を追記する。
ファイルが存在しない場合は新規に作成する。

~/.bash_profile

if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi

4. ターミナルを再起動

これで、gitの各種コマンドのタブ補完と、プロンプトにリポジトリの状態が表示されるようになる。

Gitの勉強を本格的に始めるので、忘備録を兼ねて投稿していこうと思います。

1ファイルの追加方法(git add)

~ $ git add #ファイル名
# git add . で全てのファイルをaddすることが可能

gitにファイルを追加する方法。ファイル名は　abc.txtなど
このとき、addされたファイルはステージングエリアに追加される
【ステージングエリアとは】
ステージングエリアとはGitレポジトリにコミットするファイルを置いておくためのエリア。
ステージングエリアがあることによって、いきなりセーブされずに、セーブするファイル（フォルダ）群を選択することができる。

2リポジトリに変更を記録するコマンド(git commit)

~ $ git commit

１つの作業ごとに１コミットを心がける。
それにより、どの作業を何のためにしたかをすぐ確認できるのが魅力。

そのためにコミットメッセージは「何をどうして変更したのか」が分かるように記載する必要がある。
１行目：変更内容の要約
２行目：空行
３行目：変更した理由

commitした際、デフォルトではVIMというエディタで開かれ、操作方法が少し特殊。
1.半角英数字に切り替え「i」を入力するとメッセージが入力できるようになる
2.コメントを入力（初めての際は initial commit と入力する
3.escキーを入力した後、「:wq」と入力しEnterを押すことで保存が可能となる

3リモートリポジトリ/Git Hubに登録(git push)

4 状況確認のコマンド(git status)

~ $ git status

このコマンドを打つことで最新のファイル変更状況などを確認できる。

5変更履歴の確認(git log)

~ $ git log

このコマンドを打つことで、誰がどんな変更をしたかを確認することができる。
下記のオプションを追記することで、見易く情報を習得することも可能。

~ $ git log --oneline
#1行で表示することが可能

~ $ git log -p index.html
#ファイルの差分を表示する index.htmlはファイル名

~ $ git log -n 3
#最新の変更から３つまでを表示　３の部分を９にすると9つまで表示といった様に変更可能
#--onelineと組み合わせて使用することも可能

ちなみにGit logは「J」を入力で下にスクロール、「K」で上にスクロールすることができる。終了するときは「Q」を入力する。

6 変更差分を確認(git diff)

~ $ git diff
#ステージとの差分を表示

「git add」や「git commit」をする前にどの様な変更をしたのか、確認をする際に利用。

~ $ git diff HEAD
#ステージとコミットとの差分を表示

Gitの勉強を本格的に始めるので、忘備録を兼ねて投稿。
UdemyのGit：はじめてのGitとGitHubで学習。

ファイルの追加方法(git add)

~ $ git add #ファイル名
# git add . で全てのファイルをaddすることが可能

gitにファイルを追加する方法。ファイル名は　abc.txtなど
このとき、addされたファイルはステージングエリアに追加される
【ステージングエリアとは】
ステージングエリアとはGitレポジトリにコミットするファイルを置いておくためのエリア。
ステージングエリアがあることによって、いきなりセーブされずに、セーブするファイル（フォルダ）群を選択することができる。

リポジトリに変更を記録するコマンド(git commit)

~ $ git commit

１つの作業ごとに１コミットを心がける。
それにより、どの作業を何のためにしたかをすぐ確認できるのが魅力。

そのためにコミットメッセージは「何をどうして変更したのか」が分かるように記載する必要がある。
１行目：変更内容の要約
２行目：空行
３行目：変更した理由

commitした際、デフォルトではVIMというエディタで開かれ、操作方法が少し特殊。
1.半角英数字に切り替え「i」を入力するとメッセージが入力できるようになる
2.コメントを入力（初めての際は initial commit と入力する
3.escキーを入力した後、「:wq」と入力しEnterを押すことで保存が可能となる

リモートリポジトリ-Git Hub-に登録(git push)

まずローカルリポジトリをリモートリポジトリに登録する必要がある。

~ $ git remote add origin https://github.com/user/repo.git
#今後はoriginという名前でGitHubリポジトリにアクセスできるよといった意味

~ $ git push origin master
#リモートリポジトリへ送信　登録したGitHubへ送信

~ $ git push origin feature
#master以外のブランチへ送信　featureへブランチを送信

状況確認のコマンド(git status)

~ $ git status

このコマンドを打つことで最新のファイル変更状況などを確認できる。

変更履歴の確認(git log)

~ $ git log

このコマンドを打つことで、誰がどんな変更をしたかを確認することができる。
下記のオプションを追記することで、見易く情報を習得することも可能。

~ $ git log --oneline
#1行で表示することが可能

~ $ git log -p index.html
#ファイルの差分を表示する index.htmlはファイル名

~ $ git log -n 3
#最新の変更から３つまでを表示　３の部分を９にすると9つまで表示といった様に変更可能
#--onelineと組み合わせて使用することも可能

ちなみにGit logは「J」を入力で下にスクロール、「K」で上にスクロールすることができる。終了するときは「Q」を入力する。

変更差分を確認(git diff)

~ $ git diff
#ステージとの差分を表示

「git add」や「git commit」をする前にどの様な変更をしたのか、確認をする際に利用。

~ $ git diff HEAD
#ステージとコミットとの差分を表示

こんにちは、現在フリーのマークアップエンジニアとして活動しているしょーごと申します。
最近はYouTubeなどでも発信しています。

普段はWordPress構築や静的サイトコーディングをメインとしているのですが、
最近機会に恵まれまして、Nuxt.jsのマークアップ部分（ロジック以外）を担当しております。

結果的に大苦戦してベテランの方に大迷惑をかけてしまったので、
マークアップエンジニアやデザイナーがNuxt.jsのマークアップ部分をアサインされた場合に必要な知識をまとめました。

Nuxt.jsはweb制作業界にも少しづつ浸透してきているので、マークアップエンジニアやデザイナーさんもいずれ触る期間があるかもしれない点で、同業の方々に参考にして頂けたらと思います。

俺の屍を超えていけ

Nuxtってなんなの？

Vue.js単体では開発に不足している機能が多いです。なので従来はプラグインやライブラリを導入していましたが、Nuxtは色んな機能が最初から盛り込まれているフレームワークになります。
Vue.js+ライブラリの集まりみたいなものです。

Nuxt.jsのマークアップ部分とは？

Nuxt,jsはご存知の通り、単一ファイルコンポーネントと呼ばれています。

HTML,CSS,JSが一つのファイルにまとまっています。

以下コードは超適当なので、scriptにロジックがかいてあるんだとだけ認識頂けたら?

default.vue

<template>
  <div>
    <div class="posts overflow-scroll mb-24">
      <post v-for="(post,index) in posts" :key="index" :post="post" />
    </div>
      <el-upload v-if="!imageUrl" action :show-file-list="false" :http-request="uploadFile">
        <el-button size="small" type="primary">Click to upload</el-button>
      </el-upload>
      <el-input type="textarea" :rows="8" placeholder="Please input" class="mt-8" v-model="text"></el-input>
  </div>
</template>
<script>
import Post from "~/components/Post.vue";
import { db, firebase } from "~/plugins/firebase";
export default {
  components: {
    Post,
  },

  data() {
    return {
      posts: [],
      imageUrl: null,
      text: null,
    };
  },
  methods: {
    async post() {
      await db.collection("posts").add({
        text: this.text,
        image: this.imageUrl,
        createdAt: new Date().getTime(),
      });
      this.text = null;
      this.imageUrl = null;
      window.alert("保存されました");
    },
  },
  mounted() {
    db.collection("posts").onSnapshot((snapshot) => {
      snapshot.docChanges().forEach((change) => {
        const doc = change.doc;
        if (change.type === "added") {
          this.posts.unshift({ id: doc.id, ...doc.data() });
        }
      });
    });
  },
};
</script>
<style lang="scss" scoped>
input {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.posts {
  text-align: center;
}

ここのscript以外が作業範囲になります。
つまり、チーム開発が前提です。

厳密に言えば、

1.HTML部分のコーディング
2.Scoped CSS、グローバルCSSの記述と設計(Sassが標準)
3.コンポーネント分け（ここだけscript部分）
4.状態管理でのclass出し分け（v-forやv-bind,propsあたり）
5.CSSフレームワークの利用と共存（Tailwindやbulma、Element-uiやBuefyなど）

このあたりが業務範囲になります。
その他はプログラマーさんに担当していただきます。

プログラマー→フロントエンド、フルスタックエンジニア
マークアップエンジニア→コーダー、デザイナー

では、これらをふまえてNuxt.jsのマークアップ部分を担当する上で何を知っておくといいのか解説します。

①Nuxtのコンポーネント、レイアウト、ページルーティング

やはりここが一番重要になるかと思います。
以下公式の画像になります。

公式サイト：ビューについて

Nuxtでは一般的にビューの表示は

1.レイアウト（全ページ読み込まれる）
2.ページ
3.コンポーネント

の3つに別れます。

レイアウトの役割

レイアウトは各ページでの共通要素を書きます。
大抵はheaderとfooterコンポーネントを呼びこむぐらいだと思います。

default.vue

<template>
  <div>
    <app-header />
    <nuxt />
    <app-footer />
  </div>
</template>

<nuxt />という部分に、各ページの内容が入ってきます。

ページの役割

そのページ専用の内容を書いていきます、
直接HTMLを書いたり、コンポーネントを呼び込んで構築していきます。
レイアウトでheaderとfooterは呼び込み済みなので、それ以外の部分になります。

またNuxtではルーティングがすでに設定してあるため。例えばusersページを作る際には、

これでlocalhost:3000/usersでその配下のindex.vueを表示させることができます。

pagesディレクトリ以下がそのままページのディレクトリ構成を示しています。

コンポーネントの役割

header,footer,sidebar,navigationなどダントツでファイル数が多くなります。
基本的に共通化できそうな塊はだいたいコンポーネント化していきます。
レイアウトやページで読み込んで表示させていきます。
大きめのコンポーネントの場合、コンポーネントの中でコンポーネントを読み込むなどの状況もよくあります。

私のブログを例にしてみます。

赤枠：レイアウト
緑枠：ページ
青枠：コンポーネント

弊ブログ：しょーごログより

コンポーネントの読み込みはimportとexport defaultをセットで使います。

userコンポーネントを読み込む場合

index.vue

<template>
  <div class="users">
    <user />
    <user />
  </div>
</template>

<script>
import User from "~/components/User.vue";
export default {
  components: {
    User,
  },
};
</script>

コンポーネント間でのメソッドや状態の受け渡しなどもあるので、プログラマーと相談しつつコンポーネント分けの粒度を決めるといいかなと思います。

②Scoped CSSとグローバルCSS設計

Scoped CSSについて

Scoped CSSは、scopedを記入するだけで使えます。その単一ファイル内にしかCSSのスコープが及ばないため、グローバル汚染がなくよく
「CSS is too fragileからの脱却だ！」的に叫ばれますが、しかしやはり銀の弾丸はなく、h2やsectipnなどのセレクタに直接指定すると普通に子コンポーネントを汚染します。

参考サイト：ICS Media

このようにカスタムデータ属性により影響範囲を限定的にしています

まあ普通にBEMとか使っていれば問題ないです。

Scoped CSSにおけるクラス設計

詳しくは以下の記事に譲りますが、Scoped CSSでも暴虐無人プレイができるわけではないです。
ただ、普通にBEM的にクラス名を書いていけば、バッティングの可能性は相当低くなるので、

Web制作にNuxt.jsが有用である理由の一つとなっております。

Scoped CSSにおけるCSS設計手法

グローバルCSS

全体に適用したいCSSはassets以下にcssファイルを置いて、それをnuxt.config.jsで読み込むのですが、とりあえず「Scoped CSS」と「グローバルCSS」に分かれているらしいぐらいの認識で大丈夫です。
reset.scssとか_variables.scss,_mixin.scssなど全体で使いそうなものを定義していきます。

③状態変化でクラスの出し分け

v-bind,props

意外にここも知っておいたほうがいいです。
例えばよく「トップページのみヘッダーのデザインが違う?」ということはよくあります。
しかしレイアウトでheaderコンポーネントを読み込んでいるため、トップページのみ変更するのは難しく感じます。

そこでpropsとv-bindが出てきます。

手順としては

1.トップページ専用のレイアウトを準備し、利用
2.topであることをBooleanで管理し、trueのときにheaderにクラス付与

となります。

トップページ専用のレイアウトをtop.vue、trueを渡す先のheaderコンポーネントははheader.vueとし、トップページの表示はindex.vueが行います。

まずはtop.vueで:is-top="true"とすることでトップであることをheaderコンポーネントに伝えます。

top.vue

<template>
  <div>
    <header :is-top="true" />
    <Nuxt />
    <footer />
  </div>
</template>

<script>
import Header from '~/components/header-nav'
import Footer from '~/components/footer-nav'

export default {
  components: {
    Header,
    Footer
  }
}
</script>

その後、index.vueではレイアウトとしてtop.vueを使うと宣言します。

index.vue

layout: 'top',

headerコンポーネントでpropsによりtrueを受け取り、v-vindでtrueのときにclassを付与します。

header.vue

<template>
  <header :class="{ 'top-header' : isTop === true }">
  </header>
</template>
<script>
  props: {
    isTop: {
      type: Boolean
    }
  }
</script>

これにより、トップページにのみtop-headerというクラスが付与できるようになります。

他にもv-onやv-forについても知っておいたほうがいいです。
v-onはモーダルの表示、v-forは<li v-for="(item, index) in items">などでindexを取り出しループ内で動的にクラス名を付与したいときに、役立ちます。
ここでは詳しくは割愛します。

④npm関連

直接Nuxtとは関係しませんが、npmを普段より利用しているかも重要です。
マークアップ側が自分でパッケージを入れることはほとんどないと思いますが、必須知識です。

npm install

チーム開発ではよくパーケージが新しくインストールされていたりします。
その際に、「package.jsonが更新されてる！！ということはnpm iすればいいんだ！！」と知っていればいいのですが、知らないとエラー画面に飛ばされます笑

npm run dev

Nuxtのサーバーを起動するnpm scriptsです。
ファイルを保存したら、画面を自動リロードしてコンパイルしてくれます。

nvm

Node.jsのバージョン管理ツールです。
開発開始前にnode.jsのバージョンはチームメンバーで合わせておくべきです
npmで入れるモジュールが、Nodeのバージョンに依存するため、チームメンバーのグローバルNodeのバージョンが違うと、地獄と化します。

⑤Git

これもNuxtから離れますが、チーム開発ではかなり重要です。
Nuxtを扱うような案件では十中八九必要でしょう。
いやテーム開発でGit運用とか常識やろと声が聞こえそうですが、1人Gitしか経験なく、マークアップ案件でGithub flowでのチーム開発とかほとんどないので自分は大苦戦しました...
diffが見やすいsourcetreeで大丈夫だと思います。

最低限抑えておくべきこと

• github flow（機能やページ毎にfeatureブランチを切って運用するぐらい）
• プル→ステージング→コミット→プッシュ→プルリクの流れがわかる
• コンフリクト対応
• スタッシュを知っておく（割と変更内容を退避させるため）

ぐらいかなと思います。コンフリクトの解消など自分はパニクってしまいレビュアー先輩エンジニアの方によしなにしていただきマージしてもらいましたが、これは迷惑かけたのであまりよくないと思いました。

Gitでの開発流れ

1.最新origin/masterからローカルmasterにpull（この際にpackage.jsonが更新されていたら、npm iしてパッケージを入れておく）
2.masterからfeatureブランチを切り作業開始
3.作業が完了したらコミットしプッシュする
4.プルリクを出し、レビュアーにレビューを受ける、問題なければマージされる、問題あれば修正し再度コミットプッシュする
5.マージされたらmasterにチャックアウトし、必ずプルし最新のmasterにする。
6.そして次のfeatureブランチを切り、作業開始

少人数の開発&トラブルがなければこんな感じだと思います。

Nuxt.jsでのマークアップ案件は増えるのか

NuxtはfirebaseやヘッドレスCMSと組み合わせてJamstackで利用されているイメージですが、ロジック部分に集中したい人は一定層いると考えています。
その際に、Nuxtの構造を理解しているマークアップエンジニアにスタイリングを外注できたら楽そうなので、
需要としてはポツポツ発生していそうだと思います。

Nuxtオンリーでの静的サイト制作については、未知数です。
Web制作で使われるならVueでのアニメーションの知識が必要になるのと、枯れているjQueryの資産が偉大なので、すぐに広まるのは考えにくいです。
しかし保守性の面でコンポーネントやScoped CSSが大変魅力的なので、大規模サイト制作で真価を発揮するかなと思っています。

事前に学習で使用していた教材

Vue.js&Nuxt.js超入門
Gitが、おもしろいほどわかる基本の使い方33

はじめに

人生で初めて記事というものを書いてみる
プログラミング学習を始めたばかりで、githubへのpushにだいぶ苦労したので、
具体的な手順をまとめることにした

リポジトリの作成

git init

ターミナルを開いて、任意の名前のディレクトリを作成する。
今回はlessonという名前をつけて、ここにディレクトリを作成する。
git initをタイプしたそのディレクトリで、gitを使えるようになる。

$ mkdir lesson
$ cd lesson
$ git init
Initialized empty Git repository in /home/ec2-user/lesson/.git/
ec2-user:~/lesson (master) $ 

git add

次に、ディレクトリにファイルを追加する。
touchはファイルを作るコマンド
今回はlessonというファイルを作成

$ touch lesson

このままだと、トラッキング状態ではないので、gitで管理できるようにgit addコマンドをタイプする。

$ git add トラッキング状態にしたいファイル名

なお、ディレクトリ内にある全てのファイルをトラッキング状態にするコマンドもあるよ！

$ git add lesson
$ git add . //そのディレクトリないにあるファイル全部をトラッキング状態にする

コミットするファイルは事前にトラッキング状態にしておく必要がある。
トラッキング状態にするためにはaddコマンドを
トラッキング状態になったファイルは、一時的にステージング領域っていうなんか異空間的なところに保存される。

git commit

リモートリポジトリにソースコードを保存するためには、commitと言われる確定作業が必要になるよ！
-m"コミットメッセージ"　メッセージでコミットした理由が他の人にわかるようにしよう

$ git commit -m"lesson commit"

git log

コミットしたデータの確認

$ git log
commit ×× (HEAD -> master)
Author: ”yuki” <”〇〇.com”>
Date:   Wed Aug 19 23:13:43 2020 +0000

    lesson commit

リポジトリの作成

[githubの操作]
github上でリモートリポジトリを作成

push

pushのコマンドは以下の通り

$ git remote add origin git@github.com:アカウント名/リポジトリ名.git
$ git push -u origin master

今回の場合

$ git remote add origin git@github.com:yuktkhs46/lesson.git                                                  
$ git push -u origin master

こんな感じの画面がでてきたらOK！
githubのリポジトリを確認してみよう

numerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 216 bytes | 216.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To github.com:yuktkhs46/lesson.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

ちゃんとpushできてるね！

新規リポジトリを作成する

「Gitリポジトリー」の「新規ローカルGitリポジトリーの作成」

リポジトリを作成するパスを入力し、「作成」

コミット

コミット対象のファイルを追加する。

対象のプロジェクトにカーソルを合わせ右クリック→「チーム」→「コミット」を選択すると[Gitステージング」が開く
あとは諸々入力してコミット
(macならoption + command + 3)

コミット後、コミットされたかは「チーム」→「ヒストリーに表示」から確認できる

リモートリポジトリの設定

「Gitリポジトリ」タグで「リモート」右クリック→「リモートの作成」
リモート名はデフォルトのまま(origin)で「作成」
URIにリモートリポジトリのパスを入力して「完了」

「追加」を選択してローカルブランチ、リモートブランチにrefs/heads/master
を入力し(masterと打ち出てくる候補を選択すれば入力される)「OK」
プッシュの構成ウィンドウで「保存」

リモートの下に「origin」が追加される
この時点でプッシュの構成（上り）は完了

フェッチの構成（下り）の設定を行う
緑の下矢印のアイコン行右クリック→「フェッチ構成」
URIは設定されているため「追加」→ソース欄にrefs/heads/masteを入力し
「完了」→「保存」

こちらで詳細に説明されている

リモートリポジトリへのプッシュ

ステージされた変更がある状態では「Gitステージング」タブの「コミットおよびプッシュ」でプッシュができる。
ステージされた変更がない状態(「コミット」のみを行っていたがその内容をプッシュしたい場合)では「チーム」→「アップストリームへプッシュ」でプッシュできる。

コミット前の状態で変更を取り消す

「Gitステージング」タブで変更を取り消したいファイルを右クリック→「HEADリビジョンと置換」

コミットした変更をコミット前の内容に戻す

「ヒストリー」タブで対象のコミット行を右クリック→「コミットを戻す」
すでにプッシュしていた場合も同様で、「コミットを戻す」選択後、プッシュをすれば
コミット前の内容がプッシュされる。(履歴は残る)