jQueryを中心としてJavaScriptについて書いてます。

1. jQueryを中心とした
JavaScript
Hideaki Honda

2.  Page 2
jQueryとは？
オープンソースのJavaScriptライブラリ。
JavaScriptを使いやすくする仕組みを提供してくれる。
コンセプトは、「Write Less, Do More」
「より少ない書き方で、もっと多くこなす」
JavaScriptで出来ないことがjQueryを使えば出来る、
というものではないです。あくまでもJavaScript。

3.  Page 3
JavaScriptおさらい
・Webページの動作を制御するために使います。
・JavaScriptは、主にWebブラウザ上で動作します。
・Webページを構築するためには必須の技術です。
↓動作環境
↑Webの構成要素

4.  Page 4
JavaScriptおさらい
JavaScriptは、単独で使うことはあまりなく、
HTMLやCSSと組み合わせて使用します。
引用元： http://all-web-school.blogspot.jp/2013/05/html5css-no4.html

5.  Page 5
jQueryの特徴
シンプルな記述
ユーティリティ
クロスブラウザ対応
MITライセンス
豊富なプラグイン

6.  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');

7.  Page 7
jQueryの注意したい点
jQueryを使うことで、JavaScriptを使った
開発の助けになります。
ですが、便利な反面、汎用性を持たせて
実装されているため、素のJavaScriptと
比べて、パフォーマンスが落ちる可能性が
あることは意識しておく必要があります。

8.  Page 8
導入する場面について
メ゗ンはやはりブラウザを使ったwebシステムでしょう。
コンシューマ(一般)向けサービスの場合、
ブラウザでの動作をターゲットにすることが多い為、
使用頻度は非常に高いです。
エンタープラ゗ズ(企業)向けシステムの場合、
ブラウザを使用しないケースも多いと思います。
.Netで開発するかどうかが大きなポ゗ントになると
思います。私の主観でそれぞれを見てみます。

9.  Page 9
導入する場面について jQuery - .Net
項目 jQuery .Net
開発スタ゗ル ゗ベント駆動 (これはどちらも同じ)
再利用性 非常に高い。 高い。
フォーム Htmlのフォームを使う。 標準で用意されている。
印刷機能 ブラウザの印刷機能
による。
OSレベルの印刷機能を制
御可能。
DBゕクセス 可能。(やることは無い) 可能。
フゔ゗ルの操作 ユーザが指定したフゔ゗
ルに限り可能になった。
可能。
jQuery(JavaScript)は、ブラウザ上で動くことになるので
ブラウザの制約を受けます。

10.  Page 10
機能の拡張
jQuery Plugin
タッチ操作に最適化されたモバ゗ル向け。 ゗ンタラクテゖブな画面開発向け。
本体。 拡張機能。多種多様にあり、自作も可能。
jQuery本体と組み合わせて使用することで機能を拡張できる。

11.  Page 11
開発環境 IDE
IDE
名称 説明
NetBeans 高機能。無料で使える。
WebStorm 入力補完に強い。有料。
WebMatrix マ゗クロソフト製。無料で使える。
クラウド型IDE
名称 説明
Cloud9 IDE 無料。複数言語をサポートしている。
Codenvy 日本語入力が出来ない。

12.  Page 12
開発環境 Eclipse系、エディタ
Eclipse系
名称 説明
Aptana Studio Eclipseと操作感が変わらず使える。起動が遅い。
Eclipse + WTP 定番で、よく使われている。
Spket IDE 商用利用の場合は有料。
エデゖタ
名称 説明
Sublime Text 色々なカスタマ゗ズが出来る。
Brackets Adobe製。入力補完が強い。
Coda 2 Mac用として有名。
Komodo Edit Windows、Mac、Linuxで使える。動作は重め。

13.  Page 13
開発環境 webサービス
ネットで手軽に実行出来るサ゗ト
名称 URL
JS Bin http://jsbin.com/
jsFiddle http://jsfiddle.net/
Liveweave http://liveweave.com/
jsdo.it http://jsdo.it/
Liveweaveがおすすめ。
ブラウザさえあれば、すぐに試すことが出来る。

