20200329のGitに関する記事は5件です。

プログラミング初心者がgitでつまずいた。英語の意味を調べて、専門用語を深く理解しました。

gitについて1から復習してみました。

Git

gitは、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。

要は、複数人で開発するときに、誰がどれをいじったのか分からなくてグチャグチャになるのを防止するためのシステムのことなんだなーてことか。よし。

Github

これはgitを扱うためのツールのことですな。

っと書き始めてたら、最強に分かりやすく説明している記事を見つけてしまいました。

こちらを読めば完璧。

https://qiita.com/nnahito/items/e546b27f73e7be131d4e

でも疑問点が二つ湧いてくる。

pullとbranchって一緒じゃね?あと、pushとmargeって一緒じゃね?

すごい調べたけど、概念が違うっぽい

branchとmargeは、masterから枝分かれを作ったり、合体したりする行為

pullとpushはそれを包括して取ってきたり送ったりするからconflictが起こりやすい。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

gitshを使う

https://github.com/thoughtbot/gitsh
ver0.14時点の情報。

インストール

readmeに書いてある。
macならhomebrew、archlinuxならmakepkgとかでインストールできる。

プロンプトの設定

文字列

https://github.com/thoughtbot/gitsh/blob/master/lib/gitsh/prompter.rb
git configgitsh.promptを設定する。

例えば、初期設定ではブランチ名が15字までしか表示されない。
全部表示したいなら%Bのかわりに%bを使えばよい。

https://github.com/thoughtbot/gitsh/blob/master/lib/gitsh/prompt_color.rb
同様にgitsh.color.___を設定する。
プロンプトで%c%wにはさまれた部分が、状態によって色づけされる。

例えば、初期設定ではデフォルトの色がblueで見づらい。
gitsh.color.defaultgreenとかにすると見やすくなる。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Gitで【曖昧だった】どのファイルにどんな変更があったのか。

ファイルのバージョン管理で大切な「どのファイルにどんな変更があったのか」を確認していきます

使用するコマンド

git status
→どのファイルに変更があったのか
git diff
→どのファイルのどの箇所に変更があったのか
git log
→コミット履歴を確認
git log -p
→コミット履歴 + ファイルのどこに変更があったのか確認

1.git statusでファイルがaddされた状態か確認。

testフォルダを作成してgit initを実行。
git initの後にA.htmlとB.htmlを作成してgit statusを実行しています。
image.png
結果:赤文字で表示されたファイルは、git addされていない状態であることが確認できる

2.A.htmlをgit addしてみる

git add A.htmlを実行した後に、git statusを実行しています。
image.png
結果:A.htmlファイルはaddされている(緑文字)、B.htmlはaddされていない(赤文字)ことが確認できる

3.A.htmlにテキストを追加して保存。git statusを実行してみる

image.png
結果:テキスト追加前のA.htmlはaddされているが、テキスト追加後のA.htmlは赤文字なのでaddされていないことが確認できる

4.git add -Aを実行してgit statusで確認

image.png
結果:git add -AによりA.htmlとB.htmlのどちらもaddされた状態であることを確認。

5.B.htmlにテキストを追加してgit diffを実行してみる

image.png
結果:git diffすることでB.htmlの変更箇所を確認できる(追加分のテキストは緑文字で表示)

6.現在までの変更をgit add -Aでバージョン管理の対象として、git commitを実施後、git logとgit log -pを実行してみる

git logでコミット履歴を表示。git log -pで履歴に加えてどの箇所が変更されたのかを確認できる。
image.png
独学で学習していると[git add / git commit / git push]だけで満足しがちなので、
本来の目的である「どのファイルのどの箇所に変更があったのか」を常に意識したい。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

git 初心者書置き

gitとは俗にいうバージョン管理ツール
よく使われているgithubを使用

branchを作成後ローカルで作業する場合
windowsユーザーはまずgit for windowsが必要な
為downloadする

終わったら コマンドで初期設定をやる

git config --global user.name 'yourname'
git config --global user.email 'yourname@example.com'

vscodeでソース管理で連携させたら
初回コミットは宛先が必要なため

git remote add origin https://github.com/yourname/gitpath.git

をしておくこと。
github上でclone or downloadってボタン押したらURLあるので
gitpath.gitの部分をそこに入れてね

次に初回push等をする際宛先聞かれるので

git push --set-upstream origin branch-name

とします。

これでpushして無事ローカルで作業できるはず。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

忙しい人向けVue.jsプロジェクト作成

開発環境

Visual Studio Code (Onlineでも良い)
拡張機能 Vetur(便利です。)

叩くコマンド

プロジェクト作成

>vue create <project名>

⇒必要なオプションを選択する(今回はTypeScriptや画面遷移させるRouter等を追加)
※追記 tsc -v でバージョン見るとなぜか古いが、内部的には入ってるっぽい。

>C:\Users\<username>>npm ls -g typescript
C:\Users\<username>\AppData\Roaming\npm
`-- @vue/cli@4.2.3
  `-- @vue/cli-ui@4.2.3
    `-- typescript@3.7.5

image.png

ここで内部的にnpmからモジュール持ってきたり、設定したり全部自動でやってくれている。(テストに出ます!)

開発サーバーの起動(出てきたURLに飛べばVueの初期画面が表示されているはずです)

>npm run serve

本番用ビルド

>npm run build

Vue CLI プラグインが超優秀らしい

やってくれること
 ・npmモジュールの導入
 ・設定ファイル等の追加
 ・Vueインスタンスへのロードetc

例えば HTTP クライアントであるaxiosの導入(APIが作れる)
これだけでasyncとかawaitとかもう使える

>vue add axios

UIをカッコよくしたい場合に使うライブラリ
 ・Vuetify - マテリアルデザイン、コンポーネントが多い。
 ・Element - 管理画面向けコンポーネントが豊富
 ・Buefy - BulmaというCSSフレームワークがベースで軽い
 ・Onsen UI - モバイルアプリ向け

Gitにあげときましょう。

Githubに新規リポジトリを追加
https://qiita.com/sodaihirai/items/caf8d39d314fa53db4db

参考

株式会社ゼンアーキテクツCTO三宅さんのセッション

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む