• 環境
  • git version 1.8.3.1
  • CentOS Linux release 7.6.1810 (Core)

参考 : [git] 一部のファイルだけをcommit対象にするにはgit addの後にgit commit - 綾小路龍之介の素人思考

コミットするブランチを確認する

既存ブランチの場合 : 現在のブランチを確認する

うっかり違うブランチにコミットしないように現在のブランチを確認して、コミットしたいブランチでなかったら切り替える。

$ git branch --contains=HEAD
* target-branch

新規ブランチの場合 : ブランチを作る

$ git checkout -b target-branch
M   my-project/.classpath
A   my-project/src/main/java/ponsuke/dto/code/Range.java
M   my-project/src/main/webapp/resources/js/1_03/Update.js
M   my-project/src/main/webapp/user/sectionEdit.xhtml
M   my-project/src/main/webapp/user/sectionView.xhtml
Switched to a new branch 'target-branch'

変更されているファイルを確認する

変更したり新規作成したファイルを確認する方法

$ git status

Changes not staged for commit のところに変更されたファイル、
Untracked files のところに新規作成(まだGitの管理外)したファイル
が表示される。

$ git status
# On branch target-branch
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#   modified:   my-project/.classpath
#   modified:   my-project/src/main/webapp/resources/js/1_03/Update.js
#   modified:   my-project/src/main/webapp/user/sectionEdit.xhtml
#   modified:   my-project/src/main/webapp/user/sectionView.xhtml
#
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#   .gitignore
#   build/
#   my-project/src/main/java/ponsuke/dto/code/Range.java
#   my-project/src/main/resources/jdbc.properties
#   my-project/target/

変更内容を確認する

ローカルでの変更内容を確認する方法

$ git diff HEAD {ファイルパス}

$ git diff HEAD my-project/src/main/webapp/resources/js/1_03/Update.js
$ git diff HEAD my-project/src/main/webapp/user/sectionEdit.xhtml
$ git diff HEAD my-project/src/main/webapp/user/sectionView.xhtml
# 新規作成したファイルはcatで見る
$ cat HEAD my-project/src/main/java/ponsuke/dto/code/Range.java

コミットしたいファイルを指定する

任意のファイルをコミット対象にする方法

$ git add {ファイルパス}

変更内容を確認して意図通りになっていたらコミット対象にする。

$ git add my-project/src/main/webapp/resources/js/1_03/Update.js
$ git add my-project/src/main/webapp/user/sectionEdit.xhtml
$ git add my-project/src/main/webapp/user/sectionView.xhtml
$ git add my-project/src/main/java/ponsuke/dto/code/Range.java

# コミットされるファイルを確認する
$ git status
# On branch target-branch
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#   new file:   my-project/src/main/java/ponsuke/dto/code/Range.java
#   modified:   my-project/src/main/webapp/resources/js/1_03/Update.js
#   modified:   my-project/src/main/webapp/user/sectionEdit.xhtml
#   modified:   my-project/src/main/webapp/user/sectionView.xhtml
#
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#   modified:   my-project/.classpath
#
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#   .gitignore
#   build/
#   my-project/target/

コミットしてプッシュする

# Commitする
$ git commit -m "Commitコメント"
[target-branch 6cfc522] Commitコメント
 7 files changed, 376 insertions(+)
 create mode 100644 my-project/src/main/java/ponsuke/dto/code/Range.java

# Pushする
$ git push
Counting objects: 72, done.
Delta compression using up to 16 threads.
Compressing objects: 100% (32/32), done.
Writing objects: 100% (41/41), 5.48 KiB | 0 bytes/s, done.
Total 41 (delta 22), reused 0 (delta 0)
remote: Resolving deltas: 100% (22/22), completed with 22 local objects.
To https://github.com/ponsuke/my-project.git
   6cfc522..72b5a16  target-branch -> target-branch

はじめに

令和という新しき時代の幕開けにもかかわらず、いまだに「FTPクライアントソフト」(FileZilla、WinSCPなど)でサーバーに手動ファイルアップ作業をしている人、いませんか？

そんなあなたに朗報！ちょっとした設定だけで、楽にファイルアップできる環境を整えられるんです。さあ、これからはFTPクライアントを立ち上げてちまちまアップする、そんなひと手間を減らしましょう！ (謎の通販番組調…)

まずはVS Code(※)でコード編集が完了したら、即サーバーアップできるおすすめの方法を紹介します。
※ 正式名称：Visual Studio Code。Microsoft製の無料コードエディター

また、別の選択肢についても若干触れています。検討のうえ適した方法をチョイスしてみてください。

本記事対象

対象となる人

