当日参加できない方も、こちらにお申し込みいただければ後日アーカイブ（録画）を視聴いただけます。
- サイト高速化入門 ページ表示速度の計測とフォントのサブセット化／相原 典佳
- Next.jsで始めるモダンウェブ制作／西畑 一馬（トゥーアール）
- WAI-ARIAから学ぶHTMLが面白くなる話／平尾 ゆうてん（ディーゼロ）
- dialog要素でつくるモーダルダイアログ／小山田 晃浩（ピクセルグリッド）
なお、Part 2を10月14日(金)に予定しています。
セッション概要
4つのショートセッションで構成します。
サイト高速化入門 ページ表示速度の計測とフォントのサブセット化
はじめてWebサイト表示高速化に取り組んでみたい、という方向けのセッションです。
Webページ計測ツールの「PageSpeed Insights」を使って、何も対策をしていないWebページの表示速度と、対策済みの表示速度を比較して、どのくらいの差があるのかを確認してみましょう。
webpとjpg、pngの比較、Google Fontsとサブセット化したフォントの比較、jQueryと素のJSの比較などを見ていきます。また、それらを実装するための方法もご紹介。
Next.jsで始めるモダンウェブ制作
話題のフレームワーク「Next.js」はWebアプリケーションの開発だけではなくWebサイトの制作でも力を発揮できるツールです。
本セッションではReactなどの他のJavaScriptフレームワークとの違いや、WordPressなどの従来のCMS開発との違いなどとともにNext.jsの魅力を紹介します。
また、Next.jsを利用する上でのメリット・デメリットや注意点の解説も行います。
WAI-ARIAから学ぶHTMLが面白くなる話
HTMLの要素の選び方、根拠を普段マークアップするときにしっかりと持っていますか？ 迷っていたり、気分で書いたりしていませんか？
多少のブレは許容するとしても、業務ではしっかりと品質として一貫性を持っていたいものです。
そんなときに拠り所にする要素としてWAI-ARIAという仕様があります。WAI-ARIAを学んでからHTMLについてもう一度向き合ってみませんか？
dialog要素でつくるモーダルダイアログ
モーダルUIを用意するとき、こんな悩みはありませんか？
- 「カスタマイズしづらく、毎回同じ見た目で妥協している」
- 「z-indexで重なりがおかしくなってしまう」
- 「ReactやVueで、PortalやTeleportに頼っている」
しかし、<dialog>を使えばJSの知識がほとんど不要で、CSSでカスタマイズしやすく、z-indexの重なり順考慮も不要です。このセッションでは<dialog>の利用方法、カスタマイズ方法、仕組みを解説し、みなさんの「モーダルめんどくさい」を克服します。
