【動画で学習】UdemyのJavaScript 人気/おすすめ講座【セールでお得】

こちらでは、UdemyのJavaScript講座を、おすすめ、セール情報とともに紹介していきまっす。

Udemy講座の特徴

udemy

具体的な講座を見る前に、Udemyについてざっと整理しておきましょう。

Udemyは動画ベースの学習サービス、以下のような特徴があります。

Udemyの特徴

  • 買い切り型で継続コストがない
  • その上、内容更新あり、質問可能
  • スマホ対応、流し聴き学習も可能
  • 30日間返金が可能
  • セールで頻繁に80%以上割引

なんといっても、買い切り型なので購入後は継続コスト等が一切不要なのが安心。

その上で、講座の内容がアップデートされたり、質問も可能なので、買い切りなのに利用できるサポートが手厚いです。

講座の内容も10時間以上に登るものも多く、1本で基礎から応用まで学習可能

ユーザー評価や、動画プレビューあり、さらには30日間の返金保証もあるので、まず失敗しない購入が可能

購入時に絶対に抑えておきたいのがセール。毎回80~90%OFFの割引されます。

基本月1回は必ずセールが開催されているので、そこで購入するようにしましょう。また、新規ユーザーは1本目は大概セール価格で購入可能です。

 

UdemyのJavaScript講座一覧(セール情報付き)

以下が今Udemyで学習できるJavaScriptの主な講座(日本語のもの)です。

セール価格情報も載せています。上述したとおりUdemyのセールは大きいので逃さずゲットしてください。

学習コース評価
(4.4)
総評価数 4719件
(4.5)
総評価数 1816件
実例でわかる JavaScript 初心者講座
発売日 2015/10/29
受講者 6,751人
通常 10,200円
新規 1,680円
(4.1)
総評価数 916件
【世界で3万人が受講】JavaScriptエンジニアのためのES6完全ガイド...
発売日 2018/03/29
受講者 4,527人
通常 9,600円
新規 1,680円
(4.5)
総評価数 782件


受講者 0人
無料講座
(0)
総評価数 0件
はじめてのJavaScriptプログラミング入門講座
発売日 2016/12/17
受講者 1,978人
通常 10,800円
新規 1,680円
(4.2)
総評価数 334件
(4.7)
総評価数 298件
(4.4)
総評価数 302件
JavaScriptで作るリバーシゲーム
発売日 2016/06/04
受講者 1,195人
通常 10,200円
新規 1,610円
(4.3)
総評価数 125件
(3.9)
総評価数 110件
【JS】初級者から中級者になるためのJavaScriptメカニズム
発売日 2020/02/01
受講者 3,441人
通常 9,600円
新規 1,680円
(4.5)
総評価数 462件
HTML・CSS・JavaScript入門・はじめてのHTMLからマスターしていこう...
発売日 2018/02/16
受講者 1,100人
通常 2,400円
新規 1,680円
(4.1)
総評価数 270件
(4.1)
総評価数 142件
JavaScript+HTML:Electronでつくるローカルアプリ実例講座 for Windows...
発売日 2017/04/14
受講者 724人
通常 10,200円
新規 1,680円
(3.6)
総評価数 90件
必見!JavaScript & プログラム入門 with すぐに使えるテクニック集!...
発売日 2016/03/27
受講者 583人
通常 3,000円
新規 1,610円
(3.8)
総評価数 100件
(4.7)
総評価数 36件
(4.1)
総評価数 69件
(4)
総評価数 37件
(2.6)
総評価数 28件
(4.5)
総評価数 11件
5日で覚える!JavaScript/JQueryプログラミング【超入門】
発売日 2020/07/08
受講者 11人
通常 2,400円
新規 1,610円
(3.4)
総評価数 2件

 

UdemyのJavaScriptおすすめ講座 3選

以下がおすすめの講座です。

以下の講座は、JavaScriptの基礎学習から、応用・実用まで内容網羅。

1本でかなり幅広い内容を学習できるので、非常にコスパの高いJavaScript学習が可能です。

それぞれ詳しく見ていきましょう。

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
発売日 2017/08/29
(4.4)

9 total hours
Webの仕事に関わる人なら誰でも必要な、「HTML/CSS」とプログラミング言語「JavaScript」の知識をこれ一本で。基礎の基礎から、jQuery/Vue.jsまで学びます。

