1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

木更津高専Advent Calendar 2021

Day 25

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

Last updated at Posted at 2021-12-24

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

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

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

「フォッフウデイタイォッフォッ Merry X-"SMASS"!」

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

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

何を書くんだい?

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

もくじ

  1. 採用篇 ~私、どうなっちゃうのー!?~
  2. 開発篇 その1 ~うわっ…俺の技術力、ゴミ過ぎ?!~ | With Rust
  3. 開発篇 その2 ~C#こそ至高…え?!Webも書かなきゃなんですか?!~ | With C#(ASP.NET), JavaScript(Vue.js)
  4. 開発篇 その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分で出来る環境構築〜!

  1. VSをDLする!
  2. 入れる!

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

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
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?