我不屈抗体注射施行開発 -開発初心者な私が1ヶ月でウェブサービスを作るまで-

## 我ワクチン注射にも屈さず開発を施行する

※この記事は「木更津高専アドカレ2021 1本目」の記念すべき25日目の記事です！

前→ [木更津高専と雄峰寮、サバイバル術]() by @chizuchizu

**「ﾌｫｯﾌｳﾃﾞｲﾀｲｫｯﾌｫｯ Merry X-"SMASS"！」**

はじめまして、NIT Kisarazu C 情報工学科2年~~のサンタ、~~とすあっぷと申します。
ほぼ初めての記事なので、至らぬ点が多数あるかと存じますが、お手柔らかにご指摘ください。
全くクリスマスにふさわしくないので、クリスマスに相応しい記事を見たい方は、[こちら](https://qiita.com/tos-up/items/127aaee0da58f53242ad)をご覧ください。

ちなみに今日ワクチン打ちました。2回目です。
タイトルはそういうことです。
## 何を書くんだい？
色々書きたいことはあるのですが、今回は**「開発初心者な私がたった1ヶ月でウェブサービス（笑）を展開するまで」**を書かせていただきたいと思います。
~~学寮のことはみんな書いてるからいいでしょ~~
## もくじ

1. 採用篇 ～私、どうなっちゃうのー！？～
1. 開発篇 その1 ～うわっ…俺の技術力、ゴミ過ぎ？！～ | _With Rust_
1. 開発篇 その2 ～C#こそ至高…え？！Webも書かなきゃなんですか？！～ | _With C#(ASP.NET), JavaScript(Vue.js)_ 
1. 開発篇 その3 ～開発の刄 無限議論編～ | _With Team_

## 1. 採用篇
そもそもなんでこんな事態になったのか、ご説明致します。<br>

```
「第4回高専防災コンテスト 2ndステージ」に採択された

おしり
ーーー
ⓃⒾⓉ
```


無責任ですね。ちゃんとご説明致します。

私が所属（笑）している木更津高専 情報工学科2年チーム Trialでは、「避難所の運営を紙媒体からデジタル媒体へ」というアイデアを年始から練り始め、様々なコンテストへ応募して参りました。
最初はRFIDタグを用いたものから、次第にユーザーへ寄り添ったサービスへ。
最終的に考え出されたのはナウでヤングな"QRコード"を用いたシステムでした。

それが[第4回 高専防災コンテスト](https://www.bosai.go.jp/labo/ExtremeWeather/contest/contest_2021.html)で採択された「避難所運営をサポートするITシステム Shelter Management And Support System 【SMASS】」です。
このシステムのウリは「アプリのダウンロードがいらない点」等ですが、このご時世、何をどう考えてもアプリがないと辛いですよね。~~めちゃんこデメリットだと思います。~~

## 2. 開発篇 その1

このシステムを作成するにあたって、サーバーサイド、クライアントサイドの作成、そしてデータベース設計が必要になります。
私は「どうせ私しかAPIサーバー書けんのやろうな」とサーバーサイド開発、チームメイトが他を作成してくれることになりました。

開発言語はAll Rust。DB設計者の希望です。
私はすでに嫌な予感がしていましたが、まあどうにかなるだろうと開発を開始しました。
**(なお、この中でRustを書ける人は誰一人としていません。)** <- ここ重要

さて、採用されたのは10月中旬。開発完了予定までは2ヶ月半あります。
最初は全員ゴリゴリ書いていました。最初は。

1ヶ月ほど経ち、それぞれ気づきます。
***「これ無理くね？」***と。

そらそうなんですよね。私はC#er、開発メンバーはJavarとPythonerです。
私がSAN値チェックに失敗し、発狂をキメ、開発言語は私のプレゼンテーションによりC#に変更になりました。

~~それが試験直前だというのは、また別の話。~~

## 3. 開発篇 その2

C#に変わっても開発パートは変わらず。
そこで私気づきます。

**「サーバーサイドってもしかしてフルスタックやらんとあかん？」**

と。~~(そのとおりなのは、また別の話。)~~

生粋のVSerである私は、VS2022の新機能、[VueとC#を同時に開発できそうな機能](https://github.com/MicrosoftDocs/visualstudio-docs.ja-jp/blob/live/docs/javascript/tutorial-create-vue-app.md)を用いて開発を開始しました。

私「Vueの勉強からか…(試験直前)」
チームメイト「俺ら触ったこと無い言語やから、がんば」

何度でも言いますが、アプリケーションにしたほうが絶対都合がいいですよね。

ということで環境構築の方法です。
今回の環境は以下です。

> OS: Windows 11 Dev(22494.1000)
> CPU: AMD Ryzen 7 5700U
> RAM: 16GB (DDR4-3200)
> ROM: WDのNVMeみたいなやつの512GBのやつだと思う
> GPU: Radeon Graphicsくん(専用512MB)

使用するソフトウェア等

> IDE: Visual Studio Community 2022 v17.0.2 (以下VS)
> データベース: MySQL v8.0.27
> .NETフレームワーク: .NET 6
> JS環境: Node.js v14.18.1
> あと Vue v2.6.14

(待機時間を除いて)人によっては3分で出来る環境構築〜！

1. VSをDLする！
1. 入れる！

終わり！ やったあ！
~~(詳しい入れ方は調べてください)~~

Vueで書き進めていくうちに様々な困難が…というかそもそも知らないのでそんなこと？って思われるかもしれない壁にぶち当たっては砕け散ってます。
あまりにも動かなくて環境消し飛ばしを15回くらいやってるので、環境再構築RTAは世界新だと思います。多分。（適当）

折角なので私が困ったことも書こうと思います。

##### 1. CORSポリシーに超引っかかった

バチバチに引っかかりました。
同じ`localhost`でもポートが違うとダメなんですね。

ということでプロキシ機能を使いました。

```vue.config.js
module.exports = {
    devServer: {
    // ここから --
        proxy: {
            '/api/': {
                target: 'https://localhost:5001'
            }
        },
    // -- ここまで
    }
}
```

これで`/api/`にリクエストを投げると、`https://localhost:5001`で待機しているバックエンドにリクエストが飛びます。やったね！

##### 2. Visual Studioで、「クライアントサイドライブラリ」を追加しても追加されへん

追加されへんのよね。

開発ディレクトリでコンソール開いて、`npm install hogehoge --save`ってしたらimportできました。

なんでか知ってる人教えてください。

##### 3. ビルドが一個しか出来へん。何？

[ここ](https://docs.microsoft.com/ja-jp/visualstudio/javascript/tutorial-asp-net-core-with-vue?view=vs-2022)に書いてあって素敵。

##### 4. 開発が滞ってます

知りません。頑張ってください。

## 4. 開発篇 その3

無限議論してます。

メンターさんとのMTGは月1回。

他にも毎日Microsoft TeamsやGitHubなどを用いて、様々な情報共有をしています。

POSTがPASTでBOOSTしたり。(？)

Issueたてたり夕焼け見たり。

開発？知らない子ですね。

今度、地域の学校で検証させていただく予定です。楽しみ。

## 最後に

投げやりな記事でごめんなさい。許してください。

あと開発頑張ります。

最後までご覧頂きありがとうございました。