コースを探す
サービス
初めてご利用になる方へ
コースを探す
サービス
初めてご利用になる方へ
みなさん、こんにちは！
富士通ラーニングメディアのWebアプリケーション開発などのコースを担当している橋本です。
さて、最近、書店で【 jQuery 】というキーワードがタイトルに入った書籍を見かける機会が多くなったのではないでしょうか。
また、Webアプリケーションを開発するにあたり、クライアントサイドを構成する技術として【 jQuery 】を利用することも少なくありません。
では、【 jQuery 】とは何でしょうか。
【 jQuery 】とはWebページにアニメーション効果や部分更新等の動きを付けられるオープンソースのJavaScriptライブラリです。
※ライブラリ：複数の処理をひとまとまりにした再利用可能なプログラムの部品群。
今回は、Webアプリケーション開発に携わる方にこれだけは知ってほしい！という【jQueryで実現できること】を後輩 小荒田との会話の中からご紹介していきます。
小荒田：
jQueryはJavaScriptライブラリ...というのは分かったのですが、jQueryの必要性がいまいち分からないのですが・・・。
橋本：
JavaScriptを利用してHTMLやCSSを操作し、Webページを部分的に更新する場合、DOM APIを使用して操作する必要があります。
その場合、ソースコードが冗長になり、かつJavaScriptの実装状況はブラウザによって異なるため、クロスブラウザ対策が必要です。
jQueryを利用するとそれらの問題をクリアできるため、効率的にWebアプリケーションを開発できます。
そもそも、昨今、Flash未対応のスマートデバイスが普及したことによりブラウザプラグインの使用が減ってきました。そこで、さまざまなデバイス上のブラウザで問題なく動作する、Webの標準技術のみでWebページを構成することが求められています。
Webの標準技術の一つがJavaScriptであり、JavaScriptライブラリのデファクトスタンダードがjQueryです。
小荒田：
HTMLやCSSを手軽に操作するために、皆さん、jQueryを使用しているんですね！
その他、jQueryではどんなことができるのでしょうか。
橋本：
jQueryでは前述のものも含め、JavaScriptでもお馴染みの以下3つのことができます。
JavaScriptと比較し、jQueryでは、これらの処理を簡潔な記述で実装できます。
では、HTMLを操作する場合を例に、JavaScriptとjQueryの実装例を比較してみましょう。
☆イメージ☆HTMLの操作をJavaScriptとjQueryで実装した場合の比較
小荒田：
これら3つのことができるとどのようなWebアプリケーションが開発できるのでしょうか。
橋本：
利用者にとって待機時間が短く直感的に操作しやすいWebアプリケーションを開発できます。
例えば同期通信系のWebアプリケーションは画面遷移等、サーバーからのレスポンスを完全に受信するのを待たないと次の操作を行えないため、利用者の待機時間が長くなりがちです。一方、非同期通信だと、サーバーからのレスポンスを完全に受信するのを待つ必要がないため、利用者の待機時間を減らせます。また、イベント処理に対応しているので、利用者のキーボード入力やマウスオーバー等のタイミングに合わせて処理を実行できます。
☆イメージ☆ ピザのオンライン注文システムの例
小荒田：
凄いですね！これってWebページの一部分が更新されただけで、画面遷移はしてないってことですよね？
橋本：
そうです！画面遷移をすると、Webページに必要な情報を全て読み込む必要があるため、それだけ利用者をお待たせすることになります。
Webページの部分更新を実現できれば、実際にサーバーから送信される情報は少しであり、同期通信と比較し、データ受信に時間がかかりません。
小荒田：
そういえば、僕が普段使用しているオンラインショッピングサイトもサクサクと快適に動いて使い易いから愛用し始めたんでした。
考えてみると、画面遷移による空白時間を防ぐことで、思考を妨げない工夫や、現在何の情報を入力しているのかが明確になって、利用者の直感的な操作が可能になりますよね。
こういうシステムを提供できれば、システムの利用者数も増えて売り上げもUPする等、ビジネスにも好影響を与える気がします。
それじゃあ、これってどんな仕組みになっているのでしょうか。
橋本：
簡単に説明すると、こんな感じでしょうか。↓↓
小荒田：
何か...難しそうですね。
橋本：
そんなことないですよ。
どんなに難しい処理を記述する場合も、これさえ知っておけば大丈夫です！
小荒田：
あ！意外とカンタン！
これで僕もNinjaみたいになれますね！
※Ninja：英語圏ではエキスパートやスーパープログラマの意味で使われる言葉。
では、最後に講師おすすめWebサイトのご紹介です。
☆コラムでご紹介したjQueryを使用したWebアプリケーションについて学ぶコースです。
実際に対話型Webアプリケーションを作成するなど、演習を交えて学習します。
より詳しくは次のコースで取り扱っております。ご興味のある方は、ぜひご確認ください。
☆そのほかのWebコンテンツ開発技術関連コースもご参考にしてください。
みなさまと講習会でお会いできるのを楽しみにしています！！
小荒田 倫人（こあらた みちと）
C#,VB.NET等と、HTML,CSS,JavaScript等を組み合わせたWebアプリケーション開発コースを担当。
また、社内サイトの運用管理を担当し、周囲のメンバーから頼られ、相談されることもしばしば。当社期待のホープ。
学生時代から趣味としているダンスはプロ級。
橋本 亜希（はしもと あき）
コーポレート部門、研修プロマネ部門での業務経験を経て、現在はJava,PHP,C#,VB.NET等と、HTML,CSS,JavaScript等を組み合わせたWebアプリケーション開発コースを担当。
休日はオシャレなカフェや雑貨屋さんを新規開拓し、キラキラしたものやネコ系動物に癒されている。けれど、一番心ときめくものはドラゴン○ール。
(2015/03/19)
