Tweet
Tweet

Slide 1

Slide 1 text

“ How To Use GitHub In VSCode 同人誌として配布する用 はるちろ＠harutiro Luciano研究室

Slide 2

Slide 2 text

これはスライドではなく本？ 本（ほん）は、書籍（しょせき）または書物（しょもつ）とも呼ばれ、紙・木・竹・絹布 などの軟質な素材に、文字・記号・図画などを筆写、印刷し、糸・糊などで装丁・製本し たもの。 内容（コンテンツ）的にはほぼ従来の書籍のようなものでも、紙などに文字を書いたり印 刷するのではなく、電磁的または光学的に記録・再生されるものやネットワークで流通さ せるものは、電子書籍という。 引用元: Wikipedia https://ja.wikipedia.org/wiki/%E6%9C%AC 文字・記号・図画などで情報が まとまっていれば良いと判断 2

Slide 3

Slide 3 text

なんでこんな形式に？ ● 筆者がたくさんの文字を使うのが苦手 ● 図形と組み合わせると理解しやすい ● スライド制作は慣れている スライドで作ればいいのでは？？？ 3

Slide 4

Slide 4 text

とりあえずやってみよう 本の界隈からは、こんな形式の本ありえない。16:9の本なんておかしいと思われるかもしれませ んが、同人誌という中では、このような特出したものがあってもいいのかなと思い作成しまし た。 図が多く文字が少ないこの形式で一度やってみて、どのような感触になるのか試してみたという のもあります。 また、今まで、サークルや研究室、LT会などで様々なスライドを作成してきました。 その中には、人に共有して有益な情報を与えれるようなものも何個か 作成できました。 ですが、Speaker DeckやX(旧Twitter)などで共有をしても自分の拡散力では 色々な人に知ってもらえないと考えました。 そこで、直接同人誌即売会に持っていけば、感想などももらえながら 見てもらえると感じました。 ぜひ、一度みなさんのご感想を 聞けたらと思っています 4

Slide 5

Slide 5 text

このスライドの見方(CLI) 5 $ brew -v > Homebrew 3.5.4 $が書いてある場合は入力して欲しいコマンドです > が書いてある場合は出力される結果です $ git config <-global user.name "ユーザー名" “〜〜〜”と書いてある時は〜〜〜だけ入力してください

Slide 6

Slide 6 text

このスライドの見方 6 右上に、Appleマークか、Windowsのマークがあると思います ● AppleマークはMacユーザー対象 ● WindowsマークはWindowsユーザー対象 インストールや、環境構築で多少変化すると思います うまく読み飛ばしてもらえると助かります

Slide 7

Slide 7 text

お品書き 1. バージョン管理ツールとはなにか？ 2. Gitのインストール 3. GitHubアカウントを作成しよう 4. Gitの初期設定を行う 5. VSCodeの初期設定 6. Gitの基本的な流れ 7. 実際にcommitまでやってみる 8. ファイルの変更を行ってみる 9. ブランチを切ってみる 10. チェックアウトをしてみる 11. プルリクをしてみる 7

Slide 8

Slide 8 text

Chap.1 バージョン管理ツール とは何か？ 8

Slide 9

Slide 9 text

Git とは何か？ ● バージョン管理システムの1つ ○ ファイルの変更履歴を管理してくれる ○ チーム開発のコード管理をしてくれる 9

Slide 10

Slide 10 text

Git どういうときに使うのか ● データを戻したいとき ● データを混ぜ合わせるとき ● コードのバックアップをとるとき 10

Slide 11

Slide 11 text

例1: データをバックアップから戻したい時 11 課題などで、途中まで出来て一応バックアップを取りたい時、 とりあえず、フォルダごとコピーを取る 「欠点」 ・どれが最新かわからないときも ・戻す時に、コピペで戻すため 事故るときがある （バックアップを消すなど）

Slide 12

Slide 12 text

例1: データをバックアップから戻したい時 12 Gitを用いると、ブランチを分けて簡単に戻せる 「利点」 ・グラフで簡単に最新のコードが 何かわかる ・ブランチを変えることでコードを 戻すこともできる ・GitHubに上げることで、リモート でバックアップもできる

Slide 13

Slide 13 text

例2: データを混ぜる時 13 みんなで開発をしている時に、コードを一つにまとめたい時がある。 その時に、どこが変わっているのか差分を自分で見て直す必要がある。 「欠点」 ・どこが変更されたか手動でみる ・どのファイルがマージ対象か 自分で見極めないといけない ・複数ファイルあると地獄をみる 乱数のコード 出力のコード

Slide 14

Slide 14 text

例2: データを混ぜる時 14 Gitを用いると、コマンド一つでまとめたり、 差分を簡単に表示をしてくれる 「利点」 ・グラフで簡単にどのような 混ざり方をしているか見れる ・マージを間違えた時に簡単に 戻せる ・差分を表示したり、混ぜたりする ツールが揃っている グラフでの表示 マージの差分

