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
56
第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
100
Other Decks in Education
See All in Education
ANS-C01_2回不合格から合格までの道程
amarelo_n24
1
260
教員向け生成AI基礎講座(2025年3月28日 東京大学メタバース工学部 ジュニア講座)
luiyoshida
1
590
2025/06/05_読み漁り学習
nag8
0
150
Tutorial: Foundations of Blind Source Separation and Its Advances in Spatial Self-Supervised Learning
yoshipon
1
120
Webリテラシー基礎
takenawa
0
7.4k
IMU-00 Pi
kanaya
0
370
Data Management and Analytics Specialisation
signer
PRO
0
1.4k
SkimaTalk Teacher Guidelines Summary
skimatalk
0
800k
モンテカルロ法(3) 発展的アルゴリズム / Simulation 04
kaityo256
PRO
7
1.3k
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
令和政経義塾第2期説明会
nxji
0
100
小さなチャレンジが生んだチームの大きな変化 -私のふりかえり探求の原点
callas1900
0
560
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Making Projects Easy
brettharned
116
6.3k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How STYLIGHT went responsive
nonsquared
100
5.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Building Applications with DynamoDB
mza
95
6.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Speed Design
sergeychernyshev
32
1k
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.[…]から[プッシュ]を選択 リモートリポジトリへプッシュされた!
本日の講座はここまで お疲れ様でした