KDL BLOG
新卒コンペ ほめのびチーム フロントエンド編 vol.3
こんにちは！ほめのびチームの松本です。
研修期間に行った新卒コンペは「新型コロナ感染対策に役立つサービスの開発」を目的とし、私のチームでは「ほめのび」というアプリを開発しました。「ほめのび」とは、テレワークや外出自粛を余儀なくされている世の中での、親子のストレス緩和を目的としたものです。
私は新卒コンペにおいて、モックの作成と、フロントエンド開発に携わりましたので、主に開発についてお話をしたいと思います！
開発環境の構築を新人で行いました！
今回の開発は、新人が主体的に考えて行うため、開発に関わるフレームワークやサービスも自分たちで決定します。
決める事項としては、以下の通りです。
- Webアプリケーションか、ネイティブアプリか
- 使用言語、フレームワークはどうするか
- 仮想化ソフトウェアを使用するか
まず、メンバーのスキルがバラバラであることと開発期間が短いことから、ほめのびをWebアプリケーションとしました。次に、ユーザー情報などを保存するため、データベースの作成も必要であると考え、フレームワークはチームメンバーの数人が使用経験のあるRuby on Railsを、仮想化ソフトウェアとして、こちらも数人が使用経験のあるdockerを使用することにしました。以上の説明を図でまとめると以下のようになります。
CSSフレームワーク の選定
複数人でフロントエンドの開発をするにあたって、ページによって見た目が違うと、ユーザーが「あれ？なんか同じアプリっぽくないな」と違和感を持つ原因になりかねません。ユーザーのストレス緩和を目的としたサービスを目的としているのに、アプリの見た目でストレスを感じさせてはいけません！そのため、今回はCSSフレームワークである「Semantic UI」を用いました。マテリアルデザインより、フラットデザインがマイブームで、以前から「使ってみたい！」という個人的興味があったためです！
CSSフレームワークの利用によって、CSSを記述する時間も減り、共通のデザインが作成しやすくなりました！これでようやくモックを作成し、コーディング作業に着手できます！
構築した開発環境の立ち上げで問題発生！
CSSフレームワークも決定し、さあ開発だ！というところで問題が発生しました。Dockerを立ち上げてサーバーへの接続を試みたところ、チーム内の数人のPCでエラーが。チーム開発の日数を考えて、フロントエンド開発に関しては、Semantic UIはCDNを利用し、HTMLファイルとCSSファイルをローカル環境で作成し、編集してもらうことになりました。今回は完成が最優先であったため、「できる人ができることをする」という方向性で動きましたが、開発環境がうまく構築できないことに、とてもヒヤヒヤしました…
フロントエンド開発で大事にしたこと
私たちは、今回のフロントエンド開発で大事にしたことが二つあります。それは、以下の二点です。
- レスポンシブにする
- モックにできるだけ近くなるようにコーディングを行う
まず、以下のランディングページのキャプチャを見ていただきたいのですが、ファーストビューの画像を、ウィンドウ幅によって切り替えるようにしました。画像の引き延ばしもなく見た目もいいですね！
二点目のお話です。実際にモックと開発物を下に記載します。どちらがモックでどちらが開発したものか、わかりますか？
いかがでしょうか？カーソルやスクロールバーがあるので、バレバレな気がしますが（笑）
Semantic UIを使うことによって、CSSの記述量も少なく実現することができました！
新卒コンペを終えて
チームで開発を行うのは初めてでしたが、やはりフレームワークを使うのは必須であると感じました。
UIフレームワークのみならず、Webアプリケーションフレームワークやサービスが世の中にはいっぱいあるので、いろいろ利用して、所感を共有できたらと思いました。不測の事態もありハラハラしましたが、総じて楽しくできました！
次回は開発担当、後藤さんのブログに続きます！
【関連記事】