Slide 15

Slide 15 text

例3: チームで共同開発をするとき 15 変更点だったり、コードの状態をクラウドストレージで管理をする 「欠点」 ・ファイルが乱立してどれかわからん ・プロジェクト全体でコードを最新に 保てない ・勝手にコードを混ぜられる危険がある 最新のコードを探せ！

Slide 16

Slide 16 text

例3: チームで共同開発をするとき 16 Git・GitHubを用いると、コードの管理を Web上でまとめることができる 「利点」 ・Git Cloneでプロジェクトを簡単 に持ってこれる ・Git pullで簡単に最新にできる ・GitHubの便利なWebツールで コードを管理できる GitHubを用いて マージを管理

Slide 17

Slide 17 text

[コラム] チーム開発をする時に大事なこと 17 ● 些細な問題でも、違和感を感じたら、すぐに連絡をする ○ コミュニケーションが大事 ● マージをする時は、勝手にマージをしない ○ プロジェクト全体で連絡をする ● こまめにバックアップ、コミット、プルリクを出す ○ 大きすぎる変更点は事故の元 ○ ビックバン変更点は出さないように

Slide 18

Slide 18 text

Chap.2 Gitのインストール 18

Slide 19

Slide 19 text

ターミナルを起動しよう（Mac） ⌘Command Space ＋ ターミナルと入力 Enterを押す 19

Slide 20

Slide 20 text

コマンドプロンプトを起動させよう （Windows） Windowsキー R ＋ cmdと入力 OKを押す 20

Slide 21

Slide 21 text

コマンドプロンプトを起動させよう （Windows） コマンドプロンプトが 立ち上がるはずです。 21

Slide 22

Slide 22 text

Gitが入っているか確認してみよう $ git version > git version 2.33.0.windows.2　＜ー　人によってかわってる Git のバージョンが帰ってこない場合、イ ンストールが出来ていません。 インストールから始めましょう！！ 22

Slide 23

Slide 23 text

Gitをインストールしてみる（Mac） $ brew install git $ git -v > git version 2.37.0 バージョンが帰ってきたらインストール 完了です。 23

Slide 24

Slide 24 text

Topic！　Brewが入っていない方へ。 $ /bin/bash -c "$(curl -fsSL https: ~/.zprofile $ eval $(/opt/homebrew/bin/brew shellenv) $ brew -v > Homebrew 3.5.4 > Homebrew/homebrew-core (git revision 7d69acd3065; last commit 2022-07-13) > Homebrew/homebrew-cask (git revision ce084d024b; last commit 2022-07-13) Brewが入っていない方は上の3行を貼り付けてみましょう！！ 24

Slide 25

Slide 25 text

インストール手順　（Windows） 以下URL参照 https://prog-8.com/docs/git-env-win チャプター1　[Gitのインストール]まで行う 時間があるときにまた書きます 今はこれで許して(人д｀o) 25

Slide 26

Slide 26 text

Chap.3 GitHubアカウントを 作成しよう 26

Slide 27

Slide 27 text

GItHubとは？ GitHub上にコードをあげてネットに公開したり、 チーム開発でコードを集結させるのに用いる 27

Slide 28

Slide 28 text

GItHubとGitの違いは？ 28 Gitは「プロジェクトやソースコードのバージョン管理を行うツール」 過去に書いたコードの内容を復元したり、複数人での同時作業を効率的に進められる。 一方で、GitHubはGitを利用した開発者向けのウェブサービス GitHubには開発者にとって便利な機能が多く提供されている。 Gitを使った他のウェブサービスも存在しますが、世界的に最も広く使われているのはGitHubである。 バージョン管理をする システムの名前 オンラインでソースコードを 保存してくれるサービスの名前 GitHub Git

Slide 29

Slide 29 text

プログラミングを行うに当たって便利なもので す アカウントを持っていない方は 作っていきましょう 29

Slide 30

Slide 30 text

GItHubアカウントを作成する。 https://github.com　にアクセスする 30

Slide 31

Slide 31 text

GItHubアカウントを作成する。 サインアップを押そう 31

Slide 32

Slide 32 text

GItHubアカウントを作成する。 メールアドレスを入力する 大学のメールにすると自動でPro版になります 32

Slide 33

Slide 33 text

GItHubアカウントを作成する。 パスワード 大文字、小文字、数字、記号を入れる メールアドレス 大学のメールにすると自動で Pro版になります ユーザー名 後で使うので控えておいてください キャンペーンメールの許可 基本はnで大丈夫 33

Slide 34

Slide 34 text

GItHubアカウントを作成する。 認証をクリアして、 人間だと証明しましょう 34

Slide 35

Slide 35 text

