---

ニジボックスの開発案件事例をご紹介！

---

近年、開発スピードと保守性の高さから、多くの企業が採用しているフロントエンドライブラリ「React」。Facebookをはじめ、ShopifyやNetflixなどでも採用されており、その実績からも明らかなように、プロダクト開発において非常に強力な選択肢となっています。

ニジボックスでは、『Japan Node.js Association』の代表理事であり、『JSConf JP』のオーガナイザーとしても知られる古川陽介がデベロップメント室の室長を務め、Reactを中心とした技術力の向上と実践に力を入れてきました。本記事では、Reactを用いたニジボックスの実際の成功事例を紹介し、プロジェクトを成功に導くためのポイントについても解説します。

Reactとは

Reactは、Meta Platforms, Inc.（旧: Facebook, Inc.）とオープンソースコミュニティによって開発されたJavaScriptライブラリです。

主にWebアプリケーションやWebサイトのフロントエンド開発で広く利用されています。

Reactの強みは、画面を「部品（コンポーネント）」として分けて組み立てる発想にあり、これによって再利用しやすく、整理された設計が可能になります。そのため、チームでの開発や機能追加・変更がしやすいのが特徴です。

Reactを使うと良いサービス

Reactを使うと良いサービスを簡潔にまとめると、主に以下となります。

・ユーザーの操作に応じて画面が頻繁に更新されるアプリケーション

例えば、チャットやフィード、検索画面など、操作するたびに情報がリアルタイムで変わるUIのアプリケーションです。

具体的なサービスの一例としてはX（旧: Twitter）が挙げられます。

Xのタイムラインを見ていると、別のページに遷移することなく新しいポストがリアルタイムに表示されます。

Reactは、画面全体ではなく必要な部分だけを効率的に切り替えることが得意なため、こうしたアプリケーションと相性が良いのです。

・チームなど複数人で長期的に開発し続けるアプリケーション

前述の通り、Reactの強みは、画面を「部品（コンポーネント）」として分けて組み立てる発想にあります。

そのため、サービスが成長して機能が増えていくような場面でも、Reactは部品（コンポーネント）ごとに分けて開発しやすい構造なので、役割分担や保守がしやすくなります。

 Reactが使われているサービス

Reactは、多くの有名なサービスで採用されています。

例えば、FacebookやInstagramにはReactが活用されています。

その他、Netflixでは状態管理にReactとReact Reduxが使われており、これらのサービスはすべて高いパフォーマンスと優れたユーザー体験を提供しています。

 ◾️参考記事

・Metaによる公式技術ブログ「React at Meta Connect 2024」（2024.10.2）

・Netflixによる公式技術ブログ「Netflix Likes React」（2015.1.18）

ニジボックスにおけるReact開発の事例

ここでは、ニジボックスのReact開発案件における成功事例を2つご紹介します。

株式会社リクルート：『リクルートダイレクトスカウト』フルリニューアルデザイン支援・モダンフロントエンド開発支援

本プロジェクトでは、React・Reduxを用いた株式会社リクルート様独自のフレームワークを活用した会員制スカウトサービス『リクルートダイレクトスカウト』のフルリニューアルデザイン・開発支援を行いました。

・概要

株式会社リクルート様は、ハイクラス人材向け転職サービス『リクルートダイレクトスカウト（旧: CAREER CARVER）』のフルリニューアルプロジェクトを実施しておりました。

開発面ではエンジニアリソースが不足しており、React、Reduxを用いてモダンに開発された難易度の高いリクルート独自のフレームワークに対応できるエンジニアを必要とされておりました。

その中にニジボックスが参画、ミッションを「デザインの力で、プロジェクトの課題を解決。 一貫したUX体験を構築し、サービスの新しい価値を生み出す」とし、以下に取り組みました。

