2冊目 クライアントサイドJavaScriptのポイント

今回はクライアントサイドJavaScriptを使用する上で抑えておきたいポイントを解説します。

目次

• [1] Ajax(エイジャックス)
• [2] クロスブラウザ
• [3] JavaScriptライブラリ
• [4] HTML5 API
• [5] 控えめなJavaScript
• [6] 更新履歴

[1] Ajax(エイジャックス)

クライアントJavaScriptで有名なのは、やはりAjaxです。
Webページを再読み込みしなくてもデータをやり取りし処理ができます。
Ajaxの代表としてよく紹介されているのは、Googleマップが有名です。
Ajaxの呼び方は様々あるようですが、ここでは「エイジャックス」と呼ぶことにします。

[2] クロスブラウザ

クライアントJavaScriptには、知っておかねばならない最大の問題(課題)が存在します。
それは、Webブラウザ間の互換性の問題です。
あるブラウザでは、正しく動作しても、他のブラウザで見た時、正しく動作しない
JavaScript以外にも実はCSSでも同様な現象があります
これは、各ブラウザに搭載されているエンジンの解釈の違いによるものです。
このWebブラウザ同士の動作の違いをなくす技術のことを「クロスブラウザ」といいます。
主なブラウザと各JavaScriptエンジンは以下のようになっています
ブラウザのバージョンによっては別の名前が付いている場合があるので参考程度で

• Safari - JavaScriptCore(Nitro)
• Internet Explorer - JScript
• Opera - Futhark , Charakan
• Fire Fox - SpiderMonky
• Google Chrome - V8

[3] JavaScriptライブラリ

C言語や、Java言語でもあるように、JavaScriptにもライブラリがあります。
Ajax関連、ファイルサイズの削減、ユーザーインタフェースの実装、クロスブラウザ等様々なものがあります。
ライブラリの使用する方法を理解する必要がありますがJavaScriptを簡潔に書けるという利点があります。
実際の開発ではこのライブラリを使用して行うことが多いため、抑えておいたほうが良いでしょう。
調べてみればわかりますが、相当な数のライブラリが存在しています。
代表的なものをまとめてみました。以下のようなものが有名です

jQuery

最も有名なJavaScriptライブラリです。プラグインも豊富でまず抑えておく必要があるライブラリです。

prototype.js

ブラウザの依存、DOM操作が簡易になるライブラリです。

YUI(Yahoo User Interface Library)

ユーザーインタフェース系のライブラリです。

[4] HTML5 API

これを使うことにより、HTML+JS+CSSで本格的な開発が可能となります。
HTML5 APIを使用するに当たって注意する点は使用できるブラウザと使えないブラウザがあることです。
HTML5 APIと呼ばれている機能は主にいかのようなものがあります。

WebStorage

データをブラウザ側に蓄積する仕組みです。キーとバリューの組み合わせで保存します。

Geo Location

位置情報を取得する仕組みです。

Web Sockets

HTTPをベースとしてクライアントとサーバー間で、双方向通信をする仕組みです。

Web Worker

JavaScriptをバックグラウンドで動作させる仕組みです。

[5] 控えめなJavaScript

クライアントサイドJavaScript時の開発方針として控えめなJavaScriptというのがあります。
これは以下のような３つの概念の事を指します。

HTMLとJSは分離する

HTMLは内容を書くもの、JSは動作を書くもの、CSSは表現を書くものというわけです。
そのため、分離をすることで読みやすさの向上が期待できます。

互換性を維持する

Webブラウザによって動作が違いますが、その問題が起こったとしても正しく動作することをさします。

アクセサビリティを低下させないこと

JSを組み込んだことによって、アクセサビリティを向上させるためなのに
逆に低下させてしまっては意味がありません。

[6] 更新履歴

Tweet

コメント[0] トラックバック[0] 2014年05月27日

コメントの投稿

名前

URL

ログイン情報を記憶

コメント (a,ul,ol,li,strong,emタグが使えます)

Captcha:

画像の中に見える文字を入力してください。

トラックバックURL

http://www.isl.ne.jp/cgi-bin/mt/mt-tb.cgi/1858