2013/10/17

WEB屋なら知っておきたい!JavaScriptでできる13のこと

WEB屋なら知っておきたい!JavaScriptで出来る13のコト

プログラミングの勉強を始めようと思っている方や、プログラミングに疎い方だと、プログラミングに対して、

「何でも出来るイメージなのはわかるけど,具体的には何が出来るのかよくわからない。」

そんな風に思っている方が多いと思います。
そんな方にJavaScriptを使ってプログラミングをすることで実現できる13のコトを紹介したいと思います。

目次

そもそもJavaScriptって?

Javascriptとは

オブジェクト指向のスクリプト言語であることを特徴とする。 主にウェブブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられる。

JavaScript - Wikipedia

難しく書かれていますが、単純に言うと、

Webページを作成するときに、演出を入れたり、ユーザーの入力に応じた処理をしたり、様々なコトができる!

ということになります。

言葉で説明するより、見て頂いた方がわかりやすいと思うので、動作サンプルやJavaScriptを使用したWebサイトを紹介しながら説明していきます。

JavaScriptでできること

演算

まずプログラミングを修得する上で、避けては通れないのがこの演算です。単純な四則演算のほか、三角関数や円周率等を使用したり、年齢を算出したり、日数を割り出したりなど、さまざまな用途で使用します。

マウス等のイベント処理

ユーザーの入力によって処理を行うものの中で、これが最も多いでしょう。
クリックやマウスオーバー、Webページそのものロード時など、その他様々なタイミングで処理を行わせることができます。

サムネイル画像をクリックすると大きい画像が表示されるようなものから、メニュー項目をクリックすると下の階層のメニューが開くようなナビゲーションまで、このようなイベント処理を行っています。

演算とマウスクリックのイベントを合わせたサンプルがありますのでクリックしてみてください.

Cookieの管理

サーバと通信する場合に、ログインするユーザー情報や閲覧情報、購入した商品の情報等をブラウザ(クライアント側)に保存させる際にCookieを使用します。これにより、ユーザーごとにカスタマイズされたサイトを表示させることが出来ます。このCookieもJavaScriptで扱うことが出来ます。
ショッピングサイトをはじめ、様々なWebサイトで使用されています。

Cookieの書込と読込のサンプルです。押すとmessageという項目が書き込まれます。

DOMを使用した処理

DOM(Document Object Model)を使用することで、HTML文をツリー構造のように扱うことができます。
これを上記のイベント処理等と組み合わせて使用することで、わざわざ別ページを開くといったページの遷移をすることなく、サイト内にコンテンツを挿入したり、書き換えたり、削除することが出来ます。


この文章が書き換わります。

Google Mapの表示

もはや地図といえば右に出るものはいないと思えるほどあちこちのサイトに埋め込まれるようになったGoogleMapですが、もちろんこれもJavaScriptで扱えるようになります。

jQueryプラグインを使った処理

よく使う機能や様々なブラウザに対応するために用意されたライブラリがjQueryライブラリです。これを利用することで、コードの記述を簡略化することが出来ます。
さらに、このライブラリを拡張するために様々なプラグインが作成されています。本サイトトップページのスライドショーをはじめ、様々なサイトの各所で使用しています。

「jQueryプラグインまとめ集」NAVERまとめ

HTML5等のAPIを併用して出来るコト

canvas要素を使った表現

HTML5から導入された新要素であるcanvasを使用することで、「3次元グラフィックを2次元平面上に投影する」ということが可能になりました。 ですが、この処理は非常に高度な演算を必要とするため、ライブラリを使用して行います。

ボタンをクリックすると3Dの正方形が表示されます。

ここでは正方形が回転するだけの3D表示ですが、
「aquarium」webglsamples)というような、美麗なグラフィックもこれらによって制作されています。

ファイル操作

ファイル名や種類の取得、各種ファイルの読込、ディスクの使用状況、ファイルの作成などなど、様々なファイルを操作することが出来ます。

ボタンをクリックすると、ディスクの使用状況を取得します。

オーディオ・映像の再生

HTML5のaudio要素やvideo要素を使用することで、オーディオファイルや映像ファイルを扱うことが出来ます。オーディオプレーヤーやムービープレーヤーをWebページに埋め込むことができるので、サイト内のコンテンツを充実させることができます。

詳しい解説はこちらを参考にして下さい。
「プラグインは要らない!音声/動画対応したHTML5 - <audio>/<video>要素」Think IT

位置情報の取得

HTML5のGeolocation APIを利用することで、位置情報を取得することが出来ます。
詳しくはこちらの記事にて解説しています。

HTML5新機能Geolocation APIで位置情報を取得する方法

スタイルシートの取得・設定

JavaScriptを使ってスタイルシートを設定することが出来ます。動的に要素のスタイルを変化させたい場合などに利用できます。

ボタンをクリックすると、見出しの色が変化します。

ここの色が変わります。

ドラッグ&ドロップ

ドラッグ&ドロップのAPIを使用することで、要素をドラッグ&ドロップすることが出来るようになりました。
こちらも、詳しくはこちらの記事にて解説しています。

HTML5新API、強化されたドラッグ&ドロップについて!

Ajax

Ajaxという、PHPとJavaScriptを組み合わせた技術を使うことによって、ページの遷移をせずにコンテンツを変化させることが出来ます。
こちらも、リンク先の記事で解説しています。

Ajaxを使ってwebサイトの性能をアップさせよう!

まとめ

JavaScriptを使うことでなんでも出来るということがわかって頂けたかと思います。これらを応用したり組み合わせたりすることで、思いもよらない新しいものが出来上がったりします。

少しでも興味がわいたアナタ!プログラミングを始めてみてはいかがでしょうか。