Coder's High 2022 (Part 1)

2022/09/16(金)21:00 〜 23:00 開催

ブックマーク

#Next.js, #jQuery, #WordPress

イベント内容

noteにてアーカイブ（スライド・動画）を販売しています。
「アーカイブを見たい方」「申し込みそびれてしまった方」はご利用ください。

https://note.com/cssnite/n/n1242224e19e7

当日参加できない方も、こちらにお申し込みいただければ後日アーカイブ（録画）を視聴いただけます。

毎年開催しているコーディング特集。ショートセッション4組にて構成します。

サイト高速化入門ページ表示速度の計測とフォントのサブセット化／相原典佳
Next.jsで始めるモダンウェブ制作／西畑一馬（トゥーアール）
WAI-ARIAから学ぶHTMLが面白くなる話／平尾ゆうてん（ディーゼロ）
dialog要素でつくるモーダルダイアログ／小山田晃浩（ピクセルグリッド）

なお、Part 2を10月14日(金)に予定しています。

セッション概要

4つのショートセッションで構成します。

サイト高速化入門ページ表示速度の計測とフォントのサブセット化

はじめてWebサイト表示高速化に取り組んでみたい、という方向けのセッションです。

Webページ計測ツールの「PageSpeed Insights」を使って、何も対策をしていないWebページの表示速度と、対策済みの表示速度を比較して、どのくらいの差があるのかを確認してみましょう。

webpとjpg、pngの比較、Google Fontsとサブセット化したフォントの比較、jQueryと素のJSの比較などを見ていきます。また、それらを実装するための方法もご紹介。

相原典佳（あいはら・のりよし）

DTP、Webアシスタントディレクター業務を経たのち、2010年にフリーランスとして独立。ディレクションからデザイン、フロントエンド構築まで、一貫したWebサイト制作を提供している。また、2011年からデジタルハリウッドにて講師を担当。

共著者として『初心者からちゃんとしたプロになる Adobe XD基礎入門』、『初心者からちゃんとしたプロになる HTML+CSS実践講座』、『初心者からちゃんとしたプロになる HTML+CSS標準入門』（いずれもMdN刊）がある。

Next.jsで始めるモダンウェブ制作

話題のフレームワーク「Next.js」はWebアプリケーションの開発だけではなくWebサイトの制作でも力を発揮できるツールです。

本セッションではReactなどの他のJavaScriptフレームワークとの違いや、WordPressなどの従来のCMS開発との違いなどとともにNext.jsの魅力を紹介します。

また、Next.jsを利用する上でのメリット・デメリットや注意点の解説も行います。

西畑一馬（にしはた・かずま）

株式会社トゥーアール

2016年2月にフロントエンド専門のWeb制作会社「株式会社トゥーアール」を設立し、ReactなどのJavaScriptフレームワークを利用したWebアプリケーションやWebサイトの受託開発を行っている。「初心者からちゃんとしたプロになる JavaScript基礎入門」や「Web制作の現場で使うjQueryデザイン入門」などの執筆著書多数。

WAI-ARIAから学ぶHTMLが面白くなる話

HTMLの要素の選び方、根拠を普段マークアップするときにしっかりと持っていますか？迷っていたり、気分で書いたりしていませんか？
多少のブレは許容するとしても、業務ではしっかりと品質として一貫性を持っていたいものです。

そんなときに拠り所にする要素としてWAI-ARIAという仕様があります。WAI-ARIAを学んでからHTMLについてもう一度向き合ってみませんか？

平尾ゆうてん

株式会社ディーゼロ
ウェブアクセシビリティ専門家

アクセシビリティをベースに情報設計・広義のデザインから、実装、テスト、運用までのアドバイスやレビューを中心としたコンサルティングを行っている。また、社内では品質の管理やガイドラインの整備など「仕組み」による改善に取り組んでいる。HTMLリンター「markuplint」の開発者。HTMLのプロ。

dialog要素でつくるモーダルダイアログ

モーダルUIを用意するとき、こんな悩みはありませんか？

「カスタマイズしづらく、毎回同じ見た目で妥協している」
「z-indexで重なりがおかしくなってしまう」
「ReactやVueで、PortalやTeleportに頼っている」

しかし、<dialog>を使えばJSの知識がほとんど不要で、CSSでカスタマイズしやすく、z-indexの重なり順考慮も不要です。このセッションでは<dialog>の利用方法、カスタマイズ方法、仕組みを解説し、みなさんの「モーダルめんどくさい」を克服します。

小山田晃浩（おやまだ・あきひろ）

株式会社ピクセルグリッド
フロントエンド・エンジニア

大規模Webサイトの壊れにくいHTML／CSS設計及び実装を経験し、SVG・Canvas・WebGLの扱いも得意としている。外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。three.jsのCSS3DRendererのコントリビューター。2011年から2020年まで10連続でMicrosoft MVP for IEを受賞。

@yomotsu

イベント概要

開催日：2022年9月16日（金）21:00 - 23:00
- （最大24:00までアフタートーク）
形式：オンライン（Zoomウェビナー）
主催：CSS Nite
共催：DTP Transit
参加費（お一人）：
- 5,000円（経費で参加）
- 3,000円（自腹で参加）
「協賛企業枠」のチケットは、CSS Niteに年間で協賛してくださっている企業向けです。

参加資格などはありません

お仕事内容にかかわらず、興味があれば、どなたでもご参加ください！
学生や休職中、求職中の方も歓迎です。

当日の進行などに関して

開演の30分前くらい前（20:30くらい）からテスト配信をスタートしますので、音声などが聞こえるかチェックされてください。
開演の15分前から「椅子ヨガ」を行います。
終演時間は若干の延長の可能性があります。
途中に5-10分程度の休憩をはさみます。

ツイートなどの発信やスクショに関して

配信URL、および、その他の案内事項は、カウントダウンメールにてお知らせするNotionのフォローアップページに記載しています（終了後、スライドやリンク集、セミナー内容の補足などを掲載します）。
ツイートされる方はハッシュタグを付けてください！
スクショ（スクリーンショット）は自由にどうぞ！（事例の部分などでNGマークがついている箇所はご遠慮ください）
スクショされるとき、講演者の顔が入ってもOKです。
ツイートされたり、ブログに掲載されてもOKです。
サンプルファイルや配布資料をそのまま再配布するのは、ご遠慮ください。

その他

開催前に「カウントダウンメール」、開催後に「フォローアップメール」をお送りします。こちらを必ずご一読ください。
本セミナーのタイトルや内容は調整されることがあります。

オンライン椅子ヨガ

今回のCSS Niteはコモモ先生 @komomoaichi のオンライン椅子ヨガ付きです！

20:45-20:58　開演まで
21:55-22:05　休憩時間（前後することがあります）

一緒に「ちょっとメンテ」しましょう。
https://chotto-maint.com/online-yoga

タイムテーブル

タイムテーブルはあくまでも目安で、状況に応じて調整しながら進めます。

時刻	コンテンツ
20:30	配信開始
20:45	「椅子ヨガ」
21:00	番組開始、オープニング
21:10頃	本編開始
22:00前後	休憩（椅子ヨガ）
23:00	終了予定
23:10	アフタートーク
24:00	完全に終了