イントロ

この記事はプログラミング初心者向けにWEBサイトを作る方法を紹介します。

学生（中学生、高校生、大学生）でWEBサイト作ってみたい
ITコンサルやっててプログラムを触って軽く理解を深めてみたい
建設業界だけどIoTとかあるしITの勉強をしたい
WEB広告やってるけどフロントだけじゃなくてもっと深く理解したい
Macは持ってなくてWindowsを使っている

みたいな感じの人対象です。

Googleで検索するとWEB開発の記事はMac＋Python＋AWSとかの記事が多いです。しかしPCはWindowsしか持ってないという人の向けに、この記事ではWindows＋VisualStudioを使ってC#でWEB開発をやっていきます。

この記事で

WEBサイトを作って自分でプログラムを修正する
プログラムの変更をGitで管理する
作成したソースコードをGitHubへ公開する

ことができるようになります。

普段はMacで開発してるけどWindowsで開発ってどうやるの？みたいな人も興味本位で読んでいただければ幸いです。VisualStudioは強力なIDEでコマンドライン無しで簡単に開発ができます。では早速作ってみましょう。

環境の準備

VisualStudioをインストールします。
https://visualstudio.microsoft.com/ja/

このページのVisual Studio IDE のCommunity Editionをダウンロードしてインストールしましょう。ちなみに無料です！
（※無料で利用可能な範囲は公式で確認してください。個人使用、小規模企業なら無料なはずです）

インストールが終わったら起動してメニューバーのファイル→新規→プロジェクトを選択します。

ダイアログが開きます。

Webを選択しVisualC#→ASP.NET Core Web アプリケーションを選択します。適当に名前（私はWebSiteと入れてみました）を入れます。新しいGitレポジトリの作成にチェックを入れてOKを押すと次はこんな感じのが開きます。

ゼロから理解するために「空」を選択しましょう。HTTPS用の構成にチェック、認証は認証無しでいきます。

これで作成完了です。F5を押してプログラムを実行してみましょう。メニューバーのボタンでも大丈夫です。（下図）

初めての実行の時は確か「HTTPSの証明書を信頼しますか？」みたいなメッセージが出ると思うので許可します。（※うろ覚えです。もしかしたら出ないかもしれません。）

ブラウザが立ち上がってHello World!と表示されます。

実行しているプログラムを停止するには停止ボタンを押します。

プログラムが停止しました。ブラウザを閉じても停止できます。

プログラムを修正してみる

さてこれからソースコードを修正してみます。ソリューションエクスプローラーをクリックしてStartup.csファイルをダブルクリックします。Startup.csファイルの中身（テキストファイルです）が表示されます。これがプログラムファイルといわれるものです。

await context.Response.WriteAsync("Hello World!");

の部分を書き換えてみましょう。

await context.Response.WriteAsync("Higty, Hello World!");

書き換えたらF5を押して実行します。

文字が「Higty, Hello World!」に変わりましたね。これであなたは初めてC#のプログラムを修正したということになります。

プログラムをデバッグする（ブレイクポイントの使い方）

次は現在時刻を表示させてみましょう。現在時刻はDateTime.Now.ToString("yyyy/MM/dd")と書くと取得できます。

    app.Run(async (context) =>
    {
        var now = DateTime.Now.ToString("yyyy/MM/dd");
        await context.Response.WriteAsync("Higty, Hello World! " + now);
    });

こんな感じで書き直した後にVisualStudioの左端の灰色のところをクリックします。クリックすると茶色になります。
F5を押してプログラムを実行します。すると黄色になってプログラムの実行が一時停止します。

変数nowにカーソルを合わせるとnowの値が表示されます。

まだ値を代入していないのでnull（値が空）です。F10を押すとプログラムが1行だけ実行され、黄色いラインが1行下に進みます。

nowにカーソルを合わせると"2018/12/31"と表示され今日の日にちがセットされているのがわかります。
F5を押すと残りのプログラムが一気に実行されます。

現在時刻が表示されました。

ウォッチウィンドウを使ってみる

他にも画面下のウォッチウィンドウで変数の値を見ることもできます。名前のところにnowと入力すると値が見れるようになります。

今回は1つの変数だけですが、１つだけではなくいくつかの変数の値をまとめて見たいときはウォッチウィンドウが便利です。

MVCパターンを使う形に変更する