HTMLとCSS、JavaScriptなどの Webの知識は、今や Webに関わる仕事はもちろんの事、アプリ開発やメディア制作など、あらゆる仕事に必要になっています。

これら、フロントエンド(表示される画面に関わる要素)を操るエンジニアを「フロントエンドエンジニア」などと呼びます。この講座では、そんなフロントエンドエンジニアになるための基礎知識となる、HTMLと CSS、プログラミング言語の JavaScriptを総合的に学びます。

スマートデバイスに対応した「レスポンシブWebデザイン」での、サイト制作や「CSSフレームワーク」を用いて、簡単に Webサイトデザインを行なう方法、そして JavaScriptでは「Ajax通信」や「jQuery/Vue.js」などの「JavaScriptフレームワーク」を用いたプログラミング開発まで学ぶことができます。

本講座を修得すれば、簡単な Webページなら自分の力で組み上げることができるようになるでしょう。また、他のチームメンバーが作った Webページの構造を理解し、変更したり、制作に参加するといった事もできます。

なお、本講座は同じ作者の、『これからWebをはじめる人のHTML&CSS, JavaScriptのきほんのきほん(マイナビ出版刊)』に基づいて映像講義にしています。本講座だけでも学ぶことができますが、書籍を手元に置けばより理解が深まることでしょう。合わせてご利用ください。


↓全て表示↑少なく表示
 
Users Voice
YouTubeで勉強させていただいてとてもわかりやすかったので、 本格的に学びたいと思い、こちらを購入しました。 実際やってみて、今までなかった知識が補われていく感じが しました。もっと、自分の身になるように繰り返し学習したいと 思います。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • Udemyでの受講について
    • Webの開発環境を整えよう(Windows編)
    • Webの開発環境を整えよう(macOS編)
  2. 入会フォームを HTML/CSSで作成しよう
    • サンプルファイルのダウンロード
    • 簡単なHTMLを作ってみよう
    • Visual Studio CodeでのHTML編集
    • テキストフィールドを作ろう
    • ボタンを作ろう
    • headタグの中に記述する決まり文句
    • CSSで見た目を調整しよう
    • CSSの内部参照でページ内の共通パーツのスタイルを調整しよう
    • CSSの外部参照で複数ページに共通のスタイルを記述しよう
    • sanitize.cssでブラウザーのデフォルトCSSをリセットしよう
    • divタグと class属性で要素を区分けしよう
    • marginプロパティの autoを使ってエリアを中央に揃えよう
    • box-shadowプロパティで浮いたボタンを作ろう
    • 適切な HTMLタグを利用しよう
    • spanタグで「必須」ラベルを作ろう
  3. レスポンシブWebデザインで、スマホ対応のサイトを作ろう
    • HTML/CSS:CDアルバムの紹介ページを作ろう
    • HTML:セクショニングコンテンツ(header, section)
    • CSS:タイトルの CSSを整える
    • CSSのセレクターの種類
    • 画像を配置しよう - img
    • CSS:floatを使った回り込み
    • CSS:clearで回り込みを解除する
    • HTML: リンクを張る aタグ
    • HTML:「実体参照」でコピーライト表記を追加する
    • CSS:Webフォントを使う
    • CSS:レスポンシブWebデザイン(RWD)のレイアウトを作る(メディアクエリー・リキッドデザイン・ブレイクポイント)
    • CSS:CSSアニメーションを使う(Transition)
  4. Bootstrapで素早く Webページを作ろう
    • Bootstrapを、CDNで利用する
    • Bootstrap:Containerを使う
    • Bootstrap:グリッドシステムを使う
    • Bootstrap/HTML:オフセットとフォームパーツ
    • Bootstrap/HTML:フォームのスタイルと placeholder属性
    • HTML:ドロップダウンリスト(リストボックス)を作る
    • HTML:チェックボックスを作る
    • HTML/CSS:ラジオボタンと、!important指定
    • Bootstrap 4での Labelから Badgeへの名称変更
    • Bootstrap:ボタンとラベルを作る
  5. JavaScriptで今日の日付を表示しよう
    • HTML/CSS:画面を作り上げよう
    • JavaScript:オブジェクト・メソッド・パラメーター
    • JavaScript:文字列・数字と四則演算、文字列連結
    • JavaScript:変数の扱い
    • JavaScript:オブジェクトとインスタンス
    • JavaScript:Dateオブジェクトを使ってプログラムを仕上げよう
  6. イベントドリブンな、ストップウォッチプログラムを作成しよう
    • HTML/CSS:画面の見た目を作成しよう
    • JavaScript:getElementByIdとプロパティで要素を書き換えよう
    • JavaScript:if構文で条件に沿ったプログラムを作ろう
    • JavaScript:function(関数)定義をしよう
    • JavaScript:イベントドリブンなプログラムを作成しよう
    • JavaScript:setIntervalで定期的に実行されるプログラムを作ろう
    • JavaScript:変数のスコープを理解しよう
    • JavaScript:秒数から、分と時を計算しよう
    • JavaScript:thisを使って、STOPボタンを実装しよう
  7. Ajax通信でフォトライブラリーを作成しよう
    • HTML/CSS:ページを形作っていこう1 - position: fixed
    • HTML/CSS:ページを形作っていこう2 - position: relative, absolute
    • JavaScript:JSONデータを配列で操ろう
    • JavaScript:createElementと appendChildで HTML要素を作ろう
    • JavaScript:for構文で繰り返し処理をしよう
    • 【補足】利用した画像ファイルは次のレクチャーでも利用してください
    • JavaScript:Ajax通信を行なおう
    • JavaScript:Ajax通信で受信したデータを処理しよう - 論理演算子
    • JavaScript:画面を仕上げよう
  8. JavaScriptライブラリーを利用しよう
    • jQuery:jQueryを使ってみよう
    • jQuery:Ajax通信を行なってプログラムを仕上げよう
    • Vue.js:Vue.jsを使ってみよう
    • Vue.js:Vue.jsで画面を作り上げよう
    

