第1章 JavaScript導入ガイド

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

2009年8月4日

JavaScriptの概要

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

スマートフォンを含めた様々なブラウザ上で動作しますが、ブラウザの種類やバージョンによって仕様や挙動に違いがあるため、すべてのブラウザで同じように動作させるのが難しくなっています。最近ではjQuery(ジェイクエリー)といったライブラリや、様々なJavaScriptフレームワークが用意されており、ブラウザやバージョンの違いによる挙動の違いをそれほど意識せずに書けるようになっています。

jQuery

JavaScriptのライブラリやフレームワークで最も知名度の高いのがjQueryです。jQueryはブラウザ間の仕様の違いを吸収し、HTML要素にを操作するための機能を数多く用意しています。JavaScriptライブラリのデファクトスタンダードと言えるほど普及しており、日本語のリファレンスや事例集などの情報も豊富です。

ECMAScript

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

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

JavaScriptの機能

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

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

JavaScriptの歴史

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

JavaScriptを使ってみる

JavaScriptはとても簡単に始められます。必要なものは、Webブラウザとテキストを編集するエディタぐらいです。具体的な説明は後にして、まずは Hello world とブラウザに出力する方法を紹介します。

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

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

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

ここでは文字列を扱いましたが、括弧内は文字列でも変数または関数でもかまいません。文字列を扱うときはダブルクォーテーション(")、もしくはシングルクォーテーション(')で囲む必要もあります。

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

Hello world

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

デベロッパー ツール

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

モダンブラウザのほとんどにはHTMLの要素やCSSをブラウザ上で変更したり、モバイルのエミュレートしたりといった開発用のツールが用意されています。
JavaScriptの開発はどのブラウザを使っても良いのですが、ここではGoogle Chromeのデベロッパーツールの使い方を紹介します。

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

devtool_cap

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

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

devtool_cap_console01

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

devtool_cap_console02

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

HTMLファイルから出力した文字列を確認する

今度はHTMLファイルからログ出力を行い、それをコンソールから確認してみましょう。 Hello worldで使ったHTMLでも良いので、SCRIPT要素内を次のように記述します。

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

するとブラウザの表示画面ないには何も出力されませんが、コンソールに Hello world という文字が出力されているはずです。

devtool_cap_console03

ログ出力以外に、エラーやインフォメーションの出力なども可能です。

console.error("Hello world");
console.info("Hello world");

devtool_cap_console04

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

Comment

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

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

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

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

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

コメントを残す

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

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