14.  Page 14
ライセンス
jQueryは、MITラ゗センスで提供されています。
公式サ゗トの記述：https://jquery.org/license/
MITラ゗センスとは、要約すると次のようなラ゗センスです。(以下引用)
１．このソフトウェゕを誰でも無償で無制限に扱って良い。ただし、著作権表示
および本許諾表示をソフトウェゕのすべての複製または重要な部分に記載
しなければならない。
２．作者または著作権者は、ソフトウェゕに関してなんら責任を負わない。
引用元：http://ja.wikipedia.org/wiki/MIT_License
無償で扱えて、商用利用・ソース改変・再配布が可能です。
注意点として「著作権表示および本許諾表示」を記載する必要があり
ます。jQuery本体のソースコードの最初に記述があるので、これを
消してはいけません。

15.  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」、となっています。

16.  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」
ネットで情報を収集するときに混乱すると思うので、注意が必要です。

17.  Page 17
圧縮版について
jQueryは、2つの形式で配布されています。
・非圧縮版の「Uncompressed」
→通常のソースコード
・圧縮版の「Minified」
→改行やスペースが除いたソースコード
※jQueryに限らず、JavaScriptのラ゗ブラリは、
このような形で提供されていることが多いです。

18.  Page 18
圧縮版について
圧縮版はフゔ゗ルサ゗ズが小さく、フゔ゗ルの取得が
早くなるのでリリース用として使用します。
読み難いため、デバッグには向いていません。
参考：最新バージョンのフゔ゗ルサ゗ズ
自作のコードも、ツールを使って簡単に圧縮可能。
http://minify.avivo.si/
形式 フゔイル名 フゔイルサイズ
圧縮版 jquery-1.11.1.min.js 93.5KB
非圧縮版 jquery-1.11.1.js 276KB

19.  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/

20.  Page 20
JavaScript 歴史
JavaScriptに焦点を当てて、これまでの歴史を見てみます。
1995年 JavaScript登場。
2005年 Ajaxの普及。
2006年 jQueryが始めてリリースされる。
2006年頃 リッチクラ゗ゕント全盛期。
2010年 altJSの登場。

21.  Page 21
altJSとは？
alternative JavaScript
JavaScriptの代替となるプログラミング言語全般の総称。
最近、このaltJSと呼ばれる言語が増えています。
CoffeeScript、TypeScriptなど。
参考：
https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS
簡単な概要としては、
「これらの言語でコーデゖングしてコンパ゗ルすると
JavaScriptが出来上がる」というもの。

22.  Page 22
altJS なぜ必要なのか？
では、なぜ必要なのでしょうか？
はじめからJavaScriptで開発すればいいように思います。
なぜ？
JavaScriptに求められる要求が高く、また増えた。
開発規模も大きくなっている。
jQueryで楽にはなったけどもっと簡単に出来ないか・・・
でも、JavaScriptだと、言語の仕様上難しい。
それなら、別の言語で簡単に書いて、
JavaScriptを生成してしまえ・・・

23.  Page 23
altJS 仕組み
[CoffeeScriptの場合]
１．CoffeeScriptを使ってコーデゖングする。
２．専用のコンパ゗ラを使って、ソースコードをコンパ゗ルする。
３．CoffeeScriptで書いたコードが、JavaScriptのソースコードに変換される。
以下のようにフゔ゗ルが変換される。
*.coffee ⇒ コンパ゗ル ⇒ *.js
引用元： http://html5experts.jp/clockmaker/2183/

24.  Page 24
代表的なaltJS
代表的なaltJSを挙げてみます。
CoffeeScript、TypeScript、Haxe、Dart、JSX、
特徴については以下のサ゗トが詳しいです。
http://html5experts.jp/clockmaker/2183/
クラスの利用、シンプルな記述等メリットも多いですが、
採用するかどうかは、よく検討する必要があります。
逆に手間が増えることになりかねないからです。