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
55
第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
Tangible, Embedded and Embodied Interaction - Lecture 7 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
教員向け生成AI基礎講座(2025年3月28日 東京大学メタバース工学部 ジュニア講座)
luiyoshida
1
560
技術文章を書くための執筆技術と実践法(パラグラフライティング)
hisashiishihara
18
6.5k
バックオフィス組織にも「チームトポロジー」の考えが使えるかもしれない!!
masakiokuda
0
110
女子商アプリ開発の軌跡
asial_edu
0
390
SkimaTalk Teacher Guidelines
skimatalk
0
790k
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
700
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
1.7k
プログラミング教育する大学、ZEN大学
sifue
1
530
Are puppies a ranking factor?
jonoalderson
0
820
Virtual and Augmented Reality - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
社外コミュニティと「学び」を考える
alchemy1115
2
170
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
It's Worth the Effort
3n
185
28k
How STYLIGHT went responsive
nonsquared
100
5.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Docker and Python
trallard
44
3.4k
Speed Design
sergeychernyshev
32
1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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.[…]から[プッシュ]を選択 リモートリポジトリへプッシュされた!
本日の講座はここまで お疲れ様でした