jQueryを中心としたJavaScript
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

jQueryを中心としたJavaScript

  • 107 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post
    Be the first to comment
    Be the first to like this

Views

Total Views
107
On Slideshare
105
From Embeds
2
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 2

https://twitter.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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/ クラスの利用、シンプルな記述等メリットも多いですが、 採用するかどうかは、よく検討する必要があります。 逆に手間が増えることになりかねないからです。