フレッシュマン企画連載
初めてでも安心！ 1日で作れるWebアプリ講座

第1回 プログラミングはこんなに楽しい！

簡単にチェックする方法がありますよ。「ビルド」です。本来のビルドの意味からちょっと外れてしまうのですが、難しいので今回はこう覚えます（本来のビルドの意味はこちら）。

「ビルドをすると、文法的なエラーがないか確認することができる！」

　ビルドを行うには、メニュー・バーより［ビルド］−［Web サイトのビルド］をクリックします。

　ビルドが成功するとVWD 2008の左下に「ビルド正常終了」が表示されます。入力したコードに誤りがある場合は［エラー一覧］ウィンドウに説明が表示されます。

VWD 2008の左下に表示された「ビルド正常終了」

［エラー一覧］ウィンドウに表示されたエラーの説明

　「ビルド正常終了」となるのを確認してください。エラーが表示されたら、［エラー一覧］ウィンドウの説明に従って、セミコロン（;）の抜けや、スペル間違い、大文字小文字の間違いがないか確認しましょう。

そこで行うのが「デバッグ」です。Webページ作成の練習でも1度行っていますね。ビルドが正常終了する状態でないと、デバッグの実行も失敗します。

　ところで、デバッグとは（ブラウザ上の）実行時にエラーが起きないかを確認することで、バグ（＝不具合）を取り除くという意味です。ビルドが成功したら、さっそくデバッグしてみましょう。うまくいかない場合はエラー内容が表示されます。

　［ソリューション エクスプローラ］で「hirumeshi.aspx」を右クリックして、コンテキスト・メニューから［スタート ページに設定する］を選びます。そして、メニュー・バーより［デバッグ］−［デバッグ開始］をクリックしてデバッグを実行しましょう。

Webページのデバッグ実行

シグマクン、乗ってきましたね。ではこのままボタン・クリック時のイベントを記述しましょう。

　今度はちょっと行数が多いですが間違いのないように記述してくださいね。

　「//」で始まる行はプログラムの動作には影響しないコメント文です。ですので、入力が面倒であれば省いても構いませんし、メモとして自分の言葉で書き換えても構いません。コメント文をうまく活用すると、自分にも他人にも分かりやすい、人にやさしい記述ができますよ。

　次の画面の25〜54行目をButton1_Click（＝ボタン・クリック時）のイベントの{ }内に記述してください。

Button1_Clickのイベントに記述する内容

コードのテキストはこちらからコピーできます。 各番号については以下で説明します。

　ここで記述したのは以下のような内容です。

テキストボックスに入力された名前をLabelコントロール「Label2」に表示します（未入力だったら「なんとか」さんと表示）。

ArrayList（アレイリスト）という配列クラス（例えるなら「番号付きで並んだロッカー」）にお昼案を順番に入れていきます。そして、ランダムな数値を1つ生成して、その数値の番号のArrayList（＝ロッカー）からお昼案を取得しLabelコントロール「Label3」に表示します。

テキストボックスに入力された名前と、ページ・ロード時にLabelコントロール「Label1」に表示した「なに食べよう？」のテキストを消します。

　記述したプログラムのコードは（特に指定のない限り）上から下へ順に実行されます。

　最後に、もう一度デバッグを実行し、動作の確認をしましょう。

今回はプログラミングを楽しむことが目的なので、よく分からないままでもいいです。特にの部分はちょっと難しいので余力があればこちらを参考にしてください。

• ランダムな数値（＝乱数）について
• ArrayListについて

　とについては詳しく説明しますね。

ここまで入力してみると、確かに「=」（イコール）を1つだけで使っている場合と、2つ続けて使っている場合があるのが分かりますね。

　一般的な「=」の意味を考えて見ましょう。恐らく誰でも初めに思いつくのは「イコールの左右が等しい」という意味でしょう。

しかし（C#による）プログラミングでは、左右が等しいイコールは「==」で表します。例えばButton1_Clickのイベントに記述する内容の「if (name == "")」の記述のように、左辺（name）と右辺（""）が等しいかどうかを調べるときに「==」を使います。

　一方、プログラミングでの「=」が表す意味は「代入」です。代入というと難しく感じるかもしれませんが、数学で使った「x = 1」を例に考えて見ましょう。

左辺「x」とは数でも量でもなく、「“x”という名前の入れ物」を意味します。そして右辺「1」は入れ物「x」に取りあえず入っている実体です。左辺の「x」はあくまでも入れ物の名前ですので、どんな名前にも変えることができますし、右辺の「1」もその場に応じて「2」にも「3」にも変えることができます。

ただしプログラミングでは、“x”のような記号っぽい名前ではなく、ひと目で何を入れるための入れ物かが分かるように、英単語を使った分かりやすい名前（例えば「length」「name」など）を付けることが多いです。

もう少し説明しましょう。「x = 1」のような例だと、ついつい数学の難しい計算を思い出して頭が痛くなってしまいそうです。でも、右辺に入れる値は、何も数字でなくてもよいのです。

