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 ネットワーク管理 コンテナ 正規化理論 Haskell 品質管理 OpenStack シンギュラリティ DBA中級 プロトコル UX 基本設計 FinTech トラブルシューティング 並列処理 見える化 PMO ロジカルコミュニケーション Deep Learning 実機演習 インデックス設計 超上流工程 BGP Excel C-CENT Selenide プライベートクラウド アセンブラ コンピュータ基礎 工数見積 CCENT 法律知識 失敗から学ぶ プロジェクト失敗事例 PDCA プログラミング入門 非エンジニア向け 4Biz DNS セルフマネジメント 片付け術 サーバーダウン サーバー タイムマネジメント GO言語 プロダクトマネジメント プロダクトマネージャ LVS ロードバランサー 負荷分散 仮想通過 犯罪心理学 情報漏えい SEカレッジ導入事例 IT研修を聞いてみた 会社規模 (100~300名) IT研修制度を聞いてみた CentOS7 開発環境構築 数学力 数字力 財務 IT人材 UI Machine Learning Go言語 (golang) データマイニング 統計学

ゼロからはじめる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基礎セキュリティプログラミングプログラミング基礎コミュニケーションSQL基礎オブジェクト指向PythonAIネットワーク入門SQL応用JavaScriptトレンドソフトウェアテストコーチングマネジメントデータベースDockerファイアウォールRDBMSインフラ実機演習テスト自動化Linux応用情報処理資格マルチスレッドプログラミングIoTJavaプログラミング応用アルゴリズム仮想化技術Javaプログラミング基礎jQueryビジネスマナーRaspberry Piネットワークエンジニア障害対応データベース設計新人研修CCNA資格テーブル設計ビジネス文書単体テストアンガーマネジメント要求定義ネットワーク構築シェルスクリプトアジャイルSQLインジェクション物理設計(データベース)ロジカルシンキングパケット解析経営改善ロジカルライティングクラウドLAN構築デザインパターンヒューマンスキルUI/UXVLANデータベース基礎OSPFC# 基礎データサイエンス問題解決技法インフラエンジニアコンテナプレゼンテーションJavaScript基礎関数型プログラミングパフォーマンスチューニング内定者研修テストケースWBS業務効率化スクラムTCP/IP冗長化ソフトウェアテスト基礎Active DirectoryCentOSCiscoセキュリティ入門マーケティングロジカルコミュニケーションPマーク次世代高度IT人材HTML/CSSリファクタリングITILデータベース応用簿記JavaEEデータベース障害データベースセキュリティ新人育成ZabbixPMBOK®非エンジニア向け法律知識ベンダーコントロールプロトコルインターネットルーティング基礎IT基礎見える化Modern JavaScript要件定義プロジェクト管理UX情報セキュリティマネジメント品質管理インターネットルーティング応用PMOプロジェクト失敗事例機械学習ER図表計算ソフトJunitGoFITパスポートIPアドレスエンゲージメントマネジメントセルフマネジメントWebアプリケーション開発VPNOSI参照モデル仮想通過工数見積AWSサーバー構築データサイエンティストITサービスマネジメントDBA中級IPAインデックス設計正規化理論Go言語 (golang)並列処理OS・システム基盤Windowsサーバー応用LVSネゴシエーション数字力プライベートクラウドプロジェクト計画サーバーnpmソフトウェアテスト応用Haskell超上流工程4BizSEカレッジ導入事例データマイニングクリティカル・シンキング失敗から学ぶchefロードバランサーモダンJS (Modern JavaScript) 基礎財務アセンブラInfrastructure as Codeタイムマネジメントgulpテスト手法スクリプト言語BGPDNSリーダブルコード業務知識/業界知識MVC基礎応用情報技術者会社規模 (100~300名)統計学インフラ監視負荷分散IT人材基本設計コンピュータ基礎Windowsサーバー基礎リスクコントロールGO言語ビルドツールCentOS7OpenStackExcelPDCAMicrosoft Azureネットワーク管理UIFinTechIT資格内部設計プロダクトマネジメントPython入門フロントエンドIT研修制度を聞いてみたシンギュラリティC-CENT労働関連法片付け術HTTPDeep Learningプログラミング入門継続的インテグレーション (CI)犯罪心理学共創Machine LearningトラブルシューティングCCENTプロダクトマネージャ冗長化入門PHPC# 応用開発環境構築SelenideサーバーダウンNode.jsサイバー攻撃チームビルディング継続的インテグレーション(CI)情報漏えい

過去の記事