【ASP.NET(C#)11】ソース公開!React.js または Razor+SQLServer または PostgreSQLを使った掲示板SPAのBBS_Webアプリ(.NET 6、8)

※本ページはサイドバーまたは本文内にアフィリエイト広告を利用しています

今回はポートフォリオページでも公開しているイナコー掲示板の紹介+ソースコードの公開をしたいと思います。今回は下記3パターンの技術を使っております。

技術個別の解説は各セクションでもやってますが、完成品を直接手に取ってみたい!とお考えの方は是非この記事を見てみてください。

  React + ASP.NET(WebAPI) Razor + ASP.NET MVC
(MSSQL)
Razor + ASP.NET MVC
(PostgreSQL)
.NET バージョン .NET 8 .NET 6 .NET 6
データベース SQL Server(MSSQL) SQL Server(MSSQL) PostgreSQL
フレームワーク EntityFrameworkCore EntityFrameworkCore EntityFrameworkCore
その他使用技術 Tailwind CSS
RestAPI
(GET/POST/PUT/DELETE)
シングルページアプリケーション(SPA)
Razor
BootStrap,MDBootStrap
Razor
BootStrap,MDBootStrap
備わっている機能 管理者のメッセージ修正/削除機能 名前のCookie保存
管理者のメッセージ修正/削除機能
名前のCookie保存
管理者のメッセージ修正/削除機能

React + ASP.NET(WebAPI)

以前作ったRazor形式の掲示板をReactを使用したものに載せ替えました。
また、.NETバージョンが8になったことにより、Reactのプロジェクトテンプレートがモダン風にアップデートされています。

ニース

.NET 8 現在、Reactを入れようとすると最新版のV18が入り、.NET 6 当時はまだ対応してなかったVueも自動生成できるようになってます

自動で作ってくれるのは楽ですがプロジェクト上、画面側とバックエンドではサーバが異なっています。ローカルで見る分には良いですがデプロイする時は過去記事で上げた方法と同じではダメだと感じます。
今回はそこまでは解説しませんのでご了承願います。今後Webアプリの開発が進んで個人アプリ公開の環境が整ったら記事にするかもしれません。

完成版

以下が完成版の掲示板です。書き込み→管理者ログインしてからの書き込みの修正と削除を行えるようになっており、最低限のBBSの機能は備わっています。

ニース

※あくまでこの状態では自己学習用のため、ログイン画面のチープさはご容赦ください

ソース構成

以下がこの掲示板BBSのエクスプローラー構成となっております。

ニース

私自身、Udemy動画で有名先生の動画を見たり、自分自身も一人前のフリーランスとして外のお仕事を頂いてWebAPIの基本構成を把握しているので最適化されたソース構成と自負しております。

Razor + ASP.NET MVC(MSSQL) 完成品

次はポートフォリオとして一時的にHerokuサーバで公開していたRazor+SQLServerの掲示板となっております。こちらの方はパスワード入力が隠されているので完成度自体はやはりこちらの方が高いです。

ソース構成

以下がこちらのソース構成となっております。先ほどのと違い、ASP.NET MVC形式なので画面側にReactなどのフレームワークを使わない場合はこちらが基本の型になると思われます。

ニース

私がWebアプリの実務で参画したプロジェクトは二つありますがどちらもこのタイプでした。(jQuery使用)

Razor + ASP.NET MVC(PostgreSQL)

こちらは以下の過去記事を製品に適用したものとなっておりますので中の動きはSQLServerと同じです。Herokuにあげてみたい人向け。

ソース

今回は公開するソースが非常に大きいため、ここに貼り付けるのは止めてzip形式で固めました。今回はこちらが編集したもののみにしており、外部からDLしたものは対象外にしてあります。(React側ソースのnpm installで作成されるnode_modules内のファイルbinフォルダやobjフォルダなどビルドすると変更されるファイル

最初、BBS(Razor+PostgreSQL).zip 及び BBS(Razor+SQLServer).zip をダウンロードした際にMicrosoft Defender がウィルスを誤検出してしまいました。ただ圧縮しただけなのに謎です・・・

ニース

今回のファイルはASP.NETのファイルをただzip化しただけのものなので危険はございません。もし検出されましたらお手数ですが、一時的にWindowsセキュリティを切って頂くか、下記画像のように検出されたものを許可にしてダウンロードください。下記ウィルスの誤検知記事は下記のように例も多いみたいです。もちろん解凍が終わりましたら設定を戻すのもお忘れなく・・・

<感染>ウイルスTrojan:Win32/Wacatac!ml誤検知か復元方法https://fireflyframer.blog.jp/27984508.html

自作ソフトがMicrosoft Defenderから Trojan:Win32/Wacatac.B!mlとして判定を受けてしまいました。
https://answers.microsoft.com/ja-jp/windows/forum/all/%E8%87%AA%E4%BD%9C%E3%82%BD%E3%83%95%E3%83%88/eec07646-96f8-4ed9-9619-d005d9666378

Go言語で作成したプログラムがWindows Defenderに「Wacatac!ml」と誤検知される件と回避方法
https://zenn.dev/akb428/articles/a7fdcd2614e366

React+ASP.NET+WebAPI+SQLServer

ASP.NET MVC+Razor+SQLServer

ASP.NET MVC+Razor+PostgreSQL

ダウンロードまでは無料ですが、これらのソースには解凍のためのパスワードがかかっております。今回はこの解凍パスワードを有料で販売したいと思います。

ニース

自己学習の教材として利用するなり、更に改変・改造して自分でご利用頂いても構いません。Udemyでよく解説に使われるTODOアプリよりはフォーム認証→管理者メニュー(修正・削除)部分が追加されている分、学習の無駄にはならないと自負しております

販売方法ですが開始 は110円で一件売れる度に110円ずつ値上げしていく方式を取りたいと思います。最後に売れた日から一カ月間売れなければ1カ月毎に110円値段を下げていきます

アシスタント

売れれば売れる程、次回Webアプリ公開の励みになりますので皆様の支援をお待ちしておりま~す♪

解凍パスワードを見るには
気に入ったらシェアお願いします!

【イナコーシステムからのお知らせ】

読者様への返礼特典付き投げ銭サービス

金額に応じて特典の実用性がUP!

  • ○あなたの名前を半永久的に残せる!
  • ○あなたのブログ/動画チャンネル紹介記事を執筆・サイドバーのリンクエリアに掲載!
  • ○あなたの悩み(エンジニア、ブログなど)を通話付きでアドバイス/サポート。回数制限なし!