BEGIN:VCALENDAR VERSION:2.0 PRODID:-//https://techplay.jp//JP CALSCALE:GREGORIAN METHOD:PUBLISH X-WR-CALDESC:#朝までマークアップ 3（JS編） X-WR-CALNAME:#朝までマークアップ 3（JS編） X-WR-TIMEZONE:Asia/Tokyo BEGIN:VTIMEZONE TZID:Asia/Tokyo BEGIN:STANDARD DTSTART:19700101T000000 TZOFFSETFROM:+0900 TZOFFSETTO:+0900 TZNAME:JST END:STANDARD END:VTIMEZONE BEGIN:VEVENT UID:985172@techplay.jp SUMMARY:#朝までマークアップ 3（JS編） DTSTART;TZID=Asia/Tokyo:20251003T210000 DTEND;TZID=Asia/Tokyo:20251004T020000 DTSTAMP:20260527T211118Z CREATED:20250816T210155Z DESCRIPTION:イベント詳細はこちら\nhttps://techplay.jp/event/98517 2?utm_medium=referral&utm_source=ics&utm_campaign=ics\n\n本イベント は終了しています。「アーカイブ動画を見たい方」「 スライドをダウンロードしたい方」はSTORESからお求め ください。個人向け（3\,300円）法人向け（11\,000円）3 ヶ月：4\,400円／1年：17\,600円で132本のアーカイブが見 放題になるサブスクも用意しています。\n\n#朝までマ ークアップの3回目はJS特集で開催します。\n\n「リアル タイム視聴は無料」スタイルで開催しますが、アーカ イブチケット購入やサブスク登録でサポートください ますと助かります！\n\n\nこれまでの「#朝まで」シリー ズと異なり、アンケートは1つです。つまり、グループ ごとのアンケート、および、回答特典はありません。\ nアーカイブチケットを購入いただくと、アーカイブ動 画だけでなく、すべてのセッションのスライドやサン プルファイルなどを入手できます。Notionにとりまとめ ますので、それぞれダウンロードなさってください。\ n\n\nセッション概要と出演者\n\n敬称略、順不同\n\n\n鹿 野 壮／Ubie @tonkotsuboy_com\nTAK @tak_dcxi\nタムショー／まし じめ @tamshow_\n長谷川 広武／HAMWORKS @h2ham\n半田 惇志／フ リーランス @assialiholic\n綿貫 佳祐／Qiita/エイチームラ イフデザイン @kskwtnk\nあしざわ／ZEROSTANCE @ash_creator\n相 原 典佳 @noir44_aihara\n長谷川 喜洋／How to Use @hiro_ghap1\nKit e／キテレツ @ixkaito\n山本 一道／有限会社アップルップ ル @kazumich\nTessy／NEW FOLK @nf_matsumura\n西畑 一馬／トゥー アール @KazumaNishihata\n山村 祐貴／FLAT @ymmr2025\n平良 優乃 ／コンセント @yuneko_cnt\n\n\nイベント概要\n\nYouTube Liveで ライブ配信します。\n\n\n開催日：2025年10月3日（金） 21 :00 - 03:00\n形式：オンライン（YouTube Live）\nMC：鷹野 雅 弘（スイッチ）\n主催：CeeBeeDee\n共催：CSS Nite、DTP Transi t\n協賛（制作会社）：ウェブライダー、LINICA、エンタ ミナ、コンセント、サービシンク、ビットエー、ヘル ツ、アップルップル、CODE54、HAMWORKS、S-FACTORY、necco、FLA T、ONiWA ほか\n協賛：文賢（ブンケン）、デジ革（一般 社団法人デジタル経営革新協会） 、JILLA（日本イラス トレーション協会）\n\n\nお申し込みと参加費\n\n\nリア ルタイムの視聴は無料です。\n参加にはお申し込みが 必要です。受け付けは終演時刻まで。\n\n\nフォローア ップ（アーカイブ）\n\nスライドなどのフォローアップ （アーカイブ）は、アーカイブ購入／サブスクの方限 定のコンテンツです。\n\n\nアーカイブ動画の視聴期限 はありません。ずっと見られます。\n法人およびフリ ーランスで事業決済される方は「法人向け」をお求め ください。\n\n\nフォローアップ（アーカイブ）の購入\ n\n次の3つの方法があります。いずれかを選択なさって ください。\n\n\nアーカイブ動画の視聴期限はありませ ん。ずっと見られます。\n\n\n購入方法個人法人受け取 り備考金額終演までその後Doorkeeper （単品）2\,200円-11\, 000円終演時刻にメールを送信（info@doorkeeper.jpから送信 されます）「当日の視聴のみ」のチケットを申し込ま れた方は、いったん、キャンセルして「アーカイブ視 聴付き」のチケットを申し込んでください。STORES（単 品）3\,300円11\,000円購入するとダウンロードできるテキ ストファイルに、アーカイブ動画や特典を掲載予定の ページへのリンクがあります（アーカイブ動画や特典 の掲載はイベント終了後）ユーザー登録してから申し 込むと、［マイページ］の［購入履歴］から、後から ダウンロードできます。サブスク4\,400円（3ヶ月）詳細 ［メンバー限定］セクションの［フォローアップ（ア ーカイブ）］から本イベントのNotionにアクセスしてく ださい。法人は別途17\,600円（1年）\n\n配信に関しての あれこれ\n\n各URLは、YouTubeの概要欄にも掲載していま す。\n\n\nチャットやスタンプ、ツイートなど「参加型 」でお楽しみください！\n「音声のバランスが悪い」 など、何かお困りの場合、コメントなどで教えてくだ さい！\n\n\n配信URL\n\nYouTube Liveで配信します。\n\nhttps:// youtube.com/live/70CZ3BffPXU?feature=share\n\nX（Twitter）にて同時 配信も行っていますが、YouTube Liveにてコメントも含め てお楽しみください。\n\nYouTube関連\n\n\nYouTubeチャット を活用ください！　スパム回避のため、YouTubeチャンネ ル登録者のみがコメント可能にしていますので、事前 にチャンネル登録をお願いします。\nスーパーチャッ ト（スパチャ＝投げ銭）を利用できます。少額でも大 歓迎です！　いただいた全額を講演者にお渡しします 。\n質問がある場合、YouTubeチャットで冒頭に★または 【質問】を付けてコメントください。すべては拾いき れません。「〜は〜という意味です」「自分の現場で はこうやっている」など、視聴される方からのサポー ト的なコメントを歓迎します！　一緒に場を作ってく ださいますと嬉しいです!! \n\n\nリアクションや質問\n\n \nスクショ付きのツイート歓迎です。ぜひ、ハッシュ タグ（#朝までマークアップ）を付けてください。ただ し、事例の部分などでNGマークがついている箇所、講 演者からNGの指示のある箇所はご遠慮ください。\n終了 後、ぜひアンケートにお答えください！　「フィード バックはギフト」。話してくださった方の成長の材料 になり、また、イベントの改善につながります。\n\n\n その他\n\n\n「UDトーク」にて文字情報を提供しますの で、別のブラウザーなどでご覧ください。タイムラグ や精度についてはご容赦ください。\nサンプルファイ ルや配布資料、アーカイブ動画のURLをSNSなどで再配布 するのは禁止です。\n開演の30分前くらい前からテスト 配信をスタートします。音声などが聞こえるかチェッ クなさってください。\nスマホやタブレットで視聴さ れる方もいると思いますが、PCでの視聴を前提として います。なるべくPCでご覧ください！\nご覧いただく回 線状況によっては、YouTubeの動画が止まってしまったり 、音声が途切れてしまうことがあります。その場合に は、ブラウザーを再読み込みしたり、OSを再起動して みてください。\n分単位で細かく練られたカリキュラ ムではなく、少し緩めに進行します。コメントを拾っ て脱線することもあります。言い換えると学習だけを されたい方には向いていません。\n若干の延長など、 ぴったり進行しないことがあります。\n\n\n配信準備は 念入りに行っていますが、本番になると予期せぬトラ ブルが生じるのがライブ配信です。それも含めて楽し んでください。\n\nアンケート\n\n\nこれまでの「#朝ま で」シリーズと異なり、アンケートは1つです。つまり 、グループごとのアンケート、および、回答特典はあ りません。\nアーカイブチケットを購入いただくと、 アーカイブ動画だけでなく、すべてのセッションのス ライドやサンプルファイルなどを入手できます。Notion にとりまとめますので、それぞれダウンロードなさっ てください。\n\n\n領収書\n\nインボイス対応の領収書が 必要な方は、アーカイブ購入者向けのNotionからPDFをダ ウンロードしてご利用ください。\n\n\n「アーカイブ視 聴（会社として申し込み、社内で共有）」のチケット を購入いただいている場合のみ、個別対応いたします 。\n\n\n所轄税務署、インボイス制度電話相談センター などに相談し、次のようにすることにしました。\n\n\n インボイス対応の領収書発行について\n\n\nオンライン 椅子ヨガ\n\n本イベントはコモモ先生 @komomoaichi のオン ライン椅子ヨガ付きです！\n\n\n開演前\n休憩時間（適 宜）\n\n\n一緒に「ちょっとメンテ」しましょう。\nhttps ://chotto-maint.com/online-yoga\n\n\n\nサブスク\n\nCSS Nite、DTP Tra nsitのオンラインセミナーのアーカイブをリーズナブル に、また、管理しやすく利用いただけるように、「サ ブスク」（定額サービス）をご用意しています（Circle というサービスを利用しています）。\n\n\n3ヶ月：4\,400 円＋税\n年パス：16\,000円＋税\n\n\n年間で50近く開催さ れますので、1本あたり400円を切る計算です。ぜひ、ご 利用ください！\n\n\nサブスク対象イベントのリスト（G oogle スプレッドシート）\n\n\nアーカイブ動画だけでな く、スライドのダウンロードも可能ですので、ざっと 内容を把握しておきたい場合にも適しています。\n\n\n\ nサブスクの登録方法\n\n次の手順でお申し込みくださ い。\n\n\nCircleでユーザー登録（自動返信メールを確認 して完了です）\nStripeで決済（3ヶ月ごと：4\,400円、年 パス：17\,600円）\nCircleとStripeでメールアドレスが異な る場合のみ フォームからのご連絡をお願いします。\n\ n\n協力企業のご紹介\n\n本イベントには、下記の企業の 協賛、協力をいただいています。\n\n\n文賢（ブンケン ）～文章をより良くするための推敲・校閲・校正支援 ツール\nデジ革（一般社団法人デジタル経営革新協会 ） ネットとAIで経営に貢献できる人材になる\nJILLA（日 本イラストレーション協会）　文芸美術国保への加入 や交流会などメリットいっぱい\n\n\n\n\nまた、多くの制 作会社に協賛いただいています。\n\n\nウェブライダー\ nLINICA\nエンタミナ\nコンセント\nサービシンク\nビット エー\nトゥーアール（to-R）\nヘルツ\nアップルップル\nC ODE54\nHAMWORKS\nS-FACTORY\nnecco\nFLAT\nましじめ\nグローバルデ ザイン\nエイチツーオー・スペース\nGear8\nマジカルリ ミックス\nONiWA\nさきがけデジタル\nr360studio\n\n\n\n\n通年 で協賛を募集しています。検討くださいますと幸いで す。\n\nお問い合わせ\n\n問い合わせはDoorkeeperのフォー ムからお送りください。\n\nタイムテーブル\n\n\nタイム テーブルは目安です。\n1時間ごとに5-10分の休憩をはさ みます。\n\n\n時間#セッションタイトル講演者21-22A1-1UI を動かすだけじゃない！ブラウザの外で効くJS活用術 平良 優乃（コンセント）A2-2sort()や splice()で配列を壊 さないで！非破壊配列操作を使おう鹿野 壮（Ubie）A3-3 ちょっと使いやすくするアクセシビリティテクニック タムショー（ましじめ）22-23B1-4どうすればJavaScriptをフ ルスクラッチで扱えるようになるかがわかるセッショ ンあしざわ（ZEROSTANCE）B2-5Viteで作るシンプルでモダン な開発環境作り入門長谷川 広武（HAMWORKS）B3-6その <\; script>\; 遅くしてない？― パフォーマンスを決める小 さな違いKite（キテレツ）23-24C1-7JavaScriptが怖くなくな るための処方せん半田 惇志C2-8何となく使わない Node.js Tessy（NEW FOLK）C3-9Intersection Observer APIのつかいかたTAK24-2 5D1-10JavaScript が苦手でも大丈夫！htmx で広がるマークア ップの可能性山本 一道（アップルップル）D2-111つの言 語で完結！JavaScript(TypeScript）で作るフロントエンドと バックエンド長谷川 喜洋（How to Use）D3-12開発者ツール （DevTools）でJavaScriptのデバッグをしよう！相原 典佳25- 26E1-13Reactの新しいレンダリング方式「Streaming SSR」とは ？西畑 一馬（トゥーアール）E2-14Vitest Browser Modeで行う UIテスト山村 祐貴（FLAT）E3-15プロジェクト0日目 - 開発 環境の土台づくり綿貫 佳祐（Qiita/エイチームライフデ ザイン）\n\nクリックすると、PDFが開きます。\n\n\n\n\n\n \n\nセッション情報と講演者プロフィール\n\n【A1-1】UI を動かすだけじゃない！ブラウザの外で効くJS活用術\n \nJavaScriptは、UIや機能を実装するための言語だと思っ ていませんか？実は、開発フローの中にある「ちょっ としたモヤモヤ」も、JSで解消できるかもしれません 。本セッションでは、チームの作業効率や品質を支え るツールをJSで作った体験を通し、得られた気付きを 共有します。「プロダクトコード以外でもJSは活用で きる」という視点から、JSの可能性をひろげ、日々の 開発フローに潜む小さな課題を解消するためのヒント をお伝えします。\n\n\n\n特典（アーカイブチケット or アンケート回答）登壇資料サンプルコード\n\n対象：初 級向け。若手のウェブフロントエンドエンジニア。\n\n 対象外コードの細かい解説は扱いません。\n\n平良 優 乃 たいら・ゆうの株式会社コンセント株式会社コン セント フロントエンドエンジニア国立沖縄工業高等専 門学校メディア情報工学科卒。ウェブ制作やアプリケ ーション開発を経験し、2020年フロントエンドエンジニ アとしてコンセントに入社。主にコーポレートサイト 、ブランドサイトのフロントエンド設計・開発やテク ニカルディレクションを担当。𝕏（Twitter）：@yuneko_cnt \n\n【A2-2】sort()や splice()で配列を壊さないで！非破壊 配列操作を使おう\n\nsort() や splice() を使って、意図せ ず元の配列を書き換えてしまい、予期せぬバグに悩ま された経験はありませんか？ 本セッションセッション では、そういった「破壊的メソッド」の危険性を解説 し、安全なコードを書くためのテクニックを紹介しま す。このセッションを通じて、より堅牢でモダンなJava Scriptのコーディングスタイルを身につけましょう。\n\n \n\n特典（アーカイブチケット or アンケート回答）登 壇資料サンプルコード\n\n鹿野 壮 かの・たけしUbie株 式会社Ubie株式会社プロダクトエンジニア2024年にUbie株 式会社に入社。九州大学でメディアアートを学んだ後 、テックリードやフロントエンドチームリーダーを経 験する。現在はUbieでフロントエンド・バックエンド問 わずフルスタックにプロダクト開発をしている。TechFee d公認エキスパート。近著に『JavaScriptコードレシピ集 』（技術評論社）があるウェブサイト𝕏（Twitter）：@t onkotsuboy_com\n\n【A3-3】ちょっと使いやすくするアクセシ ビリティテクニック\n\nJavaScriptでのアクセシビリティ は特別な実装ではありません。片手操作や強い日差し 、疲れ目など、誰にでも起こり得る一時的な不便を、 数行のJavaScriptでやわらげる方法を紹介します。既存コ ードにひと工夫できる実装パターンを解説します。\n\n \n\n特典（アーカイブチケット or アンケート回答）登 壇資料サンプルコード\n\n対象：JavaScriptの基本が分か る方\n\n対象外Reactなどを前提にした内容ではありませ ん。\n\nタムショー たむしょーましじめ株式会社まし じめ株式会社 代表物の構造やバックグラウンドを見る ことが好きで、自動車整備士の道へ進む。 その後デジ タルハリウッドでweb制作を学び制作会社へ転職。2021年 にましじめ株式会社を設立。CSS設計に関する著書の経 験があり、メンテナンス・運用のしやすいwebサイトの 構築を得意とする。受託では主にHTML・CSSから、ウェブ アクセシビリティ対応、CMSを利用したwebサイトの制作 を担当。また、焼き菓子を販売する「あしかクッキー 」の運営も行なっている。著者:『現場のプロから学ぶ CSSコーディングバイブル』𝕏（Twitter）：@tamshow_\n\n【 B1-4】どうすればJavaScriptをフルスクラッチで扱えるよ うになるかがわかるセッション\n\nライブラリをちょこ っと設定するだけじゃなく、フルスクラッチでJavaScript を扱えるようになったら、あんなことやこんなことも できて毎日妄想が止まらなくなると思いませんか？多 くの方が高い壁を感じ苦手意識を持っているWeb制作の フロントエンド開発をスキルとしてしっかり身につけ ていくための基礎教養とノウハウをお伝えします。\n\n \n\n特典（アーカイブチケット or アンケート回答）発 表PDFサンプルコード\n\n対象：Web制作界隈の初級〜中級 コーダー&フロントエンドエンジニア\n\n対象外上級フ ロントエンドエンジニア\n※サンプルコードの配布は しますが、セッション内容自体は具体的なコード紹介 ではなく考え方や知識の浸透にフォーカスしています 。\n\nあしざわ あしざわ株式会社ZEROSTANCE株式会社ZEROST ANCE 代表取締役Webクリエイター育成スクール - SLash 代 表／講師ディレクション、デザイン、コーディング、 プログラミングの全領域で現役のプロとして活躍する ほか、グラフィックデザイン、イラスト、アニメーシ ョン、3Dモデリングやフォトグラフィック、動画編集 などもこなすオールラウンダー。大学（法学部）在学 中から独りでクリエイティブを学びはじめ、ほぼすべ てのスキルを独学で習得。𝕏（Twitter）：@ash_creator\n\n 【B2-5】Viteで作るシンプルでモダンな開発環境作り入 門\n\nViteは、むずかしい設定をしなくてもすぐに使え る、シンプルでモダンな開発環境を作れるツールです 。gulpやwebpackのように複雑な設定や長い待ち時間に悩 まされることなく、スムーズに開発から本番用のビル ドまで進められます。本セッションでは、Viteの基本的 な仕組みと導入の手順をわかりやすく解説し、「開発 モード」と「本番ビルド」の違いをデモを交えて紹介 します。\n\n\n\n特典（アーカイブチケット or アンケー ト回答）発表PDFサンプルコード\n\n対象：JavaScriptの基 本が分かる方、gulpやwebpackを利用している方、開発環 境を自分で用意するのがまだ苦手な方\n\n対象外特定の フレームワーク（React/Vueなど）に特化した深い内容は 扱いません。\n\n長谷川 広武 はせがわ・ひろむ株式会 社HAMWORKS代表取締役株式会社カワラバン 取締役bit part 合同会社 業務執行社員テクニカルディレクター 兼 フ ロントエンドエンジニアSaCSS主催（Sapporo.css） 主催(´ ºムº `)の人。北海道札幌市在住。2016年2月に株式会社H AMWORKSを設立し、代表取締役に就任。HTML & CSS & JavaScript のコーディングや、WordPressなどのCMSを利用したWebサイ ト構築などを得意としている。また、2009年より札幌で Webデザイナー向けの勉強会「SaCSS」の主催・運営を行 っている。共著書として『プロフェッショナルWebプロ グラミング　React 』（MdN刊）がある。𝕏（Twitter）：@h 2ham\n\n【B3-6】その