jQueryを中心としたJavaScript

jQueryを中心としたJavaScript

Hideaki Honda

Page 2

jQueryとは？

オープンソースのJavaScriptライブラリ。

JavaScriptを使いやすくする仕組みを提供してくれる。

コンセプトは、「Write Less, Do More」

「より少ない書き方で、もっと多くこなす」

JavaScriptで出来ないことがjQueryを使えば出来る、

というものではないです。あくまでもJavaScript。

Page 3

JavaScriptおさらい

・Webページの動作を制御するために使います。・JavaScriptは、主にWebブラウザ上で動作します。・Webページを構築するためには必須の技術です。

↓動作環境

↑Webの構成要素

Page 4

JavaScriptおさらい

JavaScriptは、単独で使うことはあまりなく、

HTMLやCSSと組み合わせて使用します。

引用元： http://all-web-school.blogspot.jp/2013/05/html5css-no4.html

Page 5

jQueryの特徴

シンプルな記述

ユーティリティ

クロスブラウザ対応

MITライセンス

豊富なプラグイン

Page 6

jQueryを使うと

<普通に書いた場合>

var divs = document.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++) {

divs[i].style.color = 'red';

}

<jQueryを使った場合>

$('div').css('color', 'red');

Page 7

jQueryの注意したい点

jQueryを使うことで、JavaScriptを使った

開発の助けになります。

ですが、便利な反面、汎用性を持たせて

実装されているため、素のJavaScriptと

比べて、パフォーマンスが落ちる可能性が

あることは意識しておく必要があります。

Page 8

導入する場面について

メンはやはりブラウザを使ったwebシステムでしょう。

コンシューマ(一般)向けサービスの場合、ブラウザでの動作をターゲットにすることが多い為、使用頻度は非常に高いです。

エンタープラズ(企業)向けシステムの場合、ブラウザを使用しないケースも多いと思います。

.Netで開発するかどうかが大きなポントになると思います。私の主観でそれぞれを見てみます。

Page 9

導入する場面について jQuery - .Net

項目 jQuery .Net

開発スタル ベント駆動 (これはどちらも同じ)

再利用性 非常に高い。 高い。

フォーム Htmlのフォームを使う。 標準で用意されている。

印刷機能 ブラウザの印刷機能による。

OSレベルの印刷機能を制御可能。

DBゕクセス 可能。(やることは無い) 可能。

フゔルの操作 ユーザが指定したフゔルに限り可能になった。

可能。

jQuery(JavaScript)は、ブラウザ上で動くことになるので

ブラウザの制約を受けます。

Page 10

機能の拡張

jQuery Plugin

タッチ操作に最適化されたモバル向け。 ンタラクテゖブな画面開発向け。

本体。 拡張機能。多種多様にあり、自作も可能。

jQuery本体と組み合わせて使用することで機能を拡張できる。

Page 11

開発環境 IDE

IDE名称 説明

NetBeans 高機能。無料で使える。

WebStorm 入力補完に強い。有料。

WebMatrix マクロソフト製。無料で使える。

クラウド型IDE名称 説明

Cloud9 IDE 無料。複数言語をサポートしている。

Codenvy 日本語入力が出来ない。

Page 12

開発環境 Eclipse系、エディタ

Eclipse系名称 説明

Aptana Studio Eclipseと操作感が変わらず使える。起動が遅い。

Eclipse + WTP 定番で、よく使われている。

Spket IDE 商用利用の場合は有料。

エデゖタ名称 説明

Sublime Text 色々なカスタマズが出来る。

Brackets Adobe製。入力補完が強い。

Coda 2 Mac用として有名。

Komodo Edit Windows、Mac、Linuxで使える。動作は重め。

Page 13

開発環境 webサービス

ネットで手軽に実行出来るサト名称 URL

JS Bin http://jsbin.com/

jsFiddle http://jsfiddle.net/

Liveweave http://liveweave.com/

jsdo.it http://jsdo.it/

Liveweaveがおすすめ。

ブラウザさえあれば、すぐに試すことが出来る。

Page 14

ライセンス

jQueryは、MITラセンスで提供されています。公式サトの記述：https://jquery.org/license/

MITラセンスとは、要約すると次のようなラセンスです。(以下引用)

１．このソフトウェゕを誰でも無償で無制限に扱って良い。ただし、著作権表示

および本許諾表示をソフトウェゕのすべての複製または重要な部分に記載

しなければならない。

２．作者または著作権者は、ソフトウェゕに関してなんら責任を負わない。

引用元：http://ja.wikipedia.org/wiki/MIT_License

無償で扱えて、商用利用・ソース改変・再配布が可能です。

