自己紹介など
学部3年のchipsです。主にフロントエンドを学習しており、現在Webエンジニアを目指して就活中です。
たまたま同じアプリを一年振りに作成したので、一年の成長でも簡単に見てみようと思います。
ほぼアプリの画面メインで成長を見て行きます。
なぜなら一年前のアプリのコードが見つからないためです。
当時はGitも知らずにデプロイも友人任せだったため残っておらず...。（まあHTML、CSSもあまり理解していなかった頃のとんでもコードはお見せできるほどのものではないのでよし。）
アプリの概要
私の通う大学にもいわゆる食堂というものがあるのですが、これが結構人気なわけです。
さらに小規模な大学のため食堂が学内に一つしかありません。（二つ三つある大学が羨ましい。）
なので、遅れていくと「もう素うどんしか残ってへんやんけ」や「なんやねん、メニュー売り切れでビンゴ達成してるやんけ」という事態が発生することも少なくありません。こうなると皆さんはどうしますかね？
そうですよね、別のお店に買いに行ったり、食べに行ったりしますよね。
しかし、この食堂に行って売り切れ確認してから別のお店行ったりするの面倒臭くないですか！面倒臭いですよね？
特に私の大学はドとまでは言いませんが田舎なので、車がないと別のお店に行くのは遠いし、その車の置いてある駐車場も食堂から離れているわけなんです。
だったら食堂の売り切れ状況をスマホから確認できれば、売り切れならすぐに駐車場なり、徒歩で別のお店向かうなりすればいい、そんなわけでこのアプリが開発されました。
ちなみに、メニューの売り切れ更新は現状、食堂のおばちゃんにiPadポチポチ頼むしかないです。そのうち自動的に食券機の値読み取るか、画像認識で更新できるようになるといいなと考えていますが、現状は技術力不足です。
一年前の実装
開発メンバー3人で一ヶ月ほど取り組んでおりました。ちなみに私は、授業でHTML、CSSに少し触れた程度で戦力にはなりません。は？
技術スタックは、HTML、CSS、JS、Firebaseです。
下にリンクを貼っておきます
一年前の実装
一応、私は先輩と協力してHTML、CSSを書いていたような気がします。ちなみにJSとFirebaseではログイン機能、管理者だけが売り切れ更新できるようにする機能の二つを友人のプログラミング経験者の子が実装してくれていました。
現在ではアプリが破壊されログイン機能が動いていないようですが、当時は「すげえ、かっこいい」と私は思っておりました。
自分が担当していたHTML、CSSに触れますが、すごいですね。レスポンシブ対応しているわけでもないですが、画面左上に要素がよっており、色合いが雑すぎる点や、スタイル変更が反応するもの、しないものがあるのも気になります。
特にこの押しやすそうなログイン/ログアウトボタンが気になりますね、でかい（笑）。
とはいえ、当時の私が覚えたてのフレックスボックスを使って頑張って実装したのでしょう。多分レスポンシブなんてものも知らなかったのでしょう。
一年後の実装
さて一年後どうなったのか見て行きましょう。
開発メンバーは二人で納期は一日です。は？
しかし、これは一日でできてしまった...。のではなく、一日で作るしかなかったというのが正しいです。
実は私の大学ではオープンキャンパスで大学生が高校生に活動を発表する機会があるのですが、そこで私たちのアプリ開発を発表する予定でした。それが先ほどの一年前のアプリというわけです。ログイン機能が破壊され、デザインも壊滅的、何より私たちがあれで発表したくないという気持ちが強かったです。 高校生達にくらいカッコつけさせてくれ。というかオープンキャンパスの高校生の囲い込みとか大学側もカッコつけてくれよりやろ。
こうなったのが一日前だったので、そこから作り始めました。
技術スタックは、React（Vite）、MaterialTailwind、TailwindCSS、Firebaseです。
加えてここで話したいのが、ここでGitをチーム開発で初めて使いました。めっちゃ便利。
Q. 「今までどうやってたの？」
A. 「liveshareだったか、VScodeの拡張機能でずっと通話して画面共有しながら友人と開発してました。」は？
今までGitはソースコード保存しとくだけという感じで個人でしか使用していなかったのですが、ここで初めてプルリク、簡単なコードレビューをしてました。二人なので自作自演みたいな感じでしたが。
利用者側の画面
管理者側の画面
同じく下にアプリのリンクを貼っておきます。
一年後の実装
ソースコード
モダンですね（？）。そうなんです。実は3年になった4月ごろから友人とReactやNext.jsを学んでいたのです。これが開発において、とてつもなく便利なんだよな。
自分が担当したのは主にフロントエンドです。ヘッダー、メニューのリスト、レスポンシブ、メニューの追加を担当しました。友人がログイン、ログアウト、メニュー追加の後ろの処理など主にFirebaseを触ってもらいました。（ちなみにメニュー追加は実装する予定がなかったのですが、友人に後ろの処理頑張ってもらっている間暇だったので実装しました。これでダミーデータの追加とかが楽です。）
CSSもおしゃれな感じになっていますね。MaterialTailwindを使っているため、だいぶ簡易的に実装できております。売り切れ状態にグレースケイルを当てるのは我ながら素晴らしい発想ですね（？）。
今回はReactで実装したので、一年前のものより描画も早く、レスポンシブもヌルヌル動いて気持ち良いです。
本当は管理者と利用者でページを変えずに表示するものを変えるだけにする予定だったのですが、少し手間取ってしまい、納期も一日ということで管理者は"/admin"を追加した別ページに飛ばす形となりました。
ちなみにこのメニューは別に私の大学の食堂のメニューとなんら関係ありません、ダミーデータです。牛タンやお刺身なんか売っていたらとてつもなく高級な学食ですね。
終わりに
いかがだったでしょうか。自己満足の記事感が否めないですが、一年もあれば割と見た目の整ったアプリが開発できるのは今の技術のすごいところですね。
そんな進化し続ける技術を使いこなせるよう、精進して行かなければですね。
現在はDjangoを学習しているので、大学卒業までにはフルスタックで何か一つWebアプリケーションを完成させられるといいかな。就活頑張ろう...。