feature image

2023年12月17日 | ブログ記事

次世代Webカンファレンス2023参加記

こんばんは、21B SysAd班 mehm8128です。
部内ハッカソンに追われながらこの記事を書いています。
12/16(土)にサイボウズ株式会社さんの東京オフィスで開催された次世代Webカンファレンス2023に参加してきたので、その参加記です。

次世代 Web カンファレンス 2023 (2023/12/16 12:00〜)
# 次世代 Web カンファレンス 2023 ## 当日の注意 * 自販機や売店など一切なく、飲食の提供もありません。 * 近くのコンビニも少ないので、事前にどこかで買ってきてください。 * ゴミ箱もありません * 入館証があれば再入場可能です * エレベーターはめっちゃ混むので、早めに来場しないと間に合いません。 * 参加資格がないと建物自体に入れません。 * 混みすぎたら入場規制します * 20:00 完全撤収です。最後まで見る人は会場復元に協力してください。 ## 入場規制について 会場のキャパは 500 も入りませんが、当初 500 人募集…

サイボウズさんの東京オフィスは実は前に一度行ったことがあるのですが、そのときはカンファレンスルームが開いていない状態だったので開いていてびっくりしました。あんな開き方できるんですね。

今回僕が参加させていただいたセッションは、CSS、A11y、Tooling、Frontend Architectureの4つです。フロントエンドエンジニアなので、そっち寄りになっています。
順に感想など書いていきます(ちゃんとメモらずに聞いていたのであんまり濃くないです&色々間違ってたらすみません)。

サイボウズさんのオフィスに到着したときのツイート

CSS

Kuma-UIやTailwindの話が聞けたのがよかったです。ユーティリティクラスどうなの?とかtailwind.config.jsどのくらいいじってる?とか。僕はCSS書くの得意な方ではないので、話に出ていたようにこういうCSSフレームワークとかでなるべく書かなくていいようになってほしいなーって思ってます。
Kuma-UIは実はコントリビュートしたことがあって、記事も出しています。

Kuma UIに†OSS Contribution†した話
これは夏のブログリレー2023 20日目の記事です。こんにちは、21B SysAd班のmehm8128です。今回はタイトルの通り、OSS Contributionをした話をします。 最近、Next.jsのapp routerが出て、servercomponentで様々なUIフレームワークが使えなくなってしまったという話がありますね。styled-components使ってるときに自分も経験しました。TailwindCSSやvanilla-extractは使えるようで、まだ使えないライブラリも対応を進めているらしいですね。その中でKumaUIというUIフレームワークはserver componentでも使えるいい感じのUIフレームワークとして話題になっていたので、自分も使ってみました。僕は自分のポートフォリオをapprouterに移行したついでに、sunsetting(deprecatedではないけどメンテナンスが止まってしまった状態?で合ってますかね)になったWindiCSSも別のUIフレームワークに移行しようということでKuma UIを使ってみることにしました。

↑で内部のコード読んだことがあったこともあり、こういうツール開発している方がどのくらい最新のCSS追ってるのかみたいな話も面白かったです。それに伴って結構色々とCSSの技術的な話が出てきましたが、カスケードレイヤーとかみたいな序盤に出てきた話はあんまりキャッチアップできていなかったのでなんか難しそうだなーって思いながら聞いてました。逆に後半のView Transitions APIとかPopover APIとかは使ってみたこともあったので理解しながら聞けました。
AIの話もちょっと出てきて、TailwindはAIにいい感じに書いてもらいやすいよねって話があったのですが、僕もそれは思っていて、TailwindでAIにデザインを任せた過去があります↓。

質問箱を作った
この記事は新歓ブログリレー29日目の記事です。 作ったものtraPへの質問箱サービス「Questions」を作りました。https://questions-ui-silk.vercel.app フロントエンド:https://github.com/mehm8128/questions-UIバックエンド:https://github.com/ikura-hamu/questions できること * 質問を投稿する。 * 質問が投稿されたら部内SNSに通知する。 * traP部員が質問に回答する。 * 回答済み質問の一覧が見れる 経緯3月8日、前期合格発表の前夜の僕(ikura-hamu)のtraQ(部内SNS)の投稿が始まりです。 新歓の時期はいろんなサークルが質問箱を設置して新入生からの質問に答えています。traPも同様に質問箱のリンクを固定ツイートにして、たまに来る質問に答えています。 このサイトは非常に便利なのですが、大量の広告が出てくるのが困ります

