Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
REALITY コマンド作成チュートリアル
Search
にしうり らく
April 27, 2025
Programming
0
140
REALITY コマンド作成チュートリアル
ハムチレクチャー - HTML 初⼼者向け解説資料
にしうり らく
April 27, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
360
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
440
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
270
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
4
780
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
490
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
730
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
12k
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
160
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
760
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Why Our Code Smells
bkeepers
PRO
336
57k
Rails Girls Zürich Keynote
gr2m
95
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
GraphQLとの向き合い方2022年版
quramy
49
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
ハムチレクチャー - 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!