こんにちは。サイオステクノロジーにてインターンシップに参加させていただいております、日本工学院八王子専門学校 ITカレッジの大賀と申します。

今回、インターンシップ学生3人のチームでMicrosoft Azure App Service & ASP.NET Core MVCで簡単なWebアプリケーション開発を行いました。

私自身、専攻がネットワークな事もあり、HTML/JSは少し書けるものの、C#やASP.NET Coreについては全くの初学者ですので、私が開発において調べ、得た知見を同じ初学者にに向け、ASP.NET Core MVCって何？どうやって使うの？といった疑問からHands Onまで、4本立てでご紹介いたします。こうした形で、情報発信をしていくのは初めてで、長く、拙い文章ですが、温かい目で見ていただければ幸いです。長々とお話しますが、是非お付き合いください。

そもそもASP.NET Coreとは？

ASP.NET Core MVCの説明をする前にまずASP.NET Coreについて解説する必要がありますので、まずはこちらから解説します。

ASP.NET Coreとは、2016年にMicrosoftがリリースした、比較的新しい、無料でオープンソースのWebアプリケーションフレームワークです。

以前から存在していたASP.NETとは別物で、考え方として類似している点は多いものの、アプリケーションとして完全な互換性はありません。ASP.NETの後継としてリリースされたフレームワークがASP.NET Coreです。

(フレームワークとは、プログラミングにおいて頻繁に記述されるコードを簡略化し、素早く開発作業を進める事、保守性の向上に貢献してくれる土台のような物です。)

様々なアプリケーションの動作基盤で、開発環境でもある.NETで動作します。(.NETの詳細は割愛します。)

オブジェクト指向プログラミング言語であるC#をベースとして作成します。

動的なWebアプリケーションの開発に適していて、以下の特徴があります。

・デベロッパによるコンパイル操作が不要

C#で記述されていますが、.NETがコンパイル作業を含んだビルドを行ってくれるため、コンパイルコマンドを叩く必要がありません。

・クロスプラットフォーム

前身のASP.NETはWindowsのみでしか実行できなかったのですが、ASP.NET Coreはランタイム(実行環境)が対応しているため、Mac/Linuxでも開発/実行が可能です。

・NuGetでモジュール的にパッケージ(機能)を容易に追加できる

NuGetというモジュラーパッケージフレームワークから、標準搭載されない機能を追加できます。

・JavaScript/CSSも使える

Webアプリケーション開発の勉強を始めたばかりの人はまずHTML/CSS/JSから勉強すると思いますが(私もそうでした)、サーバサイド/クラウドに適したフレームワークといえどJavaScriptも記述可能です。CSSも同じく、パスを指定して記述できます。HTMLにCDNのタグを差し込めばJQuery,Vue.js,React等JavaScriptフレームワーク、Bootstrap、Bulma等のCSSフレームワークも利用可能です。

・Razor Pages

ASP.NET Coreのビュー(ページの見た目)はRazor Pagesという、同じファイルにC#とHTMLの構文を共存させる事のできる記法が採用されています。動的なWebアプリケーションの開発のしやすさに大きく寄与します。

・SQLを書かずにデータベースを使える

後ほど説明するModelにC#でデータベース操作に関する記述をするだけで、データベースにアクセスできます。ASP.NET Core MVCが何とSQLで取ってきたデータをC#のオブジェクトに変換する処理を相互で自動化するため、C#で命令さえ書ければ、簡単にデータベースにアクセスできるのです。

他にも調べていくと、こんなもんじゃない位、たくさんの機能、特徴があります。私もまだまだ、知らないことだらけの噛めば噛むほど味の出るフレームワークです。

ただ、高機能な事もあり、Web開発の経験がある方にとっては理解、拡張がしやすいかと思いますが、初学者にとっては比較的新しいこと、メインの言語が比較的難易度の高いC#のためASP.NET Core MVCが新しく、まだ日本語の情報量が少ないのも相まって、学習の敷居は少々高いと感じました。

ASP.NET Core MVC

https://dotnet.microsoft.com/ja-jp/apps/aspnet/mvc

前置きが長くなりましたが、ASP.NET Core MVCの説明です。

MVCとはModel(モデル) – View(ビュー) – Controlloer(コントローラ)の事で、Webアプリケーション開発の考え方(アーキテクチャ)の事です。

このMVCモデルに基づいて開発を行えるASP.NET CoreのプロジェクトがASP.NET Core MVCです。

それぞれの目的により独立しているので、更新、変更があった場合に影響が少なく、修正も容易になる点など、アプリケーションとして非常に保守性、編集のしやすさに優れるモデルです。

よって、複数人で開発を行うプロジェクトや、大規模なWebアプリケーション開発に非常に適しています。

それぞれ、Webアプリケーションにおいてどういった役割を担っているかをご紹介します。

Model (処理/モデル)

Modelは、Controllerの伝達に基づいて、定義したビジネスロジックを実行する部分です。

Controllerから受け渡されたデータをデータベースに挿入/抽出したり、システムの機能に関わる処理を行い、Controllerにデータを渡す事等を担います。

基本的にデータベースの操作、その内容のControllerへの伝達で利用される事が多いようです。

View (表示/ビュー)

Viewは、ユーザが直接見る画面や、ユーザの入力を受け付け、Controllerに受け渡したり、その内容をModel/Controllerで処理させた出力を入力し、レンダリングする役割があります。

つまり、Viewから直接Modelに処理を行わせることはありません。あくまでデータをControllerと行き来させ、それを表示させる部分を担います。

Controller(伝達/コントローラ)

ControllerはViewからのアクション(入力)に基づいて、Controllerで構成したメソッドを実行して、ビューをを動的に制御させる役割を担います。

Model経由で受け取ったデータを出力したり、ビュー(ページ)をルーティングさせたり、橋渡し役になります。

簡単にいうと、Model/Viewにそれぞれの処理をお願いする担当です。

ASP.NET Core MVCでは、これをModels、Controllers、Viewsというフォルダに分割しファイルを配置し、作業を行います。

ディレクトリ構造やファイルの扱いは、次回の記事で解説します。

以上が簡単なASP.NET Core MVCについての解説でした。

というものの、私たちインターンシップ学生チームの開発物では、データベースを利用していないため、View、ControllerのみでWebアプリケーションを開発しました。

後ほどの記事で私が特に苦労したModelを使わずにView間で相互にデータを受け渡す方法についてもご紹介します！

以降は私たちインターンシップ生チームで開発したWebアプリケーションを基に、ASP.NET Core MVCの具体的な使い方をご紹介します。

ぜひ、次回以降の記事もご覧いただければ幸いです。

【ASP.NET Core MVC入門】②ASP.NET Core MVCでプロジェクトを作り、Webページを表示させる方法

【ASP.NET Core MVC入門】③Controller、Viewの使い方と外部APIからHTTP(GET)する方法を解説！

【ASP.NET Core MVC入門】④Modelを使わずにサイト間でデータを受け渡す方法を解説！

アイキャッチ画像ロゴのCC-BY-SAに基づく表記

dotnetCore Logo Pack by campusMVP.es

About サイオステクノロジーの中の人 5 Articles

サイオステクノロジーで働く中の人です。

Twitter YouTube