GItHubアカウントを作成する。 最後にクリエイトアカウントで アカウント作成する 35

Slide 36

Slide 36 text

GItHubアカウントを作成する。 メールアドレスに届いたコードを入力する 36

Slide 37

Slide 37 text

GItHubアカウントを作成する。 三つのアンケートに答えましょう チーム開発はどれくらい の人数で行うのか？ 学生か先生か？ 37

Slide 38

Slide 38 text

GItHubアカウントを作成する。 三つのアンケートに答えましょう GitHubで気になるサービスを 選択しましょう。 よくわからない方は、画面のチェックに 合わせてもらえれば大丈夫です。 38

Slide 39

Slide 39 text

GItHubアカウントを作成する。 三つのアンケートに答えましょう プランを選択します。 Freeプランを選択しましょう 39

Slide 40

Slide 40 text

GItHubアカウントを作成する。 アカウントを作成することができました！！ 40

Slide 41

Slide 41 text

Chap.4 Gitの初期設定を行う 41

Slide 42

Slide 42 text

ローカルとリモートについて 42 リモート ローカル 作業環境にはそれぞれ名前がついていて、自分のPCの環境には「ローカル」 GitHubなどのウェブ上の作業環境には 「リモート」と呼ばれる GitHub Git

Slide 43

Slide 43 text

ローカルとリモートの紐付けする設定 43 リモート ローカル ● SSHキー ● ユーザー名 ● メールアドレス ローカル側とリモート側を紐づけるためにSSHキー、 ユーザー名、メールアドレスを用いる この内容を用いて、ソースコードに自分が書いた 情報を付け加える GitHub Git

Slide 44

Slide 44 text

コマンドコンソールを開く（Windows） インストールした時に 一緒にダウンロードされた GitBashを開く 44

Slide 45

Slide 45 text

コマンドコンソールを開く（Windows） こういったものが開かれたはずです。 45

Slide 46

Slide 46 text

ターミナルを起動しよう（Mac） ⌘Command Space ＋ ターミナルと入力 Enterを押す 46

Slide 47

Slide 47 text

ユーザー名とアドレスを登録する $ git config <-global user.name "ユーザー名" $ git config <-global user.email "メールアドレス" $ git config user.name > “ユーザー名” $ git config user.email > “メールアドレス” 47 ※ユーザー名はGitHubで登録したユーザー名を使用してください

Slide 48

Slide 48 text

SSHを用いてログインをする理由 2021年8月13日まではユーザー名とパスワードを用いてログインを行っていました。 しかし、ユーザー名とパスワードでは、漏れてしまった時に乗っ取られる危険があっ たため、よりセキュアである、公開鍵認証を用いた。 48 ユーザー名 パスワード ＋ 公開鍵

Slide 49

Slide 49 text

SSHを用いるメリット ● 認証に必要な秘密情報そのものはネットワーク上に送出されない ● 認証に使われる署名は一時的なもので再利用はできない ● 秘密鍵を推測して偽造することは非常に困難 ● パスフレーズを設定して鍵そのものをロックすることができる 49 引用元：https://qiita.com/toshio_nakayama/items/719559ab94cc86541176 なんかめっちゃ強い

Slide 50

Slide 50 text

SSHキーを作成する -rw------- 1 k22120kk staff 20 7 13 18:48 .lesshst > drwx------ 18 k22120kk staff 576 7 12 03:34 .ssh

Slide 51

Slide 51 text

SSHキーを作成する $ ssh-keygen -t ed25519 引用元：（【Windows】Gitの環境構築をしよう！） https://prog-8.com/docs/git-env-win ⏎ Enter ⏎ Enter ⏎ Enter ファイル名の指定 今回はデフォルトなので そのままエンター パスワードの設定 今回はそのままエンター パスワードの確認 今回はそのままエンター 51

Slide 52

Slide 52 text

SSHキーを作成する $ ls ~/.ssh > id_ed25519 id_ed25519.pub SSHキーが作成できたかどうか 確認しましょう 52

Slide 53

Slide 53 text

SSHキーを作成する $ cat ~/.ssh/id_ed25519.pub > ssh-ed25519 AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA SSHキーの公開鍵が表示されるので、 出力された内容を全てコピーをします。 53

Slide 54

Slide 54 text

SSHキーをGitHubに登録する https://github.comにアクセスする 54

Slide 55

Slide 55 text

SSHキーをGit Hubに登録する アイコンをクリックして、 Settingsを押す 55

Slide 56

Slide 56 text

SSHキーをGit Hubに登録する SSH and GPG keysを押す 56

Slide 57

Slide 57 text

SSHキーをGit Hubに登録する New SSH key を押す 57

Slide 58

Slide 58 text

SSHキーをGit Hubに登録する わかりやすい名前をつける コピーしたキーを 貼り付ける Mac:Command + V Win:ctrl + V Add SSH keyを押す 58 Key type は　 Authentication Key

