IoT領域へのビジネスを中核とし、エッジとクラウドをつなぐIoTオーケストレーションサービス「enebura（エネブラー）」を用いて、企業のIoT事業の実現を支援する幅広いサービスを提供している、株式会社ウフル。現在は、フルSPA（シングルページアプリケーション）のクラウドインテグレーションサービス（*1）開発に着手しています。

ブラウザでのページ遷移を行うことなくコンテンツが切り替えられるため、UXの向上に大きく貢献すると考えられているSPA。そんなSPAのサービス開発に、GIGから参画したメンバーがいます。フロントエンドエンジニアの江崎修平です。

今回は、株式会社ウフルの川口雄大さん、込戸輝さんを招いて、開発担当の江崎と共にプロジェクト成功の裏側を語ってもらいました。

*1：サービス基盤の企画・構築・運用などをクラウド上で完結する仕組み

フルSPAの大規模開発だからこそ、上流工程から関われるエンジニアとタッグを組みたかった

GIG江崎：本日はよろしくお願いします。まずは、今回のプロジェクトの概要についてお聞かせください。

川口氏：今回、江崎さんにご担当いただいているのは、今後リリースを予定している1,000万会員クラスの大規模なクラウドサービスです。フルSPAの仕様が前提だったので、その理解がある方と一緒にプロジェクトを進めたいと思っていました。そのためこのプロジェクトに関われるのは、SPAのご経験があるだけでなく、人間性も素敵な江崎さんしかいないと思ってアサインさせていただいたんです。

GIG江崎：ありがとうございます（笑）。さっそくですが、プロジェクトの話を進めましょうか。今回のサービスは大規模なアクセスが想定されるため、アーキテクチャをサーバレスに寄せていますね。

川口氏：そうですね。画面側はフルSPAです。バックエンドサーバは存在していますが、GCS（Google Cloud Storage）を利用することで、サーバに負荷を掛けずに静的ファイルとして用意できる仕様になっています。キャッシュできないようなデータに関してのみ、サーバサイドと通信する仕組みです。

GIG江崎：従来の開発と、今回のようなフルSPA開発だと基本的な考え方も違う気がしています。

川口氏：よくあるWeb開発の場合、サーバサイドとフロントエンドとを別の企業に外注しているケースが珍しくありません。そうすると、コンポーネントの切り方が変わるだけで、タグ構造が変わってしまうため、発注主は再発注を余儀なくされます。

GIG江崎：CSSやHTMLでのバグが生じた時になかなか原因究明ができなかったり、リードタイムが発生することも多いですよね。

川口氏：僕はそういった不手際がすごく苦手で（笑）。だから、コンポーネントへの理解があってマークアップやCSSのデザインもできる江崎さんが良かったんです。CSS設計のコンサル経験もあるとお聞きしたので、最高のパートナーになるなと。実際に働いてみると、想像以上にフィットしたのでびっくりしました。本当に助かってます！

GIG江崎：僕の方こそ勉強させていただいて、大変お世話になっています。込戸さんはいかがですか？

込戸氏：僕の方からも、江崎さんには難度の高いお願いをするケースがありますね。これまでご経験したことがない領域も相談させていただいたりとか。ちょうど、今日もご対応いただきましたよね？

GIG江崎：そうですね（笑）。

込戸氏：江崎さんにはデザインも依頼しているので、クライアントからの急なご指摘があった際にも柔軟に動いていただいてとても助かっています。実際、クライアントワークで急な対応が発生した場合、江崎さんはどう感じていますか？

GIG江崎：なんとも思っていないです。

川口氏・込戸氏：（笑）。

込戸氏：無ですか？

GIG江崎：無ではないです（笑）。僕もクライアントワーク歴が長いですし、先輩方からもいろいろなエピソードを聞いていたりするので、プロジェクトとして健全であれば違和感はないんです。

川口さん・込戸さん：それなら良かったです（笑）。

これからは、マルチスキルを携えたSPAフロントエンドエンジニアの需要が高まるはず

GIG江崎：僕自身、クライアントの方々と打ち合わせしたり、プロジェクトに携わっていて常々実感するのですが、今求められているのはSPAのフロントエンドエンジニアだと思うんです。

川口氏：僕もそう思います。どこの企業さんもSPA化はしたいけれど、いろいろな課題に妨げられて実現できていないのではないかなと。

GIG江崎：そもそもSPAに対応できる人材は少ないですよね。知見不足という課題もありますし、業界的に流れも早い。この変化のスピードに付いていっているエンジニアは多くないように感じます。

川口氏：とはいえ、多少は仕方のない側面もありますよね。あまりにもスピードが早すぎて、新しい知識を学んでいるうちにすでに時代遅れになるケースも珍しくありませんから。とてもニッチな情報にはなりますが、AngularJSが流行った2015年頃から考えても、すでにReact.js、Vue.jsへとめくるめくスピードでトレンドが変化しています。

GIG江崎：でも、ここまで早く動いてきたJavaScript界隈ですが、少し落ち着いてきた印象もありますよね。これまでに生まれたたくさんのフレームワークやライブラリがやっと標準化してきました。これから学ぶ方にとっては、今が参入のチャンスかもしれません。

川口氏：きっと、これからはフロントエンドエンジニアの需要が高まりますよね。さらには、プログラムが書けてデザインもできる人のニーズが高まっていくと思います。古くから業界にいるサーバサイドエンジニアがフロントエンドにシフトする流れもあるのかなと。

GIG江崎：実はこのプロジェクトで学んだVue.jsの知見を、React.jsの社内サービスに応用したり、社内でも適宜フィードバックしているんです。

