JavaScriptの基本



JavaScriptとは

 JavaScriptは名前はJavaと似ていますが、Javaとは直接関係ありません。でも、文法はJava (JavaはC言語に似せて作ってあるのでC言語に似ていると言ったほうが正確だが) に似ています。

 JavaScriptは最初、Netscape Navaigator (Firefoxの先祖) に実装された言語で、ブラウザ上で簡単な処理ができるように開発されました。その後、いろいろ改良が進み、ブラウザでできることはJavaScriptでもたいていできるようになってきています。

 その後、Netscape Navaigatorだけでなく、多くのブラウザに実装されてブラウザ上で動作する事実上の標準言語となっています。


ブラウザの中だけでないJavaScript

 もともとはブラウザの中から生まれたJavaScriptですが、現在はブラウザの外でも動作しています。例えば、node.jsと呼ばれるJavaScriptですが、LinuxやWindows上で動作します。MicrosoftのJavaScriptの実装であるJScriptも他の言語と同じようにWindows上で動作します。


JavaScriptはどこに書くか?

 JavaScriptはHTMLの中で下のような場所に書きます。

  1. <script>タグの中
  2. <script>タグのsrc属性で指定した外部ファイルの中
  3. href属性イベント属性(例えばonclick)の中

 一般的には<script>タグの中に書きます。ただ、これだとブラウザの「ページのソースを表示」メニューなどでJavaScriptのソースが見れてしまうので、あまり見られたくない場合には<link>タグを使って外部ファイルに書きます。そうでない場合でも、共通ライブラリ的なものは外部ファイルに書いたほうが便利です。3.のhref属性やイベント属性の中に書くのは、イベントハンドラを呼び出すなど短いコードです。ここに長いコードを書くと非常に見づらいので。

1. <script>タグの中に書く場合の例

<script>
function check() {
  ...
}
</script>

2. <script>タグのsrc属性で指定した外部ファイルを指定する例

<script src="test.js"></script>

3. href属性やイベント属性の中に書く場合の例

<a href="javascript:alert('test');"></a>
<button type="button" onlick="javascript:alert('test');">Click</button>

JavaScriptでできること

 ブラウザ内で動作するJavaScriptは、ブラウザ内のオブジェクトの操作ができます。つまり、ブラウザができること、HTML/CSSができる(主に表示)ことはだいたいJavaScriptでできます。一方、できないことも多いです。まず、ファイルへのアクセスができません。つまりパソコン内に保存してあるファイルの読み書きができません。当然、ブラウザの外のオブジェクト(ファイルも含みます)へのアクセスは一切できません。
 ということで、一般のアプリケーションを作ることはできません。あくまで、ブラウザ内のオブジェクトの操作だけが可能です。

 ただ、サーバサイドで動作するJavaScript (node.js) をインストールすれば、JavaScriptでファイルを含むOS内のオブジェクトを操作できるようになります。しかし、これは別の JavaScript なので、逆にブラウザ内のオブジェクトの操作はできません。


JavaScriptを何に使うのか

 よくあるのが、ユーザが入力したデータのチェックとか、環境に応じて、画面の表示を変えたりとかです。最近では、Ajaxと言ってサーバと通信してサーバ側のデータを取ってきて表示したり、逆にユーザが入力したデータを送ったりとかもJavaScriptで行います。あと、Canvasを使った描画などもありますね。


JavaScriptを使う上での留意事項

オブジェクトを理解する

 JavaScriptが操作できるのはオブジェクトです。具体的には、ページやタグもすべてオブジェクトのひとつになります。どんなオブジェクトがあるか、親オブジェクトと子の関係、オブジェクトの生成と消滅タイミングなどを理解しておく必要があります。
 例えば、オブジェクトがまだ生成されていないのに、そのオブジェクトを使おうとすると null が返されて操作が失敗したりします。

 オブジェクトの操作を簡単に行うためのライブラリとして jQuery がよく利用されています。


非同期であることに注意する

 JavaScriptで何かを操作してもリアルタイムに結果が返されるとは限りません。結果は「コールバック」と呼ばれる方法で返されることがよくあります。特にAjaxを使う場合は、基本的に動作は非同期になります。非同期とは操作を行ってもそれはただのトリガであって、結果は別に返されるということです。

 単純な問題なら、気を付けることもできますが、大きなプログラムだと訳が分からなくなるので、注意する必要があります。このような問題を解決するため、async.js などのライブラリもあります。また、Ajaxの操作を簡単にするため、jQuery がよく利用されます。


大きなプログラムはわかりづらくなる

 Javaなどでは巨大なプログラムが作られますが、JavaScriptは元々、ブラウザ内のちょっとした処理を行うために作られた言語なので、巨大なプログラムを作るのには向いていません。それでも、最近ではJavaScriptで大きなプログラムが作られるようになってきており、気を付けないと非常に見にくく保守性の悪いプログラムができてしまいます。

 このような問題に対応するため、CoffeeScriptなどがあります。CoffeeScriptのソースはJavaScriptより見やすく短いソースになります。そして、そのソースはJavaScriptに変換可能です。


JavaScriptのデバッグ

 古いブラウザ(例えばIE6)にはないですが、最近のブラウザにはデバッガが付属しています。普通、F12キーを押すと起動するようになっています。Firefoxではデバッガがアドオンになっているので、Firebugというアドオンをインストールする必要があります。

 

JavaScriptが扱うもの

プリミティブ値

 プリミティブとは基本的なデータ(値)で、他のデータはこれらの組み合わせになります。プリミティブ値には次のものがあります。


オブジェクト

 JavaScriptのオブジェクトとしては、配列 (Array)、日付時刻 (Date) 、オブジェクト (Object) があります。(現在は非標準ですが、WeakMap, Map, Set, TypedArrayがあります。)

 連想配列や構造体はオブジェクトの一種として作成します。

 ブラウザに実装されたJavaScriptではHTML DOM (Document Object Model) で定義されたオブジェクトやブラウザをオブジェクトとみなしブラウザオブジェクトがあります。

 ユーザが定義するオブジェクトもあります。これは function で作ったり、リテラルとして定義したりして作成できます。

JavaScriptの入出力

 Javaなどの言語では、通常、「標準出力」、「標準入力」などが使えます。JavaScriptはブラウザ内で動作するので、このようなものはありません。(ただし、node.jsのようにブラウザ外で動作するJavaScriptには存在します)

 まず、出力ですが、以下のどれかのようにして文字列を表示します。

一方、入力ですが、以下の方法が考えられます。

 

このページの先頭へ戻る