第1章 JavaScript導入ガイド

はじめてのプログラミング

2009年8月4日

JavaScriptの概要

JavaScriptはChromeやInternet Exploler、Safariといったブラウザ上で実行されるスクリプト言語です。HTMLに直接書き込むか、外部ファイルとして読み込むことにより、ページ内の要素にアクセスしてアニメーションや効果を加えたり、インタラクティブな処理を行うことができます。
他の言語と比べると、JavaScriptはプログラムの初心者でも比較的簡単に扱えるように設計されています。

JavaScriptはクロスプラットフォームに対応した言語なので、スマートフォンを含めたさまざまなブラウザ上で動作しますが、ブラウザの種類やバージョンによって仕様や挙動に違いがあります。これだとブラウザごとの処理が必要になり、余計な分岐処理だらけになってしまいます。しかし、現在ではjQuery(ジェイクエリー)といったライブラリや、様々なJavaScriptフレームワークが用意されており、ブラウザやバージョンの違いによる挙動の違いをそれほど意識せずに書けるようになっています。

用語
スクリプト言語
機械語への翻訳(コンパイル)が不要な簡易的な言語です。
クロスプラットフォーム
異なるOSやデバイス上で動作するプログラム(ソフトウエア)です。
jQuery
JavaScriptのライブラリやフレームワークで最も知名度の高いのがjQueryです。jQueryはブラウザ間の仕様の違いを吸収し、HTML要素にを操作するための機能を数多く用意しています。JavaScriptライブラリのデファクトスタンダードと言えるほど普及しており、日本語のリファレンスや事例集などの情報も豊富です。

ECMAScript

JavaScriptはブラウザベンダーによる独自の拡張が多く、互換性が低くなっていました。そこで、ECMAインターナショナルという基準団体が中心となり、JavaScriptを標準化したECMAScriptという言語仕様を定義しました。同じECMAScriptのバージョンをサポートするブラウザは概ね同じ動作が期待でき、2012年以降の主要ブラウザ、IE、Chrome、Firefox、Safari、Operaは ECMAScript 5.1 を完全にサポートしています。
※実装の際の機能の相違や独自拡張などもあるので、各ブラウザ毎に動作が違う、エラーが発生するといった問題が解消されていません。
2017年の時点では、仕様の最新バージョンは ECMAScript 6.0 となっています。

JavaScriptはこのECMAScriptの仕様にもとづいた言語のひとつで、他のECMAScriptを実装している言語としてはActionScriptやJScript.NETなどがあります。
なお、DOM (Document Object Model) は言語に依存しない規則で、ECMAScriptの仕様の一部ではありません。

JavaScriptの機能

JavaScriptの大まかな機能、特徴を紹介しましょう。

HTMLを操作可能
JavaScriptは、HTMLの部品(リストボックスやラジオボタンなど)にアクセスすることができます。
クライアント実行
JavaScriptは一度ブラウザに読み込まれた後は、そのクライアントコンピュータ上で処理されます。サーバーに負荷をかけることなく、高レスポンスで実行されます。
インタープリタ言語
JavaScriptはスクリプト言語なのでコンパイルする必要がなく、HTMLファイルの中に直接記述する事ができます。
変数の型が柔軟
JavaScriptでは変数を意識しなくてもつかうことができ、数値間の型変換は自動的に行われ柔軟性に富んでいます。
シンプルなオブジェクトベース
オブジェクト指向をとり入れた言語仕様ですが、クラスやクラスの継承といった概念はありません。オブジェクトはあらかじめ用意されたものを操作します。
用語
変数
変数は、様々な値を代入できる文字列です。
文字列や数値などの値の種類です。
オブジェクト指向
プログラミング手法のひとつで、データをオブジェクトとして扱います。

JavaScriptの歴史

JavaScriptとは、ネットスケープ社とサン・マイクロシステムズ社とが共同で開発したスクリプト言語で、その前身はネットスケープ社が当社ブラウザ用に考案していたLiveScriptです。JavaScriptはNetscapeNavigetor2.0以降に標準で搭載されることになり、今ではほとんどすべてのブラウザに標準で搭載されています。

JavaScriptを使ってみる

JavaScriptはとても簡単に始められます。必要なものは、Webブラウザとテキストを編集するエディタぐらいです。JavaScriptは書いて保存してすぐにブラウザで確認できる言語なので、理解できなくてもとにかく気軽にプログラムを実行して結果を確認してください。プログラムを書くことと結果を確認することで理解は自然に深まります。

それでは、具体的な説明は後にして、まずは「Hello world」とブラウザに出力する方法を紹介します。

まずは任意のフォルダに、index.htmlという名前のテキストファイルを作成します。お使いのエディタで開き、下記内容をコピー&ペーストしてください。
ファイルを保存したらWebブラウザで開きます。

