#朝までマークアップ 3（JS編）

#朝までマークアップの3回目はJS特集で開催します。

「リアルタイム視聴は無料」スタイルで開催しますが、アーカイブチケット購入やサブスク登録でサポートくださいますと助かります！

• これまでの「#朝まで」シリーズと異なり、アンケートは1つです。つまり、グループごとのアンケート、および、回答特典はありません。
• アーカイブチケットを購入いただくと、アーカイブ動画だけでなく、すべてのセッションのスライドやサンプルファイルなどを入手できます。Notionにとりまとめますので、それぞれダウンロードなさってください。

セッション概要と出演者

敬称略、順不同

• 鹿野 壮／Ubie @tonkotsuboy_com
• TAK @tak_dcxi
• タムショー／ましじめ @tamshow_
• 長谷川 広武／HAMWORKS @h2ham
• 半田 惇志／フリーランス @assialiholic
• 綿貫 佳祐／Qiita/エイチームライフデザイン @kskwtnk
• あしざわ／ZEROSTANCE @ash_creator
• 相原 典佳 @noir44_aihara
• 長谷川 喜洋／How to Use @hiro_ghap1
• Kite／キテレツ @ixkaito
• 山本 一道／有限会社アップルップル @kazumich
• Tessy／NEW FOLK @nf_matsumura
• 西畑 一馬／トゥーアール @KazumaNishihata
• 山村 祐貴／FLAT @ymmr2025
• 平良 優乃／コンセント @yuneko_cnt

イベント概要

YouTube Liveでライブ配信します。

• 開催日：2025年10月3日（金） 21:00 - 03:00
• 形式：オンライン（YouTube Live）
• MC：鷹野 雅弘（スイッチ）
• 主催：CeeBeeDee
• 共催：CSS Nite、DTP Transit
• 協賛（制作会社）：ウェブライダー、LINICA、エンタミナ、コンセント、サービシンク、ビットエー、ヘルツ、アップルップル、CODE54、HAMWORKS、S-FACTORY、necco、FLAT、ONiWA ほか
• 協賛：文賢（ブンケン）、デジ革（一般社団法人デジタル経営革新協会） 、JILLA（日本イラストレーション協会）

お申し込みと参加費

• リアルタイムの視聴は無料です。
• 参加にはお申し込みが必要です。受け付けは終演時刻まで。

フォローアップ（アーカイブ）

スライドなどのフォローアップ（アーカイブ）は、アーカイブ購入／サブスクの方限定のコンテンツです。

• アーカイブ動画の視聴期限はありません。ずっと見られます。
• 法人およびフリーランスで事業決済される方は「法人向け」をお求めください。

フォローアップ（アーカイブ）の購入

次の3つの方法があります。いずれかを選択なさってください。

• アーカイブ動画の視聴期限はありません。ずっと見られます。

配信に関してのあれこれ

各URLは、YouTubeの概要欄にも掲載しています。

• チャットやスタンプ、ツイートなど「参加型」でお楽しみください！
• 「音声のバランスが悪い」など、何かお困りの場合、コメントなどで教えてください！

配信URL

YouTube Liveで配信します。

https://youtube.com/live/70CZ3BffPXU?feature=share

X（Twitter）にて同時配信も行っていますが、YouTube Liveにてコメントも含めてお楽しみください。

YouTube関連

• YouTubeチャットを活用ください！　スパム回避のため、YouTubeチャンネル登録者のみがコメント可能にしていますので、事前にチャンネル登録をお願いします。
• スーパーチャット（スパチャ＝投げ銭）を利用できます。少額でも大歓迎です！　いただいた全額を講演者にお渡しします。
• 質問がある場合、YouTubeチャットで冒頭に★または【質問】を付けてコメントください。すべては拾いきれません。「〜は〜という意味です」「自分の現場ではこうやっている」など、視聴される方からのサポート的なコメントを歓迎します！　一緒に場を作ってくださいますと嬉しいです!!

リアクションや質問

• スクショ付きのツイート歓迎です。ぜひ、ハッシュタグ（#朝までマークアップ）を付けてください。ただし、事例の部分などでNGマークがついている箇所、講演者からNGの指示のある箇所はご遠慮ください。
• 終了後、ぜひアンケートにお答えください！　「フィードバックはギフト」。話してくださった方の成長の材料になり、また、イベントの改善につながります。

その他