【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)
発売日 2019/12/16
(4.5)

19.5 total hours
基礎を終えた方に最適!基礎レベルから一気にプロレベルへ!JavaScript、CSSの基礎~実践までを最短で学習。世界が変わる19時間。

「基礎レベルの事はわかるようになったけど、どうやってプロが作成するような本格的なサイトを組み立てていけばいいの!?」

「CSSやJSの基本的な文法や書き方は習得した。で、次は何を学べばいいの?」

「コードを整理するためにはどのように記載したらいいの?」

「もう一歩高いレベルの事を学びたい。」

「基本的な文法はなんとなく知っているけど、その先どのようにして成長していけばよいのかわからない?」


そんな悩みを持った方に最適のコースです。


私がまだ駆け出しエンジニアだった頃、基本的な文法を学んだ段階でまず思ったことは、

「で、どうやってこれで本格的なWEBサイトを組み立てていけばいいの?」

ということでした。


書籍やインターネットを探してみても、簡単なサイトを作りながら本当に基礎的な部分を教えているものばかりで、

もう一歩上のレベルの事を説明してくれるものは見つかりませんでした。


「どういった知識が必要なのか?どのようにして本格的なサイトを組み立てていくのか?何を覚える必要があって、何を覚えなくていいのか?」


私が初学者の時にはそんなことを思っていました。


今になって思うと随分遠回りをしたと思います。

今だと一瞬でできることでも、どのようにして実現すればよいのかがわからない状態では、
全く適切でない方法で1週間くらいかかって開発を行っていた時もありました。


「誰か実践的な書き方や方法を教えてくれないかな~。」


当時の私はそんな風に思っていました。


「こちらのコースでは今の私が当時の私に伝えたい、CSSとJavaScriptの知識を凝縮しました。」


WEB開発では覚えることがたくさんあります。

一方、皆さんの時間は有限でとても貴重なものです。


馬鹿正直に使わないHTMLタグを覚える必要はありませんし、すべてのCSSのスタイルについて覚える必要はありません。もちろん、JavaScriptの関数やメソッドについても同様です。


それよりも、もっと根本的なところで、「なぜ、そのような動きになるのか?」「なぜそのように実装するのか?」「どういったところに気を付けて学んでいけばよいのか?」について、学んでいきましょう。


「なぜそうするのか?」がわかっていれば、状況に応じて自分で最善の解決法を実装がでるようになります。そして、基礎を固めましょう。CSS、JavaScriptの基礎がわかっているとWEB開発が何倍も楽になります。また、新しくJavaScriptフレームワークやCSSフレームワークを使う際にも、学習効率は何倍にもなるでしょう。