• Webの仕事でFTPクライアントを使用している、または使用せざるを得ない人
• 個人サイト含む比較的小規模案件で、もっとお手軽にサーバーへファイルアップ・同期したい人

※ 要するに個人開発レベル + α くらいです

対象外の人

• CIツール(JenkinsやCircleCIなど)で自動デプロイでき、FTP等を介さない環境メインの人
• ホスティングサービス(GitHubやBitbucket、GitLab)などからリモートサーバーへ自動アップする機構を有している人
• 複数人開発で、ある程度複雑なリリースフローを持っていたり、十全な検証・確認作業が必要だったりする中～大規模プロジェクトに携わる人

選択肢1 VS Code拡張機能「SFTP」でサーバーにファイルを即アップする設定と方法

VS Codeは機能豊富で使い勝手が良く、拡張性の高い無料コードエディターです。Webコーディングをする人でまだ使ったことがなければ、ぜひ一度試してみてください。

さて、エディター上からファイルを即サーバーアップするには、「SFTP」という拡張機能をインストールして利用します。これによってVS CodeがFTPクライアントと同じ役割を果たし、わざわざテスクトップアプリを立ち上げてファイルアップする手間が軽減されます。

「FTPやSFTPって何だろう？」という人は良かったら以下参照記事をどうぞ。
-> 無料FTPソフト10種類を徹底比較！FTPの仕組みも一から教えます！
-> FTP/FTPS/SFTPとは！違いについて

SFTP同期の設定方法

1. 拡張機能「SFTP」のインストール
   ① VS Codeを起動し、左サイドバーの「拡張機能」アイコンをクリック
   ② 「拡張機能」欄の入力バーにsftpと入力すると、候補の一番上に「SFTP」拡張機能が表示されるので「インストール」をクリックする。「インストール」表示が消えたら使用可能です
   

2. VS Code上で設定ファイル作成
   ① Ctrl + Shift + P (macならCommand + Shift + P)で「コマンドパレット」が出現します。
   ここにSFTP: Configと入力実行します
   
   ② すると、プロジェクトルートに.vscode/sftp.jsonが自動で作成されます。sftp.jsonに必要な設定は、のちほど工程4にて入力していきます
   

3. 利用サーバーのサーバーパネル(管理画面)でSSH認証キーを発行
   筆者は個人でエックスサーバーを利用しているため、これを例に解説を進めます。エックスサーバーを利用していない人は、各自のサーバー環境でのSSH設定方法やパスワードの確認をお願いします。
   必要なのはSFTP接続するためのSSH設定(秘密鍵の作成)です。
   　
   ① エックスサーバー「サーバーパネル ログイン」から管理画面にログイン
   
   ② 「SSH設定」を選択
   
   ③ SSH設定で「ONにする」を選択
   
   ④ 次に「公開鍵認証用鍵ペアの生成」タブを選択。テキスト入力欄に適当なパスフレーズを入力します。パスフレーズはのちほど使うのでメモに控えておいてください。「確認画面へ進む」→(遷移)→「生成する」を選ぶと「(サーバーID).key」というファイルが、ブラウザからPCへ自動ダウンロードされます
   
   
   ⑤ 「(サーバーID).key」ファイルを自PCの任意の場所に保存し、保存場所のパスを控えてください。
   ・秘密鍵ファイル保存場所の例(Windows)：/Users/(PCユーザーフォルダ名)/.ssh/(サーバーID名).key　※ディレクトリ名/ssh/でもOK
   　
   設定したパスフレーズと「(サーバーID).key」ファイルの情報は、このあとsftp.jsonファイルに記載します

4. sftp.jsonファイルに必要情報を入力
   VS Codeでの設定に戻ります。工程2で生成された.vscode/sftp.jsonファイルに対して、サーバーへSFTP接続するための必要情報を入力します。sftp.jsonを開いて以下例をもとに個別情報を設定します

sftp.json

{
  "host": "(○○○○.xserver.jp)",  // サーバーのホスト名(サーバー情報から確認)
  "protocol": "sftp", // 接続形式
  "port": 10022,  // ポート番号(10022はエックスサーバーの指定番号。一般的に22)
  "username": "(サーバーID)", // サーバーID(ログインID)
  "remotePath": "/home/(サーバーID)/(ドメイン名)/public_html/", // ファイルをアップするリモートサーバーのディレクトリ(絶対パス)
  "privateKeyPath": "/Users/(PCユーザーフォルダ名)/.ssh/(サーバーID名).key", // サーバーパネル(管理画面)から発行された秘密鍵のPCローカル側での保存場所を指定(絶対パス)
  "passphrase": "(original passphrase)", // サーバーパネル(管理画面)設定で指定した適当なパスフレーズ
  "password": "(original password)", // サーバーパネルのログインパスワード
  "uploadOnSave": false, // VS Codeでファイル保存した際に、リモートサーバーと同期するか、しないか(しないに設定)
  "downloadOnOpen": false, // VS Code起動時にリモートサーバーからファイルダウンロードするか、しないか(しないに設定)
  "ignore": [ // 以下のディレクトリおよび配下ファイルをアップロード・同期から除外
    "**/.vscode/**",
    "**/.history/**",
    "**/.git/**",
    "**/.DS_Store"
  ]
}

