2021年12月26,27日に開催された「技育CAMP vol12」に個人開発で参戦しました。

私が作成した作品「E-Code」が、表彰式にて、「努力賞」をいただくことが出来ました✨

この記事では、技育CAMP、学校行事の就職作品プレゼンテーション,HAL EVENT WEEKを終えたので、総まとめとして「E-Code」の開発について紹介していきたいと思います。

E-Code

作品名：E-Code

URL : https://e-code.vercel.app/

GitHub Repositories : https://github.com/E-Code-Dev

作品概要
E-Codeは、「遅刻しそうだったから、パンを加えて家を飛び出して学校に向う時に、角で女の子とぶつかってしまって、一目惚れ。そこから始まった恋愛で今は彼女になりました。」などといった「そんな展開ありえない」と思うようなユーザーが実際に経験した、漫画みたいなエピソードを投稿するSNS Webアプリケーションです。

アカウントには、エピソードを読むことだけを行う「READER」と、投稿やコメントができる「CODER」の二種類のアカウントがあります。

◦開発背景

・私自身が恋愛漫画を読むのが好きなので、そういったエピソードを沢山読みたい。

・ちょっとした「楽しみ」を届けたい。

・個人開発になったときに、果たして最後までやり遂げられるのか、自分の実力試しの挑戦。

以上の三つが、この作品の作品の開発背景です。
一番は、技術力に自信がなかったので、この一年間でどれだけ自分が成長できたのか、やり遂げる力は自分にあるのか確かめたくて、開発を行いました。

◦名前の由来

名前には、
・「Emotion(感情)」
・「Comic(漫画)」
・「Episode(逸話)」
この三つから少しずつ文字を取り、「E-Code」と名付けました。

◦ロゴに込められた意味

E-Code LOGO

ロゴには三つの意味を込めました。

一つ目は、Emotion(感情)を表す大文字の「E」で、本の形や帯を表しています。

二つ目は、アクセントカラーの青とピンクで「青春」を表しています。

三つ目は、背景の図形が八角形なのは、Plutchikの「感情の輪」というものにおいて、
人間の基本感情が、喜び、信頼、恐れ、驚き、悲しみ、嫌悪、怒り、予期の8つであることからきています。

◦開発技術

E-Code 開発技術

フロントエンドではビルドツールにViteを使用し、React×TypeScriptを使用して、開発を行っています。

デザインには「Material Design」を採用し、ライブラリには「MUI」を使用しました。

バックエンドでは、Ruby on Railsを使用しております。

データベースに関しては、開発環境ではSQLite、本番環境でPostgreSQLを使用しています。

また、CODERのユーザーアバターの保存にはAWSのS3を使用しており（ハッカソン期間中）、READERのユーザー認証では、Firebase Authenticationを使用しています。

◦デザインカンプ

デザインカンプ

Material Designを勉強したくて、今回採用し、公式ドキュメントを読みながらになりますが、デザインカンプの作成を行いました。

◦工夫点

1.開発効率や、正当性を求めたコーディングしやすい環境構築

工夫点1

高速なサーバー起動ができるViteを使用したり、TypeScriptを使い、ESLintと連携させることで、必要な情報が何であるのか瞬時に判断、入力補完を利用することで、開発効率をあげ、間違っていればエラーを表示させることで、コードの正当性を高め、フォーマッターのPrettierを使用してコードをきれいにすることで、開発効率や正当性を求めたコーディングしやすい環境構築を意識しました。

2.CODERのユーザーアバターの保存

デプロイを行うサービスのHerokuがFreeプランだと、一定時間を経過すると画像が削除されてしまうことを、U-22プログラムコンテストの作品の開発を踏まえて、知っていたというのと、U-22の時に自分自身が実装できなかったので、リベンジとして、画像をAWSのS3に保存することにしました。

ハッカソン期間中において、ビルドツールのViteとS3の相性が悪く、フロントエンドのデプロイができなかったため、就職作品プレゼンテーションや、HAL EVENT WEEKのためにデプロイを成功させるため、別の方法がないか考え、S3からFirebase Storageに保存する方法に切り替え、無事にデプロイまで行い、アプリケーションを公開することができました。

◦苦労した点

一番苦労したのは、やっぱり、「一人で開発すること」これに尽きます。

どうしても、企画～技術選定～環境構築～デザインカンプ作成～コーディング～デプロイを一人で行うとなると割ける時間に限りがあります。

技術力にも自信がなかったので、エラーで動かくなって解決に時間がかかると、時間の無さにプレッシャーを感じていて、投げ出したくなる瞬間が何回もありました。

一番辛かったのは、イベント終了目前で、あとはデプロイ！ってなった時に、相性の問題でデプロイができなくて、技術を変えないといけないとなったときです。
その対応に、ハッカソンの後半、時間を取られてしまいました。

別のビルドツールへの開発環境の移行、作り直し、別のプラットフォームでの実装を試みましたが、ハッカソン期間中では 、結局解決することができなかったため、悔しい結果となりました。

◦「E-Code」の開発における感想

今回、U-22プログラミングコンテストで制作した「ヒトコエ」が、最終審査会まで進み、「経済産業大臣賞」をいただくことができたことを踏まえて、ハッカソンに初めて挑戦しました。
U-22の作品では、自分自身貢献できた実感が少なく、自分に自信を無くしていて、その感情を吹っ飛ばしたくて、 「個人でも実績を作ってやる」、その一心で開発を行いました。
だからこそ、ハッカソンで、努力賞をいただくことができたのは、涙が出るほど嬉しかったのを覚えています。
実際、表彰式でも泣いちゃってます（笑）
折れそうな時、もはや折れてる瞬間は何度もありましたが、一週間頑張って本当に良かったなと心の底から思っています。

それもこれも、僕は全部、いつもそばにいる5人の友人のおかげだと思っています。

僕の友達は、皆、凄いです。

朝が弱いけど、なんでもできて、僕の頑張りを褒めてくれて、気分が悪そうだと様子を伺って話しかけてくれる子、

影響力が一番大きくて、いつも真似して技術使ってみたり、分からない事を聞くと、なんでもわかりやすく教えてくれて、様々な相談に乗ってくれる子、

負けず嫌いで人一倍努力して、人見知りでも、自分のことそっちのけで、グループのこと、メンバーのことを考えてたりして、いつも頑張ってる子、

いっつも明るくて、面白くて、デザインのことになると、こだわりが強くて、個性が素晴らしくて、いつも驚かせてくれる子、

何考えてるかはわからないけど、周りがしっかり見れていて、ご飯を食べに行くと絶対に話を振ってくれる優しい子、

もう頭が上がらないくらい皆、尊敬してます。

この「E-Code」は、そんな友人たちとの思い出であったり、出来事であったり、経験が、沢山つまって出来ている作品です。

そんな作品を、技育CAMP、就職作品プレゼンテーション、HAL EVENT WEEKを通じて、
沢山の人に見ていただき、フィードバックをいただけたことを、嬉しく思います。
本当にありがとうございました。

これからも、「E-Code」の経験を活かして、日々、一生懸命頑張っていきたいと思います。

長くなりましたが、ここまで読んでくださり、ありがとうございました。

Mako🕊