最新フロントエンド技術の総復習！ React Hooks、GraphQL、TypeScript、AMPなど紹介 - Bonfire Frontend #4 レポート

こんにちは。 今年の4月にヤフー株式会社にデザイナーとして新卒入社した、三好 健太（@three4c）です。9月3日（火）にヤフーのセミナールームで「Bonfire Frontend #4」を開催しました！

このイベントの目的はフロントエンドが抱える課題を共有し、フロントエンドについて熱く語る会です。

今回のテーマは「最新のフロントエンド技術　〜夏休み総復習〜」。初心者の方でも理解しやすい内容となっており、デザイナーの私も多くの知見を得ることができました。

ヤフーからは浜田と内藤が登壇し、ゲストスピーカーとしてサイボウズ株式会社より向井 咲人さん、株式会社ディー・エヌ・エーより吉井 健文さんにお話しいただきました。

これからはじめる「React Hooks」Bonfire Fronted #4 〜最新のフロントエンド技術（夏休み総復習）〜

向井 咲人さん - サイボウズ株式会社

1人目の登壇者は、サイボウズ株式会社のフロントエンドエキスパートチームでエンジニアをされている向井さんです。 React Hooksをこれからはじめる方を対象に明日から実践できるReact Hooksの内容をお話しいただきました。

「React HooksはReact v16.8から新しく追加された機能でClass Componentを使用せずに様々なAPIが使用できます。コンポーネントの階層が重なり、ラッパー地獄で読みにくくなる問題も解消できます」と実装例とともにお話しいただきました。useStateとuseEffectの説明をする際はClass ComponentとFunction Componentでどのような違いがあるかを比較しながら、各要素の特性や注意するべき点をお話しいただきました。「React HooksはTypeScriptとの相性の良さや公式ドキュメント、FAQが充実しているため、明日からすぐに実践できます」とのことでした。まずは公式ドキュメントを読むことから始めてみると良さそうです。

GraphQLでフロントエンドの複雑性とたたかう

浜田 真成 - ヤフー株式会社 / 株式会社GYAO

2人目の登壇者は、ヤフーでフロントエンド領域、デザイン領域を担当している浜田です。Facebook社により開発されたオープンソースのクエリ言語である、GraphQLについて話しました。

GraphQLが必要な理由として「クライアントサイドの複雑な要求により、RESTfull APIで要件を満たすのは限界があります」と最適化の困難さをお話ししました。GraphQLは型の定義が明示的で理解しやすく、GraphQL PlaygroundというGUIを使用すると「定義にコメントを記述しておくことでドキュメンテーションの代替として利用できます」と便利なツールを紹介しました。「取得データを宣言的に記述し、型安全に開発できる世界を目指します」、「複雑性の問題を解決するために様々なことが考えられている背景を知ることがより良いWeb開発に繋がります」とお話ししました。

TypeScriptの流儀

吉井 健文さん - 株式会社ディー・エヌ・エー

3人目の登壇者は、「実践TypeScript」の著者であり、株式会社ディー・エヌ・エーでフロントエンドエンジニアをされている吉井さんです。

TypeScriptを少し触ったことがある方でも理解できる入門的な内容になっており、よくある疑問に対する吉井さんの見解を言語化した内容をお話いただきました。型をあらかじめ付与し、要件を先に取り組むことを「守りの型の策略」、型解釈のヒントを与えることで実装推論で測れない部分を担保することを「攻めの型の策略」と説明されました。「型は束縛されるものではなく、策略を練るものです」とお話されていたのが印象的でした。最近、TypeScriptの勉強を始めた私としては、ハンズオン的な資料で理解しやすい内容でした。現在、TypeScriptの勉強をされている方は一度、資料に目を通してみると学びに繋がると思います。

コマースサービスのAMP活用

内藤 秀彦 - ヤフー株式会社

4人目の登壇者は、ヤフーでYahoo!ショッピングのフロントエンドとデザインを担当している内藤です。PayPayモールのフロントエンドをAMPコンポーネントベースで開発している内容をお話ししました。

AMPを主軸にNuxt.jsで開発した際に気付いた問題点や解決する方法を詳しく説明しており、「コマースサイトでも基本的な機能はAMPで十分に実現できます」、「amp-listやamp-carouselといった便利なコンポーネントがあります」とのことでした。JSONのエンドポイントからDOMを生成できるamp-listを使用した開発をする際に「事前に高さを指定しなければならない」という問題がありました。内藤はその問題を解決する方法として「amp-listで高さを可変する裏技」を記事にまとめています。同様の問題を抱えている方は、是非ご覧ください。

amp-listで高さを可変にする裏技 (amp-list with dynamic height)【AMP】 - Qiita

最後に

「最新のフロントエンド技術　〜夏休み総復習〜」というテーマで4名の登壇者にお話しいただきました。

明日から実践できる内容や初心者の方に向けた内容が多く、最新のフロントエンド技術を勉強する上でとても充実した内容でした。

フロントエンド技術は移り変わりは早く、最新の技術を押さえるのは難しいことですが、Bonfire Frontendを通して、情報を共有する手助けになればと思います。

写真: 小見 拓也