jQueryを学ぶ - コーディング講座アプリのアイコン

jQueryを学ぶ - コーディング講座

教育 · 無料 · iOS & Android · CoddyKit

jQueryを学ぶ - コーディング講座 — スマートフォンでjQueryを学習:チェーンを記述し、実際のページの反応を見てみましょう

jQueryを学ぶ - コーディング講座は、jQuery JavaScript libraryを初心者、学生、jQueryサイトを保守する開発者向けに教える、無料で始められるiOSおよびAndroidアプリです。DOM操作、イベント、エフェクト、AJAXを学習できます。各レッスンにはライブエディターとページプレビューが付いており、jQuery 3.7.1が組み込まれているため、記述したコードがスマートフォン上で、オフラインでも実行されます。AI Mentorが、selector、エラー、AJAX callに関する質問に答えます。

App Store — 無料でダウンロードGoogle Play — 無料でダウンロード
価格
無料、Proアップグレード
プラットフォーム
iOSおよびAndroid
言語
22
対象年齢
4+
必要環境
iOS 15.1以降
ホーム画面の上に、jQuery Academyの学習パスと「Learn jQuery Like a Pro」と表示されたストア画像全体の進捗とFreeタグ付きのレッスンが表示された「Introduction to JavaScript」のコース概要画面
22コース、A1からC1
3.7.1jQueryを組み込み
20デバッグミッション
CSS selectorがわかるなら、jQueryの大部分はすでに理解できています。

jQueryはCSSからselectorを取り入れ、取得した結果にアクションをチェーンできます。そのため、DOM、イベント、非同期コードに無理なく触れられます。また、今もjQueryに依存している既存のWebサイトが数多くあるため、実践的なスキルにもなります。

概要

jQueryを学ぶ - コーディング講座は、jQuery JavaScript libraryのためのiOSおよびAndroid向けコースアプリです。A1からC1までのレベルに対応した22コース、48レッスン、jQuery 3.7.1を組み込んだデバイス上で実行できるページプレビュー付きのライブJavaScriptエディター、20のデバッグミッション、20のHTMLおよびCSSガイド付きプロジェクト、50の面接対策問題、50のクイズ問題、91項目のチートシートを収録しています。AI Mentorがselector、エラー、AJAX callについて、わかりやすい言葉で説明します。

アプリの内容

画面イメージ

ホーム画面の上に、jQuery Academyの学習パスと「Learn jQuery Like a Pro」と表示されたストア画像
学習パスホーム画面にはjQuery Academyのコース、「Start First Lesson」ボタン、毎日の目標、Skill Hubが表示されます。
全体の進捗とFreeタグ付きのレッスンが表示された「Introduction to JavaScript」のコース概要画面
コース概要全体の進捗と番号付きのレッスン一覧が表示されるコース画面です。無料のレッスンにはFreeタグが付き、「Change Your Course」ボタンでコースを切り替えられます。
JavaScriptの関数と記号キーの行が表示されたコードエディター。「Code Library」ボタンと「Generate Code」ボタン付き
コードエディターエディターには括弧や引用符用の記号バーがあり、コードの上に「Code Library」、「Generate Code」、「AI Enhance」ボタンが表示されます。
概念の説明、ヒント、クイズ、学習ロードマップの作成を提案するプロンプトが表示されたAI Chat画面
AI MentorAI Chatタブでは、重要な概念の説明、より速く学ぶためのヒント、クイズ、学習ロードマップの作成をワンタップで依頼できます。
jQuery Academyのカード、毎日の目標、機能リクエストが表示されたライトテーマのホーム画面
毎日の目標ライトテーマでは、ホーム画面にjQuery Academyのコースカード、「Start First Lesson」ボタン、毎日の目標、機能リクエストへのショートカットがまとめて表示されます。

コース

jQueryコースで学べること

CoddyKitのjQueryコース一覧をもとに、最初の$呼び出しからプラグイン、テスト、最新のJavaScriptとの連携までを扱います。

  1. jQueryへようこそ:最初のステップ

    jQueryとは何か、どのような現実の問題を解決したのか、なぜ今も多くのサイトで使われているのかを学び、最初のチェーンと初心者向けの基礎へ進みます。

  2. 要素の選択とDOMトラバーサル

    要素の選択に加え、高度な属性セレクターや疑似クラスセレクターを学び、DOM内をある要素から次の要素へ移動します。

  3. DOMの操作とスタイリング

    2つのコースを通して、要素の作成、挿入、移動、削除を学び、コードからCSSやクラスを変更します。

  4. イベントとデリゲーション

    イベント管理に続き、後から追加された要素に対応するイベントデリゲーションと、カスタムイベント管理を学びます。

  5. アニメーションとエフェクト

    基本的なアニメーションから、複雑なアニメーション、連続したシーケンスやカスタムイージングなどのカスタムエフェクトまで扱います。

  6. フォーム、データ、テンプレート

    データ属性とテンプレートを使った動的コンテンツに加え、高度なフォーム処理とバリデーションを学びます。

  7. AJAX、Deferredオブジェクト、Promise

    AJAX操作とリモートデータの処理に続き、非同期コードを管理するためのDeferredオブジェクトとPromiseを学びます。

  8. プラグイン、パフォーマンス、テスト

    カスタムセレクターとフィルタリング、堅牢なプラグインの開発、パフォーマンスとベストプラクティス、jQueryと最新のJavaScriptの連携、jQueryアプリケーションのテストを扱います。

