JavaScriptとは

JavaScriptとは、HTMLやCSSと組み合わせて、Webブラウザー内で動作するスクリプト言語(簡易プログラミング言語)。Javaと名前は似ているが、全く異なるプログラミング言語である。HTML内にプログラムを埋め込むことで、Webページに様々な機能を付加できる為、HTMLやCSSでは表現できない動きに応じたものを作ることができる。

また、Webサイトの開発現場においては、特別な開発環境の構築が必要なく、すぐにプログラムを書いてテストすることができるのが特徴。
JavaScriptのおかげで、以前は文字の羅列を表示するだけのwebサイトが、現在ではさまざまな動きやコンテンツを含んだサイトが作成できるようになっている。例えば、スライダーやスクロールエフェクト、動画やチャットなどが挙げられる。

JavaScriptはブラウザに実行環境が搭載されていることから、主にWebサイトやWebアプリ・サービスなどを開発する際によく利用されている。クライアントサイドではHTML、CSSなどの言語が、サーバーサイドではPHPやJavaなどの言語が使われいるが、JavaScriptはクライアントサイドでもサーバーサイドでもどちらでも利用可能なプログラミング言語である。

JavaScriptの言語的認知度、人気

現在、JavaScriptは大企業や有名なサービスなどで利用されており、開発者の間で最も人気のあるプログラミング言語の1つである。

StackOverflowが、エンジニア向けに仕事に関するアンケートを実施したところ、フルスタックエンジニア(クライアントサイドとサーバーサイドの両方に従事している開発者)の85%は、仕事でJavaScriptを使っていると回答している。Node.jsのようなサーバーサイドのテクノロジーが発展したことで、JavaScriptはバックエンドのエンジニアの間でも、人気となっている。StackOverflowの担当編集者によると、「JavaScriptは地球上で最も広く使われているプログラミング言語」とのことである。

しかし、開発者の間でも人気の高く、大企業や有名なサービスなどで利用され多くのWebサイトにも使用されているJavaScriptだが、Webページを構成する全てのオブジェクトを操作でき、実行される場面や効果が多いため、多くの人はJavaScriptが使用されていることに気づいていない。

JavaScriptの実行される一般的な場面

JavaScriptは、Webサイトを構成する全てのオブジェクトを操作できるため、様々なことを実行することができる。基本的にHTMLやCSSだけでもWebサイトは制作できるが、JavaScriptでできることとして、Webサイトに動きをつけられることが挙げられる。一般的な使用場面としては例えば次のようなものがある。

  • ポップアップウィンドウ
  • マウスのドラッグ&ドロップ
  • ドロワーメニュー
  • メイン画像などのスライド
  • ソートや検索機能
  • フォームの送信
  • 画像読み込みのとき
  • Webページの読み込み、切り替え時
  • クリック、ダブルクリック時
  • マウスを乗せたり離した時、クリックした時
  • マウスを動かしている時

などが挙げられる。

JavaScriptを学習し始めて、多くの人が最初に学ぶのが注意を促す場合に用いられる「ポップアップウィンドウ」である。例えば、サイトを移動するときに出てくる「このサイトを離れますか 行った変更が保存されない可能性があります」のような注意である。JavaScriptはページを移動しない状態で確認ができるほとんど唯一の手段である。こういった確認、注意するポップアップは様々な場面でとてもよく使われている。

Webサイトに動きをつけたり、クリックをしたら文字の色が変わったり、動的にしてユーザーにわかりやすいサイトにする事ができるのがJavaScriptの魅力。Webサイトの利便性を上げれば、ビジネスにおいても大きな効果が期待できるだろう。また、簡単なアニメーションだと「CSS3」を使えば表現できる場合もあるが、「スライドショー」「ECサイトなどにおける料金の計算」など、複雑な動作についてはJavaScriptがないと作れない。世の中にあるWebサイトのほとんどでJavaScriptが使われている。

JavaScriptでできることできないこと

