こんにちは、株式会社スマレジのエンジニアのyushiです。
藤井聡太7段が棋聖のタイトルを奪取しましたね...！中学生でのプロデビュー時からずっと注目されていますが、年々評価を高めていっている印象です。
藤井棋聖（！）は王位戦に引き続き挑戦中ですが、2冠となるのでしょうか。木村王位のファンの僕としては複雑な気持ちで見守っています。
さて、今回は先日行われた「Hatena Engineer Seminar #14 〜魔法のiらんど編〜」についてご紹介します。
Hatena Engineer Seminar #14 〜魔法のiらんど編〜
動画はこちら（いつまで公開されるのかわかりませんが）。
https://hatena.connpass.com/event/181668/
Hatena Engineer Seminar #14 〜魔法のiらんど編〜
カドカワが運営している魔法のiらんどをはてながリプレースしたそうで、その時のやったことや知見についての発表でした。
20年続いているサービスのリプレースということで興味深く、とても勉強になりました。本記事では、その中で特に興味を持ったことをいくつか紹介しようと思います。
グループインタビュー
リプレースでは、度々のユーザーインタビューを通してユーザーの意見を集めました。このとき、1対1のインタビューだけでなく、複数のユーザーに集まってもらい同時にインタビューをしたそうです。グループインタビューでは、インタビュアーが詳しく知らないことや思い至らないことまで、ユーザー同士の会話で深まっていくという良さがあったそうです。
度々丁寧な事前告知を行ったというお話もあり、今のユーザーに喜んでもらえるようなリプレースとなることを大事にされていたのだと感じました。
GraphQLの優位性
API仕様としては採用されたGraphQL（https://graphql.org/）では、下記の利点があったそうです。
僕自身は、GraphQLに触れたことがないため詳しいことは理解できず...。しかし発表を聞いてとても使ってみたくなりました。
サーバサイド実装にはPerlを採用したそうです。
SSRの難しさ
フロントエンドでは、Next.jsによるSSRを採用したそうです。
SSR（Server Side Rendering）とは、ReactやVue.jsといったVirtual DOMをベースにしたフレームワークにおいて、サーバサイドでレンダリングした状態でレスポンスを返すことにより、画面初期表示を高速にしたりSEOに対応したりする技術のことです。
しかしSSRでは、ウインドウ幅等のブラウザに依拠する情報が利用できないため、Responsive対応での課題があります。SSRの結果とCSR（Client Side Rendering）の結果が異なると、SEOのペナルティを受けることがあるそうです。
これにはHTTPヘッダーのUser-Agentを元にスマホかPCか判別することで対応したそうです。
データ移行について
20年間人気を保ち続けているサービスですので、当然データも大量にあり、これの移行は重要で難しい作業だったようです。
この作業で利用されたAWS Batchは、リソースの上限まで並列で処理を実行できるのが便利だそうです。
また、いきなり作り込まずに動く状態でなんども試しながらアップデートした、という話はとても参考になりました。
素朴に行えば30日程度もかかる処理も、AWSのサービスの利用や様々なテクニックにより12時間程度まで圧縮したそうです。
モチベーション
度々"モチベーション"という言葉が使われていました。
枯れた技術は安全ではありますが、経験の少ない新しい技術だからこそ各自が前向きに勉強したり議論も進むということでしょう。これにはとても共感できますし、実際今の僕も楽しく勉強できていると感じています。
まとめ
はてなのエンジニアの方々は日頃からブログなどで情報をアウトプットをする文化があると聞いたことがあったのですが、実際発表は非常に理解しやすく整理されていました。
全てのタイトルに発表者のはてなIDが記載されているのもおもしろいです。
今回抜粋できたのはほんの一部の内容です。発表の動画はまだ公開されているようなので、興味のある方はぜひご覧ください。