SFTPアップロード・同期の使用方法

ファイル同期

VS Codeの「コマンドパレット」からコマンドSFTP: Sync Local -> Remoteを実行し、指定した全ファイルをリモートサーバーにアップ(同期)します　※「コマンドパレット」はCtrl(Command) + Shift + Pで使用

コマンドSFTP: Sync Remote -> Localで逆にリモートサーバーからファイルダウンロードも可能です。

ここまでで無事サーバーアップ・同期されたことを確認できたら設定は完了です。お疲れさまでした。

個別選択したファイルのみをアップロード

VS Codeのエクスプローラー(Ctrl(Command) + Shift + E)の該当ファイルを右クリックするとメニュー表示されます。「Upload」をクリックすると個別にファイルアップロードできます。

補足事項・注意点

sftp.jsonの設定をuploadOnSave: "true"と記述することで、ファイル保存と同時に自動でリモートサーバーと同期できます。しかし"ファイル更新→即保存"という形だと、十分検証されていない不完全なコードがアップされかねません。負荷やリスクも高いので「コマンドパレット」からコマンドを打って選択的にファイルアップ・同期するようにしておくのが安全です。

ローカルサーバーもしくはテストサーバー(staging)で、十分な確認・検証をしたのちに本番公開サーバーへアップするようにしましょう。

VS Code「SFTP」の基本機能

機能	使い方
同期 (ローカルからリモート)	コマンド　SFTP: Sync Local -> Remote
同期 (リモートからローカル)	コマンド　SFTP: Sync Remote -> Local
個別にファイルアップロード	該当ファイルの右クリックメニュー「Upload」
ローカルとリモートファイルの差分表示	該当ファイルの右クリックメニュー「Diff with Remote」
双方向の同期 (最新ファイルに統合)	コマンド　SFTP: Sync Both Directions

---

選択肢2 VS Code拡張機能「Deploy」を使用して複数のサーバー設定をする

「SFTP」のデメリットとして、単一接続のみで複数サーバー接続設定に対応していないことが挙げられます。そのためサーバー切り替えが発生した場合は都度、SFTP接続先を書き換える手間が生じます。

これを解消するためには「Deploy」拡張機能を利用します。setting.jsonから設定をし、「コマンドパレット」に各種Deployコマンドを入力することで、複数サーバーへのデプロイが可能になります。

今回「Deploy」の詳細を扱いませんので、詳しくは以下記事を参照してください。
-> VSCodeで複数サーバーに対して，ファイルをアップロードする

---

選択肢3 「git-ftp」を使ってGitコマンドでサーバーアップする

「git-ftp」はGitのバージョン管理と連携して、現在のコミット(前回との差分)をFTPでアップロードしてくれます。ファイルをGit管理していて、作業者がそれなりにGitコマンドを使える場合や使いこなしに自信がある場合は選択肢としてアリでしょう。

ブランチ切り替え忘れやコマンドミスがあったとき、それがそのままサーバーに直アップされると考えると少し怖いですが…。

FTPそのものは暗号化通信を行わないためセキュリティ的に脆弱です。できればSFTP設定しましょう。VS Codeを使用するという前提での手軽さでいうと「SFTP」や「Deploy」の利用が少しだけ勝っているように感じます。

今回、詳細は扱いませんので設定方法など以下を参考にしてみてください。
-> git ftpを使えるようにする(Windows, Mac)

---

ファイルバックアップに有効な「Local History」拡張機能を導入

バックアップ自動化

ローカルとリモートでファイルアップ・同期する場合、考えておきたいのがバックアップ対応です。万一のことが起きて、せっかく更新したファイルが先祖返り(古いものに戻る)したり、消えてしまったりすることがあるかもしれません。

「Local History」拡張機能はプロジェクトルートに.historyディレクトリを生成し、ファイル保存のタイミングでその配下に変更履歴ファイルを残します。ファイル間の差分表示もでき、履歴ファイルがバックアップの役割を果たします。

保存が頻繁、触るファイル数が多いなどだと、けっこう膨大な数の履歴ファイルが残るので、明らかにいらないものは手動での削除もしています。

作業PCにだけ過去履歴ファイルを残す