JavaScriptでできることの代表的なことは①「動きのあるWebサイトを作ること」②「非同期通信が可能」が挙げられる。

  1. 「動きのあるWebサイトを作ること」
    現在、ほとんどのWebサイトでJavaScriptが使われており、JavaScriptを使うのはサイト上で動的な処理を実行するためである。例えば、目立たせてクリックさせたいボタンにアニメーションを付ける事で、ユーザーの目を引き、印象を与えることができたり、どんなことをすればよいのか明確になるため、ユーザビリティを高めることになる。また、ユーザの操作に応じて自由に処理を追加できるため、様々な機能を追加することができ、ユーザーにとっても様々な体験ができるようになる。
  2. 「非同期通信ができる」

    通常は、サーバと通信する際にサーバからの応答を待ち、タイムラグが発生する。しかし、非同期通信ならば、サーバの応答を待たずにスピーディーに処理を行うことができる。例えば、GoogleMapは、地図を動かすと動かした差分だけスピーディーに画面が更新されている。

    JavaScriptでできないことは、WebブラウザでJavaScriptを実行する場合には、セキュリティ上の制約でJavaScriptからクライアントマシン上のファイルを読み込んだり、書き出したりすることはできない。これは、ウイルスやスパイウェアのような悪意のあるプログラムをJavaScriptでうっかり実行して、クライアントPCに被害を与えたり、情報を盗み見られたりしないようにするための制限である。

JavaScriptの強み

JavaScriptの強みは「即時性」である。他の言語では、サーバーとのやりとりが発生する為、データの受け取りや判別などに時間を必要としタイムラグが発生する。だが、JavaScriptの場合は「サーバー」を介さず「クライアントサイド」で処理を行う為、他の言語のようなタイムラグが発生せずに処理を行うことができる。

これにより、これまではPHPやRuby、Javaプログラミングでサーバーサイドが実装され、JavaScriptはブラウザ側の処理をしてきたが、近年ではWebアプリケーションなどではサーバーサイドでもJavaScriptを用いて開発する利点が認識され、Webシステム開発が行われることも多くなってきた。サーバーサイドJavaSciptとしていろいろな実行環境が登場した中でも、現在最も利用されているのはNode.jsである。大きなメリットはJavaScriptで記述されるので、サーバーサイドとクライアントサイドが同じ言語であるということ。つまり、言語が同じであるため同じ技術者がサーバーとクライアント両方を開発しやすくなり、サーバーサイドとクライアントサイドのすり合わせなどが少なくなり、開発工数が減りコストを押さえやすくなる。

JavaScriptの歴史

JavaScriptというプログラム言語は、1995年に登場したWebの世界では古い技術である。
当時は文字の羅列を表示するだけで静的だったWebページに動的な機能を持たせ、機能を向上させる目的で、Netscape社のブレンダン・アイク(Brendan Eich)によって開発される。当初はLiveScriptと呼ばれていた。当時は、Sun Microsystems社が開発した「プログラミングJava」というものが注目されており、JavaScriptは、プログラミングJavaから名前を取って、LiveScriptからJavaScriptへと名前を変更した。

ブラウザの間ではJavaScriptの権利を巡って競争が激しかったが、セキュリティに関する脆弱性やブラウザに負荷をかけるブラウザクラッシャーなどが簡単に作れてしまうなど次々と指摘され、ブラウザのJavascript機能をOFFにする人も続出し、世間のJavaScriptに対する評価はあまり高くなかった。1996年同じ頃に開発された動作が軽く当時爽快なアニメーションを利用することができるFlashの方が、世間からの評価は高かった。

その後、だんだんWebサイトでのアニメーションなどの動的な要素を入れる事が広がり、2005年頃には世間でもJavaScriptは多く使用され、動的な要素をwebサイトに取り入れるのに、必要不可欠な存在として評価されるようになる。同年、Googleが「Ajax」の技術を利用した「Googleマップ」を発表し「Ajax」が話題となり、JavaScriptの評価が上がるきっかけとなった。この「Ajax」とは、JavaScriptで非同期通信を利用することで、サーバからデータを取得して、動的にページ内容を書き換える技術の総称である。

2010年代に入ると、JavaScriptはますます発展し、動きが遅いという欠点があったが、ITコンパイラを駆使することで、その問題を解決。現在では、サーバーサイドのJavaScriptも多く開発され、その中でもNode.jsは開発当初から最も注目を集めてきた。それまでのWebアプリでは、Webサーバー側のプログラムはPHPやJavaなどの言語で開発し、クライアント側は別でJavaScriptで開発することが一般的だったが、Node.jsのおかげでサーバー側もクライアント側も同じJavaScriptによって開発する事が可能となった。

