＠IT
アジャイル/DevOps
Java Agile
JavaScript/Ajaxで知るWebアプリとスクリプトの常識...

JavaScript/Ajaxで知るWebアプリとスクリプトの常識：Webアプリの常識をJSPとStrutsで身につける（終）（1/3 ページ）

本連載は、JSP／サーブレット＋StrutsのWebアプリケーション開発を通じて、Java言語以外（PHPやASP.NET、Ruby on Railsなど）の開発にも通用するWebアプリケーション全般の広い知識・常識を身に付けるための連載です

» 2009年10月21日 00時00分公開

[竹下靖久，株式会社メセナ・ネットコム]

いまさら聞けない、スクリプト入門

　さまざまなWebアプリにおける常識を紹介してきた本連載も今回で最終回です。今回は番外編として、JSPとStrutsといったJavaの枠を超えて、Webアプリケーション開発におけるスクリプトの常識について説明していきます。

　「スクリプト」という言葉はよく耳にしますが、いったいどのようなものなのでしょうか？本記事ではスクリプト概念についての説明と、代表的なスクリプト言語であるJavaScriptについて説明し、最後にAjaxについても触れていきたいと思います。それぞれにJSPと連携するサンプルを提示しますので、ぜひご参考に。

■スクリプトとは？

　スクリプト言語によってプログラミングされたプログラムをスクリプトと呼びます。一般的なプログラミング言語と同様の記述方法を取りますが、コンパイルを行い、コンピュータの理解できる機械語に変換して実行するプログラミング言語と異なり、機械語変換は自動的に行われるため、手間を掛けずに実行可能です。これは、ソースコードを逐次解釈しながら実行するインタプリタ方式を採用しているためです。

　また、Webページ上でHTMLだけでは表現できない処理・動作を実現するためのプログラムをスクリプトと呼ぶことが多いです。代表的なスクリプト言語にはJavaScript、Perl、PHP、ActionScriptなどがあります。

■スクリプトを使う利点

メンテナンスが容易
インタプリタ方式を採用しているため、再コンパイルやシステムの再起動が必要ない。つまり、プログラム修正がいつでも行える（スクリプト最大の利点といえる）
習得が容易
記述方法が比較的簡単で、基本的なプログラミングができる人であれば、すぐに扱える

■スクリプトを使う問題点

実行速度が遅い
インタプリタ方式であるため、コンパイラ方式と比較すると、処理速度は劣る。大規模なプログラムには向かない

JavaのWebアプリ開発でも必須の「JavaScript」

　スクリプトがどのようなものか分かったところで、次は代表的なスクリプト言語であるJavaScriptについて説明していきます。いまやWebアプリケーション開発で必ず耳にするJavaScriptとは、いったいどのようなものなのでしょうか？

■JavaScriptとは

　米ネットスケープコミュニケーションズが開発したスクリプト言語の1つです。静的な情報だけしか表示できないHTMLソースにJavaScriptを埋め込むことで、動的な情報の表示・制御ができます。つまり、HTMLのお手伝いをしてくれるのがJavaScriptです。名前に「Java」という文字がありますが、Javaとの相互性はなく、まったく別のものです。

　JavaScriptの詳細については、下記記事もご参照ください。

連載インデックス「いまさら聞けないリッチクライアント技術」 - ＠IT via kwout

■JavaScriptの特徴

実行環境の広さ
Internet ExplorerやFirefoxなどの主要Webブラウザにはスクリプト・エンジンが搭載されているため、特別な設定を行わずともJavaScriptの実行が可能（ただし、Webブラウザごとで動きが異なることも）
作成が容易
メモ帳などを使ってHTMLソースの中にJavaScriptを書き込むだけで使える。また、記述方法がJava言語やC/C++に似ているため、プログラミング経験があれば習得するコストが少なくて済む

■JSPにJavaScriptを埋め込んでみよう

　それでは、JavaScriptを埋め込んだJSPファイルを作成してみましょう。作業環境は、連載第2回「Strutsの常識を知り、EclipseとTomcatの環境構築」で構築した環境を利用します。Who.jspを以下のように変更し、「BMI算出」サンプルを作成します。

Who.jsp

