今もなお生き続ける不死身のjQuery - 基礎から実務まで

全世界のウェブサイトの75%以上で使用されているJavaScriptライブラリ、jQuery!派手なエフェクトよりも原理を理解し、基礎を固められるように構成しました。jQueryの基礎から活用までを学習して、自分だけのポートフォリオを完成させたり、現場ですぐに活用してみてください。

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
JavaScript
JavaScript
jQuery
jQuery
jquery-selector
jquery-selector
HTML/CSS
HTML/CSS
JavaScript
JavaScript
jQuery
jQuery
jquery-selector
jquery-selector

受講後に得られること

  • jQueryの基礎文法

  • jQueryで要素のスタイルを変更する

  • jQueryで要素にイベントを適用する

  • jQueryでアニメーションを素早く実装する方法

  • すぐに応用できる実践例:タブ(tabs)

  • 今すぐ使える実践例アコーディオン(accordion)

  • 今すぐ使える実践例ライトボックス(lightbox)

  • すぐに使える実践例:バックトゥトップ(back to top)アニメーション

  • すぐに使える実践例スライド(slideshow)

  • 実務ライブラリ - Swiper JSの活用

  • 実務ライブラリ - Masonryの活用

  • 実務ライブラリ - ScrollTriggerを活用する

  • 実務ライブラリ - Fullpage JSの活用方法

"今もらわないと損!YouTube登録だけで受講料が半額"

チャンネル登録&高評価&コメントイベント

簡単なミッションを完了して、50%割引クーポンを今すぐ受け取りましょう。期間限定で提供される過去最大級の特典を、今すぐ手に入れてください!

YouTubeチャンネル登録&コメント認証イベントに参加する:https://forms.gle/wcD2wRVeaG7B7fSj7

jQueryを今でも学習すべき理由

jQueryは2006年に初めて登場して以来、ウェブ開発者に広く使われてきたJavaScriptライブラリです。その主な理由の一つは、多様なウェブブラウザ間の互換性を保証しながらも、HTML要素の選択と操作を簡素化し、開発の生産性を高めてくれるからです。

jQueryのこのような利点は、全世界のウェブサイトにおける高い使用率に表れています。例えば、2021年時点で上位1,000万件のウェブサイトのうち、約77.8%がjQueryを使用していました。

