JavaScriptとは？基本的な書き方や勉強方法～入門～

JavaScript（ジャバスクリプト）とは、Webサイトやシステムの開発に使われているプログラミング言語のこと。私たちが普段使っているスマホやパソコンで見るサイトの多くは、JavaScriptが使われて作られています。今回は、JavaScriptは具体的にどのような言語なのか、JavaScriptを使うとできること、基本的な記述方法、学習方法まで解説します。

JavaScriptとはブラウザを「動かす」ためのプログラム言語のこと。例えば、Webサイトを訪問したとき、ポップアップ画面やカルーセルのように、Webサイト上でアニメーションが動いているのを見たことがあるのではないでしょうか？あのようなブラウザが「動く」ために、指示を出しているプログラミング言語がJavaScriptなのです。また最近ではサーバーサイド、スマホアプリ、デスクトップアプリでも使われています。

JavaScriptの最大の特徴は、その高い汎用性。過去にはブラウザを動かすための言語はたくさんありましたが、現在主流となっているのは、このJavaScriptです。

JavaScriptはHTMLやCSSなど、他のプログラミング言語と組み合わせて使うことで、ブラウザ上でアニメーションを動作させることができますが、近年は、Node.js（ノードジェイエス）という、ブラウザ側だけでなくサーバー側でも動くJavaScriptも普及してきました。

また、JavaScript言語を使うための開発環境も充実してきました。iOSとAndroidアプリの両OSに対応したアプリが開発可能なクロスプラットフォーム開発環境であるAppcelerator（アップセラレーター）やMonaca（モナカ）、React Native（リアクトネイティブ）、Electron（エレクトロン）が登場。スマホアプリからデスクトップアプリまで、JavaScriptを使って開発できるようになりました。

さて、名前が似ているプログラミング言語に「Java（ジャバ）」という言語があります。

Javaは、JVM（Java Visual Machineの略）という仮想マシンの上で動くプログラミング言語のこと。Webサービス、システム開発、業務システムなどに利用されています。

Javaは、どのようなOSを使っていても、JVMが入っていなければ動作しません。また、実際に動かす際にはコンパイル（プログラミング言語をコンピュータが理解できる言語に変換すること）が必要です。

一方、JavaScriptは仮想マシンを使う必要はありません。また、コンパイルも基本的に不要です（現在主流になりつつある開発手法では一部コンパイルが必要になる場合もあります）。

つまり、ハードウエアに依存しないプログラムとして開発されたJavaと比較すると、JavaScriptは手軽に開発できることを重視して開発された言語といえます。

JavaScriptはネットスケープコミュニケーションズという企業で開発され、当初はLiveScriptという名称でした。当時世界的に人気が上昇していたJava（サン・マイクロシステムズが開発）と提携していたこともあり、のちに名称をJavaScriptに変更しました。このような言語が開発された背景から、2つの言語の名前は似ているのです。

その後、マイクロソフトのInternet Explorer3.0に搭載されるようになりJavaScriptは爆発的に普及するようになりました。

JavaScriptは、HTML、CSS、JavaScriptを使って、ユーザーが見る部分（フロントエンド）をプログラムします。HTMLはページ構造を記述、CSSはページの装飾を記述、JavaScriptはページの動的な処理を記述します。

JavaScriptで可能なWeb上の処理例

• カルーセルバナーの自動スクロール処理
• ポップアップウィンドウの表示処理
• 入力フォームの確認画面
• ブラウザの拡張機能全般（プラグイン）
• サムネイル画像をマウスオーバーすると、サムネイル枠の中で画像が大きくアニメーション表示される
• グローバルメニューへのオンマウスで下層メニューが表示される

また、JavaScriptが使われて開発されたサービスには次のようなものがあります。

JavaScriptが使われているWebサイトやサービス例

• Twitter
• ニコニコ動画
• Hulu
• Facebook

このように、JavaScriptは、WebサイトやWebサービス開発に使われ、その中でも、よりユーザーに近い部分（ユーザーが閲覧や操作をする場面）を開発するときに使われます。よって、システムエンジニアやフロントエンドエンジニアが使用することが多いでしょう。

それでは、具体的にJavaScriptの基本的な書き方をみてみましょう。

JavaScriptで記述する際には、HTMLファイルの中に書く方法と、HTMLファイルとは別のjsファイルを作って、HTMLに参照させるという方法があります。どちらの方法でも動きますが、最初はHTMLファイルの中に書き込む方法がおすすめです。

まず、HTMLファイルを作成します。デスクトップの分かりやすい場所に、テキストドキュメントを作ってください。デスクトップ画面で、右クリックをするとメニューが表示されるので、新規作成を選択、テキストドキュメントを選択してください。ファイル名は、仮にhelloとしておきます。

次に、テキストドキュメント内にHTMLファイルにコードを書き込んでいきましょう。

次ようなのコードを記述します。そのままコピーしても大丈夫です。

何が書かれているのかを詳しくみてみると、

というところがJavaScriptの部分です（そのほかの部分はHTMLの知識の範囲になるので省略します）。

<script>と</script>でJavaScriptの命令を挟むというのが書き方の基本です。""（ダブルクォーテーション）で挟まれた"Hello"の部分はプログラムではなく、文字列を表しています。

では、作成したファイルをHTML形式にして保存しましょう。名前をつけて保存をクリックし、ファイル形式を「テキストファイル」から、「すべてのファイル」にします。ファイル名の後ろに.htmlをつけて完成です。

デスクトップに戻り、右クリックで開きます。ブラウザを選択し、ファイルを開いてみましょう。

このようなポップアップが表示されればOKです。一番簡単なJavaScriptを使ったHTMLファイルができました。

次に、HTMLファイルとjsファイルを分けて作る方法をご紹介します。
最初に作ったhello.htmlをメモ帳などで開いてください。

の部分を、

に書き換えます。

このコードは、JavaScriptの部分をhello.jsというファイルを呼び出して実行するという意味です。

では、先ほどと同じ場所（デスクトップ）に、hello.jsを作成します。HTMLファイルを作成したのと同じ要領で、右クリック、新規作成、新しいテキストドキュメントを作成します。

と記述し、ファイル名をhello.jsとして保存します。

それでは、hello.htmlを先ほどと同じようにブラウザから開きましょう。

このようにポップアップが表示されればOKです。

JavaScriptを学べば、Webサイト構築のフロントエンドエンジニアとして開発に携わることができます。具体的には、企画設計されたWebサービスのデザインやサービス仕様を、実際にブラウザで表示させたり動作させたりすることを任されるようになるでしょう。

今回は、JavaScriptを使うとできることや記述方法、学習方法についてご紹介しました。JavaScriptは、WebサイトからWebアプリまで幅広く使われているプログラム言語。簡単なコードの記述から始めて、設計仕様やサービス内容で求められる動作を実現できるエンジニアを目指しましょう。

（2019年7月現在）