Slide 59

Slide 59 text

SSHキーをGit Hubに登録する 登録した名前が表示されれば成功です 59

Slide 60

Slide 60 text

SSH接続を確認する $ ssh -T [email protected] > This key is not known by any other names Are you sure you want to continue connecting (yes/no/ [fingerprint])? yes Hi <ユーザー名> ! You’ve successfully authenticated, but GithHub does not provide shell access. 実行して、yesかnoかを聞かれたら、yesと答えましょう。 Hi の後にユーザー名が出力されれば成功です。 60

Slide 61

Slide 61 text

Chap.5 VSCodeの初期設定 61

Slide 62

Slide 62 text

VSCodeとは？ 62 Microsoftが作成した、無料のファイルエディタ。 拡張機能が充実していて、軽量なためみんなに愛されている。 今回Gitの管理はVSCode上から行う

Slide 63

Slide 63 text

VSCodeのインストール 63 Windowsの方は、自分がWindowsの環境を持っていないので、 以下のリンクを参考にして、インストールを行ってみてください。 手抜きではないです... https://qiita.com/mmake/items/2cf2131a0ab5bc431215

Slide 64

Slide 64 text

VSCodeのインストール 64 https://code.visualstudio.com/ 以下のURLをアクセスして、Download for Macを押す

Slide 65

Slide 65 text

VSCodeのインストール 65 ダウンロードしたファイルをダブルクリックして、解凍をしてください

Slide 66

Slide 66 text

VSCodeのインストール 66 Visual Studio Codeをアプリケーションフォルダーに移しましょう

Slide 67

Slide 67 text

VSCodeのインストール 67 Launchpadをクリックして、Visual Studio Codeが表示されていれば、 クリックして、アプリを開きましょう

Slide 68

Slide 68 text

PATHにCodeをインストールする 68 1. Command + Shift + P を押してコマンドパレットを表示する 2. pathと入力して、「シェルコマンド:PATH内に’code’コマ ンドをインストールします」を押す シェルで’code .’と入力した時に、VSCodeを起動するためのやり 方

Slide 69

Slide 69 text

PATHにCodeをインストールする 69 3. ポップアップの通りに進める 4. シェルコマンド’code’が〜〜と表示されれば完了

Slide 70

Slide 70 text

拡張機能について 70 VSCodeの拡張機能は有志で作成されているため、 同じような機能でも複数個の拡張機能があります。 GitHistory派の人もいますし、 GitGraph派の人もいます。宗教戦争です。 今回は自分の趣味のGitGraphで資料を作成します。 他の拡張機能を使いたい方は、いい感じに 読み替えていただけると助かります。

Slide 71

Slide 71 text

GitGraphをインストールする 71 拡張機能を押す

Slide 72

Slide 72 text

GitGraphをインストールする 72 git と検索する インストールを押す

Slide 73

Slide 73 text

GitGraphをインストールする 73 無効にすると言う表示がされればインストールが完了です。

Slide 74

Slide 74 text

Tips おすすめの拡張機能 74 ファイルのアイコンの見た目を変える VSCodeのテーマを変える 誤字を見つける 日本語対応

Slide 75

Slide 75 text

Chap.6 Gitの基本的な流れ 75

Slide 76

Slide 76 text

Gitの大きな流れ ● Add コミットするファイルを追加する ● Commit 追加・変更点をGitに追加する ● Push リモート(ネット)に打ち上げる ● Pull リモート(ネット)から変更点をもらう 76 引用元：（Progate-Git） https://prog-8.com/slides?displayed_id=2642&lesson=66

Slide 77

Slide 77 text

前提条件 77 ローカル側に、HTML,CSS,JS ファイルがあり、 Gitで管理を行うとする

Slide 78

Slide 78 text

Gitの状態とは？ 78 ワークツリー ステージ リポジトリ ローカルの環境は3つのエリアに分かれている 変更履歴の記録 履歴を新しく保存する 一覧を用意する場所 作業をする場所

Slide 79

Slide 79 text

Gitの状態とは？ 79 ワークツリー ステージ リポジトリ ローカルの環境は3つのエリアに分かれている 変更履歴の記録 履歴を新しく保存する 一覧を用意する場所 作業をする場所 ファイルの編集 コーディング 追加 git add コミット git commit

Slide 80

Slide 80 text

ファイルの編集をしているとき 80 ワークツリー ローカル ステージ リポジトリ ワークツリーのファイルを 編集する

Slide 81

Slide 81 text

addをすると 81 ワークツリー ローカル ステージ リポジトリ ワークツリーから ステージにファイルを 上げる イメージとしては、コミッ トしたいファイルを 選択しているだけ

Slide 82

Slide 82 text

