DaehunGwak
4 years ago
commit
e325eff1de
@ -1,18 +0,0 @@
|
|||||||
*Selesaikan kuis ini bersama dengan kiriman Anda dengan memeriksa satu jawaban per pertanyaan.*
|
|
||||||
|
|
||||||
1. Bahasa apa yang kemungkinan besar akan Anda gunakan untuk membuat situs web?
|
|
||||||
|
|
||||||
- [ ] Machine Code (Kode Mesin)
|
|
||||||
- [ ] JavaScript
|
|
||||||
- [ ] Bash
|
|
||||||
|
|
||||||
2. Lingkungan pengembangan unik untuk setiap pengembang
|
|
||||||
|
|
||||||
- [ ] Benar
|
|
||||||
- [ ] Salah
|
|
||||||
|
|
||||||
3. Apa yang akan dilakukan pengembang untuk memperbaiki kode buggy (mudah rusak)?
|
|
||||||
|
|
||||||
- [ ] Syntax highlighting (Penyorotan sintaks)
|
|
||||||
- [ ] Debugging
|
|
||||||
- [ ] Code formatting (Pemformatan kode)
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
*Selesaikan kuis ini di kelas*
|
|
||||||
|
|
||||||
1. Sebuah program dapat dibuat tanpa pembuatnya menulis kode apapun
|
|
||||||
|
|
||||||
- [ ] Benar
|
|
||||||
- [ ] Salah
|
|
||||||
|
|
||||||
2. Bahasa tingkat rendah adalah pilihan populer untuk:
|
|
||||||
|
|
||||||
- [ ] Website
|
|
||||||
- [ ] Hardware
|
|
||||||
- [ ] Perangkat lunak permainan video
|
|
||||||
|
|
||||||
3. Manakah dari alat berikut yang kemungkinan besar ada di lingkungan pengembang web?
|
|
||||||
|
|
||||||
- [ ] Hardware, like a Raspberry Pi
|
|
||||||
- [ ] Browser DevTools
|
|
||||||
- [ ] Operating system documentation
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.*
|
|
||||||
|
|
||||||
1. Tempat untuk membandingkan dan mendiskusikan perbedaan yang diperkenalkan pada cabang dengan review, komentar, tes terintegrasi, dan banyak lagi adalah:
|
|
||||||
|
|
||||||
- [ ] GitHub
|
|
||||||
- [ ] Pull Request (Tarik Permintaan)
|
|
||||||
- [ ] Feature branch (Cabang fitur)
|
|
||||||
|
|
||||||
2. Bagaimana Anda mendapatkan semua komit dari cabang remote (jarak jauh)?
|
|
||||||
|
|
||||||
- [ ] `git fetch`
|
|
||||||
- [ ] `git pull`
|
|
||||||
- [ ] `git commits -r`
|
|
||||||
|
|
||||||
3. Bagaimana Anda beralih ke sebuah cabang (branch)?
|
|
||||||
|
|
||||||
- [ ] `git switch [branch-name]`
|
|
||||||
- [ ] `git checkout [branch-name]`
|
|
||||||
- [ ] `git load [branch-name]`
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
*Selesaikan kuis ini di kelas*
|
|
||||||
|
|
||||||
1. Bagaimana Anda membuat repo Git?
|
|
||||||
|
|
||||||
- [ ] git create
|
|
||||||
- [ ] git start
|
|
||||||
- [ ] git init
|
|
||||||
|
|
||||||
2. Apa fungsi `git add`?
|
|
||||||
|
|
||||||
- [ ] Commit (menyerahkan) kode Anda
|
|
||||||
- [ ] Menambahkan file Anda ke area pementasan (staging area) untuk dilacak
|
|
||||||
- [ ] Menambahkan file Anda ke GitHub
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.*
|
|
||||||
|
|
||||||
1. Lighthouse hanya memeriksa masalah aksesibilitas
|
|
||||||
|
|
||||||
- [ ] benar
|
|
||||||
- [ ] salah
|
|
||||||
|
|
||||||
2. Palet warna aman membantu orang dengan
|
|
||||||
|
|
||||||
- [ ] buta warna
|
|
||||||
- [ ] gangguan penglihatan
|
|
||||||
- [ ] keduanya di atas
|
|
||||||
|
|
||||||
3. Tautan deskriptif sangat penting untuk situs web yang dapat diakses
|
|
||||||
|
|
||||||
- [ ] benar
|
|
||||||
- [ ] salah
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
*Selesaikan kuis ini di kelas*
|
|
||||||
|
|
||||||
1. Situs web yang dapat diakses dapat diperiksa di alat browser mana
|
|
||||||
|
|
||||||
- [ ] Lighthouse
|
|
||||||
- [ ] Deckhouse
|
|
||||||
- [ ] Cleanhouse
|
|
||||||
|
|
||||||
2. Anda memerlukan pembaca layar fisik untuk menguji aksesibilitas bagi pengguna dengan gangguan penglihatan
|
|
||||||
|
|
||||||
- [ ] benar
|
|
||||||
- [ ] salah
|
|
||||||
|
|
||||||
3. Aksesibilitas hanya penting di situs web pemerintah
|
|
||||||
|
|
||||||
- [ ] benar
|
|
||||||
- [ ] salah
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
*Complete this quiz after the lesson by checking one answer per question.*
|
|
||||||
|
|
||||||
1. Konstanta sama dengan `let` dan `var` untuk mendeklarasikan variabel kecuali
|
|
||||||
|
|
||||||
- [ ] Konstanta harus diinisialisasi
|
|
||||||
- [ ] Konstanta dapat diubah
|
|
||||||
- [ ] Konstanta dapat ditetapkan kembali
|
|
||||||
|
|
||||||
2. Numbers dan ____ adalah primitif JavaScript yang menangani data numerik
|
|
||||||
|
|
||||||
- [ ] bigint
|
|
||||||
- [ ] boolean
|
|
||||||
- [ ] star
|
|
||||||
|
|
||||||
3. String dapat berada di antara tanda kutip tunggal dan ganda
|
|
||||||
|
|
||||||
- [ ] benar
|
|
||||||
- [ ] salah
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
*Selesaikan kuis ini di kelas*
|
|
||||||
|
|
||||||
1. Boolean adalah tipe data yang dapat Anda gunakan untuk menguji panjang string
|
|
||||||
|
|
||||||
- [ ] benar
|
|
||||||
- [ ] salah
|
|
||||||
|
|
||||||
2. Berikut ini adalah operasi yang dapat Anda lakukan pada string
|
|
||||||
|
|
||||||
- [ ] concatenation
|
|
||||||
- [ ] appending
|
|
||||||
- [ ] splicing
|
|
||||||
|
|
||||||
3. `==` dan `===` dapat dipertukarkan
|
|
||||||
|
|
||||||
- [ ] benar
|
|
||||||
- [ ] salah
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.*
|
|
||||||
|
|
||||||
1. Argumen harus disediakan untuk semua parameter dalam suatu fungsi
|
|
||||||
|
|
||||||
- [ ] benar
|
|
||||||
- [ ] salah
|
|
||||||
|
|
||||||
2. Apa fungsi nilai default?
|
|
||||||
|
|
||||||
- [ ] Menetapkan nilai yang benar
|
|
||||||
- [ ] Memberikan nilai awal untuk parameter sehingga kode Anda tetap berfungsi jika Anda menghilangkan argumen untuk itu
|
|
||||||
- [ ] Tidak memiliki utilitas
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
*Selesaikan kuis ini di kelas*
|
|
||||||
|
|
||||||
1. Apa itu argumen?
|
|
||||||
|
|
||||||
- [ ] Itu adalah sesuatu yang Anda deklarasikan dalam definisi fungsi
|
|
||||||
- [ ] Itu adalah sesuatu yang Anda berikan ke suatu fungsi pada waktu pemanggilan
|
|
||||||
- [ ] Itu adalah sesuatu yang Anda miliki dengan orang yang Anda kenal
|
|
||||||
|
|
||||||
2. Benar atau salah: suatu fungsi harus mengembalikan sesuatu
|
|
||||||
|
|
||||||
- [ ] benar
|
|
||||||
- [ ] salah
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.*
|
|
||||||
|
|
||||||
1. Apa yang akan dikembalikan kode berikut: `'1' == 1`
|
|
||||||
|
|
||||||
- [ ] true
|
|
||||||
- [ ] false
|
|
||||||
|
|
||||||
2. Pilih operator yang benar untuk mengekspresikan logika _or_
|
|
||||||
|
|
||||||
- [] `a | b`
|
|
||||||
- [] `a || b`
|
|
||||||
- [] `a atau b`
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
*Selesaikan kuis ini di kelas*
|
|
||||||
|
|
||||||
1. Operator berikut `==` dipanggil
|
|
||||||
|
|
||||||
- [ ] Kesetaraan
|
|
||||||
- [ ] Kesetaraan yang ketat
|
|
||||||
- [ ] Penugasan
|
|
||||||
|
|
||||||
2. Perbandingan dalam JavaScript mengembalikan tipe apa?
|
|
||||||
|
|
||||||
- [ ] boolean
|
|
||||||
- [ ] null
|
|
||||||
- [ ] string
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.*
|
|
||||||
|
|
||||||
1. Bagian for-loop manakah yang perlu Anda modifikasi untuk menambah iterasinya sebesar 5
|
|
||||||
|
|
||||||
- [ ] kondisi
|
|
||||||
- [ ] counter
|
|
||||||
- [ ] ekspresi-iterasi
|
|
||||||
|
|
||||||
2. Apa perbedaan antara `while` dan `for-loop`
|
|
||||||
|
|
||||||
- [ ] Sebuah `for-loop` memiliki penghitung dan ekspresi-iterasi, di mana `while` hanya memiliki kondisi
|
|
||||||
- [ ] A `while` memiliki penghitung dan ekspresi-iterasi di mana `for-loop` hanya memiliki kondisi
|
|
||||||
- [ ] Mereka sama, hanya alias untuk satu sama lain
|
|
||||||
|
|
||||||
3. Diberikan kode `for (let i = 1; i <5; i ++)`, berapa banyak iterasi yang akan dilakukan?
|
|
||||||
|
|
||||||
- [ ] 5
|
|
||||||
- [ ] 4
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
*Selesaikan kuis ini di kelas*
|
|
||||||
|
|
||||||
1. Untuk merujuk ke item tertentu dalam sebuah array, Anda akan menggunakan a
|
|
||||||
|
|
||||||
- [ ] kurung siku `[]`
|
|
||||||
- [ ] indeks
|
|
||||||
- [ ] kurung kurawal `{}`
|
|
||||||
|
|
||||||
2. Bagaimana Anda mendapatkan jumlah item dalam sebuah array
|
|
||||||
|
|
||||||
- [ ] Metode `len(array)`
|
|
||||||
- [ ] Properti `size` pada array
|
|
||||||
- [ ] Properti `length` pada array
|
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
# イベント駆動型プログラミング - タイピングゲームの構築
|
||||||
|
|
||||||
|
## イントロダクション
|
||||||
|
|
||||||
|
タイピングは、開発者が最も過小評価されているスキルの一つです。頭の中からエディタに思考を素早く転送する能力は、創造性が自由に流れることを可能にします。最高の学習方法の一つは、ゲームをプレイすることです!
|
||||||
|
|
||||||
|
> ということで、タイピングゲームを作ってみましょう!
|
||||||
|
|
||||||
|
これまで培ってきた JavaScript、HTML、CSS のスキルを使ってタイピングゲームを作っていただきます。このゲームでは、プレイヤーにランダムな引用文 ([シャーロック・ホームズ](https://en.wikipedia.org/wiki/Sherlock_Holmes)の名言を使用しています) を提示し、それを正確に入力するのにどれくらいの時間がかかるかを競います。これまでに培った JavaScript、HTML、CSS のスキルを使ってタイピングゲームを作ってみましょう。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 前提条件
|
||||||
|
|
||||||
|
このレッスンでは、次のような概念に精通していることを前提としています:
|
||||||
|
|
||||||
|
- テキスト入力とボタンコントロールの作成
|
||||||
|
- CSS とクラスを使ったスタイルの設定
|
||||||
|
- JavaScript の基礎
|
||||||
|
- 配列の作成
|
||||||
|
- 乱数の生成
|
||||||
|
- 現在の時刻の取得
|
||||||
|
|
||||||
|
## レッスン
|
||||||
|
|
||||||
|
[イベント駆動型プログラミングを用いたタイピングゲームの作成](./typing-game/translations/README.ja.md)
|
||||||
|
|
||||||
|
## クレジット
|
||||||
|
|
||||||
|
Written with ♥️ by [Christopher Harrison](http://www.twitter.com/geektrainer)
|
||||||
@ -0,0 +1,337 @@
|
|||||||
|
# イベントを使ったゲームの作成
|
||||||
|
|
||||||
|
## レクチャー前クイズ
|
||||||
|
|
||||||
|
[レクチャー前クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/21)
|
||||||
|
|
||||||
|
## イベント駆動型プログラミング
|
||||||
|
|
||||||
|
ブラウザベースのアプリケーションを作成するとき、私たちは、構築したものと対話するときに使用するグラフィカル・ユーザー・インターフェース (GUI) を提供します。ブラウザと対話する最も一般的な方法は、様々な要素をクリックしたり入力したりすることです。開発者として直面する課題は、ユーザーがこれらの操作をいつ実行するかわからないことです。
|
||||||
|
|
||||||
|
[イベント駆動型プログラミング](https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E9%A7%86%E5%8B%95%E5%9E%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)は、GUIを作成するために必要なプログラミングの種類の名前です。このフレーズを少し分解すると、ここでの核となる単語は **イベント** です。[イベント](https://www.merriam-webster.com/dictionary/event)は、Merriam-Webster によると、「何かが起こる」と定義されています。これは私たちの状況を完璧に説明しています。何かが起こりそうで、それに対応してコードを実行したいのですが、それがいつ行われるかはわかりません。
|
||||||
|
|
||||||
|
実行したいコードの節をマークする方法は、関数を作成することです。[手続き型プログラミング](https://ja.wikipedia.org/wiki/%E6%89%8B%E7%B6%9A%E3%81%8D%E5%9E%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)を考えると、関数は決まった順番で呼び出されます。これはイベント駆動型プログラミングでも同じことが言えそうです。違いは、関数が**どのように**呼ばれるかということです。
|
||||||
|
|
||||||
|
イベント (ボタンクリックやタイピングなど) を処理するために、**イベントリスナー** を登録します。イベントリスナーとは、イベントが発生するのを待ち受けて、それに応じて実行する関数のことです。イベントリスナーは、UI を更新したり、サーバーへの呼び出しを行ったり、ユーザーのアクションに反応して実行することができます。[addEventListener](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener) を使用してイベントリスナーを追加し、実行する関数を提供します。
|
||||||
|
|
||||||
|
> **注:** イベントリスナーを作成する方法は数多くあります。匿名の関数を使うこともできますし、名前付きの関数を作ることもできます。`click` プロパティを設定したり、`addEventListener` を使用したりと、様々なショートカットを使用することができます。今回の演習では `addEventLister` と匿名関数に焦点を当てます。また、`addEventListener` はすべてのイベントに対して動作し、イベント名をパラメータとして指定できるので、最も柔軟性があります。
|
||||||
|
|
||||||
|
### 共通イベント
|
||||||
|
|
||||||
|
アプリケーションを作成するときに聞くことができる[多数のイベント](https://developer.mozilla.org/ja/docs/Web/Events)があります。基本的に、ユーザーがページ上で何かをするとイベントが発生しますが、これはプレイヤーがあなたの意図した経験を得られるようにするうえで大きな力となります。幸いなことに、通常はほんの一握りのイベントしか必要ありません。ここでは、(ゲームを作成する際に使用する 2 つのイベントを含む) いくつかの一般的なイベントを紹介します:
|
||||||
|
|
||||||
|
- [click](https://developer.mozilla.org/ja/docs/Web/API/Element/click_event): ユーザーが何かをクリックした場合、通常はボタンやハイパーリンクをクリックします
|
||||||
|
- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): ユーザーがマウスの右ボタンをクリックした場合
|
||||||
|
- [select](https://developer.mozilla.org/ja/docs/Web/API/Element/select_event): ユーザーがテキストをハイライトした場合
|
||||||
|
- [input](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/input_event): ユーザーが何かテキストを入力した場合
|
||||||
|
|
||||||
|
## ゲームの作成
|
||||||
|
|
||||||
|
私たちは、JavaScript でイベントがどのように機能するかを探求するゲームを作成する予定です。私たちのゲームはプレイヤーのタイピングスキルをテストしますが、これはすべての開発者が持つべき最も過小評価されているスキルの一つです。私たちは皆、タイピングの練習をするべきです! ゲームの一般的な流れは以下のようになります。
|
||||||
|
|
||||||
|
- プレイヤーがスタートボタンをクリックすると、入力する名言が表示されます
|
||||||
|
- プレイヤーは、テキストボックスにできるだけ早く名言を入力します
|
||||||
|
- 各単語が完成すると、次の単語が強調表示されます
|
||||||
|
- プレイヤーにタイプミスがあった場合、テキストボックスが赤に更新されます
|
||||||
|
- 名言が完了すると、経過時間とともに成功メッセージが表示されます
|
||||||
|
|
||||||
|
ゲームを作ってイベントを覚えましょう!
|
||||||
|
|
||||||
|
### ファイル構造
|
||||||
|
|
||||||
|
**index.html**、**script.js**、**style.css** の 3 つのファイルが必要です。まずはこれらを設定して、生活を少し楽にしていきましょう。
|
||||||
|
|
||||||
|
- コンソールまたはターミナルウィンドウを開き、以下のコマンドを実行して、作業用の新しいフォルダを作成します
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Linux または macOS
|
||||||
|
mkdir typing-game && cd typing-game
|
||||||
|
|
||||||
|
# Windows
|
||||||
|
md typing-game && cd typing game
|
||||||
|
```
|
||||||
|
|
||||||
|
- Visual Studio Code を開きます
|
||||||
|
|
||||||
|
```bash
|
||||||
|
code .
|
||||||
|
```
|
||||||
|
|
||||||
|
- Visual Studio Code のフォルダに以下の名前で3つのファイルを追加します
|
||||||
|
- index.html
|
||||||
|
- script.js
|
||||||
|
- style.css
|
||||||
|
|
||||||
|
## ユーザーインターフェースの作成
|
||||||
|
|
||||||
|
要件を探ってみると、HTML ページには一握りの要素が必要になることがわかります。これはレシピのようなもので、いくつかの材料が必要です。
|
||||||
|
|
||||||
|
- ユーザーが入力するための名言を表示する場所
|
||||||
|
- 成功メッセージのようなメッセージを表示する場所
|
||||||
|
- 入力用のテキストボックス
|
||||||
|
- スタートボタン
|
||||||
|
|
||||||
|
これらのファイルにはそれぞれ ID が必要なので、JavaScript でそれらを扱うことができます。また、これから作成する CSS と JavaScript ファイルへの参照を追加します。
|
||||||
|
|
||||||
|
**index.html** という名前の新しいファイルを作成します。以下の HTML を追加します。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- index.html の中身 -->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>タイピングゲーム</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>タイピングゲーム!</h1>
|
||||||
|
<p>シャーロック・ホームズの名言を使ってタイピングの練習をしましょう。**スタート** をクリックしてください。</p>
|
||||||
|
<p id="quote"></p> <!-- これで名言が表示されます。 -->
|
||||||
|
<p id="message"></p> <!-- これは、すべてのステータスメッセージを表示します。 -->
|
||||||
|
<div>
|
||||||
|
<input type="text" aria-label="current word" id="typed-value" /> <!-- 入力用のテキストボックス -->
|
||||||
|
<button type="button" id="start">スタート</button> <!-- ゲームを開始します -->
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
### アプリケーションの起動
|
||||||
|
|
||||||
|
物事がどのように見えるかを確認するためには、常に反復的に開発するのがベストです。アプリケーションを起動してみましょう。Visual Studio Code には [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) と呼ばれる素晴らしい拡張機能があり、アプリケーションをローカルにホストし、保存するたびにブラウザを更新します。
|
||||||
|
|
||||||
|
- リンクを辿り、**Install** をクリックして、[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) をインストールします
|
||||||
|
- ブラウザで Visual Studio Code を開き、Visual Studioコードでインストールを実行するように促されます
|
||||||
|
- プロンプトが表示されたら Visual Studio Code を再起動します
|
||||||
|
- インストールしたら、Visual Studio Code で Ctl-Shift-P (または Cmd-Shift-P) をクリックして、コマンドパレットを開きます
|
||||||
|
- **Live Server: Open with Live Server** と入力します
|
||||||
|
- Live Server がアプリケーションのホスティングを開始します
|
||||||
|
- ブラウザを開き、**https://localhost:5500** に移動します
|
||||||
|
- これで作成したページが表示されるはずです!
|
||||||
|
|
||||||
|
機能を追加してみましょう。
|
||||||
|
|
||||||
|
## CSS の追加
|
||||||
|
|
||||||
|
HTML を作成したので、コアスタイリング用の CSS を追加してみましょう。プレイヤーが入力すべき単語をハイライトし、入力した内容が間違っている場合はテキストボックスに色をつけます。これには 2 つのクラスを使用します。
|
||||||
|
|
||||||
|
**style.css** という名前のファイルを新規作成し、以下の構文を追加します。
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* style.css の中身 */
|
||||||
|
.highlight {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
background-color: lightcoral;
|
||||||
|
border: red;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ CSS に関しては、あなたが好きなようにページをレイアウトすることができます。少し時間をかけて、より魅力的なページにしてみましょう。
|
||||||
|
|
||||||
|
- 別のフォントを選択します
|
||||||
|
- ヘッダーに色をつけます
|
||||||
|
- アイテムのサイズを変更します
|
||||||
|
|
||||||
|
## JavaScript
|
||||||
|
|
||||||
|
UI を作成したので、ロジックを提供する JavaScript に注目してみましょう。これをいくつかのステップに分けて説明します。
|
||||||
|
|
||||||
|
- [定数の作成](#定数の追加)
|
||||||
|
- [ゲームを開始するイベントリスナー](#開始ロジックの追加)
|
||||||
|
- [タイピングへのイベントリスナー](#タイピングロジックの追加)
|
||||||
|
|
||||||
|
しかし、まず、**script.js** という名前のファイルを新規作成します。
|
||||||
|
|
||||||
|
### 定数の追加
|
||||||
|
|
||||||
|
プログラミングの生活を少しでも楽にするために、いくつかのアイテムが必要になります。繰り返しになりますが、レシピに似ていますが、必要なものは以下の通りです。
|
||||||
|
|
||||||
|
- すべての名言のリストを含む配列
|
||||||
|
- 現在の名言のすべての単語を格納する空の配列
|
||||||
|
- プレイヤーが現在入力している単語のインデックスを格納するスペース
|
||||||
|
- プレイヤーがスタートをクリックした時間
|
||||||
|
|
||||||
|
UI 要素への参照も欲しいところです。
|
||||||
|
|
||||||
|
- テキストボックス (**typed-value**)
|
||||||
|
- 名言の表示 (**quote**)
|
||||||
|
- メッセージ (**message**)
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// script.js の中身
|
||||||
|
// すべての名言
|
||||||
|
const quotes = [
|
||||||
|
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
|
||||||
|
'There is nothing more deceptive than an obvious fact.',
|
||||||
|
'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
|
||||||
|
'I never make exceptions. An exception disproves the rule.',
|
||||||
|
'What one man can invent another can discover.',
|
||||||
|
'Nothing clears up a case so much as stating it to another person.',
|
||||||
|
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
|
||||||
|
];
|
||||||
|
// 単語のリストと、プレイヤーが現在入力している単語のインデックスを格納します。
|
||||||
|
let words = [];
|
||||||
|
let wordIndex = 0;
|
||||||
|
// 開始時刻
|
||||||
|
let startTime = Date.now();
|
||||||
|
// ページ構成要素
|
||||||
|
const quoteElement = document.getElementById('quote');
|
||||||
|
const messageElement = document.getElementById('message');
|
||||||
|
const typedValueElement = document.getElementById('typed-value');
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ 先に行き、あなたのゲームに多くの名言を追加します。
|
||||||
|
|
||||||
|
> **注:** `document.getElementById`を使用することで、コード内で必要なときにいつでも要素を取得することができます。これらの要素を定期的に参照することになるので、定数を使用して文字列リテラルのタイプミスを回避します。[Vue.js](https://jp.vuejs.org/) や [React](https://ja.reactjs.org/) などのフレームワークは、コードを集中管理するのに役立ちます。
|
||||||
|
|
||||||
|
1分ほどかけて、`const`, `let`, `var` の使い方のビデオを見てみましょう。
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
|
||||||
|
|
||||||
|
### 開始ロジックの追加
|
||||||
|
|
||||||
|
ゲームを始めるには、プレイヤーはスタートをクリックします。もちろん、プレイヤーがいつスタートボタンをクリックするかはわかりません。ここで[イベントリスナー](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)の出番です。イベントリスナーを使うと、何か (イベント) が発生するのを待ち受けて、それに応じてコードを実行することができます。この例では、ユーザーがスタートをクリックしたときにコードを実行したいと思います。
|
||||||
|
|
||||||
|
ユーザーが **スタート** をクリックしたときに、名言を選択し、ユーザーインターフェースを設定し、現在の単語とタイミングのトラッキングを設定する必要があります。以下は追加する必要のある JavaScript です。スクリプトブロックの後で説明します。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// script.js の最後の方に
|
||||||
|
document.getElementById('start').addEventListener('click', () => {
|
||||||
|
// 名言の取得
|
||||||
|
const quoteIndex = Math.floor(Math.random() * quotes.length);
|
||||||
|
const quote = quotes[quoteIndex];
|
||||||
|
// 名言を言葉の配列に入れる
|
||||||
|
words = quote.split(' ');
|
||||||
|
// トラッキング用の単語インデックスをリセットする
|
||||||
|
wordIndex = 0;
|
||||||
|
|
||||||
|
// UI の更新
|
||||||
|
// span 要素の配列を作成し、クラスを設定できるようにします。
|
||||||
|
const spanWords = words.map(function(word) { return `<span>${word} </span>`});
|
||||||
|
// 文字列に変換して、名言を表示する innerHTML として設定します。
|
||||||
|
quoteElement.innerHTML = spanWords.join('');
|
||||||
|
// 最初の単語を強調表示します。
|
||||||
|
quoteElement.childNodes[0].className = 'highlight';
|
||||||
|
// 前のメッセージをクリアします。
|
||||||
|
messageElement.innerText = '';
|
||||||
|
|
||||||
|
// テキストボックスの設定
|
||||||
|
// テキストボックスをクリアします。
|
||||||
|
typedValueElement.value = '';
|
||||||
|
// フォーカスを合わせます。
|
||||||
|
typedValueElement.focus();
|
||||||
|
// イベントハンドラを設定します。
|
||||||
|
|
||||||
|
// タイマーを開始します。
|
||||||
|
startTime = new Date().getTime();
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
コードを分解してみましょう!
|
||||||
|
|
||||||
|
- 単語のトラッキングを設定します
|
||||||
|
- [Math.floor](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) と [Math.random](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random) を使うと、`quotes` 配列から名言をランダムに選択することができます
|
||||||
|
- `quote` を `words` の配列に変換することで、プレイヤーが現在入力している単語を追跡することができます
|
||||||
|
- `wordIndex` は 0 に設定されます。プレイヤーは最初の単語から始めます
|
||||||
|
- UI を設定します
|
||||||
|
- `spanWords` の配列を作成し、その中に `span` 要素内の各単語を格納します
|
||||||
|
- これにより、ディスプレイ上の単語を強調表示することができます
|
||||||
|
- 配列を `join` して文字列を作成し、これを用いて `quoteElement` の `innerHTML` を更新することができます
|
||||||
|
- これにより、プレイヤーに名言が表示されます
|
||||||
|
- 最初の `span` 要素の `className` を `highlight` に設定し、黄色で強調表示します
|
||||||
|
- `innerText` を `''` に設定することで `messageElement` をクリーンにします
|
||||||
|
- テキストボックスを設定します
|
||||||
|
- 現在の `typedValueElement` の `value` をクリアします
|
||||||
|
- `focus` を `typedValueElement` に設定します
|
||||||
|
- `getTime` を呼び出してタイマーを起動します
|
||||||
|
|
||||||
|
### タイピングロジックの追加
|
||||||
|
|
||||||
|
プレイヤーが入力すると `input` イベントが発生します。このイベントリスナーは、プレイヤーが単語を正しく入力しているかどうかをチェックし、ゲームの現在の状態を処理します。**script.js** に戻り、最後に以下のコードを追加します。この後に分解していきます。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// script.js の最後の方に
|
||||||
|
typedValueElement.addEventListener('input', () => {
|
||||||
|
// 現在の単語を取得します
|
||||||
|
const currentWord = words[wordIndex];
|
||||||
|
// 現在の値を取得します
|
||||||
|
const typedValue = typedValueElement.value;
|
||||||
|
|
||||||
|
if (typedValue === currentWord && wordIndex === words.length - 1) {
|
||||||
|
// 文の終了
|
||||||
|
// 成功を表示します
|
||||||
|
const elapsedTime = new Date().getTime() - startTime;
|
||||||
|
const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
|
||||||
|
messageElement.innerText = message;
|
||||||
|
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
|
||||||
|
// 単語の終了
|
||||||
|
// 新しい単語用に 'typedValueElement' をクリアします
|
||||||
|
typedValueElement.value = '';
|
||||||
|
// 次の単語に移ります
|
||||||
|
wordIndex++;
|
||||||
|
// 名言内のすべての要素のクラス名をリセットします
|
||||||
|
for (const wordElement of quoteElement.childNodes) {
|
||||||
|
wordElement.className = '';
|
||||||
|
}
|
||||||
|
// 新しい単語を強調表示します
|
||||||
|
quoteElement.childNodes[wordIndex].className = 'highlight';
|
||||||
|
} else if (currentWord.startsWith(typedValue)) {
|
||||||
|
// 現在正しく入力されている状態
|
||||||
|
// 次の単語を強調表示します
|
||||||
|
typedValueElement.className = '';
|
||||||
|
} else {
|
||||||
|
// エラー状態
|
||||||
|
typedValueElement.className = 'error';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
コードを分解してみましょう! まず、現在の単語とプレイヤーがこれまでに入力した値を取得します。次にウォーターフォールロジックがあり、ここでは引用が完全であるかどうか、単語が完全であるかどうか、単語が正しいかどうか、(最後に) エラーがあるかどうかをチェックします。
|
||||||
|
|
||||||
|
- 名言が完成しており、`typepedValue` が `currentWord` と等しく、`wordIndex` が `words` の `length` よりも 1 つ小さい値であることを示している場合
|
||||||
|
- 現在の時刻から `startTime` を引くことで `elapsedTime` を計算します
|
||||||
|
- `elapsedTime` を 1,000 で割り、ミリ秒から秒に変換します
|
||||||
|
- 成功メッセージを表示します
|
||||||
|
- 単語は完成しており、`typedValue` がスペース (単語の終わり) で終わり、`typedValue` が `currentWord` と同じであることを示している場合
|
||||||
|
- 次の単語が入力されるように `typedElement` の `value` を `''` に設定します
|
||||||
|
- 次の単語に移動するために `wordIndex` をインクリメントします
|
||||||
|
- `quoteElement` のすべての `childNodes` をループして `className` を `''` に設定し、デフォルトの表示に戻します
|
||||||
|
- 現在の単語の `className` を `highlight` に設定して、それを次のタイプの単語としてフラグを立てます
|
||||||
|
- 単語は現在 (完全ではないが) 正しく入力されており、`typedValue` で始まる `currentWord` で示される場合
|
||||||
|
- `className` をクリアすることで `typedValueElement` がデフォルトで表示されるようにします
|
||||||
|
- ここまで来たら、エラーが発生しています
|
||||||
|
- `typedValueElement` の `className` を `error` に設定します
|
||||||
|
|
||||||
|
## アプリケーションのテスト
|
||||||
|
|
||||||
|
最後までやりましたね! 最後のステップは、私たちのアプリケーションが動作することを確認することです。試してみてください。エラーがあっても心配しないでください。**すべての開発者** がエラーに遭遇します。メッセージを調べて、必要に応じてデバッグしていきましょう。
|
||||||
|
|
||||||
|
**スタート** をクリックして、入力を開始してください。前に見たアニメーションに少し似ているはずです。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 チャレンジ
|
||||||
|
|
||||||
|
より多くの機能を追加しましょう。
|
||||||
|
|
||||||
|
- 完了時に `input` イベントリスナーを無効にし、ボタンがクリックされたときに再度有効にします
|
||||||
|
- プレイヤーが名言を完了したときにテキストボックスを無効にします
|
||||||
|
- 成功メッセージを含むモーダルダイアログボックスを表示します
|
||||||
|
- [localStorage](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage) を使ってハイスコアを保存します
|
||||||
|
|
||||||
|
## レクチャー後クイズ
|
||||||
|
|
||||||
|
[レクチャー後クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/22)
|
||||||
|
|
||||||
|
## 復習と自己学習
|
||||||
|
|
||||||
|
Web ブラウザを介して開発者が[利用できるすべてのイベント](https://developer.mozilla.org/ja/docs/Web/Events)を読んで、それぞれを使用するシナリオを検討してください。
|
||||||
|
|
||||||
|
## 課題
|
||||||
|
|
||||||
|
[新しいキーボードゲームを作成する](assignment.ja.md)
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
# 新しいキーボードゲームを作成する
|
||||||
|
|
||||||
|
## 説明書
|
||||||
|
|
||||||
|
キーボードのイベントを使ってタスクを行う小さなゲームを作りましょう。異なる種類のタイピングゲームや、キー入力で画面にピクセルをペイントするアートタイプのゲームにすることもできます。創造力を発揮してください。
|
||||||
|
|
||||||
|
## ルーブリック
|
||||||
|
|
||||||
|
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||||
|
| -------- | ------------------------ | ------------------------ | ----------------- |
|
||||||
|
| | フルゲームが発表される。 | ゲームは非常にミニマム。 | ゲームにはバグがある。 |
|
||||||
|
| |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,71 @@
|
|||||||
|
# 初心者のための Web 開発 - カリキュラム
|
||||||
|
|
||||||
|
マイクロソフトの Azure Cloud Advocates は、JavaScript、CSS、HTML の基礎知識を12週間、24レッスンのカリキュラムで提供しています。各レッスンには、レッスン前後のクイズ、レッスンを完了するための指示書、ソリューション、課題などが含まれています。私たちのプロジェクトベースの教育法は、新しいスキルを「定着させる」ための実証済みの方法である、構築しながら学ぶことを可能にします。
|
||||||
|
|
||||||
|
**著者の Jen Looper さん、Chris Noring さん、Christopher Harrison さん、Jasmine Greenaway さん、Yohan Lasorsa さん、Floor Drees さん、そしてスケッチノートアーティストの Tomomi Imura さんに心から感謝します。**
|
||||||
|
|
||||||
|
> **先生方**、このカリキュラムをどのように使用するか、[いくつかの提案があります](for-teachers.ja.md)。あなた自身のレッスンを作成したい場合は、[レッスンテンプレート](lesson-template/translations/README.ja.md)もご用意しています。
|
||||||
|
|
||||||
|
> **学生の皆さん**、このカリキュラムを自分で使うためには、リポジトリ全体をフォークして、講義前の小テストから始めて、講義を読んで、残りのアクティビティを自分で完成させてください。解答コードは各レッスンの /solutions フォルダにありますが、解答コードをコピーするのではなく、授業を理解した上でプロジェクトを作成するようにしてください。また、友達と勉強会を作って、一緒に勉強するのもいいでしょう。さらに勉強するには、[Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-4621-cxa) や以下のビデオを見ることをお勧めします。
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
|
||||||
|
|
||||||
|
> 上の画像をクリックすると、プロジェクトとそれを作成した人々についてのビデオを見ることができます。
|
||||||
|
|
||||||
|
## 教育学
|
||||||
|
|
||||||
|
私たちは、このカリキュラムを構築する際に、2つの教育学的な考え方を選択しました。このシリーズが終わる頃には、学生はタイピングゲーム、バーチャルテラリウム、「グリーン」ブラウザ拡張機能、「スペースインベーダー」タイプのゲーム、ビジネスタイプの銀行アプリを作成し、JavaScript、HTML、CSS の基本を、今日の Web 開発者の最新のツールチェーンとともに学んでいることでしょう。
|
||||||
|
|
||||||
|
コンテンツがプロジェクトに沿ったものであることを確認することで、プロセスは学生にとってより魅力的なものとなり、概念の定着率が向上します。また、JavaScriptの基本的な概念を紹介するために、いくつかのスターターレッスンを執筆し、その中の何人かの著者がこのカリキュラムに貢献しているビデオチュートリアルのコレクション "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=cxaall-4621-cxall)" のビデオと組み合わせました。
|
||||||
|
|
||||||
|
また、授業前の小テストで学習者の学習意図を確認し、授業後に2回目の小テストを行うことで、学習の定着度を高めています。このカリキュラムは柔軟性があり、楽しく、全体的にも部分的にも受講できるように設計されています。プロジェクトは小さなものから始まり、12週間のサイクルが終わる頃には徐々に複雑なものになっていきます。
|
||||||
|
|
||||||
|
フレームワークを採用する前に Web 開発者として必要とされる基本的なスキルに集中するため、JavaScript フレームワークの紹介は意図的に避けていますが、このカリキュラムを修了するための良い次のステップとして、別のビデオのコレクション "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=cxaall-4621-cxall)" を通して Node.js について学ぶことができます。
|
||||||
|
|
||||||
|
> [行動規範](./CODE_OF_CONDUCT.md)、[貢献](./CONTRIBUTING.md)、[翻訳](./TRANSLATIONS.md)のガイドラインをご覧ください。建設的なご意見をお待ちしております。
|
||||||
|
>
|
||||||
|
## 各レッスンの内容は以下の通りです
|
||||||
|
|
||||||
|
- オプションのスケッチノート
|
||||||
|
- オプションの補足ビデオ
|
||||||
|
- レッスン前の小テスト
|
||||||
|
- 記載されたレッスン
|
||||||
|
- プロジェクトベースのレッスンのために、プロジェクトを構築する方法をステップバイステップでガイドします
|
||||||
|
- 知識のチェック
|
||||||
|
- チャレンジ
|
||||||
|
- 副読本
|
||||||
|
- 課題
|
||||||
|
- レッスン後の小テスト
|
||||||
|
|
||||||
|
## レッスン
|
||||||
|
|
||||||
|
| | プロジェクト名 | 教える概念 | 学習の目的 | 関連するレッスン | レッスンの記載 | スケッチノート | 課題 | レッスン前の小テスト | レッスン後の小テスト | ビデオ | 著者 |
|
||||||
|
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :------------: | :--------: | :--------: | :-----------: | :---------: | :---: | :---------------------: |
|
||||||
|
| 01 | 入門 | プログラミング言語と開発ツール入門 | ほとんどのプログラミング言語の背後にある基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学ぶことができます。 | [プログラミング言語と開発ツール入門](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
|
||||||
|
| 02 | 入門 | GitHubの基礎、チームでの作業を含む | プロジェクトでの GitHub の使い方、コードベースでの他の人との共同作業の仕方 | [GitHub 入門](/1-getting-started-lessons/2-github-basics/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor |
|
||||||
|
| 03 | 入門 | アクセシビリティ | Web アクセシビリティの基礎を学ぶ | [アクセシビリティの基本](/1-getting-started-lessons/3-accessibility/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Christopher |
|
||||||
|
| 04 | JS の基礎 | JavaScript のデータ型 | JavaScript のデータ型の基礎 | [データ型](/2-js-basics/1-data-types/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
|
||||||
|
| 05 | JS の基礎 | 関数とメソッド | アプリケーションのロジックフローを管理するための機能とメソッドを学ぶ | [関数とメソッド](/2-js-basics/2-functions-methods/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine and Christopher |
|
||||||
|
| 06 | JS の基礎 | JS での意思決定 | 意思決定の方法を使ってコードに条件を作成する方法を学ぶ | [意思決定](/2-js-basics/3-making-decisions/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
|
||||||
|
| 07 | JS の基礎 | 配列とループ | JavaScript で配列やループを使ってデータを扱う | [配列とループ](/2-js-basics/4-arrays-loops/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
|
||||||
|
| 08 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | HTML の実践 | レイアウトの構築を中心に、オンラインテラリウムを作成するための HTML を構築する | [HTML 入門](/3-terrarium/1-intro-to-html/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||||
|
| 09 | [テラリウム](/3-terrarium/solution/translations/README.ja.md) | CSS の実践 | レスポンシブ対応など CSS の基本を中心に、オンラインテラリウムのスタイルを整える CSS を構築します。 | [CSS 入門](/3-terrarium/2-intro-to-css/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||||
|
| 10 | [テラリウム](/3-terrarium/solution) | JavaScript のクロージャ、DOM の操作 | テラリウムをドラッグ＆ドロップのインターフェイスとして機能させるための JavaScript を構築します。 | [JavaScript のクロージャ、DOM の操作](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||||
|
| 11 | [タイピングゲーム](/4-typing-game/solution) | タイピングゲームを構築 | キーボードイベントを使用して JavaScript アプリのロジックを駆動する方法を学びます。 | [イベント駆動型プログラミング](/4-typing-game/typing-game/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher |
|
||||||
|
| 12 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | ブラウザとの連携 | ブラウザの仕組み、歴史、ブラウザ拡張機能の最初の要素の足場の作り方を学ぶ | [ブラウザについて](/5-browser-extension/1-about-browsers/translations/README.ja.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||||
|
| 13 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | フォームの構築、API の呼び出し、ローカルストレージへの変数の格納 | ローカルストレージに格納された変数を使用して API を呼び出すためのブラウザ拡張機能の JavaScript 要素を構築します。 | [API、フォーム、およびローカルストレージ](/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen |
|
||||||
|
| 14 | [グリーンブラウザ拡張機能](/5-browser-extension/solution) | ブラウザのバックグラウンドプロセス、Web パフォーマンス | ブラウザのバックグラウンドプロセスを使用して拡張機能のアイコンを管理します。Web のパフォーマンスと最適化について学びます。 | [バックグラウンドタスクとパフォーマンス](/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen |
|
||||||
|
| 15 | [スペースゲーム](/6-space-game/solution) | JavaScript を使ったより高度なゲーム開発 | ゲーム構築に備えて、クラスとコンポジションの両方を使った継承と Pub/Sub パターンを学ぶ | [高度なゲーム開発入門](/6-space-game/1-introduction/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||||
|
| 16 | [スペースゲーム](/6-space-game/solution) | キャンバスへの描画 | 画面に要素を描画するために使用される Canvas API について説明します。 | [キャンバスへの描画](/6-space-game/2-drawing-to-canvas/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||||
|
| 17 | [スペースゲーム](/6-space-game/solution) | 画面の周りの要素の移動 | 直交座標と Canvas API を使用して、要素がどのように動きを得ることができるかをご覧ください。 | [要素の移動](/6-space-game/3-moving-elements-around/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||||
|
| 18 | [スペースゲーム](/6-space-game/solution) | 衝突の検出 | 要素を衝突させ、キープレスでお互いに反応させ、ゲームのパフォーマンスを確保するためのクールダウン機能を提供します。 | [衝突の検出](/6-space-game/4-collision-detection/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||||
|
| 19 | [スペースゲーム](/6-space-game/solution) | スコアの保持 | ゲームのステータスや成績に応じて計算を行う | [スコアの保持](/6-space-game/5-keeping-score/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||||
|
| 20 | [スペースゲーム](/6-space-game/solution) | ゲームの終了と再開 | アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学ぶことができます。 | [終了条件](/6-space-game/6-end-condition/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
|
||||||
|
| 21 | [バンキングアプリケーション](/7-bank-project/solution) | Web アプリの HTML テンプレートとルート | ルーティングと HTML テンプレートを使ったマルチページサイトのアーキテクチャの足場の作り方を学ぶ | [HTML テンプレートとルート](/7-bank-project/1-template-route/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
|
||||||
|
| 22 | [バンキングアプリケーション](/7-bank-project/solution) | ログインと登録フォームの構築 | フォームの構築と検証ルーチンの渡し方について学ぶ | [フォーム](/7-bank-project/2-forms/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
|
||||||
|
| 23 | [バンキングアプリケーション](/7-bank-project/solution) | データの取得と利用方法 | アプリのデータの出入り、データの取得方法、保存方法、廃棄方法 | [データ](/7-bank-project/3-data/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
|
||||||
|
| 24 | [バンキングアプリケーション](/7-bank-project/solution) | 状態管理の概念 | アプリの状態を保持する方法とプログラムで管理する方法を学ぶ | [状態管理](/7-bank-project/4-state-management/translations/README.ja.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan |
|
||||||
|
|
||||||
|
## オフラインアクセス
|
||||||
|
|
||||||
|
[Docsify](https://docsify.js.org/#/) を使えば、このドキュメントをオフラインで実行することができます。このリポジトリをフォークしてローカルマシンに [Docsify をインストール](https://docsify.js.org/#/quickstart)し、このリポジトリのルートフォルダで `docsify serve` と入力してください。これで、ローカルホスト上の3000番ポート、つまり `localhost:3000` で Web サイトがサーブされます。
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
## 教育者の方へ
|
||||||
|
|
||||||
|
このカリキュラムを教室で使ってみませんか? お気軽にどうぞ!
|
||||||
|
|
||||||
|
実は、GitHub Classroom を使えば、GitHub の中で使うことができます。
|
||||||
|
|
||||||
|
そのためには、このリポジトリをフォークしてください。各レッスンごとにレポを作成する必要があるので、それぞれのフォルダを別のレポに展開してください。そうすれば、[GitHub Classroom](https://classroom.github.com/classrooms) はそれぞれのレッスンを個別にピックアップすることができます。
|
||||||
|
|
||||||
|
これらの [完全な説明書](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) は、あなたの教室を設定する方法のアイデアを与えてくれます。
|
||||||
|
|
||||||
|
## リポジトリをそのまま使用する
|
||||||
|
|
||||||
|
GitHub Classroom を使わずに、このリポジトリを現状のまま使いたいのであれば、それも可能です。どのレッスンをどのように進めるかを生徒に伝える必要があります。
|
||||||
|
|
||||||
|
オンライン形式 (Zoom, Teams, その他の形式) で、クイズのための分科会を作り、学生を指導して学習の準備ができるようにします。そして、学生をクイズに招待し、一定の時間に「課題」として答えを提出させます。学生にオープンな場で共同作業をさせたい場合は、同じように課題を出すこともできます。
|
||||||
|
|
||||||
|
よりプライベートな形式を希望する場合は、学生にカリキュラムをレッスンごとにフォークしてもらい、自分の GitHub リポジトリをプライベートリポジトリにして、あなたにアクセス権を与えます。そうすれば、生徒たちは個人的にクイズや課題を完成させ、あなたの教室のレポにある課題を使ってあなたに提出することができます。
|
||||||
|
|
||||||
|
オンライン教室の形式でこれを実現するには、いろいろな方法があります。あなたに最適な方法を教えてください。
|
||||||
|
|
||||||
|
## 感想をお聞かせください!
|
||||||
|
|
||||||
|
このカリキュラムをあなたと生徒さんのために役立てていきたいと思っています。[フィードバック](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u)をお願いします。
|
||||||
Loading…
Reference in new issue