11月23日に開催されたJSConf JP 2024について、印象に残ったセッションなどについて@spring-raining、@halken、@ayaka.kitanakaが話しました。
@spring_raining
こんにちは、UITの玉田です。ユーザーインターフェイスとテクノロジーを愛する開発者のためのポッドキャストUIT INSIDE、今回もやっていこうと思います。今回は2024年11月に開催されましたJSConf JP 2024のエピソードについて話していこうかなと思います。
@spring_raining
で、今回はですね、主にJSConf JPのスポンサーのブースにスタッフとして参加していました。私と、あとハルケンさん、北中さんの3人で今回はお話していければなと思います。それでは、よろしくお願いします。
@halken
よろしくお願いします。
@spring_raining
では、まずはですね、本題に入る前に、北中さんは今回初めてということでしたので、軽くどういったことをされているのか自己紹介をお願いしてもいいでしょうか。
@ayaka.kitanaka
はい、北中と申します。Yahoo!ショッピングでフロントエンドを担当していて、共通UIライブラリの開発などしています。よろしくお願いします。
@spring_raining
よろしくお願いします。ちょっと共通UIライブラリ気になりますね。後で。はい、個人的に聞いてみようかなと思い、
@ayaka.kitanaka
ぜひ。はい、お願いします。
@spring_raining
それでは、JSConf JPについてですね。で、今回のカンファレンスでは LYのエンジニアも複数のセッションで発表しました。公式のはい、LYエンジニアリングブログにも掲載されているんですけれども、LYのエンジニアとして3つのセッションが発表されました。で、まずそれぞれについて、軽く内容について紹介できればなと思います。で、1つ目のセッションが
@spring_raining
ですね、「ステップバイステップで進めるYahoo!知恵袋のフロントエンドリアーキテクト」です。で、こちらの内容はですね、結構、かなり現場の話というか、大規模なプロジェクトの開発において、フロントエンドエンジニアがどうリアーキテクチャを進めるか、どういった形でその問題に対して解決していくかということについて話されました。
@spring_raining
こういった大規模なプロジェクトだと課題がたくさん出てくるんですけれども、そういった課題に対して、どういった感じで問題を解決するか、具体的な解決方法もですけれども、問題の分割の仕方ですね、コストの観点、あとその問題を分割可能かとか、そういったいろんな観点で、その問題の向き合い方自体について話していくという、結構
@spring_raining
この辺りは現場の話っていう感じで、かなり聞き応えのある内容でした。はい。もう1つがスポンサーセッションですね。「Yahoo! JAPANトップページにおけるマイクロフロントエンド - 大規模組織におけるFE開発を加速させるには」です。で、こちらも割と現場寄りの話ではあるんですけども、もう少し設計によった話ですね。で、Yahoo! JAPANトップページは、想像できるかなと思うんですけども、すごく
@spring_raining
多くのステークホルダーが関わっているということで、開発速度がすごく低下しているという問題があったというところです。で、もちろん、それぞれのステークホルダー、トップページの開発を、開発速度を上げる必要があるのでですね、そのためにどういった取り組みができるのかっていうところで、このセッションでは、マイクロフロントエンドに注目して、それを解決するという選択肢を紹介していました。
@spring_raining
で、マイクロフロントエンド自体はですね、色々な解決方法があります。例えば、モジュールフェデレーション、Web components、iframeみたいな、色々な既存の解決策が紹介されていました。しかし、このセッションの中では、最終的に独自実装をすることで解決したという結論になりました。で、具体的にどういった独自実装なのかは、ぜひセッションのアーカイブを見て
@spring_raining
いただければと思います。最後にセッションですね。「LINEヤフーにおけるPrerender技術の導入とその効果」というセッションになります。で、こちらはですね、確かUIT INSIDEでも、以前Google I/Oのエピソードで紹介していたんですけれども、Chrome 122でSpeculation Rules APIというものが
@spring_raining
導入されました。で、こちらのSpeculation Rules APIをいち早くYahoo! JAPANのトップページに導入して、どういった結果が得られたかというところを紹介しています。で、これ内容が結構面白くてですね、実際には、必ずしもいい結果が得られなかった。
@spring_raining
すごく浜田さんも話してたんですけれども、理想的には導入して、こういったいい結果が得られましたみたいな発表にしたかったんですけども、実際に結果を見てみると、そうではなかったっていう、なかなか面白い結論になったんですけども、ただ、それに対して、なぜそうなったかっていうところの考察が結構重点として置かれていました。で、ただ単に、APIを色々と導入して、すごく良くなったっていうことになるとも限らないっていう、結構そこらへんはすごいあるあるなんですけれども、そういった考察も含めて、
@spring_raining
こういった色々な検討をされてるっていう取り組み自体についても、かなり興味深い内容なのかなと思います。という感じで、3つのセッションが紹介されていました。で、このセッション、全てアーカイブで公開されていますので、ぜひUIT INSIDEのショーノートのリンクから見てみて、はい。みなさんもぜひご覧になってください。
@spring_raining
ではですね、LYの話はこれぐらいにしまして、実際に私たちスタッフではあったんですけれども、ちょくちょくといろんなセッションを見に行ったりとかという機会がありました。というわけでですね、このLYのセッションに限らず、印象に残ったセッションについて3人で話していければなと思うんですけれども。ではですね、いきなりハルケンさんに聞いてみようかなと思うんですけども、どういった
@spring_raining
ところが気になりましたかね。
@halken
はい、そうですね。僕からは、じゃあ2つほど取り上げたいと思います。1つ目は、「Web標準の進化を止めない！Baselineというブラウザサポートの考え方」というセッションですね。こちら、僕が、
@halken
普段からですね、開発業務でReact並びにそのコンポーネントの作成にCSSを書いているんですけど、その際にですね、実現したいことに対してCSSの新しい機能を、どんどん出てくるんですけど、新しい機能を使おうって思った時に、そもそもこの機能ってSafariなりChromeなりFirefoxなり、すべてのブラウザサポートに対応しているんだっけ。とか、使って大丈夫なんだっけ。って思うことが多々ありまして。そんな中でですね、今回、このセッションの話ではベースラインというものを紹介しておりまして、今現在です、
@halken
MDNのページだったり、Can I Useのページにチェックマークのアイコンのようなものが出てるんですが、こちらのもので、このCSSの機能は比較的新しめの機能だけど、全部ブラウザ互換性あるよだったり、この機能はもうあらゆるシーンで使っても大丈夫だよみたいなところの指標をベースラインというもので分かるようになっていてですね、とてもその実装、マークアップをエンジニアとしてとても有益な情報だなと思って、とても印象に残りました。
@halken
はい。で、2つ目はですね、「Storybook との上手な向き合い方を考える」というセッションです。Storybookって、なんか普段フロントエンド開発する際に、とりあえず導入するというか、あると嬉しいよねみたいな印象で結構使ってる方も多いと思ってるんですけど、Storybookの、そのStorybookから得られる恩恵を十分に得るためには、
@halken
結構カスタマイズすべき事柄が多くてですね、本当にStorybookをうまく活用できていますか。っていうのを問いかけられた気がして、改めてそのStorybookの向き合い方を立ち返らせてくれたセッションだったなって思ってました。今後Storybook改めてメンテナンスをしてみて、
@halken
もっとStorybookをどう活用していくかとか、目的を持って使えたらいいなっていう風に思ったセッションでございました。はい、僕からはこの2つですね。とても印象に残ったものになってます。
@spring_raining
はい、ありがとうございます。この2つのセッション、ちなみに私もたまたま両方聞いてまして、そうですね、1つ目のそのWeb標準の進化を止めないっていうやつは、これは発表した方自体がGoogle Chromeのアドボケイトの方ですよね。で、はい。すごい。GoogleというかChromeもそういうベースラインっていうのをすごく推し進めていて、
@spring_raining
そうですね、これは本当に、多分Webに関わってる方全員すごい有益なことだと思いますし。はい、大体Can I Use見てっていう感じになります
@halken
ですよね。はい、Can I Useを見るんですけど、そこから結局どうなんだっけ。みたいなのがちょっとわかりづらかったりしてたんですけど、今回でちゃんとし、なんかもう自信持って使えるとか自信持って使えないって、こう言い切れるような指標が出てきて、とてもいい情報だなって。はい、思いました。
@spring_raining
うん、そうですよね。これは本当にすごい前進したなっていうところです。
@halken
はい。
@spring_raining
で、2つ目のStorybookですね。これは私もすごい共感を持って見ていて。私もそうですね。Storybook、割と色々な感情持っているので、結構そうですね。Storybookって機能は多いんで、目的をちゃんと持たないといけないなっていうのは。そうですね。これをセッション見る前から思ってはいたんですけど、すごい改めて思いましたね。うん。はい。なんか、
@halken
Xの反響もだいぶあったような印象で。同じことを思ってるなって思いましたね。ここら辺は割と皆さん色々と思うところがあるっていうと。でも、すごい言語化、すごく感想としては、すごい言語化がうまくて。そうですね、そうですよね。はい。そこがすごく良かったなと思いました。
@spring_raining
では、北中さんから何かこう、気になるセッション、何か教えてくれますか。
@ayaka.kitanaka
はい。私が挙げたのが1つなんですけど、「How to automate your murder mystery」というセッションがありまして。ちょっとこれ会場で見たかったんですけど、ちょっと見れなくて、後から配信で見たんですけど、ぜひ会場で見たかったなと思いました。自宅を脱出ゲームのように変身させるという内容で、ウェブの技術構成の解説はもちろんなんですけど、ホームアシスタントとかラズベリーパイも
@ayaka.kitanaka
活用されていて、結構本格的にやられていて。実際の脱出ゲームの参加者も楽しませようっていう意図はすごい感じたんですけど、セッションの視聴者も楽しませるような演出があったりして、セッション自体楽しい雰囲気が伝わってきてよかったなって思ったので挙げさせていただきます。
@spring_raining
ありがとうございます。これは実はまだ私見てないですね。で、結構そうですね。なんか、そうですね、説明の概要の説明文だけだと、あんまりこう、ウェブ関係ないんじゃないかなっていう懸念はあったんですけど、その辺りはどうですかね。ウェブをふんだんに使った、こういう技術になってますか。
@ayaka.kitanaka
もちろんウェブも使われていて、Svelteだったかな。Svelteでは、その人物のキャラクターカードを作ったよとか、データベースはこれ使ってて、で、画像のホスティングとか、これみたいなのはちゃんと解説があって、で、サーバーと連携して部屋の仕掛けみたいなのを作ったよ、みたいな感じでした。
@spring_raining
うんうん、なるほど。結構気になってきましたね。
@halken
これ、僕も実は見たんですけど、僕マーダーミステリーちょっと個人的に好きで、ちょっと気になったんでアーカイブ見てみたんですけど、やっぱりその、結構マーダーミステリー体験をとても重視してらっしゃるなって思ってて。その発表者の方々も、やっぱりその会場にいる方にも、ちゃんと体験としてこう、うん、なんかわかりやすく、伝えやすくっていう、なんかところの心情がとても見えて、いいセッションだなって思いましたね。で、その、これをやりたい、こういう体験をしたいためにどういうことが必要で、
@halken
これをじゃあどう解決しました。っていうのを、こう、手順よく説明していたセッションだったなっていう風に思いました。
@spring_raining
発表自体もすごい気になる
@halken
そうです。なんかジョークも交えつつましたね。そうですね
@ayaka.kitanaka
そう、ちゃんと最後に犯人とかも明かされるので、そういうストーリー構成も、
@halken
ストーリー性もありましたね。そうですそう、
@spring_raining
すごいですね、それ、なんかあんまり、なんて言うんですかね、こう、JSConfとかだとすごい真面目な話が続くのかなと思ったんですけど、意外とそうでもない。私もこれではないんですけども、そういう、なんかこう、メディアインタラクション系の発表とかもいくつかあったりとかで、すごくバリエーションがすごいセッション、今回多かったなと思いました。
@halken
このセッションも、実際はとても具体的なその技術説明もありましたので、とても、はい、刺さるものはある人もいたんじゃないかなと思いますね。
@spring_raining
はい、ありがとうございます。ではですね、最後、私から2つちょっとご紹介したいんですけども。で、1つ目がですね、割とこう、なんて言うんですかね、こう、このUIT INSIDEに、以前、このLINE社に、はい、所属されていました、うひょさんが発表されていたセッションが
@spring_raining
ましてこれは結構、なんて言うんですかね、「JavaScriptを支えるエコシステム（漫才）」っていう、なんかすごい、結構ふざけた感じの内容かと思いきやです。すごい、なんて言うんですかね、フォーマットとしては漫才なんですけれども、ちゃんとこう、今までのそのJavaScriptのエコシステムっていうものをすごい網羅的に振り返られる。すごいすごい面白いですし、時間も短い中でぎゅっと詰め込まれた、
@spring_raining
なかなかこう、割とうひょさんたちを褒める感じな内容になってるんですけど、すごく内容としても結構、特にあれですね、こう、フロントエンドの概要について知りたい方とかもすごくおすすめでした。
@halken
そうですね、なんか今、今のフロントエンドはこんな感じだみたいなのを、ここ広くこう紹介してくれていて、これから学びたい人も、まず一旦これを聞くのもいいのかなっていう感じでセッションですよね。
@spring_raining
そうですよね。割とこう、誰でも知ってる、例えばnpmのパッケージみたいな、パッケージマネージャーから色々、こう、すごい最新のこのビルドツールみたいなところの紹介とかもあったりして、すごく色々と知ることができる内容になってます。もう1つが、最後のセッションになってまして、「啓蒙者の視点で振り返るウェブ」という、これ、最後で言うと、キーノートの最後、なんて言ったらいい
@spring_raining
ですかね、こう、最後に全会場で発表されるセッションになってたんですけども、これは、えーじさんという方が、今までのチャレンジについて振り返っていくっていう内容になってました。で、これ、なぜ取り上げたかって言うと、やっぱり、そうですね、結構、私がそのフロントエンドエンジニアと初めて会った時に聞きがちなのは、なんでフロントエンドエンジニアになったんですか。っていう
@spring_raining
感じで、結構聞くことが多いんですけども、割とそういう、こう、なんて言うんですかね、こう、技術の話というよりは、フロントエンドっていうのに触れたきっかけみたいなのとか、そういったものをこう、思い出すきっかけになった内容になってて、すごい、自分がこう、フロントエンドの技術触り始めたのって確かにこんな感じだったよな、みたいな感じの内容が、振り返るきっかけになったなっていうところで、今回挙げさせてもらいました。
@spring_raining
ではですね、こういった感じで、いろいろなセッションが、はい、JSConfの中ではありました。
@spring_raining
で、これ全て、はい、配信後から見ることができる状態になってますので、皆さんもぜひ気になったセッションについて見てみて、あと気になったセッションがあれば他の方にも色々と紹介したりしていければなと思っております。
@halken
今回のJSConfの会場、我々スタッフとして参加して、ブースのスタッフとして参加したんですけど、とても会場自体はとても人が多く盛り上がっていて、セッションによってはもう座りきれない具合の立ち見が出るぐらいのが多かったりとかしてて、とても賑わったカンファレンスだったのかなっていう風に思いますね。
@halken
はい。で、ブースの方にもたくさん来てくださいまして、いろんな話を聞けてよかったかなっていう風に思っております。で、これ以外にもたくさん。そうですね。今回のカンファレンスのアーカイブが残ってるってことで、見れるっていうのもとてもいい環境だなと思うので、ぜひ他のセッションを見ていただきたいなと思っております。
@spring_raining
はい、そうですね。すっかり会場の様子など、そういったカンファレンス自体について紹介するの忘れてましたね。はい。本当にそうですよね。すごい知名度もあるということもあり、今回すごい、私が知る中で多分日本最大級のフロントエンドカンファレンスですし、やっぱりこう、本当に色々なセッションっていうのもそうですけれども、いろんなバックグラウンド、ほんとにフロントエンドって
@spring_raining
バックグラウンド広いなっていうのが、はい、思ってますので、そういったふり、本当に触れ合いの場にもなっているっていうところは、今回改めて感じましたね。
@spring_raining
というわけで、今回はJSConf JP 2024について話していきました。LINEヤフーのフロントエンド組織では、このようなフロントエンドに関する議論や意見交換を日々行っております。今後もLINEヤフーに関するフロントエンドの情報交換を行っていきますので、
@spring_raining
ぜひ聞いてみてください。また、このPodcastのご意見、ご感想についても受け付けておりますので、いつでも投稿していただければと思います。それでは、ありがとうございました。
@halken
ありがとうございました。
