Git及びその他のツール

2019-06-182021-02-23

上位に移動

概要

Gitその他のツールの格安教材（LinkedIn Premium、ドットインストールPREMIUM、Udemyの有料及び無料の★4.5以上の動画、Progate、YouTube）を紹介します。

GitはすべてのWeb開発者に必要です。

• バージョン管理: Git, Subversion
• リポジトリマネージャ: GitHub, Bitbucket, GitLab
• ブラウザ開発ツール
• Visual Studio Codeの拡張機能: ESLint、Prettier、Live Server, Emmet, Snippets 等
• Emmet
• パッケージマネージャ: NPM, Yarn
• Axios
• モジュールバンドラ: Parcel, webpack, Rollup
• タスクランナー: Gulp, Grunt

Git及びGitHub

• Git以外のバージョン管理ツールとしては他にSubversion等がある。
• GitHub以外のリポジトリマネージャとしては他にBitbucketやGitLab等がある。

Git

• コンピュータファイルの変更を追跡するためのバージョンコントロールシステム(VCS)
• 分散型バージョンコントロール
• 複数の開発者間で作業を調整する
• 任意の時点に戻れる
• ローカル及びリモートのリポジトリ

提供元	教材名	備考
LinkedIn Premium	GitHub 入門	動画104分、2020-05-04
	WebクリエイターのためのGit入門	動画122分、2015-05-05
	Webデザイナーのためのgit 入門	動画49分、2014-09-10
	Programming Foundations: Version Control with Git	動画80分、2020-03-17
	Visual Studio: Source Control with Git and GitHub	動画138分、2020-01-03
	Git: Branches, Merges, and Remotes	動画178分、2019-06-20
	GitHub Essential Training	動画168分、2019-06-05
	Git Essential Training: The Basics	動画175分、2019-05-22
	Learning GitHub	動画133分、2019-05-14
	その他	言語:EN、gitで38コース検索された。
ドットインストール （無料）	git入門	動画22本
Udemy	必要性から学ぶ、Git・GitHub入門講座	動画146分、2020-07
	Git Learning Journey – Guide to Learn Git (Version Control)	動画123分、2020-06
	Complete Git Guide: Understand and master Git and GitHub	動画2,910分、2020-08
	Git & GitHub – The Complete Git & GitHub Course	動画182分、2019-10
	その他	Git、English又は日本語、有料、★4.5以上で228個検索された。

ブラウザ開発ツール

Visual Studio Codeの拡張機能

• ESLint
• Prettier
• Live Server
• Emmet
• Snippets
• その他

Emmet

• 主なテキストエディターのプラグインで、既定形式の入力補完機能によりHTML等を素早く入力できるようにするためのもの。

提供元	教材名	備考
LinkedIn Premium	Coding Faster with Emmet	動画53分、2013-07-31
	その他	言語:EN、emmetで2コース、40動画検索された。
ドットインストール PREMIUM	Emmet入門	動画12本
Udemy	EMMET Faster HTML & CSS workflow – Best Tool For Developers	無料動画72分
	その他	Emmet、English、★4.5以上で14個検索された。

パッケージマネージャ

• Yarnとnpmの違い：JavaScriptパッケージマネジャーを比較する – WPJ

NPM

• Node Package Manager
• Node.jsにプレインストールされている
• システムに容易にモジュール（基本的にJavaScriptライブラリ）やパッケージをインストール
• コードの共有や再利用を容易にする

提供元	教材名	備考
LinkedIn Premium	NPM (Node Project Manager) 入門	動画40分、2016-01-04
	Advanced npm	動画42分、2019-01-25
	Learning npm the Node Package Manager	動画43分、2018-10-16
	その他	言語:EN、NPMで4コースある。
ドットインストール PREMIUM	n/a
Udemy	JavaScript Infrastructure: CLI, NPM, Babel 7 and Webpack 4	動画218分、2019–11
	その他	npm、English又は日本語、有料、★4.5以上で115個検索されたい。

Yarn

• JavaScriptのバッケージマネージャ
• Facebookが作成
• npmに類似
• npmの代替
• npmレジストリからインストール

