プログラミング

Javascriptでできることとは？アプリ開発からWebサイトのアレンジまで

プログラミングの知識がなくても、「JavaScript」という言語を聞いたことのある人は多いのではないでしょうか。広くWebサイトやアプリ開発に用いられているため、極めて身近なプログラミング言語です。そのため、初心者が最初に学ぶのに適した言語といえます。

この記事では、JavaScriptでどんなことができるのか、どんな特徴があるのかといった基本についてご説明します。プログラミングに少しでも興味がありましたら、ぜひこの記事で基本を頭に入れたうえでJavaScriptの学習を始めていただければと思います。

JavaScriptの基礎知識

JavaScriptの基礎知識として、主な特徴についてご説明します。特にJavaとJavaScriptを混同する人が多いので、両者の違いについてもお伝えします。

JavaScriptとは？

JavaScriptとは、Internet ExplorerやFirefox、Chromeなどといったインターネットブラウザ上で動くプログラミング言語です。Webサイトのアニメーションやポップアップウィンドウ（注意を促すなどの際にWebサイトに出てくる別のウィンドウ）など、さまざまな機能をJavaScriptで実現できます。

テキストや画像などの情報を記述したHTMLファイルに、JavaScriptのコードを直接記述することができます。また、JavaScriptだけ別ファイルに記述し、HTMLファイルに読み込ませることでも実行が可能です。Webサイトだけでなくアプリでも広く使われていることを踏まえると、JavaScriptは非常に使用頻度の高いプログラミング言語の一つといえます。

なお、JavaScriptとよく似た名前を持つプログラミング言語にJavaがあります。名前は似ていますが、JavaScriptとは別物で言語としての関連性もあまりありません。JavaScriptを身に付けてもJavaができるようにはなりませんので、注意してください。

JavaScriptの主な特徴

JavaScriptの大きな特徴は、初心者でも習得しやすいことです。多くのプログラミング言語の場合、最初に開発環境を手持ちのパソコンへインストールする必要があります。また「コンパイラ」と呼ばれる変換プログラムのインストールも必要です。インストールに失敗したり時間がかかったりして、学習する前の段階でつまずいてしまう初学者も少なくありません。

その点JavaScriptは、大半のパソコンに最初から備わっているインターネットブラウザとテキストエディタ（メモ帳でもOKです）だけで実行できます。

またJavaScriptは「オブジェクト指向」と呼ばれる考え方に基づいており、感覚的に分かりやすいとされています。実行も容易なので、「できるようになった」という実感を持ちやすいのも特徴です。

JavaScriptは、さまざまな環境（OS）で利用できます。本来はOSごとに開発環境が異なるため、すべてのOSにアプリケーションを対応させることは難しいのですが、JavaScriptの場合は「クロスプラットフォーム開発」と呼ばれる開発手法を用いることでさまざまなOSに対応可能となっています。スマホアプリの開発も、HTMLとJavaScriptのスキルさえあれば可能です。

JavaScriptでできること【Webサイト・商品開発】

JavaScriptがWebサイトやアプリに広く使われていることを説明しました。次に、より具体的にJavaScriptが実現する機能についてお伝えします。

Webサイト

JavaScriptが最も多く使われているのはWebサイトでしょう。アニメーションやポップアップウィンドウの表示、Googleマップの表示など、JavaScriptを活用するとWebサイトで複雑な動きを実現できます。

JavaScriptで実装できる機能は、「動的要素」「イベントの取得」「リアルタイム通信」の3つに大きく分けられます。これらについては、後で詳しくご説明します。

アプリケーション

Webサイト以外に、WebやスマートフォンのアプリにもJavaScriptが使われています。ただしJavaScriptだけではなく、RubyやPythonなどほかのプログラミング言語と併用されることがほとんどです。

Webアプリの場合は、一般的にフロントサイドとサーバーサイドに分かれてプログラミングを進めていきます。フロントサイドとは要するにユーザーから見える部分を指しており、「フロントエンド」あるいは単に「フロント」などと呼ばれるケースもあります。

フロントサイドの開発は、アプリの使いやすさやユーザーインターフェイス（情報の表示形式や入力方法など操作感を良くするための仕組み）の向上を目的としています。メニュー機能、画面の切り替え、入力内容のチェック機能など、見た目の部分をJavaScriptで開発することができます。

サーバーサイドとは、ユーザーからは見えない部分であるサーバーとの通信をコントロールする機能を指しています。本来JavaScriptはフロントサイドに使われることが多かったのですが、Node.jsというプラットフォームによってサーバーサイドでも実行できるようになりました。さらにNode.jsで動くフレームワークとして、Meteor.jsやExpressなどが挙げられます。

ゲーム

Webやアプリのゲームでも、JavaScriptは頻繁に活用されています。基本的にアプリの開発の仕組みは同じです。画像の表示方法、ルール設定などによってゲームの制作が可能となっています。

最近では、初学者でもオリジナルのゲームを開発できるようにJavaScriptの「ライブラリ」が多く配信されています。ライブラリとはプログラムのかたまりをまとめたようなものです。ライブラリを使うことで、初学者も効率的にゲームを開発できるようになっています。

ライブラリの使い方に関する書籍やインターネット上のドキュメントも数多くありますので、そちらを参考にするとより手軽に開発を進められるでしょう。

JavaScriptでできること【Webサイトのアレンジ】

JavaScriptではWebサイトの機能を数多く付け加えることができます。どんな機能を付け加えられるか、3つに分けてご説明します。

Webサイトへの動的要素の追加

アニメーションや特殊効果など、Webサイトにおける動的要素はJavaScriptによって実装されているケースが圧倒的に多いです。ここでの「動的」とは、Webサイトが表示されてから特定の条件に応じて色を変更させたり効果を追加したりすることを指しています。

JavaScriptを記述することで、HTMLやCSSをいろいろと操作できます。これによってWebサイトの利便性を上げられるため、広くJavaScriptは使われているわけです。なおHTMLについては、「プログラミング初心者におすすめのHTMLとは？関連言語と基本タグ」を参照してください。

イベントの取得

チェックボックスにチェックを入れると次のページへ進むためのボタンを押せるWebページを見たことはないでしょうか。このように、ユーザーの操作に応じた処理の追加もJavaScriptで行います。

ユーザーの操作の例として、マウスのドラッグ＆ドロップ、クリック、キーボード入力、フォームの送信などが挙げられます。こうした操作に応じて、自動計算やポップアップウィンドウの表示のようなちょっとした機能を追加できます。たとえば「クリックしたら自動計算する」「チェックしたらボタンを表示する」など、組み合わせ次第で数多くの機能を実装できます。

リアルタイム通信の実現

JavaScriptを使うと、「非同期通信」と呼ばれるリアルタイム通信を実現できます。一般的に、Webサイトへアクセスするとインターネットブラウザからサーバーへ通信を行い、サーバーから処理した結果を受け取ります。サーバーからデータを受け取ることでWebサイトが表示されるため、アクセスしてから表示までに時間がかかるわけです。

しかし非同期通信を使うと、サーバーの応答を待たずにリアルタイムで処理を行うことができます。最も有名なのが「Googleマップ」です。Googleマップ上では、ページ遷移させなくても移動した分だけ新たなマップが表示されます。これはサーバーとの非同期通信によって、リアルタイムでマップを更新しているからこそ可能となっているのです。