申し込み受付は終了しました
| 当日の視聴のみ | 無料 |
|---|---|
| アーカイブ視聴、特典付き | 2,200円 前払い |
| アーカイブ視聴、特典付き（会社として申し込み、社内で共有） | 11,000円 前払い |
| 「無料」のチケットから「アーカイブ視聴を含む」のチケットに切り替えるには、ご自身でキャンセルしてから再度お申し込みください（終演時刻まで）。 | |
本イベントは終了しています。「アーカイブ動画を見たい方」「スライドをダウンロードしたい方」はSTORESからお求めください。
3ヶ月：4,400円／1年：17,600円で132本のアーカイブが見放題になるサブスクも用意しています。
#朝までマークアップの3回目はJS特集で開催します。
「リアルタイム視聴は無料」スタイルで開催しますが、アーカイブチケット購入やサブスク登録でサポートくださいますと助かります！
敬称略、順不同
YouTube Liveでライブ配信します。
スライドなどのフォローアップ（アーカイブ）は、アーカイブ購入／サブスクの方限定のコンテンツです。
次の3つの方法があります。いずれかを選択なさってください。
| 購入方法 | 個人 | 法人 | 受け取り | 備考 | |
|---|---|---|---|---|---|
| 金額 | |||||
| 終演まで | その後 | ||||
| Doorkeeper （単品） | 2,200円 | - | 11,000円 | 終演時刻にメールを送信（info@doorkeeper.jpから送信されます） | 「当日の視聴のみ」のチケットを申し込まれた方は、いったん、キャンセルして「アーカイブ視聴付き」のチケットを申し込んでください。 |
| STORES （単品） | 3,300円 | 11,000円 | 購入するとダウンロードできるテキストファイルに、アーカイブ動画や特典を掲載予定のページへのリンクがあります（アーカイブ動画や特典の掲載はイベント終了後） | ユーザー登録してから申し込むと、［マイページ］の［購入履歴］から、後からダウンロードできます。 | |
| サブスク | 4,400円（3ヶ月） | 詳細 | ［メンバー限定］セクションの［フォローアップ（アーカイブ）］から本イベントのNotionにアクセスしてください。 | 法人は別途 | |
| 17,600円（1年） | |||||
各URLは、YouTubeの概要欄にも掲載しています。
YouTube Liveで配信します。
https://youtube.com/live/70CZ3BffPXU?feature=share
X（Twitter）にて同時配信も行っていますが、YouTube Liveにてコメントも含めてお楽しみください。
配信準備は念入りに行っていますが、本番になると予期せぬトラブルが生じるのがライブ配信です。それも含めて楽しんでください。
インボイス対応の領収書が必要な方は、アーカイブ購入者向けのNotionからPDFをダウンロードしてご利用ください。
所轄税務署、インボイス制度電話相談センターなどに相談し、次のようにすることにしました。
本イベントはコモモ先生 @komomoaichi のオンライン椅子ヨガ付きです！
一緒に「ちょっとメンテ」しましょう。
https://chotto-maint.com/online-yoga
CSS Nite、DTP Transitのオンラインセミナーのアーカイブをリーズナブルに、また、管理しやすく利用いただけるように、「サブスク」（定額サービス）をご用意しています（Circleというサービスを利用しています）。
年間で50近く開催されますので、1本あたり400円を切る計算です。ぜひ、ご利用ください！
アーカイブ動画だけでなく、スライドのダウンロードも可能ですので、ざっと内容を把握しておきたい場合にも適しています。
次の手順でお申し込みください。
本イベントには、下記の企業の協賛、協力をいただいています。
また、多くの制作会社に協賛いただいています。
通年で協賛を募集しています。検討くださいますと幸いです。
問い合わせはDoorkeeperのフォームからお送りください。
| 時間 | # | セッションタイトル | 講演者 |
|---|---|---|---|
| 21-22 | A1-1 | UIを動かすだけじゃない！ブラウザの外で効くJS活用術 | 平良 優乃（コンセント） |
| A2-2 | sort()や splice()で配列を壊さないで！非破壊配列操作を使おう | 鹿野 壮（Ubie） | |
| A3-3 | ちょっと使いやすくするアクセシビリティテクニック | タムショー（ましじめ） | |
| 22-23 | B1-4 | どうすればJavaScriptをフルスクラッチで扱えるようになるかがわかるセッション | あしざわ（ZEROSTANCE） |
| B2-5 | Viteで作るシンプルでモダンな開発環境作り入門 | 長谷川 広武（HAMWORKS） | |
| B3-6 | その <script> 遅くしてない？― パフォーマンスを決める小さな違い | Kite（キテレツ） | |
| 23-24 | C1-7 | JavaScriptが怖くなくなるための処方せん | 半田 惇志 |
| C2-8 | 何となく使わない Node.js | Tessy（NEW FOLK） | |
| C3-9 | Intersection Observer APIのつかいかた | TAK | |
| 24-25 | D1-10 | JavaScript が苦手でも大丈夫！htmx で広がるマークアップの可能性 | 山本 一道（アップルップル） |
| D2-11 | 1つの言語で完結！JavaScript(TypeScript）で作るフロントエンドとバックエンド | 長谷川 喜洋（How to Use） | |
| D3-12 | 開発者ツール（DevTools）でJavaScriptのデバッグをしよう！ | 相原 典佳 | |
| 25-26 | E1-13 | Reactの新しいレンダリング方式「Streaming SSR」とは？ | 西畑 一馬（トゥーアール） |
| E2-14 | Vitest Browser Modeで行うUIテスト | 山村 祐貴（FLAT） | |
| E3-15 | プロジェクト0日目 - 開発環境の土台づくり | 綿貫 佳祐（Qiita/エイチームライフデザイン） |
クリックすると、PDFが開きます。
JavaScriptは、UIや機能を実装するための言語だと思っていませんか？
実は、開発フローの中にある「ちょっとしたモヤモヤ」も、JSで解消できるかもしれません。
本セッションでは、チームの作業効率や品質を支えるツールをJSで作った体験を通し、得られた気付きを共有します。
「プロダクトコード以外でもJSは活用できる」という視点から、JSの可能性をひろげ、日々の開発フローに潜む小さな課題を解消するためのヒントをお伝えします。
平良 優乃 たいら・ゆうの株式会社コンセント フロントエンドエンジニア
国立沖縄工業高等専門学校メディア情報工学科卒。ウェブ制作やアプリケーション開発を経験し、2020年フロントエンドエンジニアとしてコンセントに入社。主にコーポレートサイト、ブランドサイトのフロントエンド設計・開発やテクニカルディレクションを担当。
sort() や splice() を使って、意図せず元の配列を書き換えてしまい、予期せぬバグに悩まされた経験はありませんか？ 本セッションセッションでは、そういった「破壊的メソッド」の危険性を解説し、安全なコードを書くためのテクニックを紹介します。
このセッションを通じて、より堅牢でモダンなJavaScriptのコーディングスタイルを身につけましょう。
鹿野 壮 かの・たけしUbie株式会社プロダクトエンジニア
2024年にUbie株式会社に入社。九州大学でメディアアートを学んだ後、テックリードやフロントエンドチームリーダーを経験する。現在はUbieでフロントエンド・バックエンド問わずフルスタックにプロダクト開発をしている。TechFeed公認エキスパート。
近著に『JavaScriptコードレシピ集』（技術評論社）がある
JavaScriptでのアクセシビリティは特別な実装ではありません。
片手操作や強い日差し、疲れ目など、誰にでも起こり得る一時的な不便を、数行のJavaScriptでやわらげる方法を紹介します。
既存コードにひと工夫できる実装パターンを解説します。
タムショー たむしょーましじめ株式会社 代表
物の構造やバックグラウンドを見ることが好きで、自動車整備士の道へ進む。 その後デジタルハリウッドでweb制作を学び制作会社へ転職。
2021年にましじめ株式会社を設立。
CSS設計に関する著書の経験があり、メンテナンス・運用のしやすいwebサイトの構築を得意とする。
受託では主にHTML・CSSから、ウェブアクセシビリティ対応、CMSを利用したwebサイトの制作を担当。
また、焼き菓子を販売する「あしかクッキー」の運営も行なっている。
著者:『現場のプロから学ぶ CSSコーディングバイブル』
ライブラリをちょこっと設定するだけじゃなく、フルスクラッチでJavaScriptを扱えるようになったら、あんなことやこんなこともできて毎日妄想が止まらなくなると思いませんか？
多くの方が高い壁を感じ苦手意識を持っているWeb制作のフロントエンド開発をスキルとしてしっかり身につけていくための基礎教養とノウハウをお伝えします。
あしざわ あしざわ株式会社ZEROSTANCE 代表取締役
Webクリエイター育成スクール - SLash 代表／講師
ディレクション、デザイン、コーディング、プログラミングの全領域で現役のプロとして活躍するほか、グラフィックデザイン、イラスト、アニメーション、3Dモデリングやフォトグラフィック、動画編集などもこなすオールラウンダー。大学（法学部）在学中から独りでクリエイティブを学びはじめ、ほぼすべてのスキルを独学で習得。
Viteは、むずかしい設定をしなくてもすぐに使える、シンプルでモダンな開発環境を作れるツールです。
gulpやwebpackのように複雑な設定や長い待ち時間に悩まされることなく、スムーズに開発から本番用のビルドまで進められます。
本セッションでは、Viteの基本的な仕組みと導入の手順をわかりやすく解説し、「開発モード」と「本番ビルド」の違いをデモを交えて紹介します。
長谷川 広武 はせがわ・ひろむ代表取締役
株式会社カワラバン 取締役
bit part 合同会社 業務執行社員
テクニカルディレクター 兼 フロントエンドエンジニア
SaCSS主催（Sapporo.css） 主催
(´ ºムº `)の人。北海道札幌市在住。2016年2月に株式会社HAMWORKSを設立し、代表取締役に就任。HTML & CSS & JavaScriptのコーディングや、WordPressなどのCMSを利用したWebサイト構築などを得意としている。また、2009年より札幌でWebデザイナー向けの勉強会「SaCSS」の主催・運営を行っている。
共著書として『プロフェッショナルWebプログラミング React 』（MdN刊）がある。
async と defer の違い、ちゃんと説明できますか？一見シンプルな script タグですが、書き方ひとつでパフォーマンスは大きく変わります。本セッションでは async、defer、type="module" の本質を整理し、よくある誤解を解きながら「なぜ速くなるのか」を図解で解説します。おまけとして、WordPress と Astro v5 での実装方法も紹介します。
Kite かいと株式会社キテレツ (KITERETZ inc.) 代表。
クリエイティブディレクター、ウェブ・グラフィックデザイナー、フルスタック開発者。
横浜生まれ。高校時代をシアトルで過ごし、早稲田大学商学部を卒業後、ファッションデザイナー、グラフィックデザイナー、ウェブデザイナー、プログラマーとしてキャリアを積んだ後、株式会社キテレツを設立。ウェブとグラフィックを中心としたデザイン、開発、ブランディング、マーケティングなどを行う。
WordPress、React、Astro、Ruby on Rails などの著名オープンソースソフトウェアへ貢献する一方、自身でも積極的にオープンソースを開発している。開発オープンソース： Wocker、Bathe、Frasco、KTRZ Font、KTRZ Monokai、Nextsss、astro-relative-links、など。
オンライン講座プラットフォーム Coloso. にて「実践から学ぶチームで作り上げるウェブサイト制作」「デザインから実装まで動きを取り入れたWebサイト制作」を公開中。
著書
•『著作権トラブル解決のバイブル! クリエイターのための権利の本』 (共著)
•『世界一わかりやすいWordPress 導入とサイト制作の教科書』 (共著)
ReactやVueなどのJavaScriptフレームワークもすっかり当たり前になり、フロントエンドでは以前よりもJavaScriptに触れることが多くなりました。
あるAPIからフェッチしたピュアな配列データをソートしたりフィルタしてレンダリングして……というやり方は、今までのjQueryなどの利用を中心としたDOMベースのJavaScriptとは大きく異なります。ここに戸惑いや苦手意識がある方も多いのではないでしょうか？
このセッションではそういった「今では当たり前に使われている頻出記法」をサンプルを交えてやさしく解説します。
本セッションが終わる頃には「何やっているか全然わからない」と思っていたコードが自然に読めるようになっているはずです！
半田 惇志 はんだ・あつしフロントエンドエンジニア 兼 HubSpotテクニカルエキスパート
フロントエンドエンジニアとしては特にコンポーネント設計に強く、PRECSS（ https://precss.io ）並びにCSS設計完全ガイド（ https://amzn.to/3EHj5AU ）の生みの親。
HubSpotにおいてはCRMの導入支援からデータ設計、マーケティングオートメーションフローのセットアップ、CMSによるサイト構築まで、フルスタックに対応している。
HTML, CSS, JavaScript は覚えた。
次は Sass, Webpack...
フレームワークも使えるようにならなきゃ...
あれ、そういえば Node.js って何となく使ってたけど、
JavaScript と何が違うの？そもそも言語なの？
そう、インストールして、何となく使えちゃうのが Node.js。
今まで何となく使っていた Node.js を、一度皆さんで深堀りしてみませんか？
フロントエンドエンジニアでも Node.js が使えると幸せになれることがたくさんあります。
Tessy てっしーフロントエンドエンジニア Tessy
制作会社を2社経験した後、フリーランスを4年経験し、NEW FOLK にテクニカルジョイン。
Web に関してならできることはわりかし多いです。
Internet Explorerが滅んでPolyfill無しでも全てのコアブラウザで利用できるようになったIntersection Observer API。
Intersection Observer APIは、要素の可視性に基づいた処理を簡単かつ効率的に実行できるJavaScriptの素晴らしいツールです。
今回のセッションではIntersection Observer APIに適したスクロール連動のアニメーションと無限スクロールの実装をサンプルに、Web制作の現場で使いやすいような形で解説します。
TAK たく1993年群馬県生まれ。大学を卒業後、紆余曲折を経てWeb制作に携わる。Web制作会社や東証プライム上場企業にてマークアップ・フロントエンド業務を経験した後、フリーランスとして独立。
自身の経験を活かし、主にCSS関連の技術発信を行う。備忘録や知識のアウトプットの場として運営しているブログ「TAKLOG」を運営。
2025年にCSSに関する書籍を出版予定。
近年、フロントエンド開発はますます複雑化し、学習コストが高いと感じる方も少なくありません。
htmx は HTML に属性を追加するだけで Ajax やインタラクションを実現できる軽量ライブラリです。
本セッションでは「JavaScript が得意でなくても、既存サイトや CMS にちょっとした改善を加えられる」という視点から、実際のコード例を交えて、htmx の魅力と活用シーンをご紹介します。
山本 一道 やまもと・かずみち株式会社アップルップル 代表取締役
名古屋を拠点に 20年以上にわたり企業サイトやサービス開発を手がける。2009年より国産 CMS「a-blog cms」を開発・提供し、現在までに 5,300件以上の導入実績を持つ。HTML ファースト・テンプレートファースト をコンセプトに、フロントエンドエンジニアがバックエンドを意識せずに構築を進められる CMS として評価されている。近年は Tailwind CSS・htmx・Alpine.js などモダンなフロント技術と組み合わせることで、効率的かつ拡張性が高く保守性のいいサイト制作を実現しています。
バックエンドとフロントエンドは、長らく別の言語で実装するのが当たり前でした。
しかし、TypeScriptとNode.jsの登場で、フロントエンドとバックエンドを同じ言語で簡単に実装できるようになりました。
本セッションでは、Node.jsのフレームワークであるNestJSを用いた、メンテナブルでシンプルなバックエンドの実装とその魅力について解説します。
長谷川 喜洋 はせがわ・よしひろ株式会社ステラクリエイト CEO/総合webサービス タダフラ 代表/ロクナナ・デジタルハリウッドSTUDIO大阪・HAL大阪校・京都芸術大学 講師/futureshop認定マイスター/だし・星のソムリエ®
大阪生まれ大阪育ち。 パチンコ店の店長からEC業界へ。そののち、知財を扱うスタートアップでシステム開発・Webサイト制作・アプリ開発を担当。フリーランスとしてWeb制作も行う。
EC時代に天体望遠鏡を販売していた経験から、星空事業を主とした法人を2020年に設立。
JavaScriptの基本的な書き方はわかったという初心者向けの、開発者ツール（DevTools）でJavaScriptのデバッグ方法を紹介するセッションです。
「エラーがわからない！」という人、「どこのタイミングで何が起こっているのかを知りたい！」という人、「とりあえず何もわからない」という人などなど、どなたでもわかるよう、基本的な使い方を中心に解説します。
相原 典佳 あいはら・のりよしDTP、Webアシスタントディレクター業務を経たのち、2010年にフリーランスとして独立。ディレクションからデザイン、構築まで、一貫したWebサイト制作を提供している。
現場での経験や知識をもとに、デジタルハリウッド、ロクナナワークショップ、Schooなどで講師・授業を担当するほか、「Web初心者を抜けた人たち」向けコミュニティ、Beans Collegeの運営を行っている。
共著書として『初心者からちゃんとしたプロになる HTML+CSS標準入門』（MdN刊）、『Figmaで作るUIデザインアイデア集 サンプルで学ぶ35のパターン』（インプレス刊）などがある。
CSRやSSR、SSGと最近のフロントエンド開発では様々なレンダリング方式が存在します。
これに加えて最新のReactでは新しいレンダリング方式の「Streaming SSR」が登場しました。
Streaming SSRとはなにか？また、これまでのレンダリング方式と何がちがうのかについて解説を行います。
西畑 一馬 にしはた・かずま株式会社トゥーアール代表取締役 フロントエンドエンジニア
1979年大阪生まれ。2002年からWeb制作をはじめ2016年にフロントエンド専門のWeb制作会社「株式会社トゥーアール」を設立しReactやNext.jsを利用したモダンフロントエンド開発を行っている。
近著に「プロフェッショナルWebプログラミング React 」(共著・MdN刊)がある。
フロントエンドのUIテストではいくつか選択できるツールがあり、それぞれ特徴が異なります。
このセッションではツールの選択肢と特徴を紹介したうえで、その1つであるVitest Browser Modeが解決する課題について解説します。
UIテストの概要と今後の動向を把握するヒントになればと思います！
山村 祐貴 やまむら・ゆうき2024年に株式会社FLATに入社。フロントエンドエンジニアとして、いくつかのサイトやアプリケーションのフロント実装を経験しました。
ここ半年ほどは、フルスタックでバックエンドやインフラもやることが多いです。TypeScriptとReactでWebフロントエンドの開発を始めた系の人 (ゆとり世代)。
JavaScriptプロジェクトを始める前に準備したい、コード品質を保つためのツールを紹介します。
ESLintやPrettierの基本から、Git Hooksでのローカル自動化、GitHub ActionsでのCI/CDまで、それぞれにできることを紹介しながら、プロジェクトに合った選択ができるよう解説します。
綿貫 佳祐 わたぬき・けいすけQiita株式会社 / 株式会社エイチームライフデザイン
会社では、組織を束ね、プロダクト品質の向上や制作プロセスを改善する役割を担っています。 また、採用や育成にも関わり、組織全体を常にアップデートするよう努めています。
個人の制作範囲としては、 UI を中心にマークアップ、フロントエンド、グラフィック、リサーチなど。 特定の領域に閉じず、幅広いスキルを持つことで最善の解を提供できるように心がけています。
Friends of Figma Nagoyaのリーダーもしていて、Figmaの本も書きました。
CSS Nite（シーエスエス・ナイト）は、ウェブ制作に関わる方のためのセミナーイベント。2005年にスタートし、2022年10月で丸17年。 仙台、大阪、岡山、札幌、甲府、神戸、福岡、長野、青森、名古屋、沖縄、福島など首都圏以外での“地方版”なども開催しています。地方版は、現地の有志などにより主催・運営されています。 これまでに、800回を超える関連イベントを通して、のべ75,000名...
メンバーになる