使い方

レッスンの進め方

各レッスンでは、短い解説を自分で実行するcodeの隣に表示します。次へ進む前に、そのアイデアを実際に試せます。

  1. 短いレッスンを読む

    topicを開き、selector、イベント、エフェクトについての簡潔な解説を読みます。レッスンはバスの移動中にも読める長さで、コースは最初のチェーンからplugins、testingまで進みます。

  2. チェーンを書いてページの反応を見る

    ライブエディターでは、HTML、CSS、jQueryを記述して一度に実行できます。エディターは入力を止めるとcodeを再実行します。serverもbuild stepも必要なく、ページプレビューに結果が表示されます。

  3. バグを修正してから、Mentorに質問する

    Missionでは、壊れたcodeが提示され、原因を見つけるよう求められます。たとえば、thisがwindowになっているclick handler、スライドし続けるmenu、2回実行されるsaveなどです。conceptやエラーが理解できないときは、AI Mentorがより簡単な言葉でもう一度説明します。

内容

アプリに含まれるもの

22

コース、A1からC1

22コース、48レッスンを収録しています。$ functionと最初のチェーンから始まり、selector、DOM操作、イベント、animation、form、AJAX、plugin、performanceまで学べます。

3.7.1

jQueryを組み込み

ページプレビューはjQuery 3.7.1を含んだ状態でデバイス上で実行されるため、エディターはオフラインでも動作します。

20

デバッグミッション

チェーンの最後がstringになってしまうバグや、最初の行にしか機能しないdelete buttonなど、実際に遭遇しそうなバグを修正します。

20

ガイド付きページプロジェクト

selectorが後から操作するmarkupを構築する、20のHTMLおよびCSSプロジェクトです。

91

チートシートとクイズ

selector、イベント、エフェクト、AJAX methodをまとめた91項目のチートシートに加え、50のクイズ問題と50の面接対策問題を収録しています。

AI

AI Mentor

selector、エラー、AJAX callについて質問すると、わかりやすい言葉で回答が得られます。無料プランには1日3問が含まれます。

背景

jQueryは今でも学ぶ価値があるのでしょうか?また、何に使われているのでしょうか?

jQueryは、Webページ上の要素を短いコードで選択したり、変更したり、クリックに反応させたり、ページを再読み込みせずにデータを読み込んだりできるJavaScript libraryです。新しいframeworkが多くの新規プロジェクトで主流になっていますが、既存のWebサイトの大きな割合は今もjQueryで動作しています。そのため、そうしたコードを読み、修正し、拡張することは、今でも実践的なWeb開発スキルです。また、より大規模なツールに進む前に、DOM、イベント、非同期JavaScriptに触れるための無理のない方法でもあります。

$ functionとチェーン1行で複数のアクション

selectorを指定して$を呼び出すと、jQuery objectが返されます。また、ほぼすべてのmethodはそのobjectを再び返します。これにより、リストを選択し、classを追加し、フェードインさせる処理を、4つの別々のstatementではなく、読みやすい1行のチェーンとして記述できます。

SelectorCSSの知識を活かせます

class、id、attribute、pseudo-class selectorは、stylesheetで使う場合とほぼ同じように機能します。さらにtraversal methodを使えば、ある要素からparent、child、siblingへとたどれます。何百もの似た行があるページでも、目的の行にたどり着ける仕組みです。

Event delegation後から追加された要素にも対応する方法

buttonにattachしたhandlerは、codeが実行された時点で存在していたbuttonにしか適用されません。parentにattachしてselectorで絞り込めば、後から追加された行にも機能します。これは、delete buttonが古い行にしか機能しない典型的な原因です。

これが指すものよくあるバグ

jQuery handlerの内部では、thisはイベントを受け取った要素を指します。しかし、arrow functionやcallbackの置き場所を間違えると、thisの指す対象が変わることがあります。thisがwindowになってしまったhandlerをdebugするのは、初めて遭遇する典型的な本格バグです。

AJAXとpromise再読み込みなしでデータを取得

$.ajax()はrequestを送信し、responseが返ってきたときにページを更新できるようにします。Deferred objectとpromiseを使えば、複数のrequestを整理できます。そのため、callbackを入れ子にするのではなく、あるstepが別のstepを待ってから実行されるようにできます。

適しています

向いている方・向いていない方

次のような方におすすめです

  • HTMLとCSSを少し知っていて、クリックやフォームに反応するページを作りたい方
  • jQueryで構築されたサイトを保守しており、そのコードを読んで修正する必要がある方
  • レガシーなjQueryが今も登場するフロントエンド面接の準備をしている方
  • スマートフォンでコードを書き、すぐにページのプレビューを確認したい方
  • 短時間の学習を好み、質問できるメンターを求めている方