こちらのコースは基本的な事を学んだレベルのWEB開発者をプロレベルまで一気に引き上げます。

  • もし、あなたが体系的にJavaScript、CSSの基礎について学びたいのであれば、こちらのコースを是非受けてみてください。

  • もし、あなたがCSS、JavaScriptの実装が思い通りにいかず、悩んでいるのであれば是非こちらのコースを是非受けてみてください。

  • もし、あなたがCSS、JavaScriptの実践的な記述方法からコードの最適化について学びたいのであれば、こちらのコースを是非受けてみてください。

  • もし、あなたがCSS、JavaScriptの中級者レベルに最短でなりたいのであればこちらのコースを是非受けてみてください。


19時間のコースを終えた時、あなたにはこれまでと違う世界が見えているはずです。


**こちらのコースでは以下の内容については扱いませんのでご承知おきください**

  • サーバーとの通信やサーバーへのデータリクエストの方法については扱いません。

  • JavaScriptを使ったフォームのチェックや非同期通信については扱いません。

  • サーバー側の実装(バックエンド開発)については扱いません。

  • JSフレームワーク(ReactやVue)やCSSフレームワーク(Bootstrap等)を使った実装については基本的に扱いません。

    ※一部、JSライブラリを使用します。

  • こちらのコースではES moduleを使ったJavaScriptの整理は行いません。
    WebpackでのJSファイルのバンドルも行いません。
    ※こちらのコースではJavaScriptのコード整理にclassを使用しますので、私が別で出しているWebpackのコースを参考にして、こちらのコースで作成した成果物のバンドルを是非試してみてください。

  • こちらのコースではIE11へのブラウザ対応は行っていません。最新の記述方法をお教えしていますので、IE11ではうまく動かないことをご了承ください。(IE11は脆弱性への対応も遅く、Microsoftもサポートを停止しているため、使わないことを推奨しております。)


↓全て表示↑少なく表示
 