commitをすると 82 ワークツリー ローカル ステージ リポジトリ ステージに上がっている ファイルを一塊にして、 履歴として残す イメージとしては、 残したいタイミングで ファイルをコピーして 残している感じ id: 1

Slide 83

Slide 83 text

ファイルを少し変更する 83 ワークツリー ローカル ステージ リポジトリ id: 1 新しく、HTMLファイルに Buttonのタグを追加したと する

Slide 84

Slide 84 text

変更点をaddする 84 ワークツリー ローカル ステージ リポジトリ id: 1 変更したファイルだけ ステージに上げる それ以外のファイルは あげない Gitは差分だけを保存する

Slide 85

Slide 85 text

変更点をcommitする 85 ワークツリー ローカル ステージ リポジトリ id: 1 ステージに上がっている ファイルの変更内容を、 変更履歴に残す id: 2

Slide 86

Slide 86 text

pushとは？ 86 ワークツリー ステージ リポジトリ ローカルの状態をリモートにアップロードする 変更履歴の記録 履歴を新しく保存する 一覧を用意する場所 作業をする場所 GitHub オンライン上のファイルを 管理するサービス push プッシュ　(アップロード) ローカル リモート

Slide 87

Slide 87 text

pullとは？ 87 ワークツリー ステージ リポジトリ リモートの状態をローカルにダウンロードする 変更履歴の記録 履歴を新しく保存する 一覧を用意する場所 作業をする場所 GitHub オンライン上のファイルを 管理するサービス pull プル　(ダウンロード) ローカル リモート

Slide 88

Slide 88 text

pushすると 88 ローカル リポジトリ id: 1 id: 2 GitHub リモート GitHub側で、リポジトリは 作って、ローカルと 紐付けは終わっている状態

Slide 89

Slide 89 text

ローカルのリポジトリと GitHub側のリポジトリを 同じ状態にする （アップロードする） pushすると 89 ローカル リポジトリ id: 1 id: 2 GitHub リモート push プッシュ　(アップロード) id: 2 id: 1

Slide 90

Slide 90 text

Chap.7 実際にcommitまで やってみる 90

Slide 91

Slide 91 text

Gitの大きな流れ ● Add コミットするファイルを追加する ● Commit 追加・変更点をGitに追加する ● Push リモート(ネット)に打ち上げる ● Pull リモート(ネット)から変更点をもらう 91 引用元：（Progate-Git） https://prog-8.com/slides?displayed_id=2642&lesson=66

Slide 92

Slide 92 text

プロジェクトを作成する 92 フォルダを開くを押す

Slide 93

Slide 93 text

プロジェクトを作成する 93 プロジェクトを作成したい 場所で新規フォルダを押す

Slide 94

Slide 94 text

プロジェクトを作成する 94 プロジェクト名を 適宜設定して作成を押す 今回はGitTestとする

Slide 95

Slide 95 text

プロジェクトを作成する 95 開くを押す

Slide 96

Slide 96 text

プロジェクトを作成する 96 ソース管理を押す リポジトリの 初期化を押す これでGitを使える 状態にする

Slide 97

Slide 97 text

プロジェクトを作成する 97 このような状態になれば Gitを使える状態に なりました。

Slide 98

Slide 98 text

ファイルを作成して、コーディングをしよ う 98 エクスプローラーをクリック 新規ファイル作成をクリック 今回はindex.htmlを作成します 終わったらエンターを押して作成 ワークツリー ステージ リポジトリ ワークツリーのファイルを 編集する

Slide 99

Slide 99 text

ファイルを作成して、コーディングをしよ う 99 html:5 index.html 上のように html:5と押して エンターを押すことで、 自動でテンプレートが 入力されます。 ワークツリー ステージ リポジトリ

Slide 100

Slide 100 text

ファイルを作成して、コーディングをしよ う 100 Document このようなファイルが生成されたらOKです。 ワークツリー ステージ リポジトリ

Slide 101

Slide 101 text

Addをしてみる 101 ワークツリー ステージ リポジトリ ソース管理をクリック 変更をステージを押して Addをする

Slide 102

Slide 102 text

Addをしてみる 102 ワークツリー ステージ リポジトリ このように、ステージされて いる変更にファイルが入って いればOKです

Slide 103

Slide 103 text

コミットしてみる 103 ワークツリー ステージ リポジトリ コミットする時に、コミット メッセージ(変更箇所をわか りやすくするメモ)を書く 終わったらコミットを押す id: 1

Slide 104

Slide 104 text

コミットした履歴 を見てみる 104 変更履歴をみるために、左下 のGit Graphを押す

Slide 105

Slide 105 text

コミットした履歴を見てみる 105 このようなページをみることで、 Gitの現状の状態を把握することができる

Slide 106

Slide 106 text

GItHubでリポジトリを作成する 106 GitHub側でレポジトリを作成するため に、Branchの発行を押しましょう ソース管理を押します

Slide 107

Slide 107 text