　例えば、

address = 東京都中央区

は、「『address』（という名前の入れ物）に『東京都中央区』（という値）を入れましたよー」という意味を表します。左辺（入れ物の名前）も、右辺（どんな値を入れるか）も好きなように決めることができるのです。

何となくでもいいですよ。そのうち覚えられますから、焦らずゆっくりやりましょう。

　ではちょっと練習問題！

1行目：my_bag = 2
2行目：my_bag = my_bag + 3
3行目：my_bag = my_bag + 1

　さて、3行目まで来たときに、my_bagの値は何になるでしょうか？

　正解は「6」です。分かりやすいように数をオレンジの個数として説明します。

1行目では、バッグに2つのオレンジを入れました。
2行目では、バッグに3つのオレンジを追加しました。でも、すでに2つ入っているので、現時点では全部で5つのオレンジが入っています。
3行目では、バッグに1つのオレンジを追加しました。すでに入っている5つのオレンジと合わせると、全部で6つのオレンジが入っています。

　こういうイメージです。

　もう1つ練習問題！

1行目：my_bag = クマのぬいぐるみ
2行目：my_bag = ネズミのぬいぐるみ

　さて、2行目の時点ではmy_bagには何が入っているでしょうか？

　正解は「ネズミのぬいぐるみ」です。

1行目では、my_bagにクマのぬいぐるみを入れました。
2行目では、気が変わったのでクマはやめてネズミのぬいぐるみを入れることにしました。

　なので、いまはネズミのぬいぐるみがmy_bagに入っています。

僕なら何を入れようかなー。後で変更もできるから気が楽だ。

何か（＝実体）を入れられるこの入れ物のことを「変数」といいます。my_bagに入れるもの（＝実体）はいつでも自由に変更できるのです。

　プログラミングする際には、入れ物を作ってから、その入れ物に中身を入れるという「代入」を何度も繰り返します。

　ここが重要なポイントです。入れ物を作るときには、必ず入れ物の「型」を指定するのです。

紙袋にジュースを入れたりしませんよね？ ペン・ケースにサッカー・ボールを入れたりもしませんよね？ それと同じで、入れたい中身に合った入れ物を用意してあげるのです。このような目的に合った入れ物の種別のことを「型」もしくは「データ型」といいます。

　ここでは最重要の2つのデータ型を覚えましょう。ボタン・クリック時のイベントの記述でも出てきましたよ。

• int（イント）型：整数を入れることができるデータ型
• string（ストリング）型：文字列を入れることができるデータ型

　まずはこれだけ覚えれば十分ですが、ほかにもデータ型はたくさんあります。詳しく知りたい場合は「C#のデータ型」を見てください。

　プログラミングで入れ物（＝変数）を作るときには、初めにデータ型を指定して、スペースを空けて、入れ物の名前を記述します。例を示しましょう。

int my_bag
　　 → 整数（int型）のデータを入れることができる「my_bag」という名前の入れ物

string my_bag
　 →文字列（string型）のデータを入れることができる「my_bag」という名前の入れ物

……ということは、さっきの「Button1_Clickのイベントに記述する内容」にあったの中身をひもといてみると……。

　まず、文字列を入れられるstring型の入れ物を作って、その入れ物の名前は「name」としたんだね。ここで変数nameが誕生したわけだ。

　で、変数nameに入れる値は、テキストボックスに入力されたテキスト（＝文字列）なんだ。

　けれどもし、テキストボックスが未入力だった場合はnameの中身は「空」（＝「""」）と等しいはず。そのときは、変数nameに「なんとか」という値を入れてあげるんだ！

　最後はラベル2のテキストに、変数nameに入っているその時点の値を表示させているんだね！！ 合ってるよね？

そのとおりです！ そのことが分かればもう十分。ばっちりです。

　今回はC#という言語を使って、最初に説明した.NETの中でもASP.NETという技術を利用してWebアプリを作りました。ほかにもJava（ジャバ）やPHP（ピー・エイチ・ピー）という仕組みを利用してWebアプリを作ることもできるのですよ。

.NETはマイクロソフトが提唱するシステム基盤で、現在、多くの企業でシステム構築の際に採用されています。しかも、今回使ったVS 2008 Express Editionは、無料でリッチな開発環境となっているので、開発を初めて経験する人にとってはもってこいの環境です。それで、今回はその中のASP.NETという技術を使いました。

　ちなみに、ASPとは「Active Server Pages」の略です。その名のとおり、動的なページを作ることができる仕組みなんですよ（ASP.NETについて詳しくは「『ASP.NETってナニ？』と闘う！」を読んでみてください）。

おっ！ もうできたのか？ ずいぶん早いなー。なかなかやりますねぇ、あのクマちゃん。

　どれどれ？

ネモトサンが実行したWebアプリ

　……！！ 面白い！ 優柔不断なオレさまにはぴったりのWebアプリじゃないですか？！ さっそく明日から使おうーっと