close
プログラミング クラウド Microsoft Azure 情報処理資格 基本情報技術者 IT基礎 応用情報技術者 開発・設計方法 オブジェクト指向 内定者・新人研修 プログラミング基礎 アルゴリズム コンピュータ数学 内定者研修 新人研修 ヒューマンスキル プロジェクトマネジメント プレゼンテーション リーダーシップ 組織マネジメント ネゴシエーション ロジカルシンキング Java UI/UX HTTP JavaScript基礎 情報処理資格 ネットワークスペシャリスト ネットワーク インターネットルーティング応用 IPアドレス データベース応用 SQL応用 パフォーマンスチューニング データベース設計 ER図 概念設計(データベース) 論理設計(データベース) IT資格 Linux基礎 OS・システム基盤 セキュリティ TCP/IP OSI参照モデル データベースセキュリティ ファイアウォール 標的型攻撃 SQLインジェクション ネットワーク基本設計 CCNA Cisco プロジェクトマネジメント資格 情報処理資格プロジェクトマネージャ 情報処理安全確保支援士 人事給与 財務会計 管理会計 簿記 生産管理 在庫管理 ERP バランススコアカード 情報処理資格 ITアーキテクト 情報処理資格 ITストラテジスト 情報処理資格 ITサービスマネジメント 情報処理資格 システム監査 PMBOK® PMP® プロジェクト計画 WBS リスクコントロール ITIL ITサービスマネジメント 要求定義 要件定義 見積手法 ビジネスインダストリ 業種・業界知識 業務知識 提案力 ソフトウェアテスト基礎 情報処理資格 データベーススペシャリスト ハードウェア基礎 外部設計(基本設計) 内部設計(詳細設計) データベース基礎 SQL基礎 RDBMS 物理設計(データベース) C++ Ruby MVC基礎 Webアプリケーション開発 JavaEE Javaプログラミング応用 フレームワーク MVC応用 Spring フレームワーク ソフトウェアテスト応用 テスト手法 Junit スマートフォンアプリ開発 Androidアプリ開発 C# 基礎 C# 応用 負荷テスト Javaプログラミング基礎 ソフトウェアテスト コーチング メンタリング HTML/CSS サーバー構築 仮想化技術 KVS (NoSQL) アジャイル スクラム ファシリテーション C言語 ITパスポート JSTQB データサイエンス 単体テスト ユニットテスト キャリアアップ インターネットルーティング基礎 パケット解析 LAN構築 データベース データサイエンティスト トレンド 障害対応 インフラ監視 HTTP/2.0 コンピュータサイエンス VPN ネットワーク物理設計 データベース障害 JavaScript モダンJS (Modern JavaScript) 応用 MVS応用 バックアップ/リカバリ 分散処理 Hadoop Hive Python AI 深層学習(DeepLearning) CentOS Linux応用 Zabbix シェルスクリプト Infrastructure as Code Windowsサーバー基礎 内部設計 Docker DevOps Windowsサーバー応用 NginX chef Ainsible ロジカルライティング R テスト自動化 Jenkins Git 継続的インテグレーション (CI) バージョン管理 Vagrant 要求分析 Redmine 継続的インテグレーション(CI) 継続的デリバリー (CD) ヒューマンリソース管理 Web API マイクロサービス コミュニケーション 業務知識/業界知識 マーケティング 語学 AWS 法務 IoT ビジネスマナー OJT 業務効率化 表計算ソフト オフィスソフト コンプライアンス フロントエンド Subversion PHP 関数型プログラミング Laravel モダンJS (Modern JavaScript) 基礎 Android Studio 機械学習 iOSアプリ開発 ぷプログラミング React 次世代高度IT人材 共創 IPA Raspberry Pi Xamarin スクリプト言語 GoF CUI VBA 資格 ビジネス文書 jQuery 研修参加レポート マネジメント OSPF テーブル設計 アンガーマネジメント クリティカル・シンキング PDU 経営改善 Pマーク 問題解決技法 サイバー攻撃 エンジニア 参加してみた エンゲージメントマネジメント 労働関連法 新人育成 ネットワーク構築 情報セキュリティマネジメント デザインパターン リファクタリング マルチスレッドプログラミング ベンダーコントロール Modern JavaScript 冗長化 VLAN インフラエンジニア チームビルディング テストケース リーダブルコード セキュリティ入門 ネットワーク入門 Node.js npm gulp ビルドツール Python入門 冗長化入門 インフラ実機演習 プロジェクト管理 Active Directory ネットワーク管理 コンテナ 正規化理論