GItHubでリポジトリを作成する 107 GitHubでのレポジトリ名を記述します。 今回は同じくGitTestとします。 PrivateとPublicを選択します。 Privateにすることで、自分だけにしか 公開されません。 Publicにすることで、全世界に公開されます。 今回はPrivateにしておきましょう

Slide 108

Slide 108 text

GItHubでリポジトリを作成する 108 右下に、GitHub上で開くと言うポップアップが表示されると思います ので、GitHub上で開くを押します

Slide 109

Slide 109 text

GItHubでリポジトリを作成する ● 作成されているファイルが表示されてい たら成功です。 109

Slide 110

Slide 110 text

お疲れ様です 　🍵 110

Slide 111

Slide 111 text

まとめ 編集→Add→Commit→Push→Pullの流れを覚えよう！ 111 ● Add コミットするファイルを追加する ● Commit 追加・変更点をGitに追加する ● Push リモート(ネット)に打ち上げる ● Pull リモート(ネット)から変更点をもらう 引用元：（Progate-Git） https://prog-8.com/slides?displayed_id=2642&lesson=66

Slide 112

Slide 112 text

Chap.8 ファイルの変更を 行ってみる 112

Slide 113

Slide 113 text

先ほどと同じ流れでファイルを編集してみ る では、先ほど作ったindex.htmlを使って少し編集をしてみましょう。 以下のように、HelloWorldを記述してみましょう 113 Document

Hello World

index.html 追加した行

Slide 114

Slide 114 text

先ほどと同じ流れでファイルを編集してみ る 114 コミットする時に、コミット メッセージ(変更箇所をわか りやすくするメモ)を書く 終わったらコミットを押す ステージするファイルを addする

Slide 115

Slide 115 text

先ほどと同じ流れでファイルを編集してみ る 115 変更をGitHub側に反映させる ために、変更の同期を 押しましょう これで新しい変更を 保存することが出来ました。

Slide 116

Slide 116 text

Tips ファイル名の色について 116 おそらくファイルの色が変わって少し違和感を感じるかもしれません。 ファイルの色はGitの状態を表しています。 変更された箇所があります 新規で作成されたファイルです 何も変更がないです

Slide 117

Slide 117 text

草を増やそう この流れでどんどんコミットを増やして 草を生やしていきましょう 117 引用元：（Progate-Git） https://prog-8.com/slides?displayed_id=2642&lesson=66

Slide 118

Slide 118 text

ここから余裕があれば 118 赤ｱｹﾞﾃ ◆＼(´-`) 　白ｱｹﾞﾃ ◆＼(´-`)／◇

Slide 119

Slide 119 text

Chap.9 ブランチを切ってみる 119

Slide 120

Slide 120 text

ブランチを切る利点 ● コードを書くときにMainブランチは、エラーが絶対出ない、 安全地帯にする必要がある。 ● どんなにメチャクチャにしてもいい場所をつくって開発する。 ハイパーつよつよ、 すごい大規模な変更 120

Slide 121

Slide 121 text

ブランチを切る利点 ● ブランチを切ることによって、 どんなにヘンテコなものを書いても許される。（実際には書かないでね！！） めっちゃいい感じの 新規機能を作成しました！ 超特大 バグ・エラー 121

Slide 122

Slide 122 text

コンフリクトとは ● Mainブランチはみんなで開発をすると コンフリクト（コードの衝突）が起きることもある。 Aさん 1行目はアラート の表示を書く Bさん 1行目は、ボタン の処理を書く 1行目が、ボタンの処理か、 アラートの処理かわからん 122

Slide 123

Slide 123 text

mainブランチから切り離してみましょう 123

Slide 124

Slide 124 text

ブランチの一覧を表示してみる mainブランチ 124 VSCodeの左下にある、ブランチまたはタグの チェックアウトを押しましょう。 おそらくmainと表示されているはずです。

Slide 125

Slide 125 text

ブランチを作ってみる masterブランチ 125 新しいブランチの作成を押します

Slide 126

Slide 126 text

ブランチを作ってみる masterブランチ newBranchが 出来た 126 作成したいブランチ名を記述して、 エンターを押しましょう 今回はnewBranchと言う名前にします

Slide 127

Slide 127 text

それでは、ファイルを変更して コミットをしてみましょう 127

Slide 128

Slide 128 text

先ほどと同じ流れでファイルを編集してみ る では、またindex.htmlを使って少し編集をしてみましょう。 以下のように、ここは新しいブランチですを記述してみましょう 128 Document

Hello World

ここは新しいブランチです

index.html 追加した行

Slide 129

Slide 129 text

先ほどと同じ流れでファイルを編集してみ る 129 コミットする時に、コミット メッセージ(変更箇所をわか りやすくするメモ)を書く 終わったらコミットを押す ステージするファイルを addする masterブランチ newBranch

