Git及びその他のツール

2020-09-12

上位に移動

概要

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

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

  • Git（バージョン管理）及びGitHub
  • ブラウザ開発ツール
  • Visual Studio Codeの拡張機能（ESLint、Prettier、Live Server等）
  • Emmet
  • NPM又はYarn（パッケージマネージャ）
  • Axios
  • webpack又はParcel（モジュールバンドリング）
  • Gulp又はGrunt（タスクランナー）

Git（バージョン管理）及びGitHub

Git

  • コンピュータファイルの変更を追跡するためのバージョンコントロールシステム(VCS)
  • 分散型バージョンコントロール
  • 複数の開発者間で作業を調整する
  • 任意の時点に戻れる
  • ローカル及びリモートのリポジトリ
提供元教材名備考
LinkedIn PremiumGitHub 入門動画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個検索された。
YouTube以外の教材
Git+GitHub入門
GitHubプロジェクト管理入門
Git & GitHub Crash Course For Beginners
GitHub Project Management Tutorial – Setup GitHub Projects & Automations
5 Ways to DevOps-ify your App – Github Actions Tutorial
Automate your dependency upgrades with Dependabot

ブラウザ開発ツール

今更聞けない！ ブラウザデベロッパーツールの使い方
Google Chrome Developer Tools Crash Course

Visual Studio Codeの拡張機能

  • ESLint
  • Prettier
  • Live Server
  • その他
Visual Studio Code入門 #06：拡張機能 VSCodeをパワーアップ。おすすめ拡張機能

Emmet

  • 主なテキストエディターのプラグインで、既定形式の入力補完機能によりHTML等を素早く入力できるようにするためのもの。
提供元教材名備考
LinkedIn PremiumCoding Faster with Emmet動画53分、2013-07-31
その他言語:EN、emmetで2コース、40動画検索された。
ドットインストール PREMIUMEmmet入門動画12本
UdemyEMMET Faster HTML & CSS workflow – Best Tool For Developers無料動画72分
その他Emmet、English、★4.5以上で14個検索された。
YouTube以外の教材
Speed up your HTML workflow by 50%?! Emmet Tutorial

パッケージマネージャ

NPM

  • Node Package Manager
  • Node.jsにプレインストールされている
  • システムに容易にモジュール（基本的にJavaScriptライブラリ）やパッケージをインストール
  • コードの共有や再利用を容易にする
提供元教材名備考
LinkedIn PremiumNPM (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コースある。
ドットインストール PREMIUMn/a
UdemyJavaScript Infrastructure: CLI, NPM, Babel 7 and Webpack 4動画218分、2019–11
その他npm、English又は日本語、有料、★4.5以上で115個検索されたい。
YouTube以外の教材
NPM Crash Course

Yarn

  • JavaScriptのバッケージマネージャ
  • Facebookが作成
  • npmに類似
  • npmの代替
  • npmレジストリからインストール
提供元教材名備考
LinkedIn PremiumLearning Package Management with Yarn動画72分、2018-10-03
その他言語:EN、yarnで2コース検索された
ドットインストール PREMIUMn/a
UdemyYarn Dependency Management – The Complete Guide動画90分、2020-05
その他yarn、English、有料、★4.5以上で27個検索された。
YouTube以外の教材
Yarn Package Manager Crash Course

Axios

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

モジュールバンドリング

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

webpack

提供元教材名備考
LinkedIn Premiumwebpack 4 入門動画128分、2018-06-20
Learning webpack 4動画41分、2019-02-28
Webpack for React Applications動画197分、2018-08-03
その他言語:EN、webpackで7コース検索された。
ドットインストール PREMIUMn/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個検索された。
YouTube以外の教材
Webpack 4 Tutorial – Getting Started for Beginners
Webpack Crash Course

Parcel

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

タスクランナー

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

Gulp

  • オープンソースのJavaScriptツールキット＆タスクランナー
  • フロントエンド・ビルドシステム
  • Node.js及びnpmのビルド
  • 時間がかかったり、繰り返しの作業に用いる
  • 各種タスクのための多数のプラグインが利用可能
提供元教材名備考
LinkedIn PremiumGulp.js 入門動画109分、2016-07-27
Gulp.js: Web Project Workflows動画59分、2019-10-31
その他言語:EN、Gulpで8コース検索された。
ドットインストール PREMIUMn/a
Udemy（無料）初心者のためのフロントエンド環境構築入門～Gulp編動画115分
Udemy（有料）Gulp 4: Automate your development workflow動画245分
n/aGulp、English、有料、★4.5以上の教材は8個検索された。
YouTube以外の教材
Gulp JS Crash Course

Grunt

提供元教材名備考
LinkedIn PremiumGrunt.jsを使ったWeb制作のワークフロー動画126分、2016-02-01
Grunt.js: Web Workflows動画77分、2015-07-13
その他言語:EN、Gruntで8コース検索された。
ドットインストール PREMIUMGrunt入門動画12本、すでにアーカイブされている（質問の受付や内容の更新を終了）。
UdemyLearning 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個検索された。
YouTube以外の教材
GRUNT TUTORIAL – Grunt makes your web development better! (2015-01-08)

上位に移動

Posted by pitang1965