入門ソースコード

入門ソースコード

Array
(
    [kubun] => 1
    [SendButton] => 送信
)

simple.php

<SCRIPT language=JavaScript>
</SCRIPT>
<!-- *******************************************************
 スクリプトタグを先頭に置く事によって、HTMLタグと記述
 を分離すると共に、VBScriptに仕様変更した場合のトラブル
 を防ぐ
******************************************************** -->

<HTML>

<HEAD>
<!-- *******************************************************
 文字化け防止の為必ず入れる (SHIFT JIS用)
******************************************************** -->
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
</HEAD>

<BODY>

<!-- *******************************************************
 送信方法は POST
******************************************************** -->
<FORM name=frmMain method=post action=simple.php>

	<SELECT name=kubun>
	<OPTION value=1>登録
	<OPTION value=2>修正
	<OPTION value=3>削除
	</SELECT>

	<INPUT name=SendButton type=submit value="送信">

</FORM>

</BODY>
</HTML>

<!-- *******************************************************
 ページロード時の初期処理
******************************************************** -->
<SCRIPT for=window event=onload language=JavaScript>
</SCRIPT>

<!-- *******************************************************
 デバッグ用 POST メッセージの表示
******************************************************** -->
<PRE>
<?
print_r( $_POST );
?>
</PRE>

ソースコードの見易さ

これを実現するには、次の３つのポイントを常に気にかける事が重要です。

コメント
インデント
行間

コメントに関しては、特に「タイトル」が重要です。ソースコードの部分部分に書くコメントももちろん重要ですが、「そこから何が書かれているか」という事を明示するのが「開発」では非常に重要な事となります。

<!-- *******************************************************
 文字化け防止の為必ず入れる (SHIFT JIS用)
******************************************************** -->

このコメントは HTML 用ですが、あると無いとでは大違いです。ただ、このソースは PHPなので、以下のようにもできます。

<?#********************************************************
# 文字化け防止の為必ず入れる (SHIFT JIS用)
#******************************************************* ?>

こうする事によって、クライアント側へ表示された時のHTMLソースからコメントを省く事ができます。

また、PHP では、コメントとして　"//" も使用できるのですが、"#" を使用しているのは、JavaScript と区別する為です。PHP では　HTML、JavaScript、PHP という３種類の言語が一つのソースコード上に混在します。できるだけ区別できるようにするのが望ましいでしょう。

( ※データーベースを使い出すとSQL、スタイルシートだとCSS、IE限定だとVBScriptもありますので、Webアプリケーションをやろうと思うと覚える事はたくさんあります )

次に重要なのは「インデント」ですが、コメントのタイトルがソース全体を見渡すのに役に立つのに比べて、「インデント」はソースコードを正しく読み取る為に役に立ちます。これは、第３者よりも、コード書く人自身が「ミス」をしないようにするという効果もあり、プログラマとしては絶対守るべき注意点です。

HTML を書く場合、通常の「手続き型言語」のように決まった規則はありませんが、以下のように含んだり含まれたりする関係では、インデントを行なう事で格段に解りやすくなります。

<FORM name=frmMain method=post action=select.php>

	<SELECT name=kubun>
	<OPTION value=1>登録
	<OPTION value=2>修正
	<OPTION value=3>削除
	</SELECT>

	<INPUT name=SendButton type=submit value="送信">

</FORM>

ただ、あまりやりすぎると逆にわかり難くなる場合もあります。また、その必要が無い場合もあります。上記の例では、SELECT と OPTION がインデントされていませんが、この書式の特徴上同じレベルに書いても十分に解りやすい例です。

しかし、それをさらに解りやすくしているのが「行間」です。これが思いのほか重要です。事実、今書いている文章も全て一つで書かれているのでは無く、あるまとまりで行間が挟まれています。人間は行間があるほうが、文章を読み取りやすいのです。プログラミング言語にも同じ事が言えます。

初心者レベルのブログラマではたいていこの「行間」を作ろうとしません。コードを書くのに精一杯だからでしょうが、ソースコードの「読み易さ」は、プログラマにとって「命」です。決しておろそかにしてはいけません。なぜなら、いずれ自分の首を絞める事になるからです。

おまけですが、インデントは、タグ同士だとは限りませんタグ自身にも有効です。

<INPUT
	name=SendButton
	type=submit
	value="送信"
>

これは、タグ内の属性の記述が多くなった時に有効です。やたら横に伸びる記述より、しっかりと属性を確認できます。また、属性追加時や他のソースコードへのコピー時に威力を発揮します。

何故 SCRIPT タグを先頭に置くのか

これにはいくつか理由があります。

