初心者でも最低限知っておくべきWebアプリケーションの仕組み

講座全体の概要

プログラミング基礎講座の第3回の後半です。講座全体の概要は以下の記事ゼロから始めるプログラミング基礎講座　第1回【講座の概要・目的】をご覧ください。

前半で作成したプログラム

前半で作成したプログラムを再掲します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;

namespace BasicCourse3_1.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }

        //変更箇所①
        public int CalculatedResult;

        public void OnGet()
        {
            //変更箇所②
            CalculatedResult = 3;
            CalculatedResult *= 2;
            CalculatedResult += 1;
        }
    }
}

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    @* 変更箇所③ *@
    <h1>プログラムの実行結果</h1>
    <p>計算結果は @Model.CalculatedResult です。</p>
</div>

実行結果が下の画面です。

前半の続きで、変更箇所③とプログラム全体の仕組みを説明していきます。

処理結果をブラウザーに表示するためのHTML作成処理　変更箇所③

変更箇所に元々あったWelcomeメッセージ等は不要なので削除しています。

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

上に示した部分は削除するとうまく動きませんので注意してください。「Home page」の部分はブラウザーに表示したときのタイトル（ブラウザーのタブに表示される名前）ですので、変更しても構いません。

<div class="text-center">
    @* 変更箇所③ *@
    <h1>プログラムの実行結果</h1>
    <p>計算結果は @Model.CalculatedResult です。</p>
</div>

この部分の基本的な部分はHTMLで書かれています。画面の見た目はこのHTML及びCSSで作ります。HTML、CSSについては詳しく触れませんが、一般的なWebページと同様に作ることができます。

今回はプログラムで計算した変数の値を画面に表示したいので、「@Model.CalculatedResult」で変更箇所①で作った「CalculatedResult」という変数を参照しています。

    <p>計算結果は @Model.CalculatedResult です。</p>

これにより、HTMLで記述されている”計算結果は”と”です。”というプログラムの実行前から決まっている文章の間に、プログラムの実行により計算された値を表示するようにプログラミングしています。

このHTMLで記述された、プログラムの実行前から決まっている状態を

静的

と言います。対して、プログラムの実行により決まる状態を

動的

と言います。静的なコンテンツとか、動的なコンテンツというような感じでよく使われる言葉なので覚えておきましょう。

Webアプリケーションとフレームワーク

順次実行については前半の内容でなんとなく理解できたと思うのですが、変更箇所③でHTMLとは少し違う、「.cshtml」というファイルが出てきたりして、今は「なんだかよくわからないけど動いた」という状態だと思います。ここからはこのプログラム全体がどの様な仕組みで動作しているのか、その概要を説明していきます。

今回のプログラムは「Webアプリケーション」という種類のプログラムです。「Webアプリケーション」は普通のWebページと同様に、ChromeやEdge等のブラウザーから、URLで指定したサーバーと通信し、サーバーから取得したHTMLをブラウザーが表示するプログラムです。

単純なWebページであれば、サーバーは静的なHTMLをただ返すだけです。20年ぐらい前は静的なWebページがほとんどでしたが、今現在では、完全に静的なWebページはほとんどなく、サーバーで何らかの処理をして動的に生成されています。サーバーで処理するプログラムでよく使われているのが「PHP」という言語ですが、他にも「Ruby」、「Java」、「Python」など色々な言語が利用されています。その中の１つに「C#」もあるわけですが、「C#」や「Java」は一般的なWebページではなく、もっと大規模なWebシステムで利用されることが多いです。

話がそれましたが、「Webアプリケーション」をできるだけ単純にして説明すると、

（1）ブラウザーからURLで指定したサーバーへ処理を要求する。

（2）要求を受け取ったサーバーが処理を実行し、結果をHTMLで返す。

（3）ブラウザーはサーバーから送られてきたHTMLを表示する。

という流れで動くプログラムです。

