|
Web デザインの基礎 |
JavaScript は Web ページにて複雑なことをできるようにするプログラミング言語です。 ちなみに、JavaScript は、 Web ページが読み込まれるたびに、更新されたコンテンツの定期表示や、インタラクティブな地図や、2D/3D グラフィックのアニメーションや、ビデオのスクロールなどを実行するために利用されています。
ブラウザにWeb を表示するにためには、HTML（Hypertext Markup Language）というマークアップ言語で記述されたhtml ファイルが必要です。HTML はプログラミング言語ではありません。マークアップ言語と言って、コンテンツの構造を決めるものです。 HTML は 要素（エレメント）の集まりでできています。その構造をDOM（Document Object Model）と言います。要素（エレメント）とは様々なコンテンツがどのように見えるか、またどのように動くかを表現するためにタグで囲まれたまとまりとして記述されます。タグは言葉や画像を表示したり、他のページに移動するハイパーリンクを作ったり、文字を斜体にしたり、大きくしたり小さくしたり、色々なことが出来ます。段落や見出しや表を定義したり、ページに画像や動画を入れたりします。
それ以外に、CSS というスタイリング用言語が必要です。CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。つまり HTML 文書の要素に選択的にスタイルを適用できます。 例えば背景とフォントの色を設定したり、複数カラムにコンテンツをレイアウトしたりします。
JavaScript (JS) は動的なウェブページの記述用途として主にクライアントサイドで使用されるプログラミング言語です。しかし、JavaScript と ブログラミング言語 Java とは異なります。"Java" と "JavaScript" のどちらも米国その他の国での Oracle の登録商標です。しかしながら、この2つのプログラミング言語はとても違う文法、セマンティクス、用法を持っています。
1996年11月、 JavaScript を工業規格にしようと Netscape 社は ECMA International とともに作業を始めました。その後、標準化された JavaScript は ECMAScript と呼ばれ、 ECMA-262 として仕様が規定されており、2018年6月には最新の第9版 (ES2018) が完成しました。JavaScript は動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるスクリプト言語です。オブジェクト指向言語と言えます。
HTML５で新しく登場したタグを使用すると、web画面に動画や音声を簡単に追加でき、canvas要素を使用するとインタラクティブな画面要素、例えば、ゲーム、アニメーション、グラフ作成、画像構築などを簡単に作成できます。こうしたプログラムを実装するために、GPU の処理能力を利用した高性能な２D/3Dコンピュータグラフィックスを作成するAPIとして WebGL が登場しました。現在の主要なブラウザは WebGL のサポートをしています。しかしながら、JavaScript から直接 WebGL を使用してプログラミングして、３Dアニメーションなどを表示させることは非常に複雑な作業です。JavaScript 3D ライブラリの Three.js を利用すると WebGL を介した３Dアニメーションが容易に作成できます。
このページでは、Three.js をスムーズに利用できる程度の能力を得るために必要な、JavaScript の基本的な使用法について説明します。HTML言語の詳しい知識を持っている必要はありませんが、入門的なタグの使用については理解する必要があります。HTML と CSSの簡単なチュートリアルをはじめに紹介します。JavaScriptの文法などの詳細なTutorialsについては、 mozilla.orgのJavascriptページを参照ください。（Last updated:2019/9/9)
HTML の簡単なTutorials |
最初に、HTML の記述に関する基本構造について復習しておきます。HTML は要素（エレメント）の集合体でできています。要素とは様々なコンテンツがどのように見えるか、またどのように動くかを表現するためにタグ(tag)で囲まれたまとまりです。HTML で必ず登場するタグは
<html> 〜 </html>
<meta> 〜 </meta>
<head> 〜 </head>
<style> 〜 </style>
<body> 〜 </body>
<script> 〜 </script>
<div> 〜 </div>
<nav> 〜 </nav>
<canvas> 〜 </canvas>
<article> 〜 </article>
<header> 〜 </header>
<footer> 〜 </footer>
<a> 〜 </a>
<p> 〜 </p>
<h1> 〜 </h1>
<h2> 〜 </h2>
<table> 〜 </table>
<tr> 〜 </tr>
<td> 〜 </td>
<ul> 〜 </ul>
<li> 〜 </li>
<code> 〜 </code>
<pre> 〜 </pre>
などです。各要素は<タグ名>で始まり</タグ名> で終わります。例外は、<!DOCTYPE html>タグ、 <meta> タグや画像の<img>タグなどです。以下に簡単な例を挙げます。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset="utf-8">
<title>テストページ</title>
</head>
<body>
<p>うちの犬は<strong>とっても</strong>機嫌が悪い。</p>
<img src="images/test_image.png" alt="test_image">
</body>
</html>
また、要素は属性 (Attribute)を持つことが出来ます。<html>タグにある lang="ja" は属性を用いて使用する言語を日本語にすることを宣言しています。<meta>タグの charset = "utf-8" も属性の定義です。
<img>要素は、指定された画像ファイル（src="images/test_image.png"）をweb ページに埋め込み、その画像の名称を alt="test_image" で定めています。この alt 属性は省略可能です。組み込んだ画像の大きさを指定するときは、属性 width を使って、width =500というように幅のピクセル数を指定します。
基準スタイルシート言語と基準スクリプト言語の指定は以下のように行います。
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
このmeta要素の記述は、文書のデフォルトのスタイルシート言語とスクリプト言語を指定します。タグに直接style属性でスタイルシートを指定する場合などに、ここで指定した言語であると解釈されます。多くの場合、これらの指定をしなくてもブラウザが自動的に判断しますが、誤動作を避けるためにも記述しておく方が望ましい。
多くのウェブのコンテンツには多数のリストが使用されており、 HTML にはリストを表すための特別な要素が用意されています。リストは最低 2 つの要素を組み合わせて生成します。主要なリスト形式として番号付きリストと番号なしリストがあります。番号なしリストは、お買い物リストのようにアイテムの順番が特に関係ない時に使います。番号なしリストは <ul> 要素で囲みます。番号付きリストは料理のレシピのようにアイテムの順番が関係ある時に使います。番号付きリストは <ol> 要素で囲みます。リストの中に入るそれぞれのアイテムは <li> (list item) 要素の中に書きます。例えば、以下のように書きます。
<ul>
<li>コンピュータ</li>
<li>人工知能</li>
<li>深層学習</li>
</ul>このコードを実行すると、以下のように表示されます。
Webの例
- コンピュータ
- 人工知能
- 深層学習
HTML では <h1> から <h6> の6段階の見出しの要素タグが用意されています。見出し要素は文書中の見出し、小見出しを指定することができるものです。通常の書籍でも主題、章題、副題があります。 HTML でも同じことが出来ます。
<h1>主題</h1>
<h2>副題</h2>
<h3>章のタイトル</h3>
<h4>節のタイトル</h4>
のように使います。
自分で作成した多数の web ページあるいは必要な他者のweb にリンクを貼ることは重要です。 これが多数のウェブページから構成されるひとつのウェブサイトにします。リンクを追加するには、シンプルな要素 <a> を使えばよいです。 a は "anchor" を省略したものです。
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
<a href="java/javascript.html">JavaScriptの説明</a>
の様に使用します。アドレスの先頭にある https:// や http:// の部分 (プロトコルと言います) は必ず書きます。ただし、HTML ファイルと同じ、あるいは、サブフォルダーにあるファイルにリンクを貼るときは、省略できます。
HTML で頻繁に目にするのは表（table）の表現です。表は <table> タグを用いて作成します。このタグには数々の要素と属性が表の装飾目的のためにあります。スタイリング用の CSS と組み合わせて、HTML は Web 上に、学校の授業の計画や、水泳の時間割や、好きな恐竜やフットボールチームの統計情報といった、情報の表を簡単に作成できます。表（テーブル）は、文字通り、行と列からなる構造化されたデータの集合 (表形式のデータ) です。
すべての表データは、 <table> </table> という2つのタグで囲んで作成します。HTML ファイルの <body> </body> 中に記述します。表の各行の列のデータは <td> </td> のなかに挿入します。これが行列の一つのセルを構成します。 td は table data を意味します。一つの行は <tr> </tr> で囲みます。 tr は table row を意味します。
<table>
<tr>
<td> 太郎</td>
<td> 12歳</td>
<td> 男子</td>
</tr>
<tr>
<td>次郎</td>
<td> 10歳</td>
<td> 男子</td>
</tr>
<tr>
<td> 花子</td>
<td> 8歳</td>
<td> 女子</td>
</tr>
</table>
このコードは3行３列の表を作成します。web 上では以下のように表示されます。
| 太郎 | 12歳 | 男子 |
| 次郎 | 10歳 | 男子 |
| 花子 | 8歳 | 女子 |
このままの表示では非常に醜いテーブルですので、見やすいようにテーブルの表示に何らかの装飾を施す必要があります。このために、CSS ファイルを使うのが常套手段ですが、ここでは別な手立てを使います。 table 要素のプロパティを以下のように設定してみます。
<table bgcolor=#d5fd82 border=1 height=100 width=300>
<tr>
<td> 太郎</td>
<td> 12歳</td>
<td> 男子</td>
</tr>
<tr>
<td>次郎</td>
<td> 10歳</td>
<td> 男子</td>
</tr>
<tr>
<td> 花子</td>
<td> 8歳</td>
<td> 女子</td>
</tr>
</table>
このファイルを実行すると、テーブルの表示が色付きなります。
| 太郎 | 12歳 | 男子 |
| 次郎 | 10歳 | 男子 |
| 花子 | 8歳 | 女子 |
表の印象がかなり変化します。このほうが読みやすいと思います。
最後に、マルチメディアをWeb ページに埋め込むための基礎を簡単に説明します。様々なタイプのマルチメディアもありますが、HTML5の <video> 要素と <audio> 要素を使用して、動画や音声をページに埋め込む方法を説明します。Mozillal.orgが提供している Web 入門サイトに準拠して説明します。 <video> 要素を使用すると、動画を非常に簡単に埋め込むことができます。本当に簡単な例は次のようになります。
<video src="rabbit320.webm" controls>
<p>お使いのブラウザは HTML5 動画をサポートしていません。その代わりに<a href="rabbit320.webm">動画へのリンク</a>があります。</p>
</video>
<img>要素と同じように、src (ソース) 属性には、埋め込みたい動画へのパスが含まれています。属性controls は、ユーザが、動画や音声の再生を制御するために必要になります。controls 属性を使用してブラウザ独自のコントロールインターフェイスを組み込むか、適切な JavaScript API を使用してインターフェイスを構築する必要があります。この詳細については、ここでは無視してください。<p> タグは代替コンテンツと呼ばれ、ページにアクセスしているブラウザが <video> 要素をサポートしていない場合に表示されます。Safari や Internet Explorer などのブラウザで上記のライブのリンクにアクセスしたなら、動画は再生されません! これは、さまざまなブラウザが異なる動画 (および音声) のフォーマットをサポートしているためです。
動画 (および音声) のフォーマット MP3、MP4、WebM などの形式はコンテナフォーマットと呼ばれます。これらのフォーマットは、動画と音声を管理可能なファイルに圧縮するために必要です (生の動画と音声は非常に大きいので)。ブラウザには、大まかには、Vorbis や H.264 の２種類のコーデックが含まれています。これらのコーデックは、圧縮された音声と動画を2進数字に変換して戻すために使用されます。残念ながらブラウザはすべて同じコーデックをサポートしているわけではないので、メディアをデコードするために適切なコーデックがない場合、再生されない。２種類のコンテナフォーマットに対応させるためには、以下の様に記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple format video example</title>
</head>
<body>
<h1>Below is a video that will play in all modern browsers</h1>
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
</body>
</html>このコードを用いた動画をここをクリックして再生してくだい。
<audio>要素は、<video> 要素とまったく同じように動作しますが、若干の違いがあります。簡単な例は次のようになります。
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>お使いのブラウザは HTML5 音声をサポートしていません。代わりに<a href="viper.mp3">音声へのリンク</a>があります。</p>
</audio>
Mozillaが提供するGithubから音声デモを再生できます。
CSS の簡単なTutorials |
CSS (Cascading Style Sheets) は、Web ページのスタイルを設定するコードです。ここでは、始めるのに必要な最小限の基本を紹介します。CSS はスタイルシート言語です。つまり HTML 文書の要素に選択的にスタイルを適用できます。例えば、HTML ページのマークアップ要素<h1>を選択し、その中のテキストを赤色にするには、次のような内容の CSS ファイルを作成します。
h1 {
color: red;
}
このファイルを、style.css という名称のCSS ファイルとして保存します。CSS を HTML 文書に適用する必要があります。そうしないと CSS のスタイリングはブラウザの HTML 文書の表示方法に影響しません。そこで、HTML ファイルの<head>タグの間に、
<head>
...
<link href="style.css" rel="stylesheet" type="text/css">
...
</head>
と貼り付けます。ブラウザでHTML ファイルを開くと、マークアップの文字が赤色になっていると思います。
CSS の記述の先頭にある h1 はスタイルを設定する要素を選択しているので、セレクタ（slector）と呼ばれます。
color: red;
のような単一の記述文で、要素のプロパティのうちどの部分をスタイルするかを指定します。これを宣言（declaration）と言います。各記述文 (セレクタを除く) は中括弧 ({}) で囲みます。各宣言内ではコロン (:) を使用してプロパティを値から分離する必要があります。複数のプロパティを指定するときは、各セット内でセミコロン (;) を使用し、各宣言を次の規則と区切る必要があります。したがって、一度に複数のプロパティ値を変更するには、セミコロンで区切って次のように記述します。
<!-- 例2 -->
h1 {
font-size: 60px;
text-align: center;
}
p {
color: red;
width: 500px;
border: 1px solid black;
}
ページの HTML 要素のほとんどはお互いの上にあるボックスと考えることができます。CSS を用いて、ボックスのサイズ・色・位置などを設定することができます。ページ上の各ブロックは、次のようなプロパティを持ちます。
また、要素のプロパティには以下のものもあります。
<!-- 例3 -->
<div id="header"><h2>Header です。</h2>
</div>
<nav id="menu"><h2>リストのメニューです。</h2>
<ul>
<li>コンピュータ</li>
<li>人工知能</li>
<li>深層学習</li>
</ul>
</nav>
これに対応するスタイル設定は以下のように指定します。
#header{
display:block;
width: 80%;
padding: 10px;
text-align: center;
background-color:#FFB6C1;
}
#menu{
display: table;
width: 90%;
padding: 10px ;
text-align: left;
text-decoration: underline;
background-color:#AFEEEE;
}
セレクターの頭に記号 # を付加する必要があります。 # は id 名に対応したスタイル設定をする時に対応します。このコードを実行すると、以下のようなWeb ページになります。
CSSの例
Header です。
上で説明したように、各要素のスタイル設定をCSS ファイルを別ファイルにして行うのが一般的ですが、スタイル設定が簡単なケースでは、HTML ファイルの head 要素内に <style> と </style> で囲んで、CSSコードを書き込む方法もあります。例えば、nav 要素のスタイル設定のコードを以下のように設定することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<TITLE>簡単なCSS設定の実際のページ</TITLE>
<style>
#navi ul{
display: table;
margin: 0 auto;
padding: 10px;
width: 90%;
text-align: center;
background-color:#99FF66;
}
#navi ul li{
display: table-cell;
min-width: 50px;
position: relative;
}
#navi ul li a{
display: table-cell;
width: 80%;
padding: 10px ;
text-decoration: underline;
font-weight: bold;
}
</style>
</head>
<body>
<p align=center> 簡単にスタイル設定を行う例です。</p>
<nav id="navi">
<ul>
<li><a href="AI.html">AI（人工知能）の話</a></li>
<li><a href="AI_api.html">Deep Learning の実装</a></li>
<li><a href="webgl.html">Computer Graphics の話</a></li>
<li><a href="javascript.html">プログラミング言語入門</a></li>
</ul>
</nav>
</body>
</html>
このスタイル設定は、このホームページでナビゲーション・メニューを表示するために使用されています。nav タグで id="navi" で指定された名称 "navi" に対応した #navi でスタイルが設定されています。ナビゲーションのメニューリストを、横方向に（水平に）表示するためのスタイル設定です。
簡単なCSS設定の実際のページ
簡単にスタイル設定を行う例です。
これは、CSS ファイルを読み込まずに、簡単にスタイル設定を行うケースの一例です。このようにして、背景やフォントの色を設定したり、複数カラムにコンテンツをレイアウトしたりします。CSSのスタイルコードを用いて、各要素のスタイルを様々な形状や色彩で設計することができます。
以上の知識があれば、簡単なホームページ程度は作成できると思います。
HTML ファイルと JavaScript プログラムの関係 |
web ページはテキストファイルであるHTML ファイルに記述します。JavaScript ファイルはHTML ファイルのscript エレメント（<script> 〜 </script>）部分に記述します。HTML ファイルがコンピュータのweb ブラウザに読み込まれると、web ブラウザがプログラムを解釈して実行します。web ブラウザの中には、JavaScript エンジンというjavaScript プログラムを解釈して実行するインタプリタ機能がインストールされています。
JavaScript機能のブラウザ間での互換性を維持するために、Ecma International という標準化団体によってECMAScript として標準化されています。現在の主要なweb ブラウザは、このECMScriptに準拠しています。
HTML ドキュメント内の任意のタグで囲まれた要素（element）にアクセスして、その内容を変更したり、新たに要素を追加したりするための仕組みとして、DOM と呼んでいます。DOM から見たHTML ドキュメントの階層構造をDOM ツリーと呼びます。DOM ツリーの内の各要素のことをノードと言います。DOM ツリーの最上位のノードは "document" で、その下に "html" が位置します。さらに、その下に、 "body" が置かれ、通常は、 "div" 、 "h1" 、 "p" と枝分かれが続きます。
JavaScript はオブジェクト指向言語に分類される言語です。オブジェクト指向言語はオブジェクトと呼ばれる対象に操作や処理を加えます。処理対象となるオブジェクトを具体的に生成するために、インスタンスと呼ばれる変数を生成します。このインスタンスに処理を加える操作をメソッドと呼びます。
ここで、JavaScript の簡単な例を見てみましょう。まずは 以下のファイルをコピペして、名前をつけて自分のコンピュータに保存します。拡張子は .html にしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript example 1</title>
</head>
<body>
<h1> JavaScript を始めよう </h1>
<script>
// JavaScript をここに書きます
document.write("<h2> JavaScript の学習 </h2>")
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの例２</title>
</head>
<body>
<div id="myJava" style="height:100px">
</div>
<script>
// idがmyJavaのエレメントの背景色を黄色にする
hellow = document.getElementById("myJava");
hellow.style.backgroundColor = "yellow";
hellow.innerHTML = "<h1>Hellow JavaScript!</h1>";
</script>
</body>
</html>
<div id="myJava" style="height:100px"> </div> は、id が "myJava" と指定された空の div エレメントを定義しています。document.getElementById("myJava") はid 名が"myJava"というエレメントを返します。このエレメントを変数 hellow に入れています。メソッド innerHTML は右辺の文字列を web ページに表示させる命令です。このHTMLファイルをブラウザで開いてください。以下のようなWebページが開きます。
JavaScriptの例２
web にこのように表示されるでしょう。
JavaScriptを別ファイルにして、これを読み込むときは、以下のようにhtmlファイルのscriptエレメントを修正します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの例２</title>
</head>
<body>
<div id="myJava" style="height:100px">
</div>
<script src = "example.js">
</script>
</body>
</html>
// example.js
hellow = document.getElementById("myJava");
hellow.style.backgroundColor = "yellow";
hellow.innerHTML = "<h1>Hellow JavaScript!</h1>";
ファイル名は適当でも、javascriptファルの拡張子は .js でなければいけません。
最後に、キーボード入力を使う少し高等な例を挙げます。まずは 以下のファイルをコピペして、名前をつけて自分のコンピュータに保存します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript の例３</title>
</head>
<body>
<p>Botton をクリックする例</p>
<button >Click me</button>
<script>
// JavaScript をここに書きます
function createParagraph() {
var para = document.createElement('p');
para.textContent = 'ボタンが押されました！';
document.body.appendChild(para);
}
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
</script>
</body>
</html>
Web ブラウザでそのファイルを開くと、以下のようなWebページが開きます。
JavaScript の例３
Botton をクリックする例
JavaScriptのインスタンスなどの使用については後ほど説明しますので、ここでは、この例のコードの内容が理解できなくても結構です。
JavaScript プログラムの基本文法 |
ここでは、JavaScrip の基本を説明します。上で挙げたscript の例が容易に理解できるレベルに行きましょう。最初に、ブラウザのコンソールの使用方法について説明します。ブラウザを開くと、開発者ツールというメニューバーがあります。例えば、Safari では、「開発」という名前のいうメニューバーがあります。Javascript用のconsoleを開くと使用出来ます。
変数の定義は以下のようにします。
var 変数名; または var 変数名 = 値;変数名に値を与えないときは、変数名だけを定義して、内容は undefined と示されます。値は、数値もしくは文字列です。ブラウザでコンソールを開いて、以下の文を入力します。文の最後はセミコロン ; で終わります。
> var string = 'This is my javascript';
> var year = 2020;
このように定義された変数（オブジェクトのインスタンス）にはプロパティと呼ばれる属性があります。何らかの処理を行う属性はメソッドと呼ばれます。文字列のプロパティの一つに長さを表示する機能 length があります。
> string.length;
の形式で利用します。21 と表示されるはずです。数値データでは利用できません。
window オブジェクトおよびdocument オブジェクトは頻繁に活用されるオブジェクトで、ユーザーが定義しなくても、ブラウザの起動と同時に自動的に用意されて利用可能になるオブジェクトです。windowオブジェクトでよく使用されるメソッドは
alert() 、prompt() 、confirm()です。prompt() は web ページに入力用ウインドを生成して、ユーザーからの文字列入力を待ちます。document オブジェクトには、
anchors 、title 、 body 、cookie 、documentURI 、lastModifiedなどのプロパティが用意されています。メソッドには
open() 、close() 、write() 、getElementById() 、createElement() 、appendChild() 、 querySelectorなどがあります。例えば、
var name = window.prompt('名前を入力してください');
document.write('こんにちわ'+ name + 'さん')；
のように使用します。windowオブジェクトは最上位のオブジェクトなので、window. の部分は省略可能です。
また、特殊なオブジェクトの一つにConsole オブジェクトというものが利用可能です。ただし、ここでいうコンソールとは開発ツールにあるjavascriptコンソールパネルのことです。このコンソールに文字列を表示させるメソッドが console.log() です。
console.log('今年は2019年です');のように使用します。
通常の四則演算の記述はプログラミングでは常識的な方式です。以下にある通り、特殊な表記法もあります。
var x= 10.5 ;
var y=21.0;
var z;
z=x+y;
x=x+1; //x++ と書いても同じ
y=y-1; //y-- と書いても同じ
z=z+5; // z +=5 と書いても同じ
z=z-3; // z -=3 と書いても同じ
繰り返し値を足したり引いたりしたいときがあリます。そんなときに便利なのがインクリメント演算子 (++) とデクリメント演算子 (--) です。使い方は、上の例のように書きます。
コーディングにおいて、不可欠なコンセプトが関数です。関数を使用することで、特定の処理を行うプログラムを定義し、いつでも簡単なコマンドで呼び出すことを可能にしてくれます。JavaScript言語にはたくさんの組込み関数があるので、いろいろな処理を、全部を自ら全部書かなくてもすみます。実は、JavaScript の組み込み関数以外に、ブラウザーに組込まれた関数もあります。今までの例においても、ブラウザーに組込まれた関数をたくさん使ってきました。ブラウザ組込み関数は関数ではありません。それらはオブジェクトのメソッドと呼ばれています。
ここでいう関数とはプログラマー自身がJavaScript を用いて作成する関数のことです。以下の様式で作成します。
function 関数名(オプション) {
関数を定義するコード
}
具体的な例を見ましょう。
// function の定義
function myFunction() {
alert('hello');
}
// myFunction を呼び出して、使う
myFunction();
この例は引数（オプション）のない関数です。名前のない関数を作る事もできます。これは匿名関数と呼ばれます。匿名関数は、以下の例のように、よくイベントハンドラで使われていています。匿名関数を変数の値として代入すこともできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript example</title>
</head>
<body>
<button>Click me</button>
<script>
var myButton = document.querySelector('button');
myButton.onclick = function() {
alert('JavaScript succeeded!');
}
var myGreeting = function() {
document.write("<h2> Hello JavaScript</h2>");
}
myGreeting();
</script>
</body>
</html>
myButton = document.querySelector('button') は 'button' というエレメントを選択して、変数 myButton の内容に入れるという処理を行います。myButton.onclick の onclick はオブジェクトがクリックされたときに行う処理を設定します。このような処理を行うプロパティをイベントハンドラと言います。JavaScript はエレメントオブジェクトにはイベントハンドラとして使用可能なプロパティが多数あります。ここでは、詳細は省略します。
様々な場面で、true または false を判定し、その結果によ処理を変更したい時があります。そのようなことをするために比較演算子を使用します。比較演算子には以下のようなものがあります。Mozilla Doc からの引用です。
| 演算子 | 名前 | 目的 | 例 |
|---|---|---|---|
=== |
厳密な等価 | 右辺と左辺が厳密に同一の値であるかを判定します | 5 === 2 + 4 |
!== |
厳密な不等 | 右辺と左辺が厳密に同一の値ではないことを判定します | 5 !== 2 + 3 |
< |
小なり | 左辺の値が右辺の値より小さいこととを判定します | 10 < 6 |
> |
大なり | 左辺の値が右辺の値より大きいことを判定します | 10 > 20 |
<= |
以下なり | 左辺の値が右辺の値以下であることを判定します | 3 <= 2 |
>= |
以上なり | 左辺の値が右辺の値以上であることを判定します | 5 >= 4 |
これらの比較演算子は条件文の中で頻繁に使用されます。JavaScript において、条件文と呼ばれるものがどのように動作するかを説明します。最初に if 文から説明します。
if (条件式) {
条件式が true の場合に実行されるコード
} else {
それ以外の場合に実行されるコード
}
このように書きます。比較演算子はこの条件文の中で使用されます。以下に例をあげます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First conditional example</title>
</head>
<body>
<button>Start machine</button>
<p>The machine is stopped.</p>
<script>
var btn = document.querySelector('button');
var txt = document.querySelector('p');
btn.addEventListener('click', updateBtn);
function updateBtn() {
if(btn.textContent === 'Start machine') {
btn.textContent = 'Stop machine';
txt.textContent = 'The machine has started!';
} else {
btn.textContent = 'Start machine';
txt.textContent = 'The machine is stopped.';
}
}
</script>
</body>
</html>
ここで、btn.addEventListener('click', updateBtn) は btn ('button') がクリックされたときに関数 updateBtn を実行するというイベントリスナーです。
ここをクリックするとこのプログラムのweb ページが開きます。
この例では実行結果は 2 つだけでしたが、もっと選択肢がある場合はどうでしょうか？このケースでは、else if を使って、追加の選択肢を if...else に繋ぐ方法があります。追加の選択肢 if() { ... } 文を else の後ろに続けて挿入する必要があります。
if (条件式１) {
条件式１が true の場合に実行されるコード
} else if (条件文２) {
条件文２が true の場合に実行されるコード
}else{
条件文１、２が否定された時実行されるコード
}
このように記述します。以下に、その応用例を紹介します。
<body>
<label for="weather">今日の天気を選択してください: </label>
<select id="weather">
<option value="">--選択してください--</option>
<option value="sunny">晴れ</option>
<option value="rainy">雨</option>
<option value="snowing">雪</option>
<option value="overcast">曇り</option>
</select>
<p></p>
<script>
var select = document.querySelector('select');
var para = document.querySelector('p');
select.addEventListener('change', setWeather);
function setWeather() {
var choice = select.value;
if (choice === 'sunny') {
para.textContent = '今日はとてもいい天気です。短いパンツをはいて、砂浜や公園に出かけ、アイスクリームを食べましょう！';
} else if (choice === 'rainy') {
para.textContent = '雨が降っています。レインコートと傘を忘れないようにして、できる限り室内で過ごしましょう。';
} else if (choice === 'snowing') {
para.textContent = '雪が降ってとても寒いです！室内でホットチョコレートを飲むか、雪だるまを作るのがよいでしょう。';
} else if (choice === 'overcast') {
para.textContent = '雨は降っていませんが、空はとても暗くなっています。万が一に備えレインコートを持ちましょう。';
} else {
para.textContent = '';
}
</script>
</body>
このコードにおいて、<label>とは、フォームの構成部品（入力テキストボックス・チェックボックス・ラジオボタン等）と、 その項目名（ラベル）を関連付けるためのタグです。label タグのfor属性の値と、フォーム部品のid属性の値を同じものにすることで両者の関連付けを行うことができます。このことにより、ブラウザでラベルをクリックした際に、その構成部品をクリックしたのと同じ動作が可能になります。<select>はセレクトボックスを作成するタグです。 初期値ではプルダウン式のメニューとなりますが、size属性で選択肢の表示行数を指定することができます。 セレクトボックス内の選択肢は<option>タグで指定します。select.addEventListener('change', setWeather) は フォーム部品の状態が変更された時にsetWeather 関数を実行するという意味です。
このコードをクリックすると上の例のweb が表示できます。
プログラミング言語は、繰り返し実行する課題を処理することが得意です。基本的な計算処理から、同じような作業がたくさんある状況を効率的に実行します。JavaScript でそういった目的を果たすために使用する for ループ構造を説明します。
for (カウンターの初期化処理; 終了条件; カウンターの更新) {
// 実行するコード
}
for キーワードに続き括弧があります。括弧の中にはセミコロンで区切られた、初期化処理、終了条件、カウンター更新の３つの項目があります。初期化処理では、たいていの場合、繰り返し回数分更新されるカウンター変数の初期化処理となります。終了条件は、ループが繰り返しをやめるべき条件を設定します。ほとんどの場合は比較演算子を伴って、終了条件を満たしているかを判定します。カウンターの更新の式は、処理ループの1回が終了する度にカウンターを更新する式です。通常は、カウンター変数を増加させて、終了条件に近づけていきます。中括弧（{）があり、中括弧の中のプログラムコードが各ループの繰り返しで実行されます。
以下の例を見て、これらを明確に分かるようにしてみましょう。
for (var i=1; i<=12; i++) {
document.write(<h2>i+"月 "</h2>);
}
この例では、カウンター i が 1 づつ増加して、 12 になるまで処理（document.write）が繰り返されます。1月から12月までがweb に表示されます。
----- To be continued ------
Canvas 要素を用いた描画 |
<canvas> 要素は、一般的に JavaScript を使って図形を描くために使われる新しい HTML 要素です。例えば、グラフを描く、写真を合成する、または簡単な (またはあまり簡単ではない) アニメーションに使うことができます。このセクションでは、2D グラフィックスを描画するために <canvas> 要素を使用する方法を、基礎から説明します。
以下のように使います。
<canvas id="sample" width="150" height="150"></canvas>
<canvas> は <img> と似ています。src 属性と alt 属性がない点が明確に異なりますが、width と height の属性がある点などは共通しています。 これらの属性を必ず指定する必要はありません。このほかに様々な DOM 属性を利用できます。 width と height 属性が指定されなかった場合、canvas は幅 300 ピクセル、高さ 150 ピクセルの要素として初期化されます。
<canvas> は固定された大きさの描画可能領域を作成できます。この領域は、1 つ以上の描画コンテキストとして表現され、そのコンテキストを通じて描画領域を操作します。このチュートリアルでは、2 次元グラフィックスを描画するためのコンテキストについてのみ解説します。３次元グラフィックスを描画するための典型例が WebGL です。これは OpenGL ES に基づいた 3 次元グラフィックスを扱える描画コンテキストです。
初期状態での canvas には何も描画されていません。ここに描画を行うには、まず JavaScript で描画コンテキストを取得する必要があります。 <canvas> 要素の getContext() を呼ぶことで、描画コンテキストは取得できます。呼び出す際の引数によって、取得されるコンテキストの種類が変わります。"2d" を指定することで、2 次元のグラフィックスを扱える描画コンテキストが取得できます。
var canvas = document.getElementById('sample');
var ctx = canvas.getContext('2d');
最初の行では document.getElementById() メソッドを呼んで、DOM 中から <canvas> 要素をあらわすノードを探しています。id="sample" で指定されたcanvas 要素のことです。2 行目では見つけた要素の getContext() メソッドを呼んで、描画コンテキストを取得しています。
<canvas> 要素に対応していないブラウザでは、代替コンテンツが表示されます。JavaScript からは getContext() メソッドの有無を調査することで、ブラウザが対応しているかどうかを確認できます。確認するためのコードは以下のようになります：
var canvas = document.getElementById('sample');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
以上の点をまとめたサンプルコードは以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('sample');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="sample" width="150" height="150"></canvas>
</body>
</html>
スクリプト中の draw() 関数はページのロード完了時に一度だけ呼び出されます。これは、document の load イベントを利用しているためです。他の関数同様、 window.setTimeout() や window.setInterval()、他のイベントハンドラから呼び出すことができます。ページがロードされた時にのみ呼び出されます。
手始めに単純な例を見てみましょう。次の例では重なり合う 2 つの四角形が描画されます。そのうちの 1 つは透明度が設定されており、下の色が透けて見えます。この例がどのように動作しているかは、以下で解説します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 100, 100);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (50, 50, 150, 150);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
このコードを実行すると、以下のような描画が表示されます。
Canvas 要素を用いて描いた簡単なWeb 上の描画の例を下にあげます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasを用いた描画</title>
<script type="text/javascript">
<!--
function example() {
var canvas = document.getElementById('example');
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillRect(20,40,50,100);
context.strokeStyle = 'rgb(00,00,255)';
context.strokeRect(200,80,100,50);
context.fillStyle = '#669900';
context.arc(150,75,60,Math.PI*1,Math.PI*2,true);
context.fill();
}
}
</script>
</head>
<body onLoad="example()">
<h2>Canvasで図形を描く</h2>
<canvas id="example" style="background-color:cyan;">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
</body>
</html>
このコードを実行すると、以下のようなWeb が表示されます。
ここをクリックすると新しいWeb ページが開きます。
CodePen を用いたWeb 開発 |
CodePenとはウェブ開発に必要なHTML, JS, CSSの三要素を実際の表示を見ながら開発できるウェブサービスです。CodePenを利用するためには、会員登録が必要になります。無料と有料の２種類があります。下記URLにアクセスして会員登録をします。
https://codepen.io/CodePenトップページにアクセスしたら、下の[Sign Up for free]をクリックします。するとフリープラン登録画面が表示されます。「YOUR NAME」には、CodePen内で使用する自分の名称を入力します。「CHOOSE A USERNAME」は、ユーザー名です。これがアカウントIDになります。メールアドレスを入力し、パスワードを決めて入力します。入力し終わったら「Submit」をクリックします。プロフィールの詳細を埋めてという画面が表示されますが、後でも設定できるので「Save＆Continue」をクリックします。登録完了です。
トップページに戻ると、ドロップダウンメニューが表示されるので、「Create」、[Pen]を選択します。HTML、CSS、Javascriptのコーディング画面が表示されます。
CodePenは、Webブラウザ上でHTML、CSS、Javascriptのコーディングができて、修正を加えると更新されてプレビューに反映されるので、リアルタイムでデザインを確認しながらWeb 開発ができます。主な機能は
コードをリアルタイムでプレビューできる
コードを公開・共有できる
他人のコードも編集できる
プレビュー画面をWebサイトに埋め込める
というところでしょう。
最初に、CodePenの使い方を見てみましょう。CodePenのトップページに行って、Create」、[Pen]を選択すると、HTML、CSS、Javascriptのコーディング画面が表示されます。HTMLのエディター画面に、上で用いた例のHTMLファイルをコピペしてみます。すると、以下のような結果が出ます。
See the Pen java_1 by mashyko (@mashyko) on CodePen.
Resultにwebが表示されます。ボタン「start machine」をクリックすると、The machine has started! と表示されます。HTMLのコードを修正すると、それに対応してResultのweb表示も変化します。
まずは、Webページに埋め込まれたCodePenのプレビュー画面の見方をかんたんに解説します。エディター画面のトップバーに「HTML」とか「CSS」、「JS」、「Result」というボタンがあります。それぞれをクリックして選択中にすると、プレビュー画面に選択中のファイルが表示されます。「Result」はHTML/CSS/Javascriptのコーディングによる実行結果が反映されます。ファイルの名前をつけて、「save」をクリックします。
もう一つ、別の例をCodePenにコピペしてみましょう。先ほどと同様に、HTMLのエディター画面に、例のHTMLファイルをコピペしてみます。すると、以下のような結果が出ます。
See the Pen java_2 by mashyko (@mashyko) on CodePen.
この例では、javascriptファイルをHTMLとは別ファイルにしました。HTMLファイルのbody内は、label要素、select要素およびoption要素だけで記述されています。javascriptのコードは、JSというウインドウに記述しました。
上記のコーディングを自分のWeb サイトで表示したい時の埋め込み方法を説明します。Pen編集画面の下端右下にEmbedというボタンがあるのでクリックします。ウインドウ画面が表示され、下部に4つの埋め込みコードが用意されます。「HTML(Recommended)」を使用します。結果のコードをすべてコピーして、HTML にコピペします。
次に、Canvas 要素を用いた描画の例をCodePenで表示してみます。
See the Pen canvas_1 by mashyko (@mashyko) on CodePen.
このコードの説明は上でしましたので、ここで再度する必要はないです。ただ、javascriptの部分はJSのファイルとして、HTMLファイルとは別ファイルにしました。
最後に、JQueryとUI を用いたPopup機能の例をみてみます。jQuery の基本的記述については、jQuery を用いたweb デザインのページを参照ください。
See the Pen jquery-UI by mashyko (@mashyko) on CodePen.
メニューのアイコンがハンバーガーのような形をしているので、ハンバーガーメニューと呼ばれます。このアイコンをクリックすると、メニューがポップアップします。アイコンをクリックしてみてください。
以上の例から理解できるように、CodePenを活用すると、web開発が非常に効率的に実行できます。