강의

챌린지

멘토링

로드맵

커뮤니티

WebパブリッシャーのためのjQuery実践 - 基礎からUIインタラクションまで

Reactのような最新技術が普及した現在でも、jQueryは既存Webサイトの運用・保守やWebパブリッシングの現場で、いまだに触れる機会の多い技術です。単に華やかなエフェクトを真似して作るのではなく、jQueryの動作原理と基礎を理解し、イベントやアニメーションからさまざまなUIインタラクションまで、段階的に学習します。実習を通してポートフォリオを完成させ、実務でも活用できる実践的なWebパブリッシングスキルを身につけましょう。

難易度 初級

受講期間 無制限

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

学習した受講者のレビュー

5.0

5.0

준쮸넛

100% 受講後に作成

ジェイクエリに自信がなかった者ですが、この講義を受けて自信がつきました。説明も頭にスッと入ってきます!! これからもより良い講義をお願いします。ありがとうございます!

受講後に得られること

  • 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のシンプルさと幅広い互換性は、依然として魅力的な要素として残っています。そのため、Web開発者としてjQueryを学ぶことは、過去と現在の技術を理解するうえで重要な土台となるでしょう。

jQueryを活用したウェブサイトの例

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


サムスン電子のホームページで開発者ツールを使ってElementsの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などに分けて使用しています。

そのほかにも多くのサイトがjQeuryを活用してウェブサイトを制作・保守しています。

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

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

パートA

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

jQueryの読み込みから、読み込み順序を学習します。jQueryを活用して要素を選択し、選択した要素のスタイルを変更し、選択した要素にイベントを適用します。

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


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

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

パートB

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



タブの完成画面です。

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

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

Bact 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です。

キャリア認証

3,007

受講生

78

受講レビュー

4

回答

4.9

講座評価

15

講座

WebパブリッシングからJavaScript・Reactの実務、AIを活用した開発まで教えるフロントエンド専門講師です。

ESTSOFT KDTやグリーンコンピューターアカデミーなどで、未経験者や初心者、就職準備中の方を対象に指導してきました。複雑な概念を小さな実習に分け、学習者が自ら成果物を完成させるプロジェクト中心の授業を目指しています。

主な教育分野

  • HTML/CSSウェブパブリッシング

  • JavaScript基礎およびWebインタラクション

  • Reactベースのフロントエンド開発

  • Firebaseを活用したWebサービスの実装

  • Figma UI設計および開発連携

  • 生成AIと共に学ぶウェブ開発

  • ウェブデザイン技能士実技

企業・機関向け研修

企業実務者向け研修、KDTコース、大学・スクールでの特別講義を実施しています。

受講対象者と事前知識、教育時間、目標とする成果物に合わせて、カリキュラムと実習プロジェクトを構成します。オフラインでの出張講義、リアルタイムのオンライン授業、録画型の教育コンテンツ制作のすべてに対応可能です。

オンライン教育コンテンツ制作

以下のようなオンライン教育コンテンツ制作業務を行います。

  • 講義カリキュラムおよび学習目標の設計

  • 教材とプレゼンテーションの作成

  • 段階別の実習コードとサンプルプロジェクトの構成

  • 撮影用講義台本の作成

  • 講義の撮影およびコンテンツ納品

主な活動

  • ESTSOFT KDT フロントエンド講義

  • グリーンコンピューターアカデミー ウェブパブリッシング・フロントエンド講義

  • ウェブパブリッシングYouTubeチャンネル「ezweb」の運営

  • ウェブパブリッシング・ウェブデザイン分野の書籍執筆

著書

企業・機関への出張講義およびオンライン教育コンテンツ制作に関するお問い合わせを受け付けています。

お問い合わせ:ezwebpub@gmail.com

もっと見る

カリキュラム

全体

17件 ∙ (5時間 30分)

講座資料:

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

受講レビュー

全体

3件

5.0

3件の受講レビュー

  • mrnobody님의 프로필 이미지
    mrnobody

    受講レビュー 8

    ∙

    平均評価 5.0

    5

    35% 受講後に作成

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

    • ezweb
      知識共有者

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

  • ekfdud911479님의 프로필 이미지
    ekfdud911479

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    ジェイクエリに自信がなかった者ですが、この講義を受けて自信がつきました。説明も頭にスッと入ってきます!! これからもより良い講義をお願いします。ありがとうございます!

    • ezweb
      知識共有者

      貴重な受講評をいただき、ありがとうございます。 ^^

  • sang416님의 프로필 이미지
    sang416

    受講レビュー 8

    ∙

    平均評価 5.0

    5

    65% 受講後に作成

    ezwebの他の講座

    知識共有者の他の講座はこちら

    似ている講座

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