LogoMark.png

Webデザイン実習/2020/0623

第8回 JavaScript入門1

Webデザイン実習/20202020.06.23


第8回目の展開と要件


第8回の完成イメージ

以下、JohnSmith さん(架空の受講生)の8回目の授業終了イメージです。



以下、目次を見て演習の全体像を把握してから、順に説明を読み進めて下さい。



第8回 目次


はじめに

今回から2回に渡って、JavaScript について学習します。Web制作で JavaScript を利用する場合、実際には jQueryのようなライブラリーや、それを利用したプラグイン(画像スライド等)、また JavaScriptフレームワークなどを利用して、効率的に機能を実現することが多いのですが、「便利なもの」というのは、「いざというときに応用が効かない」、「それを使うための学習が別途必要になる」、「将来性が不透明」・・といった問題点があります。

この2回で学習することは、第10回以降で学習する jQuery の利用によって、直接的には必要のないものとなりますが、JavaScript の基礎学習なしに、いきなり jQuery を学んでも、Webの技術の全体像を正しく理解することができず、結果、応用が効きません。逆に言うと、JavaScript そのものがわかっていれば、ライブラリーやフレームワークを利用しなくても、100%技術を活用することができるし、自分自身でライブラリーを作ることも可能です。

一見便利なシャープペンシルもノック機構が壊れると書くことすらできません。削るのが面倒でも「いざ」という時は鉛筆の方が確実 というのと同じです。

JavaScript はプログラミング言語ですから、本格的に使いこなせるようになるにはそれなりの学習時間が必要です(この2回の授業を契機として自ら学ぶ時間が必要です)。今回の演習では、意味不明の単語や記号だらけで、とても理解できそうにない・・という印象を受けるかもしれませんが、とりあえず、その書き方と、実際の動きについて、ざっくり体験してみましょう。

今回の演習は、HTML と JavaScript のみでシンプルにその機能を体験します。CSSを使って見栄えを良くする必要はありません。




1. JavaScriptとは

JavaScriptとは、SunMicrosystems社とNetscapeCommunications社が開発したスクリプト言語です(Sunが開発したJavaという言語とは別物です)。

HTMLが文書の構造、CSSが文書の表現を定義するものだとすれば、JavaScriptはWebページの「振る舞い」を定義するものです。主要なWebブラウザ上で動作することはもちろん、ブラウザ以外のソフトウェアにも簡易な制御プログラムの記述用言語として移植されています。標準仕様は、ヨーロッパの標準化団体ECMAが発行した ECMAScript です。

登場したのは1995年ですが、Ajax(Asynchronous JavaScript + XML)を活用したGoogleマップの登場(2005年)を機に、高機能なウェブアプリケーション開発言語として注目を集め、さらにHTMLとCSSに次ぐ第三の標準テクノロジー DOM(Document Object Model)が注目されるようになって、DOM-APIを利用する言語としての JavaScript にも注目が集まるようになりました。また JQuery のような優れたライブラリーが登場し、簡単に美しいインターフェースが実現できるようになったことも、その追い風になりました。2015 年には本格的な大規模更新が施された ECMAScript 6 (ES6) が策定され、2020年現在 10th Edition。

言語を学ぶということは「新たな思考回路を身につける」ということです。AI(先端的なIT技術)との協働が必須となる時代、コンピュータの思考回路を理解してそれを使いこなす技術が求められています。時間はかかると思いますが、プログラミング言語を学ぶきっかけとして JavaScript を選択することは、最も賢明であると考えます。

2. JavaScriptを利用するには

JavaScript を利用するには、以下の3つの方法があります。

3. 開発環境

3.1. TextEditor

JavaScriptファイル は、HTMLやCSSと同様にプレーンなテキストファイルです。したがって、HTML,・CSSと同様に、テキストエディタさえあれば、プログラムの開発が可能です。


3.2. ブラウザ搭載の JavaScript コンソール

JavaScript は、Webページが持つ機能のひとつとして、ブラウザ上で動作しますが、その文法に問題があったり、ロジックの問題があっても、表示上その機能が無視されるだけで、エラーメッセージが表面に現れることはありません(最悪の場合はブラウザがフリーズします)。そこで、スクリプトを開発する場合、それらを明示的に知るために、ブラウザの「コンソール」を使います。
以下、ブラウザでコンソールを表示する方法を紹介します。

4. はじめての制御体験

JavaScript を使って、ページ内の要素を制御する体験です。

プログラムというものは、簡単に言えば、コンピュータに対する命令を記述したもので、命令というものは、一般に「何かに対して、何らかの動作を指示する」というかたちになります。ページ内には様々な要素(Element)がありますが、それらを制御するには、はじめに相手を捕まえる、つまり命令の対象を捉える必要があります。

