Git及びその他のツール
概要
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/GitHub入門 基本操作編 | 動画19本、2023-10-06 |
| Git/GitHub入門 ブランチ編 | 動画17本、2023-10-13 | |
| Git/GitHub入門 リモート編 | 動画17本、2023-10-27 | |
| 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個検索された。 |
パッケージマネージャ
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個検索された。 |