GDGoC KIT 2026年４月イベント　ハンズオン資料

ハンズオンハンズオン

ハンズオンのながれハンズオン

１．ハンズオンの説明２．テンプレートの取得３．自身のGitHubアカウントに紐づけ４．拡張機能「LiveServer」の導入５．自分なりに編集６．アップロード７．公開（したい人だけ）８．発表（運営を含む参加者の中からランダムで抽選）ハンズオン

ハンズオンとは？ハンズオン

ハンズオンとは、「手を動かす」という意味の通り実際に体験しながら学ぶ形式の学習セッションのこと。座学で知識をインプットするだけでなく、実践を通して理解を深め、スキル習得への道しるべを目的とする。ハンズオン

・プログラミングの楽しさを体験してもらう・GDGoC KIT の活動を体感してもらう・新しい技術に触れてもらう（クラウドエディターやGitHub など）今回のハンズオンの目的ハンズオン

１．ステップ・バイ・ステップでの進行します。２．困ったときはすぐに質問してください。３．完成を目指しましょう！ハンズオンのながれとサポートハンズオン

テンプレートの取得ハンズオン

1. GitHub アカウントの作成 2. Discord サーバーへの参加 ※イベント時の案内や資料配布で使用しています。 3. Google アカウントの作成
※ハンズオンで使用します。事前準備ハンズオン

編集画面を開こう！ハンズオン１． https://shell.cloud.google.com/ にアクセス２．使用するGoogleアカウントを選択３．「承認」を選択

取得方法ハンズオン

取得方法 # 空白部分はすべて半角スペース git clone https://github.com/KIT-GDGoC/DigitalNameCard.git ハンズオン

取得方法ハンズオン

１．見たいフォルダ（「one」,「two」,「three」 ,「portfolio」）の中の [ .html ] を右クリック２．「Open with Live
Server 」をクリックこれで、確認が可能！編集したコードの確認方法ハンズオン

自分のGitHubアカウントにアップロードしよう！ハンズオン

自分のGitHubアカウントにアップロードしよう！ハンズオン # “#”から始まらない行を、それぞれ１行ずつ打ってください！ # 現在のフォルダの場所を変更（”cd”は移動するコマンド） cd DigitalNameCard # 現在紐づいているGitHubアカウントを確認
git remote -v

自分のGitHubアカウントにアップロードしよう！ハンズオン git remote -v と打って、以下の文字列が出たら次の操作に移ります

自分のGitHubアカウントにアップロードしよう！ハンズオン１．GitHub（github.com）アカウントにログイン２．「New」を押す

自分のGitHubアカウントにアップロードしよう！ハンズオン３．Repository name に DigitalNameCard と入力４．Description に説明を入力（画像は参考例）
５．画面下の Create repository を押す

自分のGitHubアカウントにアップロードしよう！ハンズオン６．この画面が出たら、丸印の部分を押し、URLをコピーする（https://github.com/[それぞれのユーザー名]/DigitalNameCard.git）

自分のGitHubアカウントにアップロードしよう！ハンズオン７．クラウドShell に移動し、先ほどの部分で git remote set-url origin {new url}を入力
※{new url}は先ほどコピーしたリンクを貼りつける（上段の画像が例）８．git remote -v と打ち、下段の画像の結果が表示されればOK！

自分のGitHubアカウントにアップロードしよう！ハンズオン ls -a #（エルエスハイフンエー）を打ち、 “.git” があるのを確認

自分のGitHubアカウントにアップロードしよう！ハンズオン rm -rf .git # 削除コマンドを打つ

自分のGitHubアカウントにアップロードしよう！ハンズオン #再度以下のコマンドを打ち、確認する ls -a ここに “.git” が表示されなければOK!

自分のGitHubアカウントにアップロードしよう！ハンズオン #以下のコマンドを打ち、確認する git init

自分のGitHubアカウントにアップロードしよう！ハンズオン # 黄色の文字が出たら、以下のコマンドを打つ git branch -m main

自分のGitHubアカウントにアップロードしよう！ハンズオン git add . # を実行

自分のGitHubアカウントにアップロードしよう！ハンズオン git commit –m “first commit” # を実行

自分のGitHubアカウントにアップロードしよう！ハンズオン以下の表示が出たら次のページへ！この表示が出なかったら左上に「#push」と書いてあるページへ移動！

自分のGitHubアカウントにアップロードしよう！ハンズオン github.com に移動し、アイコンを押す

自分のGitHubアカウントにアップロードしよう！ハンズオン settings を押す

自分のGitHubアカウントにアップロードしよう！ハンズオン Emails を選択

自分のGitHubアカウントにアップロードしよう！ハンズオン Primary のアドレスをコピーしておく

自分のGitHubアカウントにアップロードしよう！ハンズオン Developer settings（画面左下）を選択

自分のGitHubアカウントにアップロードしよう！ハンズオン Personal access tokens -> Tokens(classic) を選択

自分のGitHubアカウントにアップロードしよう！ハンズオン Generate new token -> Generate new token(classic) を選択

自分のGitHubアカウントにアップロードしよう！ハンズオン１．Note 欄には「cloud shell」記入２．Expiration -> No expiration を選択

自分のGitHubアカウントにアップロードしよう！ハンズオン repo, adminrepo_hook, delete_repo にチェックマークを入れ、作成する

自分のGitHubアカウントにアップロードしよう！ハンズオン ghp_ から始まる文字列をコピー

自分のGitHubアカウントにアップロードしよう！ハンズオン ghp_ から始まる文字列をコピー ※１度しかコピーできないので注意する。

自分のGitHubアカウントにアップロードしよう！ハンズオン # 以下のコマンドを一度打つ git remote add origin https://github.com/s-taku0502/DigitalNameCard.git

自分のGitHubアカウントにアップロードしよう！ハンズオン # 以下のコマンドを一度打つ git push origin main

自分のGitHubアカウントにアップロードしよう！ハンズオン以下の文字列が表示されれば成功

つくったものを共有しよう！！ハンズオン自分のリポジトリに入り、ブラウザの https://github.com/ユーザー名/ DigitalNameCard をコピーし、discord の #作ったもの共有で送信しよう！！

ハンズオン discord#作ったもの共有チャンネルで作ったものを共有しよう！ GitHub のURL を送信するだけでも大丈夫！！作ったものを共有しよう！

お疲れ様でした！！ハンズオン

GDGoC KIT 2026年４月イベント ハンズオン資料

GDGoC KIT 2026年４月イベント ハンズオン資料

More Decks by sudo / うみ

Other Decks in Programming

Featured

Transcript

GDGoC KIT 2026年４月イベント　ハンズオン資料

GDGoC KIT 2026年４月イベント　ハンズオン資料