Angular座談会（前編）。コンポーネントの設計はどうする？ モジュール分割の方法は？ ビルド遅くない？ 開発者が生々しく語る現場の悩みとは。ng-japan 2017

JavaScriptフレームワークとして知られるAngularのイベント「ng-japan 2017」がAngular Japan User Group主催で6月17日に都内で開催されました。

AngularはJavaScriptのフレームワークとして、PC用のWebサイトからモバイルアプリケーションまで、さまざまな開発現場で使われ始めています。ng-japan 2017で行われた「【座談会】Angular開発の生々しい話」は、そうした開発者が抱える技術的な悩み、課題などが率直に語られるセッションとなりました。

この記事ではその内容をダイジェストで紹介します。

【座談会】Angular開発の生々しい話

白石氏　この座談会で、すでにAngularを現場で使ってらっしゃる方々に共感してもらったり、新しい発見をしてもらえたらいいなと思います。

まずは自己紹介ですが、僕はオープンウェブテクノロジーという会社の社長をやっていまして、そこで「TechFeed」というエンジニア向けのニュースアプリですね、これをAngularで作っています。

Cordvaも使っていて、モバイルアプリとモバイルサイトとPC向けのWebサイトをワンソースで作っています。

池田氏　ICSの池田と申します。ICSはWeb制作会社でして、Angularは広告系のコンテンツや、自主的に開発しているアプリケーション、ElectronとかCordovaなどでデスクトップアプリやモバイルアプリを作るときに使っています。

laco氏　トップゲートという会社の稲富です。Twitterではlacoと呼ばれていて、ng-japanのオーガナイザーをやっていて、それからAngularのコントリビューションなどをやっています。

最近はAngularとFirebaseを使ったアプリを書いたりして、Firebaseがつらかったりしました。

白石氏　この3人でAngularについて現場で開発していて困ったことなど、設計についての話、開発に関する話、そのほかについての話などをしていこうと思います。

コンポーネントは、まず大きく作ってから切り出す

白石氏　最初は設計に関する話から。コンポーネント設計って、どういう風にしていますか？ まず先に設計をするんでしょうか？

laco氏　僕は基本的に大きなコンポーネントをざっと書いてしまってから、必要に応じて切り出す。ということをしてます。先に（小さな）コンポーネントを作って組み立てるという方法は成功した試しがなくて。先に大きなコンポーネントを作ってから、後々のために再利用できそうなところを切り出す、というのがだいたい僕のやり方ですね。

池田氏　lacoさんとまったく同じで、まずはApp.txとかにがーっと書いてしまって、ここはそろそろ分けた方がいいかな、というところを別コンポーネントに分解していく、というやり方でやっています。

白石氏　コンポーネントには、「Container Component」と「Presentational Component」という分け方がありますよね。Container Componentではアプリの見栄えは作らず、Presentational Componentでは発生したイベントを捕まえて、といった。これは実践されてますか？

laco氏　最初にぱーっと作ったコンポーネントは必然的にContainer Componentになるわけです。で、ここはPresentationalだな、と思ったところは切り分けていって、さらにPresentationalなところがいくつか固まっているところがあると、Containerで囲えるなとか。

最初ってアプリケーションをどう作るかは固まってなくて、作りながら固めていくんですが、ここは凝集しているなと思ったら新しいContainer Componentになる感じです。

モジュール分割の方法は？

白石氏　Angularはアプリケーションをモジュールに分割することができるんですね。でもTechFeedはワンモジュールでやってまして、もしこれからモジュールを分けたいとすると、どうすればいいんですかね。

laco氏　Angularでモジュール分割をするモチベーションはLazy Loadするかどうかなので、これをしないのであれば分割しなくてもいいんですね、コードが増えるだけなので。

ただ、ionicを使っていると、たぶんLazy Loadできないです。ルータが違うので。

白石氏　僕が来たところでは、最近ionicも無理矢理Lazy Loadできるようにしたらしいんです。

laco氏　だとするとionicを使っていてもLazy Loadするならモジュールに分割するモチベーションができますが、分割は結局、画面ごとなんですね、URLごとの分割になるので。

じゃあモノリシックなアプリをどうやってモジュールに切り分けるかというと、このあいだ社内でもやったのですが、まずモノリシックなアプリのなかでもいちばん切り分けやすそうな、ほかに依存が少なそうな画面を切り分ける。

すると、そこと、もとのモジュールとの共通の部分がシェアードモジュールに行く。この作業を一画面ずつ繰り返すと、最終的には全部の画面がLazy Loadになるので、これを愚直に繰り返すしかないですね。

白石氏　そうやって頑張ってLazy Loadにするようにしたら、スタートアップが小さくなるんですかね。

laco氏　バンドルサイズ（の縮小）にはけっこう利きますね。特に回線が遅いモバイルで顕著に利いてきます。PCだとあんまり実感しないのですが。

池田氏　私、モジュール分割は恥ずかしながら知らなくてですね、いまの話はすごく興味深く聞いていて、というのもモバイルアプリを作るとどうしても起動時間がかかってしまっていて、社内でいろいろ検討しても解決できなかったので、もしかしてこのLazy Loadで解決できるかなと思ったんです。

これは分割することでダウンロードサイズが小さくなるのか、それとも初期起動が速くなるのか、どうなんでしょう。

laco氏　基本的にはダウンロードのサイズですね。最初のブートアップに必要なJavaScriptのサイズが小さくなる。使われていない画面の分はあとから読み込むので、まだフェッチされてなくて、その画面に遷移するときにはじめて持ってくるんです。

白石氏　設定画面とかは、がっさり別モジュールにできて、バンドルサイズが減るからフェッチの速度も速くなるし、もしかしたら最初のJavaScriptのパース時間も短くなると。

laco氏　そうですね。

PWAを完全に実現するのはとても難しい

白石氏　PWA（Progressive Web Application）とかCordvaとかはどうですか？
（新野注：PWAとは、おもにモバイルデバイスでWebの体験を向上させるため、WebサイトやWebアプリがまるでネイティブアプリのように振る舞える機能を備えたもの。Googleが推進している）

laco氏　PWAはいいけど、Lighthouseの点数を上げるのはつらいですね。

白石氏　Lighthouse？

laco氏　Lighthouseは最近Googleが出してるツールで、そのWebサイトがPWAとしてどのくらい出来ているのか、100点満点で点数を付けてくれるんですよ。

しかもその基準はどんどん進化しているので、先週は100点だったけど今週は90点、なんてこともあって。でもこれに従って修正していくと、どんどんPWAとして出来上がっていくんですね。

Angular.ioのWebサイトがリニューアルしてPWA対応になったんですけど、それでもいま92点ぐらいなんですね。

白石氏 Angularの公式サイトでも100点は取れないんですね。

laco氏　100点をとるのは相当難しいですね。オフラインに完全に対応して3G回線でもさくさく見られるようにしなくちゃいけないとか、そういう世界なので。

ただ100点は難しくても、90点以上とか80点以上を目指すという指針があると結構いいと思います。

≫後編に続く。後編では、ビルドの話やAngularの日本語情報についての要望などが語られます。