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

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

シグマコンサルティング 設楽 亜紀子
2008/01/21

2. 開発環境を準備しましょう

 

今回は、

「Visual Web Developer 2008 Express Edition」(以下、VWD 2008)

という誰でも無料で利用できる開発環境を使います(VWD 2008は「Visual Studio 2008 Express Editions」の1つです)。「Express Edition」は、Professional Editionなどの有料版である上位製品に比べると機能に制限はありますが、初心者がプログラミングを始めるに当たってはこれで十分でしょう。

 まずは、Web開発用のVWD 2008をダウンロードします。

 「Visual Studio 2008 Express Editions公式ページ」を訪れ、「Visual Web Developer 2008 Express Edition」の「Web インストール (ダウンロード)」というリンクをクリックしてセットアップを実行します。

 セットアップ画面では設定は何も変えずに[次へ]で進んでいき、[インストール]を実行してください。セットアップ実行時にはこんな画面が表示されます。

VWD 2008のセットアップ(インストール中)

 インストールが終了すると、再起動を要求するメッセージが表示されることがありますが、その場合はそれに従ってPCを再起動しましょう。

 これで.NETによるWebアプリ開発の準備ができました! ちなみに、「ASP.NET(エー・エス・ピー・ドットネット)による開発」というのは、この「.NETによるWebアプリ開発」を意味しますので、覚えておきましょう。

     
  いよいよ始まるんだね。ロックな昼飯? 完成まで頑張るぞー!

3. 新規プロジェクトを作成しよう

 

まず、先ほどセットアップしたVWD 2008を起動します。[スタート]メニューから[すべてのプログラム]−[Microsoft Visual Web Developer 2008 Express Edition]をクリックして実行してください。

 次に、VWD 2008で「新しいWebサイト」のプロジェクトを作成します。なお、プロジェクトとは、VS 2008の用語で、1つの開発単位です。起動したVWD 2008の上部にあるメニュー・バーより[ファイル]−[新しい Web サイト]をクリックしてください。すると、このような[新しい Web サイト]という画面(=ダイアログ)が表示されるので、[テンプレート]で「ASP.NET Webサイト」を、[言語]で「Visual C#」を選択して、[OK]ボタンをクリックしてください。

「新しいWebサイト」プロジェクトの作成
     
 

実際に作り始める前に、VWD 2008の作業画面について説明しておきましょう。主要各部の用途と表示方法を示します。作業を進める途中で迷子になったらここを確認してください。

     
 

いよいよだ! けっこうシンプルな画面だね。

VWD 2008の作業画面
(VWD 2008を含む)VS 2008でプログラミングを始める前に、この作業画面の用途をまずは覚えましょう。なお、この作業画面内の各ウィンドウは、配置を一部動かしたり、デフォルトでは非表示だったものを表示したりしているので注意してください。ウィンドウの配置移動はドラッグ&ドロップで行えます。表示/非表示の切り替えは、[ツールボックス]、[プロパティ]ウィンドウ、[ソリューション エクスプローラ]、[エラー一覧]ウィンドウなどについてはメニュー・バーの[表示]の下の各メニュー項目で行えます。[プロパティ]ウィンドウなどの各ウィンドウの右上にあるピン・マーク([×]の左)をクリックすると、ウィンドウを「自動的に隠す」機能をオン/オフにすることもできます。

 [ツールボックス]:Webページ上に配置できるさまざまな部品が用意されています。

 Webページの編集画面:で表示方法を切り替えられます。で[デザイン]を選んだときは「Webフォーム・デザイナ」という編集画面に、[ソース]を選んだときは「コード・エディタ」という編集画面に切り替わり、[並べて表示]を選んだときは上半分が「コード・エディタ」で下半分が「Webフォーム・デザイナ」の編集画面になります。

 編集画面の表示切り替え:の表示方法を切り替えることができます。

 [プロパティ]ウィンドウ:コントロールなどの設定情報(プロパティ)の確認・編集ができます。

 [ソリューション エクスプローラ]:Webサイトを構成する各種ファイルの確認・編集ができます。

 [エラー一覧]ウィンドウ:編集したコードに矛盾がある場合などに、エラー内容が表示されます。

     
  では、Webアプリの作成作業に入りましょう。


 INDEX
  [フレッシュマン企画連載]初めてでも安心! 1日で作れるWebアプリ講座
  第1回 プログラミングはこんなに楽しい!
    1.Webアプリって何でしょう?
  2.開発環境の準備/プロジェクトの新規作成
    3.コントロールの配置/イベントの設計
    4.ビルド&デバッグ/代入と変数とデータ型
    5.今回のおさらい

インデックス・ページヘ  「初めてでも安心! 1日で作れるWebアプリ講座」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間