JavaScriptの学習方法

JavaScriptに限らず、プログラム言語の学習は参考書などを1回読めばすぐ理解できるものではなく、頭で理解した後、何度も練習をして学んでいく、言わばスポーツのようなものである。参考書などをじっくり読むというより、何度も実際にパソコンに打ち込みながら学習する事で身についていくものである。

具体的には、①「構文を理解する」②「簡単な処理を実装する」③「アプリケーションを作る」ことをオススメする。

  1. 「構文を理解する」
    まずは、変数や配列などの基本的な構文について学ぼう。参考書やサイトを読むだけでなく、必ず自分で入力して実行していくこと。例の通りに入力して動作を確認したら、アレンジして再度実行する、といった方法がおすすめ。自分が思っているものと違う結果になったら、なぜそうなるのか考え何度も実行していく事が大切である。
  2. 「簡単な処理を実装してみる」
    基本的な構文がある程度理解できたら、どこがどのように作用しているのか考えながら構文を組み合わせて簡単な処理を実装してみよう。何か自分が面白い思えるものがいいかもしれない。
  3. 「実際にアプリケーションを作る」
    一通りJavaScriptでのプログラミングができるようになったら、HTMLとCSSを使ったブラウザアプリケーションを作ってみよう。
    また「プログラミング学習サイト」と検索すると、下記のような学習サイトがたくさん出てくるので、自分にあったサイトを見つけ活用するのもオススメである。プログラミング学習サイトには、スライド形式のサイト、ゲーム感覚で学習できるサイト、動画で解説してくれるサイトなど様々な学習方法があり、自分の学習スタイルに合ったものを選ぶことができる。

また、JavaScriptは、インターネットとともに成長してきたため、HTMLやCSSと強く関連している。多くの場合、同時に使われるため、JavaScriptと一緒にHTMLやCSSの勉強もしておくべきである。

他の言語との違い-3言語程度と比較

  1. jQueryは、JavaScriptの使用頻度の高い機能や効果などをまとめ、使いやすくしたファイル(通称:ライブラリ)のことである。JavaScriptの複雑なプログラムの記述も、jQueryを使用する事で記述を減らす事ができる。jQueryを使用する事で、JavaScriptの技術や知識がなくても、様々な動きのあるWebページサイトを制作する事ができる。一般的にjQueryは単体で使用するのではなく、専用のプラグインと併用して使用する。また、jQueryは複数のブラウザの挙動の違いを吸収してくれるので、「別のブラウザでは崩れてしまう」などの問題が起こらない。
  2. Javaは、似たような名前だがJavaScriptと大きくちがう。
    • ・目的が違う
      Javaは「Write Once, Run Anywhare(一度プログラムを書けば、どんなハードウェアでも動作する)」ことを目指して開発。JavaScriptは、容易に開発できる手軽さと素早さを求めて開発。
    • ・文法が違う
      文法の違いとしては、Javaではデータ型というものを最初に固定で決める形式(静的型付)を取る。
      一方、JavaScriptではデータ型を適宜変更できる形式(動的型付)を取る。
Javaは、コンパイル(コンピュータが処理できる形に翻訳)が必要だが、JavaScriptはコンパイルが必要ない。
    • ・利用される分野が違う
      Javaは業務システムやTwitterなどのWebサービス、スマートフォン用(Android)向けアプリなどを開発。JavaScriptは、Webブラウザ上で色を変えたり、ポップアップ表示をさせるといった動きがあるWebページを開発する際に主に使用。
  3. Rubyは、パソコン上で動作させるためのコンパイラやVisual Studio、Eclipseのような開発環境を準備する必要だが、JavaScriptは「InternetExproler」や「GoogleChrome」といったブラウザと、あとはテキストエディタ(メモ帳)さえあれば実際に動かすことが可能である。普段見ているWebサービスの裏側の処理を行っているのがRubyの役割で、ユーザーが目に見える形で動きを作るのがJavaScriptの役割である。

関連ワード