Webアプリケーションについての詳しい説明は基礎講座とは別の講座でまとめる予定ですので、現段階では上記の流れだけ覚えておいてください。今回プログラミングしている部分は、全て（2）のサーバーでの処理部分になります。同じPC上で動いているためわかりませんが、Visual Studio がパソコン上にサーバーを自動的に用意してブラウザーとの通信をしています。

本来、ブラウザーとの通信等、Webアプリケーションの仕組みを全て自分でプログラミングすることは非常に大変です。ですが、それを一定のルールにしたがってプログラミングすることで簡単にプログラミングができる仕組みを

フレームワーク

と言います。「Ruby on Rails」という名前を聞いたことがあるかもしれませんが、このRailsというのがRubyで利用できるフレームワークです。Railsを使うと簡単にWebアプリケーションが作成できるということで、Rubyが人気となりました。

C#では利用できるフレームワークが色々とあるのですが、Visual Studio のプロジェクト作成時に選択したテンプレートによって使用するフレームワークが決まります。今回使用しているフレームワークは「ASP.NET Core Razor Pages」というフレームワークです。なお、同じプログラミング言語であってもフレームワークが異なればプログラミングの仕方も変わります。

今回の基礎講座では特定のフレームワークによらず、もっと基本的な共通概念を学習することを目的としています。「ASP.NET Core Razor Pages」については、講座を進める上で最低限知っておいてほしい、以下の3点のみ説明します。

プログラムを実行して最初に動くのは「Index.cshtml.cs」の「OnGet(){ … 中略 … }」の { } の中に記述した処理。

プログラムを実行すると、ブラウザーから「Index.cshtml」に対して要求が来ます。その要求に対する処理は「Index.cshtml.cs」の以下の部分に記述します。

  public void OnGet()
  {
      //ここに記述した処理が最初に実行される。
  }

ブラウザーに表示したいデータは「Index.cshtml.cs」の「OnGet(){ … 中略 … }」の外で変数を作成して、「OnGet(){ … 中略 … }」の中でデータを入れる。

ブラウザーに表示したいデータは以下の部分で変数を作成します。また、ブラウザーに表示する必要のないデータを入れるための変数が必要な場合は「OnGet()」の中で作成します。

//ここでブラウザーに表示するための変数を作成する。

public void OnGet()
{
    //この中でブラウザーに表示するデータを作成して変数に入れる。
    //ブラウザーに表示する必要のない変数が必要であればこの中で作成する。
}

ブラウザーへの表示方法は「Index.cshtml」の「@{ … 中略 …}」の下に記述する。

ブラウザーへの表示方法は「Index.cshtml」の以下の部分に記述します。記述する言語は基本的にHTMLですが、動的に表示したい部分だけC#で記述します。「Index.cshtml.cs」で作成した変数を参照する場合は「 @Model.変数名 」の様に記述します。@はC#のコードであることを表すための記号です。今回のプログラムの様に、変数の前後にHTMLタグ（<>で囲まれた部分）以外の文字がある場合は「@Model.変数名」の前後には半角スペースを入れる必要があります。半角スペースを入れないとC#のコードとして認識されずに、” @Model.変数名”がそのままブラウザーに表示されてしまいます。

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@* この下にブラウザーへの表示方法を記述する *@

Webアプリケーションで講座を進める理由

プログラミングを初めて学習する際に色々な書籍やサイトを見ると思いますが、ほとんどの場合はWebアプリケーションではなく、もっと単純なコンソールアプリケーション（GUIがないプログラム）やWindowsアプリケーション（Windows PC用のGUIプログラム）で学習を始めるものが多いと思います。

では、なぜこの講座はWebアプリケーションで進めるのかというと、以下の点を考慮してWebアプリケーションの知識を最短で身につけて欲しいからです。

・Webアプリケーションが最も需要が高い。

・Webアプリケーションには他のアプリケーションのプログラミング知識が通用しない、むしろその知識が邪魔をする部分がある。

・Webアプリケーション以外はもっと単純な構造なので後からでもすぐに理解できる。

いかがでしたでしょうか、第3回の講座はここまでで終わりとします。次回は変数について詳しく説明していきます。