Users Voice
うるさいBGMなどなく、シンプルに必要な情報を淡々と説明してくれるのでわかりやすい。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • コース紹介
    • コース受講の準備を行おう Part.1
    • コース受講の準備を行おう Part.2
    • プロジェクトの構成とコースの進め方
    • Udemyでの学習方法のアドバイス
  2. 超初心者の方はここからスタート
    • HTMLとは?HTMLの概要と文法について
    • HTMLのこれだけは知っておいて!インライン要素とブロック要素の使い分け
    • CSSとは?CSSの概要と文法について
    • CSSのこれだけは知っておいて!詳細度について
  3. コード記述の効率化を学ぼう
    • 【Tips】コードの自動補完を使おう
    • 【Tips】Visual Studio Codeのショートカットを使おう
  4. CSSの基礎から始めよう(Transition編)
    • 【導入】セクション紹介
    • 【丁寧に解説】まずはボタンを作りながら、CSSプロパティーを設定してみよう!
    • Transitionプロパティーの使い方を学ぼう(ボタンにホバーアクションを追加!!)
    • 【Sass】CSSをSassで記述してみよう!
    • 【Tips】Chromeの開発ツールの使い方について学ぼう
    • 【おさらい】CSSセレクターとSassネスティング
    • SassからCSSへの変換がうまくいかない時の対処法
    • ホバーで影ができるボタンを作ってみよう
    • 【演習】色々なエフェクトのボタンを作ってみよう
    • 【解答】色々なエフェクトのボタンを作ってみよう
    • Transformプロパティーの使い方をマスターしよう
    • PositionとZ-indexをマスターして思い通りのレイアウトを組もう!!
    • Transform, Position, Z-indexの復習!背景色がスライドするボタンを作ってみよう!
    • ::before?::after?疑似要素を使って無駄な記述を減らそう!
    • タイミングファンクション(a.k.a easing-function)でアニメーションをオサレにしよう!
    • 【発展】3Dアニメーションでより豊かな表現方法を身に着けよう
    • 【発展】【演習】3Dアニメーション ~ キュービックのボタンを作成してみよう
    • HTML要素を思った通りに配置するレイアウト方法まとめ
    • 【参考】開発ツールでの編集のローカルファイルへの自動反映方法
    • セクション修了!お疲れ様です!
  5. CSSを極めよう(Animation編)
    • 【導入】セクション紹介
    • 【簡単!】アニメーションを使って簡単なローダーを作ってみましょう!
    • 【文法】AnimationとKeyframesの文法を学ぼう!
    • 【Sass】@Mixinを使った一歩上のSassコーディング!!
    • 【Tips】疑似セレクターを使ってみよう!nth-childのハマりやすい罠とは!?
    • 【Sass】@for文で一歩上のSassコーディング!!
    • 【演習】Animationで色んなローダーを作ってみよう
    • 【解答 Part. 1】Animationで色んなローダーを作ってみよう
    • 【解答 Part. 2】Animationで色んなローダーを作ってみよう
    • 【実践】よく巷で見かけるオサレなやつ!メニューアイコンを作ってみよう!!
    • 【実践】オサレな文字列のアニメーションを作ってみよう!!
    • 【Sass】@Each文で配列をループ!フェードインアニメーションをサクッと作ってみよう!
    • 【Tips】今時の画像の表示方法まとめ ~ , , background-imageの使い分け
    • 【実践】画像にオサレなカバースライドアニメーションを適用してみよう!!
    • 【実践】画像にオサレなホバーアニメーションを適用してみよう!!
    • 【Tips】Background-imageを画像タグのようにアスペクト比を保ちながら表示する小技
    • 【Tips】アニメーションに最適なプロパティー
    • セクション修了!お疲れ様です!
  6. JavaScriptの基礎を固めよう!
    • 【導入】JavaScriptとは?
    • 【文法編】変数の宣言方法とデータ型について学ぼう!
    • 【文法編】関数の定義と使い方!
    • 【文法編】メソッドとプロパティーについて学ぼう!
    • 【文法編】配列の使い方をマスターしよう!
    • 【文法編】オブジェクトを使ってデータを管理しよう!
    • 【文法編】ループの記述方法基礎
    • 【文法編】ループの記述方法(for inとfor of)
    • 【文法編】ループの記述方法(実践)
    • 【文法編】if文と判定処理の正しい記述方法について学ぼう!
    • 【文法編】アロー関数を使って省略記法をマスターしよう!
    • 【文法編】コールバック関数をマスターしよう!
    • 【文法編】コールバック関数とループ処理
    • 【文法編】配列とforEachメソッド
    • 【文法編】配列とreduceメソッド
    • 【文法編】reduce関数を作ってみよう
    • 【DOM編】JavaScriptでHTML参照・更新!セレクターAPIを学ぼう!
    • 【DOM編】画面に機能を追加!イベントリスナーでイベントを登録!
    • 【DOM編】超基礎!画面初期化時にコードを実行!DOMContentLoadedとLoadの違いについて学ぼう!
    • 【DOM編】【演習】文字列をHTMLタグに分割してみよう!!
    • 【レベルアップ】Classを使ったコードの整理方法!!クラスでコードの再利用性を高めよう!
    • 【レベルアップ】thisを学んでクラスやオブジェクトを変幻自在に操ろう!!
    • 【おさらい】Classとオブジェクト
    • 【おさらい】thisとオブジェクト
    • 【おさらい】thisとbindの関係
    • 【おさらい】TextAnimationクラスをもう一度見てみよう。
    • 【レベルアップ】クラス継承でコードを有効利用しよう!!不要なコードは書かないようにしましょう!
    • セクション修了!お疲れ様です!
  7. JavaScriptのより実践的な記述について学ぼう!
    • 【導入】セクション紹介
    • 【Tips】スクロール検知の達人!IntersectionObserverを学ぼう!
    • 【実践】文字アニメーションをスクロールに合わせて発動しよう!
    • 【レベルアップ】スクロール監視クラスを作成してコードの最適化を行おう!
    • 【実践】スライドアニメーションをスクロールに合わせて発動しよう!
    • 【実践】クラスの記述に慣れよう!スマホメニューの作成 Part. 1!!
    • 【レベルアップ】BEMでCSSを記述してみよう!スマホメニューの作成 Part. 2!!
    • 【実践】スマホメニューを完成させよう!
    • 【実践】ページローダーでイライラ解消!ページローダーの作り方!
    • 【ライブラリ導入編】ヒーロースライダーでページをオサレにしよう!
    • 【実践編 Part.1】ヒーロースライダーでページをオサレにしよう!
    • 【実践編 Part.2】ヒーロースライダーでページをオサレにしよう!
    • 【実践編 Part.3】ヒーロースライダーでページをオサレにしよう!
    • セクション修了!お疲れ様です!
  8. Webサイト作成(序)
    • 【導入】セクション紹介
    • 【スマホ対応】レスポンシブデザインとは?スマホでも見やすいサイトを作るために!
    • 【スマホ対応】レスポンシブデザインの基礎を学ぼう!メディアクエリとビューポートについて学ぼう!
    • 【スマホ対応】モバイルファーストCSSの実装方法を学ぼう!
    • ヒーロースライダーの組み込みから始めて行こう!
    • 【Tips】最初にやっておくべきノーマライズとは?|マルチブラウザ対応
    • 【Tips】Webフォントでデバイス間の表示を統一しよう!
    • 【Tips】サイト表示に統一感を!共通クラスで記述を最小限に効果を最大限に!
  9. Webサイト作成(完)
    • あともう少しです!後半戦も頑張っていきましょう!
    • 【実装開始!】まずは以前作成したモジュールを移行してこよう!
    • スマホ画面から作成していこう!(Houseセクションの作成 Part.1)
    • Flexboxで超簡単にレスポンシブ画面を実装しよう!(Houseセクションの作成 Part.2)
    • 【復習】Flexboxを使ったレスポンシブ画面の実装の復習!!(Popularセクションの作成)
    • 【実践】Flexboxを使ったレスポンシブ画面の実装(Travelセクションの作成)
    • 【実践】Z-indexと疑似要素を使った実践的な記述方法について学ぼう!
    • 【実践】Flexboxでフッター作成!
    • 【ちょっと休憩】emとremについて
    • 【実践】ヘッダーを作ろう!Part. 1!
    • 【実践】ヘッダーを作ろう!Part. 2!
    • 【実践】サイドバーを作成しよう
    • 【実践】ベースデザインを完成しよう
    • 【実践】ページローダー追加
    • 【いよいよ完成へ!】JavaScriptを整理しよう!Part. 1
    • 【いよいよ完成へ!】JavaScriptを整理しよう!Part. 2
    • 【完】サイトを完成させよう
  10. インターネットに公開してみよう
    • インターネット公開前の準備(リリース準備をしよう)
    • インターネットにWebサイトを公開しよう
  11. さいごに
    • [ボーナスレクチャー]大変お疲れ様でした!
 
