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

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

Udemy講座の特徴

udemy

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

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

Udemyの特徴

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

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

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

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

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

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

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

 

UdemyのJavaScript講座 人気ランキング(セール情報付き)

以下がUdemyで学習できるJavaScriptの最新の人気講座ランキング(日本語のもの)です。

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

人気
Rank
学習コース評価
1
(4.5)
総評価数 7220件
2
(4.5)
総評価数 3605件
3
(4.3)
総評価数 4666件
4
【JS】ガチで学びたい人のためのJavaScriptメカニズム
発売日 2020/02/01
受講者 10,915人
通常 9,600円
現在 1,800円
(4.6)
総評価数 1572件
5
ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門...
発売日 2019/09/29
受講者 3,657人
通常 24,000円
現在 2,030円
(4.6)
総評価数 608件
6
(4.2)
総評価数 588件
7
実例でわかる JavaScript 初心者講座
発売日 2015/10/29
受講者 7,617人
通常 10,200円
現在 1,800円
(4.1)
総評価数 1068件
8
(4.4)
総評価数 237件
9
【世界で4万人が受講】JavaScriptエンジニアのためのES6完全ガイド...
発売日 2018/03/29
受講者 5,246人
通常 9,600円
現在 2,030円
(4.4)
総評価数 925件
10
JavaScript+HTML:Electronでつくるローカルアプリ実例講座 for Windows...
発売日 2017/04/14
受講者 874人
通常 10,200円
現在 2,030円
(4.8)
総評価数 103件
11
実例でわかる JavaScript ローカルアプリ開発講座 Windows版 node.js NW.js...
発売日 2016/02/27
受講者 2,328人
通常 10,200円
現在 1,800円
(4.6)
総評価数 151件
12
(4.3)
総評価数 363件
13
JavaScriptで作るリバーシゲーム
発売日 2016/06/04
受講者 1,382人
通常 10,200円
現在 1,880円
(4.4)
総評価数 140件
14
(4.6)
総評価数 69件
15
(3.9)
総評価数 45件
16
(4.7)
総評価数 29件
17
【IoT体験ガイド】JavaScriptとArduinoを使ってIoTハンズオンに挑戦しよう!...
発売日 2017/11/27
受講者 410人
通常 10,200円
現在 1,800円
(3.9)
総評価数 49件
18
【2021年5月リニューアル】はじめてのJavaScriptプログラミング入門講座...
発売日 2016/12/17
受講者 2,205人
通常 2,400円
現在 1,800円
(4)
総評価数 371件
19
必見!JavaScript & プログラム入門 with すぐに使えるテクニック集!...
発売日 2016/03/27
受講者 600人
通常 3,000円
現在 1,730円
(3.8)
総評価数 105件
20
(3.3)
総評価数 118件
21
誰でもわかる JavaScript基礎&jQuery基礎
発売日 2018/05/14
受講者 245人
通常 21,000円
現在 2,030円
(3.9)
総評価数 24件
22
初心者向けJavaScript & jQuery基礎講座
発売日 2018/04/18
受講者 313人
通常 2,400円
現在 1,800円
(3.9)
総評価数 90件
23
(3.5)
総評価数 31件
24
(3.7)
総評価数 11件
25
(4.3)
総評価数 91件
26
ES6からES9まで - JavaScriptアップデート講座
発売日 2020/07/18
受講者 72人
通常 2,400円
現在 1,800円
(4.2)
総評価数 9件
27
5日で覚える!JavaScript/JQueryプログラミング【超入門】
発売日 2020/07/08
受講者 33人
通常 2,400円
現在 1,730円
(3.6)
総評価数 6件
28
(4.6)
総評価数 3件
 

UdemyのJavaScript 人気・おすすめの5講座

以下が今人気のおすすめの講座の詳細です。

Udemy講座では、1つのコースで基礎から応用まで幅広く学べるものが多く、コスパ高く学習可能。

