「Web × プログラミング」 ～jQuery編～ ウェブを支える技術を知り、覚え、活用！さまざまなプログラムとウェブとの関わりや技術を基礎から知り学ぶ勉強会。

1. 株式会社ステラリンク
〒743-0065
山口県光市上島田7-1-1
http://www.stellalink.co.jp/
info@stellalink.co.jp
Web × プログラミング
～jQuery 編～
代表取締役 石川 博之
 日時：2017/9/21 18:30～20:00
（毎月第3木曜）
 会場：Creative Coworking カラム
（山口県周南市）
株式会社ステラリンク
〒743-0065
山口県光市上島田7-1-1
http://www.stellalink.co.jp/
info@stellalink.co.jp

2. 本日のアジェンダ
 開会
 セッション
 JavaScriptについて（おさらい）
 jQueryについて
 前回のおさらい
 制作タイム
 質問＆相談タイム
 まとめ・閉会
 次回のテーマ
2

3. セッション
7

4. JavaScriptについて（おさらい）
JavaScript
 スクリプト言語
 マルチパラダイムプログラミング言語
 弱い動的型付け
 元々はNetspace, Inc.が開発
 Netscape Navigator 2.0で初搭載
 現在は ECMAScript-262 にて仕様定義あり
 http://www.ecma-international.org/publications/standards/Ecma-262.htm
8

5. Webのしくみとプログラミング
リクエスト
レスポンスクライアント サーバ
URLからサーバを特定
リクエスト
レスポンス受信
受信結果を解析
スクリプトの場合は処理
画面表示
リクエスト受信
スクリプトの場合は処理
結果をブラウザに返す
9

6. Webのしくみとプログラミング
UI
Webサーバ
DBプログラム等
HTTP
request
response
(HTML等)
10
JavaScriptにより
画面上のオブジェクトを
動的に操作

7. jQuery
 JavaScriptコードを容易に実装できるようにした軽量ライブラリ
 2006年初版
 主な特徴
 ブラウザに依存しないセレクタによるDOM選択
 DOM操作と変更
 イベント
 CSS操作
 エフェクト、アニメーション
 Ajax
 ユーティリティ（ブラウザ情報取得、each関数等）
 拡張性 → jQueryプラグイン
 「$関数」
 jQuery名前空間の別名（エイリアス）
11
$var = ‘A’;
jQuery(‘A’)
$(‘A’)

8. jQuery
 採用環境の拡大 → 事実上のデファクトスタンダードへ
 Microsoft、ノキアでの採用
 開発環境での対応
 Ruby on RailsでのJavaScriptライブラリとしての採用
 WordPressなどのCMSでの採用例
 Ajaxに容易に対応できることによる採用の拡大
12

9. 使用方法
 ライブラリの取り込み
 <script type="text/javascript" src="jquery.js"></script>
 呼び出しの実行
 $.trim(str);
 $(‘p.foo’).addClass(‘bar’);
 $(‘p.foo a.bar’).addClass(‘bar’);
 $(‘p.foo > a.bar’).addClass(‘bar’);
 複数のDOMノードを操作する場合は
13

10. で、実際どうなの？
 現在も採用は多い
 エフェクトやアニメーションはCSSでの実装に移行しつつある
 JavaScript自体の拡張により同様の実装が容易にできつつある
 より軽量化するために素のJavaScriptや別のライブラリに置き換える動
きも出てきている
14

11. 今日の課題
16
https://goo.gl/RMnfpa

12. さあ、ライブプログラミングの時間だ！
18

13. 質問＆相談タイム
21

14. まとめ
22

15. 本日はありがとうございました
26