ターニングポイントさん!?

Gitの説明しつつ、OneDriveとVisual Studio Codeの環境を作る

OneDriveとGitとVisual Studio Codeで開発ができます。よかった。
手順について優しめ且つ適当に説明する。”易しめ”ではない。
OneDriveに構築するのだから個人での使用になるだろう。でもOneDriveを例えば社内のサーバーとかに読み替えてもいいと思うよ。

俺もまだGitと寝たわけでは無いから、深いハナシはしてないよ。

また、この記事はGitHubのプロジェクトからコードをもらって開発し始めるものではない。だけどこの記事を一通りプレイしたら、それができるようにならないともいえなくもない事もございませんとも、申し上げません。

もってまわるわね

理解、手順が違っていたり、効率の悪いやり方をしていたらコメントで指摘をしろ。いいな。

◆準備

OneDriveGitVisual Studio Codeを各リンクから落としたり入れたりする。

GitはCodeより先に入れたほうが無難。だと思ったけど、下の追記見て。

追記:
新しく買ったノーパソにGit入れようとしたときに「Choosing the default editor used by Git」なるオプションを発見した。(増えた?)

デフォルトではVimになっているが、「Use VisualStudioCode as Git’s default editor」という選択肢があったのでそれを選んだらいいと思うよ。ただ、その場合先にVS Codeを入れておく必要がある。
ついでに言うと、VS Codeを入れるときに「追加タスクの選択」ってオプションがあるんだけど、良くわからないならそこは全部チェック入れればいいと思う。

◆ごくごく簡単なGitの構造説明

俺たちのソースコードが配置される場所は

  • リモートリポジトリ・・・皆のもの
  • ローカルリポジトリ・・・自分のもの
  • インデックス・・・自分のもの
  • ワーキングツリー・・・自分のもの

の4つだ。
なんか、もっとあるかも。わかんない。ググれ。
下から3つは一体化していて、まとめて「ローカルリポジトリ」と呼ばれているような気がする。

リモートリポジトリだけはOneDrive(クラウド上)に乗せておくのが妥当だ。皆が使うのだから。この場合の「皆」は、いろいろな端末を使用する自分自身だな。

ローカルリポジトリはデスクトップにでもフォルダを作ってしまえばいい。

コード変更にまつわる一連の操作を説明する。

①まず太郎君は「ワーキングツリー」の中のコードを変更する。
②変更したファイルを「インデックス」に随時保存(ステージング)する。
 ⇒「変更したファイル群」が「インデックス」になるようなイメージ?
③「インデックス」を「ローカルリポジトリ」に保存(コミット)する。
④「コミット」を「リモートリポジトリ」に保存(プッシュ)する。

こう(いうこと)ですか!? わかりません><
同じ保存の動作でも色んな名前がついている。けど、保存だ。

