study_session_materials

jig.jp で実施している勉強会の資料を管理するリポジトリです。

スライドの PR で CI が検査する規則は スライドのガイドライン にあります。

資料一覧

作成年度が新しい順に記述しています。

2026年作成

• みんなで書き込める掲示板を作ってみよう！
  • JavaScript の基本を学びながら、サーバーに投稿が保存されて他の人からも見える掲示板アプリを作ります
  • スライド
• 神経衰弱ゲームを作ろう — JavaScript 中級講座
  • JavaScript で神経衰弱ゲームを作りながら、Webアプリを支える 3 つの考え方 (状態・イベント・時間) を体験するハンズオンです
  • スライド
• 1から学ぶ JavaScript！ クイズアプリを作ってみよう
  • JavaScript の基本を学びながら、自分だけの3択クイズアプリを作ります。
  • スライド
• 自己紹介ページを作ろう — Web開発入門
  • HTML、CSS、JavaScriptの3つの言語を使って、自己紹介ページを作ります。
  • スライド
• オープンデータで課題を解決する Web アプリ開発
  • オープンデータを使って「福井恐竜博物館 おでかけプランナー」を作りながら、fetch・Chart.js・DOM 操作・filter を学ぶハンズオンです
  • スライド
• GSAP ワークショップ 〜Web アニメーションの世界へようこそ〜
  • GSAP を使ってアニメーション付きの Web ページを作る方法を学ぶワークショップです
  • スライド

2025年作成

• サイコロで学ぶスクラム開発
  • サイコロを使ってスクラム開発の基本的な流れを体験するハンズオンです
  • スライド
• 正規表現を用いたパスワード強度チェッカーを作ってみよう！
  • 正規表現を使ってパスワードの強度をチェックする機能をゼロから実装するハンズオンです
  • スライド
• ウェブコンポーネントを利用したSPAの開発手法
  • ウェブコンポーネントと呼ばれる一連の技術を活用して、効率的にウェブアプリケーションを開発する手法を学びます
• CSS Animation勉強会
  • CSSのkeyframesやtransitionを使ったアニメーション実装をハンズオン形式で学びます

2024年作成

• はじめてのFlutter
  • FlutterのWidgetについて学びながら、簡単なカウンターアプリを作成します
  • スライド
• 実践！Flutter開発 〜メモ帳編〜
  • Flutterを使用したメモ帳開発を通して、SharedPreferences や flutter_hooks について学びます
  • スライド
• JavaScript でつくる超かんたん Web アプリ入門
  • JavaScript の基本文法を学びながら「就活管理アプリ」を作成します
• はじめの一歩は時間割
  • Web技術の基礎を学びながら、ウェブコンポーネントという技術郡を利用してウェブアプリを作成します

2023年作成

• Fresh
  • Deno で実行できるSSRフレームワーク
• Deno で学ぶ TypeScript
  • 「TypeScriptは型があって便利・安全」が学べる内容
• Flask勉強会
  • Pythonのライブラリである「Flask」を利用して、WebアプリやWeb APIを作成する方法を学びます
• Flutter勉強会
  • 「Flutter」というネイティブアプリケーション開発向けのフレームワークを使って、アプリ開発を学びます

リハーサルの時間を測る

ルートの rehearsal.html で、スライドを送りながら区間ごととスライドごとの所要時間を測れます。

pnpm rehearsal 2026/board-advanced/slide.md

slide.md の隣に slide.preview.html を書き出し、リポジトリのルートを http://localhost:8000 で配信して rehearsal.html を開きます。 slide.md を保存すると左のスライドだけが再読み込みされ、表示中のページと計測はそのまま続きます。 ポートは --port で変えられます。

file:// で開くとスライドの中身を読めないため、HTTP で配信しています。

• 区間は # 見出しのスライドで区切ります。区間を開いて、スライドの行の「区切り」で足したり外したりできます
• 区間ごとに予定の分数を入れると、予定との差と累計の差が出ます
• Shift+T で開始と一時停止を切り替えます。このページにフォーカスがあるときだけ効きます
• 作業を終えたスライドは、スライドの行の「完了」か Shift+D で印を付けられます。区間の行に完了した枚数が出ます。印は「リセット」では消えません
• Cmd+F (Windows と Linux は Ctrl+F) でスライドの文字列を検索します。一致した箇所はスライドの上で青く塗られます。一覧からクリックするか、Enter で次、Shift+Enter で前の一致へ飛びます。Esc で検索を閉じます
• 発表者ビュー (p) で送っても、計測はスライドの移動に追従します
• 記録はデッキごとにブラウザの localStorage に残ります。CSV と JSON で書き出せます