はじめに
こんにちは！
ニフティでは新人エンジニアの研修の一環として「エンジニア定例」というスキルアップを目的とした勉強会を実施しています。
その集大成として3日間のハッカソンを行いました。
ハッカソンのテーマは「全国高校eスポーツ選手権に限らずe-sportsを盛り上げるためのサービス」で、私たちのチームでは「e-sportsのプレイヤーとして必要なプレイスキルを可視化するツール」として、「ニフティ RoadmapApp」を作成しました。
本記事では、ハッカソンで作成した「ニフティ RoadmapApp」について紹介します。
メンバー紹介
碇川
- ハッカソンでの担当：フロントエンド
- 普段の業務：@niftyトップページ運用・開発
上原
- ハッカソンでの担当：フロントエンド
- 普段の業務：ニフティニュース運用・開発
増田
- ハッカソンでの担当：バックエンド
- 普段の業務：NifMo運用・開発、MAX光開発
森田
- ハッカソンでの担当：バックエンド
- 普段の業務：スタートキット運用・開発、MAX光開発
プロダクトについて
概要
このWebアプリはe-sportsのプレイヤーとして必要なプレイスキルを共有するツールです。e-sportsへの参加障壁を減らし、競技人口を増やすことが狙いとなっています。
ユースケースとしては、以下の2点を想定しています。
- 選手の教育者（トレーナー）はロードマップを作成・公開
- 選手（プレイヤー）はロードマップに沿ってゲームをプレイすることで上達
- ゲームの開発元は公式ロードマップを公開。タスクを完了したプレイヤーに対し、ゲーム内アイテムを与える
使い方
簡単に使い方を紹介します。
ページにアクセスすると、ログイン画面に移ります。
ユーザー名を入力し、ログインボタンを押すことでログインすることができます。
ログインすると、プレイヤーページに遷移します。ここでは、左側にロードマップの一覧が表示され、右側には選択しているロードマップのタスクが表示されています。
ロードマップごとにタスクの進捗度合いを確認することができ、チェックボックスにチェックを入れることでタスクの完了とすることができます。
また、ヘッダーのTRAINERというページをクリックすることで、トレーナーページに遷移することができます。ここではロードマップの管理をすることができます。
ロードマップの下にあるプラスボタンを押すことでロードマップを新規作成することができます。
以下のようにロードマップの名前を入力し、ADDボタンを押すことでロードマップが追加されます。
タスクを追加したい場合には右側のタスク一覧表示部分にあるプラスボタンを押します。
以下のように表示されるので、タスク名と詳細を入力し、ADDボタンを押すことでタスクが追加されます。
また、タスクの横にある編集ボタンや削除ボタンを押すことで、タスク名や詳細情報を変更したり、削除したりすることができます。
システム構成
工夫したところ
フロントエンド
わからないことはすぐに相談するようにしました。お互いにフロントエンドはあまり触ったことがなかったので、共有し合いながら地道に開発を進めることができました。また、進め方として、コンポーネントごとにチケットを切ることで、自分の役割を明確にすることができました。
デザインフレームワークにMUIを使用したため、開発が容易になりました。
バックエンド
開発の最初に作成予定のAPIをハリボテで用意して1つずつ中身を実装していきました。これにより、実装の進捗状況の確認が容易になりました。また、DBやAPIの設計をメンバー全員で開発の最初に行うことで、あまり後戻りが無く進められました。初日のほとんどは設計に使いましたが、このような工夫が2日半ほどで開発できたポイントだと思います。
チーム全体
スクラム的な開発をチームメンバーで意識して、常にmasterブランチのソースコードを使えば正常動作するように心がけました。また、GitHubのカンバンを活用して必要な機能を洗い出し、優先度順に実装していくことで、短い期間で基本的な機能を完成させることができました。
合宿を通じた学び
チーム全体として技術に関する学びが大きいと感じました。今回の合宿ではフロントエンドがTypeScript、バックエンドがFlaskを用いて開発していましたが、それぞれの技術の理解度を深めることができました。
また、スムーズに開発を進めるためにはどんな工夫をして進めれば良いのか？と考えるきっかけにもなりました。合宿前と比べ、作業分担が必要な部分、全体で確認した方が良い部分というような判断がつくようになったのも学びの１つです。
さいごに
今回のハッカソンを通じて、チームでものづくりをすることの楽しさを再確認できました。
また、チーム開発のプロジェクトの進め方が理解できたと思います。同じようなプロジェクトがあった時はスムーズに進められそうなため、今後の業務に生かしていきたいです。
