はじめに
こんにちは。
ニフティ グループでは新人の技術向上のため、エンジニア定例という新人のスキルアップを目的とした勉強会を行っています。
その締めくくりとして毎年最後に3日間にわたる合宿を行っているのですが、今年はチーム全員在宅で行う完全オンラインのハッカソン合宿を行いました。
本記事では、このオンラインハッカソン合宿で作成した「ニフティ社内便利ツール ポータルサイト」略して「ニフ便ポータル」について紹介します。
メンバー紹介
宮本
- 普段の業務：@niftyトップページ運用・開発
- 今回：フロントエンド担当
塩田
- 普段の業務：社内利用システム運用・開発
- 今回：バックエンド担当
多田
- 普段の業務：バックボーンネットワーク運用
- 今回：DB、バックエンドを担当
松村
- 普段の業務：@niftyゲーム運用・開発
- 今回：デザイン、フロントエンド担当
背景
実は社内では、日頃から有志の方が業務に役立つさまざまな便利ツールを作成して公開されています。
なにかと業務に役立ったり、業務を楽しくするようなツールがあるのですが、残念なことに便利ツールをまとめたサイトがありませんでした。
そのため、公開から日が経つとツールの存在に気づきづらいという問題点があります。
また、ツールのリポジトリ情報もまとめられていないため、内部でどのような技術を利用しているのか追いにくいという問題もありました。
そこで、私たちは便利ツールのためのポータルサイトを作成することで、より効率的にツールを管理できるようにしようと考えました。
プロダクトについて
今回作成したニフ便ポータルについて、簡単に説明します。
ニフ便ポータルのトップページでは、新着ツールと人気ツールが一目でわかるようになっています。
また、常に表示されているヘッダーから検索を行うことで、利用目的や使用技術からツールの検索を行うことができます。
※今回入っているデータは、すべてダミーデータです。
トップページや検索ページで見つけたツールをクリックすると、登録されているツールの詳細ページを見ることができます。
詳細ページにはツールの使い方や、リポジトリのURLを確認できると同時に、気に入ったツールに「いいね」をすることができます。
開発における工夫点
今回チーム開発を行うにあたり、以下のようなことを工夫しました。
- 事前の要件定義
- Atomic Designの採用
- Material UIコンポーネントのラッピング
事前の要件定義
合宿自体は3日間という限られた時間の中で開発を行う必要があり、これに備えて画面遷移の仕様やAPIの仕様などを事前に決めていました。
特にAPIの仕様については綿密に打ち合わせを行うことで、以下の画像のように呼び出し方法と出力例も定義し共有を行いました。
さらに、それぞれの仕様をもとにデータベースに必要な要件の洗い出しを行い、データベースの種類やスキーマの決定を行いました。
その甲斐もあり当日はほとんど実装のみに集中することができ、バックエンド側でAPIが作成できていない段階でも、フロントエンド側でモックを用意して動作を確認するといったようなこともできました。
しかし、その一方で一部の項目ではしっかりと定義していたはずの要件に抜けがあり、APIをうまく呼び出せなかったりといった問題も発生したため、要件定義の難しさ、また重要さを学ぶことができました。
Atomic Designの採用
今回フロントエンドにはReactを用いており、デザイン設計ではAtomic Designに挑戦してみました。
Atomic Designとは、UIのパーツをatoms、molecules、organisms、templates、pagesという5段階に分けて設計する手法です。
先にパーツとなるatomsから作成したおかげで、ページごとに作業を分担しても統一感のあるデザインに仕上げることができました。
今回作成したポータルのサイトのAtomic Designによるパーツ分けの一例を紹介します。
まず、atomとしてツール作成者を表すAuthorコンポーネントを用意しました。
ほかにもatomとして、日付表示用のDateTimeコンポーネントやTagsコンポーネントなどがあります。
次に、atomを集めたツール情報を表示するmoleculeとして、ToolCardコンポーネントがあります。
atomとして用意したAuthorコンポーネントは、ほかにもツール詳細ページでも再利用しています。
さらに、ToolCardコンポーネントを並べて表示するためのCardListコンポーネントをorganismとして作成しました。
CardListコンポーネントは、TOPページや検索結果ページで再利用しています。
こうして作成したコンポーネントを、さらに上位の階層に渡すことで最終的にひとつのページを作成しています。
Material UIコンポーネントのラッピング
今回フロントエンドを限られた時間で統一感を持ったデザインをするために、ReactのUIフレームワークであるMaterial UIを利用しました。
整ったデザインのボタンや入力フォームなどを簡単に用意することができるため、フロントエンド側の開発ではとても役立ちました。
Material UIを利用する上での工夫点として、今回利用したMaterial UIコンポーネントはすべてラッピングコンポーネントを作成しています。
直接Material UIコンポーネントを呼び出していると、後々Material UIのバージョンアップでコンポーネントの仕様が変わったり、あるいは開発側の都合でデザインを変更しようとした場合に、記述しているすべての箇所を修正する必要があります。
しかし、事前にコンポーネントをラッピングすることで修正箇所は一箇所で済み、保守性が上がります。
学び
今回はオンライン合宿ということもあり、事前準備はもちろん開発中のコミュニケーションも非常に重要であるということを学びました。
事前の設計に不備があることを発見したり実装に行き詰まってしまったことがあっても、常に通話し画面共有を行うことで、チーム内ですぐに話し合いを行い課題を解決することができました。
ぜひこれからの業務の中でも、積極的にチーム内でコミュニケーションをとる姿勢は忘れないようにしたいと思いました。
終わりに
オンラインでの合宿というなかなか珍しい形態ではありましたが、その中でもチームで一丸となりひとつの成果物を作り上げることができました。
単にスキル向上というだけでなく、チームで集中して開発すること自体がとても楽しい体験でしたが、実は合宿終了後に見つかったバグや実装の抜け漏れがありました。
なので、次に機会があればより完成度の高いものを作れるようにスキルを上げてリベンジしたいと思います。
ほかのチームの報告も来週以降このものづくりブログに投稿される予定なので、ぜひチェックしてみてください。