CSSは勉強するなら今みたいな話もされていたので、改めてちゃんと勉強しようかなーって気持ちになりました。

A11y

これ、「えーいちいちわい」って読む人もいれば「えーいれぶんわい」って読む人もいるんですね。僕はアクセシビリティって読みます。
最近a11yに興味があるので、今回一番楽しみにしていたセッションでした。

a11yをちゃんと理解していて対応している人まだまだ少ないよねみたいな話で、ツールとかを使って解決すればいいのではと思うけど、機械的な処理だと「とりあえずテスト通ってるからOK」みたいな人が画像のaltを適当に指定して「alt属性がついてるからOK」みたいなことになったり、𝕏のaltで遊んだりしてるのはよくないよねみたいな話がかなり印象に残っています。そういう人たちにちゃんと対応してもらうようになるためにはこういうイベントなどでもっと広めていったりして理解していってもらう必要があると思うのですが、なかなか難しいですよね...。個人的に、今回のように実際の視覚障害者の方(に限らずWebアプリを使う上でなんらかの不自由がある人)などの話を聞けるような機会がもっとあればいいなーと思っています。スクリーンリーダーも僕はまだあんまり使えていなくて、実際にスクリーンリーダーを使う人がこう使うからこうマークアップするのがいいみたいなのをちゃんと理解していきたいなと思っています。
また、フロントエンドエンジニアは結構「テストがやりやすくなるから」「なんとなくroleとかaria-*みたいなのを見たこと・聞いたことがあるから」という理由でa11yに入門する人が多いイメージみたいな話が出ていましたが、僕も実際そうで、最初は「できるだけ色んな人がアクセスできるように」という気持ちよりは「技術記事で最近よく目にするから」というような気持ちで入門していました。もちろん上記のような理由で入門しても問題なくて、最終的にちゃんとa11yの意味とかを理解して対応していけるようになればよいと思います。
CSSのときと同様にここでもAIの話が出てきて、画像からalt属性の文字列を生成するとかといったことができるようになっているので多少対応の手間が減ったり対応されていないサイトでもAIによっていい感じにアクセシブルになるのではという話題に対して、AIが出力した文字列がサイトの制作者が意図していたものとは違うものの可能性があるのではという意見が出ていました。自分も同意見だけど全く対応していないのと少し違っていてもなんか文字列が入っているのではどっちがいいかと言われたらやっぱり後者なのかなという気持ちにはなりました(AIの精度にもよりそうですが)。
最後にVRの話で、結局色んな障害を持ってる人がいるから色んな人を想定しないといけないよねという話がありました。Webで言うとスクリーンリーダーを使う視覚障害者の方を想定しがちだけど、手が不自由でマウスやキーボードが上手く使えないとか、目は見えるけど色の違いがあまり分からないとか、障害を持っているわけではないけど一時的に怪我で片手が使えないとか、思っているよりも色々な人がいるので、サービスをアクセシブルにするにはできるだけ多くの人を想定して色々なケースに対応していかないといけないと改めて感じました。
思ったより真面目な話になっちゃったのでa11y関連で僕が書いたブログを見てください。

