【動画で学習】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)
総評価数 7884件
2
モダンJavaScriptの基礎から始める挫折しないためのReact入門
発売日 2020/08/27
受講者 6,619人
通常 4,200円
現在 3,360円
(4.6)
総評価数 1788件
3
(4.5)
総評価数 4045件
4
【JS】ガチで学びたい人のためのJavaScriptメカニズム
発売日 2020/02/01
受講者 12,671人
通常 9,600円
現在 7,680円
(4.6)
総評価数 1868件
5
(4.4)
総評価数 4925件
6
(4.4)
総評価数 691件
7
ハンズオンで学ぶTypeScript - JavaScript エンジニアのためのTypeScript徹底入門...
発売日 2019/09/29
受講者 4,134人
通常 24,000円
現在 19,200円
(4.5)
総評価数 680件
8
JavaScript(ES6)/Vue.js/TypeScript フロントエンド技術入門
発売日 2020/04/02
受講者 3,701人
通常 24,000円
現在 19,200円
(4.4)
総評価数 621件
9
実例でわかる JavaScript 初心者講座
発売日 2015/10/29
受講者 7,828人
通常 10,200円
現在 8,160円
(4.4)
総評価数 1098件
10
【世界で4万人が受講】JavaScriptエンジニアのためのES6完全ガイド...
発売日 2018/03/29
受講者 5,377人
通常 9,600円
現在 7,680円
(4.6)
総評価数 954件
11
(4.1)
総評価数 266件
12
JavaScriptで作るリバーシゲーム
発売日 2016/06/04
受講者 1,427人
通常 10,200円
現在 8,160円
(4.9)
総評価数 144件
13
(4.5)
総評価数 394件
14
JavaScript+HTML:Electronでつくるローカルアプリ実例講座 for Windows...
発売日 2017/04/14
受講者 920人
通常 10,200円
現在 8,160円
(4.2)
総評価数 110件
15
実例でわかる JavaScript ローカルアプリ開発講座 Windows版 node.js NW.js...
発売日 2016/02/27
受講者 2,370人
通常 10,200円
現在 8,160円
(4.6)
総評価数 154件
16
(4.5)
総評価数 376件
17
(4.3)
総評価数 102件
18
【IoT体験ガイド】JavaScriptとArduinoを使ってIoTハンズオンに挑戦しよう!...
発売日 2017/11/27
受講者 433人
通常 10,200円
現在 8,160円
(3.4)
総評価数 52件
19
(3.9)
総評価数 45件
20
(4.6)
総評価数 39件
21
必見!JavaScript & プログラム入門 with すぐに使えるテクニック集!...
発売日 2016/03/27
受講者 607人
通常 3,000円
現在 2,400円
(3.9)
総評価数 107件
22
(3.4)
総評価数 119件
23
(4.8)
総評価数 74件
24
初心者向けJavaScript & jQuery基礎講座
発売日 2018/04/18
受講者 318人
通常 2,400円
現在 1,920円
(3.9)
総評価数 91件
25
(3.5)
総評価数 31件
26
(3.8)
総評価数 13件
27
ES6からES9まで - JavaScriptアップデート講座
発売日 2020/07/18
受講者 83人
通常 2,400円
現在 1,920円
(4.2)
総評価数 11件
28
5日で覚える!JavaScript/JQueryプログラミング【超入門】
発売日 2020/07/08
受講者 40人
通常 2,400円
現在 1,920円
(3.6)
総評価数 7件
29
(4)
総評価数 5件
 

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
HTML, CSS, JavaScriptは昔少し触ったことがあったのですが、たにぐちさんの講座を通してより知識が深まったと思いました。 ただ知識を講義するだけでなく、ユーザビリティの観点からすべきことなども細かく教えてくださり非常に満足度が高いです。 HTML・CSS・JavaScriptの講義の決定版と思いますので、ぜひ受けてみてください! (参考:Udemy)