Preview Video
   

実例でわかる JavaScript 初心者講座

実例でわかる JavaScript 初心者講座
発売日 2015/10/29
(4.1)

8.5 total hours
プログラミングの基礎から学び、JavaScriptでWebアプリ(ブラウザ上で動くアプリ)を作ろう!

 このコースは、実際にブラウザ上で動くアプリケーションを作りながら、プログラミングの基礎から学習し、JavaScriptでプログラムを書けるようになります。

 このコースを習得すれば、次のような事ができるようになります。

- プログラミングの基礎の習得。

- ブラウザ上で動くアプリケーションの作成。

- 最新のHTML5の機能の利用(作図、画像フィルター処理、音声や動画の再生、Web APIの使用)

 コースで紹介されるコードは、サンプルコードとして、全てダウンロードすることができます。

 このコースでは、基礎から学んでいき、最終的に最新のHTML5の機能を利用した、アプリの作成までを行います。

‥‥‥‥‥‥‥‥‥‥

 各セクションでは、以下のようなアプリを作ります。ほとんどのアプリは、ソースコードが100行以内で、容易に理解、改造が行えます。

  • 税込み計算アプリ(入力欄から数値を得て計算結果を表示)
  • アウトライン メモ(アウトライン エディタ風に、ネストしたリストを追加)
  • 三択問題アプリ(ユーザーの解答に応じて、結果表示を分岐)
  • 字典アプリ(マウスオーバーで、説明表示を切り替え)
  • テーブル ソート(テーブルを、名前順や数値順で、自在にソート)
  • 連続計算アプリ(複数行入力欄の数式を、行ごとに計算して結果表示)
  • メモ アプリ(Webブラウザに情報を記録したり、取り出したり)
  • HTML自動リンク アプリ(文字列からURLを探し出して、自動でタグを付加)
  • 角丸四角画像生成アプリ(角丸四角のパスを作り、画像を動的に生成)
  • 画像切り抜きアプリ(画像を丸く切り抜いたPNG画像を生成)
  • セピア調アプリ(画像の画素を処理して、セピア調に変換)
  • 音声再生アプリ(音声を読み込み、再生)
  • 動画再生アプリ(動画を読み込み、再生)
  • ストップウォッチ(経過時間を取得して、定期的に表示を更新)
  • 人気Webページ表示(Web APIを利用して情報を得て、リンクボタンを自動生成)


 JavaScript
