【初心者向け】JavaScriptとは？できることや活用例から学ぼう！

JavaScriptとは

JavaScript（ジャバスクリプト）は、ウェブアプリケーションを開発する際に利用されるスクリプト言語です。動的なウェブページの制作などに用いられています。

クライアントサイドで動作するスクリプト言語のため、ブラウザで行う処理を制御できます。サーバーサイドに干渉しない点が特徴です。

クライアントサイドは、ウェブブラウザなどユーザーから見える部分を担当しています。ユーザーの挙動をリクエストとして、処理を行うサーバーサイドに送信したり、サーバーサイドで行われた処理をユーザーに伝えたり役割を果たします。

サーバーサイドは、ユーザーからのリクエストをクライアントサイドのプログラムを通じて受け取り、リクエストの内容を解釈します。必要であればデータベースと連携してデータを参照し、レスポンスをクライアントサイドに送信する役割を果たす場所です。おもに動的な処理を担当しています。

また、JavaScriptはオブジェクト指向言語の中でプロトタイプベースに分類されます。

プロトタイプベースとは、オブジェクト指向言語のうちプロトタイプをベースとしてオブジェクトを取り扱うものです。クラスの具体例としてオブジェクトを生成するのではなく、既存のオブジェクトを複製したり複製への参照を持ったりすることですべてを委譲するオブジェクトを生成します。

JavaScriptとjQueryの違い

JavaScriptはプログラミング言語であるのに対し、jQueryはJavaScriptを用いてより簡単に開発を行えるように設計されたライブラリのことです。

『write less, do more』というコンセプトのもと、分量の少ないコードでリッチなユーザーインターフェースを実現することを目的としています。2019年現在主流となっているフラットデザインなどのシンプルなデザインに動きを持たせ、ユーザーが情報を理解しやすくする役割を担っています。

JavaScriptでできること

JavaScriptで実現できる代表的なことをご紹介します。

• ポップアップ

アラートを出すために用いられるウィンドウです。ページを遷移させることなく状態を伝えることができるため様々なサイトで広く利用されています。一方でユーザーが意図しないタイミングで広告を表示させクリックさせて収益を得るなど不正に利用される場合もあります。

• 検索、並び替え機能

データや表を扱うサイトの場合、検索機能やデータの並び替え機能が必要です。JavaScriptを利用することで簡単に機能を実装できます。DataTablesというライブラリがあるため利用すると効率的に実装できます。

• DataTables

HTMLのtableタグを計算可能にするためのライブラリで、表示件数の制限やページ遷移、検索、並び替え、フィルタなどの機能を実装できます。

• 非同期通信

ページを再読み込みすることなくリアルタイムで更新できる技術です。通常のウェブサイトはクライアントサイドのアクションをサーバーへ連携し、サーバーサイドで処理を行った後結果を受け取ったクライアントが、ユーザーインターフェース上に反映するという流れでページが表示されます。そのため読み込みまでに時間がかかることがありますが、非同期通信を用いることでサーバーの応答を持たずに処理ができるため、円滑にページの表示を行えます。

JavaScriptを使うメリット

JavaScriptを使うメリットには何があるでしょうか。

サーバーに負荷がかからない

JavaScriptはクライアントサイドのスクリプト言語であるため、ウェブサーバーに大量のアクセスがあった場合でもクライアントサイドの処理は影響を受けないためユーザーへの影響を抑えられます。

処理速度が速い

サーバーサイドで処理を行う場合、クライアントサイドからウェブサーバーにアクセスする必要があるため、処理に時間がかかります。また、ログインなどの入力項目の判定をサーバーサイドの言語で実装すると、判定するたびにウェブサーバーへアクセスする必要があるため、これも処理に時間がかかります。

クライアントサイドのスクリプトであるJavaScriptであればウェブブラウザ上入力項目の判定ができるため円滑に処理を行うことができます。

JavaScriptを使うデメリット

JavaScriptを使うデメリットも存在しますので、よく理解して使用するようにしましょう。

ソースコードを盗難される可能性

JavaScriptはクライアントサイドのスクリプトであるためウェブ上で誰でもソースコードの確認ができます。そのためソースコードを盗難される可能性があります。

挙動がブラウザに依存する

クライアントサイドのスクリプトであるため、ユーザーが利用するウェブブラウザによって挙動が異なります。そのため実装テストをする際、利用が考えられる複数のウェブブラウザで行う必要があります。

