本記事では、Udemyに掲載されているおすすめのjQuery講座を紹介しています。
目次
Udemyとは?
Udemyとは、IT技術・音楽・写真などの幅広いテーマの中から学びたいもの好きな時に学ぶことができるオンライン学習プラットフォームで、利用者数は2021年に4,400万人を超えています。
IT技術などの専門的な分野で初学者が参考書を買って独学で勉強すると、半分以上が挫折してしまいます。その理由の多くは、分からない箇所で躓いて周りに聞ける人が周りに居ないことです。
Udemyの場合、動画で分からないポイントがあったら講師の方に質問することができます。また過去に受講している生徒からの質問も確認することができます。
FAQ
Udemyを使ったことがない人が気になるポイントについて、FAQ形式で記載しています。
このFAQはUdemy公式ホームページに書かれている内容のみを載せているのでご安心ください。
- 購入したコースの返金をすることは可能ですか?
- 購入後30日以内であれば返金することが可能です。
- Udemyでの支払い方法は何がありますか?
- 「クレジットカード/デビットカード」「PayPal」「App Store」「Google Play」「Udemyクレジット」があります。
- 購入したコースに期限はありますか?
- 学習期限はありません。アカウントが有効且つコースのライセンスを所有し続ける限り、コースを修了した後でも引き続き受講できます。
jQuery特化の動画
即実践 手を動かして6時間でjQueryをマスターしよう。知識、経験ゼロからjQueryを使いこなそう
作成者 | 村守 康 |
学習時間 | 6時間 |
受講者数 | 2,890人 |
レビュー | (458件) |
このコースはjQueryを学ぶためのわかりやすい講座です。このコースを終了するとjQueryを使ってホームページサイトに画像の自動入れ替えやドロップダウンメニューなど最新の機能を実装できるスキルを身に付けることができます。全編を手を動かして作品を制作しながら解説しているので、理論や機能を単独で学ぶ講座に比べ、飽きることがありません。
jQueryでホームページサイトを劇的に変える力を身に付けよう
- jQueryについて必要な知識はすべて基本からていねいに分かりやすく説明しているので、これだけでライブラリやプラグインを使う力が身につきます。
- 「実際に手を動かしてコードを書き」、実践的な指導で即戦力がつきます。
- 解説はすべて動画で行い、現役のデザイナーがページを制作する過程をマウスの動きひとつまで収録しています。
- ナレーション付きでわかりやすく解説しています。
- 必要な画像素材など作業に必要な素材はすべて添付されています。
- javascriptとCSS3についても丁寧に解説しています。
WEB業界で活躍できるjQueryのスキルを確実に身につけます
このコースを終了するとjQueryを使ってホームページサイトに画像の自動入れ替えやドロップダウンメニューなど最新の機能を実装できるスキルを身に付けることができます。
ホームページ編集ソフトなど準備するものは何もありません。インターネットにつながったパソコンがあればそれだけで大丈夫です。
学習内容
8つのセクション、63本のビデオ、合計6時間の講座で集中して学べます。
- はじめに
- jQueryでできること
- jQueryとは
- jQuery実装のしくみ
- jQueryを実装してみよう
- jQuery 最初に押さえておくこと
- jQueryとjavascriptの関係
- 最初にやるべきことは
- jQuery ライブラリの読み込み
- 読み込みスクリプトの解説
- jQueryの読み込み確認
- jQueryスクリプトの説明
- jQuery文法の基礎
- 簡単なjQueryを書いてみよう
- セレクタとメソッド
- セレクタとメソッドの応用練習
- セレクタの詳細
- メソッドの詳細
- メソッドの効率的な書き方
- その他のメソッド
- メソッドチェーン
- イベント(1)
- イベント(2)
- onイベント
- offイベント
- 実践的なjQuery文法
- jQueryの動画 animate(1)
- jQueryの動画 animate(2)
- animateの応用(1)
- animateの応用(2)
- htmlを直接操作するメソッド
- hideメソッド
- showメソッド
- アコーディオン(1)
- アコーディオン(2)
- アコーディオン(3)
- アコーディオン(4)
- 関数の概要
- 関数の使い方(1)
- 関数の使い方(2)
- 関数の使い方(3)
- カルーセル
- カルーセルの実装
- ファイルのダウンロード
- jQueryライブラリの読み込み
- htmlとjQueryの記述
- オプションの設定
- プルダウンメニュー
- htmlページの準備
- html部分の編集(1)
- html部分の編集(2)
- CSSスタイルシートの設定(1)
- CSSスタイルシートの設定(2)
- 処理の手順確認
- jQueryスクリプトの記述
- プレビューと修正
- Back-to-top
- Back-to-topの概要
- jQueryライブラリの読み込みとボタンの配置
- jQueryスクリプトとCSS
- Lightbox
- Lightboxの概要
- htmlに画像の配置
- CSSの設定(1)
- CSSの設定(2)
- CSSの設定(3)
- Lightbox実装の手順
- 必要なファイルの読み込み
- 実行のスクリプトを記述
- リンクの設定
- オプションの設定
速習+詳細+実例 jQuery講座
作成者 | 柳井 政和 |
学習時間 | 9時間 |
受講者数 | 3,147人 |
レビュー | (360件) |
このコースは、jQuery公式のAPIドキュメントの知識を網羅しています。セレクタを使ったDOM要素の操作から、イベント、エフェクト、Ajax、Deferredまでの、基礎知識から実際の利用までをカバーしています。
このコースを習得すれば、次のような事ができるようになります。
- WebページのDOM要素の操作。
- イベントやエフェクトの登録と活用。
- Ajax、Deferredといった、通信や非同期処理の扱い。
- 実際のアプリケーションの作成を通した、jQueryの活用。
コースで紹介されるコードは、サンプルコードとして、全てダウンロードすることができます。
このコースを学んだ人は、3段階の講座で、jQueryを徹底的に深く使いこなせるようになります。
- まずは「速習jQuery」で、jQueryの概要を学びます。
- 次に「詳細jQuery」で、APIドキュメントに沿った内容を詳細に学びます。
- 最後に「実例jQuery」で、jQueryを利用したプログラムを書けるようになります。
- イントロダクション
- イントロダクション
- ソースコードについて
- ブラウザについて
- 文字コードについて
- テキストエディタについて
- JavaScriptの基本文法について
- Q&A
- 速習jQuery 基本編
- [章頭] 速習jQuery 基本編
- 補足:Google Chromeのコンソール1
- jQueryとは
- 1系、2系
- 読み込み方
- ready
- セレクタ
- [コラム] コンソールでのjQueryの利用
- 速習jQuery API編
- [章頭] 速習jQuery API編
- イベント
- 要素の操作
- 要素の操作2
- 横断
- 要素の作成
- 要素の追加
- 要素の追加2
- エフェクト
- 速習jQuery 上級編
- [章頭] 速習jQuery 上級編
- Ajax
- ローカルサーバーを簡単に立てる
- Deferred
- Deferred2
- Deferred 並列
- プラグインの利用
- 詳細jQuery jQuery
- [章頭] 詳細jQuery jQuery
- 詳細jQueryの進め方
- 日本語で読めるAPIドキュメント
- jQueryと$
- jQuery.noConflict()
- 詳細jQuery Selector セレクタ 基本
- [章頭] 詳細jQuery Selector セレクタ 基本
- 補足:Google Chromeのコンソール2
- APIドキュメント
- 要素
- id
- クラス
- 属性
- 詳細jQuery Selector セレクタ 位置
- [章頭] 詳細jQuery Selector セレクタ 位置
- 補足:Google Chromeのコンソール3
- 選択した要素の番号
- 先頭
- 末尾
- n番目
- 後
- 子孫や子
- 詳細jQuery Selector セレクタ 種類と状態
- [章頭] 詳細jQuery Selector セレクタ 種類と状態
- フォーム部品 種類
- フォーム部品 状態
- 状態
- 中身の状態
- 否定
- ヘッダー
- 詳細jQuery Traversing 横断 兄弟親子
- [章頭] 詳細jQuery Traversing 横断 兄弟親子
- APIドキュメント
- 兄弟系
- 兄弟系2
- 子系
- 親系
- 詳細jQuery Traversing 横断 その他
- [章頭] 詳細jQuery Traversing 横断 その他
- 絞り込み系
- 番号指定系
- 否定
- 選択追加系
- 選択破棄
- .each()
- .map()
- .is()
- 詳細jQuery Events イベント 基本
- [章頭] 詳細jQuery Events イベント 基本
- APIドキュメント
- イベントの設定と発火
- 準備完了
- クリック系
- フォーム系&シリアライズ
- リサイズ&スクロール
- フォーカス系
- 詳細jQuery Events イベント キー&マウス
- [章頭] 詳細jQuery Events イベント キー&マウス
- キー系
- ホバー
- マウス系
- マウス系2
- 詳細jQuery Events イベント 汎用操作
- 1回のみ
- [章頭] 詳細jQuery Events イベント 汎用操作
- イベントのバブリング
- オン
- オフ
- イベント実行
- 詳細jQuery Events イベント eventオブジェクト
- [章頭] 詳細jQuery Events イベント eventオブジェクト
- eventオブジェクトとは
- ターゲット系
- 情報系
- 停止系
- 受け取り系
- 詳細jQuery Attributes 属性操作
- [章頭] 詳細jQuery Attributes 属性操作
- APIドキュメント
- value値の操作
- 属性の値を操作
- 属性プロパティの操作
- 属性プロパティの操作2
- クラスの操作
- 詳細jQuery CSS
- [章頭] 詳細jQuery CSS
- APIドキュメント
- CSSの操作
- 位置の取得
- スクロールの操作
- 詳細jQuery Dimensions 縦横サイズ
- [章頭] 詳細jQuery Dimensions 縦横サイズ
- APIドキュメント
- 縦横サイズ
- 詳細jQuery Data
- [章頭] 詳細jQuery Data
- APIドキュメント
- Dataの操作
- 詳細jQuery Manipulation 操作
- [章頭] 詳細jQuery Manipulation 操作
- APIドキュメント
- 要素内の末尾や先頭に挿入
- 要素内にHTMLやテキストを設定
- 要素の後や前に挿入
- 削除
- 複製
- 置換
- ラップ
- 詳細jQuery Effects エフェクト シンプル
- [章頭] 詳細jQuery Effects エフェクト シンプル
- APIドキュメント
- 表示、非表示
- Duration、Easing、Callback
- フェード
- スライド
- アニメイト
- 詳細jQuery Effects エフェクト 上級
- [章頭] 詳細jQuery Effects エフェクト 上級
- エフェクトの接続
- 遅延
- 停止
- キュー
- 設定
- 詳細jQuery Ajax
- [章頭] 詳細jQuery Ajax
- APIドキュメント
- セキュリティ的な制限
- $.get()
- $.getScript()
- $.getJSON()
- .load()
- $.ajax()
- 詳細jQuery Deferred
- [章頭] 詳細jQuery Deferred
- APIドキュメント
- なぜDeferredが必要なのか?
- 約束、実行、棄却
- 約束、実行、棄却2
- 直列処理
- 並列処理
- Ajax
- 詳細jQuery Utilities
- [章頭] 詳細jQuery Utilities
- APIドキュメント
- $.extend()
- $.each()、$.map()、$.grep()
- 実例jQuery ブックマークレット
- [章頭] 詳細jQuery ブックマークレット
- 実行の確認
- コードの解説
- 実例jQuery 電卓
- [章頭] 詳細jQuery 電卓
- 実行の確認
- コードの解説
- コードの解説2
- 実例jQuery 記念日表示
- [章頭] 詳細jQuery 記念日表示
- 実行の確認
- コードの解説
- コードの解説2
- コードの解説3
- コードの解説4
- コードの解説5
jQuery + 他言語の動画
ちゃんと学ぶ、HTML+CSS & JavaScript入門講座
作成者 | たにぐち まこと |
学習時間 | 9時間 |
受講者数 | 42,075人 |
レビュー | (8,925件) |
HTMLとCSS、JavaScriptなどの Webの知識は、今や Webに関わる仕事はもちろんの事、アプリ開発やメディア制作など、あらゆる仕事に必要になっています。
これら、フロントエンド(表示される画面に関わる要素)を操るエンジニアを「フロントエンドエンジニア」などと呼びます。この講座では、そんなフロントエンドエンジニアになるための基礎知識となる、HTMLと CSS、プログラミング言語の JavaScriptを総合的に学びます。
スマートデバイスに対応した「レスポンシブWebデザイン」での、サイト制作や「CSSフレームワーク」を用いて、簡単に Webサイトデザインを行なう方法、そして JavaScriptでは「Ajax通信」や「jQuery/Vue.js」などの「JavaScriptフレームワーク」を用いたプログラミング開発まで学ぶことができます。
本講座を修得すれば、簡単な Webページなら自分の力で組み上げることができるようになるでしょう。また、他のチームメンバーが作った Webページの構造を理解し、変更したり、制作に参加するといった事もできます。
なお、本講座は同じ作者の、『これからWebをはじめる人のHTML&CSS, JavaScriptのきほんのきほん(マイナビ出版刊)』に基づいて映像講義にしています。本講座だけでも学ぶことができますが、書籍を手元に置けばより理解が深まることでしょう。合わせてご利用ください。
- はじめに
- Udemyでの受講について
- Webの開発環境を整えよう(Windows編)
- Webの開発環境を整えよう(macOS編)
- 入会フォームを HTML/CSSで作成しよう
- 簡単なHTMLを作ってみよう
- 空要素と属性
- HTMLを作る時に必ず記述する基本要素
- CSSの基本と内部参照
- HTML,CSSのインデントとコメント
- CSS:外部参照と、リセット・ノーマライズ
- 補足:パスについて
- CSSをリセットする reset.cssと、無害化する sanitize.css
- CSS:クラスセレクターと色の指定
- CSS:色指定での16進数記法
- CSS: margin, paddingプロパティと、borderプロパティ
- CSS:フォームパーツのスタイル指定とbox-shadow
- HTML:id属性とlabel要素
- レスポンシブWebデザインで、スマホ対応のサイトを作ろう
- HTML/CSS:CDアルバムの紹介ページを作ろう
- HTML:セクショニングコンテンツ(header, section)
- CSS:タイトルの CSSを整える
- CSS:floatを使った回り込み
- CSS:clearで回り込みを解除する
- HTML: リンクを張る aタグ
- HTML:「実体参照」でコピーライト表記を追加する
- CSS:Webフォントを使う
- CSS:レスポンシブWebデザイン(RWD)のレイアウトを作る(メディアクエリー・リキッドデザイン・ブレイクポイント)
- CSS:CSSアニメーションを使う(Transition)
- Bootstrapで素早く Webページを作ろう
- Bootstrapを、CDNで利用する
- Bootstrap:Containerを使う
- Bootstrap:グリッドシステムを使う
- Bootstrap/HTML:オフセットとフォームパーツ
- Bootstrap/HTML:フォームのスタイルと placeholder属性
- HTML:ドロップダウンリスト(リストボックス)を作る
- HTML:チェックボックスを作る
- HTML/CSS:ラジオボタンと、!important指定
- Bootstrap 4での Labelから Badgeへの名称変更
- Bootstrap:ボタンとラベルを作る
- JavaScriptで今日の日付を表示しよう
- HTML/CSS:画面を作り上げよう
- JavaScript:オブジェクト・メソッド・パラメーター
- JavaScript:文字列・数字と四則演算、文字列連結
- JavaScript:変数の扱い
- JavaScript:オブジェクトとインスタンス
- JavaScript:Dateオブジェクトを使ってプログラムを仕上げよう
- イベントドリブンな、ストップウォッチプログラムを作成しよう
- HTML/CSS:画面の見た目を作成しよう
- JavaScript:getElementByIdとプロパティで要素を書き換えよう
- JavaScript:if構文で条件に沿ったプログラムを作ろう
- JavaScript:function(関数)定義をしよう
- JavaScript:イベントドリブンなプログラムを作成しよう
- JavaScript:setIntervalで定期的に実行されるプログラムを作ろう
- JavaScript:変数のスコープを理解しよう
- JavaScript:秒数から、分と時を計算しよう
- JavaScript:thisを使って、STOPボタンを実装しよう
- 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:画面を仕上げよう
- JavaScriptライブラリーを利用しよう
- jQuery:jQueryを使ってみよう
- jQuery:Ajax通信を行なってプログラムを仕上げよう
- Vue.js:Vue.jsを使ってみよう
- Vue.js:Vue.jsで画面を作り上げよう
初心者向けJavaScript & jQuery基礎講座
作成者 | Yu Hiraga |
学習時間 | 3.5時間 |
受講者数 | 331人 |
レビュー | (94件) |
この講座は初心者向けです。JavaScriptを全く知らない方を対象にしています。
ウェブ開発の土台がHTML、デザインに必須なのがCSSです。加えて、JavaScriptが使えるようになると、開発の幅がぐんと広がります。
JavaScript単体でもかなりの機能が備わっていますが、さらなる利点は、JavaScriptをベースにした別の技術も使えるようになることです。身につけることで、選択肢が急激に増え、可能性も大きく広がり、開発という作業がさらに楽しくなること請け合いです。
講座の最後で、最も人気のあるJavaScriptライブラリの一つであるjQueryの基礎についても講義しています。jQueryはJavaScriptをより簡単かつスタイリッシュに使うためのツールです。JavaScript単体で行うよりもはるかに迅速かつ効率的に、様々な機能やデザインを実装できるようになります。スキルアップの第一歩としては最適です。
難しい言い回しはなるべく避け、用語の説明もなるべくわかりやすくしました。一つ一つの講義は短くし、要点をコンパクトにまとめました。
もしも貴方がJavaScriptの初心者ならば、この講座でステップアップを目指してください。内容については保証いたします。
- はじめに
- イントロ
- JavaScriptの基本
- Hello world
- 変数
- コンソール
- データ型
- 数
- 文字列
- ブール型
- コメント
- 算術演算子
- 比較演算子
- 算術演算子による型変換
- 関数
- 関数の実行
- if文
- if文の実例
- switch文
- whileループ
- forループ
- breakとcontinue
- スコープ
- JavaScriptファイルの適用
- オブジェクト
- オブジェクト
- プロパティ
- JSON
- ブラウザのオブジェクト
- 配列
- 配列
- for/in文
- concat()、join()
- shift()、unshift()、pop()、push()
- slice()、splice()
- 関数型プログラミング
- 引数としての関数
- 無名関数
- 関数のネスト
- クロージャ
- コールバックの引数
- map()、filter()
- reduce()
- arguments
- その他
- DOM
- 要素の取得
- スライドショー
- setTimeout()
- 自動化
- イベント
- イベントオブジェクト
- Ajax
- httpリクエスト
- jQuery
- jQueryとは
- ダウンロードと導入
- 初めてのjQueryコード
- 要素の挿入
- before()、after()、prepend()、append()
- セレクタ
- スタイルシート
- addClass()
- 属性
- hide()、show()
- mouseover及びhoverイベント
- メソッドチェーン
- フェード
- スライド
- まとめ
- jQuery UI
- ダウンロードと導入
- ドラッグできる要素
- ツールチップ
- アコーディオン
- タブ
- アウトロ
- 終わりに
5日で覚える!JavaScript/JQueryプログラミング【超入門】
作成者 | Takashi Kito |
学習時間 | 8時間 |
受講者数 | 52人 |
レビュー | (8件) |
プログラミングにはいろいろな言語がありますが、JavaScript言語はホームページにいろいろな動きを付けることができる人気のプログラミング言語です。
例えばホームページ上の画像を左右に移動させたり、スライドショーとしていろいろな画像を自動で切り替えることができる技術です。
この講座では、JavaScriptの入門からJQueryの使い方、JavaScriptの理解に必要なHTML/CSSの基礎知識そして、スライドショーなどの実用プログラミングまで映像と音声で短期間で身につけることができます。
動画で操作を実演しながら丁寧に解説しますので初心者の方にも安心です。
コンテンツは以下の内容で構成されています。
- 講義映像
- サンプルソースコード・講義スライド
- コースの概要・特徴
- コース概要
- JavaScriptの特徴
- 予備知識(HTML)
- HTMLの要素
- HTMLの枠組み
- htmlのコメント
- 見出し
- 段落・改行・強調
- 箇条書き(リスト)
- リンク
- 画像
- 表(テーブル)
- フォーム
- 予備知識(CSS)
- CSSの基本(タイプセレクタ)
- HTMLからCSSを読み込む
- classセレクタ
- IDセレクタ
- 子孫セレクタ
- 複数セレクタ
- CSSのコメント
- 文字サイズ
- 文字の書体
- 行の高さ
- 文字位置
- 文字の色と背景色
- 幅と高さ
- 枠線
- 余白
- paddingプロパティ
- marginプロパティ
- 箇条書きのスタイル
- グループ化(div要素)
- ボックス配置
- JavaScript
- JavaScriptの開発環境
- JavaScriptの記述
- プログラミングの基本ルール
- コメント
- 文字列の出力
- 変数
- 変数への代入
- 配列
- 配列の要素数
- 多次元配列
- 連想配列
- 演算子
- インクリメント・デクリメント演算子
- if文
- if_else文
- if_elseif文
- 条件演算子
- 複数の条件指定
- switch文
- for文
- for-in文
- while文
- do_while文
- 繰り返し処理から抜ける
- ラベル
- 関数
- 引数のある関数
- 戻り値のある関数
- 宣言と実行を同時に行う関数
- 関数の代入
- 変数のスコープ
- オブジェクト
- メソッド
- プロパティ
- 別のオブジェクトのメソッドを呼び出す
- イベント処理
- イベント処理の記述
- イベント発生元を調べる
- Webページの操作
- Webページの操作・Windowオブジェクトとメソッド
- DocumentオブジェクトによるHTML要素の操作(ID属性とname属性)
- HTML要素の内容の操作
- Documentオブジェクトでイベントハンドラを設定
- Documentオブジェクトによるフォーム要素の操作
- Locationオブジェクト
- 文字列の操作
- 日付の操作
- jQuery
- jQuery・DOM操作
- 要素の抽出・フィルタ
- jQueryのメソッド
- filter/findメソッド
- on/offメソッド
- イベント発生元を取得する
- htmlメソッド
- prepend/appendメソッド
- emptyメソッド
- before/afterメソッド
- replaceWithメソッド
- valメソッド
- affrメソッド
- カスタムデータ属性
- removeAttrメソッド
- addClass/removeClass/toggleClassメソッド
- eachメソッド
- show/hide/toggleメソッド
- slideDown/slideUpメソッド
- fadeIn/fadeOutメソッド
- animateメソッド
- indexメソッド
- サンプルプログラム
- 展開するサイトメニュー
- タブメニュー
- ストライプテーブル
- サムネイル付きスライド
- 画像の切り替え(クロスフェード)
- 左右に移動するスライド
誰でもわかる JavaScript基礎&jQuery基礎
作成者 | 栄一郎 荒川 |
学習時間 | 11時間 |
受講者数 | 265人 |
レビュー | (28件) |
JavaScriptとjQueryの基礎が学べる講座がセットになっています。
JavaScriptは、個人情報の入力項目の未入力チェックのようなことができ、いろいろな機能を持たせるホームページを作成する時に利用します。
JavaScriptは、HTMLの中に組み込み「Gmail」や「Google Map」のように、ページの遷移を行わずページの内容を書き換えるような動的なページを構築することができ、オンライン・ショッピングなどの様々なWebアプリケーション開発には、必要不可欠な要素となっています。
JavaScriptを習得すれば、jQueryと連携して幅広く多方面に対応できるようになります。
このコースでは、丁寧にわかりやすく解説しますので
初学者でもやる気さえあれば必ず習得できます。
是非トライしてください!!
- 準備
- JavaScript基礎
- 開発環境のインストール
- JavaScriptの概要
- JavaScriptの環境設定
- JavaScriptの基礎知識
- JavaScriptの基本文法
- 配列
- 制御構文(1)
- 制御構文(2)
- 関数
- オブジェクト
- ビルドイン・オブジェクト
- ブラウザ・オブジェクト
- DOM(1)
- DOM(2)
- jQuery基礎
- 開発環境のインストール
- jQueryの概要
- jQueryの環境設定
- jQueryの基礎
- jQueryのイベント処理
- アニメーション
- jQuery UIの概要
- jQuery UIの利用
- データ通信(Apache&PHP編)
- データ通信(Tomcat&Java編)