REALITY コマンド作成チュートリアル

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

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

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

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

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

2. セクション 1: Hello Hamuchi <section> <h2 class="...">No.1 Hello Hamuchi</h2>
<button id="hamu-button-01" class="...">出す</button> <script> 問題！ </script> </section> 説明：ボタンをクリックでコンソール（F12 で出すでばっぐつーる）にメッセージ表示 document.getElementById('hamu-button-01') : ID で要素をとる addEventListener('click', ...) : ボタンがクリックされるのを待ち構える

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

3-1. セクション 2: 簡単な計算 <section> <h2 class="...">No.2 簡単な計算</h2> <button id="hamu-button-02"
class="...">計算開始</button> <script> 問題！ </script> </section> 説明：コンピューター得意の計算をやらせてみよう！足し算 (+), 引き算 (-), 掛け算 (*), 割り算 (/) を使ってみるよ。ボタンを押したら、「8686 × 8686 」の答えをコンソールに出してみよう！暗算禁止！

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

4-1. セクション 3: HTML を操作する <section> <h2 class="...">No.3 HTMLを操作する</h2> <img
id="image" src="/600.png" alt="ハムチ" class="..." /> <button id="hamu-button-03" class="...">消える</button> <script> 問題！ </script> </section> ボタンクリックで画像の表示/ 非表示を切り替え isVisible 変数で状態管理ボタンテキストも状態に応じて変化 CSS アニメーションでスケールイン/ アウト

4-2. HTML を操作する問題 <script> 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); </script>

5-1. セクション 4: コマンドを実装する <section> <h2 class="...">No.4 コマンドを実装する</h2> <div id="janken-result">結果：<span
id="janken-result-text"></span></div> <input id="input-command" placeholder="..." /> <button id="hamu-button-04" class="...">実行する</button> <script> 問題！ </script> </section> ミッション：テキスト入力とボタンでコマンド実行 /janken コマンドでランダムなじゃんけん結果を表示未知のコマンドはエラー表示

5-2. コマンドを実装する問題 <script> 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); </script>

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

REALITY コマンド作成チュートリアル

REALITY コマンド作成チュートリアル

にしうりらく

More Decks by にしうりらく

Other Decks in Programming

Featured

Transcript

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

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

1-1. HTML ウェブページの土台、骨組みを作る言語だぴょん家で言ったら柱とか壁みたいなもん。 <html lang="ja"> <head>

1-2. CSS ！ CSS (Cascading Style Sheets) はウェブページの見た目を担当するぴょん HTML が骨組みなら、CSS

1-2. JavaScript ウェブページに「動き」を与える魔法の呪文、それが JavaScript だぴょん！ HTML ( 骨) と CSS

2. セクション 1: Hello Hamuchi <section> <h2 class="...">No.1 Hello Hamuchi</h2>

3-2. Hello Hamuchi 問題 <script> function onClickHamuchi01() { // ここの処理が問題！

3-1. セクション 2: 簡単な計算 <section> <h2 class="...">No.2 簡単な計算</h2> <button id="hamu-button-02"

3-2. 簡単な計算問題 <script> function onClickHamuchi02() { // ここの処理が問題！ }

4-1. セクション 3: HTML を操作する <section> <h2 class="...">No.3 HTMLを操作する</h2> <img

4-2. HTML を操作する問題 <script> let isVisible = true; //

5-1. セクション 4: コマンドを実装する <section> <h2 class="...">No.4 コマンドを実装する</h2> <div id="janken-result">結果：<span

5-2. コマンドを実装する問題 <script> const onClickHamuchi04 = () => {

まとめこのスライドで、ウェブページの基本がなんとなくわかったかな？ HTML で骨組みを作り、CSS で飾り付け、JavaScript で動きをつける！この 3 つがキホン！

REALITY コマンド作成チュートリアル

REALITY コマンド作成チュートリアル

More Decks by にしうり らく

Other Decks in Programming

Featured

Transcript

More Decks by にしうりらく