二重作業を防ぐため、.historyディレクトリはリモートサーバーへのアップ対象から除外し、ローカル保存に留めておくのが良いです。本記事では、上記工程4のsftp.jsonにignore指定を記述することでアップ・同期対象から除外しています。

カスタマイズ設定も可能

履歴ファイルの保存/破棄日数や除外ファイル指定などカスタマイズ設定も可能です。詳しくは以下記事を。
-> VSCode (Visual Studio Code)で簡単に履歴・バックアップが取れる拡張機能「Local History」が便利 | 設定方法

---

おわりに

レガシーでアナログだと感じる属人的作業は極力なくしていきたいものですね。
FTPクライアントソフトのみんな、今までありがとう、そしてさよなら。
現場からは以上です。

何をしたいか

ローカルの開発環境として使っている 便利な開発環境 で
gitコマンドのタブ補完が効かずもやもやしたので忘備録

環境情報

詳しくはgitの README と Vagrantfile を読んで下さい
VagrantImageのbento/ubuntu-16.04を使っています

一発で済ませたい人

echo "source /usr/share/bash-completion/completions/git" >> ~/.bashrc
これを打ち込んでやれば次のログインからは補完が効きます

どういうことよ

git-completion.bashってのをログイン時に読み込ませてあげれば良いのですが
色々な記事を見つつファイルをダウンロードしたりリポジトリを取得したりゴネゴネしてみたものの
一向に読み込まれる気配は無く
無く・・・なく・・・(´；ω；`)ｳｯ…

元々入っているbash-completionに入っているgitの補完を読み込んであげれば解決した
というお話でした

まとめ

環境に依存する話って文献がなかなか見つからないからしんどいね
開発環境の方も近々直しておきます

標準系

ブランチ基本操作

• ご存じとは思いますが、実際に入力する際は、git st = git status と読み替えられます
• もちろん、git branch -aなどもgit br -aで使えます

実行例（ブランチ削除）： git br -d hogehoge

st = status
br = branch

着手・切り替え

ft = fetch origin
co = checkout
cb = checkout -b

修正中

git stashをはじめて知ったときは感動しました
関係ないものをポイできるのは大変助かります

df = diff
sts = stash
stss = stash save -m
stsl = stash list
stsc = stash clear

コメントなしでも保存できますが、より内容が理解しやすくなります。
実行例：　git stss "test"

Quiita 関連記事

• git: git stashの使い方
• git stashよりgit branch

コミット

コミットのmオプション、知るまでは毎回コメント入力の画面開いてました
（今思うとどれくらいの蓄積に…）
git log -> rebase -> #rebase部分の処理という流れ

#通常
ci = commit
cim = commit -m
ps = push origin HEAD

# rebase
ciam = commit --amend -m
psf = push -f origin HEAD

強制プッシュは確認不要な場合の短縮なので、自己責任でお願いします

関数定義

どこか時間をつくってやってみたい

候補生

何気にメンドクサイ、コミット操作
結局手入力してしまって使われていないので、汎用化できれば定着させたい

rb1 = rebase -i HEAD~1
rb2 = rebase -i HEAD~2
rb3 = rebase -i HEAD~3

最後に

• 基本的に、originとのやりとりを想定しています
• 会社や学校など環境によって命名が決まっているところは適宜置き換えてください
• 類似したページが多いと思いますが、何か参考になれば幸いです

Gitで使用する基本的なコマンドを簡潔にまとめてみました。

コマンド集

$ git init

リポジトリを作成します。
Gitを使用するための準備として実行されます。

$ git clone

ディレクトリを共有します。

$ git add ファイル名

ファイル選択します。

$ git command -m “メッセージ”

選択したファイルを記録します。
メッセージにはどんな変更を行ったかを具体的に書きましょう。

$ git remote add リモート名(origin) URL

リモートを登録します。
リモート名は何でもいいですが、一般的に"origin"というのがよく使用されます。

$ git push リモート名(origin) master

登録したリモートにファイルをアップロードします。

$ git pull リモート名(origin) master

リモートからファイルをダウンロードします。

$ git status

変更したファイルのファイル名を表示します。
変更したファイルは赤色、addしたものは緑色で表示されるため、一目でaddしたかどうか確認できます。

$ git diff

変更内容を表示します。
変更前を赤色、変更後を緑色で表示するので、どこがどう変わったのかが分かりやすいです。
変更内容に問題がなければaddしましょう。

$ git log

自分や他人のコミットメッセージを表示します。

$ git log -p

誰がどこを変更したのかを確認できます。
また、上下キーで自由に移動ができ、Qキーで終了します。

まとめ

以上です。
コマンドはまだまだあるので、学習したら随時追加していきたいと思います。