中級者向け 知識

【基本】Javascriptって何?

Javascript
この記事は約5分で読めます。

文中の説明画像をクリックすると拡大します。

Pocket

JavaScriptって何?

JavaScript(ジャバスクリプト)とはブラウザ上で動作するプログラミング言語です。JS(ジェイエス)と略されることもあります。

Webサイトは基本的にHTMLとCSSで構成されますが、そこへ動きのある仕掛けや、サーバーとの連携などの機能を追加するためにJavaScriptが使われます。

Webエンジニアの間ではもはや共通言語と言って良いほど普及した言語であり、多くのプログラマーに使われています。

よく似た名前の言語に「Java(ジャバ)」という言語がありますが、全く別の言語ですので、混同しないようにしてください。

JavaScriptの使いどころ

JavaScriptは現在、クライアントサイドからサーバーサイドまで、そしてスマホアプリの分野でも使われています。

具体的にJavaScriptがどのような分野で使われているのか、使いどころを紹介します。

ブラウザ上で動くアニメーション

Webサイトにあるコンテンツスライダーアコーディオンメニューのように、動きのあるページにJavaScriptが使われています。

これはHTMLを構成しているDOM(Document Object Model:HTMLのツリー上の構造)をJavaScriptでリアルタイムに操作することで実現できます。

入力フォームのデータチェック

お問い合わせフォームなどのデータ入力のチェックに、JavaScriptが使われています。

例えば、カタカナのみを受け付ける名前入力フォームに漢字が含まれていたらNGを返したり、電話番号の入力フォームに数字以外の文字が含まれていたらNGを返したりといった具合です。

このような処理はセキュリティの観点からはサーバーサイドで行う方が安全ですが、JavaScriptによるチェックを設けることで、サーバーに負荷をかけずに入力のチェックができるというメリットがあります。

サーバーとの非同期通信(Ajax)

JavaScriptはクライアントサイドで動作するプログラムですが、Ajax(エイジャックス)という技術を使う事で、サーバーにあるプログラムと連携して処理を行う事ができます。

Ajaxとは「Asynchronous JavaScript + XML」の略語です。JavaScriptとXMLという技術を使い、サーバーと非同期通信を行いながらWebサイトのデータを操作する技術のことです。

非同期通信とはデータ通信の方式の一つで、クライアントからサーバーへデータのリクエストをした際に発生する待ち時間にもクライアントで別の操作を行う事ができる通信方式です。

Ajaxを有名にしたサービスにGoogleマップがあげられます。Googleマップではブラウザ上で地図をドラッグした際、特に待ち時間なしで新しい場所の地図を表示させることができます。

Ajax登場以前のJavaScriptは、ブラウザのステータスバーに特定の文字列を表示させたり、ポップアップウィンドウの広告を表示させたり、あくまでもブラウザ上で完結する処理ばかりが行われていました。しかしAjaxの登場でJavaScriptを使ったプログラミングのプロダクトはがらっと変わりました。

それが先ほど紹介したGoogleマップやGoogleサジェストといったサービスの登場です。これらのサービスはまたたく間に話題となり、JavaScriptの新しい可能性を示すきっかけとなりました。

サーバーで動作するJavaScript

JavaScriptは、クライアントサイドだけでなくサーバー上で動作するものもあります。

代表的なものは「node.js」です。JavaScriptでサーバーサイドの開発ができれば、エンジニアが新しくサーバーサイドの言語や開発環境を勉強する必要がなくなるという理由でnode.jsは普及してきました。

サーバーをnode.jsで構築するメリットとして、何万台もの同時接続のあるサーバーの処理を1台の物理マシンで行うことができます。メッセージアプリなどサーバーサイドでリアルタイム処理が必要なサービスもnode.jsが得意とする分野です。

node.jsは急速に普及してきていますが、弱点もあります。それは一般的なレンタルサーバーではnode.jsを使えるところは少なく、基本的にはVPSを用意して自分でnode.jsをセットアップする作業が必要な点です。そのため使いこなすにはそれなりの知識が必要です。

Webサーバーの基礎知識は、以下のページを参考にしてください。

【基本】Webサーバーって何?
サーバーとは、複数のユーザーやプログラム(クライアント)にサービスを提供するコンピューターのことです。Webサーバーとは、Webブラウザに対してHTMLや画像などの表示を提供するプログラムおよびそのプログラムが動くサーバーコンピュータです。

フレームワークによる大規模開発が可能

JavaScriptにはいくつかのフレームワークがあります。

フレームワークとは、プログラミングを効率良く行うための機能をパッケージにしたもので、プログラムのためのプログラムといったところです。

普及しているプログラミング言語には、それぞれ定番と呼ばれるフレームワークがある事が多いです。

プログラミングでは、フレームワークを使用することで、論理的な設計やバグの少ないプログラミングを実現することが可能です。特に大規模なシステム開発を行う際にフレームワークは威力を発揮します。

2018年現在、JavaScriptにおける3大フレームワークとして有名なのが「Angular」「React」「Vue.js」です。それぞれを簡単に紹介します。

Angular(アンギュラー)は、Googleが開発したフレームワークです。この3つの中では最も機能が豊富なフレームワークですが、使いこなすためには覚えることが多く、学習コストが高いのが特徴です。

React(リアクト)は、Facebookが開発したフレームワークです。データの表示に特化したフレームワークで、Angularより導入は楽です。React Nativeと呼ばれるスマートフォンアプリを開発できるフレームワークも普及しています。

Vue.js(ビュージェイエス)は、Angularの開発チームだったスタッフが独立して開発したフレームワークです。AngularとReactのいいとこ取りのフレームワークで最近人気が出てきました。

 

まとめ

  • JavaScriptは、ブラウザ上で動作する言語。
  • Ajaxの登場以降、JavaScriptの使用目的は大きく変わった。
  • JavaScriptは、多彩なフレームワークの活用で大規模開発に対応できる。
Pocket