注意点として「著作権表示および本許諾表示」を記載する必要があり

ます。jQuery本体のソースコードの最初に記述があるので、これを

消してはいけません。

Page 15

バージョン

jQueryは、２つの系統のバージョンがあります。

1.X系

2.X系

IE6,7,8をサポートする。

IE6,7,8をサポートしないがコードが合理化・軽量化されている。

そのため、処理速度も1.X系に比べると高速である。

どちらのバージョンを採用するかは、IEのバージョンを

どこまでサポートするかで判断します。

2つのバージョンを平行してサポートするという方針は、

今後も継続するとのこと。

2014年10月時点での最新バージョンは、

1.X系が「1.11.1」、2.X系が「2.1.1」、となっています。

Page 16

バージョン 注意点

注意点

1.9のバージョンから、機能の削除や挙動の変更になりました。

1.9より前のバージョンを使っていて、1.9にゕップグレードする場合、

動作に影響を与えるので注意が必要です。

詳しい変更点は、以下を参照のこと。

http://jquery.com/upgrade-guide/1.9/

2014/10/29追記

次のリリースより、バージョンの番号付けが変更になります。

「jQuery 1.11.1」の次期バージョンは、「jQuery Compat 3.0」

「jQuery 2.1.1」の次期バージョンは、「jQuery 3.0」

ネットで情報を収集するときに混乱すると思うので、注意が必要です。

Page 17

圧縮版について

jQueryは、2つの形式で配布されています。

・非圧縮版の「Uncompressed」

→通常のソースコード

・圧縮版の「Minified」

→改行やスペースが除いたソースコード

※jQueryに限らず、JavaScriptのラブラリは、

このような形で提供されていることが多いです。

Page 18

圧縮版について

圧縮版はフゔルサズが小さく、フゔルの取得が

早くなるのでリリース用として使用します。

読み難いため、デバッグには向いていません。

参考：最新バージョンのフゔルサズ

自作のコードも、ツールを使って簡単に圧縮可能。

http://minify.avivo.si/

形式 フゔイル名 フゔイルサイズ

圧縮版 jquery-1.11.1.min.js 93.5KB

非圧縮版 jquery-1.11.1.js 276KB

Page 19

jQuery以外のJavaScriptライブラリ

jQuery以外にも、とても多くのラブラリがあります。代表的なものを挙げてみます。

<ユーテゖリテゖ系>Prototype、MooTools、Zepto、YUI Library

<制御系>AngularJS、Backbone.js、Ember.js、KnockoutJS

<グラフゖック系>D3.js、three.js

＜備考＞以下のサトは、TODOゕプリを、それぞれのJavaScriptラブラリを使って実装している。違いが分かるので面白い。http://todomvc.com/

Page 20

JavaScript 歴史

JavaScriptに焦点を当てて、これまでの歴史を見てみます。

1995年 JavaScript登場。

2005年 Ajaxの普及。

2006年 jQueryが始めてリリースされる。

2006年頃 リッチクラゕント全盛期。

2010年 altJSの登場。

Page 21

altJSとは？

alternative JavaScript

JavaScriptの代替となるプログラミング言語全般の総称。

最近、このaltJSと呼ばれる言語が増えています。

CoffeeScript、TypeScriptなど。

参考：

https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS

簡単な概要としては、

「これらの言語でコーデゖングしてコンパルすると

JavaScriptが出来上がる」というもの。

Page 22

altJS なぜ必要なのか？

では、なぜ必要なのでしょうか？

はじめからJavaScriptで開発すればいいように思います。

なぜ？

JavaScriptに求められる要求が高く、また増えた。

開発規模も大きくなっている。

jQueryで楽にはなったけどもっと簡単に出来ないか・・・

でも、JavaScriptだと、言語の仕様上難しい。

それなら、別の言語で簡単に書いて、

JavaScriptを生成してしまえ・・・

Page 23

altJS 仕組み

[CoffeeScriptの場合]

１．CoffeeScriptを使ってコーデゖングする。

２．専用のコンパラを使って、ソースコードをコンパルする。

３．CoffeeScriptで書いたコードが、JavaScriptのソースコードに変換される。

以下のようにフゔルが変換される。

*.coffee ⇒ コンパル ⇒ *.js

引用元： http://html5experts.jp/clockmaker/2183/

Page 24

代表的なaltJS

代表的なaltJSを挙げてみます。

CoffeeScript、TypeScript、Haxe、Dart、JSX、

特徴については以下のサトが詳しいです。

http://html5experts.jp/clockmaker/2183/

クラスの利用、シンプルな記述等メリットも多いですが、

採用するかどうかは、よく検討する必要があります。

逆に手間が増えることになりかねないからです。