2023/11/19開催のJSConf JPに遊びに行ってきました。 ここ数年はコロナ禍でイベント自粛が続き、数年ぶりの数百人規模のオフラインイベント参加となりました。
参加費¥3,000とリーズナブルなお値段でしたが、チケットと引き換えにロゴ入りトートバッグとTシャツという豪華なノベルティがあり「えっ、いいの!?」と早くもセッション参加前からテンションが急上昇しました。
いろいろ巡った中で、印象に残ったセッションをひとつ紹介します。
ゲーム「WEBページ崩し」の仕組み〜あなたの知らないDOMスクリプティングの世界〜
@canalun/かなるん さんのセッションです。
「WEBページ崩し」は、多くの人が1回は遊んだであろう、あの有名なゲームをWEBページ上で再現したものです。 この開発における知見、主にDOMとの闘いが内容に盛り込まれていました。
今日の #jsconfjp に出ます!
— canalun/かなるん (@i_am_canalun) 2023年11月19日
track Cで16時から、DOM崩し(動画)を題材に、DOMスクリプティングやDOMのこれからについて30分話しちゃいます👶
盛り上がっていきますので、興味ある人もない人も、夜までいる人も帰り際の人も、ぜひぜひちょっとでも聴きに来てみてください😊https://t.co/IKu4au6da2 pic.twitter.com/2U3NwLnmUC
フレームワークやライブラリなど便利なものを使っていても、フロントエンド開発ではDOM操作を避けられない場面に遭遇します。自分の目には明らかに「なにか映っている」のに、支援技術やテストのバーチャルDOMからすると「なにもない」ことがあったり、人間とマシンの共通認識って難しいものだなと思います。
DOM標準にはjQueryの :visible 相当のセレクターがなぜないのかと思っていましたが、Chromeに Element.checkVisibility なんてAPIが存在するんですね。またGoogle Docsが canvas-based approach を採用していることもはじめて知りました。
セッションの中で、何度か「遊んでいる感」というキーワードを耳にしました。ボールがヒットしたDOMをremoveする、それが要件であっても、消えるタイミングが早すぎたり領域が大きすぎると、ユーザーは遊んでいる感覚が薄れるよねというものです。ユーザー体験を開発者が感じ取りながらすり合わせていく、これってフロントエンド開発の大事な感覚だなあと思いながら聞いていました。HTTP通信が早すぎた時でもスピナーが見えるよう0.5秒間待機させる、みたいな経験に似ています。
スライドには随所に短い音声が仕込まれていて、参加者の笑いをつかむポイントがありました。その場にいる人たちの「参加している感」をつかむインタラクションとして機能しているな、ほうほうなるほどと思いました。
もうひとつ、スライドのテキストはほとんどが英語だったのですが、これは冒頭で種明かしがありました。JSConf JPは海外からの参加者が多く、あちこちで英語の雑談が聞こえていました。日本語が聞き取れなくてもスライドを見ればわかるように英語で記載しています、ぜひスライドを見て楽しんでくださいねといった登壇者の挨拶があり、過去にもじわじわと感じていた「なんで日本語セッションなのに英語でスライド作るんだろう?」という謎が解けました。
フロントエンド開発は、システムとユーザーをつなぐ接点に位置します。言語や感覚、時にユーザーはマシンであったり、それぞれの個性を包括しながら同じ体験を届けるというアクセシビリティにも似たインクルーシブな世界が広がっています。「見えているのに存在しない」なんて現実には何とも形容しがたい苦しみがあり、存在させる手段の試行錯誤が頑張りどころです。要件にない要件を汲み取り体験を届ける、それが私達の仕事なのだなと改めて気づかされるセッションでした。
JSConf JPの各セッションはyoutubeで公開されています。 当記事で紹介したセッションは Track C(4:59:39〜)に収録されています。
https://www.youtube.com/watch?v=pdgB0Y5ZQGk
イベント参加に関して
登壇者はじめ、イベント運営に関わったスタッフのみなさま、ありがとうございました。 時間の都合で早々に会場を後にしましたが、新幹線の中でポストを見てなぜ懇親会に行かなかったのだろうとちょっと後悔しました。
ご飯の準備が進んでいます #jsconfjp pic.twitter.com/lUrd3Didqb
— Leko / れこ (@L_e_k_o) 2023年11月19日
カルテット開発部について
カルテットでは、交通費含むイベント参加の費用を会社が負担する勉強会補助があります。その他にも書籍購入補助など、エンジニア・デザイナーの成長を後押ししています。
PHPが好きなバックエンドエンジニア絶賛募集中です!興味を持っていただいた方はぜひ募集要項をごらんください。