traQのa11yについて
これは夏のブログリレー2023 34日目の記事です。こんにちは、21B SysAd班のmehm8128です。 今回は部内SNSであるtraQの、a11yの現状について書いていこうと思います。本当はあまり書くことなくて別の記事にしようと思っていたのですが、他に特に書くこともなかったので頑張って書いてます。 まず、僕が前に読んだa11yの本を提示しておきます。これ1冊読んだら最低限の考え方とか知識とかは身につくので、とてもおすすめです。Webアプリケーションアクセシビリティ──今日から始める現場からの改善 (WEB+DB PRESS plus) | 伊原 力也, 小林 大輔, 桝田 草一,山本 伶 |本 | 通販 | Amazon[https://www.amazon.co.jp/Web%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%
imgタグについて色んな仕様書とかドキュメントとか眺めてみた話
この記事はアドベントカレンダー2023 11日目の記事です。 こんにちは、SysAd班21Bのmehm8128です。 なぜか前回の記事の2日後に担当を入れていたのですが、なんも書いてなかったので前日に急いで書いています。明日から冬ハッカソン始まるし週5で授業あるしで色々忙しくてピンチです。 今回はimgタグを例にして色々な仕様書とかドキュメントとかを漁ってみようと思います。 HTML Living Standard HTML Living Standardとは、WHATWGという組織が定めている、HTMLの仕様です。 以下から見ることができます(one-page versionだとページが長いのでmultiple versionです)。 HTML StandardWHATWG この仕様からimgタグについて読んでみましょう。 imgタグは大体「4.8 Embedded content」の中の「4.8.3 The img element」に書いてありそうです。 ちなみにおそらく多くの人が普段使っているであろうMDNではこれを簡略化された説明を読むことができ

Tooling

traPの先輩のsapphi_red(traPではsappi_red)さんが登壇してました。sapphi_redさんの記事はこちらから↓。今回のセッションに関係ありそうな記事も出しています。

sappi_red - 東京工業大学デジタル創作同好会traP
19B/22M。SysAd班。JavaScript書いたりTypeScript書いたりGo書いたりRust書いたり…

元々Design Technologyを見るつもりだったのですが、最近Biomeを使ってみてかなりよかったので気になってこっちを見に行きました。
普段この領域はほとんど触れていないので内容を理解できたかというとあんまり理解できていないのですが、今回話に出ていたformat・lint・bundle(?)系のツールはフロントエンドエンジニアなら全員が使うツールなので、パフォーマンスを追求したり色々な人の要望を取り入れながら機能入れたりするのが大変そうだなーって思いました。
あと、importやtailwindのclassのソートとかがformatとlintどっちの役割なんだって問題が最後にちょっと話されてたのが面白かったです。Prettierはsemanticsを変えなくてもASTを変えちゃうのはできるだけ入れないようにしてるんですね。
Rustなのでハードルはちょっと高そうですが、Biomeは将来有望そうな予感がしているので時間ができたらコントリビュートとかしていきたいなーって思いました。

Frontend Architecture

フロントエンドアーキテクチャと聞いたら、今回も登壇されていたよしこさんの以下の記事を思い出すのでディレクトリ構成の話とかするのかなーとか思っていたのですが、最初にSSRとかの話をした後アプリの分割の話から組織論などの話になり、想像してたのとはまた違った面白い話が聞けました(ただ、疲れていて集中力が切れかけていました)。

フロントエンドアーキテクチャの話: Resource Setの紹介

SSRとかは結局するかどうかはプロダクトに依るので、メディアとかの場合はやった方がいいけど、最近多い(今回の会場だったサイボウズさんで開発しているkintoneなどの)ツール系のサービスでは、別にSSRしなくてもいいよねみたいな話をしていました。その上で、Next.jsみたいなSSRとか前提みたいなのじゃなくて、クライアントサイドレンダリング用のReactのフレームワークが出てくると面白そうだよねみたいな話でした。僕は普段あんまりパフォーマンスをちゃんと求めるようなアプリを作ることは多くないので、Next.jsを使うのはルーティング周りやその他諸々が生のReactより楽にできるから程度の理由で使っているのですが、それなら確かに、そこらへんだけNext.jsと同じような機能を持っていてクライアントサイドレンダリングに特化したフレームワークみたいなのが出てきてもいいよねと思いました。
組織論の方は...難しくてなんとなくしか分かりませんでした。まだあんまりちゃんとした開発組織に入ったことがないからというのはあると思うので、就職してから色々考えられるようになればいいなと思いました。コンウェイの法則はちょっと前に知ったのでなるほどねってなりました。

まとめ

1人で行ったのでちょっと寂しかったのですが、後から来た先輩(登壇した先輩とは別の人)を発見したり他にも知り合いの人に発見してもらえたりしたのでよかったです。
TestingとかPerformanceとかも興味あったのですが聞けなかったので、後で配信で聞きたいと思います。
今回色んな話が聞けて、すごいモチベが上がったので時間ができたら色々勉強したいなと思いました。ちなみに大量の課題によってそんな時間は今はないです。
運営の方々や登壇者の方々、ありがとうございました、お疲れ様でした。

mehm8128 icon
この記事を書いた人
mehm8128

21BJC。SysAd班で色々やってます

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2023年12月11日
DIGI-CON HACKATHON 2023『Mikage』
toshi00 icon toshi00
2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2022年9月26日
競プロしかシラン人間が web アプリ QK Judge を作った話
tqk icon tqk
2023年10月20日
DIGI-CON HACKATHON 参加記事「Comic DoQ」
mehm8128 icon mehm8128
2023年6月23日
2023 春ハッカソン 26班 『traP Mission』
Ras icon Ras
記事一覧 タグ一覧 Google アナリティクスについて