JavaScriptとは？できること＆基本的な書き方も解説
Webサイトの管理や運営を行う場合、ITに関する基本的な知識を身に付けておくと、業務に役立つ可能性があります。JavaScriptの意味や活用方法は、Webエンジニアやコーダーではない方であっても押さえておきたい知識です。
この記事では、JavaScriptの概要、開発できるアプリケーションの例、JavaScriptの基本的な書き方について解説します。企業のホームページやオウンドメディアの管理・運営を担当する方は、ぜひ参考にしてください。
1.JavaScriptとは？
JavaScriptとは、Webブラウザ上で動作するプログラミング言語です。JavaScriptはサイト閲覧者のデバイス上で動作するため、クライアントサイド・スクリプトに分類されます。
近年は新しい技術の開発により、クライアントサイド・スクリプトの枠を超えたさまざまな機能が使えるようになりました。
1-1.JavaとJavaScriptの違い
JavaとJavaScriptは名前が似ているため混同されやすいものの、特徴や動作環境などが異なるプログラミング言語です。
Javaは「Sun Microsystems社」によって開発されています。Javaで書かれたプログラムを実行するためには、JVMと呼ばれるシステムが必要です。JVMがインストールされた環境なら、ハードウェアの種類を問わずJavaが動作します。ただし、Javaを実行する場合、ソースコードをコンピューターが理解できる形式に変換するコンパイルが必要です。
Javaは、業務用のソフトウェアやWeb関連サービスなど、大規模なシステムを実装するために利用されます。
一方、JavaScriptは「Netscape Communications社」によって開発されているプログラム言語です。もともとはLiveScriptとしてリリースされ、後からJavaScriptという名称に変更されました。
基本的に、JavaScriptはコンパイルを必要とせず、ソースコードのまま実行できます。そのため、JavaScriptはJavaと比較して手軽にシステム開発が可能です。
2.JavaScriptを使って開発できること4選
JavaScriptを使うと、Webサイトのテキストや画像などを動かしたり、ユーザー操作を受け付けたりできます。また、動的なWebサイトを制作するだけでなく、非同期通信の実装やアプリケーションの開発も可能です。
ここでは、JavaScriptを使って実現できることを4つ紹介します。
2-1.動きのあるWebデザイン
単にWebサイトを作るだけであれば、HTMLとCSSのみでコーディングが可能です。HTMLは見出しや段落などのマークアップ、CSSはフォントの種類や背景色といった装飾要素の指定に使われます。
ただし、HTMLとCSSだけで動的なコンテンツを作ることは困難です。JavaScriptを使うと、動きのあるWebデザインが可能となります。
JavaScriptを使って実装できる動的なコンテンツの例は、次の通りです。
・スライドショー
複数の画像が一定時間ごとに切り替わるスライドショーが作れます。単に横方向や縦方向にスライドするだけでなく、画像がゆっくりと透過して次の画像が現れるような表現も可能です。
・ポップアップウィンドウ
ユーザーに対してメッセージを伝えるためのポップアップウィンドウも作れます。許可されていない操作をユーザーが行った場合に、エラーメッセージなどを出すことが可能です。
・フォームの制御
フォームの必須項目が空欄の場合や入力形式が誤っている場合に、メッセージを表示するなどの制御ができます。
・計算機
JavaScriptでは、ユーザーが入力した情報に応じて見積り金額を表示する計算機などを作ることも可能です。
これらの動的なコンテンツは、JavaScriptを改良して作られたjQueryという言語でも実装できます。jQueryを使うと、JavaScriptよりも短くて簡単なコードで動的なコンテンツを作ることが可能です。
2-2.非同期通信
非同期通信やAjaxと呼ばれる技術により、地図検索などの外部サービスをWebサイト上に埋め込むことができます。Ajaxは「Asynchronous JavaScript＋HTML」の略語です。JavaScriptを用いて非同期処理を行う仕組みがAjaxと呼ばれます。
Ajaxで表示されたコンテンツは、ユーザーの操作に応じて任意のタイミングで更新することが可能です。同期通信と異なり、情報を更新するためにWebページ全体を再読み込みする必要がありません。
Ajaxで実装されている代表的なコンテンツとして、画面上で地図をスクロールできるサービスが挙げられます。また、ユーザーの操作に応じて表示される商品数が変化するECサイトなども、Ajaxが活用されているコンテンツの一例です。
2-3.スマホアプリ開発
JavaScriptはブラウザ上で動くコンテンツだけでなく、スマホアプリの開発にも使用されます。React Nativeと呼ばれるフレームワークが登場したことで、JavaScriptでスマホアプリを開発できるようになりました。
フレームワークとは、アプリ開発に必要な機能が一通り揃っている枠組みです。React Nativeは、iOSとAndroidの両方に対応したスマホアプリを作るフレームワークとして開発されました。
React Nativeの開発元はFacebookを運営するMeta社で、FacebookやInstagramのスマホアプリはReact Nativeで作られています。
React Nativeを使用するメリットは、端末のOSによってコードを書き分ける手間を最小限に抑えられることです。また、ホットリロードと呼ばれる機能があるためコード修正時にコンパイルし直す必要がなく、開発作業を効率化できます。
2-4.サーバーサイド・アプリケーション開発
サーバーサイド・アプリケーションとは、UNIX系のOSなどが搭載されたサーバー上で動くアプリケーションのことです。
通常、JavaScriptはユーザーの端末上で機能するプログラミング言語のため、サーバーサイド・アプリケーションは開発できません。ただし、Node.jsと呼ばれる実行環境を用いるとJavaScriptをサーバー上で動かせるようになります。
ユーザーからの質問に応答するチャットボットなどが、サーバーサイド・アプリケーションの例です。サーバー上で外部データをリアルタイムに処理するようなプログラムも、Node.jsの導入によりJavaScriptで作れるようになります。
3.JavaScriptの基本的な書き方
JavaScriptは、HTMLファイル内に直接書き込むか、外部ファイルを作ってHTMLで読み込むことで実行可能です。ここでは、JavaScriptの基本的な書き方について、2種類の方法で解説します。
・HTMLファイルに直接書き込む方法
HTMLファイルに直接書き込む場合は、JavaScriptのコードをbody閉じタグの直前に記述しましょう。HTMLファイルのサンプルコードは以下の通りです。
■HTMLファイル
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>alert("SampleMessage");</script>
</body>
</html>
上記コードをメモ帳などに入力し、HTMLファイルとして保存してからブラウザで開くと、JavaScriptが実行されます。SampleMessageと書かれたポップアップウィンドウが表示されていれば、JavaScriptの実行は成功です。
・外部ファイルを作って読み込む方法
外部ファイルを読み込む場合、まずは以下のようなコードを記述してtest.jsなどのファイル名で保存しましょう。
■JavaScriptファイル
alert(“SampleMessage”);
次に、HTMLファイルを以下のような内容で作成します。
■HTMLファイル
<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="test.js"></script>
</body>
</html>
これらのファイルを同じディレクトリに配置し、HTMLファイルをブラウザで開くと、JavaScriptコードの実行が可能です。
まとめ
JavaScriptを使用すると、動きのあるWebサイトを制作できるようになります。JavaScriptはJavaと名称が似ているものの、言語仕様や使い方が異なるプログラミング言語です。
ブラウザ上のコンテンツだけでなく、スマホアプリやサーバーサイド・アプリケーションもJavaScriptで開発できます。React NativeやNode.jsなどを用いると、JavaScriptをさまざまな環境で動かすことが可能です。
JavaScriptはHTMLファイル内に直接書き込むか、外部ファイルを作って読み込むことで実行できます。Webサイトの運営に携わる方は、ぜひこの記事で紹介したJavaScriptの基礎知識を参考にしてください。
KEYWORD
