こんにちは。サイオステクノロジーにてインターンシップに参加させていただいております、日本工学院八王子専門学校 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に基づく表記
