ブログ

技術

JSってなんの略?

最近、朝の5時に自然と目が覚めるようになりました。
マークアップ担当の鈴木です。

さて、先週更新分の記事内でも触れられていましたが、
私たちが普段目にしているWEBサイトの多くは、HTMLとCSSというもので作られています。

これらはサイト制作の上で欠かすことのできないものですが、もうひとつ重要なものがあります。
それが「JavaScript(じゃばすくりぷと 以下JS)」です。

一般的には、「JS」なんて略されたりしていますが、これって一体なんなんでしょう?
今回は、そんなJSについて、簡単に紹介をさせていただこうとか思います。

WEBサイトにおけるJSの役割

HTMLはテキストや画像に対して見出しや段落など全体の構造をつくるためのもの、
CSSはそれらの見た目を装飾するためのものです。

これだけでも十分、見栄えのいいWEBサイトを作ることはできるのですが、
大概は何かしらの動きや機能がつけられていることが多いです。

CSSだけで実装できてしまうものもあるのですが、より高度な機能(コンテンツの動的な変更や操作など)については、現状、HTMLやCSSだけでは、できないものもあります。

そういった機能を付加するために、WEB制作の現場で多く使われているのが、
プログラミング言語であるJSです。

WEBサイト上でのJSの使用例

では、JSがWEBサイト上でどのように使われているか、実際にサンプルを使って解説していきたいと思います。

画像やコンテンツが順番に入れ替わるスライドショー(カルーセル)や、

ある箇所をクリックすると内容が表示されるもの(アコーディオン、タブメニュー)、

クリックで開く
コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ
クリックで開く
コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ
コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ
クリックで開く
コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ
コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ
コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ
タブボックス1
タブボックス2
タブボックス3

マウスカーソルを乗せた時に画像やテキストが変わるもの、クリックでアラート文を表示させるもの、

マウスを乗せると色が変わります。

あとはボタンをクリックするとサイト全体の文字サイズが変わるものなど、

現在のフォントサイズはです。

ボタンクリックでフォントサイズが変わります。

みなさんもどこかで似たようなものを一度は見たことがあるのではないでしょうか?

これらはあくまで一例ですが、動きや変化のあるコンテンツで使用されていることが多いです。

その他にも、閲覧しているブラウザやデバイスの判定をしたり、

デバイス確認

ブラウザ確認

メールフォームの入力内容のバリデーション(正否判定)など、

メールアドレスを入力してみてください。

JSは様々な場面で使用されています。

JSはWEBサイトの必需品

2000年代前半まではセキュリティ上の懸念などから、あまりポジティブな見方をされないことも多かったJSですが、GoogleがJSを用いたサービス(Googleマップなど)を積極的に展開したことや、Ajaxという技術が注目を集めたことなどもあり、今やJSは、WEBに欠かせない必須のものとなっています。

JSをより使いやすくする「ライブラリ」

jQuery ロゴ
jQueryロゴ

そんなJSには、用途によって様々なライブラリというものがあります。
ざっくりと説明すると、JSをより扱いやすく、簡単な記述で書くことができるようになるものです。

そのなかでも最もWEB制作の現場で使われているのが、「jQuery(じぇいくえりー)」でしょう。

プログラムの専門的な知識がなくても、HTML+CSSの知識があれば簡単に扱うことができるため、
jQueryは多くのWEB制作者の支持を受けるライブラリとなっています。

LightBoxのサンプル

↑画像クリックで拡大します。

また、豊富なプラグイン(機能拡張)が公開されており、これを使えばより手軽に高度な機能を実装することができます。

クリックで写真が拡大して表示される「Lightbox」などは、みなさんも一度は見たことがあるのではないでしょうか?

あんなこといいな、できたらいいな

以上が、JSでできることの、ほんの一部の一部です。
WEBサイトにプログラムを組み合わせれば、工夫次第でもっといろいろなことができるようになります。

「あんなことができないかな、こんな機能をつけられないかな?」
そんなご要望がございましたら、ぜひAICSまでお気軽にご相談ください

ではでは。

Pagetop