• 仮説立案と検証サイクルの効率化
• UX価値の検証と分析
• 効果的なチーム間連携によるスムーズかつ迅速な開発の実現
• React、Reduxを用いたリクルート独自のフレームワークへの迅速な適応

・成果

参画当初はサポートメンバーとして制作範囲が限られていましたが、主体的にプロジェクトの全体像の理解を深め、プロジェクトを主導すべく伴走いたしました。

結果として、サイト全体のUX体験に一貫性を持たせたデザイン制作ができ、多くの機能開発もお任せいただくことができました。クライアントからは「社内でもトップクラスのデザインシステムになった」「非常に協力的に案件伴走いただけているため、今後もぜひ継続して支援いただきたい」との評価をいただきました。

また、リニューアル後も発生した課題に対して改善案の企画から参画しており、引き続きサービスのUI UX向上に向けた運用支援をさせていただいております。

ニジボックスのコーポレートサイト内にある実績ページでは、具体的な取り組みについて画像を交えながらより詳細に記載しております。ぜひ併せてご覧ください。

『リクルートダイレクトスカウト』フルリニューアルデザイン支援・モダンフロントエンド開発支援

株式会社リクルート：『スタディサプリ 中学講座』ベーシックコース PC版Webアプリケーションリニューアル開発支援

本プロジェクトでは、Next.js+React+GraphQLを活用した中学生向け学習Webサービス『スタディサプリ 中学講座』ベーシックコース PC版Webアプリケーションのリニューアル開発を行いました。

・概要

株式会社リクルート様は、『スタディサプリ 中学講座』ベーシックコースについて、リニューアルを検討されていました。中学生の学習実態に合わせた学習効果が高く継続しやすいサービスとするため、PC版Webアプリケーションの開発支援のご相談をいただきました。また、リニューアルに際して、既存サービス開発時の課題を解消するため、GraphQLを組み込んだ環境でのプロダクト開発をご希望でした。

その中にニジボックスが参画、ミッションを「既存の開発課題を解消しながら、UI構築難易度の高いプロダクト開発を迅速に進める」とし、以下に取り組みました。

• モダン技術への適応
• 開発基盤のアップデート
• 学習ページの実装

・成果

中学生の学習アプリケーションというサービスの特性上、学年が切り替わる前の2月にリリースをするということはとても重要でした。スケジュールが限定される中、モダン開発体制を整えることで品質と開発スピードを両立。無事クライアントのビジネス要件を達成し、高品質なサービスリニューアルを実現することができました。

ニジボックスのコーポレートサイト内にある実績詳細ページもぜひ併せてご覧ください。

『スタディサプリ 中学講座』ベーシックコース PC版Webアプリケーションリニューアル開発支援

このようにニジボックスでは、プロジェクトへの単発の取り組みだけでなく、プロダクトの課題に継続的に向き合い伴走し続けることが可能です。

【成功ポイント①】ニジボックスにおけるReact開発への取り組み

ニジボックスでは、React開発プロジェクトを成功させるためにさまざまな取り組みを行っています。その中で特に重要なポイントを2点紹介します。

充実した研修 〜社内・リクルートからの研修〜

ニジボックスでは、ReactやTypeScriptに関する社内研修を充実させており、案件参画前からチームメンバーが知見を装着できる環境を整えています。

研修の様子は以下の記事をご覧ください。

これに加えて、株式会社リクルートのエンジニアからの研修も行っており、大規模サービスを展開するリクルートの豊富なノウハウを引き継いでいます。

これらの取り組みを通じて、React案件への対応力を強化しています。

高め合う風土の醸成 〜社内・社外での知見共有や発信〜

ニジボックスはデベロップメント室 室長の古川陽介主導のもと、「学習する組織」を目指し、自発的に学び合い、お互いを高め合う風土を醸成しています。

「学習する組織」については古川の以下インタビュー記事をご覧ください。

このような風土のもと、社内での知見共有が活発に行われています。