次のような方には適していません

  • Reactなどの最新フレームワークを学びたい方。このアプリではjQueryとDOMを学べます。
  • すべてのコースを無料で利用したい方:最初のコース、最初のプロジェクト、2つのミッションは無料で、Proですべての残りのコンテンツを利用できます。
  • Proで広告が削除されるため、広告なしの無料版を期待している方

ご質問

よくある質問

スマートフォンでjQueryを学ぶ最良の方法は何ですか?

最も効果的なのは、セレクターについて読むだけでなく、コードを書いてページの変化を確認することです。jQueryを学ぶ - コーディング講座では、短い各レッスンにページプレビュー付きのライブエディターが用意されています。jQuery 3.7.1が組み込まれているため端末上で実行でき、AI Mentorが分からない点を説明します。iOSとAndroidで無料で始められます。

jQueryはJavaScriptと同じですか?

いいえ。JavaScriptはプログラミング言語で、jQueryはJavaScriptで書かれたライブラリです。要素の選択、クリックへの反応、AJAXリクエストの送信など、よく使う処理を短く記述できます。jQueryを学ぶ - コーディング講座では、JavaScriptエディター内でjQueryを学ぶため、両方を一緒に練習し、チェーンがプレーンなDOMコードにどう対応するかを確認できます。

jQueryは今でも学ぶ価値がありますか?

新しいプロジェクトでは別のツールを選ぶチームが多い一方、既存のWebサイトの多くは今もjQueryで動いているため、そのコードを読んで修正するスキルは実用的です。また、DOM、イベント、非同期JavaScriptを学ぶ入り口としても取り組みやすい技術です。jQueryを学ぶ - コーディング講座には、レガシーなjQueryが今も登場するフロントエンド職向けの面接問題も収録されています。

jQueryを学ぶ - コーディング講座はiPhoneとAndroidで利用できますか?

はい。jQueryを学ぶ - コーディング講座は、iPhone(iOS 15.1以降)向けにApp Storeで、Android向けにGoogle Playで利用できます。インターフェースは英語、スペイン語、ドイツ語、フランス語、ポルトガル語、日本語、韓国語、アラビア語、ヒンディー語、トルコ語を含む22言語に対応していますが、どの言語でも書くコードはjQueryとJavaScriptのままです。

アプリ内でjQueryコードをオフライン実行できますか?

エディターでは可能です。jQueryを学ぶ - コーディング講座にはjQuery 3.7.1が組み込まれているため、オフラインでも端末上でページプレビューを実行できます。AI Mentorを利用する機能にはインターネット接続が必要です。

jQueryコースではどのようなトピックを扱いますか?

22のコースで、$関数とセレクターからDOM操作、スタイリング、イベントとデリゲーション、アニメーション、フォーム、AJAX、Deferredオブジェクト、Promiseまで学びます。さらに、カスタムセレクター、プラグインの作成、パフォーマンス、jQueryと最新のJavaScriptの連携、テストへと進みます。

デバッグミッションとは何ですか?

壊れたjQueryコードが提示され、実際の仕事で起こるようにバグを見つけて修正する20個の演習です。例として、thisがwindowになるクリックハンドラー、文字列で終わるチェーン、古い行でしか動作しない削除ボタン、画面を離れた後もスライドし続けるメニュー、2回実行される保存処理などがあります。

最初にJavaScriptやHTMLを知っておく必要がありますか?

jQueryのセレクターはマークアップ上で動作し、CSSの記法を取り入れているため、HTMLとCSSを少し知っていると役立ちます。jQueryを学ぶ - コーディング講座には、ガイド付きのHTMLとCSSのページプロジェクトも20個用意されているため、セレクターで操作するマークアップを自分で作れます。コースは最初のチェーンから始まります。

jQueryを学ぶ - コーディング講座は無料ですか?

無料で始められます。最初のコース、最初のガイド付きプロジェクト、2つのミッション、エディター、クイズ、面接問題、チートシート、1日3回のAI Mentorへの質問を利用できます。無料版には広告が表示されます。Proでは、すべてのコース、プロジェクト、ミッション、認定試験、無制限のAI Mentorが利用可能になり、広告も削除されます。Proは、週額、月額、年額のサブスクリプション、または一度の支払いで利用できる永久ライセンスとして提供されています。コース終了時の認定試験はProに含まれます。

jQueryを学ぶ - コーディング講座はjQueryと提携していますか?

いいえ。jQueryはOpenJS Foundationの商標であり、jQueryを学ぶ - コーディング講座は、OpenJS Foundationと提携も承認も受けていない独立した学習アプリです。

始める

今日、初めてのjQueryチェーンを書いてみましょう

iOSとAndroidで無料で始められ、22言語に対応しています。

App Store — 無料でダウンロードGoogle Play — 無料でダウンロード
最終確認日 · CoddyKitが公開 · プライバシーポリシー
iOS および Androidで利用できます。