ハムチレクチャー - HTML 初心者向け解説資料 REALITY コマンド作成チュートリアル 

0. うぇぶぺーじとは HTML （えいちてぃーえむえる） CSS （しーえすえす） JavaScript （じゃばすくりぷと） の 3 つであーだこーだするやつ 

1-1. HTML ウェブページの土台、骨組みを作る言語だぴょん 家で言ったら柱とか壁みたいなもん。 : 「ここからここまでがウェブページだよ！」って宣言する親玉 : ページの設定とか、裏方さん。表には出ないけど超重要 : ユーザーが実際に見る画面の中身！主役級！ 

1-2. CSS ！ CSS (Cascading Style Sheets) はウェブページの見た目を担当するぴょん HTML が骨組みなら、CSS は服やメイクのようなもの。文字の色、大きさ、背 景、配置などを指定できる h1 { /* セレクタ: どの要素にスタイルを適用するか */ color: blue; /* プロパティ: 何を */ } /* classセレクタ: 特定のクラスを持つ要素 */ .important-text { font-weight: bold; } の中に書くか にかくか、別の .css ファイルを作るのが普通 

1-2. JavaScript ウェブページに「動き」を与える魔法の呪文、それが JavaScript だぴょん！ HTML ( 骨) と CSS ( 見た目) だけじゃできない、あんなことやこんなことを実現！ 例えば… ボタンを押したら「こんにちは！」って挨拶させたり 画像がシュッと出てきたり、クルクル回ったり ユーザーが何か入力したら、それに合わせて表示を変えたり // JavaScriptのこーーーーど function greetMe() { alert('やあ！JavaScriptの世界へようこそ！ '); } greetMe(); // この呪文を唱えると... ポップアップが出る！ 

2. セクション 1: Hello Hamuchi

No.1 Hello Hamuchi

出す 問題！ 説明： ボタンをクリックでコンソール（F12 で出すでばっぐつーる）にメッセージ表示 document.getElementById('hamu-button-01') : ID で要素をとる addEventListener('click', ...) : ボタンがクリックされるのを待ち構える 

3-2. Hello Hamuchi 問題 function onClickHamuchi01() { // ここの処理が問題！ } // ボタンを取ってきて const hamuButton01 = document.getElementById('hamu-button-01'); // ボタンがクリックされたら onClickHamuchi01 を発動するように設定！ hamuButton01.addEventListener('click', onClickHamuchi01); ミッション： 上のコードのコメント部分 ( // ここに... ) に、コンソールにメッセージを出す JavaScript のコードを書こう！ 正しく書ければ、ボタンを押すと開発者ツールにメッセージが出るはず！ 

3-1. セクション 2: 簡単な計算

No.2 簡単な計算

計算開始 問題！ 説明： コンピューター得意の計算をやらせてみよう！ 足し算 (+), 引き算 (-), 掛け算 (*), 割り算 (/) を使ってみるよ。 ボタンを押したら、 「8686 × 8686 」の答えをコンソールに出してみよう！ 暗算禁 止！ 

3-2. 簡単な計算 問題 function onClickHamuchi02() { // ここの処理が問題！ } // ボタンを探してきて... const hamuButton02 = document.getElementById('hamu-button-02'); // クリックされたら計算を発動！ hamuButton02.addEventListener('click', onClickHamuchi02); ミッション： 上のコードのコメント部分 ( // ここに... ) に、計算してコンソールに表示する コードを書こう！ 掛け算は * を使う 

4-1. セクション 3: HTML を操作する

No.3 HTMLを操作する

消える 問題！ ボタンクリックで画像の表示/ 非表示を切り替え isVisible 変数で状態管理 ボタンテキストも状態に応じて変化 CSS アニメーションでスケールイン/ アウト 

4-2. HTML を操作する 問題 let isVisible = true; // 今、画像が見えてる？ function onClickHamuchi03() { const image = document.getElementById('image'); // 画像を探す const button = document.getElementById('hamu-button-03'); // ボタンを探す if (isVisible) { image.className = 'w-[300px] animate-scale-out-center'; // アニメーション button.innerHTML = // 問題1！; isVisible = // 問題2！; } else { image.className = 'w-[300px] animate-scale-in-center'; // アニメーション button.innerHTML = // 問題3！; isVisible = // 問題4！; } }; const hamuButton03 = document.getElementById('hamu-button-03'); hamuButton03.addEventListener('click', onClickHamuchi03); 

5-1. セクション 4: コマンドを実装する

No.4 コマンドを実装する

実行する 問題！ ミッション： テキスト入力とボタンでコマンド実行 /janken コマンドでランダムなじゃんけん結果を表示 未知のコマンドはエラー表示 

5-2. コマンドを実装する 問題 const onClickHamuchi04 = () => { const input = document.getElementById('input-command'); const button = document.getElementById('hamu-button-04'); const command = input.value; const result = document.getElementById('janken-result-text'); const random = Math.floor(Math.random() * 3); const janken = ['問題1！', '問題2！', '問題3！']; if (条件！問題4) { result.innerHTML = // 難問 ; result.style.color = 'initial'; } else { result.innerHTML = 'そんなコマンドないよ！ (`/janken` って入れてみて)'; result.style.color = 'red'; } }; // ボタンを探してきて... const hamuButton04 = document.getElementById('hamu-button-04'); // クリックされたら、コマンド実行の魔法を発動！ hamuButton04.addEventListener('click', onClickHamuchi04); 

まとめ このスライドで、ウェブページの基本がなんとなくわかったかな？ HTML で骨組みを作り、CSS で飾り付け、JavaScript で動きをつける！ この 3 つ がキホン！ 各セクションの問題をクリアすれば、君も立派なウェブ魔法使い見習いだ！ どんどん試して、壊して、学んでいこう！ Let's Enjoy Hacking!