今回はポートフォリオページでも公開しているイナコー掲示板の紹介+ソースコードの公開をしたいと思います。今回は下記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のプロジェクトテンプレートがモダン風にアップデートされています。
自動で作ってくれるのは楽ですがプロジェクト上、画面側とバックエンドではサーバが異なっています。ローカルで見る分には良いですがデプロイする時は過去記事で上げた方法と同じではダメだと感じます。
今回はそこまでは解説しませんのでご了承願います。今後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円ずつ値上げしていく方式を取りたいと思います。最後に売れた日から6カ月間売れなければ110円ずつ値段を下げていきます
売れれば売れる程、次回Webアプリ公開の励みになりますので皆様の支援をお待ちしておりま~す♪(2024/06/5、2024/8/26 計ニ件売れました)
.NET 8 現在、Reactを入れようとすると最新版のV18が入り、.NET 6 当時はまだ対応してなかったVueも自動生成できるようになってます