📝 「HTML/CSSを始めよう」と「JavaScript を始めよう」の勉強会スライドと発表用周辺機能を追加 by rough-github · Pull Request #82 · jigintern/intern-dev-tutorial

rough-github · 2026-08-13T07:29:00Z

インターン/勉強会向けに、HTML/CSS と JavaScript の入門スライドを2セット新規追加します。
あわせて、発表練習・発表者ノート生成などの周辺ツールも同梱しています。

追加するもの

html-css-slide/ — 「HTML/CSSを始めよう」スライド一式（slide.md 1,788行 + ビルド済み slide.html、画像・GIF素材、README.md）
javascript-slide/ — 「JavaScriptを始めよう」スライド一式（slide.md 2,131行 + ビルド済み slide.html、README.md）
rehearsal/（両プロジェクト共通構成） — 発表練習・本番運用のための補助ツール群
- build-notes.mjs … 台本を各スライドの発表者ノートへ流し込む
- transcript/README.md … 読み上げ台本の生成ルール（Claudeへの依頼手順つき）
themes/jig.css — jig用のMarpカスタムテーマ（タイマー・「やってみよう」コード欄・休憩スライド等のスタイル。両プロジェクトに配置）

補足

スライドは Marp で記述。
ビルドは npx marp slide.md --html -o slide.html --allow-local-files --theme-set themes/jig.css を想定。
slide.html はビルド済み成果物としてコミット済み。
CI（gh-pages.yml）は現状これらのスライドをビルド対象に含めていません（必要なら別途追記）。

発表用の周辺機能（使い方）

commitはしていませんが手元で行える周辺機能

1. 台本を作る（rehearsal/transcript/）

slide.md を元に読み上げ台本を作り、各スライドの発表者ノートへ自動挿入できます。
本番では投影スライドの裏で台本を見ながら話せます。

slide.md から「講師の話し言葉」の台本を章ごとに生成します（00-intro.md / 01-chapter1.md / … / 99-appendix.md）。生成ルールは transcript/README.md 参照。

台本の ## 見出しは、対応スライドの見出しを一字一句コピーする（これが挿入時の紐付けキー）。
macOS の say コマンドで読み上げれば発表練習にも使えます。

2. 発表者ノートへ挿入する

node rehearsal/build-notes.mjs # slide.md + transcript/ → slide.notes.md を生成
npx marp slide.notes.md --html -o slide.notes.html --allow-local-files --theme-set themes/jig.css

見出しの一致でスライドと台本を紐付け、発表者ノート（HTMLコメント）として差し込みます。
slide.notes.html をブラウザで開き P キーで発表者ビューを開くと台本が表示されます（投影側には出ません）。
slide.notes.* は生成物のためコミット不要です。

リハーサル計測

rehearsal/bookmarklet.js は、スライドを送るだけで章ごと・スライドごとの所要時間を記録するブックマークレットです。詳細は rehearsal/README.md を参照。

rough-github · 2026-08-13T07:32:23Z

手元で slide.html を見てもらえるとよさそうです！

m-sato-310 · 2026-08-13T08:04:24Z

+/*
+ * Marp スライドのリハーサル計測ブックマークレット
+ *
+ * slide.html を開いた状態で起動すると、スライドを送るたびに滞在時間を記録する。
+ * 記録は localStorage に逐次保存するので、誤ってリロードしても続きから再開できる。
+ *
+ * キー操作
+ *   Ctrl+Shift+E  記録を Markdown で書き出す (クリップボードとファイルの両方)
+ *   Ctrl+Shift+P  一時停止 / 再開 (右上のバッジをクリックしても同じ)
+ *   Ctrl+Shift+X  記録を破棄して最初から
+ */


すみません、以前自分が間違えて push したリハーサル計測用のブックマークレットなんですけど、適当な状態だったので使っていなかったら消しちゃっても良さそうです 🙏

使っていたらそのまま残しておいて大丈夫です！

承知しました！
自分も動かそうとやって見たのですが、うまくいかず...という状況でしたので削除しちゃいました🙆‍♂️

m-sato-310 · 2026-08-13T08:10:34Z

+```js
+const user = { name: 'じぐ太郎', age: 20 };
+// ドット / ブラケット記法
+console.log("user.name: "user.name;
+console.log("user[age]: "user['age']);
+// 後から追加できる
+user.hobby = '釣り';
+console.log(user);
+```


少しコードが崩れちゃっていそうです。

Suggested change

```js

const user = { name: 'じぐ太郎', age: 20 };

// ドット / ブラケット記法

console.log("user.name: "user.name;

console.log("user[age]: "user['age']);

// 後から追加できる

user.hobby = '釣り';

console.log(user);

```