[ 出典: https://w3techs.com/technologies/overview/javascript_library ]

このようにjQueryは長期間にわたり、ウェブ開発の標準ツールとして定着してきました。したがって、jQueryを学習することは、既存の膨大なコードベースを理解し、保守・管理する上で大きな助けとなります。また、依然として多くのウェブサイトがjQueryを使用しているため、これを習得しておけば、さまざまなプロジェクトで有用に活用することができます。

もちろん、最近ではReactやVue.jsのような最新のフレームワークやライブラリが注目されていますが、jQueryのシンプルさと広範な互換性は依然として魅力的な要素として残っています。したがって、ウェブ開発者としてjQueryを学習することは、過去と現在の技術を共に理解する上で重要な土台となるでしょう。

jQuery活用のウェブサイト例

サムスン電子 https://www.samsung.com/sec/


サムスン電子のホームで開発者ツールのelement部分のheadタグ部分を見ると、jQueryライブラリ、slick(スライドショー)ライブラリ、swiperライブラリ、masonryライブラリを活用しています。

アシアナ航空 - https://flyasiana.com/C/KR/KO/index




アシアナ航空の場合、jquery、swiperライブラリを活用しており、日付を多用するためmoment.jsを活用しています。


ビングレ - https://www.bing.co.kr/



ビングレサイトの場合、masonryやslickなどを活用しており、共通して適用されるスクリプトはcommon.js、各ページごとに動作するスクリプトはmain、subなどに区分して使用しています。

その他多数のサイトがjQueryを活用してウェブサイトを制作、保守しています。

そこで本講義でも、jQueryの基本文法と代表的な関数、タブ、アコーディオンなどの基本例題を学習し、代表的な実務ライブラリであるswiper js、masonry、fullpage JSなどを追加で学習する予定です。

主な学習内容を紹介します。

パートA

jQueryの基本文法を学習します。

jQueryのロードから、ロードの順序について学習します。jQueryを活用して要素を選択し、選択した要素のスタイルを変更したり、選択した要素にイベントを適用したりします。

jQueryを通じてアニメーションを簡単に実装します。この際、アニメーションの時間、速度、および関数を記述して細かく設定します。


jqueryイベントを学習するソースの一部です。

イベントとアニメーションの基礎を学習する例題です。

パートB

パートBでは、ウェブページ制作で最も頻繁に活用されるUI/UXであるタブ、アコーディオン、ライトボックス、バック・トゥ・トップ、スライドを実装します。効果を実現するためのHTML構造を作成し、CSSであらかじめ効果を設計し、スクリプトを実装して様々なイベントに応じて効果が実現されるように作成します。



タブの完成版画面です。

アコーディオンの完成版です。

ライトボックスの完成版です。

Back to Top Animation 完成版です。

slideshow 完成版です。

パートC

パートCでは、実務でよく活用されるライブラリのうち、Swiper、Masonry、ScrollTriggerなどの活用法を学びます。


Swiper JS ライブラリの完成版です。

Masonry ライブラリの完成版です。

ScrollTriggerライブラリの完成版です。

パートD

パートBでは、fullpageJSを活用して、ホイールを動かすと次のスライドへスムーズに移動するウェブページを実装します。

SVGでグラフを作成し、jQueryと連動して枠線が塗りつぶされるアニメーションを作成します。




fullpage JSを活用したプロフィールページの完成版です。

サンプルファイルおよび完成版を提供します。

サンプルファイルは2次時(jQuery文法 - ロード順序)の資料からダウンロードできます。


完成版の全ファイルは、17次時(Fullpage JS)の資料からダウンロードできます。


コミュニケーション窓口(アンケート、1:1オープンチャット)

受講生の皆様は、お知らせ欄で紹介されているGoogleフォーム1:1オープンチャットを通じて、いつでも意見や質問をしていただけます。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML、CSS、JavaScriptを学習した方

  • コーダーを目指している就活生

  • ポートフォリオを準備している方

  • ウェブデザイン技能士(旧、ウェブデザイン技能士)資格の取得を準備されている方

こんにちは
ezwebです。

2,812

受講生

63

受講レビュー

4

回答

4.9

講座評価

14

講座

■ [現在] ESTSOFT KDT フロントエンド講師
■ グリーンコンピュータアート学院 ウェブパブリッシング、フロントエンド講師
■ ウェブパブリッシングYouTubeチャンネル「Rock's Easyweb」運営
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ ハンビッコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UXウェブデザインポートフォリオ講義


[ 書籍 ]
2021.07.19 刊行 / ウェブデザイン&ウェブパブリッシングのためのFigma完璧活用書 / BJ Public

2022.08.25 出版 / コーディングは初めて with ウェブパブリッシング / ヨンジン出版社

2023.10 出刊 /2024 SDエデュ ユ・ソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画

2024.11 重版 /2025 SDエデュ ユーソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画

2025.11 重版 /2026 SDエデュ ユ先生のウェブデザイン技能士実技家庭教師ノート / 時代考試企画

 

[ 受賞歴 ]
2022.08 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2021.06 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2018.06 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2017.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2016.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2015.10 グリーンコンピュータアカデミー 新村支店 - 優秀講師

 

 

 

もっと見る

カリキュラム

全体

17件 ∙ (5時間 30分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

2件

5.0

2件の受講レビュー

  • mrnobody님의 프로필 이미지
    mrnobody

    受講レビュー 8

    平均評価 5.0

    5

    35% 受講後に作成

    良い講義をありがとうございます。

    • ezweb
      知識共有者

      貴重な受講レビューをありがとうございます。

  • sang416님의 프로필 이미지
    sang416

    受講レビュー 7

    平均評価 5.0

    5

    65% 受講後に作成

    ezwebの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!

    ¥2,168