このシリーズは、短期間でWebエンジニアとして最低限必要な技術を学ぶことを目的としています。
前回までに、HTMLとCSSについて基本的な事を学んできました。これは、エンジニアとしてWeb環境での画面やUI(User Interface)を制作する方法を学んだという事です。
今回扱うJavaScriptはスクリプト言語で、Web環境下におけるプログラム言語のような役割を担う、エンジニアにとって重要な技術です。JavaScriptの力は非常に強力で、ただの静的な文書/データであるHTMLをソフトウェアやサービスにすることができます。一方で、間違った使い方をするとWebサイトの品質を低下させる危険性も持っています。しっかりと正しい使い方を覚えていきましょう。
すぐに役立つJavaScriptから覚えよう!
JavaScriptは歴史も長く、全てを順番に学んでいくと恐ろしく時間がかかります。このシリーズでは「短期集中」と掲げているように、短期間で使える技術をざっくり学ぶことを趣旨としています。そのため、IT現場でエンジニアとして早く活躍することができるように、実際に「使える技術」から紹介していきます。
本格的にJavaScriptに学ぼうとする場合でも、まずは俯瞰で全体像を把握するのはとても良い事です。大体の雰囲気を掴んだ上で、「JavaScriptを中心としたエンジニアを目指そう」と考えるようになったら、それからはこういった現場テクニックの記事だけではなく、W3Cなど正規の技術文書などから正しい言語仕様を学ぶことをオススメします。
いきなりイベント処理からやってみよう
イベントというのは、画面やプログラム上で発生する様々な出来事のことで、これにはユーザーの操作(クリックなど)も含まれます。イベント処理というのは、それらをJavaScriptなどの制御言語で捕捉して、何らかの処理を行うことを指します。
文法も何も習っていない状態で、いきなりよく分からないものを学ぶのかと不安になるかもしれませんが、イベント処理は画面要素に対しての操作を処理することができるため、これまで学んできた内容に付け加える形で理解しやすいと思います。
JavaScriptは、一部を除きブラウザ内だけで完結するものがほとんどなので、勉強するために特殊な環境やソフトウェアを準備する必要はまだありません。今回は扱いませんが、他のサイトの情報を取得する通信機能などの一部処理は、Webサーバー上からJavaScriptが実行されている必要があるなどの制限があるためご注意ください。
HTML要素のクリック
最初に紹介するのは、操作に関する処理で一番重要になる「クリック」の扱いについてです。HTMLやCSSで表現されるWeb画面は静的な情報ですが、クリックなどの操作に対して処理を追加することで動的な表現が可能となります。
パソコンでWeb画面を閲覧している場合、利用者はマウスなどのポインティングデバイスを操作してソフトウェアに対して様々な要求を行います。近年ではスマートフォンでWebを閲覧・操作している場面も多く、クリックだけでなくタッチを含めて利用者からの操作は複雑化しています。スマートフォンなどのタッチデバイスに対しては、従来のクリックとは別に最適化されたタッチというイベントがあります。
ここでは最も一般的なクリックについて紹介します。
<input onclick="alert('clicked');" type="button" value="ボタン" />上記例では、<input>タグを使ってボタンを表示し、クリック要素のイベント処理を行うonclickを定義しています。
この例のように、HTMLタグに対してのイベント処理は、タグの属性のように簡単に追加することが出来ます。処理したいイベントが複数ある場合は、属性の時と同じように複数列挙するだけです。他の方法を使って、後からHTMLタグに対してイベント処理を追加することもできます。
onclickの中に指定してある処理についても確認してみましょう。
alert関数 – 警告メッセージ(アラート)を表示
上記サンプルのボタンを押すと、ブラウザ上に”clicked”というメッセージが表示されます。これはアラート(警告メッセージ)と呼ばれるもので、一般的にはユーザーに注意を促すメッセージ表示を行うためのもので、JavaScriptの仕様内に含まれており、パソコンやスマートフォンなど一般的なブラウザ全てで使うことができます。ただ、あまりにも無機質で機械的な印象の表示となるため、利用者が閲覧するWebサイト上ではあまり使われないのが現状です。エンジニアの開発補助としてはとても便利な機能なので覚えておきましょう。
alertの後ろに括弧()がありますが、これは関数(function)の呼び出しであることを示しています。関数というのは、現段階では「一連の処理をまとめたもの」くらいに認識しておきましょう。alertはシステム側で用意された関数なので、組み込み関数などとも呼ばれます。
JavaScriptでは、文の終わりに;(セミコロン)を付ける決まりです。これをつけ忘れると、ブラウザはどこまでが一つの処理なのかを判断できず、正しい処理を実行することができないので注意しましょう。
括弧()の中には、’’(シングルクォーテーション)で囲まれたcheckedという単語が書かれています。これは関数の引数(パラメータ)で、alertの場合は「表示する文字列」となります。JavaScriptで扱う文字列は、””(ダブルクォーテーション)または’’(シングルコーテーション)で囲むことになっています。今回は、onclickのイベント指定で””(ダブルクォーテーション)を使っていて、その内側で””を使うと分断が起きて面倒なので”シングルコーテーションで指定しています。回避する方法もありますが、冗長になるのでここでは割愛します。
表示する文字列には、以下のように日本語を含めて自由に指定が可能です。また、<input>タグだけでなく、<div>タグに対して同じクリックのイベントを追加してみます。
<input onclick="alert('押されました!');" type="button" value="ボタン" />
<div onclick="alert('押されました!');" style="background-color:#c4c4ef;">
ここもクリックできます。
</div>このような実装をしてしまうと、同じイベント処理を複数のHTMLタグに記載しているので、表示される文字を変更したいような場合には、それぞれ修正する必要があります。修正が漏れてしまうと大変なので、エンジニアはこういった「同じ実装をコピペ」したようなプログラムは書くべきではありません。
こういった問題を回避するためにも、関数(function)について学んでおきましょう。
<script>タグとfunction(関数)
複雑な処理などをHTMLタグの中に書いてしまうと、著しく可読性が低下します。また、StyleSheetと同じように、異なるHTMLタグに対して同じような処理を適用したい場合などに、共通した処理が必要になる機会は多いです。
ここでは、そういった問題を解決してくれる「関数」について紹介していきます。
関数というのは、多くのプログラム言語において提供されている機能で、JavaScriptにも存在します。Webエンジニアには必須となる仕組みの一つなので、しっかりと確認しておきましょう。
<script>タグ
関数の紹介を始める前に、関数を書く場所について確認しておきます。
HTML文書の中に直接JavaScriptを記載することはできません。前項までに紹介したのはHTMLタグの属性(イベント処理)にJavaScriptを直接書き込みましたが、このままでは関数などの長い処理などを作成するのに不便です。
<script>タグは、HTMLの中で「記載された内容がJavaScriptである」ことを定義します。
CSSの時に出てきた<style>タグのように、通常<head>～</head>タグの中に記載するのが通例ですが、<body>～</body>タグの中に記載しても動作します。
<script>
// ここはJavaScriptとして判断される
</script><script>～</script>で囲まれた範囲はHTMLではなく、JavaScriptとして判断されます。
//(スラッシュを続けて2個)の後は、JavaScriptではコメント扱いになります。HTMLのコメント形式である<!– –>と混同しないように注意しましょう。
functionの定義
それでは本題である関数について紹介していきます。JavaScriptの関数はfunctionというキーワードを用いて以下のように定義します。
<script>
function onClick_html() {
alert('関数の中です。');
}
</script>functionに続けて記載されているonClick_htmlというのは関数名で、任意の名前を付けることができます。上記例で、()小括弧の中は空っぽになっていますが、ここには各種パラメータを定義することができます。
関数名につづいて{}中括弧で括られた範囲が、関数の処理実体となります。ここでは全項までに紹介したalert()を呼び出ししています。
関数の定義やパラメータのことなど色々と紹介すべきこともありますが、先にこの関数の呼び出し方を確認してみましょう。
functionの呼び出し
上で作成した関数(function)を呼び出しするのは簡単で、JavaScriptを書ける場所でその関数名(と必要であればパラメータ)を記載するだけです。
<script>
function onClick_html() {
alert('関数の中です。');
}
</script>
<input onclick="onClick_html();" type="button" value="ボタン" />イベント処理の項で紹介した<input>タグを同じように作成し、onclick属性でJavaScriptのfunctionであるonClick_html()を呼び出ししています。直接HTMLタグにalert()を書いていたのと同じように、ボタンを押すことでアラートが表示されることを確認できます。
この関数の仕組みが理解できていれば、デザイナーが作成したHTMLに対してクリックなどの処理を付与する仕事があった場合でも、落ち着いて「イベント処理の追加」と「関数の作成」をすればよいとわかるはずです。HTMLが更新された場合は、作成した処理が欠落することもあるので、そこはデザイナーと更新方法などについてすり合わせが必要な事も見えてくるでしょう。
scriptタグの外部ファイル化(.js)
Webエンジニアが一生懸命作成した<script>の中身が、デザイナーによるHTML更新で消えてしまっては大変です。作成したJavaScriptは外部ファイルに退避して安全に管理しておきましょう。また、外部ファイルにすることによって、共通の処理を複数のHTMLファイルに対して利用することができるという強力なメリットも得られます。
ここではCSS(.css)で行ったように、JavaScriptを外部ファイル(.js)にして、そのファイルを読込する方法について確認していきます。
外部ファイル化
JavaScriptを外部ファイルにするには、<script>～</script>タグの中身を、新規のテキストファイルなどにそのまま移し替えるだけです。
ファイル名(拡張子)は、JavaScriptのファイルであることを示す.jsにしておくのが通例です。.jsファイルの中には<script>タグは必要ないので注意しましょう。
// JavaScriptファイル(.js)の中身の例
function onClick_html() {
alert('関数の中です。');
}外部ファイルの読み込み
外部のJavaScriptファイルを読込するには、HTMLの<head>～</head>内で以下のように記載します。
<script src="js_file_name.js"></script><script>タグのsrc属性で、読込するファイル名を指定します。別のWebサーバーにあるファイルなどを読込する場合には、https://などから始まる絶対URLで指定することもできます。
<script />タグの「省略形」は禁じ手
タグの中身がないので省略形<script src=”” />のように書いてしまいたくなりますが、現時点では省略せず、</script>という終了タグを記載しておきましょう。
これはHTML/XML/XHTMLなどの複雑な経緯で各種ブラウザの実装状況が揺れているためです。省略形で書いた場合は、FireFoxなど一部のブラウザで読込されない状況が報告されており、例えブラウザ提供元がバージョンアップして対応したとしても、しばらくは古いブラウザが利用されることを考えると、HTMLやJavaScriptを提供するエンジニア側がこの問題を吸収するしかありません。
中身がないHTMLタグを省略せずに書くことは、Webエンジニアとしては苦渋の選択かもしれませんが、これが発展途上のWebの世界ということで受け入れていきましょう。
JavaScriptは基本装備だけど奥が深い技術
JavaScriptは、IT技術分野の中では、限定された環境でのみ動作するスクリプト言語と分類されますが、Web分野の中では、ユーザーが閲覧・操作する部分におけるプログラム言語に相当する技術と言えます。
IT業界内では、こういったユーザーに見える部分を専門的に扱うエンジニアを「フロントサイドエンジニア」として区別して扱うこともあり、IT企業採用などでも職種として名前が挙がることがあります。フロントサイドエンジニアは、まさにこのJavaScriptを中心にした画面処理のスペシャリストです。
Webの世界は、最初の回に紹介した通り、使われている技術分野が広く、Webエンジニアという職種はそれを広く扱う・扱えることが求められます。自分の興味・関心がある分野と出会えたのであれば、その道を専門的に学んでいくのもよいでしょう。他のエンジニアとの差別化も図れ、キャリアアップの道も拓けるかもしれません。
今回は駆け出しWebエンジニアのために、JavaScriptの雰囲気を知ってもらい、デザイナーとの共同作業などですぐに使いそうな点だけに絞って紹介してきました。次回はもう少し踏み込んで、JavaScriptを使った実務的な処理を、ライブラリの活用を含めて紹介する予定です。
JavaScriptは、簡単に取り組み・勉強できるエンジニアらしい技術で、とても楽しくやりがいがある分野です。現在はWeb分野を超えて、元来JavaScriptのデータ型であるJSONなどは、行政その他のサービスで広く活用されています。是非、色々な事を試しながら、楽しく学んでいきましょう。
