第01回Network講座2019

ネットワークチーム第１回 2019 北海道科学大学電子計算機研究部

2 INDEX ⚫ ブラウザについて ⚫ テキストエディタ - VSCode導入 - 拡張機能
⚫ Git - Gitについて - gitインストール

ブラウザについて Google Chrome

ブラウザについて 4 コンソールや要素の検証など開発者ツールをよく利用するため本講座では Google Chrome を使用します。

テキストエディタ Visual Studio Code Install & Extensions

テキストエディタ導入 6 Visual Studio Code ⚫ Microsoft 開発のテキストエディタ ⚫
高機能で軽い ⚫ 拡張機能が豊富

テキストエディタ導入 7 https://code.visualstudio.com/

テキストエディタ拡張機能 8 １．左バーの一番下のアイコンをクリック２．検索フォームに「japanese」と入力３．候補の一番上をクリック４．「Install」をクリック VSCodeを再起動 1 2
4 3

テキストエディタ拡張機能 9 同じ要領で以下もインストール ⚫ Bracket Pair Colorizer 2 ⚫
HTML Snippets ⚫ Prettier ⚫ GitLens ⚫ Material Icon Theme ⚫ HTMLHint 自分の好きな拡張機能を導入してみよう！

テキストエディタ 10 コマンド内容 Ctrl + Shift + P コマンドパレット
Ctrl + N 新規ファイルを開く Ctrl + S 上書き保存 Ctrl + F ファイル内の単語を検索 Ctrl + / 行をコメントアウト Ctrl + W 編集中ファイルを閉じるショートカットキー（一部抜粋）

Git Version Control System

Gitとは ⚫ 分散型バージョン管理システム - いつでも・どこへでも戻れる - 誰が何を編集したかわかる ⚫ GitHub などが代表例
⚫ ソフトウェア開発の基盤 - もはや使わない選択肢は無い！ - しかし、学校では教えてくれない…… 12

Gitのしくみリモートリポジトリ 13 編集編集コミットコミットプッシュプルローカルリポジトリ
ローカルリポジトリローカルPC ローカルPC

Git 用語 ⚫ リポジトリ（Repository）開発に必要なソースコード、資料やそれらの変更などの一元的に保存する貯蔵庫 ⚫ リモートリポジトリオンライン上で共有するリポジトリ
⚫ ローカルリポジトリ自分のPC上のリポジトリファイルの変更はローカルリポジトリへコミットする 14

Git 用語 ⚫ コミット（commit）ファイルの変更を記録すること ⚫ プッシュ（push）ローカルリポジトリの変更をリモートリポジトリへアップロードすること ⚫
プル（pull）リモートリポジトリの変更をローカルリポジトリへダウンロードすること ⚫ クローン（clone）リモートリポジトリ自体を複製すること 15

Git 16 https://commons.wikimedia.org/wiki/File:In_case_of_fire_git_push_first.jpg

Git セットアップ Install git and register for GitHub.

git インストール (1/6) 18 https://git-scm.com/ へアクセスし「git」をダウンロード＆インストール

git インストール (2/6) 19

GitHub登録 24 https://github.com/ にアクセスし情報を入力するメールアドレスは大学のものを推奨

git 初期設定 25 「Git Bash」を起動して以下を入力 $ git config --global user.name
“ユーザー名“ $ git config –global user.email メールアドレス

GitHub リポジトリ作成と環境設定 (1/6) 26 １．「Github」にログイン２． [Repositories]の[New]を選択

GitHub リポジトリ作成と環境設定 (2/6) 27 ３．新規リポジトリ作成画面が表示されるので [Repository name]を入力して [Private]を選択する [Create repository]でリポジトリを作成

GitHub リポジトリ作成と環境設定 (3/6) 28 ４．[Clone or download]をクリックリポジトリのURLが出てくるのでコピーする

GitHub リポジトリ作成と環境設定 (4/6) 29 ５．任意のフォルダを開きアドレスバーに「cmd」と入力するフォルダに移動した状態でコマンドプロンプトが開く

GitHub リポジトリ作成と環境設定 (5/6) 30 ６．コマンドプロンプトが起動するので git clone [リポジトリのURL] と入力して Enter
７．リポジトリ名のフォルダが作成されていることを確認する（この場合はNetworkTeam というフォルダが作成されている）

GitHub リポジトリ作成と環境設定 (6/6) 31 ８．[ファイル(F)]から[フォルダーを開く…]を選択９．作成されたフォルダを選択して [フォルダーの選択]をクリックする

Git コミット・プッシュ commit push

Git コミット・プッシュ 33 １．ファイルタブを選択２．ファイルを新規作成する３．[net1.html]と入力１２３

Git コミット・プッシュ 34 ４．エディタ画面で ! と入力して Tabキーを押下 HTMLのテンプレートが入力された！

Git コミット・プッシュ 35 ５．gitタブを選択６．コミットメッセージを入力７．コミットボタンを押す５６７

Git コミット・プッシュ 36 ８．[…]から[プッシュ]を選択リモートリポジトリへプッシュされた！

本日の講座はここまでお疲れ様でした

第01回Network講座2019

第01回Network講座2019

More Decks by 北海道科学大学 電子計算機研究部

Other Decks in Education

Featured

Transcript

More Decks by 北海道科学大学　電子計算機研究部