新卒1年目、Web開発チームの宮本(shqld)です。先日(2019/2/14)に開催された Developers Summit 2019で登壇させていただいたので発表内容の一部をかなりざっくりと端折ってご紹介します。
その前に
社員・インターン 大大大募集中🙇
現在電子版Webチームのメンバーは５人ですが、今年予定されているリニューアルもあり、より開発を活発にしていきたいということで我々のチームで一緒に働いてくれる仲間を募集中です！
先日ちょうどWantedlyの募集ページも公開しました。 https://www.wantedly.com/projects/285177
特にウェブ開発、弊社のインターンシップに興味のある方は、このWantedlyからでもTwitterでもぜひ気軽にご質問やご連絡していただけると嬉しいです！
電子版の高速化についての記事が日本語に🎉
僕たちのチームで開発している日経電子版Web (r.nikkei.com)が以前developers.google.comのCase Studiesで紹介されたのですが、最近日本語の翻訳が公開されたのでぜひ読んでいただけたら、と思います。
https://developers.google.com/web/showcase/2018/nikkei?hl=ja
日経電子版のマイクロフロントエンドとPWA
マイクロフロントエンドな開発をしています
電子版Web開発の全ての基礎となっているのはマイクロフロントエンド設計です。
https://micro-frontends.org
https://micro-frontends-japanese.org
この2年くらいから色々なところで情報を見かけるようになりましたが、ドメイン駆動開発と同じくらい実現の敷居が高いものだと思っています（個人の意見）。またサービス、プロダクトの性質によっては上で定義されたような設計が適さないことがあります。
日経電子版では、CDNのFastlyを効果的に用いてマイクロフロントエンドを実現しています。
詳しくは上のスライドか、先日Fastly User Meetupでチームメンバーが発表した資料を参照してください。
TypeScriptはじめました
去年にバンドルライブラリをRollupからBabel7に変えたのですが、色々ある恩恵の一つは tsc を使わずにbabelだけでTypeScriptをトランスパイル・バンドルできるようになったことでした。
詳しい話は上のスライドか他の情報を参考にしていただくとして、なぜbabelでTSを使えると嬉しいのかというと、
- ts-loaderみたいな特別なライブラリを使わなくても、普通のJSと同じようにバンドルできる
- 正規のJavaScript(ECMAScript)の標準にない言語仕様(TSのオレオレ仕様)は使えないようになっているので将来的に安心
- JSとの共存がかなり楽
などが挙げられます（他にもありますが...）。
いま電子版は全てのコードをTSに書き換えたというわけではなく、むしろ 「このモジュールは重要だからTSにしておこうか」 といった感じで、ファイル単位で徐々に置き換えていっています。
JSXはじめました
JSXといってもReactを使い始めたわけではありません。
テンプレートエンジンとして、つまりクライアントコードはVanillaJSのままで、マークアップをJSXで書いてSSR(サーバーサイドレンダリング)するだけ、という構成です。いま徐々にテンプレートのhtmlファイル(handlebarsを利用)をJSXで書き換えています。
目的とメリットは特に、
- (TSXを使って)コンポーネントのインターフェースを型で縛れる
- リントが効く
などなど色々ありますが、ウェブフレームワークを用いているプロジェクトからすれば当然のような話かもしれません。
ただ最近、Netflixが一部のページでクライアントコードからReactを消してSSRだけにしたらTTIが50%改善したという事例が公開されていました。
電子版のケースとは少し違うように見えますが、やっていることは基本的に同じです。
本当にクライアントでReactを動かす必要はあるのかをもう一度考えて、場合によってはNetflixのようにクライアントから消すというのは有用なパフォーマンスの改善だと思いますし、そういう選択もこれから各所で増えていきそうな気がしています。
マイクロフロントエンドだと...
上で挙げた2つの変更、割と大きめな変更に見えるのですが、マイクロフロントエンドな設計のおかげで各ページで単位で変更を入れることができています。
例えば、まずは実験として一番規模の小さいページ（マイクロサービス）で導入してみよう、といったような選択ができるのです。実際に、TypeScriptもJSXも全てのページで導入されているわけではなく、焦らず徐々に置き換えていこうという状態です。
おわり
ほんの一部だけの紹介で申し訳ありませんが、ぜひ上のスライドと合わせてこれまでとこれからの発表資料やテック記事を参照していただければ嬉しいです。また、これからもどんどん対外的な発表を増やしていきたいのでもし機会があればぜひ誘っていただけたら...!と思います🙇