初めてのWebアプリケーションを作ってデプロイした話(React / Express)

# 目次

[1. どんな人にオススメの記事??](#1-どんな人にオススメの記事)
[2. 自己紹介](#2-自己紹介)
[3. まえがき](#3-まえがき)
[4. 作ったサイトについて](#4-作ったサイトについて)
[5. 使った言語やライブラリなど](#5-使った言語やライブラリなど)
[6. どうやって勉強したの?](#6-どうやって勉強したの)
[7. 作ったアプリの反省](#7-作ったアプリの反省)
[8. 今回得たこと](#8-今回得たこと)
[9. 今後の展望](#9-今後の展望)
[10. 終わりに](#10-終わりに)


# 1. どんな人にオススメの記事??

この記事の読者対象は次のような方にオススメです
- Webアプリケーションを作ってみたいけど**何から学べばよいか分からない**

- ある程度HTMLやCSSは触れるけど、**バックエンドの知識は全くない**

# 2. 自己紹介

- 電気通信大学の学部4年生で情報系の専門です
- プログラミング歴については大学に入ってから始めたので3年ほどになります
- C++で競技プログラミングをしていて現在700台をうろうろしていて緑色を目指しています
- アルバイトはSaaSの企業でエンジニアをしています
- Web開発については何から始めてよいのか特にバックエンド側の知識はありませんでした

# 3. まえがき

春休みだったということもあり、Webアプリケーションについて何か作ってみたいと思っていました。しかし、Webアプリケーションの開発についての知識は、大学では1年か2年生の頃の授業で**少しHTMLとCSSを触ってみたのと3年生の実験でJavaScriptを少し触ったくらい**で、バックエンド側の知識は簡単なSQL文など断片的な知識しかありませんでした。つまり**全く何から作り始めればよいか分かりませんでした。**

# 4. 作ったサイトについて

![スクリーンショット (327).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3772505/7ba2bf91-b369-c3b0-b7e2-c49b49bb7bca.png)

学習管理アプリを作りました。作り始めるときのモチベーションとしては**自分が少しでもいいから使うかもと思えるようなサイト**を作ることでした。(自分が全く興味のないものを作ってもやる気が起きないと思ったため)

### 機能について

- ログインや新規登録などを実装しユーザそれぞれが記録を残せる
- ユーザは日にちごとに勉強した記録を残せる
- 過去の記録はサイドバーの日付を押すことで参照できる
- 記録した日にちごとにグラフが作成される

サイトの設計など色々と反省はあるのですが、それは最後の方の章に記載します。
![スクリーンショット (328).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3772505/5db2d7cd-777e-a3b0-dc5f-d8aad2c354ed.png)

全体に公開をするという予定はないため、ここではデプロイした際の**サイトのリンクを記載いたしません**。ご了承ください。
代わりにGitHubのリポジトリを記載いたしました。

[GitHubのリポジトリ](https://github.com/Nanahoshi74/learning-record-app-client)

# 5. 使ったライブラリなど

フロントエンド側 : **React(JavaScript)**
バックエンド側 : **Express(JavaScript)**

DBは**MongoDB**で**NoSQL**となります

グラフの作成にはChart.jsというライブラリを用いました

## これらのライブラリなどを選んだ理由

次の章で述べるのですが、春休みに**Udemy** で勉強していた講座でこのMongoDB + Express + React + Node.js を用いていたから。。というのが実直な理由なのですが実際にその講義を受けてみて、私のような初心者でもとても扱いやすいライブラリなどの組み合わせで、まず作りたいアプリを作るのに適していると感じたためです。私の持論ですが、どんな技術選定でもまずは何か1つ作ってみることが大事だと思っています

# 6. どうやって勉強したの??

これが本題だと思います。
前の章で述べた技術のワードなどは聞いたことがあったものの使い方など何も知りませんでした

### 勉強するときに使えるもの
技術を勉強するときに一般的に使えるものとして以下のような挙げられると思います

1. 本
2. Udemy などの有料教材
3. YouTube
4. Web サイトから拾ってくる

結論から言うと今回私が用いたのは2番のUdemyなどの教材です。1-4は**それぞれの人のレベルによって適しているものが違うと思います**。私のような**初心者には体系的に学べる本やUdemy**などの教材を選ぶのが適切だと思います。YouTubeやWeb サイトなどでは断片的な知識は山のように散らばっていますが、まとめて0から説明してくれているのもは私が探した限りではほとんどありませんでした。
本は確かに細かく書いてあるのですが、買ってから自分が思っていたものと違った、逆に細かく書かれて過ぎているみたいなことが起こりえるためUdemyで学習をしました。

### どんな講座をとったのか

1.[【完全保存版】MERNフルスタック開発で本格的なSNSアプリを１から自分の手で構築してみよう](https://www.udemy.com/course/fullstack-mern-project-course/)
こちらでは、MongoDB + Express + React + Node.jsで0からフロントエンド側、バックエンド側ともにハンズオン形式でXのようなsnsアプリケーションを作るという講座です。私のようなWebアプリを作ってみたいけど、**何から始めてよいか分からないという人にとてもオススメ**です。私が今回作成したアプリケーションは**この講座からほぼ学んで実装をしました**。別に宣伝というわけでは全然ないのですが、言語やフレームワークなどに拘りがなくWebアプリケーションまず作ってみたいという人には強くオススメします。

2.[【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門](https://www.udemy.com/course/modern_javascipt_react_beginner/?couponCode=ST7MT41824)

こちらはフロントエンド側のReactについての講座です。こちらは私が1番で提示した講座においてReactの基本的な知識がある前提で進めていくため事前に取っておきました。こちらの講座は素のJavaScriptでTodoアプリを作った後にReactで改めて作り直すという講座です。**Reactの基本的な使い方などを理解しながら**、Reactの便利さをサクッと理解することができます。

3.[【フルスタックAWSデプロイ】Next.jsとExpressでTodoアプリを作ってAWSへデプロイして運用する実践講座](https://www.udemy.com/course/aws-nextjs-express-todo-deploy/?couponCode=ST7MT41824)

こちらの講座では、Next.jsとExpressを用いてTodoアプリを作成しデプロイまでをするというものです。私が提示した講座1においてはデプロイまでを行う講座ではなかったため、**デプロイをする方法を知るため**に受講をしました。
私が学習管理アプリをデプロイした際もこの講座の手順通りにフロントエンド側を**AWS Amplify**、バックエンド側を**AWS App Runner**を用いました。こちらは少し料金が掛かりますが、私のようなインフラ周りの知識がほぼない人でも簡単にデプロイすることができるためオススメです。

#### 注意
Udemyはよく**セールを行っている**ため学習の際に定価で買わないようにすることをオススメします

#### まとめると

- まず、Webアプリを作ってみたいという人は1番の講座をとって手を動かして学習をする
- 自分が作りたいようなアプリケーションを考える
- 1番の講座で書いたコードをいくら参照してもいいからコードを書いてみる

考えて試行錯誤してもどうしても自分でやりたい機能が実装できないなら、ChatGPTなどに聞くことが大事だと思います。そもそも勉強し始めの分野で知識があまりないのですから、分からなければ聞いて学習をするというのが大事だと私は思います

# 7. 作ったアプリの反省

これはとても沢山あります。
特に**サイトの設計の面**です。これはデプロイ後に大学の友達から意見を貰ったものです。

- ログインをするとすぐに当日の学習記録画面に行くが**ホーム画面を挟んだ方がよい**(ホーム画面で見たり記録をつける日付を選択できるようにするべき)

- ある日の学習記録として円グラフを作成しているが**円グラフの意味があまりない**かも(学習管理アプリなら折れ線グラフとかの方がためになりそう)

- 整数の時間で設定できるようになっているが、h時間m分などのように**分単位で記録したい**

- タグなどを設定できてその**タグごとに週や月単位で何時間何分勉強したのか**などをグラフなどを用いて視覚的に見られると良い

- ログアウトボタンは**三本線**などを押したときに{ホーム、ログアウトする...}などが書かれたサイドバーが現れるようにする

### 個人的に思った反省

- 学習の記録をつける日付をurlから遷移できない

これはとても大きな反省だと思っていて、ある日の日付を~~/record/2024-04-19などのようにして見られた方がユーザとしても私としても管理をしやすかったと思います。

# 8. 今回得たこと

反省で書いたことをまとめることにはなるのですが、しっかり作り始める前に**ページのデザインや設計を事前に綿密に考えておくべきであった**ことです。
これは反省でもあり、まず手を動かして作り始めた自分を褒めるべき部分でもあるのですが作りながら今回設計を考えていたので、コードを書いてからこういう設計にすればよかったと後悔をすることが多々ありました。これをすると**修正が沢山必要**ですし、修正したときに**バグが発生する**こともあるため**事前に設計を練ることの大切さ**をとても身に染みて感じました。

# 9. 今後の展望

- [作ったアプリの反省](#7-作ったアプリの反省)で記載した反省点について修正をして使いやすいサイトにする
- Javaの勉強
- ER図などをしっかり作成し、SQLを用いたWebアプリケーションの作成

この3点をまずはやりたいと考えています



# 10. 終わりに

私が今回提示した勉強の仕方は必ずしも全員に適しているとは限りません。しかし、Web開発の勉強の始め方の**候補の1つとして頭の片隅**に置いていただけると幸いです