JavaScriptをとことんやってみよう【超初心者から脱初心者へレベルアップ】【わかりやすさ重視】
4.4 (231 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,501 students enrolled

JavaScriptをとことんやってみよう【超初心者から脱初心者へレベルアップ】【わかりやすさ重視】

わかりやすさ重視でバニラJavaScript(ES6)を扱っています。アロー関数/コールバック関数/配列・オブジェクト/DOM/イベントリスナー/フォーム/WebAPI/モジュール/Ajax/クラス/環境構築(webpack/babel)
4.4 (231 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,501 students enrolled
Last updated 6/2020
Japanese
Current price: $55.99 Original price: $79.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 9.5 hours on-demand video
  • 1 article
  • 14 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • JavaScriptを基礎からわかりやすく
  • ES6の文法をメインに
  • NodeJs(npm)を使ったモダンJavaScriptの理解
  • イベントリスナー、Promise、Ajax(非同期通信)の勘所
Course content
Expand all 98 lectures 09:37:42
+ JavaScriptの基礎
30 lectures 02:03:10
JavaScriptの書き方 その1
05:19
JavaScriptの書き方 その2
02:06
JavaScriptの変数 その1
03:29
JavaScriptの変数 その2
03:02
JavaScriptの配列
04:01
JavaScriptの連想配列(オブジェクト) その1
03:48
JavaScriptの連想配列(オブジェクト) その3
04:12
JavaScriptの演算子
03:05
JavaScriptのif文 その1
03:50
JavaScriptのif文 その2
04:46
JavaScriptのif文 その3
05:01
JavaScriptのswitch文
03:20
JavaScriptのユーザー定義関数 その2
07:14
Stringオブジェクト その2 trim, substring, replace
04:49
Arrayとコールバック関数
04:45
Arrayとアロー関数 filter, find, map
08:25
Objectオブジェクト(プロパティ)
03:56
ユーザー定義関数+組み込み関数
05:43
オブジェクトにメソッドや値を組み込む(this)
03:56
メソッドチェーン
03:31
変数/定数のスコープ
04:19
+ ブラウザ・DOM・WebAPI
25 lectures 03:16:21
HTML セマンティックウェブ
07:15
CSS Sass/Scss BEM
09:18
1. 要素を取得する
07:38

element.style とつけることでスタイルをつけることもできるのですが、

JavaScriptとCSSで役割分担し見やすくするため、

この講座ではelement.style ではなく element.ClassList を推奨としています。

3-1. クラス(CSS)を足したり外したり
04:59
3−2. 要素や属性のつくり方・つけ方
06:51
3-3. つくったタグを追加する(appendChild)
07:27
2-1. イベント設定 3種類
07:57
2-2. イベントオブジェクトとバブリング
05:25
サンプル1:モーダルウィンドウ
11:04
サンプル2:タブメニュー
09:27
サンプル3: カルーセル(スライドショー)
16:26
load, DOMContentLoaded, 即時関数
07:23
setInterval, Math.floor(Math.random())
08:10
フォーム(JavaScript)
08:32
ファイルアップロード・プレビュー
12:59
バリデーション
07:04
Windowオブジェクト
07:09
Intersection Observer API
13:40
+ 非同期処理・例外
7 lectures 49:35
例外処理
06:07
Promiseの書き方
08:34
Promiseチェーン
06:27
Promise.catch
06:29
Promise 非同期ということ
06:52
async / await
09:12
+ 通信(Ajax)
14 lectures 01:30:52
HTTP通信
04:12
簡易サーバーとNetwork
07:31
クエリーストリング(パラメータ)
04:24
CORS
01:41
fetch その1
10:15
fetch その2 async/await
08:00
fetch その3 エラー
07:56
サードパーティAPI補足
08:21
CRUDとRESTful
04:35
フォーム fetch POST
13:08
デバッグ (ステップ実行)
03:40
Location, History
04:57
クッキー(Cookie)
07:35
WebStorage API
04:37
+ クラス・モジュール
5 lectures 39:03
クラスとインスタンス
11:10
継承
06:57
ES モジュール
10:41
脱初心者 おすすめサンプル
07:00
+ 補足1:フロントエンド開発環境構築
12 lectures 01:03:35
Node.jsのインストール方法
01:39
webpackのインストール方法
10:08
webpack.config.js
03:35
CSS-loaderのインストール・設定
06:38
sass-loader
03:42
babelのインストール・設定
05:16
CSSの分離
04:32
Minify (圧縮)
07:21
Polyfill Intersection Observer
05:37
Polyfill fetch
05:11
+ 補足2
5 lectures 15:06
VSCodeインストール方法 その1
03:39
VSCodeインストール方法 その2
02:34
Font Awesomeの登録設定方法
05:28
コマンドプロンプト(win)の使い方
03:22
関連資料
00:03
Requirements
  • インターネット接続可能なパソコン
  • HTML/CSSを多少知っておくといいです(動画内で簡単な解説はしています)
Description

今や世界中で使われ、大活躍しているプログラミング言語が『JavaScript』です。


『JavaScript』の初歩の初歩から解説し、


『JavaScript』の代名詞とも言える『イベントリスナー』を何度も使い、


MDNのマニュアルを軸に、


DOMやオブジェクトの使い方をできるだけわかりやすく解説しています。



また、モダンJavaScriptとも呼ばれますが、


Promise、async/await、fetch、モジュール、クラスなども解説しつつ、


webpackやbabelを使った最近の開発環境の作り方までセットで解説しています。


『JavaScript』は2015年に大幅にパワーアップしたのですが、

そこから5年以上経っているということと、

インターネットエクスプローラー11を使っているPCも減っているだろうということで、

『JavaScript ES6以降』の書き方をメインに解説しています。


(講座の補足としてIE11対応方法(bableなど)も解説しています)


特にJavaScriptで特徴的な、

『DOM操作』

『イベントリスナー』

『非同期処理・通信(Promise/async/fetch)』

に重点をおいて解説をしています。


初心者の頃に詰まった事、知っておきたかった事など、


過去の自分に向けるように構成し、


まったくの超初心者から、脱初心者へ、


ぐいーんとレベルアップできるような内容になっていると思います。



■扱っていること


書き方/変数・型/関数・アロー関数/コールバック関数/配列・オブジェクト・連想配列/DOM操作/イベントリスナー/サンプル(モーダル・タブ・スライドショー)/フォーム/ブラウザオブジェクト(window,history,location)/JSON/非同期(Promise、async/await)/Ajax(fetch)/WebAPI(サードパーティAPI)/クラス/モジュール/環境構築(webpack+babel+loader)


おまけ・・Sass/Scss、Node.js/npm, webpack, babel, Moment.js


■扱っていないこと

Vue.jsなどのフレームワーク→別の講座で制作予定

canvasを使ったグラフィックプログラミング→別の講座で制作予定

JavaScriptの細かい仕様・・まずは木よりも森を見る事を重視しています。

jQuery


追加動画も検討していますのでぜひお気軽にご連絡くださいませ。


Who this course is for:
  • プログラミングに少しでも興味がある方
  • ホームページにJavaScriptも含めたいと思っている方
  • VueJsやjQueryから入ったためJavaScriptを復習したい方
  • webpackやbabelを使った2020年時点での開発環境を知りたい方