自分にあったコースをセールでゲットして効率よく学習しましょう。

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

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

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
一通り触れてくれているが、Javascript以降は本当に触りだけ。 (参考: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ページを作ろう【2021年版】
    • このセクションで作るものを確認しよう
    • Bootstrapを CDN(Content Delivery Network)で利用しよう
    • Bootstrapの Containerを使って画面をレイアウトしよう
    • スタイルシートを調整しよう
    • Bootstrapのグリッドシステムで画面をレイアウトしよう
    • Bootstrapのフォームコントロールを使おう
    • プレイスホルダー(placeholder)の使い方
    • ドロップダウンリストを追加しよう
    • チェックボックスを追加しよう
    • ラジオボタンを追加しよう
    • テキストエリアを追加しよう
    • バッヂを使って、必須項目を示そう
  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
javascriptの講義に入った瞬間から初学者向けのコンテンツではなくなった。 javascriptでは引数がどこに格納されて、どこに反映させるかがかなり重要なのに、そこの説明は皆無に近い。 引数に何が取れるかを知っている前提に話をしているので初学者には理解不能。 突然、「これはentriesを引数に取れるので....」みたいな説明をしてくるが、初学者はこの時点でentriesってなに!?とパニックを起こし、これを独自で調べて解決できる初学者は少ないと思う。 当講師からしたら初学者向けの内容かもしれないが、初学者がこのコンテンツを初学者向けと思ってやる人はいないと思う。 むしろプログラミングへの敷居の高さを再確認して挫折する。 (参考: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への変換がうまくいかない時の対処法
    • Live Sass Compilerが重いと思ったときの対処法
    • ホバーで影ができるボタンを作ってみよう
    • 【演習】色々なエフェクトのボタンを作ってみよう
    • 【解答】色々なエフェクトのボタンを作ってみよう
    • 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】今時の画像の表示方法まとめ ~ <img srcset>, <picture>, 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
   

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ!
発売日 2017/11/25
(4.3)

24 total hours
カフェのウェブサイト制作やフォトギャラリーの制作、Ruby on Rails を使ったタスク管理アプリ開発、 MySQL、Bootstrap5、AWS Cloud9、GitなどWeb開発に必要な様々なスキルを1つのコースで沢山学ぼう!

プログラミングを学んで、ITエンジニアを目指そう!

このコースは、プログラミング初心者の方がプログラミングを1から学び、ITエンジニアを目指すためののコースです。

HTML, CSS, Bootstrap5, JavaScript, MySQL, Ruby, Ruby on Rails, AWS Cloud9, GitGitHubを用いたWebアプリケーション開発の方法を総合的に学べます20時間の大型コースでお得に学べます。

☆☆コースの内容をしっかりと確認した上で受講をいただけるように、無料プレビューを30分公開しております。ぜひご覧ください!!☆☆

IT人材は、2030年に最大78万人不足すると経済産業省から発表がされました。

現在、ITエンジニアの転職市場は売り手市場です。また、自らWebアプリケーション開発ができるようになり、素早くアイディアを形にできれば、システム開発の費用が削減できて、起業への挑戦もハードルが下がります。

基本的なWebページの(HTML, CSS)の構築方法を学習したあと、画面サイズによって動的にレイアウトが変わるモバイルフレンドリーでレスポンシブ対応のWebサイトの作り方を学習します(Bootstrap)。

その後に、プログラミングを学習します。主にブラウザ側で動作させるJavaScriptと、サーバー側で動かすRubyを学習します。

よく使う機能が用意されていて、高速に開発が行えるWebアプリケーションフレームの使い方を学習します。スタートアップ企業でもよく使われるフレームワークを使用します(Ruby on Rails)。

Webアプリケーションを開発を行う上でキーポイントとなるデータを体系的に扱うデータベースの使い方を、学習します(MySQL)。

開発環境構築も丁寧に手順を追って説明します(AWS Cloud9)。

私は約10年の豊富なエンジニア経験があるとともに、初心者向けのプログラミング勉強会の講師や、エンジニア志望の大学生向けインターン講師、大手ITスクールでのティーチング・アシスタント経験があるのが強みです。ベテランになるにつれて、初心者のころに困っていたことを忘れてしまうものですが、初心者の時によくつまずく箇所が、分かっているので講座では丁寧な解説をしています。

皆さんの今後の自己実現のためのお役に立てるコースとなれば幸いです。
それでは、皆さんとコースの中でお会いできることを楽しみにしております。


想定する受講生

  • 実務未経験からITエンジニアに転職したいですか?

  • 自らWebアプリケーションを開発して公開できるようになりたいですか?

  • 駆け出しのWeb開発者の方でさらにスキルアップしたいですか?

⇒ あなたの答えが1つ以上YESなら、これはまさにあなたが探しているコースです!


※ Web開発初心者向けの講座です。実務経験豊富なエンジニアの方にとっては、物足りない可能性がありますので、ご注意ください。

※ カリキュラムのアップデートを実施しています。旧版のレクチャーについては、学習中の方へ配慮のため、一定期間掲載しています。


利用ソフトウェアとバージョン

下記を使用してWebアプリケーション開発を学習します。

  • HTML5 ・・・Webページの文章を構造化して記述

  • CSS3・・・Webページの見た目を整える

  • JavaScript (ES5)・・・Webページを動的に操作することができるプログラミング言語

  • Bootstrap4 ・・・よく使うWebぺージのデザインが簡単に設定できるCSSフレームワーク(旧版)

  • Bootstrap5 ・・・よく使うWebぺージのデザインが簡単に設定できるCSSフレームワーク

  • MySQL 5.7・・・データベース

  • Ruby 2.5・・・サーバ側で動かすプログラミング言語

  • Ruby on Rails 5・・・Webアプリケーションを高速で開発するためのフレームワーク(現時点ではver6系での動作確認はしておりません)

  • AWS Cloud9・・・アマゾン ウェブサービスが提供するWebブラウザで動作開発環境

  • Git 2.13・・・ソースコードのバージョン管理

  • Visual Studio Code 1.x,  Atom 1.x・・・テキストエディタ

  • Google Chrome ・・・Webブラウザ

学習環境について

  • パソコン(Mac または Windows)が必要。

  • 動画内ではmacOSを使用。Windows環境での学習については補足説明。

  • インストールして使うアプリケーションとして、Webブラウザ Google Chromeとテキストエディタ Visual Studio Code(レクチャーによってはAtom)を使います。MacでもWindowsでもOK。無料。

  • 開発環境には、AWS Cloud9というブラウザでWeb開発が行えるアマゾンのサービスを利用。無料枠で1年間学習可能。

  • アマゾン ウェブ サービスのアカウント作成が必要で、メールアドレス、クレジットカード、電話番号の用意が必要(認証のためクレジットカード登録が必要ですが、無料枠内で学習すれば課金発生しません)

  • GitHubアカウント(無料プラン)

更新履歴

  • 2021/5/28  セクションリニューアル「Bootstrap5でフォトギャラリーを制作しよう」

  • 2021/5/20 セクションリニューアル「Bootstrap」※Bootstrap5 対応

  • 2021/1/22 セクションリニューアル「CSS入門」

  • 2020/9/26 セクションリニューアル「実践:ウェブサイトのコーディング」

  • 2020/6/2 セクションリニューアル「HTML入門」「HTMLステップアップ」

  • 2019/6/25 「Atomの設定 不可視文字」 Windows版Atomの操作について補足

  • 2019/6/6 フォントオーサム公式サイトの仕様変更に対応

  • 2019/4/2 AWS請求アラートのUI変更(設定→Billling設定)に対応

  • 2019/1/29 「Rubyのバージョン管理 1」rvmの設定手順を一部変更

  • 2019/1/17 「AWS Cloud9による開発環境構築」セクション テキストエディタの設定レクチャーをアップデート

  • 2019/1/5 「AWS Cloud9による開発環境構築」セクションの、RVMインストール手順を修正

  • 2018/11/06 「HTML入門」セクションのコードの文字が小さい問題を修正

  • 2018/8/28 セクション8 Bootstrap 4入門の「ナビゲーションバー」 class指定について補足

  • 2018/8/8 実践:Webサイトのコーディング「CSSによるスタイルの設定 2」補足テロップ追加

  • 2018/6/15 レクチャー新規追加「JavaScriptのエラーを自力で解決するための方法」

  • 2018/5/22 動画アップデート 「コース紹介動画」

  • 2018/5/16 レクチャー新規追加 「リモートリポジトリからプル」

  • 2018/4/25 誤植修正 イントロダクション - Ruby入門

  • 2018/4/2  レクチャー新規追加「ビデオ速度の変更」

  • 2018/2/16 セクションを新規追加「Git/Git Hub入門」


↓全て表示↑少なく表示
 
Users Voice
初歩の部分を勉強したい人にはとても合うレクチャーでした、深い部分までは覚えられないので、自分がいま何を必要にしているのかを見つけるには良い資料でした。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. コース概要
    • コース紹介
    • 受講オリエンテーション
    • 補足:受講オリエンテーション
    • 学習の進め方
    • macOS Catalina環境でZipファイルが解凍できない場合
    • コンテンツリクエスト募集中!
  2. フロントエンド開発概容
    • イントロダクション -フロントエンド開発概容-
    • インターネット入門
    • フロントエンド開発で重要な3要素
    • Google Chromeのインストール
    • テキストエディタについて
    • 【macOS】Visual Studio Codeのインストール
    • 【Windows】Visual Studio Codeのインストール
  3. 新HTML入門
    • イントロダクション - HTML入門
    • HTMLの歴史
    • HTMLの基本構文
    • HTML文書の基本構造
    • 補足:自動生成されるmeta要素について
    • 再掲:サンプルコードについて
    • 【macOS】はじめてのHTML
    • 【Windows】はじめてのHTML
    • 技術ドキュメント MDN
    • HTML文書のインデントと改行
    • 【macOS】Visual Studio Codeの設定
    • 【Windows】Visual Studio Codeの設定
    • よくあるHTMLの記述間違い
    • 補足:構文チェック
    • 構文チェック
    • 演習:HTMLのエラーを取り除く
    • 演習回答:HTMLのエラーを取り除く
    • よくあるご質問:要素の書き順
    • HTMLのコメント
    • 改行
    • 区切り線
    • リスト
    • 入れ子になったリスト
    • 演習:リスト
    • 演習解答:リスト
    • 説明リスト
    • 見出し
    • よくあるご質問:画像の配置方法について
    • 属性と画像の表示
    • リンク
    • 強調
    • 著作権表記
    • 情報のグループ化
    • span要素
    • 演習 : HTML基礎
    • 演習回答 : HTML基礎
  4. 新HTMLステップアップ編
    • イントロダクション - HTMLステップアップ
    • 再掲:サンプルコードについて
    • はじめてのテーブル
    • 行と列の覚え方
    • ヘッダーのあるテーブル
    • thead、tbody、tfootがあるテーブル
    • キャプション
    • セルの結合
    • 演習 : テーブル
    • 演習回答:テーブル
    • フォーム概要
    • はじめてのフォーム
    • お問い合わせフォームの制作① - 単一行のテキスト入力欄
    • お問い合わせフォームの制作② - プルダウンメニュー
    • お問い合わせフォームの制作③ - ラジオボタン
    • お問い合わせフォームの制作④ - テキストエリア
    • お問い合わせフォームの制作⑤ - チェックボックス
    • お問い合わせフォームの制作⑥ - 送信ボタン
    • お問い合わせフォームの制作⑦ - ラベル
    • フォームバリデーション
    • 演習:フォーム
    • 演習回答:フォーム
  5. 新・CSS入門
    • イントロダクション - CSS入門
    • 再掲:サンプルコードについて
    • CSSの基本をマスターしよう
    • はじめてのCSSを書いてみよう
    • コメントアウトをしよう
    • 色の指定ができるようになろう
    • 背景を指定しよう
    • ボックスモデルの基本を理解しよう
    • マージンを指定しよう
    • 補足:マージンの相殺について理解しよう①
    • マージンの相殺について理解しよう①
    • マージンの相殺について理解しよう②
    • パディングを設定しよう
    • ボーダーを設定しよう
    • ボックスの横幅と高さを指定しよう
    • マージンとパディングの違いを学ぼう
    • 3つのセレクターを使えるようになろう
    • 結合子を使ったセレクタを指定しよう
    • 複数のセレクタを指定しよう
    • リンクで使用する疑似クラスを指定しよう
    • フォントを指定しよう
    • ウェブフォントを利用しよう
    • テキストに様々なスタイルを設定しよう
  6. 実践:ウェブサイトのコーディング
    • イントロダクション - 実践:新ウェブサイトのコーディング
    • よくあるご質問(必ずご確認ください)
    • 再掲:サンプルコードについて
    • ファイルの作成
    • HTMLによるマークアップ①
    • HTMLによるマークアップ②
    • HTMLによるマークアップ③
    • CSSによるスタイルの設定①
    • CSSによるスタイルの設定②
    • CSSによるスタイルの設定③
    • CSSによるスタイルの設定④
    • レスポンシブ対応
    • 画像の設定
    • メタデータの設定
    • よくあるご質問 その2(本セクション)
  7. Bootstrap5の基本を習得しよう
    • イントロダクション-Bootstrap5
    • 再掲:サンプルコードについて
    • Bootstrapとは
    • はじめてのBootstrap
    • はじめてのBootstrap-ボタン
    • はじめてのBootstrap-ナビゲーション①
    • はじめてのBootstrap-ナビゲーション②
    • はじめてのBootstrap-グリッドシステム①
    • はじめてのBootstrap-グリッドシステム②
    • はじめてのBootstrap-グリッドシステム③
    • はじめてのBootstrap-グリッドシステム④
    • はじめてのBootstrap-グリッドシステム⑤
    • はじめてのBootstrap-ジャンボトロン・フォーム
  8. 実践:Bootstrap5でフォトギャラリーを制作しよう
    • イントロダクション - Bootstrap5でフォトギャラリーを制作しよう
    • 再掲:サンプルコードについて
    • ナビゲーションバーを作ろう
    • メインイメージを表示しよう
    • 写真のグリッド表示をしよう①
    • 写真のグリッド表示をしよう②
    • Bootstrap Iconsを導入しよう
    • レイアウトの仕上げを行おう
  9. JavaScript入門
    • イントロダクション - JavaScript入門 -
    • 再掲:サンプルコードについて
    • JavaScript入門セクション以降のテキストエディタについて
    • JavaScriptの歴史
    • JavaScriptの開発環境構築
    • はじめてのJavaScript
    • JavaScriptのエラーを自力で解決するための方法
    • コメント
    • 演算
    • 変数
    • インクリメントとデクリメント
    • 条件分岐
    • 条件分岐 if / else
    • 条件分岐 if / if else / else
    • 条件分岐 switch
    • 演習:テーマパークの入場料計算
    • 演習回答:テーマパークの入場料計算
    • 繰り返し処理とは
    • 繰り返し処理 for
    • 繰り返し処理 while
    • 繰り返し処理 do while
    • 演習:繰り返し処理
    • 演習回答:繰り返し処理
    • 配列
    • 連想配列
    • 演習:配列を使ったテストの点数の集計
    • 演習回答:配列を使ったテストの点数の集計
    • 関数とは
    • function命令
    • 関数リテラル
    • Functionコンストラクタ
    • 演習:関数
    • 演習回答:関数
  10. JavaScript DOM操作
    • イントロダクション - JavaScript DOM操作 -
    • 再掲:サンプルコードについて
    • DOMとは
    • IDをキーに要素を取得
    • タグ名をキーに要素を取得
    • name属性をキーに要素を取得
    • class属性をキーに要素を取得
    • ノードを追加
    • 補足:ノードを追加
    • ノードの置換
    • ノードの削除
    • 演習 : DOM操作
    • 演習回答:DOM操作
    • 補足:演習回答:DOM操作
  11. JavaScript イベントとイベントハンドラ
    • イベントとイベントハンドラを関連付ける方法
    • 開始タグの中で関連付ける方法
    • プロパティで関連付ける方法
    • loadイベント
    • addEventListener
    • 演習 : イベントとイベントハンドラ
    • 演習回答 : イベントとイベントハンドラ
  12. AWS Cloud9による開発環境構築
    • イントロダクション - AWS Cloud9による開発環境構築 -
    • AWSの無料利用枠について
    • !!!【重要】よくあるご質問!!!
 
Preview Video
   

【JS】ガチで学びたい人のためのJavaScriptメカニズム

【JS】ガチで学びたい人のためのJavaScriptメカニズム
発売日 2020/02/01
(4.6)

20.5 total hours
JavaScriptでの開発が苦手ですか?JSのメカニズムを学べば「これまでとは全く違うJSの世界」が見えてきます。React、Vue、JQuery、Firebaseを勉強したいと思っている人は、是非メカニズムから始めてみてください。

JavaScriptは誰でも簡単に、そして素早く実行できる素晴らしい言語です。


しかし、その本質は未熟なプログラマーが罠にかかるのを待つ悪魔の顔を持っています。


少し昔の話をしましょう。


多くのプログラマーはJavaScriptのメカニズムを理解せず、React、Vue、AngularJSなどのフレームワークを使った開発に携わります。


私もその中の一人でした。


最初は問題ありませんでした。

しかし、月日が経つにつれて雲行きは怪しくなってきます。


JavaScriptの本質から目をそらし、自分の思うままに書いたコードは次第に私を拒絶するようになりました。


コンソールのエラーは何度も私にコードの書き直しを要求しました。


数え切れないくらい、Googleでエラーメッセージを打ち込み、解決方法を検索しました。


数え切れないくらい、自分で意味を理解していないコードをコピーしました。


そして数え切れないくらい、コードが動かなくなることを嫌い、コードを整理することから逃げました。


Googleではたくさんの具体的な解決方法や記述方法を簡単に見つけることができました。


しかし、その本質的な問題が裏でつながっていることを当時の私は知りませんでした。


でも、当時の私を攻める気にはなれません。


なぜなら、JavaScriptの動作原理に関して学ぶ機会というのはあまりにも少ないからです。


私はJavaScriptと名の付く書籍や記事を日本語、英語問わず読み漁りました。


そして、断片的な知識が一本の線につながった時、そこにはこれまでと全く違う景色が広がっていました。


JavaScriptにはその便利な機能の裏に多くの「隠しルール」が存在します。


表面的な利便性を保つためのメカニズムは、時に未熟なプログラマーを深い沼へといざないます。


それを知らずにJavaScriptで開発を行うことは、暗闇の中、手探りで目的地を目指すようなものです。


もし、あなたがJavaScriptを難しく感じるのであれば、今あなたが学ぶべきはJavaScriptのメカニズムです。


フレームワークやライブラリに惑わされないでください。


Reactを使っていても、
Vueを使っていても、
AngularJSを使っていても、
JQueryを使っていても、
Node.jsを使っていても、
Firebaseを使っていても、
WEBサイトを作るときでも、
WEBアプリケーションを作るときでも、


その複雑さの裏には必ずJavaScriptのメカニズムが隠れています。


JavaScriptのメカニズムを習得したあなたが恐れるものは何もありません。


*** コースの目的 ***

こちらのコースではJavaScriptが動いている仕組みを深く理解することによって、使用場面に左右されないJSの基礎を習得します。


「JSの入門書などで出てくるコードは問題なく読めるけど、Githubに上がっているコードや熟練者が書いたコードはよくわからない。」

「上から下に順番に処理を書いて、自分の動かしたいようにプログラムは組めるけど、制御ごとに分けて記述したり、整理するのは無理。」

「他の人が作ったコードをコピーしてきて、少し変更すると動かなくなった。」


このようなことは初学者の時に起こりがちです。


そして、これらの原因の根本にあるのが、JSの動作原理への理解不足です。


プログラムはパズルのようなもので、様々なメカニズムが絶妙に組み合わさって動いています。


そのため、同じような記述でも少し状況が違ったり、少し書く場所を変えるだけで途端に動かなくなったりします。


動作原理を理解すると、「こうすれば動きそうだな。」とか、「ここがこうなってるから、エラーがでるんだな。」といったことが論理立てて説明できるようになってきます。


また、他の人が書いた一見複雑に見えるコードでも、一つずつ分解していくと、基本的な動作原理の組み合わせによって成り立っていることがわかってきます。


これまでのプログラミング教育ではプログラムの基本的な書き方を学んだ後に、いきなり複雑なモジュールが登場するため、そこに大きなギャップが生じてしまい、多くの入門者がコードの意味がわからなくなり挫折してしまいます。


このコースでは基本的な書き方を学んだ人が、実践的なステップに入っていく際に知っておいてほしいJavaScriptの裏側の仕組みについて詳しくまとめています。


コースの最後にはそれらの技術や知識を集約して独自のフレームワークを作成します。

初級者の方には難しいと思いますが、上で述べたように、落ち着いて一つづつ読み解いていくと、このコースで取り扱っている基礎的なメカニズムの組み合わせで構成されていることに気付くはずです。


是非、最後までチャレンジしてみてください。


*** 補足 ***

  • このコースはJSで基本的なプログラムを書いたことがある方で、理解が曖昧だなと感じている方に受けていただくとスキルの向上を一番実感いただけると思います。もちろん、JSをあまり触ったことがない方でもご理解いただけるようなコースの作りを心がけています。また、他の言語を扱ったことがある方で、JSがどのような言語なのかを知りたいといった方にもおすすめです。

  • もし、私が別で出している「【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底入門(フロントエンド編)」のご購入を検討の場合には、こちらのコースを先に受けていただくことで、先のコースのJSのセクションの理解度が格段に増すことと思います。


↓全て表示↑少なく表示
 
Users Voice
始めたばかりですけど、詳しくて分かりやすいと思います。ありがとうございます。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. コースの進め方
    • Udemyでの学習の進め方
    • 環境設定★コースで使用するリソースをダウンロードできます★
    • プロジェクトの構成とコースの進め方
    • VS Codeショートカット
  2. 前提知識
    • 導入
    • 変数
    • 関数
    • オブジェクト
  3. JavaScriptとは
    • 導入
    • JavaScriptとECMAScript
    • ECMAScriptとバージョン
  4. 実行環境
    • 導入
    • JavaScriptの実行環境
    • JavaScriptが実行されるまで
    • 実行コンテキスト
    • コールスタック
    • ホイスティング
    • JSエンジンによる挙動の違い
  5. スコープ
    • 導入
    • スコープとは
    • グローバルスコープとスクリプトスコープ
    • 関数スコープとブロックスコープ
    • スコープと実行コンテキスト
    • レキシカルスコープ
    • スコープチェーン
    • クロージャー
    • クロージャー(プライベート変数)
    • クロージャー(動的な関数の生成)
    • 即時関数
    • 【修了確認】スコープ
    • 【解答】スコープ
    • 【修了確認】クロージャー
    • 【解答】クロージャー
    • 【修了確認】即時関数
    • 【解答】即時関数
  6. 変数
    • 導入
    • let, constとvar
    • 変数とデータ型
    • 暗黙的な型変換
    • 厳格な等価性と抽象的な等価性
    • falsyとtruthy
    • AND条件とOR条件
    • AND条件とOR条件(応用)
    • プリミティブ型とオブジェクト
    • 参照とコピー
    • 参照とconst
    • 参照と引数
    • 参照と分割代入
    • 参照の比較と値の比較
    • 【修了確認】falsyとtruthy
    • 【解答】falsyとtruthy
    • 【修了確認】参照1
    • 【解答】参照1
    • 【修了確認】参照2
    • 【解答】参照2
  7. 関数とオブジェクト1
    • 導入
    • 関数
    • 関数とオブジェクト
    • コールバック関数
    • 'this'
    • 参照のコピーと'this'
    • コールバック関数と'this'
    • bindと'this'
    • call,applyと'this'
    • アロー関数
    • アロー関数と'this'
    • 【修了確認】コールバック関数
    • 【解答】コールバック関数
    • 【修了確認】bindとthis
    • 【解答】bindとthis
    • 【修了確認】クロージャーとコールバック
    • 【解答】クロージャーとコールバック
    • 【修了確認】コールバック関数とbind
    • 【解説】コールバック関数とbind
    • 【修了確認】クロージャーとアロー関数
    • 【解答】クロージャーとアロー関数
  8. 関数とオブジェクト2
    • 導入
    • コンストラクター関数
    • prototype
    • new演算子
    • instanceof
    • 関数コンストラクター
    • プロトタイプチェーン
    • hasOwnPropertyとin
    • プロトタイプ継承
    • クラス
    • クラス継承
    • super
    • ビルトインオブジェクト
    • ラッパーオブジェクト
    • Symbol
    • プロパティーとディスクリプター
    • getter/setterとstatic
    • チェーンメソッド
    • 【修了確認】クラスと継承
    • 【解答】クラスと継承
    • 【修了確認】クラスとコールバック
    • 【解答】クラスとコールバック
    • 【修了確認】チェーンメソッド
    • 【解答】チェーンメソッド
  9. 反復処理
    • 導入
    • ループ文
    • 演算子と優先順位
    • ループ文とブロックスコープ
    • 配列とループ文
    • for...inと列挙可能性
    • for...ofと反復可能性
    • MapとSet
    • イテレーター
    • 反復可能オブジェクト(イテレーター)
    • ジェネレーター
    • 反復可能オブジェクト(ジェネレーター)
    • イテレーターとスプレッド演算子
    • 【修了確認】イテレーター
    • 【解答】イテレーター
    • 【修了確認】ジェネレーター
    • 【解答】ジェネレーター
    • 【修了確認】PubSubパターン
    • 【解答】PubSubパターン
  10. 非同期処理
    • 導入
    • ブラウザとJavaScript
    • 同期処理と非同期処理
    • タスクキューとコールスタック
    • コールバック関数と非同期処理
    • 非同期処理のチェーン
    • Promise
    • Promiseチェーン
    • Promiseと並列処理
    • MacrotasksとMicrotasks(Part. 1)
    • MacrotasksとMicrotasks(Part. 2)
    • AwaitとAsync
    • fetch
    • 例外処理とエラー
    • 【修了確認】Promiseチェーン
    • 【解答】Promiseチェーン
  11. モジュラーJavaScript
    • 導入
    • ES ModulesとCommonJS
    • importとexport
    • ESModuleと即時関数
    • モジュールコンテキストとモジュールスコープ
    • モジュールの特徴
    • Strictモード
    • Strictモードとクラス
    • ダイナミックインポート
    • 【修了確認】モジュール化
    • 【解答】モジュール化
  12. 様々なオブジェクト
    • 導入
    • Proxy
    • Reflect
    • ReflectとProxy
    • WeakMap
    • WeakMapとプライベート変数
    • JSON
    • Storage
    • Array(Part. 1)
    • Array(Part. 2)
    • Array(Part. 3)
    • 【修了確認】配列
    • 【解答】配列(Part. 1)
    • 【解答】配列(Part. 2)
    • 【修了確認】チェーンメソッド
    • 【解答】チェーンメソッド
    • 【修了確認】データストア(Part. 1)
    • 【解答】データストア(Part. 1)
    • 【修了確認】データストア(Part. 2)
    • 【解答】データストア(Part. 2)
    • 【修了確認】データストア(Part. 3)
    • 【解答】データストア(Part. 3)
    • 【修了確認】データストア(Part. 4)
    • 【解答】データストア(Part. 4)
  13. 【おまけ】Vueのメカニズム
    • 導入
    • Vueとは
    • 環境構築
    • ソースのビルド
    • ビルドのコードリーディング
    • VueとReactivity
    • Reactivity(基礎編)
    • Reactivity(Proxy編)
    • Reactivity(Track編 Part.1)
    • Reactivity(Track編 Part.2)
    • Reactivity(Track編 Part.3)
    • VueとComputed
    • Computed(基礎編)
    • Computed(キャッシュ編)
    • DOMと仮想DOM
    • DOM(Part.1)
    • DOM(Part.2)
 
Preview Video
   

ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門

ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門
発売日 2019/09/29
(4.6)

17 total hours
受講生の約6割が次に学びたいと高注目のTypeScript。Goに並ぶ人気、フロントエンド(React/Vue/Angular)やバックエンド(AWS CDKでPythonと並び採用)での存在感は、まさに非の打ち所無し!今すぐダイブしよう!

注釈)本コースでは、Node.jsのv12.14.1を使用し講義を進めます。


本コースはTypeScriptを学習するコースとなりますが、冒頭のセクションとなる「環境構築」ではスクラッチで環境を構築していきます。


そして、次のセクション以降は、コードを書きながらTypeScriptの言語仕様を学習します。


まずは、「基本的な型について学ぼう」というところで、文字通り、TypeScriptに存在する型の紹介とその適用方法についてしっかり学びます。


そして、「関数で「型」を使ってみよう」に入って関数に対して、型の概念を適用する方法を学びます。


その次に、「クラス」の話に入ります。TypeScriptでは、型の概念が取り入られるだけじゃなくてJavaScriptのクラスのオブジェクト指向性がより強化されます。通常のJavaScriptに不足していたオブジェクト指向の機能が導入されていますので、その内容についてしっかり学んでいきます。


最後に、「高度な型」について学びます。高度といっても、TypeScriptのコードを読み書きする上での必須の技術ばかりですので、是非、最後まで完走して頂けたらと思います。


いくつかのレクチャーをプレビュー設定にしていますので、レクチャーの雰囲気等がお分り頂けるかと思いますので、是非プレビューも含めてご検討頂けると嬉しいです。


↓全て表示↑少なく表示
 
Users Voice
はむさんの講座を始めて受講しましたが、説明が明快で的を射ており非常に学習しやすかったです。 初心者への配慮からか説明がやや冗長な印象ですが、その分確実に段階を踏んで理解を深められますし、倍速で手を動かしながら受講すれば問題ありませんでした。 gitによるソースコードの管理や環境構築についても、極力つまずきを減らす工夫がされていると感じました。 Reactの章でVirtualBox上のUbuntuでDockerを起動するのは二度手間かもと思ったのですが、Mac OSでも普通に動いて快適に受講できました(他の人も同様に動くことは保証できませんが)。 nodeのバージョンが12系から更新されていないのが少し気になりますが、講座の内容自体はバージョンに関わらず有用だと思います。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. 「イントロダクション」から「環境構築 - TypeScriptの実行環境を作ろう」まで
    • イントロダクション
    • 本コースの概要
    • 本コースのセクション1からセクション5までの内容のソースコードを収録したgitリポジトリについて
    • こんにちは!TypeScript!
    • Node.jsのインストールをしよう
    • GitHubでリポジトリを作成しよう
    • package.jsonを作ろう
    • typescriptをインストールしよう
    • ts-node をインストールしよう
    • ts-node-dev をインストールしよう
    • Visual Studio Code をインストールしよう
  2. 基本的な型について学ぼう
    • boolean型
    • ts-node-dev 不具合対応 ※重要なレクチャーになるため必ず確認してください
    • number型、string型
    • array型
    • tuple型
    • any型
    • void型
    • null型とundefined型
    • never型
    • object型
    • 型エイリアス(Type Aliases)
    • interface
    • 型安全とは
    • unknown型
    • 交差型(intersection型)
    • 共用体型(union型)
    • Literal型
    • 列挙型(enum型)
  3. 関数で「型」を使ってみよう
    • functionキーワードによる関数定義
    • 無名関数による関数定義
    • アロー関数(ラムダ式)による関数定義
    • オプショナルなパラメータを定義しよう
    • デフォルトパラメータを設定しよう
    • Restパラメータを設定しよう
    • オーバーロードをやってみよう
  4. クラスで「型」を使ってみよう
    • クラスを作ってみよう
    • アクセス修飾子を使ってみよう
    • constructorを使い倒す
    • getter と setter
    • readonly 修飾子
    • 静的メンバを定義しよう
    • namespaceによる名前空間
    • 継承
    • 抽象クラスと抽象メソッド
    • インターフェース・リターンズ
  5. 高度な型について学ぼう
    • 型の互換性
    • ジェネリクス
    • 型アサーション
    • constアサーション
    • Nullable Types
    • インデックスシグネチャ
  6. Utility TypesとConditional Typesについて学ぼう
    • Utility TypesとConditional Typesをなぜ学ぶのか
    • PartialとRequired
    • Mapped Types
    • Readonly
    • Record
    • Exclude と Exract と NunNullableについて
    • Conditional Types と Distributive Conditional Types についてマスターしよう
    • Pick と Omit
    • ReturnType
    • Conditional Typesで使用されるinferキーワードについて
    • Parameters
    • ConstructorParameters
  7. React アプリケーションとTypeScript
    • Reactの紹介、なぜReactを学ぶのか
    • GitHubでリポジトリを作成しよう
    • Function Components 入門編
    • Function Components 初級編
    • useStateと型制約
    • useRefとuseEffectを使ってみよう
    • useRefのより実践的な使い方とOptional ChainingとNon-Null Assertion Operatorの紹介
    • useReducerとオーバーロードを用いたその型定義について
    • useReducerの利用例
  8. さいごに
    • さいごのご挨拶
        

関連:JavaScriptを本でも学ぼう

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

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

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

いじょうでっす。

コメント

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