<%@ page contentType="text/html; charset=Shift-JIS" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<html:html>
  <head>
    <title>Who</title>
    
    <script type="text/javascript">
        <!--
        //【1】始まり
        function bmiCalculation(form){
            height2 = form.height.value*form.height.value;    //身長（m）の2乗
            bmi = form.weight.value/height2         //体重÷身長の2乗
            bmi = Math.round(form.weight.value/height2);        //小数点以下四捨五入
            
            form.bmi.value = bmi;
            
        }
        //【1】終わり
        // -->
    </script>
    
  </head>
  <html:form action="/hello">
    <table border="0">
      <html:errors/>
      <tr><td>
        あなたの名前は？<br>
        <html:text property="name" size="20" maxlength="30" />です。
        
        <br>
        あなたの体重は？<br>
        <html:text property="weight" size="20" maxlength="30" />kgです。<br>
        
        あなたの身長は？<br>
        <html:text property="height" size="20" maxlength="30" />mです。<br>
        
        <br>
 
        <html:button property="button" value="BMI算出" onclick="bmiCalculation(form)"/><!-- 【2】 -->
        <br>
        あなたのBMIは<html:text property="bmi" size="20" maxlength="30" />です。
        
      </td></tr>
      <tr><td>
        <html:submit value="OK" />
      </td></tr>
    </table>
  </html:form>
</html:html>

　上記サンプルプログラムは、入力された体重と身長を基にBMI（体重指数）を算出し、ダイアログで結果を表示するJavaScriptを組み込んだJSPファイルです。

補足：JavaScript未対応ブラウザへの配慮としてJavaScriptは「」でコメントアウトしてください

　【1】（9～18行）をご覧ください。この部分がJavaScriptです。JavaScriptは、通常<script>タグで囲んで記述します。【2】（39行）の<input>タグにある。onclickというコード、これをイベントハンドラといい、ページ上でどのように操作するとJavaScriptを実行するかを指定するものです。この場合、算出ボタンをクリックすると、【1】のJavaScriptを実行します。

■JavaScriptイベントハンドラはいろいろ

　ちなみに、イベントハンドラはonclick以外にもさまざまなものが用意されています。

**表　イベントハンドラ一覧（抜粋）**
	イベントハンドラ	JavaScliptが実行されるタイミング
	onclick	クリックされたとき
	ondbclick	ダブルクリックされたとき
	onkeydown	キーが押されたとき
	onkeypress	キーがしばらく押されたとき
	onkeyup	押されたキーが離れたとき
	onmousedown	マウスボタンが押されたとき
	onmouseup	マウスボタンが離されたとき
	onmouseover	マウスカーソルがそのオブジェクトの上に乗ったとき
	onmouseout	マウスカーソルがそのオブジェクトの上から離れたとき
	onmousemove	マウスカーソルが移動したとき
	onload	ページが読み込まれたとき
	onunload	ほかのページに移動するとき
	onload	ページが読み込まれたとき
	onfocus	フォーカスを得たとき
	onsubmit	フォームがサブミットされたとき
	onreset	フォームがリセットされたとき
	oncheange	フォーム部品の内容が変更されたとき
	onresize	ウィンドウがリサイズされたとき
	onmove	ウィンドウが移動されたとき
	ondragdrop	ファイルがウィンドウにドラッグ＆ドロップされたとき

　次ページでは、実際にサンプルを動かしてみます。その前に、helloForm.javaとHello.jspを変更しますが、この2ファイルについては、説明を省きます。確認したい方は、サンプルのソースコードをここからダウンロードしてください。

サンプルプログラムを実行

　　　　　　 1|2|3 次のページへ

SpecialPR

印刷／保存

連載通知

スポンサーからのお知らせPR

SpecialPR

Java Agile 記事ランキング

本日月間

» ランキングをもっと見る

＠IT eBook

システム開発ノウハウ【発注ナビ】PR

編集部からのお知らせ

4/21～23【Amazonギフトカードプレゼント】【無料オンラインセミナー】『＠IT NETWORK Live Week 2025 春 ──「つながること」で深まる課題を越えるには』で、みんなの銀行上席部長 CISO 二宮賢治氏による【基調講演　BaaS拡大を支えるセキュリティ：みんなの銀行が直面する課題と解決への道筋】、広島県大崎上島町大崎上島町企画課調整監内藤潤三氏による【基調講演　丸投げせずに3層全てをゼロトラスト化　大崎上島町の挑戦】などを配信

あなたにおすすめの記事PR

@ITについて

RSSについて

＠ITのRSS一覧

アイティメディアIDについて

アイティメディアIDとは

メールマガジン登録

＠ITのメールマガジンは、もちろん、すべて無料です。ぜひメールマガジンをご購読ください。

申し込みページへ

ITmediaはアイティメディア株式会社の登録商標です。

JavaScript/Ajaxで知るWebアプリとスクリプトの常識：Webアプリの常識をJSPとStrutsで身につける（終）（1/3 ページ）