ここでは、以下の4つの事例で、対象の捉え方と、動作指示の仕方を体験します。やたらと長い綴りでウンザリするかもしれませんが、とりあえず、これだけあれば、対象を捉えることができます。覚えて書くのではなく、コピペで貼ればいい・・と割り切りましょう。

ちなみに、IDとCLASS については、以下のことを再確認しましょう。


4.1. 演習準備

演習の準備としてはじめにJavaScript の基礎体験をするために、新規のフォルダと、2つのファイルを準備します。


以上で準備完了。以下、これを編集する形で体験してください。
サンプルをコピーするだけでは理解は深まらないので、それぞれの演習について、自分なりの追加・修正を加えて、「ここを変えたら、表示がこう変わる・・」といった練習を積極的に行って下さい。

付記
JavaScript を正確に理解するには「文法」の知識が必要になるのですが、このページでは「まずは体験する」ということを目的に、細かい説明を省いています。このページの事例を一通り体験して後、以下のページで JavaScriptの文法 や BOM・DOM についてご確認ください。





4.2. 演習1|ページにアクセスする

document.body

ボタンをクリックすると背景色が red に変わるという簡単な事例です。


以下、続けて事例を追加しますが、ファイルを新規につくる必要はありません。既存の HTMLとJSファイルに追加して試すことが可能です。


4.3. 演習2|ID要素にアクセスする

document.getElementById( ID名 )   ← ID要素を捕まえます。

ボタンをクリックするとID要素の背景色が yellow に変わるという事例です。


4.4. 演習3|CLASS要素にアクセスする

document.getElementsByClassName( クラス名 )

getElement ではなく getElements と複数形であることに注意して下さい。

ボタンクリックで CLASS要素の背景色が green に変わるという事例です。

ページ内に複数存在する同一の要素すべてに何らかの処理を施す場合、要素名を単純に指定するだけでは動きません。この場合、要素の数だけ処理を繰り返す必要があり、一般に for 文を用いた繰り返し制御が必要になります。

以下の例では、すべてのリスト項目の行の背景が green になります。

4.5. 演習4|HTML要素にアクセスする

document.getElementsByTagName( タグ名 )

getElement ではなく getElements と複数形であることに注意して下さい。

ボタンクリックで HTML要素の背景色が blue に変わるという事例です。

p タグ部分の背景を red にするには、body の背景を赤にしたのと同じ発想で、以下のように書けるのでは?・・と思いがちですが、残念ながら、これは正常に処理されません。

document.p.style.backgroundColor = "red";  ← これは正しく機能しません。

document.body の body はページに1つだけの特別なものですが、<p>はページ内に複数ある前提なので、簡単に相手を特定できません。ひとつづつ掌握して、指示を出す必要があります。よってClassの場合と同様、以下のように記述する必要があります。以下事例です。

5. 関数を効率的に作る

例えば R,G,B 3つのボタンで、背景色をそれぞれ変更するには・・。シンプルに考えると、以下のように3つのボタンをつくって、それぞれに対応する3つの関数を用意すれば、各ボタンで色を変えることができます。以下、機能することが想像できればOKです。実践する必要はありません。

ただし、この例では3つの同じようなプログラムが3回も記述されていて、明らかに効率が悪い・・。そこで以下、引数(ひきすう)を使って改善します


5.1. 演習5|引数を使う

function 関数名( 引数 ) { 処理 }

ひとつの関数で複数の処理に対応するという事例です。

引数(ひきすう)とは、関数実行時に呼び出し側が関数に引き渡すデータです。例えば、

背景色を変更せよ(赤色で);

のような形式で「赤色で」の部分を変数化して、その値を処理に利用してもらうようにすれば、ひとつの関数であらゆる色に対応できるようになります。


5.2. 演習6|汎用性のある関数を用意する

function 関数名( 引数 ){ 汎用性のある処理 };

ボタンクリックのたびにページの背景色がランダムに変わる事例です。

この機能は「ページの背景色を変える」という親機能(メインプログラム)と、「ランダムな色情報を作成する」という子機能(サブプログラム)の2つに分解することができます。このような場合は、汎用性のある(他のプログラムでも使える)サブプログラム部分を独立させておくと、例えば「ボタンの色をランダムに変える」という仕事にも流用することができます。関数をつくる場合は独立性を高く(汎用性を高く)することで、以後のプログラミング作業を効率の良いものにすることができます。

参考:rgb(r,g,b) 型の表記を生成するパターン
「ランダムな色をつくる」部分について、rgb(r,g,b) 型の表記を生成する事例も紹介します。こちらの方が応用が効くかもしれません。

function RandomColor2(){ 
     var r = Math.floor( 256*Math.random() );
     var g = Math.floor( 256*Math.random() );
     var b = Math.floor( 256*Math.random() );
     return 'rgb(' + r + ',' + g + ',' + b + ')';
}