ゼロからはじめるjQuery 研修コースに参加してみた

今回の研修コース参加レポートは↓です!

ゼロからはじめるjQuery

jQuery のコードを見るのは初めてという状態で参加 しましたが、 直感的にコードが書けて「動く、動くぞー」が体験できる コースでした!
講師の神田さんの丁寧でわかりやすいインタラクションで、スムーズにそこまでいけました。

これからjQueryやフロント書こうかなとお考えの方はもちろん、JavaScriptちょっと苦手だなと思う方にもオススメのコースです。

では、どんな内容だったのかレポートします!

 

想定する受講者

  • HTML、CSSの基本的な知識をお持ちの方

 

受講目標

  • jQueryの基本構文がわかる
  • 簡単な制作ができるようになる

 

講師紹介

簡単に「神田です。よろしくお願いしまーす」と軽く自己紹介されて、スタートしたのですが、ここではちょっと補足です。
講師の 神田 幸恵 さんはWebデザイナーとしてキャリアを積まれ、いまはインストラクターとしてご活躍です。
なお、翔泳社で書籍も執筆されています。

jQuery標準デザイン講座

 

演習環境の確認

今回は↓で開発します。

  • エディタ: atom
  • サンプルコード
  • ブラウザ:chrome

jQueryこれだけで良いんですね。。
ブラウザとエディタだけでよいというのは、とてもハードル低い!! (感激) (エディタも必要ないっちゃ必要ない。。)

最近のJSだと Node.jsnpm 入れて、 package.json 用意して npm install とかぁぁ、そんなのありません。。
もちろん jQuery もプラグインは入れますが、はじめてJS触る人には、とてもいい感じです。

 

jQuery とは

生のJavaScriptはだとコードが割りと長くなるところ、jQueryというライブラリを経由することで、直感的に短く書けるのが特徴で、プログラマではないデザイナーにもわかりやすいと紹介されました。

実際、ピュアなJavaScriptとjQueryを比較した記事があったので、それを見てみると、確かにわかりやすいですね。

 

jQuery の文法

演習用サンプルコードの説明

今日の演習では神田さんが予め HTML/CSS を用意頂いているので、jQueryを書くことに集中できます。
当たり前ですが、独学に比べて、研修はやっぱりこの辺がラクですね。

用意されたHTMLのヘッダを眺めて、簡単に jQuery がどこで呼ばれるのか確認します。
それによって

$function(){
// 処理
}
という無名関数から始めることも、軽く説明してもらいました。

今はわからなくてもOKなので「おまじない」と思ってください、と神田さんからフォローしていただきました。
遠慮なく、おまじないだと思うようにします!

 

jQuery の文法

jQueryの文法は、英語の文法 SV / SVO / SVOC / SVOC のようになっていて、

$(セレクタ).メソッド()
ーーーー  ーーー
主語    述語

$(セレクタ).メソッド(引数.引数)
ーーー  ーーー  ーーー
主語   述語   目的語.形容詞

このように表現するということでした。
スライドの例、 $("p").fadeOut("slow") がすんなり 読める、読めるぞー

 

jQueryの基本的なメソッドを使ってみる

jQueryの基本的な書き方がわかったところで、よく使うメソッドを実際書いて、動きをみてみます。

 

演習方法

やり方はブラウザに用意されたHTML/CSSを表示して、.jsファイルに書き、ブラウザで動かしてみるので、とても確かめやすい環境でした。

 

  • HTMLメソッド $(セレクタ).html()
    セレクタで指定したhtmlを操作する
  • CSSメソッド $(セレクタ).css()
    セレクタで指定したcssを操作する
  • show/hideメソッド $(セレクタ).show()`/ `hide()
    セレクタで指定した要素の表示非常時を切り替える
  • attrメソッド
    • $(セレクタ).attr()
      • セレクタで指定したファイルの属性情報を取得する
      • $("#imgInfo").html($("#lesson4 img").attr("width"));
      • 意味: lesson4 の img ファイルの width を取得し、htmlにある imgInfo に出す
    • $(セレクタ).attr(引数.引数)
      • セレクタで指定したファイルの属性情報を変える
      • $("#lesson5 img").attr("src", "img/number2.gif");
      • 意味: lesson5 の img ファイルの src の値を img/number2.gif に変える
  • addClassメソッド $(セレクタ).addClass()
    • セレクタで指定した要素にクラスを追加する
  • clickメソッド $(セレクタ).click(function(){})
    • クリックしたら、定義した function を動かす
    • ex. 意味: クリックしたら lesson7 の a の color を赤にする

 

  • fadeIn/fadeOutメソッド $(セレクタ).fadeOut()
    • セレクタで指定した表示を非表示にする

 