• 「UDトーク」にて文字情報を提供しますので、別のブラウザーなどでご覧ください。タイムラグや精度についてはご容赦ください。
• サンプルファイルや配布資料、アーカイブ動画のURLをSNSなどで再配布するのは禁止です。
• 開演の30分前くらい前からテスト配信をスタートします。音声などが聞こえるかチェックなさってください。
• スマホやタブレットで視聴される方もいると思いますが、PCでの視聴を前提としています。なるべくPCでご覧ください！
• ご覧いただく回線状況によっては、YouTubeの動画が止まってしまったり、音声が途切れてしまうことがあります。その場合には、ブラウザーを再読み込みしたり、OSを再起動してみてください。
• 分単位で細かく練られたカリキュラムではなく、少し緩めに進行します。コメントを拾って脱線することもあります。言い換えると学習だけをされたい方には向いていません。
• 若干の延長など、ぴったり進行しないことがあります。

配信準備は念入りに行っていますが、本番になると予期せぬトラブルが生じるのがライブ配信です。それも含めて楽しんでください。

アンケート

• これまでの「#朝まで」シリーズと異なり、アンケートは1つです。つまり、グループごとのアンケート、および、回答特典はありません。
• アーカイブチケットを購入いただくと、アーカイブ動画だけでなく、すべてのセッションのスライドやサンプルファイルなどを入手できます。Notionにとりまとめますので、それぞれダウンロードなさってください。

領収書

インボイス対応の領収書が必要な方は、アーカイブ購入者向けのNotionからPDFをダウンロードしてご利用ください。

• 「アーカイブ視聴（会社として申し込み、社内で共有）」のチケットを購入いただいている場合のみ、個別対応いたします。

所轄税務署、インボイス制度電話相談センターなどに相談し、次のようにすることにしました。

• インボイス対応の領収書発行について

オンライン椅子ヨガ

本イベントはコモモ先生 @komomoaichi のオンライン椅子ヨガ付きです！

• 開演前
• 休憩時間（適宜）

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

サブスク

CSS Nite、DTP Transitのオンラインセミナーのアーカイブをリーズナブルに、また、管理しやすく利用いただけるように、「サブスク」（定額サービス）をご用意しています（Circleというサービスを利用しています）。

• 3ヶ月：4,400円＋税
• 年パス：16,000円＋税

年間で50近く開催されますので、1本あたり400円を切る計算です。ぜひ、ご利用ください！

• サブスク対象イベントのリスト（Google スプレッドシート）

アーカイブ動画だけでなく、スライドのダウンロードも可能ですので、ざっと内容を把握しておきたい場合にも適しています。

サブスクの登録方法

次の手順でお申し込みください。

1. Circleでユーザー登録（自動返信メールを確認して完了です）
2. Stripeで決済（3ヶ月ごと：4,400円、年パス：17,600円）
3. CircleとStripeでメールアドレスが異なる場合のみ フォームからのご連絡をお願いします。

協力企業のご紹介

本イベントには、下記の企業の協賛、協力をいただいています。

• 文賢（ブンケン）～文章をより良くするための推敲・校閲・校正支援ツール
• デジ革（一般社団法人デジタル経営革新協会） ネットとAIで経営に貢献できる人材になる
• JILLA（日本イラストレーション協会）　文芸美術国保への加入や交流会などメリットいっぱい

また、多くの制作会社に協賛いただいています。

• ウェブライダー
• LINICA
• エンタミナ
• コンセント
• サービシンク
• ビットエー
• トゥーアール（to-R）
• ヘルツ
• アップルップル
• CODE54
• HAMWORKS
• S-FACTORY
• necco
• FLAT
• ましじめ
• グローバルデザイン
• エイチツーオー・スペース
• Gear8
• マジカルリミックス
• ONiWA
• さきがけデジタル
• r360studio

通年で協賛を募集しています。検討くださいますと幸いです。

お問い合わせ

問い合わせはDoorkeeperのフォームからお送りください。

タイムテーブル

• タイムテーブルは目安です。
• 1時間ごとに5-10分の休憩をはさみます。

クリックすると、PDFが開きます。

セッション情報と講演者プロフィール

【A1-1】UIを動かすだけじゃない！ブラウザの外で効くJS活用術

JavaScriptは、UIや機能を実装するための言語だと思っていませんか？

実は、開発フローの中にある「ちょっとしたモヤモヤ」も、JSで解消できるかもしれません。

本セッションでは、チームの作業効率や品質を支えるツールをJSで作った体験を通し、得られた気付きを共有します。

「プロダクトコード以外でもJSは活用できる」という視点から、JSの可能性をひろげ、日々の開発フローに潜む小さな課題を解消するためのヒントをお伝えします。

特典（アーカイブチケット or アンケート回答）

• 登壇資料
• サンプルコード

