jqueryを中心としたjavascript
DESCRIPTION
jQueryを中心としてJavaScriptについて書いてます。TRANSCRIPT
![Page 1: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/1.jpg)
jQueryを中心としたJavaScript
Hideaki Honda
![Page 2: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/2.jpg)
Page 2
jQueryとは?
オープンソースのJavaScriptライブラリ。
JavaScriptを使いやすくする仕組みを提供してくれる。
コンセプトは、「Write Less, Do More」
「より少ない書き方で、もっと多くこなす」
JavaScriptで出来ないことがjQueryを使えば出来る、
というものではないです。あくまでもJavaScript。
![Page 3: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/3.jpg)
Page 3
JavaScriptおさらい
・Webページの動作を制御するために使います。・JavaScriptは、主にWebブラウザ上で動作します。・Webページを構築するためには必須の技術です。
↓動作環境
↑Webの構成要素
![Page 4: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/4.jpg)
Page 4
JavaScriptおさらい
JavaScriptは、単独で使うことはあまりなく、
HTMLやCSSと組み合わせて使用します。
引用元: http://all-web-school.blogspot.jp/2013/05/html5css-no4.html
![Page 5: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/5.jpg)
Page 5
jQueryの特徴
シンプルな記述
ユーティリティ
クロスブラウザ対応
MITライセンス
豊富なプラグイン
![Page 6: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/6.jpg)
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を中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/7.jpg)
Page 7
jQueryの注意したい点
jQueryを使うことで、JavaScriptを使った
開発の助けになります。
ですが、便利な反面、汎用性を持たせて
実装されているため、素のJavaScriptと
比べて、パフォーマンスが落ちる可能性が
あることは意識しておく必要があります。
![Page 8: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/8.jpg)
Page 8
導入する場面について
メンはやはりブラウザを使ったwebシステムでしょう。
コンシューマ(一般)向けサービスの場合、ブラウザでの動作をターゲットにすることが多い為、使用頻度は非常に高いです。
エンタープラズ(企業)向けシステムの場合、ブラウザを使用しないケースも多いと思います。
.Netで開発するかどうかが大きなポントになると思います。私の主観でそれぞれを見てみます。
![Page 9: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/9.jpg)
Page 9
導入する場面について jQuery - .Net
項目 jQuery .Net
開発スタル ベント駆動 (これはどちらも同じ)
再利用性 非常に高い。 高い。
フォーム Htmlのフォームを使う。 標準で用意されている。
印刷機能 ブラウザの印刷機能による。
OSレベルの印刷機能を制御可能。
DBゕクセス 可能。(やることは無い) 可能。
フゔルの操作 ユーザが指定したフゔルに限り可能になった。
可能。
jQuery(JavaScript)は、ブラウザ上で動くことになるので
ブラウザの制約を受けます。
![Page 10: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/10.jpg)
Page 10
機能の拡張
jQuery Plugin
タッチ操作に最適化されたモバル向け。 ンタラクテゖブな画面開発向け。
本体。 拡張機能。多種多様にあり、自作も可能。
jQuery本体と組み合わせて使用することで機能を拡張できる。
![Page 11: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/11.jpg)
Page 11
開発環境 IDE
IDE名称 説明
NetBeans 高機能。無料で使える。
WebStorm 入力補完に強い。有料。
WebMatrix マクロソフト製。無料で使える。
クラウド型IDE名称 説明
Cloud9 IDE 無料。複数言語をサポートしている。
Codenvy 日本語入力が出来ない。
![Page 12: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/12.jpg)
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: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/13.jpg)
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を中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/14.jpg)
Page 14
ライセンス
jQueryは、MITラセンスで提供されています。公式サトの記述:https://jquery.org/license/
MITラセンスとは、要約すると次のようなラセンスです。(以下引用)
1.このソフトウェゕを誰でも無償で無制限に扱って良い。ただし、著作権表示
および本許諾表示をソフトウェゕのすべての複製または重要な部分に記載
しなければならない。
2.作者または著作権者は、ソフトウェゕに関してなんら責任を負わない。
引用元:http://ja.wikipedia.org/wiki/MIT_License
無償で扱えて、商用利用・ソース改変・再配布が可能です。
注意点として「著作権表示および本許諾表示」を記載する必要があり
ます。jQuery本体のソースコードの最初に記述があるので、これを
消してはいけません。
![Page 15: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/15.jpg)
Page 15
バージョン
jQueryは、2つの系統のバージョンがあります。
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: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/16.jpg)
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を中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/17.jpg)
Page 17
圧縮版について
jQueryは、2つの形式で配布されています。
・非圧縮版の「Uncompressed」
→通常のソースコード
・圧縮版の「Minified」
→改行やスペースが除いたソースコード
※jQueryに限らず、JavaScriptのラブラリは、
このような形で提供されていることが多いです。
![Page 18: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/18.jpg)
Page 18
圧縮版について
圧縮版はフゔルサズが小さく、フゔルの取得が
早くなるのでリリース用として使用します。
読み難いため、デバッグには向いていません。
参考:最新バージョンのフゔルサズ
自作のコードも、ツールを使って簡単に圧縮可能。
http://minify.avivo.si/
形式 フゔイル名 フゔイルサイズ
圧縮版 jquery-1.11.1.min.js 93.5KB
非圧縮版 jquery-1.11.1.js 276KB
![Page 19: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/19.jpg)
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: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/20.jpg)
Page 20
JavaScript 歴史
JavaScriptに焦点を当てて、これまでの歴史を見てみます。
1995年 JavaScript登場。
2005年 Ajaxの普及。
2006年 jQueryが始めてリリースされる。
2006年頃 リッチクラゕント全盛期。
2010年 altJSの登場。
![Page 21: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/21.jpg)
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: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/22.jpg)
Page 22
altJS なぜ必要なのか?
では、なぜ必要なのでしょうか?
はじめからJavaScriptで開発すればいいように思います。
なぜ?
JavaScriptに求められる要求が高く、また増えた。
開発規模も大きくなっている。
jQueryで楽にはなったけどもっと簡単に出来ないか・・・
でも、JavaScriptだと、言語の仕様上難しい。
それなら、別の言語で簡単に書いて、
JavaScriptを生成してしまえ・・・
![Page 23: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/23.jpg)
Page 23
altJS 仕組み
[CoffeeScriptの場合]
1.CoffeeScriptを使ってコーデゖングする。
2.専用のコンパラを使って、ソースコードをコンパルする。
3.CoffeeScriptで書いたコードが、JavaScriptのソースコードに変換される。
以下のようにフゔルが変換される。
*.coffee ⇒ コンパル ⇒ *.js
引用元: http://html5experts.jp/clockmaker/2183/
![Page 24: jQueryを中心としたJavaScript](https://reader036.vdocuments.pub/reader036/viewer/2022081404/559859001a28abfc5a8b45ac/html5/thumbnails/24.jpg)
Page 24
代表的なaltJS
代表的なaltJSを挙げてみます。
CoffeeScript、TypeScript、Haxe、Dart、JSX、
特徴については以下のサトが詳しいです。
http://html5experts.jp/clockmaker/2183/
クラスの利用、シンプルな記述等メリットも多いですが、
採用するかどうかは、よく検討する必要があります。
逆に手間が増えることになりかねないからです。