なんか手間だけど、安全性が高そう(こなみ

◆リモートリポジトリ作成

リモートリポジトリ作ろ~♪

①OneDriveにフォルダを作る

名前の最後に「.git」ってつけてあげると良いよ。そういう決まりだから。
多分「フォルダなんだけど、ファイルのように扱いたいよ」って事を意味してるのだと思う。つまり、フォルダ内のファイルを直接編集することは無い。のではないか?

ここでは仮に「sample.git」というフォルダを作ったことにする。

②「Git Bash」を起動、準備(Windows以外の人はbash起動)

ドザなのにGit Bashが無い?そんなわけあるか。よく探せ。それかGitをインストールし直せ。
Power Shell使っている人はこれを参照。

起動したbashに対して、以下のコマンドを一行ずつ入力する。
[ ]で囲んであるものは自分で決める。適当に。

git config --global user.name "[ユーザ名]"
git config --global user.email [メールアドレス]

意味

git config --global push.default simple

意味

git config --global core.autocrlf input

意味

文字列貼り付けは「Ctrl + V」じゃなくて「Shift + Insert」だったりする。
「右クリック⇒Paste」でもいいが。

③「①」で作ったフォルダに移動

bashっていうのは、「マウス使用不可状態でパソコンを使う」ための道具です。ちょっと違うけどそんな理解をしておけばいいのでは。
だから、フォルダを開いたりするのも「コマンド」を使う。

現在操作中のフォルダを変えるコマンドは「cd」だから、例えばWindows使っている人は

cd "C:\Users\[ユーザ名]\OneDrive\sample.git"

とかになる。

④フォルダをリモートリポジトリにする。

「③」のcdコマンドのおかげでフォルダを開いている状態になったんで、「リモートリポジトリにするよ」コマンドを叩く。

git init --bare --share

「init」はリポジトリとして初期化する操作。
「–bare」は「このリポジトリのファイルは直接編集しないよ。変更したかったらpushしてね」という意味。
「–share」は「pushする権利が共有されているよ」という意味。多分。いや、どうだろ。

コマンドを叩いたら自動で色々なフォルダが作成されたはずだ。

◆ローカルリポジトリ作成

コードが格納されているフォルダを作る。作れ。
失敗すると怖いから、コピー作って試してみればいいと思う。

名前は、普通はリモートリポジトリから「.git」を抜いたもの。
例えば「sample.git」がリモートなら、ローカルは「sample」

※ホントはもうVisual Studio Codeで操作できるんだけど、理解のために使わないで進めていく。

作ったフォルダに、さっきみたいにbashの「cd」で移動する。
そして「ローカルリポジトリにするよ」コマンドを叩く。

git init

そうすっと、「.git」なる隠しフォルダが作成される。それが「ローカルリポジトリの核」だ(と思う)。ローカルリポジトリはインデックスを内包している(気がする)。
隠しフォルダの表示は、Windowsならファイルエクスプローラーの「表示」リボンタブから設定しろ。たとえばGitの設定ミスったりしてやり直したくなったときは、その.gitフォルダごと削除してしまえ。

配置されているコード自体が「ワーキングツリー」で、「.git」ファイルが「ローカルリポジトリ」の核なのかな。

①ローカルリポジトリに便利な設定をする

git remote add [ショートカット名] [リモートリポジトリのフルパス]

意味
⇒ショートカット名は何でもいいけど、「origin」が妥当らしい。

git config branch.master.remote [さっきつけたショートカット名]
git config branch.master.merge refs/heads/master

意味

②ローカルリポジトリのインデックスにファイルの変更を登録する

以下のコマンドを打つ。

git add .

意味とか

この操作により、フォルダにあったコードがインデックスに登録される。

③インデックスからローカルリポジトリにcommitする

以下のコマンドを打つ。

git commit -m [コメントを記入]

「-m」は「一行のコメントを追加しますよ」って意味。
「-m」をつけないと「vim」というテキストエディタが起動する。
vimのだいたいの使い方
⇒コメントを書いたのち、「保存して終了」すれば抜け出せる。

◆(おまけ)commitメッセージの書き方論
http://postd.cc/how-to-write-a-git-commit-message/

◆ローカルリポジトリからリモートリポジトリにpushする

ローカルリポジトリのフォルダをbashで開きながら、以下のコマンドを叩く。

git push [さっきつけたショートカット名] master

逆に、リモートリポジトリからローカルリポジトリに落としてくる操作をpullと言う。
pullしたいときは

git pull --rebase [さっきつけたショートカット名] master

意味とか

これでもう環境は完成した!おめ!
じゃあVisual Studio Codeとローカルリポジトリを連携していく。

◆Visual Studio Codeでローカルリポジトリを開く

Visial Studio Codeを起動し
「Alt + F」⇒「F」⇒場合によっては「Enter」
と入力、さっき作ったローカルリポジトリのフォルダを指定して「フォルダーの選択」をクリック。

たったこれだけで連携完了。おっp…おっぱげた…!

◆(おまけ)ワークスペースを作成
「ファイル」⇒「名前を付けてワークスペースを保存」
すると「code-workspace」ファイルが作成される。これをデスクトップかなんかに置いておくとダブルクリックでVS Codeが開くから便利。

◆コードを変更してpushしてみる

①コードを編集
②「Ctrl + S」で保存
③「Ctrl + Shift + G」で「ソース管理」を開く
④変更のあったコード一覧が開くので、ファイルをクリックして差分を確認する。
⑤一覧のファイルに対してオンマウスすると「+」のマークが出るので、それをクリックしてインデックスに登録。
※「変更」にオンマウスするとまとめてインデックスに登録できるみたい。
⑥一覧の上にある「Message」とか書いてあるテキストボックスにcommitメッセージを入力
⑦「Ctrl + Enter」でcommit
⑧ソース管理サイドバー右上の「・・・」ボタンを押して「プッシュ」を選択
オッツオッツ

以上!

リモートリポジトリが更新されたと思う。リモートリポジトリにあるファイルの更新日時とか見てみればわかると思う。

◆リモートリポジトリからローカルリポジトリを作ってみる

①Git Bashを起動
②ローカルリポジトリを配置したいフォルダを「cd」コマンドで開く。
③git clone [リモートリポジトリのパス]
 ⇒意味とか
④作成されたフォルダをVS Codeで開く
成し遂げたぜ。

以上!!簡単!

GitHubからローカルリポジトリを作りたいときは、緑色の「Clone or download」ボタンを探して、そこに書いてあるリンクを指定してclone!

ただ、GitHubに対するpushには別の操作が必要になるらしい。

◆試してみればいいこと

適当にフォルダを作って、そこをWindowsのエクスプローラーで開く。
同じフォルダをgitのbashで開く。

そしてbashだけで

  • リモートリポジトリ作成
  • ローカルリポジトリ作成
  • クローンからリポジトリ作成

までをやってみればいいと思う。bashは楽しいよ(宗教勧誘)。
使いそうなコマンドと知識を載せておく。

  • フォルダ作成「mkdir [フォルダ名]
  • 今いるフォルダから、一つ下のフォルダに移動する際には、「cd [フォルダ名]」だけで移動できる。フルパスを入力する必要はない。
  • フォルダ作成しながらcd「mkdir [フォルダ名]; cd $_」
    ⇒「$_」は一つ前に指定した変数を保持してくれている。
  • 一つ上のフォルダ階層に移動「cd ..」
    ⇒「..」が一つ上のフォルダを表現している。
    ⇒ちなみに、今いるフォルダは「./」と表現する。
  • 自分と同階層にあるフォルダ(ファイル)のパス「../[フォルダ名]
    ⇒「git remote add origin ../sample.git」なんてことが可能
  • ファイル作成「touch [ファイル名]
    ⇒例えば「touch test.c」
  • ファイルに書き込み「echo [書き込む内容] > [書き込むファイル名]
    ⇒例えば「echo “#include <stdio.h>” > test.c」
  • 追記「echo [書き込む内容] >> [書き込むファイル名]
    ⇒例えば「echo ‘int main(void){printf(“Hello World\n”); return 0;}’ >> test.c」

◆結論

いままでGitの入門記事たくさん読んできたけど理解できなかった。
けど、記事にすっかと思ったらなんか理解できたわ。ブログやっててよかったぁ。

でもbashの知識が無かったら挫折してたかもしれん。

次に学ぶことはGitFlowについてでしょうね。Gitソース管理では、それぞれの作業者が「ブランチ」を切ってそれぞれの開発をし、持ち寄った変更を簡単にマージできる。ステキ!SVN死ね!
⇒参考:[日本語訳]A successful Git branching model

そしてAzure DevOps。これは使い方さえ理解できればかなり優秀。理解できない間は使いづらいかもしれんが、研究する価値はあると思うよ。

あとVS CodeでGit操作したい時は基本的にCtrl + Shift + Pでコマンドパレット開いて「git」って打ち込んで操作しろ。便利だから。

こちらからは以上です。

書いたはいいが、この記事はわかりやすいのだろうか。どちらにせよコメントを残していってください、お願いします。何でもしますから

chromeの拡張機能開発する① 準備編

BUMP OF CHICKEN「ray」の歌詞の意味を考察した

4件のコメント

  1. シコラー

    ん?

  2. hoge

    gitやり始め書籍も買わずに、
    gitのbashって何ぞやとゴニョニョしてる身としては、
    一番わかりやすかったです!サンクス(`・ω・´)ゞ

  3. あぼかど

    Visual Studio CodeでGitを使おうと思ったもののGit自体が初めてで五里霧中の状態でした。記事はわかりやすく非常に参考になりました。ありがとうございます。助かりました。

hoge へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


Powered by WordPress & Theme by Anders Norén

%d人のブロガーが「いいね」をつけました。