5カ月でAngularJSとTypeScriptでSPAを開発。その技術の選択理由と開発過程は？（前編） Developers Summit 2016

2016年2月19日

シングルページアプリケーション（SPA）は、最近注目を集めているWebアプリケーションのアーキテクチャです。HTML全体の書き換えは行わず、変更が必要な部分だけをJavaScriptで動的に書き換えていくことにより、反応がよくユーザー体験にすぐれたWebアプリケーションを実現できます。

このSPAの開発を、技術の選択、仕様の策定、開発を含めて5カ月で行った経験談が、2月18日に都内で行われた「Developers Summit 2016」（通称デブサミ）のセッション「5か月でAngularJSとTypeScriptでSPAをつくった話」で紹介されました。

注目されているアーキテクチャをいまどきの技術を採用して開発した事例は、立ち見がでる人気のセッションとなりました。その内容をダイジェストで紹介します。

5か月でAngularJSとTypeScriptでSPAをつくった話

リクルートマーケティングパートナーズ山田直樹氏。

リクルートマーケティングパートナーズで、Web系のフロントエンジニアをしています、山田直樹と申します。

弊社では技術情報を発信しようとブログ「NET BIZ DIV. TECH BLOG」を公開しています。私はこの立ち上げ、開発と運用、編集長的なポジションなどもやっています。

また「英語サプリ」というサービスも運営しています。これはリスニング、スピーキングに特化した英語学習のコンテンツで、ドラマ仕立てのストーリーを見ながらしゃべると、その結果をリアルタイムにフィードバックしてくれて英語が上達する、というものです。

今日は、この「英語サプリ」の開発がどのようなものだったかについてお話していこうと思います。

SPAのスキルはゼロ。仕様は白紙状態

いまから約10カ月ほど前の2015年4月上旬。

社内のとある飲み会がありまして、同僚から「新規サービスを作るぞ」という話を聞きまして。しかもiOSやAndroid、Webとマルチプラットフォームで、せっかく新規なのでSwiftやScala、TypeScriptやAngularJSなどのとがった技術でやるぞと。

そうするとサーバサイドはAPIしか返さないから必然的にSPA（Single Page Applicationになりますね、すごいですね、という話をしていたわけです。

そこで「じゃあ作ってください」って言われて、「ファッ？」と。

でもこのとき、Webのフロントエンドエンジニアは僕しかいなかったんですね。だからやるしかなかったんです。

そのときの僕のスキルセットは、WebのフロントエンドエンジニアだったのでHTMLとCSSはそれなりにできますと。ただJavaScriptは人並み程度、JavaScriptフレームワークはVue.jsをちょっと使ったことがありました。もともとFlashをやっていたのですが、もう何年も前になるので忘れてしまいましたと。

つまりSPAの開発はほとんどゼロからのスタートだったんです。

2015年5月に正式に開発プロジェクトにジョインが決まりました。

で、このときリリース日は決まっているけど仕様は白紙状態でした。

あるのは、「これまでにない英語学習サービスを作るんだ」とか「リスニングとスピーキングに特化し、音声認識テクノロジーを使うんだ」といったプロダクトオーナーの壮大な夢が書かれた社内Wikiだけでした。

それしかなかったんです。

TypeScript、AngularJS、Gulpを採用

そこで、まだやることがなかったので、どうやったらSPAが作れるのか、技術調査から始めました。SPAは作ったことはありませんが想像は付きます。全部JavaScriptで作るので、大規模になるのは目に見えています。

じゃあ、大規模になっても耐えられるようなJavaScriptの開発環境について調べました。まず開発言語ですが、いろいろ触ってみた結果、TypeScriptを選ぶことにしました。

TypeScriptのいちばんの特長は、静的型付け言語であると。もともと僕はFlashをやっていたので、静的型付け言語の重要性は身に染みていました。

CoffeeScriptもBabelも動的型付け言語だったので、ブラウザで実行するまで動くかどうか分からない。型ががあればエラーがコンパイル時に分かるし、コードエディタでも指摘してくれるので、非常に開発効率が高い。これは将来性がありそうだなと、割と早く決めました。

フレームワークは一通り本を買って読んだりして、AngularJSにしました。

AngularJSはフルスタックと言うだけあって、双方向データバインディングとかルーティングとか、一通りの機能が揃っています。

特に注目したのはルーティングです。SPAなので画面遷移があってURLも書き換えなければならないので、ルーティング機能を重視しました。

次はタスクランナー。選んだのはGulpです。

Gruntは触ったことがあるのですが、個人的になじめなかったんですね。Gulpはプログラマブルに定義できるのがいいなと思いました。

そのほか、挙げていくときりがないのですが、だいたいこんな感じの技術を採用しました。

これでいけるかな、いけるだろう。と、このときは思ってました。

全員でカンヅメになって仕様策定

2015年6月。まだ仕様が決まりません。なぜかというと、プロダクト―ナーにちょっといざこざがあって、開発現場にこない。一方、開発現場には現場リーダーがいて、彼が開発チームの意向をまとめてプロダクトオーナーに報告するのですが、二人が衝突ばかり繰り返して、でも現場オーナーはガラスのハートの人なので、日に日に憔悴していく。

さすがにこれはちょっとヤバイだろうということで、何をしたかというとチームのメンバー全員で、朝から晩までカンヅメになって仕様を決める会議をしました。プロダクトオーナーにも、なんとかしてくださいと言って会議に出てもらいました。

そうした紆余曲折の後、2週間ほどで80％くらいまで仕様を固めることができました。残りの20％は、作ってみないと分かりませんねと。

そして2015年7月。本格的に開発が始まりました。Webのフロントエンドエンジニアは僕ともう1人増えて、2人になりました。

新しく入ってきたのは新人だったのですが、彼はすごくて、TypeScriptは2日で、AngularJSも1週間でマスターしてしまったんですね。