JavaScriptの活用例

SPA（Single Page Application）

1つのHTML上でJavaScriptを実行することで、ページ遷移をすることなくコンテンツの切り替えができます。SPAを利用することで、ブラウザの挙動に縛られない自由度の高いユーザーインターフェースを実装できます。

またウェブアプリケーションでありながら、オフラインでのページ閲覧やプッシュ通知、端末のホーム画面への追加などネイティブアプリケーションでしか実現できなかった機能を実装できます。

一方で、通常のウェブアプリケーションでは、ブラウザに処理させていた部分をJavaScriptで実装する必要があるため、工数がかかる点が懸念として挙げられます。また、JavaScriptのコード量が通常のウェブアプリケーションの実装と比べて、初期の読み込みに時間がかかる点がデメリットです。

SPAは滞在時間の長いサイトに向いています。写真や絵のギャラリーページや口コミサイトなどユーザーが同一のアクションを繰り返すサービスについてSPAを実装することでユーザービリティが向上することが期待されます。

PWA（Progressive Web Apps）

モバイル向けのウェブアプリケーションを、ネイティブのように挙動させる開発技術です。プッシュ通知や起動時の画面もネイティブアプリのように実現できます。

ネイティブアプリではないため、ユーザーはGoogle Play StoreやApp Storeなどの審査を受ける必要がなく、時間や費用のコストをかけることなくリリースできます。

また、ネイティブアプリケーションはOSに依存するため、それぞれのOS用にアプリケーションを開発する必要がありますが、PWAを導入したものはあくまでウェブアプリケーションであるためOSには依存しません。

ユーザーにとってもインストールする必要がないため負荷がかからないというメリットがあります。

Node.js

JavaScriptはクライアントサイドのスクリプト言語であるとお伝えしてきましたが、Node.jsはサーバーサイドのJavaScript環境です。クライアントサイドの開発においてJavaScriptが主流であるため、サーバーサイドも同じ言語で記述するのが効率的ではないかという発想のもと誕生しました。

メッセンジャー、チャットツールや共同編集アプリケーションなど、リアルタイム性の高いウェブサービスで活用されています。

クライアントサイドとサーバーサイドを常時接続し、データを保持し続け、ウェブブラウザに表示し続ける処理は難しく、サーバーサイドのスクリプトであるPHPなどを用いて実現しようとすると開発が複雑です。Node.jsであればそれらの機能をスムーズに実装できます。

また、同時アクセス数の多いサービスでマルチスレッドの処理を行う場面において、スムーズな挙動を実現するのにNode.jsは有用です。

React.js

ユーザーインターフェースのパーツを作るためのライブラリで、Facebookがオープンソースのソフトウェアとして公開しています。React.jsはコンポーネント志向の開発言語です。

コンポーネント指向とは、ユーザーインターフェースを部品化して再利用しやすくする設計手法です。複雑なユーザーインターフェースにおいてそれぞれの部品の状態をモニタリング、管理できるため、開発の自由度が上がります。

React.jsは開発の途中で導入される言語です。新しい機能を実装する際や機能を修正する際、既存のソースコードを書き換えることなく編集したい部分のみを、React.jsで開発できます。

Angular

Googleと個人、企業のコミュニティで、JavaScriptを用いて開発されたオープンソースのフレームワークです。

コンポーネント志向のフレームワークで、レイアウトを表すビュー、ビジネスロジック、コンポーネントを構成するメタ情報に分けて開発を行います。機能単位に実装を分離しやすいためチーム開発に向いており、コードレビューもしやすいフレームワークとされています。

非同期の処理や、モジュールを動的にロードする挙動などを搭載したライブラリで構成されており、ユーザービリティにも配慮した開発が行なえます。

おわりに

今回はJavaScriptの概要や利用するメリット、JavaScriptを用いて作られたライブラリやフレームワークについて解説しました。

ポップアップなどのデザインから非同期通信などのユーザーに見えない部分まで、JavaScriptによる開発で実現できます。2019年現在世界で広く利用されているJavaScriptは、これからも様々なフレームワークが考案され広く利用されていくでしょう。

この機会にJavaScriptの概要を理解し、ウェブサイトやサービスを開発する予定のある方々は利用できるように学習してみましょう。