Viewer を作ってみる

ここからは習ったメソッドを早速使って、動きのあるページを作ってみます。

 

その前に、闇雲に書き始めるのではなく、Webページの開発の進め方を教えてもらいました。

 

1. まず作りたいページ html を読んで、やりたいことをまとめて見通しを立てる

例えば、拡大した画像の <figure>hoge</figure> を変えるんだろうなあ

2. メソッドを出しておく

click() attr() を使いそう

3. どのような順番で動くのか考える

  1. サムネールをクリック click()
  2. クリックした情報を attr() で取得する
  3. attr() でクリックした情報の値に変える

4. 書く

 

神田さんがどのような順番で書くのか解説しながら、(スクリーンに画面を出して)ライブで書くので、jQueryはじめての私も何をしているのか理解しながらコードを書けました。

 

Tab と Modal も同じように作る

Viewer と同じように↓のページも作りました。

  • tab

 

  • Modal

 

最後の Modal では、途中から神田さんより「解説なしにやってみましょう」ということで考えながら、jQueryはじめての私も自分で書けました!
「動く、動くぞー!」

一通り受講者の皆さんの手が止まったところをみて、Modalの解説をしながら、コードを書いて、コースは修了しました!

 

まとめ

このコースでは、jQueryの基礎文法を理解して、簡単なメソッドを書いて理解しました。
そのメソッドを使って、動きのある簡単なページを解説付きで作って、最後は自分で書けるようになりました。

JavaScript本来のコードを書くことなく、シンプルに直感的に書けるjQueryの良さがわかったコースでした。(準備も楽チン)

もちろん、いまどきの動的なページを作れるには、さらに学習が必要ですが、jQueryやフロント、JSの一歩目としては、とてもふさわしいものでした!!

 

 


SEカレッジが気になった方はこちらからお気軽にお問合わせ下さい!

お問い合わせフォーム

SEカレッジの詳細をご覧になりたい方はこちら!!

SEカレッジ

特集・キャンペーン

よくある質問集

タグ一覧

研修参加レポート参加してみたJava基本情報技術者プログラミングセキュリティプログラミング基礎コミュニケーションLinux基礎オブジェクト指向プロジェクトマネジメントアルゴリズム情報処理資格PythonエンジニアJavaプログラミング基礎SQL基礎Javaプログラミング応用新人研修コーチングSQL応用IoTファイアウォールビジネス文書Raspberry Piマネジメントデザインパターンロジカルシンキングテーブル設計JavaScript新人育成トレンドUI/UXC# 基礎単体テストSQLインジェクションデータベース設計JavaScript基礎jQueryCCNAデータベース基礎ネットワークITILDocker内定者研修冗長化ソフトウェアテストVLANRDBMSOSPFリファクタリング要求定義テスト自動化データサイエンスインフラエンジニアZabbixマルチスレッドプログラミングビジネスマナーシェルスクリプトアンガーマネジメントネットワーク構築障害対応プレゼンテーションIPAWebアプリケーション開発アジャイルModern JavaScriptAI表計算ソフトLAN構築JavaEE経営改善関数型プログラミングVPNエンゲージメントマネジメントデータベースロジカルライティングGoFPマークLinux応用データベース障害資格問題解決技法物理設計(データベース)要件定義Node.jsWBSサイバー攻撃チームビルディング共創MVC基礎仮想化技術ベンダーコントロールインフラ実機演習業務効率化ソフトウェアテスト基礎C# 応用npm業務知識/業界知識リスクコントロールパケット解析テストケース内部設計クリティカル・シンキングER図プロジェクト管理情報セキュリティマネジメントインフラ監視gulpマーケティングネゴシエーションリーダブルコードCiscoスクラムCentOSActive Directoryインターネットルーティング応用ビルドツールAWSITサービスマネジメントセキュリティ入門簿記ITパスポートネットワーク管理モダンJS (Modern JavaScript) 基礎IT基礎Python入門労働関連法データサイエンティストネットワーク入門PMBOK®Junitヒューマンスキルコンテナ次世代高度IT人材HTML/CSSパフォーマンスチューニング冗長化入門

過去の記事