<html>
<body>
<script>
document.write("Hello world")
</script>
</body>
</html>

このサンプルですが、document.write(...) という命令文があります。documentは日本語で文書という意味ですが、ここでの document はかっこの中にある文字列を文書というオブジェクトとして扱うということです。write は書くという意味ですから、 document.write(...) を意訳すると「指定した文字列を文書に書き込む」ということになります。

ここでは文字列を指定しましたが、かっこ内は以降の章で紹介する変数や関数といったものでもかまいません。文字列を扱うときはダブルクォーテーション( " )、もしくはシングルクォーテーション( ' )で囲む必要があります。

ブラウザには下記文言が表示されます。

Hello world

JavaScriptはブラウザ上で動作するので、開発時はHTML、もしくはJavaScriptファイルを編集し、ブラウザをリロードして実行確認をするという流れの繰り返しになります。

デベロッパー ツール

デベロッパー ツールの使い方

モダンブラウザ(Web標準に準拠したブラウザ)のほとんどにはHTMLの要素やCSSをブラウザ上で変更したり、モバイルのエミュレートしたりといった開発用のツールが用意されています。中でも、JavaScriptを勉強する上で便利なのがコンソールパネルです。JavaScriptの命令文を入力して[Enter]キーを押すと、即時で結果が出力されます。

この講座では様々なコードを使って説明していますが、そのほとんどはコンソールで確認できます。プログラムは読むだけではなく、実際に実行して結果を確認することが重要なので、なるべくコンソールに命令文を入力して結果を確認してみてください。
ここではGoogle Chromeのデベロッパーツールの使い方を紹介します。

デベロッパーツールの表示

Google Chromeがアクティブになった状態で[F12]キー、もしくは[Ctrl]+[Shift]+[i]キーを押すと、デベロッパーツールが表示されます。

デベロッパーツールが提供する機能の中でもJavaScriptに深く関係するのがコンソールです。
コンソールはJavaScriptの命令を直接実行したり、JavaScriptから出力されたエラーやインフォメーションなどを確認することができます。

コンソールパネルの表示

デベロッパーツールの上部にある[Elements]、[Console]、[Sources]といったメニューから[Console]をクリックするとコンソールパネルが表示されます。

コンソールパネルの使い方

文頭の > となっている行にJavaScriptの命令文を入力し[Enter]キーを押すと、命令文が実行されます。たとえば 1+1 と入力し、[Enter]キーを押してみましょう。すると 2 という計算結果が表示されます。

複数行の命令文を実行したい場合、[Alt]+[Enter]キーで改行できます。たとえば a=1+1 で[Alt]+[Enter]キーを押し、次の行に a+1 と入力して[Enter]キーを押すと合計の 3 が表示されます。

console.log()の使い方

今度はHTMLファイルからログ出力を行い、それをコンソールから確認してみましょう。

console.log()を使った出力

任意のHTMLファイルを作成し、次のように記述します。

<script>
console.log("Hello world");
</script>

保存したフィアルをブラウザで開くと、ブラウザの表示画面内には何も出力されませんが、コンソールに「Hello world」という文字が出力されているはずです。

ログ出力以外に、エラーや警告などの出力も可能です。今度はChromeのコンソールパネルを使います。

console.log("ログ");
console.debug("デバッグ");
console.info("情報");
console.warn("警告");
console.error("エラー");

出力結果は次のようになります。

エラーと警告の場合はパネルの右上にそれぞれマークが表示されます。

開発時にパネルの右上にマークがある場合は、アイコンをクリックするとコンソールが開くので、そこでエラーや警告の内容を確認し、修正しましょう。

ここで使った console.log() は、コンソールにメッセージを出力するために用意されたオブジェクトです。オブジェクトについては後ほど詳しく説明しますが、JavaScriptはこのようにあらかじめ便利に使える機能がいくつも用意されています。

Comment

  1. こんにちは。
    こちらの記事に従ってChromeの開発ツールを使ってみました。
    記事内にてAlt+EnterでConsoleでの複数改行が出来るとあったのですが、バージョン 51.0.2704.103 m (64-bit)では出来ず、試してみた結果Shift+Enterになっている模様です。

  2. 独自ドメインでECサイトを立ち上げる準備をしております。
    HTMLもCSSも始めたばかりで、javascriptも無料でUPされておりましたので、
    利用させて頂きます。
    どうぞ宜しくお願いします

  3. google maps apiを使ってwebページを作っています。
    そのためにjavascriptを勉強したいです。

  4. 無料でJavaSxriptを学べて嬉しいです。

    C言語経験者です。C言語と、似てると書いてあってほっとしました。
    宜しくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!