- 投稿日:2020-03-29T18:23:50+09:00
プログラミング初心者がgitでつまずいた。英語の意味を調べて、専門用語を深く理解しました。
gitについて1から復習してみました。
Git
gitは、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムである。
要は、複数人で開発するときに、誰がどれをいじったのか分からなくてグチャグチャになるのを防止するためのシステムのことなんだなーてことか。よし。
Github
これはgitを扱うためのツールのことですな。
っと書き始めてたら、最強に分かりやすく説明している記事を見つけてしまいました。
こちらを読めば完璧。
https://qiita.com/nnahito/items/e546b27f73e7be131d4e
でも疑問点が二つ湧いてくる。
pullとbranchって一緒じゃね?あと、pushとmargeって一緒じゃね?
すごい調べたけど、概念が違うっぽい
branchとmargeは、masterから枝分かれを作ったり、合体したりする行為
pullとpushはそれを包括して取ってきたり送ったりするからconflictが起こりやすい。
- 投稿日:2020-03-29T16:39:17+09:00
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 config
でgitsh.prompt
を設定する。例えば、初期設定ではブランチ名が15字までしか表示されない。
全部表示したいなら%B
のかわりに%b
を使えばよい。色
https://github.com/thoughtbot/gitsh/blob/master/lib/gitsh/prompt_color.rb
同様にgitsh.color.___
を設定する。
プロンプトで%c
と%w
にはさまれた部分が、状態によって色づけされる。例えば、初期設定ではデフォルトの色がblueで見づらい。
gitsh.color.default
をgreen
とかにすると見やすくなる。
- 投稿日:2020-03-29T15:43:29+09:00
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を実行しています。
結果:赤文字で表示されたファイルは、git addされていない状態であることが確認できる2.A.htmlをgit addしてみる
git add A.htmlを実行した後に、git statusを実行しています。
結果:A.htmlファイルはaddされている(緑文字)、B.htmlはaddされていない(赤文字)ことが確認できる3.A.htmlにテキストを追加して保存。git statusを実行してみる
結果:テキスト追加前のA.htmlはaddされているが、テキスト追加後のA.htmlは赤文字なのでaddされていないことが確認できる4.git add -Aを実行してgit statusで確認
結果:git add -AによりA.htmlとB.htmlのどちらもaddされた状態であることを確認。5.B.htmlにテキストを追加してgit diffを実行してみる
結果:git diffすることでB.htmlの変更箇所を確認できる(追加分のテキストは緑文字で表示)6.現在までの変更をgit add -Aでバージョン管理の対象として、git commitを実施後、git logとgit log -pを実行してみる
git logでコミット履歴を表示。git log -pで履歴に加えてどの箇所が変更されたのかを確認できる。
独学で学習していると[git add / git commit / git push]だけで満足しがちなので、
本来の目的である「どのファイルのどの箇所に変更があったのか」を常に意識したい。
- 投稿日:2020-03-29T01:54:03+09:00
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して無事ローカルで作業できるはず。
- 投稿日:2020-03-29T01:46:08+09:00
忙しい人向け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ここで内部的に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参考