対象：

• 初級向け。若手のウェブフロントエンドエンジニア。

対象外

• コードの細かい解説は扱いません。

【A2-2】sort()や splice()で配列を壊さないで！非破壊配列操作を使おう

sort() や splice() を使って、意図せず元の配列を書き換えてしまい、予期せぬバグに悩まされた経験はありませんか？ 本セッションセッションでは、そういった「破壊的メソッド」の危険性を解説し、安全なコードを書くためのテクニックを紹介します。

このセッションを通じて、より堅牢でモダンなJavaScriptのコーディングスタイルを身につけましょう。

特典（アーカイブチケット or アンケート回答）

• 登壇資料
• サンプルコード

【A3-3】ちょっと使いやすくするアクセシビリティテクニック

JavaScriptでのアクセシビリティは特別な実装ではありません。

片手操作や強い日差し、疲れ目など、誰にでも起こり得る一時的な不便を、数行のJavaScriptでやわらげる方法を紹介します。

既存コードにひと工夫できる実装パターンを解説します。

特典（アーカイブチケット or アンケート回答）

• 登壇資料
• サンプルコード

対象：

• JavaScriptの基本が分かる方

対象外

• Reactなどを前提にした内容ではありません。

【B1-4】どうすればJavaScriptをフルスクラッチで扱えるようになるかがわかるセッション

ライブラリをちょこっと設定するだけじゃなく、フルスクラッチでJavaScriptを扱えるようになったら、あんなことやこんなこともできて毎日妄想が止まらなくなると思いませんか？

多くの方が高い壁を感じ苦手意識を持っているWeb制作のフロントエンド開発をスキルとしてしっかり身につけていくための基礎教養とノウハウをお伝えします。

特典（アーカイブチケット or アンケート回答）

• 発表PDF
• サンプルコード

対象：

• Web制作界隈の初級〜中級コーダー&フロントエンドエンジニア

対象外

• 上級フロントエンドエンジニア
  ※サンプルコードの配布はしますが、セッション内容自体は具体的なコード紹介ではなく考え方や知識の浸透にフォーカスしています。

【B2-5】Viteで作るシンプルでモダンな開発環境作り入門

Viteは、むずかしい設定をしなくてもすぐに使える、シンプルでモダンな開発環境を作れるツールです。

gulpやwebpackのように複雑な設定や長い待ち時間に悩まされることなく、スムーズに開発から本番用のビルドまで進められます。

本セッションでは、Viteの基本的な仕組みと導入の手順をわかりやすく解説し、「開発モード」と「本番ビルド」の違いをデモを交えて紹介します。

特典（アーカイブチケット or アンケート回答）

• 発表PDF
• サンプルコード

対象：

• JavaScriptの基本が分かる方、gulpやwebpackを利用している方、開発環境を自分で用意するのがまだ苦手な方

対象外

• 特定のフレームワーク（React/Vueなど）に特化した深い内容は扱いません。

【B3-6】その <script> 遅くしてない？― パフォーマンスを決める小さな違い

async と defer の違い、ちゃんと説明できますか？一見シンプルな script タグですが、書き方ひとつでパフォーマンスは大きく変わります。本セッションでは async、defer、type="module" の本質を整理し、よくある誤解を解きながら「なぜ速くなるのか」を図解で解説します。おまけとして、WordPress と Astro v5 での実装方法も紹介します。

特典（アーカイブチケット or アンケート回答）

• 登壇資料

【C1-7】JavaScriptが怖くなくなるための処方せん

ReactやVueなどのJavaScriptフレームワークもすっかり当たり前になり、フロントエンドでは以前よりもJavaScriptに触れることが多くなりました。

あるAPIからフェッチしたピュアな配列データをソートしたりフィルタしてレンダリングして……というやり方は、今までのjQueryなどの利用を中心としたDOMベースのJavaScriptとは大きく異なります。ここに戸惑いや苦手意識がある方も多いのではないでしょうか？

このセッションではそういった「今では当たり前に使われている頻出記法」をサンプルを交えてやさしく解説します。

本セッションが終わる頃には「何やっているか全然わからない」と思っていたコードが自然に読めるようになっているはずです！

特典（アーカイブチケット or アンケート回答）

• スライドPDF
• サンプルコード

【C2-8】何となく使わない Node.js

HTML, CSS, JavaScript は覚えた。

次は Sass, Webpack...

フレームワークも使えるようにならなきゃ...

あれ、そういえば Node.js って何となく使ってたけど、

JavaScript と何が違うの？そもそも言語なの？

そう、インストールして、何となく使えちゃうのが Node.js。