川口氏：Vue.jsの知見はReact.jsで活かせますし、React.jsの知見もVue.jsで活かすことができますよね。だからReact.jsの経験がある方は習得も早い。どちらかの経験があれば、社内で共有したときでも飲み込みも早いと思います。

GIG江崎：ちなみに、今後のWebサービスはどう変化していくと考えていますか？

川口氏：僕は、これからどんどんサーバレスに寄っていき、SPAが増えていくと思います。今回のプロジェクトでも、95%はサーバレスになっていますしね。今はスマートフォンのユーザーが増えているので、処理スピードを早めたい、ユーザー体験を高めたい、サーバが落ちるリスクを減らしたいなどと考えると、サーバレスへと変化していくのだと思いますね。GoogleやAWS（Amazon Web Services）のカンファレンスに行っても、サーバレスの話題は常に出ますしね。

GIG江崎：なるほど。これからのトレンドや流れなんかも楽しみですね。

規模を問わずプロジェクトを成功に近づける秘訣

GIG江崎：ウフルさんとお仕事をご一緒していて、川口さんと込戸さんのお二方ともプロジェクトを牽引するのがとても上手だなと思ったんです。プロジェクト運営が円滑に回る秘訣はありますか？

川口氏：プロジェクトに課題が出た時に、ズルせず正しく取り扱うことでしょうか。込戸さんはどう思いますか？

込戸氏：理屈が通らない事象に対して、理論的に自分たちの意見をお伝えすることだと思います。

川口氏：たしかに。込戸さんは仕事を進めるうえで、たくさん質問しますよね。

GIG江崎：プロジェクトの進め方が確定していることって、本当に大切ですよね。込戸さんはプロジェクトにとって無駄な作業を誰かに依頼することは絶対にないような印象ですし。

込戸氏：大規模プロジェクトを進める時って、それぞれの会社としての役割を全うすることが重要です。そのタスク管理、割り振りが適切になることで、全員が納得した状態で仕事に取り組めるのかなと。

川口氏：あとは、有機的にSlackやGitHubを運用するのも大事ですよね。大規模なプロジェクトということもあって、プロジェクト自体に運用のノウハウがたくさん詰まっているんです。たとえば、プロジェクトに参画した初日から質問がしやすい雰囲気だったのではないかと思うのですが、いかがですか？

GIG江崎：その通りですね。すぐに馴染めました。

込戸氏：新しく携わる方が疑問点や悩みを共有できない環境では、いずれ必ず歪みが生じますよね。

GIG江崎：そうだ！せっかくの機会ですし、プロジェクトがうまく回るチャットツールの使い方やノウハウを少しだけ聞いてもいいですか？

川口氏：本当に少しだけなら（笑）。先ほども少し触れましたが、コミュニケーションツールのSlackの使い方に少しコツがあるんです。たとえば、今回のプロジェクトでは、Slackに事務連絡だけじゃなくて「ポエム」を書くメンバーがいますよね。

GIG江崎：「ポエム」ありますね……（笑）。ずっと不思議に思っています。

川口氏：あれは、誰かに言いたいんだけど誰に言えばいいか分からないことを書きたい時に「ポエム」って文頭に入れて投稿しているんです。そうするとみんなの目に止まるから、インプットだけできている状態を作れます。そのあとに、いずれ「ポエム」たちは業務上のなんからのタスクになるのですが、ゼロから発生するタスクではないから「ああ、あれね」とスムーズに理解できるんです。

GIG江崎：問題提起と、課題と、議題。これらを「ポエム」と「タスク」で振り分けることで、適切なタイミングで誰もが対応できるようにしているんですね。勉強になります……！

チームビルディングも担うGIGへ

川口氏：ちょっと話は変わりますけど、GIGさんのエンジニアはどんなメンバー構成なんですか？

GIG江崎：フロントエンドやサーバサイドの専門もいますし、フルスタックも在籍していますよ。フルスタックのエンジニアは経験が豊富なので、各メンバーに知見を共有している機会が多いです。

川口氏：フルスタック、良いですよね（笑）。サーバサイドのエンジニアがフロントエンド、フロントエンドのエンジニアがサーバサイドを経験することで得られる知見は多いですから。僕は、そうしてたくさんの知見を持ったエンジニアの方と一緒に仕事をするのが好きですね。

GIG江崎：プロジェクトベースだと、今回のテーマであるSPAの案件でのご相談をいただくことも増えています。

川口氏：それなら、江崎さんがバンバン担当しちゃえばいいじゃない。分身の術を使って（笑）。

GIG江崎：頑張ります（笑）。では最後に、今後GIGに期待していることをお聞かせください。

込戸氏：今回のプロジェクトだけでなく、江崎さんには今後弊社のチームビルディングやマネジメントもお任せしたいと思っています。これまで以上に、ご一緒できる機会を増やしていけるとうれしいです。

川口氏：江崎さんは現場のエンジニアというよりも、マネージャーであり、リーダーのような存在ですよね。視座が人よりも高いことは最初にお会いした時から感じていましたから。だから、江崎さんにはこれからも弊社をサポートして欲しいですし、僕らの持っているノウハウもたくさん盗んでいただきたいです。そして、江崎さんをハブとして、GIGのみなさんとも有機的な関係を築いていきたいです。

GIG江崎：ありがとうございました！

Web制作、システム開発の制作実績を見る

Web制作、システム開発の制作事例インタビューを読む

Web制作、システム開発の費用・見積りを問い合わせする

GIG BLOG編集部

株式会社GIGのメンバーによって構成される編集部。GIG社員のインタビューや、GIGで行われたイベントのレポート、その他GIGにかかわるさまざまな情報をお届けします。