Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
第01回Network講座2019
Search
北海道科学大学 電子計算機研究部
May 07, 2019
Education
0
130
第01回Network講座2019
北海道科学大学 電子計算機研究部
May 07, 2019
Tweet
Share
More Decks by 北海道科学大学 電子計算機研究部
See All by 北海道科学大学 電子計算機研究部
第12回Network講座2019
densan
1
57
第11回Network講座2019
densan
0
70
第10回Network講座2019
densan
0
46
第09回Network講座2019
densan
1
160
第08回Network講座2019
densan
0
49
第07回Network講座2019
densan
0
46
第06回Network講座2019
densan
0
71
第05回Network講座2019
densan
0
51
第04回Network講座2019
densan
0
110
Other Decks in Education
See All in Education
IUM-03-Short Series of Functions
kanaya
0
120
Course Review - Lecture 12 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.8k
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
820
高校におけるプログラミング教育を考える
naokikato
PRO
0
150
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
380
[FUN Open Campus 2025] 何でもセンシングしていいですか?
pman0214
0
230
2025年度春学期 統計学 第6回 データの関係を知る(1)ー相関関係 (2025. 5. 15)
akiraasano
PRO
0
180
AWSと共に英語を学ぼう
amarelo_n24
0
140
万博非公式マップとFOSS4G
barsaka2
0
960
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
signer
PRO
0
2.1k
Avoin jakaminen ja Creative Commons -lisenssit
matleenalaakso
0
1.9k
CHARMS-HP-Banner
weltraumreisende
0
630
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
A better future with KSS
kneath
239
17k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Designing for Performance
lara
610
69k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Gamification - CAS2011
davidbonilla
81
5.4k
Transcript
ネットワークチーム 第1回 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 1.左バーの一番下のアイコンをクリック 2.検索フォームに「japanese」と入力 3.候補の一番上をクリック 4.「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
git インストール (3/6) 20
git インストール (4/6) 21
git インストール (5/6) 22
git インストール (6/6) 23
GitHub登録 24 https://github.com/ にアクセスし情報を入力する メールアドレスは大学のものを推奨
git 初期設定 25 「Git Bash」を起動して以下を入力 $ git config --global user.name
“ユーザー名“ $ git config –global user.email メールアドレス
GitHub リポジトリ作成と環境設定 (1/6) 26 1.「Github」にログイン 2. [Repositories]の[New]を選択
GitHub リポジトリ作成と環境設定 (2/6) 27 3.新規リポジトリ作成画面が表示されるので [Repository name]を入力して [Private]を選択する [Create repository]でリポジトリを作成
GitHub リポジトリ作成と環境設定 (3/6) 28 4.[Clone or download]をクリック リポジトリのURLが出てくるので コピーする
GitHub リポジトリ作成と環境設定 (4/6) 29 5.任意のフォルダを開き アドレスバーに「cmd」と入力する フォルダに移動した状態で コマンドプロンプトが開く
GitHub リポジトリ作成と環境設定 (5/6) 30 6.コマンドプロンプトが起動するので git clone [リポジトリのURL] と入力して Enter
7.リポジトリ名のフォルダが作成されている ことを確認する (この場合はNetworkTeam という フォルダが作成されている)
GitHub リポジトリ作成と環境設定 (6/6) 31 8.[ファイル(F)]から[フォルダーを開く…]を選択 9.作成されたフォルダを選択して [フォルダーの選択]をクリックする
Git コミット・プッシュ commit push
Git コミット・プッシュ 33 1.ファイルタブを選択 2.ファイルを新規作成する 3.[net1.html]と入力 1 2 3
Git コミット・プッシュ 34 4.エディタ画面で ! と入力して Tabキー を押下 HTMLのテンプレートが入力された!
Git コミット・プッシュ 35 5.gitタブを選択 6.コミットメッセージを入力 7.コミットボタンを押す 5 6 7
Git コミット・プッシュ 36 8.[…]から[プッシュ]を選択 リモートリポジトリへプッシュされた!
本日の講座はここまで お疲れ様でした