Slide 130

Slide 130 text

先ほどと同じ流れでファイルを編集してみ る 130 変更をGitHub側に反映させる ために、変更の同期を 押しましょう これで新しい変更を 保存することが出来ました。

Slide 131

Slide 131 text

GitGraphを確認してみよう 131 newBranch main おそらく、2つのブランチが あり、mainブランチの先に newBranchがあると思います

Slide 132

Slide 132 text

ブランチを切った後の流れ ● あとはこの流れに沿って、Gitを使って いきましょう 132 引用元：（Progate-Git） https://prog-8.com/slides?displayed_id=2642&lesson=66

Slide 133

Slide 133 text

Chap.10 チェックアウトをして みる 133

Slide 134

Slide 134 text

チェックアウト ● ブランチを切った時に、Mainに戻りたい時があります。 その時にチェックアウトをして戻りましょう ● HEADは今いるブランチの最新の変更点 Origin / HEAD Origin / HEAD 今いる場所からずれる Headとは何か説明をする記事 https://qiita.com/takeokunn/items/5bc499121a21f8c5b990 134

Slide 135

Slide 135 text

チェックアウトをして、Mainブランチに 戻ってみましょう 135

Slide 136

Slide 136 text

ブランチを移動してみる masterブランチ Origin / HEAD Origin / HEAD 今いる場所からずれる 136 VSCodeの左下にある、ブランチまたはタグの チェックアウトを押しましょう。 おそらくnewBranchと表示されているはずです。

Slide 137

Slide 137 text

ブランチを移動してみる masterブランチ Origin / HEAD Origin / HEAD 今いる場所からずれる 137 Mainをダブルクリックすると、 チェックアウトできます

Slide 138

Slide 138 text

これでMainブランチに戻ることが できました。 138

Slide 139

Slide 139 text

変更されているファイルが戻っているか 確認をしてみましょう。 139

Slide 140

Slide 140 text

ファイルが戻っているか確認する ファイルを確認することで、先ほど記述した、

ここは新しいブランチです

がなくなっているのがわかります。 140

Slide 141

Slide 141 text

ログを確認してみよう 141 GitGraphをみると、mainのブランチ に対して、青く選択されているのが わかります。

Slide 142

Slide 142 text

Tips GitGraphでチェックアウトをする 142 チェックアウトしたいブランチを ダブルクリックします

Slide 143

Slide 143 text

Tips GitGraphでチェックアウトをする 143 選択がnewBranchに代わり、チェック アウトが完了します。

Slide 144

Slide 144 text

Tips GitGraphでチェックアウトをする 144 このようなポップアップが出てきた時は、OriginからファイルをPullするか い？聞かれているので、問題がなければ、Checkout Branchを押します。 その後、Checkout The existing branch & pull changesを押します

Slide 145

Slide 145 text

Chap.11 プルリクをしてみる 145

Slide 146

Slide 146 text

Pull Requestとは？ マージを誰かにお願いする機能 146

Slide 147

Slide 147 text

マージの問題点 147

Slide 148

Slide 148 text

プルリクエストのいい点 148

Slide 149

Slide 149 text

ツリーをみながら考えてみる ● 最後Mainにマージをする時にエラーやバグ、Typoミスなどを 確認（レビュー）してマージをする。 このタイミングでおかしいところがあれば、もう一度やり直してもらう ここエラー出るやん、 修正お願いします。 149 超特大 バグ・エラー

Slide 150

Slide 150 text

Gitのリポジトリにアクセスする https://github.com/<ユーザー名>/<リポジトリ名> 150

Slide 151

Slide 151 text

ブランチのプルリクを送る Pull Requestsを選択しよう 151

Slide 152

Slide 152 text

ブランチのプルリクを送る New Pull Requestを選択しよう 152

Slide 153

Slide 153 text

ブランチのプルリクを送る どのブランチからどこにマージをしたいのか 選択しよう 153

Slide 154

Slide 154 text

ブランチのプルリクを送る 選択ができたらView pull requestを選択しよう 154

Slide 155

Slide 155 text

ブランチのプルリクを送る マージしたい内容に ついてコメントを書こう 編集したら Create pull requestを 押そう 155

Slide 156

Slide 156 text

ブランチのプルリクを送る レビューをする人は 内容を確認したら Merge pull requestを 押す 今回は自分でマージを しよう 156

Slide 157

Slide 157 text

マージしたコードを ダウンロード する これで、マージした情報をGitHub側から ダウンロードができます 157 ｍainブランチにチェックアウトして、変更の同期を押して、 リモート側の変更を受け取ります。くるくるボタン

Slide 158

Slide 158 text

まとめ branch //作業領域を切り分けるコマンド checkout //ブランチを移動するコマンド チーム開発で使うのはこの2つのコマンド Gitを使いこなして、Gitマスターになろう！！ 158 Pull request //マージを他の人にお願いするgithubの機能

