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

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

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

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

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

ちなみに今日ワクチン打ちました。2回目です。
タイトルはそういうことです。

何を書くんだい？

色々書きたいことはあるのですが、今回は「開発初心者な私がたった1ヶ月でウェブサービス（笑）を展開するまで」を書かせていただきたいと思います。
~~学寮のことはみんな書いてるからいいでしょ~~

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

1. 採用篇

そもそもなんでこんな事態になったのか、ご説明致します。

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

おしり
ーーー
ⓃⒾⓉ

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

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

それが第4回高専防災コンテストで採択された「避難所運営をサポートする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#を同時に開発できそうな機能を用いて開発を開始しました。

私「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分で出来る環境構築〜！

VSをDLする！
入れる！

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

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. ビルドが一個しか出来へん。何？

ここに書いてあって素敵。

4. 開発が滞ってます

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

4. 開発篇その3

無限議論してます。

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

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

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

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

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

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

最後に

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

あと開発頑張ります。

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

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