ちなみに以下のようにするとRGB の値にそれぞれウエイトを与えることができます。以下の数値設定では、シアン系の明るい色の範囲が出ます。

function RandomColor2(){
     var r = Math.floor(  16*Math.random() + 128 );
     var g = Math.floor( 128*Math.random() + 128 );
     var b = Math.floor( 128*Math.random() + 128 );
     return 'rgb(' + r + ',' + g + ',' + b + ')';
}

以上、上記で紹介した RandomColor( ) と RandomColor2( ) は独立性の高い関数です。そのまま他のプログラムでも利用が可能です。


6. 本日の演習成果の公開


はい、お疲れ様でした。これで演習は終了です。
以下の内容は、補足説明(読むだけ)です。ここまでの演習で体験した内容を思い出しながら、以下のキーワードについて、そのイメージを掴んでおいてください。100%理解する必要はありません。とりあえず「聞いたことがある」という程度で、イメージを掴む程度でOKです。

JavaScript はプログラミング言語なので、数時間の学習で身につくものではありません。繰り返し体験するうちに徐々に理解が深まるもの・・と考えて、とにかく体験を積むことが必要です。ただ、包括的な概念、キーワードを知っていると、理解が能率的になるので、体験と用語理解を並行して行う・・という学び方がおすすめです。



7. JavaScriptプログラミングのキーワード

7.1. イベントとイベントハンドラ

JavaScriptのプログラムの多くは、何らかのアクションに対するリアクションとして記述されます。簡単な例で言うと「ボタンをクリックしたら要素の色が変わる」といったものです。JavaScriptの事例を調べていると、イベントとイベントハンドラという用語が頻繁に登場します。重要なキーワードですので確認して下さい。

7.2. プロパティーとメソッド

JavaScript はオブジェクト指向言語(Object-Oriented Programming)であると言われます。オブジェクトとは簡単に言えば「モノ」のことで、身近にある文具、家電、車などと同様にイメージして構いません。

オブジェクト指向プログラミングでは、それを「プロパティー」と「メソッド」の集合体と考えてコードを記述します。

例えば「車」を例にとると、それは以下のような「データ」と「処理機能」を持ったものであると説明することができます。参考 w3schools.com

従来の「手続き型プログラミング」では、「データ(変数またはプロパティ)」と「処理(関数またはメソッド)」はバラバラに捉えられていて、プログラマーは、処理を担う「関数(引数>処理>戻り値)」を、いかに独立性の高いものに仕立てるか・・ということに関心を集中させていましたが、オブジェクト指向プログラミングでは、「データ」と「処理」をセットにした「オブジェクト」を構成単位と見なすとともに「オブジェクトのデータは、オブジェクトが持つメソッドによって処理される」と考えることで、プログラマーは、それがいかに単品としてうまく動くかということに専念できるようになりました。これは、画期的な意識改革です。

実は、私たち「生き物」も、またそれを構成する単位である「細胞」も、すべて同様に内部に「データ」と「処理システム」を持つオブジェクトです。データはデータ、処理は処理と、バラバラなものを寄せ集めても、大きなシステムがうまく動く保証はありません。しかし「きちんと動く小さなモノを集めて少し大きなモノを作り、それらを集めてさらに大きなモノを作る」という発想で仕事をすれば、物事はうまくいきます。実際に「車」というオブジェクトは、ネジのようなサイズの小さな部品から、少しづつ大きなパーツの塊ができ、最終的には、いくつかの大きなパーツの組み合わせとして出来上がります。個々のパーツは、それぞれの段階で、きちんと動くようにできているので、最後の組み立てもシンプルな作業になります。

7.3. BOM・DOM

BOM(Browser Object Model)と DOM(Document Object Model )という概念は、Web制作を理解する上で、重要なオブジェクトの概念です。

JavaScriptは、Browser Object のひとつである Window オブジェクトを上位概念として、その中に表示される HTML文書を Document Object として扱います。さらに言えば、Document Object の中にある個々の要素(例えば h1 要素)もオブジェクトです。JavaScript プログラミングは、それらが持つ様々な「プロパティー」と「メソッド」を使って、システムを構築する作業であると言えます。

プロパティーとメソッドの違いは、語の最後に ( ) の有無で判断できます(メソッドは関数なので ( ) が付きます)。

オブジェクトとプロパティー、またオブジェクトとメソッドは [ . (ドット)] で接続します。

以下、プロパティーとメソッドの例です。

以上で、第8回の授業は終了です。お疲れさまでした。
第9回も同様に JavaScript を使った様々な制御事例を紹介します。。
第10回で学ぶ jQuery を使えばもっと簡単に記述できるものですが、それも基本がわかっていれば・・という前提なので、引き続き頑張って下さい。



PAGES

GUIDE

DATA

Last-modified: 2020-06-23 (火) 14:27:38