Hatena Engineer Seminar #8 を開催しました #hatenatech

こんにちは！Mackerelチームの id:amagitakayosi です。
先日開催された Hatena Engineer Seminar #8 のレポートをお届けします！

Hatena Engineer Seminarについて
id:amagitakayosi 「はてなにおけるフロントエンド会の取り組み」
id:t_kyt 「がんばらないTypeScriptのはじめ方」
id:masawada 「フロントエンドの秩序は保たれているか?」(LT)
id:akiym 「マンガビューワの遅延ロードのしくみ」(LT)
パネルディスカッション
最後に

Hatena Engineer Seminarについて

developer.hatenastaff.com

Hatena Engineer Seminar(以下「エンジニアセミナー」)は、はてなのサービスを開発する上で、エンジニアがどのような事を考えているのか、どのような働き方をしているのかを語るイベントです。
第8回目となる今回は、はてなのフロントエンドについて4人のエンジニアが発表しました。

当日の様子はTwitterのハッシュタグ #hatenatech でもご覧になれます。

それでは、今回のイベントの発表について順番にレポートしていきます。

id:amagitakayosi 「はてなにおけるフロントエンド会の取り組み」

speakerdeck.com

一人目の発表は僕 id:amagitakayosi です。
はてな社内でフロントエンド会というグループを立ち上げ、これまでに行ってきた活動について報告しました。

フロントエンド会では、知見共有会やランチなど、社内でフロントエンドの情報を交換するためのとりくみを行なっています。
今後もやり方を模索しつつ、社内のフロントエンドを改善するための活動を続けていきたいと思います。

id:t_kyt 「がんばらないTypeScriptのはじめ方」

blog.yux3.net

二人目の発表は id:t_kyt です。
はてな社内のプロジェクトにTypeScriptを導入することで見えてきた、TypeScriptの導入や開発のコストを抑えるコツについて書かれています。

TypeScriptのメリットを享受するために、最小限の努力で改善を進めるという姿勢は、会場の皆様にも共感いただけたようです。
最近のTypeScriptの進化により、型定義ファイルの扱いが容易になったことも、導入しやすさに影響していそうですね。

id:masawada 「フロントエンドの秩序は保たれているか?」(LT)

speakerdeck.com

三人目は id:masawada のLTです。
はてなブログのフロントエンドがどのように開発されているのか、開発をスムーズに行なうために行なってきたことについての発表です。
ライブラリをアップデートする制度を作ったり、かと思えばコストが高いので中断したり、自分でツールを開発したりと、改善を続けるための仕組みを絶えず改善している様子が伺えます。

なお、この発表は以前 id:amagitakayosi が発表した内容の続編となっています。

id:akiym 「マンガビューワの遅延ロードのしくみ」(LT)

最後の発表は id:akiym です。
弊社で開発しているマンガビューワーについて、パフォーマンスを意識した実装の解説を行ないました。

パネルディスカッション

f:id:amagitakayosi:20170712204750j:plain

発表のあとは、Q&A形式のパネルディスカッションを行ないました。
質問は事前にconnpassの参加者アンケートで募集し、内容によっていくつかのカテゴリに分類しておきました。
当日はカテゴリ順に質問を読み上げ、それに対して各スピーカーが回答を行なう、という形式で進めました。

最初のコーナーでは、社内の様子・技術選定に関する質問を取り上げました。
はてなのフロントエンドでは、技術や知見については社内で共有しますが、ライブラリなどの社内標準は定めていません。
フロントエンドの技術は入れ替わりが激しく、社内標準を定めてもすぐに陳腐化してしまうためです。
そのため、技術選定においては各チームで独自に検討するようにしています。

「新しいツールをどこまで追うべきか」という質問については、複数のスピーカーから回答がありました。
はてなでは、言語やジャンルを問わず、新しい技術の導入は慎重に行ないます。
フロントエンドのツールは衰退も速いので、導入する際はなるべく撤退可能な方法を残しておくことが多いです。
ただし、必要な時にえらべる選択肢を増やすために、フロントエンド会などで技術のトレンドをチェックするようにしています。

続いてのコーナーでは、技術や開発環境に関する質問を取り上げました。

「フロントエンドのテストはどのように行っているか」という質問について、各エンジニアから回答がありました。
クリティカルな部分だけE2Eテストしていたり、モデル層だけユニットテストしていたりと、チームによって様々なやり方になっているようです。

他にも、TypeScriptとFlowの比較や、Reactなどについての話がありました。
はてなではTypeScriptを採用するプロジェクトが多いですが、はてなブログでは歴史的経緯により導入が難しかったため、Flowを利用しています。
他にも、その時その時で最適と思える技術をチームごとに柔軟に選択するようにしています。

最後は開発環境についての話題で盛り上がりました。
フロントエンドの開発ではAtomやVSCodeを使うエンジニアも増えているようです。
また、はてなブログのチームではデザイナーが使うエディターもAtomに統一しており、環境構築やエンジニアのサポートがしやすくなっているそうです。