1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

子供の想像力を伸ばしアイデアを形にする小学生向けプログラミング教室「プロスタキッズ」

C#でウェブサイトを作るにはなにが必要?C#でのサイトの作り方

Pocket

はじめに

C#でなにを作りますか?
C#で仕事をしたいと考えている方は、ウェブサイトを作ってみるとよいでしょう。
ウェブ開発では、C#以外にもさまざまなことが学べ、仕事の幅が広がるからです。
デスクトップアプリよりも覚えることは多いですが、やりがいはあるでしょう。

この記事では、プログラミング初心者の方のためにC#でのウェブサイトの作り方を解説していきます。
ぜひご自分でも試してみてください。

C#でウェブサイトを作るために必要な知識

HTML

C#で、といってもウェブページなので画面のコーディングにはHTMLを使います。
静的ウェブサイトと違うのは、Razorビューエンジンを使うことです。
Razorでは通常のHTMLの中にC#でコードを記述できます。
つまりプログラムを実行して動的にページを出力できるわけです。

CSS

通常、装飾的なデザインはHTMLから分離し、CSSで記述します。
これはC#でのウェブサイト作成でも同じです。CSS自体はプログラムできませんが、Razorを使って動的にスタイルを切り替えたりすることができます。

JavaScript

ウェブ開発では、バックエンド(サーバー側)にはC#を使えますが、フロントエンド(ブラウザ側)ではJavaScriptを使う必要があります。
2つの言語を使い分けなければならないのでちょっと大変ですが、JavaScriptの構文はC#と近く、覚えやすい言語なので心配はいりません。

ASP.NET MVC

C#には2つのウェブフレームワークがありますが、そのひとつが「ASP.NET MVC」です。
比較的新しいフレームワークで、何度もバージョンアップされてきました。
MVCアーキテクチャによりコードの役割が分離でき、テストしやすいキレイなコードが書けます。

データベース

C#でウェブサイトを作成する場合には、おそらく動的な処理があり、どこからかデータを取得する必要があります。
データの一般的な取得先といえば、やはりデータベースでしょう。

最近では「Entity Framework」を使ったデータアクセスが主流です。
パッケージとしてNuGetからインストールできるので使ってみましょう。

C#でウェブサイトを作る基本的な流れ

サイトをデザインする

まずは、紙と鉛筆(またはデジタルツール)を駆使して、サイトの全体的なデザインを決めましょう。
どのページになにを表示するか、ページ間のつながり(遷移)はどうするかなどを決めておきます。
デザインは後から修正できるので、あまり詳細に詰めなくても大丈夫です。
レイアウトが決まればOKです。

デザインを元にコーディングする

デザインが決まったら、それを元にHTMLとCSSでコーディングしましょう。
この時、テキストや画像などがまだ用意されていなければ、仮のテキストやサンプル画像で埋めておきます。カルーセルなど、動きが必要な部分はJavaScriptでプログラミングしましょう。
ライブラリを活用すると楽にできます。

サイトをプログラミングする

ここまででサイトの大枠は完成しましたが、肝心な動的な部分はこれからです。
C#で、コントローラー(クラス)にアクション(メソッド)を実装して、ページの出力を動的に変更するようにしましょう。

たとえば、データベースから取得した情報をリスト形式で表示するなどです。
データが多い場合には、ページングを実装するなど一工夫必要です。
データは仮のものを使いましょう。

データベースにデータを流し込む

最後に、データベースに本番データを流し込みましょう。

SQLでデータベースを直接操作するか、Entity Frameworkを使ってシードデータとして追加します。
また、SQL Server Management Studio(SSMS)などのGUIツールを使って、CSVからデータをインポートしてもいいでしょう。

サイトの動作を確認する

最後にサイトの動作を確認します。

仮のデータではうまくいっていても、大量の本番データを入れると動作が重くなったり、レイアウトが崩れたりするため、問題がないかよくチェックしましょう。

データベースがボトルネックになっている場合には、データ取得処理を変更するか、インデックスを見直す必要があります。
Entity FrameworkのSQLログをコンソールに出力して、問題のあるSQL文を特定しましょう。

まとめ

このようにウェブ開発にはさまざまな知識が必要とされ、C#以外にも学ばなければいけないことが数多くあります。しかし、一度学んでおけばC#以外でのウェブ開発にも転用できるため、習得しておいて損はないでしょう。
あなたなりのサイトを作成してみてください。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る