```js

const user = { name: 'じぐ太郎', age: 20 };

// ドット / ブラケット記法

console.log("user.name: " + user.name);

console.log("user[age]: " + user['age']);

// 後から追加できる

user.hobby = '釣り';

console.log(user);

ありがとうございます！
確かに崩れてしまっていますね。修正しました🙆‍♂️

m-sato-310 · 2026-08-13T08:26:28Z

+    function fmt(v){
+      if (typeof v === 'string') return v;
+      if (v instanceof Error) return v.message;
+      try { return JSON.stringify(v); } catch (e) { return String(v); }
+    }


この関数の出力について調べてみました！

書いたコード出た表示期待

let x; console.log('undefined:', x) undefined: undefined: undefined

console.log('NaN:', NaN) NaN: null NaN: NaN

console.log('Infinity:', 1/0) Infinity: null Infinity: Infinity

console.log('関数:', function f(){}) 関数: 関数だと分かる表示

console.log('Map:', new Map([['a',1]])) Map: {} 中身が見える表示

console.log('Set:', new Set([1,2])) Set: {} 同上

console.log('日付:', new Date(0)) 日付: "1970-01-01T00:00:00.000Z" クォート無し

const o = {}; o.self = o; console.log('循環:', o) 循環: [object Object] やむなし

console.log({ name: 'じぐ太郎' }) {"name":"じぐ太郎"} { name: 'じぐ太郎' }

undefined が `` になったり、NaN が `null` に化けるのは避けられそうです！

Suggested change

function fmt(v){

if (typeof v === 'string') return v;

if (v instanceof Error) return v.message;

try { return JSON.stringify(v); } catch (e) { return String(v); }

}

function fmt(v){

if (typeof v === 'string') return v;

if (v instanceof Error) return v.message;

if (v === undefined || v === null) return String(v);

if (typeof v === 'function' || typeof v === 'symbol') return String(v);

if (typeof v === 'number' && !isFinite(v)) return String(v); // NaN / Infinity

try { const s = JSON.stringify(v); return s === undefined ? String(v) : s; }

catch (e) { return String(v); }

}

指摘されて気がつきました！
こちらもsuggestの通りに修正しました

m-sato-310 · 2026-08-13T08:27:40Z

+      var orig = console[k];
+      console[k] = function(){ send(k === 'log' ? 'log' : k, arguments); if (orig) try { orig.apply(console, arguments); } catch(e){} };
+    });
+    window.addEventListener('error', function(e){ send('error', [e.message]); });


エラー行出してみるのはどうでしょう

Suggested change

window.addEventListener('error', function(e){ send('error', [e.message]); });

window.addEventListener('error', function(e){

send('error', [e.message + (e.lineno ? ' (' + (e.lineno - 1) + ' 行目)' : '')]);

});

ありがとうございます！
良さそうに思って修正しようとしたのですが、e.linenoが素直にPlaygroundのエラー行を表す訳でないようで、
Playground内のエラーの行数と揃えるようにするには複雑になりそうなので、スルーとしたいです 🙏

修正前はPlaygroundでconsole.log(undefined)とすると、空白の文字が表示されていた

seri-jig · 2026-08-14T07:50:02Z

もしかしたら、スライドを前で表示すると、通常の文字が小さいかもと思いました。

手元でも見ることになるので、意外と大丈夫説はあるけど。

seri-jig · 2026-08-14T07:59:49Z

+
+<div class="syntax">
+
+`h1` = **セレクタ**（どの要素か）、`color` = **プロパティ**（何を）、`red` = **値**（どうする）。


例が出てこないので、急にh1とか出てきた！みたいな印象を受けました。

次のページで、すぐ出てくるものの、このページにもある方が親切かもと思いました。

確かにいきなり感がありますね。
こちら、「今回学習する内容一覧」のスライドを前に挟むようにしました！

seri-jig · 2026-08-14T08:01:44Z

+</div>
+<div class="split-side">
+<svg viewBox="0 0 330 200" style="width: 100%; height: auto;" font-family="ui-sans-serif, system-ui, sans-serif" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <marker id="ax" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#455a64"/></marker>
+    <marker id="axp" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#e91e63"/></marker>
+  </defs>
+  <text x="74" y="16" font-size="11" fill="#607d8b">display: flex（親）</text>
+  <rect x="70" y="22" width="250" height="80" rx="6" fill="none" stroke="#90a4ae" stroke-dasharray="5 4"/>
+  <rect x="82" y="36" width="64" height="52" rx="4" fill="#90caf9"/><text x="114" y="67" font-size="13" text-anchor="middle" fill="#0d47a1">子</text>
+  <rect x="158" y="36" width="64" height="52" rx="4" fill="#90caf9"/><text x="190" y="67" font-size="13" text-anchor="middle" fill="#0d47a1">子</text>
+  <rect x="234" y="36" width="64" height="52" rx="4" fill="#90caf9"/><text x="266" y="67" font-size="13" text-anchor="middle" fill="#0d47a1">子</text>
+  <line x1="70" y1="120" x2="320" y2="120" stroke="#455a64" stroke-width="2" marker-end="url(#ax)"/>
+  <text x="195" y="140" font-size="13" text-anchor="middle" fill="#455a64">主軸（子が並ぶ向き）</text>
+  <line x1="42" y1="102" x2="42" y2="22" stroke="#e91e63" stroke-width="2" marker-end="url(#axp)"/>
+  <text x="42" y="120" font-size="12" text-anchor="middle" fill="#e91e63">交差軸</text>
+</svg>
+</div>
+</div>


（Flexboxのことがわかっていないうえでの発言ですが、）
大体webページは下に伸びるので、交差軸は下向き↓の矢印のほうが親切かも？と思いました。

こちらデフォルトが横向きということなので、スルーとしたいです 🙏

seri-jig · 2026-08-14T08:04:01Z

+## 1-3. 変数と定数
+
+値に名前をつけて保存する箱が**変数**です。`let` で宣言し、`=` で値を割り当てます。あとから
+別の値に**入れ替え（再代入）**できます。
+
+一方、**定数**は入れ替えできない箱。`const` で宣言し、再代入しようとするとエラーになります。
+
+<div class="syntax">


太字が聞いていなそうです🙏

seri-jig · 2026-08-14T08:06:54Z

+## 3-6. forEach で一つずつ
+
+配列の各要素を順に処理したいときは **`forEach`** が読みやすいです。
+
+各要素を受け取る**関数（コールバック）**を渡すと、要素の数だけ順に呼ばれます。
+index を気にせず書けるのが利点です。
+
+<div class="syntax">
+


同じく、太字がダメそうです🙏

seri-jig · 2026-08-14T08:08:03Z

+## 4-6. クラス
+
+同じ構造のデータと操作をまとめる**設計図**が**クラス**です。`class` で定義し、`new` で
+**実体（インスタンス）**を作ります。
+
+プロパティ（データ）とメソッド（関数）を持ち、メソッド内の `this` はそのインスタンス自身を指します。
+


同じく太字がダメそう。（全く、日本語くんったらぁ。）

seri-jig · 2026-08-14T08:10:28Z

やはり、自分の頭を使う内容を入れないと眠くなりそうと思いました。

各休憩前に「それまでのスライド内容をフル活用するような練習問題」があるとよい？

seri-jig · 2026-08-14T08:11:09Z

ほかは良さそうに思います！

スライド上で、「動作確認できる！」スタイルになっており、めっちゃ感動しました！

rough-github · 2026-08-14T10:30:15Z

強調表示が崩れている部分も修正しました

fujii added 3 commits August 13, 2026 15:55

📝 「HTML/CSSを始めよう」の勉強会スライドと発表用周辺機能を追加

7440f3a

📝 「JavaScript を始めよう」の勉強会スライドと発表用周辺機能を追加

f15eb38

🙈 テーマファイルを追加

d825f2d

m-sato-310 reviewed Aug 13, 2026

View reviewed changes

fujii added 5 commits August 14, 2026 13:16

🚿 リハーサル計測用のブックマークレット周りの処理を削除

2f24b28

🚑 コードが崩れてしまっている部分を修正

6171c3e

📝 ビルドコマンドを修正

34309a8

📝 undefinedやnullなどが文字列として出力されるように修正

78aadd8

修正前はPlaygroundでconsole.log(undefined)とすると、空白の文字が表示されていた

📝 スライドを再度ビルド

fb7880e

seri-jig reviewed Aug 14, 2026

View reviewed changes

fujii added 7 commits August 14, 2026 18:25

📝 文字サイズをもう少し大きく

27e54f8

📝 文言を調整

04fee02

📝 Playgroundのサイズを小さくするように

f7a2ca1

📝 見切れていたので2カラム表示に修正

c1486c3

📝 「この章で扱うスタイル」のスライドを追加

1ba673f

📝 強調表示ができなかったのを修正

eb807f0

📝 再度スライドをビルド

66fd96e

書いたコード	出た表示	期待
`let x; console.log('undefined:', x)`	`undefined:`	`undefined: undefined`
`console.log('NaN:', NaN)`	`NaN: null`	`NaN: NaN`
`console.log('Infinity:', 1/0)`	`Infinity: null`	`Infinity: Infinity`
`console.log('関数:', function f(){})`	`関数:`	関数だと分かる表示
`console.log('Map:', new Map([['a',1]]))`	`Map: {}`	中身が見える表示
`console.log('Set:', new Set([1,2]))`	`Set: {}`	同上
`console.log('日付:', new Date(0))`	`日付: "1970-01-01T00:00:00.000Z"`	クォート無し
`const o = {}; o.self = o; console.log('循環:', o)`	`循環: [object Object]`	やむなし
`console.log({ name: 'じぐ太郎' })`	`{"name":"じぐ太郎"}`	`{ name: 'じぐ太郎' }`


		<div class="syntax">

		`h1` = セレクタ（どの要素か）、`color` = プロパティ（何を）、`red` = 値（どうする）。

Uh oh!

Conversation

rough-github commented Aug 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

追加するもの

補足

発表用の周辺機能（使い方）

1. 台本を作る（rehearsal/transcript/）

2. 発表者ノートへ挿入する

リハーサル計測

Uh oh!

rough-github commented Aug 13, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

seri-jig commented Aug 14, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

seri-jig commented Aug 14, 2026

Uh oh!

seri-jig commented Aug 14, 2026

Uh oh!

rough-github commented Aug 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rough-github commented Aug 13, 2026 •

edited

Loading