は、Webブラウザとテキストエディタがあれば、すぐにプログラムを始められます。この簡単なプログラミング言語で、プログラムとJavaScriptをマスターしましょう!

※ 本講座の解説で出てくる「Webアプリ」とは、ブラウザ上で動くアプリケーションのことです。電卓やメモ帳のような、パソコンのローカルアプリを、ブラウザ上で再現したものになります。複雑なものでは、PhotoshopのようなWebアプリもあります。本講座では、初心者でも作れるものを中心に、作成していきます。


↓全て表示↑少なく表示
 
Users Voice
基礎知識がなくてもすんなりと頭に入ってくる内容でした。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. イントロダクション
    • イントロダクション ムービー
  2. 第1章 JavaScriptの基本1
    • JavaScript とは
    • Web の技術
    • Web のクライアントサイドの技術
    • HTML5 以前の世界、以降の世界
    • JavaScript でプログラミングするのに必要なもの
    • Google Chrome の導入
    • 要素を検証
    • デバイスモード
    • コンソール
  3. 第2章 とりあえず書いてみる
    • 電卓代わりの数値計算
    • 丸括弧の利用
    • 文字列とは
    • 文字列の連結、文字列と数値の足し算
    • 文字列の長さを知る
    • 文字列の置換
    • エンコードとデコード
    • 特殊な数値計算 Math
    • MDN で調べる
    • 変数に値を格納する
    • コンソールで複数行のプログラムを書く
  4. 第3章 テキストファイルに書いてみる
    • ソースコードのダウンロード
    • UTF-8 で書く
    • HTML ファイルを書く
    • CSS を HTML ファイルに書く
    • CSS を外部のテキストファイルに書く
    • 絶対 URL と 相対 URL
    • CSS の調べ方
    • JavaScript を HTML ファイルに書く
    • JavaScript を外部のテキストファイルに書く
    • コンソールに出力されるファイル名と行
    • コンソールのエラーの見方
    • コメント
    • テンプレートを用意する
  5. 第4章 jQuery
    • 本セクションで作るアプリ「税込み計算 Web アプリ」
    • ソースコードのダウンロード
    • プログラムを短く書くメリット
    • jQuery の導入
    • DOM と要素
    • jQuery を使った処理の開始
    • jQuery の DOM 操作の基本
    • 数値と文字列
    • ボタンに機能を追加する
    • 「税込み計算 Web アプリ」を作る
  6. 第5章 その他のフォーム部品
    • 本セクションで作るアプリ「アンケートっぽい何か」
    • ソースコードのダウンロード
    • チェックボックスの情報取得と変更
    • 真偽値
    • ラジオボタンの情報取得と変更
    • リストの情報取得と変更
    • 値の変更で処理をおこなう
    • 送信前に処理をおこなう1
    • 送信前に処理をおこなう2
    • 「アンケートっぽい何か」を作る
  7. 第6章 Web ページを書き換える
    • 本セクションで作るアプリ「アウトライン メモ」
    • ソースコードのダウンロード
    • 要素内の文字の取得、書き換え
    • 要素内の HTML の取得、書き換え
    • 要素の属性の取得、書き換え
    • 要素の CSS の取得、書き換え
    • Web ページのタイトルを取得、書き換え
    • jQuery で要素を作り、末尾に追加
    • 要素の絞りこみ
    • 子要素を探す
    • 親要素を探す
    • 「アウトライン メモ」を作る1
    • 「アウトライン メモ」を作る2
  8. 第7章 条件分岐
    • 本セクションで作るアプリ「三択問題 Web アプリ」
    • ソースコードのダウンロード
    • if 文1
    • if 文2
    • if 文3
    • 波括弧の省略
    • チェックボックスで、表示を切り替え
    • 比較演算子1
    • 比較演算子2
    • switch case 文
    • 「三択問題 Web アプリ」を作る
  9. 第8章 関数
    • 本セクションで作るアプリ「字典 Web アプリ」
    • ソースコードのダウンロード
    • 処理をまとめる
    • 変数のスコープ1
    • 変数のスコープ2
    • 引数を取る
    • 戻り値を持つ
    • 関数の基本構造
    • 「字典 Web アプリ」を作る1
    • 「字典 Web アプリ」を作る2
  10. 第9章 配列
    • 本セクションで作るアプリ「テーブル ソート Web アプリ」
    • ソースコードのダウンロード
    • 配列とは
    • 配列の作り方1 Array
    • 配列の作り方2 角括弧、split
    • ソート
    • 「テーブル ソート Web アプリ」を作る1
    • 「テーブル ソート Web アプリ」を作る2
  11. 第10章 ループ処理
    • 本セクションで作るアプリ「連続計算 Web アプリ」
    • ソースコードのダウンロード
    • 配列の各要素を処理するには
    • for 文の書き方1
    • for 文の書き方2
    • break
    • continue
    • 入れ子の配列
    • 入れ子のループ処理1
    • 入れ子のループ処理2
    • while と do while
    • 「連続計算 Web アプリ」を作る
  12. 第11章 オブジェクト
    • 本セクションで作るアプリ「メモ Web アプリ」
    • ソースコードのダウンロード
    • サーバーの利用
    • オブジェクト、プロパティ、メソッド1
    • オブジェクト、プロパティ、メソッド2
    • new this オブジェクト
    • 全てのプロパティを処理する
    • window オブジェクト
    • JSON
    • cookie
    • 「メモ Web アプリ」を作る1
    • 「メモ Web アプリ」を作る2
    • 「メモ Web アプリ」を作る3
    • 「メモ Web アプリ」を作る4
  13. 第12章 正規表現
    • 本セクションで作るアプリ「HTML 自動リンク Web アプリ」
    • ソースコードのダウンロード
    • 正規表現とは1
    • 正規表現とは2
    • 繰り返し1
    • 繰り返し2
    • その他の正規表現
    • 後方参照
    • 置換に関数を使う
    • 文字列検索
    • 「HTML 自動リンク Web アプリ」を作る
  14. 第13章 Canvas 1
    • 本セクションで作るアプリ「角丸描画 Web アプリ」
    • ソースコードのダウンロード
    • Canvas とは
    • 矩形の描画1
    • 矩形の描画2
    • 文字の描画
    • 線の描画
    • 円の描画
    • Canvas の生成
    • Canvas から PNG を生成
    • 「角丸描画 Web アプリ」を作る1
    • 「角丸描画 Web アプリ」を作る2
    • 「角丸描画 Web アプリ」を作る3
  15. 第14章 Canvas 2
    • 本セクションで作るアプリ「画像切り抜き Web アプリ」「セピア調 Web アプリ」
    • ソースコードのダウンロード
    • 画像の描画1
    • 画像の描画2
    • 「画像切り抜き Web アプリ」を作る1
    • 「画像切り抜き Web アプリ」を作る2
    • 「画像切り抜き Web アプリ」を作る3
    • 「画像切り抜き Web アプリ」を作る4
    • 「セピア調 Web アプリ」を作る1
    • 「セピア調 Web アプリ」を作る2
    • 「セピア調 Web アプリ」を作る3
  16. 第15章 音声と映像
    • 本セクションで作るアプリ「音声再生 Web アプリ」「動画再生 Web アプリ」
    • ソースコードのダウンロード
    • 「音声再生 Web アプリ」を作る1
    • 「音声再生 Web アプリ」を作る2
    • 「音声再生 Web アプリ」を作る3
    • 「動画再生 Web アプリ」を作る
  17. 第16章 時間
    • 本セクションで作るアプリ「ストップウォッチ」
    • ソースコードのダウンロード
    • Date1
    • Date2
    • setTimeout
    • setInterval
    • 「ストップウォッチ Web アプリ」を作る1
    • 「ストップウォッチ Web アプリ」を作る2
  18. 第17章 通信
    • 本セクションで作るアプリ「人気Webページ表示」
    • ソースコードのダウンロード
    • ソースコードのアップデート
    • getScript
    • get
    • getJSON
    • ajax
    • 「人気 Web ページ表示 Web アプリ」を作る
  19. 第18章 終わりに
    • 終わりに
 
Preview Video
   

関連:JavaScriptを本でも学ぼう

UdemyのJavaScript講座は上述したとおり、HTML/CSSの基礎も含めた学習からVue.jsを使った実用等まで、詳しく・幅広く学べる非常にパフォーマンスの高い学習法。

ただ、リファレンスとしては動画だと見返しづらい側面もありますので、書籍も併用しながら学習すると良いかと思います。

JavaScriptの参考書は以下で紹介しています。合わせて参照ください。

いじょうでっす。

コメント

タイトルとURLをコピーしました