Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

[初心者向けGitHub勉強会資料(VScode版)]How To GitHub In VSC...

harutiro
October 24, 2024

[初心者向けGitHub勉強会資料(VScode版)]How To GitHub In VSCode

[初めに]
プログラマーなら誰しも使うアプリGit・Githubを簡単に一時間程度で学ぶことができるHowToものを作成しました。
ぜひこのスライド用いてGitの基本の機能を使って、学んでもらえると嬉しいです。

今回は、VSCodeを用いて簡単にGitを扱えるように工夫をしました。
CLIで心が折れてしまった人はぜひ、GUIでもう一度挑戦してみるといいかもしれないです。

[ターゲット]
・GitやGithubを知らないプログラマ初学者。
・ターミナル操作はある程度慣れていると良いが、特にその技能がなくても使えるように作成しました。
・Gitを使う流れやなぜ使うかを知りたいかた。

harutiro

October 24, 2024
Tweet

More Decks by harutiro

Other Decks in Technology

Transcript

  1. お品書き 1. バージョン管理ツールとはなにか? 2. Gitのインストール 3. GitHubアカウントを作成しよう 4. Gitの初期設定を行う 5.

    VSCodeの初期設定 6. Gitの基本的な流れ 7. 実際にcommitまでやってみる 8. ファイルの変更を行ってみる 9. ブランチを切ってみる 10. チェックアウトをしてみる 11. プルリクをしてみる 2
  2. このスライドの見方(CLI) 3 $ brew -v > Homebrew 3.5.4 $が書いてある場合は入力して欲しいコマンドです >

    が書いてある場合は出力される結果です $ git config <-global user.name "ユーザー名" “〜〜〜”と書いてある時は〜〜〜だけ入力してください
  3. Gitをインストールしてみる(Mac) $ brew install git $ git -v > git

    version 2.37.0 バージョンが帰ってきたらインストール 完了です。 13
  4. Topic! Brewが入っていない方へ。 $ /bin/bash -c "$(curl -fsSL https:</raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" $ echo 'eval

    $(/opt/homebrew/bin/brew shellenv)' <> ~/.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行を貼り付けてみましょう!! 14
  5. ローカルとリモートの紐付けする設定 33 リモート ローカル • SSHキー • ユーザー名 • メールアドレス

    ローカル側とリモート側を紐づけるためにSSHキー、 ユーザー名、メールアドレスを用いる この内容を用いて、ソースコードに自分が書いた 情報を付け加える
  6. ユーザー名とアドレスを登録する $ git config --global user.name "ユーザー名" $ git config

    --global user.email "メールアドレス" $ git config user.name > “ユーザー名” $ git config user.email > “メールアドレス” 37
  7. SSHキーを作成する $ ls -al | grep .ssh > -rw------- 1

    k22120kk staff 20 7 13 18:48 .lesshst > drwx------ 18 k22120kk staff 576 7 12 03:34 .ssh //.sshが表示されない時はmkdirで作成しましょう $ mkdir .ssh $ cd .ssh 40
  8. SSHキーを作成する $ ssh-keygen -t ed25519 引用元:(【Windows】Gitの環境構築をしよう!) https://prog-8.com/docs/git-env-win ⏎ Enter ⏎

    Enter ⏎ Enter ファイル名の指定 今回はデフォルトなので そのままエンター パスワードの設定 今回はそのままエンター パスワードの確認 今回はそのままエンター 41
  9. 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 GitHub does not provide shell access. 実行して、yesかnoかを聞かれたら、yesと答えましょう。 Hi の後にユーザー名が出力されれば成功です。 50
  10. PATHにCodeをインストールする 58 1. Command + Shift + P を押してコマンドパレットを表示する 2.

    pathと入力して、「シェルコマンド:PATH内に’code’コマ ンドをインストールします」を押す シェルで’code .’と入力した時に、VSCodeを起動するためのやり 方
  11. Gitの大きな流れ • Add コミットするファイルを追加する • Commit 追加・変更点をGitに追加する • Puth リモート(ネット)に打ち上げる

    • Pull リモート(ネット)から変更点をもらう 66 引用元:(Progate-Git) https://prog-8.com/slides?displayed_id=2642&lesson=66
  12. pushすると 78 ローカル リポジトリ id: 1 id: 2 GitHub リモート

    GitHub側で、リポジトリは 作って、ローカルと 紐付けは終わっている状態
  13. ファイルを作成して、コーディングをしよ う 89 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> このようなファイルが生成されたらOKです。 ワークツリー ステージ リポジトリ
  14. まとめ 編集→Add→Commit→Push→Pullの流れを覚えよう! 100 • Add コミットするファイルを追加する • Commit 追加・変更点をGitに追加する •

    Puth リモート(ネット)に打ち上げる • Pull リモート(ネット)から変更点をもらう 引用元:(Progate-Git) https://prog-8.com/slides?displayed_id=2642&lesson=66
  15. 先ほどと同じ流れでファイルを編集してみ る では、先ほど作ったindex.htmlを使って少し編集をしてみましょう。 以下のように、HelloWorldを記述してみましょう 102 <!DOCTYPE html> <html lang="en"> <head>

    <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello World</h1> </body> </html> index.html
  16. 先ほどと同じ流れでファイルを編集してみ る では、またindex.htmlを使って少し編集をしてみましょう。 以下のように、ここは新しいブランチですを記述してみましょう 117 <!DOCTYPE html> <html lang="en"> <head>

    <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello World</h1> <p>ここは新しいブランチです</p> </body> </html> index.html
  17. ブランチを移動してみる masterブランチ Origin / HEAD Origin / HEAD 今いる場所からずれる 125

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

    Mainをダブルクリックすると、 チェックアウトできます
  19. 参考文献・引用文献 148 [【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