まず第一に、そのページのデフォルト言語を宣言する役目を担っています。IE では、先頭に SCRIPT タグを書く事によってその属性としての　language=JavaScript がページ全体でデフォルトとなるからです。( 表現が正確ではありませんが、結果的にそうなります )

通常、JavaScript がデフォルトなので、VBSCript を使う場合に重要となります。一般的なインターネットゾーンでの使用時にはどうでもいいことですが、「開発」では、VBScript を使った「イントラネットゾーン」でのシステムも重要なのです。

それ以外の理由は「開発」を行なう場合のソースコードとして絶対に守られるべき事が理由になります。それは、「外部ファイル」の取り込み記述は先頭で行なうべき、という根拠です。

SCRIPT タグでは、SRC 属性によりスクリプト部分を外部ファイルにする事ができます。当然どのような外部ファイルを使っているかと言う事を一目瞭然にするには先頭に記述すべきなのです。ソースコードをエディタで開いた瞬間、目に入りやすい位置は誰にとっても「先頭」です。

さらに、HTML と確実に分離しておける場所と言えば先頭か最後になる訳ですが、HTMLによる画面定義は比較的固定的な為、より読みやすい位置として手続き言語セクションは先頭に置くべきなのです。

文字化け防止

HTML を書く者にとっては、殆ど常識的な META タグでの記述ですが、これは起こらなくても良いトラブルを未然に回避する効果を持ちます。

プログラマと一口に言っても、いろいろなレベルが有って問題の原因がこれである事に気が付かない人もいます。そのような人も含めて一つのチームでプロジェクトを進める場合、ソースコードには、たとえ簡単な「テスト」でも、これを書くよう義務づけておけば、余計な時間の無駄を上位プログラマに強いる事がなくなります。

まあ、一種のおまじないのような感はありますが、「開発」において雛形を作成する際にはそのような気配りを随所に配置する必要が出てきます。これは、このような簡単な問題でも「軽く見ない」という考え方を養うのに重要です。

<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">

CGI でシステムを作る場合、通常 HTTP ヘッダに同等の機能を持つ内容を書き出すのが当たり前なのですが、やはり HTML には常に書いておいたほうが良いでしょう。ただ、この記述を暗記するのも面倒なので、せっかく CGI ですから関数にするのも一つの方法です。

<?= HtmlCharset( "Shift_JIS" ); ?>

<?
function HtmlCharset( $Target ) {

	$strRet = '<META';
	$strRet .= ' http-equiv="Content-type"';
	$strRet .= " content=\"text/html; charset=$Target\">";

	return $strRet;

}
?>

onload イベント

ページの初期処理部分です。

初期処理と言っても、HTML ページがクライアント側で表示が完了した後に実行されるイベントです。ここでは JavaScript で書かれています。

プログラミングする上では非常に大事なタイミングであり、VB では Form_Load() にあたり、Windows プログラミングにおいては WM_CREATE 等にあたります。今後いろいろなパターンのWebアプリケーションを作成する際に必ず「お世話」になるので、ソースコードには入れておいたほうが良いでしょう。

以下は一例です。

<SCRIPT for=window event=onload language=JavaScript>

	window.focus();
	top.moveTo( 0, 0 );
	top.resizeTo( screen.width, screen.height - 32 );

</SCRIPT>

記述位置がソースコードの終わりになっているのは、先頭の JavaScript と意味が異なるので区別する為です。

ちなみに、VBScript で書くと以下のようになります

<SCRIPT FOR=window EVENT=onload LANGUAGE="VbScript">

	window.focus
	top.moveTo 0, 0
	top.resizeTo screen.width, screen.height - 32

</SCRIPT>

または、

<SCRIPT FOR=window EVENT=onload LANGUAGE="VbScript">

	Call window.focus()
	Call top.moveTo( 0, 0 )
	Call top.resizeTo( screen.width, screen.height - 32 )

</SCRIPT>

です

デバッグ

FORM タグの method 属性が post なので、このページでは POST データを表示してデバッグします。PHP では便利な関数が有り、ページの最後で以下の記述をする事によって簡単にデバッグできます。

<PRE>
<?
print_r( $_POST );
?>
</PRE>

テーブルタグを使ってもう少し見やすくするよう工夫するつもりならば、以下を参考にすると良いと思います。これは、Perl や ASP でも同様の処理で実現できます。

<?
	print "<TABLE >";
	foreach( $_POST as $Key => $Value ) {
		print "<TR>";
		print "<TD>$Key</TD><TD>$Value</TD>";
		print "</TR>";
	}
	print "</TABLE>";
?>