JavaScriptの役割

今回は、CSS3と共に「HTML5」という言葉で一括りにされている事も多いJavascriptについて書いてみます。

JavaScriptとは、オブジェクト指向のスクリプト言語で、主にWebブラウザに実装され、動的なWebサイト構築や、リッチなアプリケーション、コンテンツなど高度なユーザインタフェースの開発に用いられることは皆さんご存知かと思います。
では、具体的にどのような役割を担っているのでしょうか。

■JavaScriptの役割
JavaScriptを使うと、ユーザインタラクションを監視してそれに反応したり、コンテンツを動的に読み込んだり、様々なAPIで端末固有の機能にアクセスしたりと言ったことが可能となります。
HTML、CSS、JavaScriptそれぞれの仕事としては、データそのものはHTMLコードに記述し、CSSでデータの視覚的要素を定義、JavaScriptで振る舞いを実装する、というそれぞれに役割分担がされているのです。

HTML5では、グラフィックス描画や動画・音楽の再生制御、データの保存、現在地情報の取得などJavaScript から追加できる機能が多く追加されました。ユーザーがプラグインを必要としないで動画を再生できるvideo要素、描画が可能なCanvas要素などJavaScriptからシンプルに扱う事が出来るようになり、HTML5以前ではWeb技術のみでは難しかったインタラクティブなコンテンツ制作が可能となりました。
また、昨今のスマートフォンブームの裏側で、スマートフォン向けアプリの開発が盛況ですが、以前アプリの開発と言えば、JavaやObject-Cを使うのが一般的でした。しかしHTML5をはじめ新しいWebの技術の台頭、モダンブラウザの普及によってネイティブな言語を使わずにWebの技術だけでアプリを作るという動きが活発になってきました。
このように今後ますます活用の場が増えるJavaScriptです。

■たくさんのライブラリがあるJavaScript
JavaScriptには多くのライブラリやフレームワークが提供されています。ライブラリ及びフレームワークのおかげで、JavaScriptが格段に習得しやすくなりました。これらをうまく利用することで、作業時間や技術検証の時間を短縮しながらインタラクティブなWebアプリを作成することが出来るわけです。機能によっては未対応のブラウザもあり、利用する際には確認が必要ですが利用価値は非常に高いとされています。
※ライブラリとは、イチからプログラムを書かなくてもよく使う機能が部品化されてダウンロードできるようになっているものです。

【jQuery】
http://jquery.com/
言わずと知れたjQuery。JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリです。多くのプラグインが公開されており、現在最も人気があるライブラリですから利用している方も多いと思います。シェアが高いので、解説サイトや書籍なども多くあり習得しやすいのも人気の理由のひとつです。
特徴としては、CSSに近い記述方法であり、非常に短いコードで済むので、比較的簡単に習得できると言われています。

参考)http://jquer.in/
JQueryのプラグインを紹介するサイトです。

ゲーム分野では数多くの開発用のフレームワークが登場しており、JavaScriptのライブラリーや情報をまとめているJSwikiによると80以上ものライブラリーが存在し、開発者はどのゲームエンジンを選べばいいのか判断が難しい状況とも言われています。
ゲーム用のライブラリを2点ご紹介します。

【Arctic.js】
http://denadev.github.io/Arctic.js/
DeNAが開発したゲームエンジンです。スマートフォン向けブラウザゲームのインタラクティブなアクションゲーム操作や、複雑なアニメーション表現を支援するJavaScriptです。「Arctic.js」を用いてJavaScriptのコーディングを行うことで、短期間かつ一度の開発でAndroidとiOSの様々なスマートフォンデバイスへ高品質なゲームを構築することが可能です。
また、DeNAが開発したという事で、ドキュメントや資料が日本語で読める事も大きなメリットです。

「Arctic.js」には以下の特徴があります。
・豊富なアニメーション作成支援機能
・表示ツリー、イベント伝播モデル
・ActionScript3.0と近いAPI による、Flash 開発経験者の学習負担軽減
・各種スマートフォンOSの断片化を吸収し、開発工数を大幅に削減

「Mobage」に提供されている「住み着き妖精セトルリン」「海賊トレジャー」「ガンダムロワイヤル」で使用されているそうです。

【Almight】
http://almight.jp/
ノベルゲーム・アドベンチャーゲーム用のゲームエンジンで、プログラムの知識が無くても素材を組み合わせる事でゲームを作成する事が出来ます。
ノベルゲーム・アドベンチャーゲームによく使われる機能を標準で搭載していいて、セーブ・ロード画面、環境設定から、選択肢の表示と分岐など。パラメータを少し編集すれば、CGモードや回想モードも実装出来ます。これらをプログラミング知識不要で、ゲームを作ることが出来ます。ゲームの開発に必要なものは、テキストエディタとブラウザのみ。ゲームエンジンの利用も、商用・非商用問わずに無料です。

上記のようなフレームワーク以外に、カヤックが運営している「jsdo.it」は、Webデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのための、コードコミュニティで、コードがWeb上に保存、作品として公開されています。

【jsdo.it】
http://jsdo.it/
共有されているコードをアレンジして、最先端のテクニックを手に入れることができます。
jsdo.itから2点印象に残ったものをご紹介します。

http://jsdo.it/os0x/4ObQ
クリックするたびに、画面がはじけるような演出がかっこいい!
JSだけでこんなにリッチな作品が!

http://jsdo.it/Biske/e36O
一瞬、「これ動画!?」と思ってしまうほどつくり込まれたアニメーション。
個人的には、東京モード学園のCMっぽいと思いました。

今回、JavaScriptについて調べてみて、いくつかのサイトや書籍にあったのですが、「JavaScriptはあくまで効果や振る舞いを実装するためのものであり、Webサイトはあくまでユーザーに情報を伝えるためのもの、という事を忘れてはならない」と。スマートデバイスの普及で、様々な場所から閲覧する人もいるでしょう、読み込みがうまくいかず情報が読み取れないという事が無いよう考慮すべきだという事でした。
伝えるべき情報はしっかりHTMLで記述し、JavaScriptで様々なエフェクト効果を実装する、という役割分担が必要という事ですね。

以前は敷居の高かったアプリ開発、HTML5やJavaScriptの技術向上により取り組みやすくなり、今後もユーザーを楽しませてくれるWebサービスやアプリが生まれるのが楽しみです。