Slide 159

Slide 159 text

Chap.12 gitignoreを設定する 159

Slide 160

Slide 160 text

gitignoreとは？ Gitでバージョン管理を無視したいファイルや ディレクトリを記述するファイルのこと Library フォルダー node_mudules フォルダー .env ファイル .env 開発環境で自動で用意されるファイルや 秘密鍵などをリモートにあげないようにする

Slide 161

Slide 161 text

gitignoreを使う利点 1. 不要なファイルを除外できる ビルド成果物やログなどをGit管理から外し、リポジトリを軽量化。 2. 環境依存ファイルを避けられる 各開発者の設定ファイル（例：.vscode/）を共有せず、環境の衝突を防 ぐ。 3. リポジトリの容量を減らす GitHubの容量制限である100MBを超えるファイルを隠すためなど 　 4. セキュリティの向上 .env など機密情報を含むファイルを誤って公開しないように防ぐ。

Slide 162

Slide 162 text

gitignoreファイルを作ってみよう ファイル作成を押しましょう ファイル名は 「.gitignore 」 としてください

Slide 163

Slide 163 text

テンプレートからコピペをしてみる GitHubには有名な.gitignoreの テンプレートがあります この中に使う言語やフレームワークに あったファイルを用意してくれます https://github.com/github/gitignore 一度ここにアクセスしてみましょう ● Swift → Swift.gitignore ● Node.js → Node.gitignore ● Unity → Unity.gitignore

Slide 164

Slide 164 text

nodeのテンプレートを使ってみる 検索ボックスで「node」と検索してみましょう Node.gitignoreを選択します

Slide 165

Slide 165 text

テンプレートをコピーする コピーができそうなアイコンを押して、 テンプレートをコピーしてください

Slide 166

Slide 166 text

テンプレートを貼り付けてみよう コピーをしたファイルを、 そのまま「.gitignore」に 貼り付ければ設定完了です このように設定すると、 nodeを扱うにあたり、 プロジェクト共有にいらない ファイルを省けます

Slide 167

Slide 167 text

.envファイルを作成してみる 167 環境設定としてよく.envファイルを作成します。 これを再現するため、.envを作成して、パスワードっぽいものを入力してみます。 .envというファイル名がグレーアウトしているのが確認できます。 この状態は、バージョン管理をしていないのを示します。

Slide 168

Slide 168 text

ソース管理でも確認してみる 168 ソース管理の画面でも、.envという ファイルがないのが確認できます！

Slide 169

Slide 169 text

.gitignoreのまとめ 1. .gitignore ファイルを作成 2. 無視したいファイル・フォルダを記述 3. 必要ならテンプレートを利用

Slide 170

Slide 170 text

参考文献・引用文献 170 [【Windows】Gitの環境構築をしよう！]　https://prog-8.com/docs/git-env-win [【Mac】Gitの環境構築をしよう！] https://prog-8.com/docs/git-env [フリーアイコンの数千人]　https://icon-icons.com/ja/ [【MacOS】Homebrew経由でGitをインストールする方法] https://blog.cloud-acct.com/posts/u-homebrew-git-install/ [コマンドプロンプトを起動する] https://www.javadrive.jp/command/ini/index1.html [【Linux】ファイル検索のあれこれ【ls/find/grep/xargs】] https://kojimanotech.com/2018/12/28/113/#outline__3 [サル先生のGitHub入門　プルリクエストとは？]https://backlog.com/ja/git-tutorial/pull-request/01/ [git log を見やすくする]https://qiita.com/takasianpride/items/842a785af610025a2030

Slide 171

Slide 171 text

バージョン情報 2024/10 ver2.0 CLI版から移植、ステージ、リポジトリの説明、 　　　　　　　 SSHの説明などの追記 2025/03 ver3.0 Gitをどういうときに使うのかを追記 2025/05 ver3.1 フィードバックのQRの追加 2025/05 ver3.2 GitとGitHubの違いを説明するスライドの微調整 2025/08 ver3.3 CLI版とVSCode版で差異があった部分を修正 2025/10 ver3.4 gitignoreを追記 171

Slide 172

Slide 172 text

アンケートのお知らせ 172 ご購入していただきありがとうございました。 お手すきの際に、よろしければアンケートのご回答をよろしくお願いいたします https://forms.gle/N44dRcrvUVH5gEkj6

Slide 173

Slide 173 text

奥付 発行日 初版: 2024年11月03日(日) 技術書典17 サークル Luciano研究室 X (Twitter) ID @stluciano ̲ labo Webサイト https://www.stluciano‒server.net/ 著者 牧野遥斗 メールアドレス [email protected] Qiita URL https://qiita.com/harutiro Webサイト https://www.harutiro.net X (Twitter) ID @harutiro2727 印刷所 なし 173