社内での日常的なコミュニケーションの他、定期的に社内・社外でのライトニングトーク（LT）や、Qiitaでのアドベントカレンダーなど、アウトプットを促進する文化が形成されています。

ライトニングトークの様子や公式Qiitaは以下からご覧ください。

ニジボックス公式Qiita

【成功ポイント②】ニジボックスにおける開発全般に対する取り組み

開発プロジェクトを成功させるにあたって、上記で紹介した技術知識への取り組みの他、プロジェクト自体への取り組みも行っています。ここでは、具体的な取り組みを2点紹介します。

DX Criteriaに沿った開発

React案件に限らず、開発プロジェクトにおいて「Webフロントエンド版DX Criteria」を活用したチームの改善活動に取り組んでいます。

まず、DX Criteria（DX基準）とは、日本CTO協会が監修・編さんしている企業のデジタル化とソフトウェア活用のためのガイドラインです。

DX Criteria (v202104)/企業のデジタル化とソフトウェア活用のためのガイドライン

次に、「Webフロントエンド版DX Criteria」とはオリジナルのDX Criteriaが掲げる「2つのDXによって高速な仮説検証能力を得る」というビジョンをWebフロントエンド技術領域の観点から実現するためのサブセットに相当します。

Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン

※参考：Webフロントエンド版DX Criteriaの概要（日本CTO協会）

Webフロントエンド版DX Criteriaには、ニジボックスのデベロップメント室室長である古川陽介が作成に携わっています。

このガイドライン（アセスメントシート）は開発プロセスだけでなく、チームの状況なども評価し、現状の改善点を見いだすための指標として活用することが可能です。

チーム全体が共通の指標を持つことで、プロジェクトの成功に向けた一貫した取り組みを実現しています。

定期的なクライアントへのヒアリング

開発案件に限らず、全てのプロジェクトにおいて定期的なクライアントへのヒアリングやアンケートを実施しています。

実施内容はプロジェクトメンバーへ共有し、クライアントの課題解決やプロジェクトの成功に向けて方向をずらすことなく取り組んでいます。

定期的にヒアリングミーティングの場を設けることで、プロジェクトの進行状況を第三者も含めてチェックし、円滑に進めることにつなげています。

まとめ

今回はReact開発の成功事例を2つご紹介しました。

また、成功させるポイントをニジボックスの事例を元に解説してきました。

【成功ポイント①】ニジボックスにおけるReact開発への取り組み

・充実した研修 〜社内・リクルートからの研修〜

・高め合う風土の醸成 〜社内・社外での知見共有や発信〜

【成功ポイント②】ニジボックスにおける開発全般に対する取り組み

・DX Criteriaに沿った開発

・定期的なクライアントへのヒアリング

その他のニジボックスの開発実績

ニジボックスでは、React開発をはじめとした開発プロジェクトに多数取り組んできました。上記で紹介した成功事例以外にも、さまざまな業界やニーズに応じた開発実績を積み重ねています。

さらに詳しい実績については、以下のリンクからご覧いただけます。

また、ニジボックスの開発実績をまとめた資料もご用意しています。

ぜひダウンロードしてご覧ください。

なお、ニジボックスでは顧客満足度を重要なKPIとして位置づけており、アンケートを定期的に取得しています。

2024年度の受託制作65案件で、75名のお客様から回答いただいた結果、0から10の11段階の評価（10を最高評価とする）で7点以上が91%といった高評価をいただきました。

評価いただいた点を継続しつつ、ご意見いただいた点は組織全体で真摯（しんし）に受け止め改善策を検討、実行し、提供価値の向上に努めています。

このように、顧客満足度を重視することで、より良いパートナーシップを築き、プロジェクトの成功につなげています。

これらの資料を通じて、私たちの取り組みや成果をぜひご確認いただき、今後のプロジェクトにおいてもご一緒できる機会があれば幸いです。

以下よりぜひお問い合わせください。