提供元	教材名	備考
LinkedIn Premium	Learning Package Management with Yarn	動画72分、2018-10-03
	その他	言語:EN、yarnで2コース検索された
ドットインストール PREMIUM	n/a
Udemy	Yarn Dependency Management – The Complete Guide	動画90分、2020-05
	その他	yarn、English、有料、★4.5以上で27個検索された。

Axios

• ブラウザ及びNode.jsのためのPromiseベースのHTTPクライアント

提供元	教材名	備考
LinkedIn Premium	ウィークリー Web デザインシリーズのJavaScriptライブラリ「axios」を使ってもっと気軽にAjax（GET編）	動画6.6分、2018-02-21
	その他	言語:EN、axiosで3コース、83動画検索された。
ドットインストール PREMIUM	n/a	動画*.*分
Udemy	?	axios、English、有料、★4.5以上で37個検索された。axiosだけの教材は見当たらない。

モジュールバンドリング

• 複数のモジュールの依存関係の解決
• モジュールのバンドル（纏める）

Parcel

提供元	教材名	備考
LinkedIn Premium	n/a
ドットインストール PREMIUM	n/a
Udemy	Parcel Bundler: The Complete Tutorial	動画185分、2019-09
	n/a	percel、英語、有料、★4.5以上で16個検索されたが、これに関係のないもの（AutoCAD関連）を含む。

webpack

• モジュールバンドラ（Webのファイルを纏める）
• A beginner’s introduction to Webpack – freeCodeCamp.org – Medium

提供元	教材名	備考
LinkedIn Premium	webpack 4 入門	動画128分、2018-06-20
	Learning webpack 4	動画41分、2019-02-28
	Webpack for React Applications	動画197分、2018-08-03
	その他	言語:EN、webpackで7コース検索された。
ドットインストール PREMIUM	n/a
Udemy（無料）	現役エンジニアのためのWebpack環境構築入門 with Babel｜Sass｜Eslint	動画251分
	その他	webpack、英語又はEnglish、無料、★4.5以上で3個検索された。
Udemy（有料）	モジュールバンドラー webpack を1日で習得！フルスクラッチでインストールからカスタマイズまでの手順を理解する	動画364分、2010-02
	The Complete React Developer Course (w/ Hooks and Redux)の中で解説	動画の該当部分136分、2019-05
	その他	webpack、英語又は日本語、有料、★4.5以上で51個検索された。

タスクランナー

• タスクの自動化
  • ファイルのコピー・結合
  • 構文チェック
  • テスト
  • モジュールバンドル

Gulp

• オープンソースのJavaScriptツールキット＆タスクランナー
• フロントエンド・ビルドシステム
• Node.js及びnpmのビルド
• 時間がかかったり、繰り返しの作業に用いる
• 各種タスクのための多数のプラグインが利用可能

提供元	教材名	備考
LinkedIn Premium	Gulp.js 入門	動画109分、2016-07-27
	Gulp.js: Web Project Workflows	動画59分、2019-10-31
	その他	言語:EN、Gulpで8コース検索された。
ドットインストール PREMIUM	n/a
Udemy（無料）	初心者のためのフロントエンド環境構築入門～Gulp編	動画115分
Udemy（有料）	Gulp 4: Automate your development workflow	動画245分
	n/a	Gulp、English、有料、★4.5以上の教材は8個検索された。

Grunt

提供元	教材名	備考
LinkedIn Premium	Grunt.jsを使ったWeb制作のワークフロー	動画126分、2016-02-01
	Grunt.js: Web Workflows	動画77分、2015-07-13
	その他	言語:EN、Gruntで8コース検索された。
ドットインストール PREMIUM	Grunt入門	動画12本、すでにアーカイブされている（質問の受付や内容の更新を終了）。
Udemy	Learning Path:Building Grunt-ified Web Application Workflows	動画277分、2017-01、★4.0
	Introduction to GRUNT js	動画50分、2015-02、★4.1
	その他	Grunt、English、有料、★4.5以上の英語の教材は5個、★4以上だと18個検索された。

上位に移動