WEBアプリの作り方の一つでMVCパターンというのがあります。ざっくり言うと

M モデル。データを表します。ブログのタイトル、投稿時刻、本文とかそういう感じ。
V ビュー。画面への表示部分のことを言います。
C コントローラー。URLの管理とデータの取得、加工などを行います。

分けることで大規模プログラムでプログラムのメンテナンスがしやすくなります。保守性、堅牢性、可読性などがUPします。
MVCの役割分担は最初はだいたいで理解しておけば良いでしょう。

さてMVCパターンを使用する形にプログラムを変更していきます。まずはStartup.csファイルのコードを下のように変更します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;

namespace WebSite
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseMvc();
        }
    }
}

これでMVCパターンを使う形になりました。services.AddMvc()とapp.UseMvc()がMVCを使うための変更箇所になります。

ソリューションエクスプローラーから右クリックでフォルダを追加しましょう。Controllers,Viewsフォルダを追加します。Viewsフォルダの下にHomeフォルダを追加します。

Controllersフォルダを右クリック→追加→クラスでクラスを追加します。ファイルの名前はHomeController.csにします。コードをこんな感じに書きます。


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

namespace WebSite.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet("/")]
        public IActionResult Root()
        {
            return View();
        }
    }
}

[HttpGet("/")]の部分がURLを設定している部分になります。

次はViews/Homeフォルダにビューを追加します。Homeフォルダを右クリック→追加→新しい項目で下図のウィンドウが開きます。

Web→Razorビューを選択し、名前にRoot.cshtmlと入力し追加ボタンを押します。ちなみにRazorビューファイルの拡張子は.cshtmlになります。Root.cshtmlファイルの中身を以下のように変更します。

<div style="font-size:32px;color:#ff0000;">Hello World!</div>

F5を押して実行してみましょう。

文字の大きさが32pxで色が赤いHello World!が表示されました。
Root.cshtmlのHTMLをいろいろいじると見た目をいろいろ変えられます。自分でいろいろ変えてみましょう。

変更をGitレポジトリに保存する

いい感じに変更できたらその変更したファイルを保存しましょう。チームエクスプローラー→変更からGitレポジトリに変更内容を保存できます。

コメントに変更内容を書いてどんな変更をしたか履歴に残すことができます。

会社でエクセルの履歴を残すときとか会社A様_課題管理表_2018_0101.xlsとかで保存してる人も多いのではないでしょうか。そういった変更管理をしてくれるのがGitレポジトリです。ドラクエの冒険の書みたいなものです。

履歴を見るにはブランチ→masterを右クリックでメニューが出てきます。

履歴の表示をクリックするとこれまでの変更の履歴一覧が見れます。

変更をしていい感じになったらコミットする癖をつけておきましょう。PCがフリーズしたりしてせっかくの変更が無に帰すことを回避できます。

GitHubにソースコードを公開する

作成したソースコードを公開しましょう。全体像はこんな感じです。

自分のPCでVisualStudioでプログラムを作成しました。そしてその変更履歴をローカルのレポジトリへ保存するところまでやりました。この変更履歴をPushでGitHubへ送信して全世界へソースコードを公開して共有できます。

https://github.com でアカウントを取得します。登録が完了したら、RepositoryタブをクリックしNewボタンをクリックします。

レポジトリの名前を入力します。私はWebSiteという名前にしてみました。

URLをコピーします。

VisualStudioのチームエクスプローラー→上部の家のアイコン→同期ボタンを押します。下図の画面が表示されます。

Gitレポジトリを発行ボタンを押し、先ほどコピーしたURLを張り付けます。

公開ボタンを押します。ローカルの変更内容がGitHubへ送信されて公開されます。自分のレポジトリにアクセスしてみましょう。https://github.com/your_account_name/repository_name というURLのはずです。私のはhttps://github.com/higty/WebSite です。

これで全世界にあなたのソースコードが公開されました。

まとめ

この記事で1ページだけあるWEBサイトをMVCで作れるようになりました。またGitでソースコードの履歴の管理もできるようになりました。また作成したソースコードを公開して見てもらうことができるようになりました。

次回は

AzureへWEBサイトをデプロイする
ドメインを設定する

辺りをやる予定です。良かったらフォローしてくださいね。

次回記事を公開しました。
WEBアプリをAzureへデプロイして公開し独自ドメインを設定する