今まで何となく使っていた Node.js を、一度皆さんで深堀りしてみませんか？

フロントエンドエンジニアでも Node.js が使えると幸せになれることがたくさんあります。

特典（アーカイブチケット or アンケート回答）

• 登壇資料

対象：

• フロントエンド用の環境構築を行ったことがあるフロントエンドエンジニア／コーダー

対象外

• 普段から Node.js を使用して API 開発などをしているエンジニアは対象外です。
  Node.js を使用して API を開発する、みたいな話はしません。
  あくまでフロントエンド開発環境構築に必要な話にフォーカスします。

【C3-9】Intersection Observer APIのつかいかた

Internet Explorerが滅んでPolyfill無しでも全てのコアブラウザで利用できるようになったIntersection Observer API。

Intersection Observer APIは、要素の可視性に基づいた処理を簡単かつ効率的に実行できるJavaScriptの素晴らしいツールです。

今回のセッションではIntersection Observer APIに適したスクロール連動のアニメーションと無限スクロールの実装をサンプルに、Web制作の現場で使いやすいような形で解説します。

特典（アーカイブチケット or アンケート回答）

• サンプルコード
• 補足資料

対象：

• JavaScriptの実装を行っているエンジニア、コーダー

対象外

• バニラなJSでの実装で解説を行うため、特定のフレームワークに特化した内容は扱いません

【D1-10】JavaScript が苦手でも大丈夫！htmx で広がるマークアップの可能性

近年、フロントエンド開発はますます複雑化し、学習コストが高いと感じる方も少なくありません。

htmx は HTML に属性を追加するだけで Ajax やインタラクションを実現できる軽量ライブラリです。

本セッションでは「JavaScript が得意でなくても、既存サイトや CMS にちょっとした改善を加えられる」という視点から、実際のコード例を交えて、htmx の魅力と活用シーンをご紹介します。

特典（アーカイブチケット or アンケート回答）

• 登壇資料
• サンプルコード

【D2-11】1つの言語で完結！JavaScript(TypeScript）で作るフロントエンドとバックエンド

バックエンドとフロントエンドは、長らく別の言語で実装するのが当たり前でした。

しかし、TypeScriptとNode.jsの登場で、フロントエンドとバックエンドを同じ言語で簡単に実装できるようになりました。

本セッションでは、Node.jsのフレームワークであるNestJSを用いた、メンテナブルでシンプルなバックエンドの実装とその魅力について解説します。

特典（アーカイブチケット or アンケート回答）

• サンプルコード

対象：

• バックエンドを普段あまり触らないフロントエンドエンジニア

対象外

• フロントもバックもバリバリかけるエンジニア

【D3-12】開発者ツール（DevTools）でJavaScriptのデバッグをしよう！

JavaScriptの基本的な書き方はわかったという初心者向けの、開発者ツール（DevTools）でJavaScriptのデバッグ方法を紹介するセッションです。

「エラーがわからない！」という人、「どこのタイミングで何が起こっているのかを知りたい！」という人、「とりあえず何もわからない」という人などなど、どなたでもわかるよう、基本的な使い方を中心に解説します。

特典（アーカイブチケット or アンケート回答）

• 登壇資料
• サンプルコード

【E1-13】Reactの新しいレンダリング方式「Streaming SSR」とは？

CSRやSSR、SSGと最近のフロントエンド開発では様々なレンダリング方式が存在します。

これに加えて最新のReactでは新しいレンダリング方式の「Streaming SSR」が登場しました。

Streaming SSRとはなにか？また、これまでのレンダリング方式と何がちがうのかについて解説を行います。

特典（アーカイブチケット or アンケート回答）

• 登壇資料
• サンプルコード

【E2-14】Vitest Browser Modeで行うUIテスト

フロントエンドのUIテストではいくつか選択できるツールがあり、それぞれ特徴が異なります。

このセッションではツールの選択肢と特徴を紹介したうえで、その1つであるVitest Browser Modeが解決する課題について解説します。

UIテストの概要と今後の動向を把握するヒントになればと思います！

特典（アーカイブチケット or アンケート回答）

• 登壇資料

【E3-15】プロジェクト0日目 - 開発環境の土台づくり

JavaScriptプロジェクトを始める前に準備したい、コード品質を保つためのツールを紹介します。

ESLintやPrettierの基本から、Git Hooksでのローカル自動化、GitHub ActionsでのCI/CDまで、それぞれにできることを紹介しながら、プロジェクトに合った選択ができるよう解説します。

特典（アーカイブチケット or アンケート回答）

• 登壇資料
• サンプルコード