↓全て表示 ↑少なく表示
Progate等で少し学んでから講座を視聴しました。 実際に手を動かしながら学習することができるため、とても分かりやすいです。 また、話し方や講義スピードも丁度よかったです。 ぜひ他の講座も購入したいと思います。 (参考: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の基礎から始める挫折しないためのReact入門

モダンJavaScriptの基礎から始める挫折しないためのReact入門
発売日 2020/08/27
(4.6)

6 total hours
Reactの習得に苦戦する理由は「JavaScript」への理解不足です。このコースではスムーズにReact開発のスタート地点に立てるように、モダンJavaScriptの動作の仕組みや概念、機能から解説します。

これからReactを勉強する全ての人におくるReact入門コース決定版!


Reactの勉強に苦戦する多くの人と話してきました。

そこで感じたのは苦戦する多くの人は学習の順序を間違えているということです。


JavaScriptへの理解なくしてReactの習得はなし得ません。

そこでJavaScript→Reactの理解の架け橋となる本コースを作成しました。


■本コースでは以下の流れで学習を進めます。

  1. モダンJavaScriptを取り巻く周辺知識や仕組みの概念を知る

    SPAとは?仮想DOMとは?パッケージマネージャとは?等

    React開発に関わる事柄について説明することでまず概念を理解し学習を進め易くします。

  2. React開発で使用するモダンJavaScriptの機能を知る

    ReactはJavaScriptの機能をふんだんに使って開発していきます。そのためまずは良く使うモダンなJavaScriptの機能を先に理解することで後でReactの学習に集中することができます。

  3. プレーンなJavaScriptのみでアプリケーションを開発する

    Reactを使用することでどういう恩恵があるか、従来との違いは何なのか?を知るためにまずはReactを使わずJavaScriptのみでアプリケーションを開発します。

    このステップを挟むことでよりReactへの理解が深まります

  4. Reactの基本やルールを知る

    ここからReact特有のルールや文法、機能についてフォーカスして学んでいきます。

  5. JavaScriptだけで作成したアプリケーションと同じものをReactで開発する

    学んできたReactを使用し実際にアプリケーションを開発することでより理解を深めます。

    実務ではどのような書き方をするか、抑えるべきポイントも合わせて説明していきますのでイメージが深まるかと思います。

    更にプレーンなJavaScriptで作成したものと同じものを作成するので、近代JavaScriptの転換を体感することができます。


■それ以外の本コースの特徴

  • 私自身、複数プロジェクトでReactを使用し仕事をしているエンジニアです(フリーランス→会社設立)

  • 学習には息抜きも必要なのでセクションの合間に私の経験やフロントエンド周りの雑談も含まれたりしています

  • コード入力時は画面を拡大する等、編集も工夫しているためスマホでもストレスなく閲覧できます

  • 収録音声にも気をつかっているのでイヤホン等で視聴しても不快ではないです(声の好みは分かりませんが...)



↓全て表示↑少なく表示
 
Users Voice
ワタクシはレガシーな環境での開発を続けて5年、流石にまずいと思ってその環境から飛び出したものの、世の潮流からはおいていかれ浦島太郎状態でした。 なんとか転職に成功するも今までに触れたことのない新しい技術の連続に、ひとまず日々の業務をこなすにも半端なものを作りたくない・・・どう学習を開始すれば・・・といった状況でたどり着いたのがUdemyでした。 この講義はそういった経緯の中でワタクシがUdemyで初めて受講したコースです。 そのため、Udemyというサービスについての感動もあるため評価には多少色がついているかもですが、ワタクシの感想としては非常に良かったです。 講義については概要にある通り ・基本的なHTML/CSS/JavaScriptの知識 があれば問題なくコースを進めていくことができると思いました。 さらに言えば、「[基本的な]とはどのくらい?」という疑問もあるかと思いますが、これについては HTML/CSS ・HTMLは簡単なものを書いたことがあるよー(ポートフォリオになるような立派なものではなくても可) ・CSS書くとデザインを弄れるのがわかっているよー、少しならHTMLに適用したことあるよー JavaScript ・入門書1冊くらいやったことあるよー または ・他のオブジェクト指向のプログラム言語触ってたことあるよー くらいで行けるんじゃないかなと感じました 内容としては 導入が「Reactについて説明します!」ではなく、「まずは、モダンなフロントエンドについて、知っていきましょう!」だったのが ワタクシの境遇にうまくハマりました笑 (前職での経験もあり、ある程度プログラムの経験はありましたが、JavaScriptはES2015の知識で止まっていました・・・) また、噛み砕いてReactの概要や思想、仕組みなどを解説していただけていたので、理解しやすかったです。 Reactを利用した場合とそうでない場合の開発についても比較対象があることで利点が実感しやすかったです ・・・そもそもView側でのJavaScriptの利用をほとんどしたことがなかったので、過去の開発手法がしれたのもワタクシ的には収穫でしたが 全体として じゃけぇさん自身も苦労されながら学ばれてきたんだなと感じ、苦労したからこその丁寧かつポイントを押さえた説明になっていてよかったです (参考:Udemy)

↓全て表示 ↑少なく表示
初めてReactを触りました。最初にJavaScriptでtodoリストを作ってそのあとにReactで同じものを作ったのでどんなふうに違うのかが分かりやすかったです。まだこんな感じでできるのかくらいの理解しかありませんが説明はとても分かりやすかったです。動画の合間の雑談が楽しかったです。 (参考:Udemy)

↓全て表示 ↑少なく表示
 
レクチャー内容
  1. はじめに
    • 講師自己紹介
    • コース全体像
    • なぜこのコースが必要なのか
    • このコースを受けたらできるようになること
  2. このコースで用いる環境について
    • CodeSandboxの紹介
    • CodeSandboxの機能説明
    • CodeSandboxでGitHubにリポジトリを作ってみよう
    • 雑談(情報処理の単位が取れずに留年しかけてました)
  3. ReactやVue等を使うために知っておきたいJavaScriptの基本
    • このセクションで伝えたいこと
    • JavaScript is 何?なぜオススメ?
    • DOMや仮想DOMってなんなんだ
    • npm/yarn等のパッケージマネージャーの意義を知る
    • ECMAScriptとは。近代JavaScriptの転換期について
    • モジュールバンドラーやトランスパイラの概念
    • SPAとは?従来のWebシステムとの違い
    • 雑談(フリーランスって一言に言っても...)
  4. モダンJavaScriptの機能に触れる
    • このセクションで取り組むこと
    • const、let等の変数宣言
    • テンプレート文字列 ``
    • アロー関数 =>
    • 分割代入 {}
    • デフォルト値 =
    • スプレッド構文 ...
    • mapやfilterを使った配列の処理
    • 三項演算子 ? :
    • 論理演算子の本当の意味を知ろう && ||
    • セクションまとめ
  5. 素のJavaScriptだけでTODOアプリを作成してみよう
    • 準備
    • HTMLマークアップ間違いのお詫び
    • HTMLで構造を作成
    • CSSでスタイリング
    • タスクの追加機能(テキスト)
    • タスクの追加機能(ボタン)
    • タスクの削除機能
    • タスクの完了機能
    • タスクの戻す機能
    • セクションまとめ
    • 雑談(コンポーネントって何だ??)
  6. Reactの基本を学ぶ
    • 準備
    • JSX記法のルールを知る
    • コンポーネントの使い方を知る
    • コンポーネントの補足
    • Reactでのイベントやstyleの扱い方を知る
    • Propsを知る
    • Stateを知る(useState)
    • 再レンダリングと副作用を知る(useEffect)
    • default exportとexport
    • 雑談(クラスコンポーネントと関数コンポーネント)
  7. React使ってTODOアプリを作成してみよう
    • 準備
    • JSXで構造を作成
    • CSSでスタイリング
    • Reactでの実装を意識したモックに変更
    • タスクの追加機能
    • タスクの削除機能
    • タスクの完了機能
    • タスクの戻す機能
    • カイゼン(コンポーネント化)
    • カイゼン(CSS-in-JS)
    • カイゼン(TODOの上限設定)
  8. さいごにとこれから
    • フロントエンドの大変さ、モチベーション
    • ボーナスレクチャー:さいごにとこれから
    

【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
話し方が落ち着いていて、説明がわかりやすいです。発展的な内容も学べるので、勉強になります。 (参考:Udemy)

↓全て表示 ↑少なく表示
まだ導入部のため評価できないので中間の3にしました (参考: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
   

【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
すごく良い。 JavaScriptの構文の書き方などを一通り学習し、いくつか簡単なアプリを作りました。その後reactに移る前にこちらの教材を手に取りました。 メカニズムを知ることで、なぜその挙動になるのかを理解することができます。 単にコードディングができるだけではなく、仕組みを知ることは非常に重要です。その後の成長速度や理解の深さが違ってくる考えています。またプログラムの考え方は他の言語にも応用できるでしょう。 例えば、if (a && b && c){}は全ての条件がtrueの時にif文を実行します。これでも間違いではありません。 しかし、&&は左から判定を開始して、判定がtrueである限り、右へ右へと処理が実行されます。falseが途中にあれば、その時点で処理を中断し、falseの処理結果を返します。falseがどこにもない場合、最後の処理結果を返します。これを理解しないと解読できないコードも存在しますし、思った挙動と違う結果になってしまうことだってあります。 仕組みを知るということは、さまざまな状況に対して、自身の頭で回答を導く力になります。インターネットの大海原から必要な情報を素早く見つけ出す能力ももちろん大事ですが、自分の頭で考える力も必要だと考えます。 この講座を受講すれば、それらを身につけることができます。 しかし、この講座は覚えることがたくさんあります。一度覚えても忘れてしまうのは確実で、そのたびに動画を見返すのは大変です。暗記しろというわけではありませんが、忘れた時にサクッと見直せることが重要です。ので、私は1sectionごとにマークダウンで重要な部分をまとめています。 学習終了後はかなり満足度ん高いものになると思いますが、学習終了までに時間がかかります。一度終わってしまえば忘れるたびに、自身でまとめたメモを確認し思い出すことができますが、結構な労力ですね。 またJavaScriptに触ったことがない人が手を出す教材ではない気がしました。 コードの書き方はある程度わかっていないと、余計なところに気を取られて、肝心な部分を覚えられないと感じました。 まだセクション6ですが、大変素晴らしい教材だと感じました。 また困ったら質問させてください。 (参考:Udemy)

↓全て表示 ↑少なく表示
難しいが、JavaScriptの根本を学ぶ事が出来、大変勉強になります。 (参考: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
   

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

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

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/10/07 HTMLの基本 のVisual Studio Codeのemmet設定のUI変更に対応(macOS, Windows)

  • 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
受講方法やQ&Aの方法を丁寧に説明されていたので。また、会話のスピードが可変になっていて使いやすかったからです。 (参考:Udemy)

↓全て表示 ↑少なく表示
今のところ、挫折せずにロストすることもなく頑張れています。 (参考: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属性をキーに要素を取得
    • name属性をキーに要素を取得
    • class属性をキーに要素を取得
    • ノードを追加
    • 補足:ノードを追加
    • ノードの置換
    • ノードの削除
    • 演習 : DOM操作
    • 演習回答:DOM操作
    • 補足:演習回答:DOM操作
  11. JavaScript イベントとイベントハンドラ
    • イベントとイベントハンドラを関連付ける方法
    • 開始タグの中で関連付ける方法
    • プロパティで関連付ける方法
    • loadイベント
    • addEventListener
    • 演習 : イベントとイベントハンドラ
    • 演習回答 : イベントとイベントハンドラ
  12. AWS Cloud9による開発環境構築
     
    Preview Video
       

    関連:JavaScriptを本でも学ぼう

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

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

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

    いじょうでっす。

    コメント

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