Merge branch 'main' of https://github.com/microsoft/Web-Dev-For-Beginners into main
This commit is contained in:
Sanjay
Коммит
f2b8c75c7b
|
|
@ -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
|
||||
|
|
@ -6,7 +6,8 @@ Pelajaran ini mencakup dasar-dasar bahasa pemrograman. Topik yang dibahas di sin
|
|||
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
[Kuis pra-kuliah](.github/pre-lecture-quiz.id.md)
|
||||
|
||||
[Kuis pra-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=id)
|
||||
|
||||
## Pengantar
|
||||
|
||||
|
|
@ -179,6 +180,10 @@ Ketika pengembang ingin mempelajari sesuatu yang baru, mereka kemungkinan besar
|
|||
|
||||
Bandingkan beberapa bahasa pemrograman. Apa saja ciri-ciri unik JavaScript vs. Java? Bagaimana dengan COBOL vs. Go?
|
||||
|
||||
## Kuis Pasca-Kuliah
|
||||
|
||||
[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=id)
|
||||
|
||||
## Ulasan & Belajar Mandiri
|
||||
|
||||
Pelajari sedikit tentang berbagai bahasa yang tersedia untuk programmer. Cobalah untuk menulis baris dalam satu bahasa, dan kemudian mengulanginya pada dua bahasa lainnya. Apa yang Anda pelajari?
|
||||
|
|
|
|||
|
|
@ -0,0 +1,192 @@
|
|||
# Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari
|
||||
|
||||
Questa lezione tratta delle basi dei linguaggi di programmazione. Gli argomenti trattati qui si applicano alla maggior parte dei moderni linguaggi di programmazione di oggi. Nella sezione 'Strumenti Necessari' conoscerete utili software che vi aiuteranno come programmatore.
|
||||
|
||||
|
||||
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
[Quiz Pre-Lezione](.github/pre-lecture-quiz.md)
|
||||
|
||||
## Introduzione
|
||||
|
||||
In questa lezione tratteremo di:
|
||||
|
||||
- Cos'è la programmazione?
|
||||
- Tipi di linguaggi di programmazione
|
||||
- Elementi base di un programma
|
||||
- Software utili e strumenti per lo sviluppatore professionista
|
||||
|
||||
## Cos'è la programmazione?
|
||||
|
||||
La programmazione (conosciuta anche come scrivere codice) è il processo con il quale si scrivono istruzioni a un dispositivo, tipo un computer o dispositivo mobile. Queste istruzioni vengono scritte con un linguaggio di programmazione, quindi vengono interpretate dal dispositivo. Ci si può riferire a questo insieme di istruzioni in vari modi, ma *programma*, *programma di computer*, *applicazione (app)*, ed *eseguibile* sono alcuni dei nomi più conosciuti.
|
||||
|
||||
Un *programma* può essere qualsiasi cosa che sia scritta con codice; siti web, giochi, app per telefono sono programmi. Mentre è possibile creare un programma senza scrivere codice, la logica sottostante viene interpretata dal dispositivo e quella logica è molto probabile che sia stata scritta con codice. Un programma che sta *girando* o sta*eseguendo codice* sta effettuando istruzioni. Il dispositivo con il quale state attualmente leggendo questa lezione sta eseguendo un programma per stamparla sul vostro schermo.
|
||||
|
||||
✅ Fate una piccola ricerca: quale si ritiene sia stato il primo programmatore al mondo?
|
||||
|
||||
## Linguaggi di programmazione
|
||||
|
||||
I linguaggi di programmazione servono uno scopo principale: fare in modo che gli sviluppatori costruiscano istruzioni da inviare a un dispositivo. I dispositivi possono comprendere solo codice binario (gli 1 e gli 0), e per la *maggior parte* degli sviluppatori questo non è un modo molto efficace di comunicare. I linguaggi di programmazione sono un veicolo per comunicare tra umani e computer.
|
||||
|
||||
I linguaggi di programmazione sono disponibili in diversi formati e possono servire per scopi diversi. Ad esempio, JavaScript è principalmente usato per applicazioni web, mentre Bash è principalmente usato per sistemi operativi.
|
||||
|
||||
I *linguaggi a basso livello* richiedono in genere a un dispositivo meno passi per interpretare le istruzioni rispetto ai *linguaggi di alto livello*. Tuttavia ciò che rende popolari i *linguaggi di alto livello* è la loro leggibilità e supporto. JavaScript è considerato un *linguaggio di alto livello*
|
||||
|
||||
Il codice seguente illustra le differenze tra un linguaggio ad alto livello come JavaScript e un linguaggio a basso livello come il codice assembly ARM.
|
||||
|
||||
```javascript
|
||||
let number = 10
|
||||
let n1 = 0, n2 = 1, nextTerm;
|
||||
|
||||
for (let i = 1; i <= number; i++) {
|
||||
console.log(n1);
|
||||
nextTerm = n1 + n2;
|
||||
n1 = n2;
|
||||
n2 = nextTerm;
|
||||
}
|
||||
```
|
||||
|
||||
```c
|
||||
area ascen,code,readonly
|
||||
entry
|
||||
code32
|
||||
adr r0,thumb+1
|
||||
bx r0
|
||||
code16
|
||||
thumb
|
||||
mov r0,#00
|
||||
sub r0,r0,#01
|
||||
mov r1,#01
|
||||
mov r4,#10
|
||||
ldr r2,=0x40000000
|
||||
back add r0,r1
|
||||
str r0,[r2]
|
||||
add r2,#04
|
||||
mov r3,r0
|
||||
mov r0,r1
|
||||
mov r1,r3
|
||||
sub r4,#01
|
||||
cmp r4,#00
|
||||
bne back
|
||||
end
|
||||
```
|
||||
|
||||
Credeteci o no, *stanno entrambi facendo la stessa cosa*: stampare una successione di Fibonacci fino a 10.
|
||||
|
||||
✅ Una successione di Fibonacci è [definita](https://www.wikiwand.com/it/Successione_di_Fibonacci) come un insieme di numeri tali che ciascun numero è la somma dei due precedenti, a partire da 0 e 1.
|
||||
|
||||
## Elementi di un programma
|
||||
|
||||
Una singola istruzione in un programma è detta *istruzione* e in genere avrà un carattere o spaziatura di riga che identifica dove essa finisce, o *termina*. Il modo nel quale un programma termina varia per ogni linguaggio.
|
||||
|
||||
La maggior parte dei programmi dipende dall'utilizzo di dati ricevuti da un utente o altrove, dove le istruzioni potrebbero dipendere da dati per essere effettuate. I dati possono modificare il comportamento di un programma, quindi i linguaggi di programmazione sono dotati della possibilità di conservare temporaneamente dati che possono essere usati successivamente. Questi dati sono detti *variabili*. Le variabili sono istruzioni che richiedono a un dispositivo di salvare dati nella sua memoria. Le variabili nei programmi sono simili a quelle dell'algebra, dove devono avere un nome univoco e il loro valore potrebbe mutare nel tempo.
|
||||
|
||||
Esiste la possibilità che alcune istruzioni non saranno eseguite da un dispositivo. In genere è una cosa voluta quando scritta dallo sviluppatore oppure per caso quando si verifica un errore inaspettato. Questo tipo di controllo di un'applicazione la rende più robusta e mantenibile. In genere queste modifiche nel controllo accadono quando si verificano certe condizioni. Una istruzione comune nei moderni linguaggi di programmazione per controllare come viene eseguito un programma è `if..else`.
|
||||
|
||||
✅ Saprete di più circa questo tipo di istruzione nelle lezioni successive
|
||||
|
||||
## Strumenti Necessari
|
||||
|
||||
[](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
|
||||
|
||||
In questa sezione conoscerete qualche software che potreste trovare molto utile per iniziare il vostro viaggio come programmatori professionisti.
|
||||
|
||||
Un *ambiente di sviluppo* è un insieme univoco di strumenti e caratteristiche che uno sviluppatore usa spesso quando scrive software. Alcuni di questi strumenti sono stati personalizzati per specifiche necessità dello sviluppatore e potrebbero cambiare nel tempo se lo sviluppatore cambia le priorità dei progetti di lavoro o personali, oppure quando usa un diverso linguaggio di programmazione. Gli ambienti di sviluppo sono unici tanto quanto gli sviluppatori che li utilizzano.
|
||||
|
||||
### Editor
|
||||
|
||||
Uno degli strumenti cruciali per lo sviluppo del software è l'editor. Gli editor sono dove scrivete il vostro codice e talvolta dove eseguirete il vostro codice.
|
||||
|
||||
Gli sviluppatori si affidano agli editor per qualche altra ragione aggiuntiva:
|
||||
|
||||
- *Debugging* La scoperta di bug ed errori seguendo passo passo il codice, riga per riga. Alcuni editor hanno capacita di debugging o possono essere personalizzate e aggiunte per linguaggi di programmazione specifici.
|
||||
- *Evidenziazione della Sintassi* Aggiunge colorazione e formattazione al testo del codice, rendendone più facile la lettura. La maggior parte degli editor consente la personalizzazione dell'evidenziazione della sintassi.
|
||||
- *Estensioni e integrazioni* Aggiunte specializzate per gli sviluppatori, dagli sviluppatori, per accedere a strumenti addizionali che non sono incluse come caratteristiche base dell'editor. Ad esempio molti sviluppatori hanno bisogno di un modo per documentare il proprio codice e spiegare come funziona e installeranno una estensione in grado di verificare la sintassi per trovare errori di ortografia. La maggior parte di queste aggiunte sono rivolte all'uso per un editor specifico, e molti editor hanno un modo per ricercare le estensioni disponibili.
|
||||
- *Personalizzazione* La maggior parte degli editor sono estremamente personalizzabili, e ciascun sviluppatore avrà il suo proprio ambiente di programmazione in grado di soddisfare le sue necessità. Molti consentono agli sviluppatori di creare le loro proprie estensioni.
|
||||
|
||||
#### Popolari Editor ed Estensioni per lo Sviluppo Web
|
||||
|
||||
- [Visual Studio Code](https://code.visualstudio.com/)
|
||||
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
|
||||
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
|
||||
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
|
||||
- [Atom](https://atom.io/)
|
||||
- [spell-check](https://atom.io/packages/spell-check)
|
||||
- [teletype](https://atom.io/packages/teletype)
|
||||
- [atom-beautify](https://atom.io/packages/atom-beautify)
|
||||
|
||||
### Browser
|
||||
|
||||
Un altro strumento cruciale è il browser. Gli sviluppatori web fanno affidamento sul browser per osservare come il proprio codice viene eseguito nel web, viene anche usato per vedere elementi grafici di una pagina web che sono scritti nell'editor, come HTML.
|
||||
|
||||
Molti browser dispongono di *strumenti per lo sviluppatore* (DevTools) che contengono un insieme di caratteristiche e informazioni per aiutare gli sviluppatori nella raccolta e cattura di importanti approfondimenti in merito alle proprie applicazioni. Ad esempio: se una pagina web ha errori, è talvolta utile sapere dove questi errori sono capitati. DevTools in un browser può essere configurato per catturare queste informazioni.
|
||||
|
||||
#### Popolari Browser e DevTools
|
||||
|
||||
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium)
|
||||
- [Chrome](https://sviluppatori.google.com/web/tools/chrome-devtools/)
|
||||
- [Firefox](https://sviluppatore.mozilla.org/docs/Tools)
|
||||
|
||||
### Strumenti da Riga di Comando
|
||||
|
||||
Alcuni sviluppatori preferiscono una visione meno grafica per i propri compiti quotidiani e si appoggiano alla riga di comando per completarli. Lo sviluppo del codice richiede un significativo ammontare di digitazione e taluni sviluppatori preferiscono non interrompere il proprio flusso sulla tastiere e usano scorciatoie da tastiera per spostarsi tra finestre del desktop, lavorare su file diversi, e usare strumenti. La maggior parte dei compiti può essere completata con un mouse, ma un vantaggio dell'usare la riga di comando è che molto può essere fatto con essa senza dover passare dalla tastiera al mouse e viceversa. Un altro vantaggio è che è configurabile ed è possibile salvare la propria configurazione, modificarla successivamente, e anche importarla su nuove macchine di sviluppo. Poiché gli ambienti di sviluppo sono così particolari per ciascun sviluppatore, alcuni eviteranno l'uso della riga di comando, altri la utilizzeranno esclusivamente e altri preferiranno mescolare le due tattiche.
|
||||
|
||||
### Popolari Alternative per Riga di Comando
|
||||
|
||||
Le alternative per la riga di comando differiriscono in base al sistema operativo che si sta usando.
|
||||
|
||||
*💻 = preinstallate nel sistema operativo.*
|
||||
|
||||
#### Windows
|
||||
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻
|
||||
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻
|
||||
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/)
|
||||
- [mintty](https://mintty.github.io/)
|
||||
|
||||
#### MacOS
|
||||
|
||||
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||
- [iTerm](https://iterm2.com/)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7)
|
||||
|
||||
#### Linux
|
||||
|
||||
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
|
||||
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7)
|
||||
|
||||
#### Popolari Strumenti da Riga di Comando
|
||||
|
||||
- [Git](https://git-scm.com/) (💻 nella maggior parte dei sistemi operativi)
|
||||
- [NPM](https://www.npmjs.com/)
|
||||
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
|
||||
|
||||
### Documentazione
|
||||
|
||||
Quando uno sviluppatore vuole imparare qualcosa di nuovo, per la maggior parte delle volte farà riferimento alla documentazione per imparare come usarlo. Gli sviluppatori fanno spesso affidamento alla documentazione per essere guidati all'utilizzo corretto degli strumenti e dei linguaggi, oltre a ottenere una più profonda conoscenza del funzionamento.
|
||||
|
||||
#### Popolari Documentazioni sullo Sviluppo Web
|
||||
|
||||
- [Mozilla sviluppatore Network](https://sviluppatore.mozilla.org/docs/Web)
|
||||
- [Frontend Masters](https://frontendmasters.com/learn/)
|
||||
|
||||
✅ Fate qualche ricerca: Ora che sapete le basi per un ambiente di sviluppo web, confrontate e rilevate le differenze rispetto all'ambiente di sviluppo di un web designer.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Confrontate alcuni linguaggi di programmazione. Quali sono i tratti univoci di JavaScript rispetto a Java? E COBOL rispetto a Go?
|
||||
|
||||
## Quiz Post-Lezione
|
||||
[Quiz Post-Lezione](.github/post-lecture-quiz.md)
|
||||
|
||||
## Revisione e Auto Istruzione
|
||||
|
||||
Studiate un poco sui diversi linguaggi di programmazione a disposizione di un programmatore. Cercate di scrivere una riga in un linguaggio, poi rifatelo con altri due. Cosa avete imparato?
|
||||
|
||||
## Compito
|
||||
|
||||
[Leggere la documentazione](assignment.md)
|
||||
|
|
@ -244,4 +244,4 @@ COBOLとGoについては？
|
|||
|
||||
## 課題
|
||||
|
||||
[assignment.md](../assignment.md)
|
||||
[assignment.md](assignment.ja.md)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
# ドキュメントを読む
|
||||
|
||||
## 説明書
|
||||
|
||||
Web 開発者が必要とする可能性のあるツールは、[クライアントサイドツールの MDN ドキュメント](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)に記載されているものが多くあります。このレッスンでカバーされていないツールを3つ選び、Web 開発者がそれを使う理由を説明し、このカテゴリに該当するツールを検索し、そのドキュメントを共有してください。同じツールの例を MDN ドキュメント上で使用しないでください。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
模範的な例 | 適切な | 改善が必要
|
||||
--- | --- | -- |
|
||||
|Web 開発者がツールを使う理由を説明| 開発者がツールを使用する理由ではなく、どのように使用するかを説明しました。| 開発者がツールを使用する方法や理由については言及していません。 |
|
||||
|
|
@ -149,7 +149,7 @@ Let's say you have a folder locally with some code project and you want to start
|
|||
git push
|
||||
```
|
||||
|
||||
> Tip, You might also want to adopt a `.gitignore` file to prevent files you don't want to track from showing up on GitHub - like that notes file you store in the same folder but has no place on a public repository. You can find templates for `.gitignore` files at [.gitignore templates](github.com/github/gitignore).
|
||||
> Tip, You might also want to adopt a `.gitignore` file to prevent files you don't want to track from showing up on GitHub - like that notes file you store in the same folder but has no place on a public repository. You can find templates for `.gitignore` files at [.gitignore templates](https://github.com/github/gitignore).
|
||||
|
||||
#### Commit messages
|
||||
|
||||
|
|
@ -315,4 +315,4 @@ You'll also find more advanced labs.
|
|||
|
||||
## Assignment
|
||||
|
||||
Complete [the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
Complete [the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -6,7 +6,8 @@ Pelajaran ini mencakup dasar-dasar GitHub, platform untuk menghosting dan mengel
|
|||
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
[Kuis pra-kuliah](.github/pre-lecture-quiz.id.md)
|
||||
|
||||
[Kuis pra-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3?loc=id)
|
||||
|
||||
## Pengantar
|
||||
|
||||
|
|
@ -272,7 +273,8 @@ Proyek mungkin juga memiliki diskusi di forum, milis, atau saluran obrolan seper
|
|||
Sandingkan dengan seorang teman untuk mengerjakan kode satu sama lain. Buat proyek secara kolaboratif, buat kode, buat cabang, dan gabungkan perubahan.
|
||||
|
||||
## Kuis Pasca Kuliah
|
||||
[Kuis pasca kuliah](.github/post-lecture-quiz.id.md)
|
||||
|
||||
[Kuis pasca kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4?loc=id)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
|
|
@ -288,4 +290,4 @@ Anda juga akan menemukan lab yang lebih canggih.
|
|||
|
||||
## Tugas
|
||||
|
||||
Selesaikan [Minggu Pertama di lab pelatihan GitHub](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
Selesaikan [Minggu Pertama di lab pelatihan GitHub](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,315 @@
|
|||
# Introduzione a GitHub
|
||||
|
||||
Questa lezione tratta delle basi di GitHub, una piattaforma per ospitare e gestire modifiche al proprio codice.
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pre-lezione
|
||||
[Pre-lecture quiz](../.github/pre-lecture-quiz.md)
|
||||
|
||||
## Introduzione
|
||||
|
||||
In questa lezione tratteremo come:
|
||||
|
||||
- tracciare il lavoro che si fa sulla propria macchina
|
||||
- lavorare con altri su progetti
|
||||
- come contribuire a software open source
|
||||
|
||||
### Prerequisiti
|
||||
|
||||
Prima di iniziare, si dovrebbe verificare se Git è installato. Dal terminale digitare:
|
||||
`git --version`
|
||||
|
||||
Se Git non è installato, [scaricare Git](https://git-scm.com/downloads). Poi impostare il proprio profilo locale Git dal terminale:
|
||||
* `git config --global user.name "il-proprio-nominativo"`
|
||||
* `git config --global user.email "la-propria-email"`
|
||||
|
||||
Per verificare se Git è già configurato si può digitare:
|
||||
`git config --list`
|
||||
|
||||
E' anche necessario un account GitHub, un editor di codice (tipo Visual Studio Code), e sarà necessario aprire il proprio terminale (o prompt di comando).
|
||||
|
||||
Navigare su [github.com](https://github.com/) e creare un account se non se ne dispone già di uno, oppure accedere e compilare il proprio profilo.
|
||||
|
||||
✅ GitHub non è il solo deposito di codice nel mondo, ce ne sono altri, ma GitHub è il più conosciuto.
|
||||
|
||||
### Preparazione
|
||||
|
||||
Servirà sia una cartella con il codice di un progetto sulla propria macchina locale (laptop o PC), e un repository pubblico su GitHub, che servirà come esempio su come contribuire a progetti di altri.
|
||||
|
||||
---
|
||||
|
||||
## Gestione del codice
|
||||
|
||||
Diciamo che si ha una cartella in locale con del codice di un progetto e che si vuole iniziare a tracciarne lo sviluppo usando git - il sistema di controllo di versione. Alcuni paragonano l'uso di git alla scrittura di una lettera d'amore a se stessi nel futuro. Leggendo i messaggi di commit giorni, settimane o mesi più tardi si dovrà essere in grado di ricordare perchè è stata presa una certa decisione, o ripristinare ("rollback") una modifica - questo è, quando si scrivono dei buoni "messaggi di commit".
|
||||
|
||||
### Compito: Creare un repository e inserirvi codice via commit
|
||||
|
||||
1. **Creare un repository su GitHub**. Su GitHub.com, nella scheda repositories, o dalla barra di navigazione in alto a destra, trovare il bottone **new repository**.
|
||||
|
||||
1. Dare un nome al proprio repository (cartella)
|
||||
1. Selezionare **create repository**.
|
||||
|
||||
1. **Navigare verso la propria cartella di lavoro**. Nel proprio terminale, portarsi nella cartella (detta anche directory) che si vuole iniziare a tracciare. Digitare:
|
||||
|
||||
```bash
|
||||
cd [nome della cartella]
|
||||
```
|
||||
|
||||
1. **Inizializzare un repository git**. Nel proprio progetto digitare:
|
||||
|
||||
```bash
|
||||
git init
|
||||
```
|
||||
|
||||
1. **Verifica stato**. Per verificare lo stato del proprio repository digitare:
|
||||
|
||||
```bash
|
||||
git status
|
||||
```
|
||||
|
||||
il risultato potrebbe essere qualcosa tipo:
|
||||
|
||||
```output
|
||||
Changes not staged for commit:
|
||||
(use "git add <file>..." to update what will be committed)
|
||||
(use "git checkout -- <file>..." to discard changes in working directory)
|
||||
|
||||
modified: file.txt
|
||||
modified: file2.txt
|
||||
```
|
||||
|
||||
In genere un comando `git status` informa circa quali file sono pronti per essere _salvati_ nel repository o quali modifiche sono state effettuate che si vogliono persistere.
|
||||
|
||||
1. **Aggiungere tutti i file per la tracciatura**
|
||||
Fase nota anche come aggiungere file nell'area di staging.
|
||||
|
||||
```bash
|
||||
git add .
|
||||
```
|
||||
|
||||
Gli argomenti `git add` più `.` indicano che tutti i propri file e modifiche sono selezionati per la tracciatura.
|
||||
|
||||
1. **Aggiungere file selezionati per la tracciatura**
|
||||
|
||||
```bash
|
||||
git add [file o nome cartella]
|
||||
```
|
||||
|
||||
Questo consente di aggiungere file nell'area di staging quando non si vogliono aggiungere tutti in una volta.
|
||||
|
||||
1. **Togliere dall'area di staging tutti i file**
|
||||
|
||||
```bash
|
||||
git reset
|
||||
```
|
||||
|
||||
Questo comando consente di togliere tutti i file dall'area di staging.
|
||||
|
||||
1. **Togliere dall'area di staging uno specifico file**
|
||||
|
||||
```bash
|
||||
git reset [file o nome cartella]
|
||||
```
|
||||
|
||||
Questo comando consente di togliere dall'area di staging uno specifico file che non si vuole includere nel commit successivo.
|
||||
|
||||
1. **Persistere il proprio lavoro**. A questo punto sono stati aggiunti tutti i file alla cosiddetta _area di staging_. Un posto nel quale Git sta tracciando i propri file. Per rendere permanenti le modifiche occorre eseguire un'azione di _commit_ dei file. Per farlo si crea un _commit_ con il comando `git commit`. Un _commit_ rappresenta un punto di salvataggio nella storia del proprio repository. Digitare questo per creare un _commit_:
|
||||
|
||||
```bash
|
||||
git commit -m "primo commit"
|
||||
```
|
||||
|
||||
Questo esegue il commit di tutti i file a suo tempo inclusi, aggiungendo il messaggio 'primo commit'. Per messaggi di commit successivi si vorrà essere più descrittivi nell'esposizione per identificare il tipo di modifiche effettuate.
|
||||
|
||||
1. **Connettere il repository Git locale a GitHub**. Un repository Git va bene sulla propria macchina ma a un certo punto si vuole avere una copia dei propri file da qualche altra parte e anche invitare altre persone a lavorare al proprio progetto. Un gran posto per fare questo è GitHub. Si ricorderà che è stato già creato un repository in GitHub quindi la sola cosa da fare è connettere il repository Git locale con GitHub. Il comando `git remote add` farà proprio questo. Digitare il comando:
|
||||
|
||||
> Nota, prima di digitare il comando portarsi sulla propria pagina del repository su GitHub per trovare l'URL del repository. Dovrà essere usato nel comando seguente. Sostituire `repository_name` con il proprio URL di GitHub e `username` con il proprio nome utente di github.
|
||||
|
||||
```bash
|
||||
git remote add origin https://github.com/username/repository_name.git
|
||||
```
|
||||
|
||||
Questo crea un _remote_, o connessione, chiamata "origin" che punta al repository GitHub precedentemente creato.
|
||||
|
||||
1. **Inviare file locali a GitHub**. Fino ad ora è stata creata una _connessione_ tra il repository locale e quello GitHub. Ora si inviano i file locali a GitHub usando il comando `git push`, in questo modo:
|
||||
|
||||
```bash
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
Questo invia i propri commit nel ramo "main" di GitHub.
|
||||
|
||||
1. **Aggiungere ulteriori modifiche**. Se si vuole continuare a fare modifiche e inviarle a GitHub occorre usare uno dei tre comandi seguenti:
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "digitare qui il messaggio di commit"
|
||||
git push
|
||||
```
|
||||
|
||||
> Suggerimento, Si potrebbe anche utilizzare un file `.gitignore` per evitare che alcuni file che non si vogliono tracciare finiscano su GitHub - come le note che si salvano sulla cartella del progetto ma che non sono adatte in un repository pubblico. Si possono trovare modelli di file `.gitignore` a [modelli .gitignore](github.com/github/gitignore).
|
||||
|
||||
#### Messaggi di commit
|
||||
|
||||
Una grande riga di oggetto per un commit Git completa la seguente frase:
|
||||
Se applicato, questo commit farà ... (qui la vostra riga oggetto)
|
||||
|
||||
Per l'oggetto utilizzare l'imperativo presente: "modifica" non "modificato" o "modifiche"- Come per l'oggetto nel corpo (opzionale) usar4 l'imperativo presente. Il corpo dovrebbe includere il motivo della modifica e il confronto con il precedente comportamento. Si sta spiegando il `perchè`, non il `come`.
|
||||
|
||||
✅ Si prenda qualche minuto per esplorare GitHub. E' possibile scovare un bel messaggio di commit? Se ne puà trovare uno assolutamente minimale? Quali informazioni si pensa che siano le più importanti e utili per un messaggio di commit?
|
||||
|
||||
### Compito: Collaborare
|
||||
|
||||
La ragione principale per inserire cose in GitHub è di fare in modo che si possa collaborare tra sviluppatori.
|
||||
|
||||
## Lavorare su progetti con altri
|
||||
|
||||
Nel proprio repository, portarsi a `Insights > Community` per vedere come il proprio progetto si confronta con gli standard della comunità.
|
||||
|
||||
Ecco alcune cose che possono migliorare il proprio repository GitHub:
|
||||
- **Descrizione**. E' stata aggiunta una descrizione per il proprio progetto?
|
||||
- **README**. E' stato aggiunto un README (leggimi)? GitHub fornisce una traccia per scrivere un [README](https://docs.github.com/articles/about-readmes/).
|
||||
- **Linee guida per contribuire**. Il proprio progetto fornisce [linne guida per contribuire](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/),
|
||||
- **Codice di Condotta**. un [Codice di Condotta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/),
|
||||
- **Licenza**. Forse la più imporatante, una [licenza](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
|
||||
|
||||
Tutte queste risorse favoriranno la salita a bordo di nuovi elementi nella squadra. Queste sono in genere il tipo di cose che i nuovi contributori cercano anche prima di dare un'occhiata al codice, per scoprire se il progetto è il posto giusto per spendere il loro tempo.
|
||||
|
||||
✅ I file README, sebbene richiedono tempo per prepararli, sono spesso trascurati da manutentori troppo occupati. E' possibile trovare un esempio di uno particolarmente descrittivo? Nota: ci sono alcuni [strumenti per aiutare la creazione di buoni README](https://www.makeareadme.com/) che si potrebbero provare.
|
||||
|
||||
### Compito: Fondere del codice
|
||||
|
||||
La documentazione per la collaborazione aiuta a fare sì che la gente contribuisca al progetto. Spiega che tipo di collaborazione ci si deve attendere e come funziona il processo. I contributori dovranno compiere una serie di passi per poter contribuire a un repository su GitHub:
|
||||
|
||||
1. **Biforcare il repository** Probabilmente si vorrà che la gente possa _biforcare_ il proprio progetto (forking). Questa azione crea una replica di un repository al quale si vuole contribuire sul profilo del contributore su GitHub.
|
||||
1. **Clonare**. Da qui verrà eseguita una azione di clonazione del progetto sulla macchina locale del contributore.
|
||||
1. **Creare un ramo**. Sarà richiesto al contributore di creare un _ramo_ (branch) per il suo lavoro.
|
||||
1. **Concentrare le modifiche del contributore su una area**. Richiedere ai contributori di concentrarsi su una cosa sola alla volta - in questo modo le possibilità che si possa _fondere_ (merge) il lavoro del contributore sono più alte. Se viene scritta la risoluzione di un bug, o viene aggiunta una nuova funzionalità o vengono aggiornati parecchi test - cosa succede se si vuole o si può, solo implementarne 2 su 3 o 1 su 3 di queste modifiche?
|
||||
|
||||
✅ Si immagini una situazione dove i rami sono particolarmente critici per la scrittura e lo sviluppo di buon codice. A quali casi d'uso sono stati individuati?
|
||||
|
||||
> Nota, siate il cambiamento che volete vedere nel mondo, e si creino rami anche per il proprio lavoro. Qualsiasi commit che verrà fatto sarà su rami che si sta attualmente *verificando* (check out). Usare `git status` per vedere su quale ramo ci si trova attualmente.
|
||||
|
||||
Si analizza il flusso di lavoro di un contributore. Si assume che egli abbia già eseguito il _fork_ e _clonato_ il repository in modo che lo stesso sia pronto per lavorarci, sulla sua macchina locale:
|
||||
|
||||
1. **Creare un ramo**. Usare il comando `git branch` per creare un ramo che conterrà le modifiche per le quali si è offerta la collaborazione:
|
||||
|
||||
```bash
|
||||
git branch [branch-name]
|
||||
```
|
||||
|
||||
1. **Passare al ramo di lavoro**. Passare al ramo specificato e aggiornare la directory di lavoro con `git checkout`:
|
||||
|
||||
```bash
|
||||
git checkout [nome ramo]
|
||||
```
|
||||
|
||||
1. **Eseguire il lavoro**. A questo punto si vorranno aggiungere i propri cambiamenti. Non dimenticarsi di dirlo a Git tramite questi comandi:
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "le mie modifiche"
|
||||
```
|
||||
|
||||
Assicurarsi che il commit abbia un buon messaggio, a beneficio proprio e del manutentore del repository sul quale si sta collaborando.
|
||||
|
||||
1. **Combinare il proprio lavoro con il ramo `main`**. Una volta terminato il lavoro occorre combinarlo con quello del ramo principale (`main`). Il ramo principale potrebbe avere subito cambiamenti nel mentre quindi ci si deve assicurare di eseguire prima un aggiornamento all'ultima versione con i comandi:
|
||||
|
||||
```bash
|
||||
git checkout main
|
||||
git pull
|
||||
```
|
||||
|
||||
A questo punto occorre assicurarsi che qualsiasi eventuale _conflitto_ (conflict), situazioni dove Git non è in grado di determinare facilmente come _combinare_ le modifiche effettuate nel proprio ramo di lavoro. Eseguire i seguenti comandi:
|
||||
|
||||
```bash
|
||||
git checkout [branch_name]
|
||||
git merge main
|
||||
```
|
||||
|
||||
Questo porterà tutte le modifiche da `main` verso il proprio ramo, augurandosi che si possa poi continuare. In caso contrario VS Code vi può indicare dove Git si _confonde_ e si potranno modificare i file coinvolti per determinare quale contenuto sia il più accurato.
|
||||
|
||||
1. **Inviare il proprio lavoro a GitHub**. Questo significa due cose. Spingere il proprio ramo verso il proprio repository, quindi aprire una PR, Pull Request.
|
||||
|
||||
```bash
|
||||
git push --set-upstream origin [nome-ramo]
|
||||
```
|
||||
|
||||
Il comando qui sopra crea il ramo sulla propria biforcazione del repository.
|
||||
|
||||
1. **Aprire una PR**. Successivamente, si vorrà aprire una Pull Request. Si fa portandosi nel repository biforcato su GitHub. Si vedrà una indicazione su GitHub dove viene chiesto se si vuol creare una nuova PR, cliccando su questa si verrà portati su una interfaccia dove si potrà cambiare il titolo del messaggio di commit e fornire una descrizione più adatta. Ora il manutentore del repository che è stato biforcato vedrà questa PR e _incrociando le dita_ apprezzerà e _fonderà_ (merge) la PR. Ora si avrà contribuito, yay :)
|
||||
|
||||
1. **Pulire**. E' considerata buona pratica effettuare una _pulizia_ dopo il lavoro compiuto. Si vorrà pulire sia il ramo locale che quello spinto su GitHub. Per prima cosa cancellarlo localmente con il comando:
|
||||
|
||||
```bash
|
||||
git branch -d [nome-ramo]
|
||||
```
|
||||
|
||||
Successivamente assicurarsi di andare nella pagina GitHub per del repository biforcato per eliminare il ramo remoto che è stato appena spinto.
|
||||
|
||||
`Pull request` sembra un termine sciocco in quanto in realtà si vogliono portare le proprie modifiche al progetto. Ma il manutentore (proprietario del progetto) o la squadra base deve valutare i cambiamenti dei contributori prima di fonderli con il ramo principale del progetto, quindi in realtà il contributore sta chiedendo una decisione sulle modifiche al manutentore.
|
||||
|
||||
Una pull request è il posto dove confrontare e discutere le differenze introdotte su un ramo con valutazioni, commenti, verifiche integrate e altro. Una buona pull request segue grossolanmente le stesse regole di un messaggio di commit. Si può aggiungere un riferimento al problema nel tracciatore di problemi (issue tracker), quando il proprio lavoro risolve ad esempio un problema. Questo viene fatto usando un `#` seguito dal numero del vostro problema. Ad esempio `#97`.
|
||||
|
||||
🤞Incrociando le dita si spera che tutte le verifiche vengano superate e che il proprietario(i) del progetto voglia incorporare le modifiche all'interno del progetto🤞
|
||||
|
||||
Aggiornare il proprio ramo corrente locale con tutti i nuovi commit per il ramo remoto corrispondente su GitHub:
|
||||
|
||||
`git pull`
|
||||
|
||||
## Come contribuire a progetti open source
|
||||
|
||||
Per prima cosa, trovare un repository - o repo - che interessi su GitHub e per il quale si desideri contribuire con una modifica. Si vorrà copiare il contenuto sulla propria macchina.
|
||||
|
||||
✅ Un buon modo di trovare repository 'adatti per i principianti' è di [cercare il tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
|
||||
|
||||
|
||||
|
||||
Ci sono parecchi modi di copiare il codice. Un modo è "clonare" il contenuto del repository, usando HTTPS, SSH, o usando l'interfaccia da riga di comando GitHub CLI.
|
||||
|
||||
Aprire il proprio terminale e clonare il repository così:
|
||||
`git clone https://github.com/URLdelProgetto`
|
||||
|
||||
Per lavorare su un progetto, passare alla corretta cartella:
|
||||
`cd URLdelProgetto`
|
||||
|
||||
Si può anche aprire l'intero progetto usando [Codespaces](https://github.com/features/codespaces), l'editor di codice incorporato di GitHub, oppure un ambiente di sviluppo nel cloud, oppure [GitHub Desktop](https://desktop.github.com/).
|
||||
|
||||
Infine si può scaricare il codice in una cartella compressa.
|
||||
|
||||
### Qualche altra cosa interessante riguardo a GitHub
|
||||
|
||||
E' possibile attribuire una stella, osservare, e/o "biforcare" un qualsiasi progetto pubblico su GitHub. Si possono trovare i propri repository che hanno stelle nel menù a tendina in alto a destra. E' come mettere un segnalibro, ma per il codice.
|
||||
|
||||
I progetti che hanno un tracciatore di problemi, per la maggior parte nella scheda "Issues" di GitHub a meno di indicazioni diverse, è dove la gente discute dei problemi relativi al progetto. E la scheda Pull Requests è dove la gente discute e verifica le modifiche in corso d'opera.
|
||||
|
||||
I progetti potrebbero anche essere discussi nei forum, liste di distribuzione, o canali chat come Slack, Discord o IRC.
|
||||
|
||||
✅ Dare una occhiata al proprio nuovo repository in GitHub e provare alcune cose, come modificare la configurazione, aggiungere informazioni al repository e creare un progetto come un tabellone Kanban. C'è tanto che si può fare!
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Fare coppia con un amico per lavorare al codice dei progetti l'uno dell'altro. Creare un progetto in modo collaborativo, biforcare il codice, craare rami e fondere modifiche.
|
||||
|
||||
## Quiz Post-lezione
|
||||
[Post-lecture quiz](../.github/post-lecture-quiz.md)
|
||||
|
||||
## Revisione e Auto Apprendimento
|
||||
|
||||
Leggene di più al riguardo: [contribuire a software open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
|
||||
|
||||
[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
|
||||
|
||||
Esercizio, esercizio, esercizio. GitHub ha ottimi percorsi di apprendimento disponibili via [lab.github.com](https://lab.github.com/):
|
||||
|
||||
- [Prima settimana su GitHub](https://lab.github.com/githubtraining/first-week-on-github)
|
||||
|
||||
Si potranno trovare anche altri laboratori più avanzati.
|
||||
|
||||
## Compito
|
||||
|
||||
Completare [la prima settimana nel laboratorio di apprendimento di GitHub](https://lab.github.com/githubtraining/first-week-on-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
|
||||
|
|
@ -4,7 +4,8 @@
|
|||
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
[Kuis pra-kuliah](.github/pre-lecture-quiz.id.md)
|
||||
|
||||
[Kuis pra-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5?loc=id)
|
||||
|
||||
> Kekuatan Web ada dalam universalitasnya. Akses oleh semua orang tanpa memandang disabilitas merupakan aspek penting.
|
||||
>
|
||||
|
|
@ -112,7 +113,7 @@ Sebagai bonus tambahan untuk memastikan situs Anda dapat diakses oleh semua, And
|
|||
Bayangkan halaman berikut:
|
||||
|
||||
| Produk | Deskripsi | Pesan |
|
||||
|--------------|------------------|--------------|
|
||||
| ------------ | ---------------- | ------------ |
|
||||
| Widget | [Deskripsi]('#') | [Pesan]('#') |
|
||||
| Widget super | [Deskripsi]('#') | [Pesan]('#') |
|
||||
|
||||
|
|
@ -208,7 +209,8 @@ Ambil HTML ini dan tulis ulang agar dapat diakses semaksimal mungkin, dengan str
|
|||
```
|
||||
|
||||
## Kuis Pasca Kuliah
|
||||
[Kuis pasca kuliah](.github/post-lecture-quiz.id.md)
|
||||
|
||||
[Kuis pasca kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6?loc=id)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,228 @@
|
|||
# Creare Pagine Web Accessibili
|
||||
|
||||
|
||||
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
[Quiz Pre-Lezione](../.github/pre-lecture-quiz.md)
|
||||
|
||||
> La forza del Web è nella usa universalità. L'accesso garantito a tutti a prescindere dalla disabilità è us aspetto essenziale.
|
||||
>
|
||||
> \- Sir Timothy Berners-Lee, Direttore W3C e Inventore del World Wide Web
|
||||
|
||||
Questa frase evidenzia perfettamente l'importanza di crerare siti web accessibili. Una applicazione che non può essere acceduta da tutti diventa per definizione esclusivista. Come sviluppatori web si dovrebbe sempre tenere a mente l'accessibilità. Focalizzandosi su questo fin dal principio si sarà sulla buona strada per garantire a chiunque l'accesso alle pagine che si sono create. In questa lezione, si apprenderanno gli strumenti che possono aiutare a rendere le proprie risorse web accessibili e che siano costruite con in mente l'accessibilità.
|
||||
|
||||
## Strumenti da usare
|
||||
|
||||
### Lettori di schermo
|
||||
|
||||
Uno dei più noti strumenti di accessibilità sono i lettori di schermo (screen reader)
|
||||
|
||||
I [lettori di schermo](https://www.wikiwand.com/it/Screen_reader) sono strumenti client comunemente usati per persone con menomazioni visive. Poiché dedichiamo tempo a garantire che un browser trasmetta correttamente le informazioni che desideriamo condividere, dobbiamo anche assicurarci che uno screen reader faccia lo stesso.
|
||||
|
||||
Nella sua forma più elementare, uno screen reader leggerà una pagina dall'alto verso il basso in modo udibile. Se una pagina è tutta testo, il lettore trasmetterà le informazioni in modo simile a un browser. Naturalmente, le pagine web sono raramente puramente testuali; contengono collegamenti, grafica, colore e altri componenti visivi. È necessario prestare attenzione per garantire che queste informazioni vengano lette correttamente da uno screen reader.
|
||||
|
||||
Ogni sviluppatore web dovrebbe acquisire familiarità con uno screen reader. Come evidenziato sopra, è il client che gli utenti dello sviluppatore utilizzeranno. Allo stesso modo in cui si ha familiarità con il funzionamento di un browser, si dovrebbe imparare come funziona uno screen reader. Fortunatamente, gli screen reader sono integrati nella maggior parte dei sistemi operativi.
|
||||
|
||||
Alcuni browser hanno anche strumenti incorporati ed estensioni che possono leggere il testo ad alta voce o persino fornire alcune funzionalità di navigazione di base, come [questi strumenti orientati all'accessibilità del browser Edge](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features) . Anche questi sono importanti strumenti di accessibilità, ma funzionano in modo molto diverso dagli screen reader e non dovrebbero essere scambiati per strumenti di test per uno screen reader.
|
||||
|
||||
✅ Provare un lettore di schermo e un lettore di testo del browser. In Windows, l'[Assistente vocale](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) (Narrator) è incluso per impostazione predefinita e anche [JAWS](https://webaim.org/articles/jaws/) e [NVDA](https://www.nvaccess.org/about-nvda/) possono essere installati Su macOS e iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) è installato per impostazione predefinita.
|
||||
|
||||
### Zoom
|
||||
|
||||
Un altro strumento comunemente utilizzato dalle persone con problemi di vista è lo zoom. Il tipo più semplice di zoom è lo zoom statico, controllato tramite `Control + segno più (+)` o diminuendo la risoluzione dello schermo. Questo tipo di zoom provoca il ridimensionamento dell'intera pagina, quindi l'utilizzo [di una progettazione responsive](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) della pagina è importante per fornire una buona esperienza utente a livelli di zoom aumentati.
|
||||
|
||||
Un altro tipo di zoom si basa su un software specializzato per ingrandire un'area dello schermo e fare una panoramica, proprio come usare una vera lente di ingrandimento. Su Windows, [Magnifier](https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) è integrato e [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) è un software di ingrandimento di terze parti con più funzionalità e una base di utenti più ampia. Sia macOS che iOS hanno un software di ingrandimento integrato chiamato [Zoom](https://www.apple.com/accessibility/mac/vision/).
|
||||
|
||||
### Verificatori di contrasto
|
||||
|
||||
I colori sui siti web devono essere scelti con cura per rispondere alle esigenze degli utenti daltonici o delle persone che hanno difficoltà a vedere i colori a basso contrasto.
|
||||
|
||||
✅ Provare un sito web che piace usare per l'utilizzo del colore con un'estensione del browser come [il controllo del colore WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Cosa si è appreso?
|
||||
|
||||
### Lo strumento Faro (Lighthouse)
|
||||
|
||||
Nell'area degli strumenti per sviluppatori del browser, si troverà lo strumento Lighthouse. Questo strumento è importante per ottenere una prima visione dell'accessibilità (così come altre analisi) di un sito web. Sebbene sia importante non fare affidamento esclusivamente su Lighthouse, un punteggio del 100% è molto utile come riferimento.
|
||||
|
||||
✅ Trovare Lighthouse nel pannello degli strumenti per sviluppatori del proprio browser ed eseguire un'analisi su qualsiasi sito. Cosa si è scoperto?
|
||||
|
||||
## Progettare per l'accessibilità
|
||||
|
||||
L'accessibilità è un argomento relativamente ampio. A supporto, sono disponibili numerose risorse.
|
||||
|
||||
- [Accessibile U - Università del Minnesota](https://accessibility.umn.edu/your-role/web-developers)
|
||||
|
||||
Sebbene non si sarà in grado di coprire ogni aspetto della creazione di siti accessibili, di seguito sono riportati alcuni dei principi fondamentali che si vorranno implementare. Progettare una pagina accessibile dall'inizio è **sempre** più facile che tornare a una pagina esistente per renderla accessibile.
|
||||
|
||||
## Buoni principi di visualizzazione
|
||||
|
||||
### Tavolozze di colori sicuri
|
||||
|
||||
Le persone vedono il mondo in modi diversi, e questo include i colori. Quando si seleziona una combinazione di colori per il proprio sito, ci si dovrebbe assicurare che sia accessibile a tutti. Un ottimo [strumento per generare tavolozze di colori è Color Safe](http://colorsafe.co/).
|
||||
|
||||
✅ Identificare un sito web che è molto problematico nel suo uso del colore. Perché?
|
||||
|
||||
### Usa l'HTML corretto
|
||||
|
||||
Con CSS e JavaScript è possibile far sembrare qualunque elemento come un qualsiasi tipo di controllo. `<span>` potrebbe essere usato per creare un `<button>`, e `<b>` potrebbe diventare un collegamento ipertestuale. Sebbene questo possa essere considerato più facile da definire, non trasmette nulla a uno screen reader. Occorre usare l'HTML appropriato quando si creano i controlli su una pagina. Se si vuole un collegamento ipertestuale usare `<a>`. L'utilizzo dell'HTML corretto per il controllo corretto è chiamato fare uso dell'HTML semantico.
|
||||
|
||||
✅ Portarsi su qualsiasi sito web e controllare se i progettisti e gli sviluppatori stanno usando l'HTML correttamente. Si riesce a trovare un pulsante che dovrebbe essere un collegamento? Suggerimento: fare clic con il tasto destro e scegliere "Visualizza sorgente pagina" nel browser per esaminare il codice relativo.
|
||||
|
||||
### Creare una gerarchia descrittiva delle intestazioni
|
||||
|
||||
Gli utenti di screen reader [fanno molto affidamento sui titoli](https://webaim.org/projects/screenreadersurvey8/#finding) per trovare informazioni e navigare in una pagina. La scrittura di contenuto di intestazione descrittiva e l'utilizzo di tag di intestazione semantici sono importanti per creare un sito facilmente navigabile per gli utenti di lettori di schermo.
|
||||
|
||||
### Usare buoni indizi visivi
|
||||
|
||||
CSS offre il controllo completo sull'aspetto di qualsiasi elemento in una pagina. È possibile creare caselle di testo senza un contorno o collegamenti ipertestuali senza una sottolineatura. Sfortunatamente rimuovere questi indizi può rendere più difficile per qualcuno che dipende da loro essere in grado di riconoscere il tipo di controllo.
|
||||
|
||||
## L'importanza del testo del collegamento
|
||||
|
||||
I collegamenti ipertestuali sono fondamentali per la navigazione sul Web. Di conseguenza, assicurarsi che uno screen reader possa leggere correttamente i collegamenti consente a tutti gli utenti di navigare nel proprio sito.
|
||||
|
||||
### Lettori di schermo e collegamenti
|
||||
|
||||
Come ci si potrebbe aspettare, gli screen reader leggono il testo del collegamento nello stesso modo in cui leggono qualsiasi altro testo nella pagina. Tenedo presente questo, il testo mostrato di seguito potrebbe sembrare perfettamente accettabile.
|
||||
|
||||
> Il pinguino minore, a volte noto come il pinguino delle fate, è il più piccolo pinguino del mondo. [Fare clic qui](https://en.wikipedia.org/wiki/Little_penguin) per ulteriori informazioni.
|
||||
|
||||
> Il Il pinguino minore, a volte noto come il pinguino delle fate, è il più piccolo pinguino del mondo. Visitare https://en.wikipedia.org/wiki/Little_penguin per ulteriori informazioni.
|
||||
|
||||
> **NOTA** Come si leggerà di seguito, non si dovrebbero **mai** creare collegamenti che assomigliano all'esempio precedente
|
||||
|
||||
Si ricordi che gli screen reader sono un'interfaccia diversa dai browser con un diverso insieme di funzionalità.
|
||||
|
||||
### Il problema con l'utilizzo dell'URL
|
||||
|
||||
I lettori di schermo leggono il testo. Se nel testo viene visualizzato un URL, lo screen reader leggerà l'URL. In generale, l'URL non trasmette informazioni significative e può sembrare al suono fastidioso. Si potrebbe averlo riscontrato se il proprio telefono ha mai letto in modo udibile un messaggio di testo con un URL.
|
||||
|
||||
### Il problema con "clicca qui"
|
||||
|
||||
I lettori di schermo hanno anche la capacità di leggere solo i collegamenti ipertestuali su una pagina, molto nello stesso modo in cui una persona vedente scorrerebbe una pagina per cercare collegamenti. Se il testo del link è sempre "clicca qui", tutto ciò che l'utente sentirà sarà "clicca qui, clicca qui, clicca qui, clicca qui, clicca qui, ..." Tutti i collegamenti sono ora indistinguibili l'uno dall'altro.
|
||||
|
||||
### Buon testo del collegamento
|
||||
|
||||
Un buon testo del collegamento descrive brevemente cosa c'è dall'altra parte del collegamento. Nell'esempio sopra che parla di piccoli pinguini, il collegamento è alla pagina di Wikipedia sulla specie. La frase *piccoli pinguini* renderebbe il testo del collegamento perfetto in quanto chiarisce ciò che qualcuno imparerà se fa clic sul collegamento: piccoli pinguini.
|
||||
|
||||
> Il [pinguino minore](https://www.wikiwand.com/it/Eudyptula_minor), a volte noto come il pinguino delle fate, è il più piccolo pinguino del mondo.
|
||||
|
||||
✅ Navigare sul Web per alcuni minuti per trovare pagine che utilizzano oscure strategie di collegamento. Confrontarle con altri siti con collegamenti migliori. Cosa si è appreso?
|
||||
|
||||
#### Note sui motori di ricerca
|
||||
|
||||
Come bonus aggiuntivo per garantire che il proprio sito sia accessibile a tutti, si dovranno aiutare anche i motori di ricerca a navigare nel sito. I motori di ricerca utilizzano il testo del collegamento per apprendere gli argomenti delle pagine. Quindi usare un buon testo per i link aiuta tutti!
|
||||
|
||||
### ARIA
|
||||
|
||||
Si Immagini la pagina seguente:
|
||||
|
||||
| Prodotto | Descrizione | Ordine |
|
||||
| ------------ | ------------------ | ------------ |
|
||||
| Widget | [Descrizione]('#') | [Ordine]('#') |
|
||||
| DMX Super Widget | [Descrizione]('#') | [Ordine]('#') |
|
||||
|
||||
In questo esempio, la duplicazione del testo della descrizione e dell'ordine ha senso per qualcuno che utilizza un browser. Tuttavia, qualcuno che utilizza uno screen reader ascolterebbe solo le parole *descrizione* e *ordine* ripetute senza contesto.
|
||||
|
||||
Per supportare questi tipi di scenari, HTML supporta una serie di attributi noti come [ARIA (Accessible Rich Internet Applications)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Questi attributi consentono di fornire informazioni aggiuntive agli screen reader.
|
||||
|
||||
> **NOTA**: come molti aspetti dell'HTML, il supporto del browser e dello screen reader può variare. Tuttavia, la maggior parte dei client principali supporta gli attributi ARIA.
|
||||
|
||||
E' possibile utilizzare `aria-label` per descrivere il collegamento quando il formato della pagina non lo consente. La descrizione del widget potrebbe essere impostata come
|
||||
|
||||
```html
|
||||
<a href="#" aria-label="Widget description">description</a>
|
||||
```
|
||||
|
||||
✅ In generale, l'uso del markup semantico come descritto sopra sostituisce l'uso di ARIA, ma a volte non esiste un equivalente semantico per diversi widget HTML. Un buon esempio è una struttura ad albero. Non esiste un equivalente HTML per una struttura ad albero, quindi si identifica il generico `<div>` per questo elemento con un ruolo e valori aria appropriati. La [documentazione MDN su ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) contiene ulteriori utili informazioni.
|
||||
|
||||
```html
|
||||
<h2 id="tree-label">File Viewer</h2>
|
||||
<div role="tree" aria-labelledby="tree-label">
|
||||
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Immagini
|
||||
|
||||
Inutile dire che gli screen reader non sono in grado di leggere automaticamente il contenuto di un'immagine. Assicurarsi che le immagini siano accessibili non richiede molto lavoro: è ciò di cui tratta l'attributo `alt` . Tutte le immagini significative dovrebbero avere un `alt` per descrivere cosa sono. Le immagini che sono puramente decorative dovrebbero avere il loro attributo `alt` impostato su una stringa vuota: `alt = ""`. Ciò impedisce ai lettori di schermo di annunciare inutilmente l'immagine decorativa.
|
||||
|
||||
✅ Come ci si potrebbe aspettare, anche i motori di ricerca non sono in grado di capire cosa c'è in un'immagine. Anch'essi usano il testo alternativo. Quindi, ancora una volta, assicurandosi che la propria pagina sia accessibile fornisce bonus aggiuntivi!
|
||||
|
||||
## La tastiera
|
||||
|
||||
Alcuni utenti non sono in grado di utilizzare un mouse o un trackpad, affidandosi invece alle interazioni della tastiera per passare da un elemento all'altro. È importante che il proprio sito web presenti i contenuti in ordine logico in modo che un utente usando la tastiera possa accedere a ogni elemento interattivo mentre si sposta nel flusso di un documento. Se si creano le proprie pagine web con markup semantico e si utilizza CSS per definire lo stile del layout visivo, il proprio sito dovrebbe essere navigabile da tastiera, ma è importante testare manualmente questo aspetto. Per saperne di più su ulteriori informazioni sulle [strategie di navigazione da tastiera](https://webaim.org/techniques/keyboard/).
|
||||
|
||||
✅ Andare su qualsiasi sito web e provare a navigarlo utilizzando solo la tastiera. Cos'è che funziona e cos'è che non funziona? Perché?
|
||||
|
||||
## Riepilogo
|
||||
|
||||
Un Web accessibile ad alcuni non è un vero "world-wide web". Il modo migliore per garantire che i siti che si creano siano accessibili è incorporare le migliori pratiche di accessibilità sin dall'inizio. Sebbene siano necessari passaggi aggiuntivi, incorporare queste abilità nel flusso di lavoro ora significa che tutte le pagine che si creeranno saranno accessibili.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Prendere questo HTML e riscriverlo per essere il più accessibile possibile, date le strategie che sono state apprese.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Example
|
||||
</title>
|
||||
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-header">
|
||||
<p class="site-title">Turtle Ipsum</p>
|
||||
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
|
||||
</div>
|
||||
<div class="main-nav">
|
||||
<p class="nav-header">Resources</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div>
|
||||
<p class="page-title">Welcome to Turtle Ipsum.
|
||||
<a href="">Click here</a> to learn more.
|
||||
</p>
|
||||
<p class="article-text">
|
||||
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-section">
|
||||
<span class="button">Sign up for turtle news</span>
|
||||
</div><div class="footer-section">
|
||||
<p class="nav-header footer-title">
|
||||
Internal Pages
|
||||
</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="footer-copyright">© 2016 Instrument</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Quiz post-lezione
|
||||
[Quiz post-lezione](../.github/post-lecture-quiz.md)
|
||||
|
||||
## Revisione e auto apprendimento
|
||||
|
||||
Molti governi hanno leggi riguardanti i requisiti di accessibilità. Consultare le leggi sull'accessibilità del proprio paese d'origine. Cosa è coperto e cosa no? Un esempio è [questo sito web del governo inglese](https://accessibility.blog.gov.uk/).
|
||||
|
||||
## Assegnazione
|
||||
|
||||
[Analizzare un sito web non accessibile](assignment.md)
|
||||
|
||||
Crediti: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) da Instrument
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
# アクセシブルな Web ページの作成
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レクチャー前クイズ
|
||||
[レクチャー前クイズ](.github/pre-lecture-quiz.md)
|
||||
|
||||
> Web の力は、その普遍性にあります。障害の有無に関わらず、誰もがアクセスできることが重要です。
|
||||
>
|
||||
> \- Sir Timothy Berners-Lee, W3C 理事、World Wide Web の発明者
|
||||
|
||||
この引用は、アクセシブルな Web サイトを作成することの重要性を完璧に強調しています。すべての人がアクセスできないアプリケーションは、定義上、排除的なものです。Web 開発者として、私たちは常にアクセシビリティを念頭に置くべきです。最初からこのことに焦点を当てることで、あなたが作成したページに誰もがアクセスできるようにすることができるようになります。このレッスンでは、Web 資産がアクセシブルであることを確実にするのに役立つツールと、アクセシビリティを念頭に置いて構築する方法について学びます。
|
||||
|
||||
## 使用するツール
|
||||
|
||||
### スクリーンリーダー
|
||||
|
||||
よく知られているアクセシビリティツールの一つにスクリーンリーダーがあります。
|
||||
|
||||
[スクリーンリーダー](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC)は、視覚障害のある方のために一般的に使用されているクライアントです。ブラウザが共有したい情報を適切に伝えることに時間を費やしているので、スクリーンリーダーも同じように情報を伝えるようにしなければなりません。
|
||||
|
||||
スクリーンリーダーは、最も基本的には、ページを上から下まで音声で読み上げます。あなたのページがすべてテキストである場合、リーダーはブラウザと同様の方法で情報を伝えます。もちろん、ウェブページが純粋なテキストであることはほとんどなく、リンク、グラフィック、カラー、その他の視覚的な要素が含まれます。これらの情報がスクリーンリーダーに正しく読まれるように注意を払わなければなりません。
|
||||
|
||||
すべてのウェブ開発者は、スクリーンリーダーに慣れる必要があります。上で強調したように、ユーザーが利用するのはクライアントです。ブラウザの操作方法を熟知しているのと同じように、スクリーンリーダーの操作方法を学ぶべきです。幸いなことに、スクリーンリーダーはほとんどのオペレーティングシステムに組み込まれています。
|
||||
|
||||
ブラウザの中には、テキストを音読したり、基本的なナビゲーション機能を提供したりするツールや拡張機能を内蔵しているものもありますが、[これらはアクセシビリティに焦点を当てたEdgeブラウザツール](https://support.microsoft.com/ja-jp/microsoft-edge/microsoft-edge-%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E6%A9%9F%E8%83%BD-4c696192-338e-9465-b2cd-bd9b698ad19a)のようなものです。これらも重要なアクセシビリティツールですが、スクリーンリーダーとは機能が大きく異なるため、スクリーンリーダーのテストツールと勘違いしてはいけません。
|
||||
|
||||
✅ スクリーンリーダーやブラウザのテキストリーダーを試してみましょう。Windows ではデフォルトで [Narrator](https://support.microsoft.com/ja-jp/windows/%E3%83%8A%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E3%81%AE%E8%A9%B3%E7%B4%B0%E3%81%AA%E3%82%AC%E3%82%A4%E3%83%89-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) が搭載されており、[JAWS](https://webaim.org/articles/jaws/) や [NVDA](https://www.nvaccess.org/about-nvda/) もインストールできます。macOS と iOS では、[VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) がデフォルトでインストールされています。
|
||||
|
||||
### ズーム
|
||||
|
||||
視覚障害のある人がよく使うもう一つのツールは、ズームです。ズームの最も基本的なタイプは静的ズームで、`コントロール + プラス記号 (+)` で制御するか、画面の解像度を下げることで制御します。このタイプのズームではページ全体のサイズが変更されるため、[レスポンシブデザイン](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Responsive_Design)を使用することは、ズームレベルを上げても良いユーザー体験を提供するために重要です。
|
||||
|
||||
もう一つのタイプのズームは、特殊なソフトウェアを使用して、実際の虫眼鏡を使用するのと同じように、画面のある領域を拡大してパンすることを目的としています。Windows では、[Magnifier](https://support.microsoft.com/ja-jp/windows/%E7%94%BB%E9%9D%A2%E4%B8%8A%E3%81%AE%E9%A0%85%E7%9B%AE%E3%82%92%E8%A6%8B%E3%82%84%E3%81%99%E3%81%8F%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB-%E6%8B%A1%E5%A4%A7%E9%8F%A1%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B-414948ba-8b1c-d3bd-8615-0e5e32204198) が内蔵されており、[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) は、より多くの機能を持ち、より多くのユーザーベースを持つサードパーティ製の拡大表示ソフトウェアです。macOS と iOS の両方には、[Zoom](https://www.apple.com/accessibility/mac/vision/) と呼ばれる拡大鏡ソフトが内蔵されています。
|
||||
|
||||
### コントラストチェッカー
|
||||
|
||||
Webサイトの色は、色覚障害者やコントラストの低い色が見えにくい人のニーズに応えるために、慎重に選ぶ必要があります。
|
||||
|
||||
✅ [WCAG のカラーチェッカー](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=ja-JP)などのブラウザ拡張機能を使って、色使いを楽しむ Web サイトをテストしてみましょう。何がわかりますか？
|
||||
|
||||
### Lighthouse
|
||||
|
||||
ブラウザの開発者ツールエリアには、Lighthouse ツールがあります。このツールは、Web サイトのアクセシビリティ (他の分析と同様に) を最初に見るために重要です。Lighthouse だけに頼らないことが重要ですが、100% のスコアはベースラインとして非常に役立ちます。
|
||||
|
||||
✅ ブラウザの開発者ツールパネルで Lighthouse を見つけて、任意のサイトで分析を実行してください。何を発見しましたか？
|
||||
|
||||
## アクセシビリティを考慮した設計
|
||||
|
||||
アクセシビリティは比較的大きなテーマです。あなたを助けるために、多くのリソースが用意されています。
|
||||
|
||||
- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
|
||||
|
||||
アクセシブルなサイトを作成するためのすべての側面をカバーすることはできませんが、以下は、あなたが実装したいと思う中核的な原則のいくつかです。アクセシブルなページを最初からデザインすることは、既存のページに戻ってアクセシブルにするよりも**常に**簡単です。
|
||||
|
||||
## 良い表示の原則
|
||||
|
||||
### カラーセーフパレット
|
||||
|
||||
人はさまざまな方法で世界を見ていますが、これには色も含まれます。サイトの配色を選択する際には、誰もがアクセスできるようにする必要があります。[カラーパレットを生成するための素晴らしいツールの1つが Color Safe ](http://colorsafe.co/)です。
|
||||
|
||||
✅ 色の使用に非常に問題のある Web サイトを特定してください。なぜですか？
|
||||
|
||||
### 正しい HTML を使用する
|
||||
|
||||
CSS と JavaScript を使えば、あらゆる要素をあらゆるタイプのコントロールのように見せることができます。`<span>` を使って `<button>` を作成したり、`<b>` をハイパーリンクにしたりすることができます。この方がスタイルを整えるのは簡単だと思われるかもしれませんが、スクリーンリーダーには何も伝わりません。ページ上でコントロールを作成する際には、適切な HTML を使用してください。ハイパーリンクが必要な場合は、`<a>` を使用します。適切なコントロールに適切なHTML を使うことをセマンティック HTML の利用といいます。
|
||||
|
||||
✅ 任意の Web サイトに行って、デザイナーや開発者が HTML を適切に使用しているかどうかを確認してください。リンクであるはずのボタンを見つけることができますか？ヒント: 右クリックして、ブラウザで「View Page Source」を選択して、基礎となるコードを見てみましょう。
|
||||
|
||||
### 記述的な見出しの階層を作成する
|
||||
|
||||
スクリーンリーダーのユーザーは、情報を見つけたり、ページをナビゲートしたりするために、[見出しに大きく依存しています](https://webaim.org/projects/screenreadersurvey8/#finding)。記述的な見出しコンテンツを書き、意味的な見出しタグを使用することは、スクリーンリーダーのユーザーがナビゲートしやすいサイトを作成するために重要です。
|
||||
|
||||
### 視覚的な手がかりを上手に使う
|
||||
|
||||
CSS は、ページ上のあらゆる要素の外観を完全に制御することができます。アウトラインのないテキストボックスやアンダーラインのないハイパーリンクを作成することができます。残念ながら、これらの手がかりを削除すると、それらに依存している人がコントロールの種類を認識することが難しくなる可能性があります。
|
||||
|
||||
## リンクテキストの重要性
|
||||
|
||||
ハイパーリンクは、ウェブをナビゲートするための核となるものです。その結果、スクリーンリーダーがリンクを適切に読めるようにすることで、すべてのユーザーがサイトをナビゲートできるようになります。
|
||||
|
||||
### スクリーンリーダーとリンク
|
||||
|
||||
ご想像の通り、スクリーンリーダーはリンクテキストをページ上の他のテキストと同じように読みます。このことを念頭に置いて、以下に示すテキストは完全に許容できると感じるかもしれません。
|
||||
|
||||
> 妖精ペンギンと呼ばれることもあるコガタペンギンは、世界最小のペンギンです。[詳しくはこちら](https://en.wikipedia.org/wiki/Little_penguin) をご覧ください。
|
||||
|
||||
> 妖精ペンギンと呼ばれることもあるリトルペンギンは、世界最小のペンギンです。詳しくは https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3 をご覧ください。
|
||||
|
||||
> **注** 今から読むように、上記のようなリンクは絶対に作っては**いけません**。
|
||||
|
||||
スクリーンリーダーは、ブラウザとは異なる機能のセットを持つ別のインターフェイスであることを覚えておいてください。
|
||||
|
||||
### URL を使用する場合の問題点
|
||||
|
||||
スクリーンリーダーはテキストを読みます。本文中に URL が表示されている場合、スクリーンリーダーはその URL を読みます。一般的に、URL は意味のある情報を伝えず、迷惑に聞こえることがあります。あなたの携帯電話が URL 付きのテキストメッセージを音声で読んだことがある場合は、このような経験をしたことがあるかもしれません。
|
||||
|
||||
### "こちらをクリック" の問題点
|
||||
|
||||
スクリーンリーダーは、目の不自由な人がページをスキャンしてリンクを探すのと同じように、ページ上のハイパーリンクだけを読む機能も持っています。リンクテキストが常に「ここをクリックしてください」となっている場合、ユーザーは「ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、...」としか聞こえません。すべてのリンクは互いに区別がつかなくなりました。
|
||||
|
||||
### 良いリンクテキスト
|
||||
|
||||
良いリンクの文章は、リンクの向こう側に何があるのかを簡潔に説明します。上記の例では、コガタペンギンについて話していますが、リンク先はその種についての Wikipedia のページになっています。*コガタペンギン* というフレーズは、リンクをクリックした場合に何を学ぶのかが明確になるので、完璧なリンクテキストになります。
|
||||
|
||||
> 妖精ペンギンとして知られることもある[コガタペンギン](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3)は、世界で最も小さいペンギンです。
|
||||
|
||||
✅ 数分間 Web サーフィンをして、不明瞭なリンク戦略を使用しているページを見つけましょう。他の、より良いリンクを貼られているサイトと比較してみてください。あなたは何を学びますか？
|
||||
|
||||
#### 検索エンジンの注意事項
|
||||
|
||||
あなたのサイトが誰でもアクセスできるようにすることで、検索エンジンがあなたのサイトをナビゲートするのにも役立ちます。検索エンジンは、ページのトピックを学習するためにリンクテキストを使用します。ですから、良いリンクテキストを使用することは誰にでも役立ちます。
|
||||
|
||||
### ARIA
|
||||
|
||||
次のページを想像してみてください。
|
||||
|
||||
| Product | Description | Order |
|
||||
| ------------ | ------------------ | ------------ |
|
||||
| Widget | [Description]('#') | [Order]('#') |
|
||||
| Super widget | [Description]('#') | [Order]('#') |
|
||||
|
||||
この例では、description と order のテキストを複製しても、ブラウザを使っている人にとっては意味があります。しかし、スクリーン・リーダーを使っている人には、文脈なしに繰り返される *description* と *order* という単語しか聞こえません。
|
||||
|
||||
これらのタイプのシナリオをサポートするために、HTML は[アクセシブル・リッチ・インターネット・アプリケーション (ARIA)](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA)として知られている一連の属性をサポートしています。これらの属性により、スクリーンリーダーに追加の情報を提供することができます。
|
||||
|
||||
> **NOTE**: HTML の多くの側面と同様に、ブラウザやスクリーンリーダーのサポートは異なるかもしれません。しかし、ほとんどのメインラインのクライアントは ARIA 属性をサポートしています。
|
||||
|
||||
ページのフォーマットでリンクを記述できない場合、`aria-label` を使ってリンクを記述することができます。ウィジェットの説明は
|
||||
|
||||
``` html
|
||||
<a href="#" aria-label="Widget description">description</a>
|
||||
```
|
||||
|
||||
✅ 一般的には、上記のようにセマンティックマークアップを使用することで ARIA の使用が優先されますが、様々な HTML ウィジェットにはセマンティックに相当するものが存在しないことがあります。良い例がツリーです。ツリーには HTML と同等のものがないので、適切なロールとアリアの値でこの要素の一般的な `<div>` を識別します。[ARIA に関する MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA)には、より有用な情報が含まれています。
|
||||
|
||||
```html
|
||||
<h2 id="tree-label">File Viewer</h2>
|
||||
<div role="tree" aria-labelledby="tree-label">
|
||||
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 画像
|
||||
|
||||
言うまでもなく、スクリーンリーダーは画像の中にあるものを自動的に読み取ることができません。画像を確実にアクセスできるようにするには、それほどの労力は必要ありません - それが `alt` 属性のすべてです。意味のある画像はすべて、その画像が何であるかを説明するための `alt` を持つべきです。
|
||||
純粋に装飾的な画像は `alt` 属性に空の文字列を設定しなければなりません。`alt=""`です。これにより、スクリーンリーダが装飾的な画像を不必要に知らせることを防ぐことができます。
|
||||
|
||||
✅ さすがに検索エンジンも画像の中身を理解することができません。彼らもまた、alt テキストを使用しています。ですから、もう一度言いますが、あなたのページがアクセス可能であることを確認することは、追加のボーナスを提供します。
|
||||
|
||||
## キーボード
|
||||
|
||||
マウスやトラックパッドを使用できないユーザーの中には、1つの要素から次の要素へとタブを移動するためにキーボードのインタラクションに頼っている人もいます。キーボードを使用するユーザーがドキュメントの下に移動しながら各インタラクティブ要素にアクセスできるように、Web サイトのコンテンツを論理的な順序で表示することが重要です。Web ページをセマンティック マークアップで構築し、CSS を使用して視覚的なレイアウトをスタイル化している場合、サイトはキーボード ナビゲーションが可能なはずですが、この点を手動でテストすることが重要です。[キーボードナビゲーション戦略](https://webaim.org/techniques/keyboard/)の詳細については、こちらをご覧ください。
|
||||
|
||||
✅ 任意のウェブサイトにアクセスして、キーボードだけを使ってナビゲートしてみてください。何がうまくいき、何がうまくいかないのでしょうか？なぜでしょうか？
|
||||
|
||||
## まとめ
|
||||
|
||||
ある人にとってアクセシブルな Web は、真の意味での「ワールドワイドな Web」ではありません。作成するサイトがアクセシブルであることを保証する最善の方法は、アクセシビリティのベストプラクティスを最初から取り入れることです。余分なステップがありますが、これらのスキルをワークフローに組み込むことで、作成するすべてのページがアクセシブルになることを意味します。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
この HTML を手に取り、学んだ戦略を踏まえて、できるだけアクセスしやすいように書き換えてください。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
Example
|
||||
</title>
|
||||
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-header">
|
||||
<p class="site-title">Turtle Ipsum</p>
|
||||
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
|
||||
</div>
|
||||
<div class="main-nav">
|
||||
<p class="nav-header">Resources</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div>
|
||||
<p class="page-title">Welcome to Turtle Ipsum.
|
||||
<a href="">Click here</a> to learn more.
|
||||
</p>
|
||||
<p class="article-text">
|
||||
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="footer-section">
|
||||
<span class="button">Sign up for turtle news</span>
|
||||
</div><div class="footer-section">
|
||||
<p class="nav-header footer-title">
|
||||
Internal Pages
|
||||
</p>
|
||||
<div class="nav-list">
|
||||
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
|
||||
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="footer-copyright">© 2016 Instrument</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## レクチャー後クイズ
|
||||
[レクチャー後クイズ](.github/post-lecture-quiz.md)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
多くの政府には、アクセシビリティの要件に関する法律があります。あなたの国のアクセシビリティに関する法律をお読みください。何が適用され、何が適用されないのか？例としては、[この政府の Web サイト](https://accessibility.blog.gov.uk/)があります。
|
||||
|
||||
## 課題
|
||||
|
||||
[Analyze a non-accessible web site](assignment.ja.md)
|
||||
|
||||
Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# アクセスできない Web サイトを分析する
|
||||
|
||||
## 説明書
|
||||
|
||||
あなたがアクセシブルではないと思う Web サイトを特定し、そのアクセシビリティを改善するためのアクションプランを作成してください。あなたの最初のタスクは、このサイトを特定し、分析ツールを使用せずにアクセスできないと思う方法を詳細に説明し、Lighthouse 分析にかけることです。この分析結果をもとに、サイトがどのように改善されるかを示す最低10点の詳細な計画を作成してください。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
|
||||
| student report | サイトがどのように不十分であるかについての段落、PDFとしてキャプチャ灯台のレポート、それを改善する方法の詳細と、改善すべき10のポイントのリストが含まれています。 | 必要な 20% が欠落している | 必要な 50% が欠落している |
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
# Getting Started with Web Development
|
||||
|
||||
In questa sezione del curriculum, vi saranno introdotti concetti non relativi al progetto importanti per diventare uno sviluppatore professionista.
|
||||
|
||||
### Argomenti
|
||||
|
||||
1. [Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari](1-intro-to-programming-languages/translations/README.id.md)
|
||||
2. [Concetti base di GitHub](2-github-basics/translations/README.it.md)
|
||||
3. [Concetti base di Accessibilità](3-accessibility/translations/README.it.md)
|
||||
|
||||
### Riconoscimenti
|
||||
|
||||
Concetti Base di Accessibilità è stato scritto con il ♥️ da [Christopher Harrison](https://twitter.com/geektrainer)
|
||||
|
||||
Introduzione a GitHub è stato scritto con il ♥️ da [Floor Drees](https://twitter.com/floordrees)
|
||||
|
||||
Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari sono stati scritti con il ♥️ da [Jasmine Greenaway](https://twitter.com/paladique)
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
# Web 開発を始めるにあたって
|
||||
|
||||
このセクションでは、プロの開発者になるために重要なプロジェクトベースではない概念を紹介します。
|
||||
|
||||
### トピック
|
||||
|
||||
1. [プログラミング言語と開発ツール入門](1-intro-to-programming-languages/README.md)
|
||||
2. [GitHub の基本](2-github-basics/README.md)
|
||||
3. [アクセシビリティの基本](3-accessibility/README.md)
|
||||
|
||||
### Credits
|
||||
|
||||
Basics of Accessibility was written with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer)
|
||||
|
||||
Introduction to GitHub was written with ♥️ by [Floor Drees](https://twitter.com/floordrees)
|
||||
|
||||
Introduction to Programming Languages and Tools of the Trade was written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique)
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
# Dasar-dasar JavaScript: Tipe Data
|
||||
|
||||
|
||||
|
||||
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
|
||||
[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7?loc=id)
|
||||
|
||||
Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web.
|
||||
|
||||
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Jenis data di JavaScript")
|
||||
|
||||
Mari kita mulai dengan variabel dan tipe data yang mengisinya!
|
||||
|
||||
## Variabel
|
||||
|
||||
Variabel menyimpan nilai yang dapat digunakan dan diubah di seluruh kode Anda.
|
||||
|
||||
Membuat dan **mendeklarasikan** variabel memiliki sintaks berikut **[kata kunci] [nama]**. Itu terdiri dari dua bagian:
|
||||
|
||||
- **Kata kunci (Keywords)**. Kata kunci bisa `let` atau `var`.
|
||||
|
||||
> Catatan, Mereka kata kunci `let` diperkenalkan di ES6 dan memberi variabel Anda apa yang disebut _block scope_. Anda disarankan untuk menggunakan `let` di atas `var`. Kita akan membahas cakupan blok lebih mendalam di bagian mendatang.
|
||||
|
||||
- **Nama variabel**, ini adalah nama yang Anda pilih sendiri.
|
||||
|
||||
### Tugas - bekerja dengan variabel
|
||||
|
||||
1. **Deklarasikan variabel**. Mari kita deklarasikan variabel menggunakan kata kunci `let`:
|
||||
|
||||
```javascript
|
||||
let variabelSaya;
|
||||
```
|
||||
|
||||
`variabelSaya` sekarang telah dideklarasikan menggunakan kata kunci `let`. Saat ini tidak memiliki nilai.
|
||||
|
||||
1. **Tetapkan nilai**. Simpan nilai dalam variabel dengan operator `=`, diikuti dengan nilai yang diharapkan.
|
||||
|
||||
```javascript
|
||||
variabelSaya = 123;
|
||||
```
|
||||
|
||||
> Catatan: penggunaan `=` dalam pelajaran ini berarti kita menggunakan "operator penugasan (assignment operator)", yang digunakan untuk menetapkan nilai ke variabel. Itu _tidak menunjukkan kesetaraan_.
|
||||
|
||||
`variabelSaya` sekarang telah _diinisialisasi (initialized)_ dengan nilai 123.
|
||||
|
||||
1. **Refaktor**. Ganti kode Anda dengan pernyataan berikut.
|
||||
|
||||
```javascript
|
||||
let variabelSaya = 123;
|
||||
```
|
||||
|
||||
Di atas disebut inisialisasi _explisit_ saat variabel dideklarasikan dan diberi nilai pada saat yang sama.
|
||||
|
||||
1. **Ubah nilai variabel**. Ubah nilai variabel dengan cara berikut:
|
||||
|
||||
```javascript
|
||||
variabelSaya = 321;
|
||||
```
|
||||
|
||||
Setelah variabel dideklarasikan, Anda dapat mengubah nilainya di titik mana pun dalam kode Anda dengan operator `=` dan nilai baru.
|
||||
|
||||
✅ Cobalah! Anda dapat menulis JavaScript langsung di browser Anda. Buka jendela browser dan arahkan ke Alat Pengembang. Di konsol, Anda akan menemukan prompt; ketik `let variabelSaya = 123`, tekan enter, lalu ketik `variabelSaya`. Apa yang terjadi? Catatan, Anda akan mempelajari lebih lanjut tentang konsep ini di pelajaran berikutnya.
|
||||
|
||||
## Konstanta (Constants)
|
||||
|
||||
Deklarasi dan inisialisasi konstanta mengikuti konsep yang sama sebagai variabel, dengan pengecualian kata kunci `const`. Konstanta biasanya dideklarasikan dengan semua huruf besar.
|
||||
|
||||
```javascript
|
||||
const VARIABEL_SAYA = 123;
|
||||
```
|
||||
|
||||
Konstanta mirip dengan variabel, dengan dua pengecualian:
|
||||
|
||||
- **Harus punya nilai**. Konstanta harus diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode.
|
||||
- **Referensi tidak dapat diubah**. Referensi konstanta tidak dapat diubah setelah diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode. Mari kita lihat dua contoh:
|
||||
|
||||
- **Nilai sederhana**. Berikut ini TIDAK diperbolehkan:
|
||||
|
||||
```javascript
|
||||
const PI = 3;
|
||||
PI = 4; // tidak diperbolehkan
|
||||
```
|
||||
|
||||
- **Referensi objek dilindungi**. Berikut ini TIDAK diperbolehkan.
|
||||
|
||||
```javascript
|
||||
const obj = { a: 3 };
|
||||
obj = { b: 5 }; // tidak diperbolehkan
|
||||
```
|
||||
|
||||
- **Nilai objek tidak dilindungi**. Berikut diperbolehkan:
|
||||
|
||||
```javascript
|
||||
const obj = { a: 3 };
|
||||
obj.a = 5; // diperbolehkan
|
||||
```
|
||||
|
||||
Di atas Anda mengubah nilai objek tetapi bukan referensi itu sendiri, yang membuatnya diizinkan.
|
||||
|
||||
> Catatan, `const` berarti referensi dilindungi dari penugasan ulang. Nilainya tidak _immutable_ dan bisa berubah, terutama jika itu adalah konstruksi kompleks seperti sebuah objek.
|
||||
|
||||
## Tipe Data
|
||||
|
||||
Variabel dapat menyimpan berbagai jenis nilai, seperti angka dan teks. Berbagai jenis nilai ini dikenal sebagai **tipe data**. Tipe data adalah bagian penting dari pengembangan perangkat lunak karena membantu pengembang membuat keputusan tentang bagaimana kode harus ditulis dan bagaimana perangkat lunak harus dijalankan. Selain itu, beberapa tipe data memiliki fitur unik yang membantu mengubah atau mengekstrak informasi tambahan dalam sebuah nilai.
|
||||
|
||||
✅ Tipe Data juga disebut sebagai data primitif JavaScript, karena mereka adalah tipe data tingkat terendah yang disediakan oleh bahasa. Ada 6 tipe data primitif: string, number, bigint, boolean, undefined, dan symbol. Luangkan waktu sebentar untuk memvisualisasikan apa yang mungkin diwakili oleh masing-masing primitif ini. Apa itu `zebra`? Bagaimana dengan `0`? `true`?
|
||||
|
||||
### Angka (Numbers)
|
||||
|
||||
Pada bagian sebelumnya nilai `variabelSaya` adalah tipe data angka.
|
||||
|
||||
`let variabelSaya = 123;`
|
||||
|
||||
Variabel dapat menyimpan semua jenis angka, termasuk desimal atau angka negatif. Angka juga dapat digunakan dengan operator aritmatika, yang dibahas di [bagian selanjutnya](#Operator-Aritmatika).
|
||||
|
||||
### Operator Aritmatika
|
||||
|
||||
Ada beberapa jenis operator untuk digunakan saat menjalankan fungsi aritmatika, dan beberapa di antaranya tercantum di sini:
|
||||
|
||||
| Simbol | Deskripsi | Contoh |
|
||||
| ------ | --------------------------------------------------- | ------------------------------------------ |
|
||||
| `+` | **Penjumlahan**: Menghitung jumlah dari dua angka | `1 + 2 //hasil yang diharapkan adalah 3` |
|
||||
| `-` | **Pengurangan**: Menghitung selisih dua angka | `1 - 2 //hasil yang diharapkan adalah -1` |
|
||||
| `*` | **Perkalian**: Menghitung hasil kali dua angka | `1 * 2 //hasil yang diharapkan adalah 2` |
|
||||
| `/` | **Pembagian**: Menghitung hasil bagi dari dua angka | `1 / 2 //hasil yang diharapkan adalah 0.5` |
|
||||
| `%` | **Sisa**: Menghitung sisa dari pembagian dua angka | `3 % 2 //hasil yang diharapkan adalah 1` |
|
||||
|
||||
✅ Cobalah! Coba operasi aritmatika di konsol browser Anda. Apakah hasilnya mengejutkan Anda?
|
||||
|
||||
### String
|
||||
|
||||
String adalah kumpulan karakter yang berada di antara tanda kutip tunggal atau ganda.
|
||||
|
||||
- `'Ini string'`
|
||||
- `"Ini juga string"`
|
||||
- `let myString = 'Ini adalah nilai string yang disimpan dalam variabel';`
|
||||
|
||||
Ingatlah untuk menggunakan tanda kutip saat menulis string, atau JavaScript akan menganggapnya sebagai nama variabel.
|
||||
|
||||
### Memformat String
|
||||
|
||||
String bersifat tekstual, dan akan membutuhkan pemformatan dari waktu ke waktu.
|
||||
|
||||
Untuk **menggabungkan (concatenate)** dua string atau lebih, atau menggabungkannya, gunakan operator `+`.
|
||||
|
||||
```javascript
|
||||
let myString1 = "Hello";
|
||||
let myString2 = "World";
|
||||
|
||||
myString1 + myString2 + "!"; //HelloWorld!
|
||||
myString1 + " " + myString2 + "!"; //Hello World!
|
||||
myString1 + ", " + myString2 + "!"; //Hello, World!
|
||||
```
|
||||
|
||||
✅ Mengapa `1 + 1 = 2` di JavaScript, tetapi`'1' + '1' = 11?`Pikirkanlah. Bagaimana dengan `'1' + 1`?
|
||||
|
||||
**Template literals** adalah cara lain untuk memformat string, kecuali sebagai pengganti tanda kutip, digunakan backtick. Apa pun yang bukan teks biasa harus ditempatkan di dalam placeholder `${ }`. Ini termasuk variabel apa pun yang mungkin berupa string.
|
||||
|
||||
```javascript
|
||||
let myString1 = "Hello";
|
||||
let myString2 = "World";
|
||||
|
||||
`${myString1} ${myString2}!` //Hello World!
|
||||
`${myString1}, ${myString2}!`; //Hello World!
|
||||
```
|
||||
|
||||
Anda dapat mencapai tujuan pemformatan Anda dengan salah satu metode, tetapi template literal akan menghormati spasi dan jeda baris apa pun.
|
||||
|
||||
✅ Kapan Anda akan menggunakan template literal dibanding string biasa?
|
||||
|
||||
### Boolean
|
||||
|
||||
Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean dapat membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi. Dalam banyak kasus, [operator](#operator) membantu pengaturan nilai Boolean dan Anda akan sering melihat dan menulis variabel yang diinisialisasi atau nilainya diperbarui dengan operator.
|
||||
|
||||
- `let myTrueBool = true`
|
||||
- `let myFalseBool = false`
|
||||
|
||||
✅ Variabel dapat dianggap 'benar (truthy)' jika dievaluasi ke boolean `true`. Menariknya, di JavaScript, [semua nilai adalah benar (truthy) kecuali jika didefinisikan sebagai salah](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Tantangan
|
||||
|
||||
JavaScript terkenal karena cara yang mengejutkan dalam menangani tipe data pada kesempatan tertentu. Lakukan sedikit riset tentang 'kejutaan' ini. Misalnya: sensitivitas kasus bisa menggigit! Coba ini di konsol Anda: `let usia = 1; let Usia = 2; usia == Usia` (meghasilkan `false` - kenapa?). Kejutan lain apa yang bisa kamu temukan?
|
||||
|
||||
## Kuis Pasca-Kuliah
|
||||
|
||||
[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8?loc=id)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
Lihat [daftar latihan JavaScript ini](https://css-tricks.com/snippets/javascript/) dan coba salah satunya. Apa yang kamu pelajari?
|
||||
|
||||
## Tugas
|
||||
|
||||
[Praktek Tipe Data](assignment.id.md)
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
# JavaScript の基本: データ型
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レクチャー前クイズ
|
||||
[レクチャー前クイズ](.github/pre-lecture-quiz.md)
|
||||
|
||||
このレッスンでは、Web 上でインタラクティブな機能を提供する言語である JavaScript の基礎を学びます。
|
||||
|
||||
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript")
|
||||
|
||||
|
||||
まず、変数とそれを埋めるデータ型について説明しましょう!
|
||||
|
||||
## 変数
|
||||
|
||||
変数には、コード全体で使用したり変更したりできる値が格納されています。
|
||||
|
||||
変数の作成と **宣言** には、次のような構文 **[キーワード] [名前]** があります。の2つの部分で構成されています。
|
||||
|
||||
- **キーワード**。キーワードは `let` または `var` です。
|
||||
|
||||
> 注: `let` というキーワードは ES6 で導入されたもので、変数に _ブロックスコープ_ と呼ばれるものを与えます。`var` よりも `let` を使うことをお勧めします。ブロックスコープについては、今後のパートで詳しく説明します。
|
||||
- **変数名**、これは自分で選んだ名前です。
|
||||
|
||||
### タスク - 変数を使って作業する
|
||||
|
||||
1. **変数の宣言**. `let` キーワードを使って変数を宣言してみましょう。
|
||||
|
||||
```javascript
|
||||
let myVariable;
|
||||
```
|
||||
|
||||
`myVariable` は `let` キーワードを使用して宣言されました。これは現在のところ値を持っていません。
|
||||
|
||||
1. **値を代入します**。値を `=` 演算子で変数に格納し、その後に期待される値を指定します。
|
||||
|
||||
```javascript
|
||||
myVariable = 123;
|
||||
```
|
||||
|
||||
> 注: このレッスンで `=` を使うということは、変数に値を設定するために使われる「代入演算子」を使うことを意味します。これは平等を示すものではありません。
|
||||
|
||||
`myVariable` は値 123 で *初期化* されました。
|
||||
|
||||
1. **リファクタ**。コードを以下の文に置き換えてください。
|
||||
|
||||
```javascript
|
||||
let myVariable = 123;
|
||||
```
|
||||
|
||||
上記のように変数が宣言され、同時に値が代入されることを _明示的初期化_ といいます。
|
||||
|
||||
1. **変数の値を変更します**。以下の方法で変数値を変更します。
|
||||
|
||||
```javascript
|
||||
myVariable = 321;
|
||||
```
|
||||
|
||||
一度変数が宣言されると、`=` 演算子と新しい値を使って、コードのどの時点でもその値を変更することができます。
|
||||
|
||||
✅ お試しください ブラウザで JavaScript を書くことができます。ブラウザのウィンドウを開き、開発者ツールに移動します。コンソールにプロンプトが表示されるので、`let myVariable = 123` と入力して return を押し、`myVariable` と入力します。どうなりますか？これらの概念については、後のレッスンで詳しく説明します。
|
||||
|
||||
## 定数
|
||||
|
||||
定数の宣言と初期化は、`const` キーワードを除いて、変数と同じ概念に従います。定数は通常、すべて大文字で宣言されます。
|
||||
|
||||
```javascript
|
||||
const MY_VARIABLE = 123;
|
||||
```
|
||||
|
||||
定数は変数と似ていますが、2つの例外があります。
|
||||
|
||||
- **値を持つ必要があります**。定数を初期化しておかないと、コード実行時にエラーが発生します。
|
||||
- **参照は変更できません**。定数の参照は、一度初期化すると変更できません。そうしないと、コードを実行するときにエラーが発生します。2つの例を見てみましょう。
|
||||
- **単純な値**です。以下は許可されていません。
|
||||
|
||||
```javascript
|
||||
const PI = 3;
|
||||
PI = 4; // 不許可
|
||||
```
|
||||
|
||||
- **オブジェクト参照は保護されています**。以下は許可されていません。
|
||||
|
||||
```javascript
|
||||
const obj = { a: 3 };
|
||||
obj = { b: 5 } // 不許可
|
||||
```
|
||||
|
||||
- **オブジェクトの値は保護されていません**。以下は許可されています。
|
||||
|
||||
```javascript
|
||||
const obj = { a: 3 };
|
||||
obj.a = 5; // 許可
|
||||
```
|
||||
|
||||
上記ではオブジェクトの値を変更していますが、参照自体は変更できません。
|
||||
|
||||
> 注: `const` は参照が再割り当てから保護されていることを意味します。しかし、値は _不変_ ではなく、特にオブジェクトのような複雑な構造体であれば、変更される可能性があります。
|
||||
|
||||
## データ型
|
||||
|
||||
変数は、数値やテキストなど、多くの異なるタイプの値を格納することができます。これらのさまざまなタイプの値は、**データ型**として知られています。データ型は、開発者がコードをどのように書くべきか、ソフトウェアをどのように実行するべきかを決定するのに役立つため、ソフトウェア開発において重要な役割を果たします。さらに、データ型の中には、値の中の付加的な情報を変換したり抽出したりするのに役立つ独自の機能を持つものもあります。
|
||||
|
||||
✅ データ型は、言語によって提供される最低レベルのデータ型であるため、JavaScript のデータプリミティブとも呼ばれています。プリミティブデータ型には、string、number、bigint、boolean、undefined、symbol の6つのデータ型があります。これらのプリミティブのそれぞれが何を表しているかを可視化してみましょう。`zebra` は何でしょうか？ `0` はどうでしょうか？ `true` はどうでしょうか?
|
||||
|
||||
### 数値
|
||||
|
||||
前のセクションでは、`myVariable` の値は数値データ型でした。
|
||||
|
||||
`let myVariable = 123;`
|
||||
|
||||
変数は、小数や負の数を含むあらゆるタイプの数値を格納することができます。数値は、[次のセクション](#operators)で説明する算術演算子と一緒に使用することもできます。
|
||||
|
||||
### 算術演算子
|
||||
|
||||
算術関数を実行する際に使用する演算子にはいくつかの種類があり、ここではいくつかを紹介します。
|
||||
|
||||
| シンボル | 説明 | 例 |
|
||||
| ------ | ------------------------------------------------------------------------ | -------------------------------- |
|
||||
| `+` | **加算**: 2つの数値の和を計算します。 | `1 + 2 //期待される答えは 3 です。` |
|
||||
| `-` | **減算**: 2つの数値の差を計算します。 | `1 - 2 //期待される答えは -1 です。` |
|
||||
| `*` | **乗算**: 2つの数値の積を計算します。 | `1 * 2 //期待される答えは 2 です。` |
|
||||
| `/` | **除算**: 2つの数値の商を計算します。 | `1 / 2 //期待される答えは 0.5 です。` |
|
||||
| `%` | **余り**: 2つの数値の割り算から余りを計算します | `1 % 2 //期待される答えは 1 です。` |
|
||||
|
||||
✅ 試してみましょう! ブラウザのコンソールで算術を試してみてください。驚きの結果が出ましたか？
|
||||
|
||||
### 文字列
|
||||
|
||||
文字列は、一重引用符または二重引用符の間に存在する文字の集合です。
|
||||
|
||||
- `'This is a string'`
|
||||
- `"This is also a string"`
|
||||
- `let myString = 'This is a string value stored in a variable';`
|
||||
|
||||
文字列を書くときには引用符を使うことを忘れないでください。そうしないと、JavaScript はそれを変数名とみなします。
|
||||
|
||||
### 文字列のフォーマット
|
||||
|
||||
文字列はテキストであり、時々フォーマットが必要になります。
|
||||
|
||||
2 つ以上の文字列を **連結** したり、結合したりするには、`+` 演算子を使用します。
|
||||
|
||||
```javascript
|
||||
let myString1 = "Hello";
|
||||
let myString2 = "World";
|
||||
|
||||
myString1 + myString2 + "!"; //HelloWorld!
|
||||
myString1 + " " + myString2 + "!"; //Hello World!
|
||||
myString1 + ", " + myString2 + "!"; //Hello, World!
|
||||
|
||||
```
|
||||
|
||||
✅ JavaScript では `1 + 1 = 2` なのに、`'1' + '1' = 11` なのはなぜでしょうか? `'1' + 1` はどうでしょうか？
|
||||
|
||||
**テンプレートリテラル** は文字列をフォーマットするもう一つの方法ですが、引用符の代わりにバックスティックを使用します。プレーンテキストではないものはすべてプレースホルダー `${ }` の中に入れなければなりません。これには、文字列である可能性のある変数も含まれます。
|
||||
|
||||
```javascript
|
||||
let myString1 = "Hello";
|
||||
let myString2 = "World";
|
||||
|
||||
`${myString1} ${myString2}!` //Hello World!
|
||||
`${myString1}, ${myString2}!` //Hello, World!
|
||||
```
|
||||
|
||||
どちらの方法でも書式設定の目標を達成することができますが、テンプレートリテラルはスペースや改行を尊重します。
|
||||
|
||||
✅ テンプレートリテラルとプレーンな文字列を使用するのはいつですか？
|
||||
|
||||
### ブール値
|
||||
|
||||
ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。多くの場合、[演算子](#operators) がブール値の設定を支援し、変数が初期化されたり、演算子で値が更新されたりしていることに気付いたり、書いたりすることが多いでしょう。
|
||||
|
||||
- `let myTrueBool = true`
|
||||
- `let myFalseBool = false`
|
||||
|
||||
✅ 変数の評価値がブール値 `true` であれば、変数は 'truthy' とみなされます。興味深いことに、JavaScript では、[falsy として定義されていない限り、すべての値は truthy です](https://developer.mozilla.org/ja/docs/Glossary/Truthy)。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
JavaScript は、たまにデータ型を扱う際の意外な方法で悪名高いです。これらの 'gotchas' について少し調べてみてください。例えば: 大文字小文字の区別でつまずくことがあります! コンソールで以下のようにしてみてください。`let age = 1; let Age = 2; age == Age` (解決は `false` -- なぜ?) 他にどのような gotchas があるでしょうか?
|
||||
|
||||
## レクチャー後クイズ
|
||||
[レクチャー後クイズ](.github/post-lecture-quiz.md)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
この [JavaScript の練習問題リスト](https://css-tricks.com/snippets/javascript/)を見て、1つ試してみてください。何を学びましたか？
|
||||
|
||||
## 課題
|
||||
|
||||
[データ型の練習](assignment.ja.md)
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# Praktek Tipe Data
|
||||
|
||||
## Instruksi
|
||||
|
||||
Bayangkan Anda sedang membuat keranjang belanja. Tulislah beberapa dokumentasi tentang tipe data yang Anda perlukan untuk melengkapi pengalaman berbelanja Anda. Bagaimana Anda sampai pada pilihan Anda?
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Memenuhi Syarat | Perlu Perbaikan |
|
||||
|----------|----------------------------------------------------------------------------------------|------------------------------|----------------------------|
|
||||
| | Enam tipe data didaftar dan dieksplorasi secara rinci, mendokumentasikan penggunaannya | Empat tipe data dieksplorasi | Dua tipe data dieksplorasi |
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# データ型の練習
|
||||
|
||||
## 説明書
|
||||
|
||||
あなたがショッピングカートを構築していると想像してください。ショッピング体験を完成させるために必要なデータ型について、いくつかの文書を書いてください。どのようにして選択にたどり着いたのでしょうか？
|
||||
|
||||
## ルーブリック
|
||||
|
||||
基準 | 模範的な例 | 適切な | 改善が必要
|
||||
--- | --- | --- | -- |
|
||||
||6つのデータタイプをリストアップして詳細に調査し、その使用法を文書化しています。|4つのデータ型が探索されています。|2つのデータタイプが探索されています。|
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Pre-Lecture Quiz
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9)
|
||||
|
||||
When we think about writing code, we always want to ensure our code is readable. While this sounds counterintuitive, code is read many more times than it's written. One core tool in a developer's toolbox to ensure maintainable code is the **function**.
|
||||
|
||||
|
|
@ -181,7 +181,7 @@ You've now seen we have three ways to pass a function as a parameter and might b
|
|||
Can you articulate in one sentence the difference between functions and methods? Give it a try!
|
||||
|
||||
## Post-Lecture Quiz
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,194 @@
|
|||
# Dasar-dasar JavaScript: Metode dan Fungsi
|
||||
|
||||
|
||||
|
||||
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
|
||||
[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9?loc=id)
|
||||
|
||||
Ketika kita berpikir tentang menulis kode, kita selalu ingin memastikan kode kita dapat dibaca. Meskipun ini terdengar berlawanan dengan intuisi, kode dibaca lebih banyak kali daripada yang tertulis. Salah satu alat inti dalam kotak alat pengembang untuk memastikan kode yang dapat dipelihara adalah **function (fungsi)**.
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Metode dan Fungsi")
|
||||
|
||||
## Fungsi
|
||||
|
||||
Pada intinya, fungsi adalah sekumpulan kode yang dapat kita jalankan sesuai permintaan. Ini sempurna untuk skenario di mana kita perlu melakukan tugas yang sama beberapa kali; daripada menduplikasi logika di beberapa lokasi (yang akan menyulitkan pembaruan saat waktunya tiba), kita dapat memusatkannya di satu lokasi, dan memanggilnya kapan pun kita membutuhkan operasi dilakukan - Anda bahkan dapat memanggil fungsi dari fungsi lain!.
|
||||
|
||||
Sama pentingnya adalah kemampuan untuk menamai suatu fungsi. Meskipun ini mungkin tampak sepele, nama tersebut memberikan cara cepat untuk mendokumentasikan bagian kode. Anda bisa menganggap ini sebagai label pada sebuah tombol. Jika saya mengklik tombol yang bertuliskan "Batalkan pengatur waktu", saya tahu itu akan berhenti menjalankan jam.
|
||||
|
||||
## Membuat dan memanggil suatu fungsi
|
||||
|
||||
Sintaks untuk suatu fungsi terlihat seperti berikut:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() {
|
||||
// definisi fungsi
|
||||
// definisi fungsi/tubuh
|
||||
}
|
||||
```
|
||||
|
||||
Jika saya ingin membuat fungsi untuk menampilkan salam, mungkin akan terlihat seperti ini:
|
||||
|
||||
```javascript
|
||||
function tampilkanSapaan() {
|
||||
console.log("Hello, world!");
|
||||
}
|
||||
```
|
||||
|
||||
Kapanpun kita ingin memanggil (atau memanggil) fungsi kita, kita menggunakan nama fungsi yang diikuti dengan `()`. Perlu diperhatikan fakta bahwa fungsi kita dapat didefinisikan sebelum atau sesudah kita memutuskan untuk memanggilnya; kompilator JavaScript (JavaScript compiler) akan menemukannya untuk Anda.
|
||||
|
||||
```javascript
|
||||
// memanggil fungsi kita
|
||||
tampilkanSapaan();
|
||||
```
|
||||
|
||||
> **CATATAN:** Ada jenis fungsi khusus yang dikenal sebagai **method**, yang telah Anda gunakan! Faktanya, kita melihat ini di demo kita di atas ketika kita menggunakan `console.log`. Apa yang membuat metode berbeda dari fungsi adalah metode dilampirkan ke objek (`konsol` dalam contoh kita), sementara fungsi mengambang bebas. Anda akan mendengar banyak pengembang menggunakan istilah ini secara bergantian.
|
||||
|
||||
### Praktik terbaik fungsi
|
||||
|
||||
Ada beberapa praktik terbaik yang perlu diperhatikan saat membuat fungsi
|
||||
|
||||
- Seperti biasa, gunakan nama deskriptif agar Anda tahu fungsinya
|
||||
- Gunakan **camelCasing** untuk menggabungkan kata-kata
|
||||
- Jaga agar fungsi Anda tetap fokus pada tugas tertentu
|
||||
|
||||
## Memasukkan informasi ke suatu fungsi
|
||||
|
||||
Agar suatu fungsi lebih dapat digunakan kembali, Anda sering kali ingin menyampaikan informasi ke dalamnya. Jika kita mempertimbangkan contoh `tampilkanSapaan` di atas, itu hanya akan menampilkan **Halo, dunia!**. Bukan fungsi paling berguna yang bisa dibuat seseorang. Jika kita ingin membuatnya sedikit lebih fleksibel, seperti mengizinkan seseorang untuk menentukan nama orang yang akan disapa, kita dapat menambahkan **parameter**. Parameter (juga terkadang disebut **argumen**), adalah informasi tambahan yang dikirim ke suatu fungsi.
|
||||
|
||||
Parameter dicantumkan di bagian definisi dalam tanda kurung dan dipisahkan dengan koma seperti ini:
|
||||
|
||||
```javascript
|
||||
function nama(param, param2, param3) {}
|
||||
```
|
||||
|
||||
Kita dapat memperbarui `tampilkanSapaan` kita untuk menerima sebuah nama dan menampilkannya.
|
||||
|
||||
```javascript
|
||||
function tampilkanSapaan(nama) {
|
||||
const pesan = `Hello, ${nama}!`;
|
||||
console.log(pesan);
|
||||
}
|
||||
```
|
||||
|
||||
Ketika kita ingin memanggil fungsi kita dan memasukkan parameternya, kita tentukan di dalam tanda kurung.
|
||||
|
||||
```javascript
|
||||
tampilkanSapaan("Christopher");
|
||||
// Menampilkan "Hello, Christopher!" ketika dijalankan
|
||||
```
|
||||
|
||||
## Nilai dasar (Nilai Default)
|
||||
|
||||
Kita dapat membuat fungsi kita lebih fleksibel dengan menambahkan lebih banyak parameter. Tetapi bagaimana jika kita tidak ingin setiap nilai ditentukan? Sesuai dengan contoh sapaan kita, kita bisa membiarkan nama sesuai kebutuhan (kita perlu tahu siapa yang kita sapa), tapi kita ingin membiarkan sapaan itu sendiri disesuaikan sesuai keinginan. Jika seseorang tidak ingin menyesuaikannya, kita memberikan nilai default sebagai gantinya. Untuk memberikan nilai default ke parameter, kita menyetelnya dengan cara yang sama seperti kita menyetel nilai untuk variabel - `namaParameter = 'nilaiDefault'`. Berikut contoh lengkapnya:
|
||||
|
||||
```javascript
|
||||
function tampilkanSapaan(nama, salam = "Hello") {
|
||||
console.log(`${salam}, ${nama}`);
|
||||
}
|
||||
```
|
||||
|
||||
Ketika kita memanggil fungsi tersebut, kita kemudian dapat memutuskan apakah kita ingin menetapkan nilai dari `salam`.
|
||||
|
||||
```javascript
|
||||
tampilkanSapaan("Christopher");
|
||||
// menampilkan "Hello, Christopher"
|
||||
|
||||
tampilkanSapaan("Christopher", "Hi");
|
||||
// menampilkan "Hi, Christopher"
|
||||
```
|
||||
|
||||
## Nilai Kembali (Return values)
|
||||
|
||||
Hingga saat ini fungsi yang kita buat akan selalu menghasilkan [konsol](https://developer.mozilla.org/en-US/docs/Web/API/console). Terkadang ini persis seperti yang kita cari, terutama saat kita membuat fungsi yang akan memanggil layanan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan kalkulasi dan memberikan nilai kembali sehingga saya dapat menggunakannya di tempat lain?
|
||||
|
||||
Kita bisa melakukan ini dengan menggunakan **nilai kembali (return value)**. Nilai kembali dikembalikan oleh fungsi, dan dapat disimpan dalam variabel sama seperti kita dapat menyimpan nilai literal seperti string atau angka.
|
||||
|
||||
Jika suatu fungsi mengembalikan sesuatu maka kata kunci `return` digunakan. Kata kunci `return` mengharapkan nilai atau referensi dari apa yang dikembalikan seperti:
|
||||
|
||||
```javascript
|
||||
return variabelSaya;
|
||||
```
|
||||
|
||||
Kita bisa membuat fungsi untuk membuat pesan ucapan dan mengembalikan nilainya ke pemanggil
|
||||
|
||||
```javascript
|
||||
function buatPesanSapaan(nama) {
|
||||
const pesan = `Hello, ${nama}`;
|
||||
return pesan;
|
||||
}
|
||||
```
|
||||
|
||||
Saat memanggil fungsi ini, kita akan menyimpan nilai dalam variabel. Ini hampir sama dengan cara kita menetapkan variabel ke nilai statis (seperti `const nama = 'Christopher'`).
|
||||
|
||||
```javascript
|
||||
const pesanSapaan = buatPesanSapaan("Christopher");
|
||||
```
|
||||
|
||||
## Fungsi sebagai parameter untuk fungsi
|
||||
|
||||
Saat Anda maju dalam karir pemrograman Anda, Anda akan menemukan fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tanggapan.
|
||||
|
||||
Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulai timer dan akan mengeksekusi kode setelah selesai. Kita perlu memberi tahu kode apa yang ingin kita jalankan. Kedengarannya seperti pekerjaan yang sempurna untuk suatu fungsi!
|
||||
|
||||
Jika Anda menjalankan kode di bawah ini, setelah 3 detik Anda akan melihat pesan **3 detik telah berlalu**.
|
||||
|
||||
```javascript
|
||||
function tampilkanSelesai() {
|
||||
console.log("3 detik telah berlalu");
|
||||
}
|
||||
// nilai timer dalam milidetik
|
||||
setTimeout(3000, tampilkanSelesai);
|
||||
```
|
||||
|
||||
### Fungsi anonim
|
||||
|
||||
Mari kita lihat lagi apa yang telah kita bangun. Kita membuat fungsi dengan nama yang akan digunakan satu kali. Saat aplikasi kita menjadi lebih kompleks, kita dapat melihat diri kita sendiri membuat banyak fungsi yang hanya akan dipanggil sekali. Ini tidak ideal. Ternyata, kita tidak selalu perlu memberi nama!
|
||||
|
||||
Saat kita mengirimkan fungsi sebagai parameter, kita dapat mengabaikan pembuatannya terlebih dahulu dan sebagai gantinya membuatnya sebagai bagian dari parameter. Kita menggunakan kata kunci `function` yang sama, tetapi kita membuatnya sebagai parameter.
|
||||
|
||||
Mari tulis ulang kode di atas untuk menggunakan fungsi anonim:
|
||||
|
||||
```javascript
|
||||
setTimeout(3000, function () {
|
||||
console.log("3 detik telah berlalu");
|
||||
});
|
||||
```
|
||||
|
||||
Jika Anda menjalankan kode baru kita, Anda akan melihat kita mendapatkan hasil yang sama. Kita telah membuat fungsi, tetapi tidak harus memberinya nama!
|
||||
|
||||
### Fungsi panah gemuk
|
||||
|
||||
Satu pintasan yang umum di banyak bahasa pemrograman (termasuk JavaScript) adalah kemampuan untuk menggunakan apa yang disebut fungsi **panah (arrow)** atau **panah gemuk (fat arrow)**. Ini menggunakan indikator khusus `=>`, yang terlihat seperti panah - demikian namanya! Dengan menggunakan `=>`, kita dapat melewati kata kunci `function`.
|
||||
|
||||
Mari kita tulis ulang kode kita sekali lagi untuk menggunakan fungsi panah gemuk:
|
||||
|
||||
```javascript
|
||||
setTimeout(3000, () => {
|
||||
console.log("3 detik telah berlalu");
|
||||
});
|
||||
```
|
||||
|
||||
### Kapan menggunakan setiap strategi
|
||||
|
||||
Anda sekarang telah melihat bahwa kita memiliki tiga cara untuk meneruskan fungsi sebagai parameter dan mungkin bertanya-tanya kapan harus menggunakannya. Jika Anda tahu Anda akan menggunakan fungsi tersebut lebih dari sekali, buatlah seperti biasa. Jika Anda akan menggunakannya hanya untuk satu lokasi, biasanya yang terbaik adalah menggunakan fungsi anonim. Apakah Anda menggunakan fungsi panah gemuk atau tidak atau sintaks `function` yang lebih tradisional terserah Anda, tetapi Anda akan melihat sebagian besar pengembang modern lebih memilih`=>`.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Tantangan
|
||||
|
||||
Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan metode? Cobalah!
|
||||
|
||||
## Kuis Pasca-Kuliah
|
||||
|
||||
[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10?loc=id)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
Layak [membaca lebih banyak tentang fungsi panah](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), karena semakin sering digunakan dalam basis kode. Berlatihlah menulis fungsi, lalu menulis ulang dengan sintaks ini.
|
||||
|
||||
## Tugas
|
||||
|
||||
[Bersenang-senang dengan Fungsi](./assignment.id.md)
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
# JavaScript の基本: メソッドと関数
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レクチャー前クイズ
|
||||
[レクチャー前クイズ](.github/pre-lecture-quiz.md)
|
||||
|
||||
コードを書くことを考えるとき、私たちは常にコードが読みやすいようにしたいと考えています。直感的ではないように聞こえるかもしれませんが、コードは書かれた回数よりも何度も読まれます。コードを確実にメンテナンスできるようにするための開発者のツールボックスの中心的なツールの一つが **関数** です。
|
||||
|
||||
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
||||
|
||||
## 関数
|
||||
|
||||
コアとなるのは、関数は必要に応じて実行できるコードのブロックです。これは、同じタスクを何度も実行する必要がある場合に最適です。ロジックを複数の場所に複製するのではなく (時間が来たときに更新するのが困難になります)、1つの場所に集中させ、実行する操作が必要なときにいつでも呼び出すことができます - 他の関数から関数を呼び出すこともできます!
|
||||
|
||||
他の関数から関数を呼び出すこともできます！同じくらい重要なのは、関数に名前を付ける機能です。これは些細なことのように思われるかもしれませんが、名前をつけることでコードのセクションを簡単に文書化することができます。これはボタンのラベルのようなものと考えることができます。もし "Cancel timer" と書かれたボタンをクリックすると、それが時計の動作を止めようとしていることがわかります。
|
||||
|
||||
## 関数の作成と呼び出し
|
||||
|
||||
関数の構文は次のようになります:
|
||||
|
||||
```javascript
|
||||
function nameOfFunction() { // 関数の定義
|
||||
// 関数の定義/中身
|
||||
}
|
||||
```
|
||||
|
||||
挨拶を表示する関数を作ろうと思ったら、こんな感じになるかもしれません:
|
||||
|
||||
```javascript
|
||||
function displayGreeting() {
|
||||
console.log('Hello, world!');
|
||||
}
|
||||
```
|
||||
|
||||
関数を直接呼び出したい (または別スレッド、別コンテキストの関数を呼び出したい) ときはいつでも、関数名の後に `()` をつけます。関数を呼び出す前に定義しても後に定義してもよいという事実は注目に値します; JavaScript コンパイラがそれを見つけてくれます。
|
||||
|
||||
```javascript
|
||||
// 関数の呼び出し
|
||||
displayGreeting();
|
||||
```
|
||||
|
||||
> **注:** **メソッド** として知られている特殊なタイプの関数がありますが、これはすでに使ったことがあるでしょう！実際、上のデモではこれを見ました。実際、上のデモでは `console.log` を使っています。メソッドが関数と異なるのは、メソッドがオブジェクト (この例では `console`) にアタッチされているのに対し、関数はフリーフローティングです。多くの開発者がこれらの用語を互換性を持って使っているのを耳にするでしょう。
|
||||
|
||||
### 関数のベストプラクティス
|
||||
|
||||
機能を作成する際に留意すべきベストプラクティスがいくつかあります。
|
||||
|
||||
- いつものように、関数が何をするのかがわかるように、記述的な名前を使用します
|
||||
- **キャメルケーシング** を使用して単語を組み合わせます
|
||||
- 関数を特定のタスクに集中させます
|
||||
|
||||
## 関数への情報の受け渡し
|
||||
|
||||
関数をより再利用可能なものにするためには、情報を渡したいことがよくあります。上の `displayGreeting` の例を考えてみると、**Hello, world!** しか表示されません。これでは、作成できる関数の中で最も有用なものとは言えません。挨拶する相手の名前を指定できるようにするなど、もう少し柔軟にしたい場合は、**パラメータ** を追加することができます。パラメータ (**引数** と呼ばれることもあります) は、関数に送られる追加情報です。
|
||||
|
||||
パラメータは定義部分に括弧内に記載されており、以下のようにカンマで区切られています:
|
||||
|
||||
```javascript
|
||||
function name(param, param2, param3) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
名前を受け付けてそれを表示するように `displayGreeting` を更新することができます。
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name) {
|
||||
const message = `Hello, ${name}!`;
|
||||
console.log(message);
|
||||
}
|
||||
```
|
||||
|
||||
関数を呼び出してパラメータを渡すときは、括弧内で指定します。
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// 実行時に "Hello, Christopher!" と表示される
|
||||
```
|
||||
|
||||
## 初期値
|
||||
|
||||
より多くのパラメータを追加することで、関数をさらに柔軟にすることができます。しかし、すべての値を指定する必要がない場合はどうでしょうか？挨拶の例に倣って、名前は必須のままにしておくこともできますが (誰に挨拶しているのかを知る必要があります)、挨拶自体は必要に応じてカスタマイズできるようにしたいと考えています。誰かがカスタマイズしたくない場合は、代わりにデフォルト値を指定します。パラメータにデフォルト値を設定するには、変数に値を設定するのと同じ方法 - `parameterName = 'defaultValue'` でパラメータを設定します。完全な例を見るには、以下を参照してください。
|
||||
|
||||
```javascript
|
||||
function displayGreeting(name, salutation='Hello') {
|
||||
console.log(`${salutation}, ${name}`);
|
||||
}
|
||||
```
|
||||
|
||||
関数を呼び出すときに、`salutation` に値を設定するかどうかを決めることができます。
|
||||
|
||||
```javascript
|
||||
displayGreeting('Christopher');
|
||||
// "Hello, Christopher" と表示されます。
|
||||
|
||||
displayGreeting('Christopher', 'Hi');
|
||||
// "Hi, Christopher" と表示されます。
|
||||
```
|
||||
|
||||
## 戻り値
|
||||
|
||||
今までは、私たちが作った関数は常に [console](https://developer.mozilla.org/ja/docs/Web/API/console) に出力されていました。特に他のサービスを呼び出す関数を作成する場合には、これがまさに求めているものになることがあります。しかし、計算を実行するヘルパー関数を作成して値を返し、それを他の場所で使えるようにしたい場合はどうしたらいいでしょうか？
|
||||
|
||||
これを行うには、**戻り値** を使用します。戻り値は関数から返され、文字列や数値などのリテラル値を格納するのと同じように変数に格納することができます。
|
||||
|
||||
関数が何かを返す場合は、キーワード `return` が使用されます。キーワード `return` は、以下のように返されるものの値や参照を期待しています:
|
||||
|
||||
```javascript
|
||||
return myVariable;
|
||||
```
|
||||
|
||||
挨拶メッセージを作成して、その値を呼び出し元に返す関数を作成することができます。
|
||||
|
||||
```javascript
|
||||
function createGreetingMessage(name) {
|
||||
const message = `Hello, ${name}`;
|
||||
return message;
|
||||
}
|
||||
```
|
||||
|
||||
この関数を呼び出すときには、変数に値を格納します。これは、(`const name = 'Christopher'` のように) 変数に静的な値を設定するのと同じ方法です。
|
||||
|
||||
```javascript
|
||||
const greetingMessage = createGreetingMessage('Christopher');
|
||||
```
|
||||
|
||||
## 関数のパラメータとしての関数
|
||||
|
||||
プログラミングのキャリアを積んでいくと、関数をパラメータとして受け入れる関数に出くわすようになります。この巧妙なトリックは、何かがいつ発生するか、または完了するかわからないが、レスポンスとして操作を実行する必要があることがわかっている場合によく使われます。
|
||||
|
||||
例として、タイマーを開始し、タイマーが完了したらコードを実行する [setTimeout](https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) を考えてみましょう。どのようなコードを実行したいかを伝える必要があります。関数としては完璧な仕事のように聞こえます。
|
||||
|
||||
以下のコードを実行すると、3秒後に **3秒が経過しました** というメッセージが表示されます。
|
||||
|
||||
```javascript
|
||||
function displayDone() {
|
||||
console.log('3秒が経過しました');
|
||||
}
|
||||
// タイマーの値はミリ秒単位
|
||||
setTimeout(displayDone, 3000);
|
||||
```
|
||||
|
||||
### 匿名関数
|
||||
|
||||
もう一度、作ったものを見てみましょう。一度だけ使用される名前の関数を作成しています。アプリケーションが複雑になるにつれて、一度しか呼ばれない関数をたくさん作ることになるでしょう。これは理想的ではありません。しかし、常に名前を指定する必要はありません。
|
||||
|
||||
パラメータとして関数を渡すときは、事前に関数を作成する必要はなく、代わりにパラメータの一部として関数を作成することができます。同じ `function` キーワードを使用しますが、代わりにパラメータとしてビルドします。
|
||||
|
||||
上のコードを書き換えて、匿名の関数を使用してみましょう。
|
||||
|
||||
```javascript
|
||||
setTimeout(function() {
|
||||
console.log('3秒が経過しました');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
新しいコードを実行すると、同じ結果が得られることに気づくでしょう。関数を作りましたが、名前をつける必要はありませんでした。
|
||||
|
||||
### ファットアロー関数
|
||||
|
||||
多くのプログラミング言語 (JavaScript を含む) に共通するショートカットは、**アロー** または **ファットアロー** 関数と呼ばれるものを使用することです。これは、矢印のように見える `=>` という特殊なインジケータを使用します。`=>` を使うことで、`function` キーワードを省略することができます。
|
||||
|
||||
ファットアロー関数を使って、もう一度コードを書き換えてみましょう。
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log('3 seconds has elapsed');
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
### それぞれの戦略を使うとき
|
||||
|
||||
関数をパラメータとして渡すには3つの方法があることがわかりましたが、それぞれをいつ使うか迷っているかもしれません。関数を複数回使用することがわかっているのであれば、通常通りに作成してください。1 つの場所だけで使用する場合は、一般的には匿名関数を使用するのがベストです。太いアロー関数を使うか、より伝統的な `function` 構文を使うかはあなた次第ですが、最近の開発者の多くは `=>` を好んでいることに気づくでしょう。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
関数とメソッドの違いを一文で表現できますか？試してみてください。
|
||||
|
||||
## レクチャー後クイズ
|
||||
[レクチャー後クイズ](.github/post-lecture-quiz.md)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
コードベースで使われることが多くなってきているアロー関数については、[もう少し読み込んでみる](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)価値があると思います。この構文で関数を書いて、それを書き換える練習をしてみましょう。
|
||||
|
||||
## 課題
|
||||
|
||||
[関数で楽しむ](assignment.ja.md)
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# Bersenang-senang dengan Fungsi
|
||||
|
||||
## Instruksi
|
||||
|
||||
Buat fungsi yang berbeda, baik fungsi yang mengembalikan sesuatu maupun fungsi yang tidak mengembalikan apa pun.
|
||||
|
||||
Lihat apakah Anda dapat membuat fungsi yang memiliki campuran parameter dan parameter dengan nilai default.
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Memenuhi Syarat | Perlu Perbaikan |
|
||||
|----------|---------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|---------------------|
|
||||
| | Solusi ditawarkan dengan dua atau lebih fungsi yang berkinerja baik dengan parameter yang beragam | Solusi kerja ditawarkan dengan satu fungsi dan beberapa parameter | Solusi memiliki bug |
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# 関数で楽しむ
|
||||
|
||||
## 説明書
|
||||
|
||||
何かを返す関数と何も返さない関数の両方の異なる関数を作成します。
|
||||
|
||||
デフォルト値を持つパラメータとパラメータが混在した関数を作成できるかどうかを見てみましょう。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||
| | ソリューションは、多様なパラメータを持つ2つ以上の関数で提供されます。 | ワーキングソリューションは、1つの関数と少数のパラメータで提供されます。 | ソリューションにはバグがあります。 |
|
||||
|
|
@ -3,9 +3,8 @@
|
|||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
##
|
||||
Pre-Lecture Quiz
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
## Pre-Lecture Quiz
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11)
|
||||
|
||||
Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types
|
||||
|
||||
|
|
@ -28,10 +27,10 @@ Operators are used to evaluate conditions by making comparisons that will create
|
|||
|
||||
| Symbol | Description | Example |
|
||||
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
|
||||
| `<` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than the right | `5 < 6 // true` |
|
||||
| `<=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than or equal to the right | `5 <= 6 // true` |
|
||||
| `>` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` |
|
||||
| `>=` | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 >= 6 // false` |
|
||||
| `<` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than the right | `5 < 6 // true` |
|
||||
| `<=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than or equal to the right | `5 <= 6 // true` |
|
||||
| `>` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` |
|
||||
| `>=` | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 >= 6 // false` |
|
||||
| `===` | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type. | `5 === 6 // false` |
|
||||
| `!==` | **Inequality**: Compares two values and returns the opposite Boolean value of what a strict equality operator would return | `5 !== 6 // true` |
|
||||
|
||||
|
|
@ -125,7 +124,7 @@ if (!condition) {
|
|||
`if...else` isn't the only way to express decision logic. You can also use something called a ternary operator. The syntax for it looks like this:
|
||||
|
||||
```javascript
|
||||
let variable = condition ? <return this if true> : <return this if false>`
|
||||
let variable = condition ? <return this if true> : <return this if false>
|
||||
```
|
||||
|
||||
Below is a more tangible example:
|
||||
|
|
@ -160,9 +159,9 @@ if (firstNumber > secondNumber) {
|
|||
|
||||
Create a program that is written first with logical operators, and then rewrite it using a ternary expression. What's your preferred syntax?
|
||||
|
||||
##
|
||||
Post-Lecture Quiz
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
---
|
||||
## Post-Lecture Quiz
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,175 @@
|
|||
# Dasar-dasar JavaScript: Membuat Keputusan
|
||||
|
||||
|
||||
|
||||
> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
|
||||
[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11?loc=id)
|
||||
|
||||
Membuat keputusan dan mengontrol urutan kode Anda berjalan membuat kode Anda dapat digunakan kembali dan kuat. Bagian ini membahas sintaks untuk mengontrol aliran data di JavaScript dan signifikansinya saat digunakan dengan tipe data Boolean.
|
||||
|
||||
[](https://youtube.com/watch?v=SxTp8j-fMMY "Membuat keputusan")
|
||||
|
||||
## Rekap Singkat tentang Boolean
|
||||
|
||||
Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi.
|
||||
|
||||
Setel boolean Anda menjadi true atau false seperti ini:
|
||||
|
||||
`let myTrueBool = true`
|
||||
`let myFalseBool = false`
|
||||
|
||||
✅ Nama Boolean diambil dari ahli matematika, filsuf, dan ahli logika Inggris George Boole (1815-1864).
|
||||
|
||||
## Operator Perbandingan dan Boolean
|
||||
|
||||
Operator digunakan untuk mengevaluasi kondisi dengan membuat perbandingan yang akan menghasilkan nilai Boolean. Berikut ini adalah daftar operator yang sering digunakan.
|
||||
|
||||
| Simbol | Deskripsi | Contoh |
|
||||
| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
|
||||
| `<` | **Kurang dari**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri kurang dari kanan | `5 < 6 // true` |
|
||||
| `<=` | **Kurang dari atau sama dengan**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri kurang dari atau sama dengan kanan | `5 <= 6 // true` |
|
||||
| `>` | **Lebih besar dari**: Membandingkan dua nilai dan mengembalikan tipe data Boolean `true` jika nilai di sisi kiri lebih besar dari kanan | `5 > 6 // false` |
|
||||
| `>=` | **Lebih besar dari atau sama dengan**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri lebih besar dari atau sama dengan kanan | `5 >= 6 // false` |
|
||||
| `===` | **Kesetaraan ketat**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di kanan dan kiri sama DAN merupakan jenis data yang sama. | `5 === 6 // false` |
|
||||
| `!==` | **Ketidaksamaan**: Membandingkan dua nilai dan mengembalikan nilai Boolean yang berlawanan dari yang akan dikembalikan oleh operator persamaan ketat | `5 !== 6 // true` |
|
||||
|
||||
✅ Uji pengetahuan Anda dengan menulis beberapa perbandingan di konsol browser Anda. Apakah data yang dikembalikan mengejutkan Anda?
|
||||
|
||||
## Pernyataan If
|
||||
|
||||
Pernyataan if akan menjalankan kode di antara bloknya jika kondisinya benar.
|
||||
|
||||
```javascript
|
||||
if (kondisi) {
|
||||
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||
}
|
||||
```
|
||||
|
||||
Operator logika sering digunakan untuk membentuk kondisi tersebut.
|
||||
|
||||
```javascript
|
||||
let uangSekarang;
|
||||
let hargaLaptop;
|
||||
|
||||
if (uangSekarang >= hargaLaptop) {
|
||||
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||
console.log("Mendapatkan laptop baru!");
|
||||
}
|
||||
```
|
||||
|
||||
## Pernyataan IF..Else
|
||||
|
||||
Pernyataan `else` akan menjalankan kode di antara bloknya jika kondisinya salah. Ini opsional dengan pernyataan `if`, jadi tidak semua `if` harus diikuti dengan pernyataan `else`.
|
||||
|
||||
```javascript
|
||||
let uangSekarang;
|
||||
let hargaLaptop;
|
||||
|
||||
if (uangSekarang >= hargaLaptop) {
|
||||
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||
console.log("Mendapatkan laptop baru!");
|
||||
} else {
|
||||
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||
console.log("Belum bisa membeli laptop baru!");
|
||||
}
|
||||
```
|
||||
|
||||
✅ Uji pemahaman Anda tentang kode ini dan kode berikut dengan menjalankannya di konsol browser. Ubah nilai variabel uangSekarang dan hargaLaptop untuk mengubah `console.log()` yang dikembalikan.
|
||||
|
||||
## Operator Logis dan Boolean
|
||||
|
||||
Keputusan mungkin memerlukan lebih dari satu perbandingan, dan dapat digabungkan dengan operator logika untuk menghasilkan nilai Boolean.
|
||||
|
||||
| Simbol | Deskripsi | Contoh |
|
||||
| ------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| `&&` | **Logical AND**: Membandingkan dua ekspresi Boolean. Mengembalikan nilai benar **hanya** jika kedua sisi benar | `(5 > 6) && (5 < 6 ) //Satu sisi salah, sisi lainnya benar. Mengembalikan nilai salah` |
|
||||
| `\|\|` | **Logical OR**: Membandingkan dua ekspresi Boolean. Mengembalikan nilai benar jika setidaknya satu sisi benar | `(5 > 6) \|\| (5 < 6) //Satu sisi salah, sisi lainnya benar. Mengembalikan nilai true` |
|
||||
| `!` | **Logical NOT**: Menampilkan nilai kebalikan dari ekspresi Boolean | `!(5 > 6) // 5 tidak lebih besar dari 6, tapi "!" akan kembali benar` |
|
||||
|
||||
## Kondisi dan Keputusan dengan Operator Logis
|
||||
|
||||
Operator logika dapat digunakan untuk membentuk kondisi dalam pernyataan if..else.
|
||||
|
||||
```javascript
|
||||
let uangSekarang;
|
||||
let hargaLaptop;
|
||||
let hargaDiskonLaptop = hargaLaptop - hargaLaptop * 0.2; //Harga laptop diskon 20 persen
|
||||
|
||||
if (uangSekarang >= hargaLaptop || uangSekarang >= hargaDiskonLaptop) {
|
||||
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||
console.log("Mendapatkan laptop baru!");
|
||||
} else {
|
||||
//Kondisinya benar. Kode di blok ini akan berjalan.
|
||||
console.log("Belum bisa membeli laptop baru!");
|
||||
}
|
||||
```
|
||||
|
||||
### Operator Negasi
|
||||
|
||||
Anda telah melihat sejauh ini bagaimana jika Anda bisa menggunakan pernyataan `if ... else` untuk membuat logika kondisional. Apa pun yang menjadi `jika` perlu dievaluasi menjadi benar / salah. Dengan menggunakan operator `!` Anda dapat _negate_ ekspresi. Ini akan terlihat seperti ini:
|
||||
|
||||
```javascript
|
||||
if (!kondisi) {
|
||||
// berjalan jika kondisinya false
|
||||
} else {
|
||||
// berjalan jika kondisinya true
|
||||
}
|
||||
```
|
||||
|
||||
### Ekspresi Terner
|
||||
|
||||
`if ... else` bukanlah satu-satunya cara untuk mengekspresikan logika keputusan. Anda juga dapat menggunakan sesuatu yang disebut operator terner (ternary operator). Sintaksnya terlihat seperti ini:
|
||||
|
||||
```javascript
|
||||
let variable = kondisi ? <kembalikan ini jika benar> : <kembalikan ini jika salah>`
|
||||
```
|
||||
|
||||
Di bawah ini adalah contoh yang lebih nyata:
|
||||
|
||||
```javascript
|
||||
let nomorPertama = 20;
|
||||
let nomorKedua = 10;
|
||||
let nomorTerbesar = nomorPertama > nomorKedua ? nomorPertama : nomorKedua;
|
||||
```
|
||||
|
||||
✅ Luangkan waktu sebentar untuk membaca kode ini beberapa kali. Apakah Anda memahami cara kerja operator ini?
|
||||
|
||||
Di atas menyatakan bahwa
|
||||
|
||||
- jika `nomorPertama` lebih besar dari `nomorKedua`
|
||||
- tetapkan `nomorPertama` ke `nomorTerbesar`
|
||||
- jika tidak tetapkan `nomorKedua`.
|
||||
|
||||
Ekspresi terner hanyalah cara ringkas untuk menulis kode di bawah ini:
|
||||
|
||||
```javascript
|
||||
let nomorTerbesar;
|
||||
if (nomorPertama > nomorKedua) {
|
||||
nomorTerbesar = nomorPertama;
|
||||
} else {
|
||||
nomorTerbesar = nomorKedua;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Tantangan
|
||||
|
||||
Buat program yang ditulis pertama kali dengan operator logika, lalu tulis ulang menggunakan ekspresi terner. Apa sintaks pilihan Anda?
|
||||
|
||||
## Kuis Pasca-Kuliah
|
||||
|
||||
[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12?loc=id)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
Baca lebih lanjut tentang banyak operator yang tersedia untuk pengguna [di MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators).
|
||||
|
||||
Lihat [pencarian operator](https://joshwcomeau.com/operator-lookup/) oleh Josh Comeau yang luar biasa!
|
||||
|
||||
## Tugas
|
||||
|
||||
[Operator](./assignment.id.md)
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
# JavaScript の基本: 意思決定
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
##
|
||||
レクチャー前クイズ
|
||||
[レクチャー前クイズ](.github/pre-lecture-quiz.md)
|
||||
|
||||
意思決定を行い、コードの実行順序を制御することで、コードを再利用可能で堅牢なものにします。このセクションでは、JavaScript のデータフローを制御するための構文と、ブール値データ型で使用される場合の意味について説明します。
|
||||
|
||||
[](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
|
||||
|
||||
## ブール値の簡単なまとめ
|
||||
|
||||
ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。
|
||||
|
||||
以下のように、ブール値を true か false に設定します:
|
||||
|
||||
`let myTrueBool = true`
|
||||
`let myFalseBool = false`
|
||||
|
||||
✅ ブール値は、イギリスの数学者、哲学者、論理学者のジョージ・ブール (1815-1864) にちなんで名づけられました。
|
||||
|
||||
## 比較演算子とブール値
|
||||
|
||||
演算子は、ブール値を生成するような比較をして条件を評価するために使用されます。以下に、よく使われる演算子の一覧を示します。
|
||||
|
||||
| シンボル | 説明 | 例 |
|
||||
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
|
||||
| `<` | **小なり**: 2つの値を比較し、左側の値が右側の値よりも小さい場合は `true` のブール値を返します。 | `5 < 6 // true` |
|
||||
| `<=` | **小なりイコール**: 2つの値を比較し、左側の値が右側の値以下の場合は `true` のブール値を返します。 | `5 <= 6 // true` |
|
||||
| `>` | **大なり**: 2つの値を比較し、左側の値が右側の値よりも大きい場合は `true` のブール値を返します。 | `5 > 6 // false` |
|
||||
| `>=` | **大なりイコール**: 2つの値を比較し、左辺の値が右辺の値以上の場合は `true` のブール値を返します。 | `5 >= 6 // false` |
|
||||
| `===` | **同値**: 2つの値を比較し、右と左の値が等しく、かつ同じデータ型であれば `true` のブール値を返します。 | `5 === 6 // false` |
|
||||
| `!==` | **非同値**: 2つの値を比較し、厳密な平等演算子が返す値の反対のブール値を返します。 | `5 !== 6 // true` |
|
||||
|
||||
✅ ブラウザのコンソールに比較を書き込んで、自分の知識を確認してみてください。返ってきたデータに驚きはありませんか？
|
||||
|
||||
## If 文
|
||||
|
||||
if 文は、条件が true であればブロック間でコードを実行します。
|
||||
|
||||
```javascript
|
||||
if (condition){
|
||||
//条件は true でした。このブロック内のコードが実行されます。
|
||||
}
|
||||
```
|
||||
|
||||
論理演算子は、条件を形成するためによく使われます。
|
||||
|
||||
```javascript
|
||||
let currentMoney;
|
||||
let laptopPrice;
|
||||
|
||||
if (currentMoney >= laptopPrice){
|
||||
//条件は true でした。このブロック内のコードが実行されます。
|
||||
console.log("新しいノートパソコンを手に入れよう!");
|
||||
}
|
||||
```
|
||||
|
||||
## IF..Else 文
|
||||
|
||||
`else` 文は、条件が false の場合にブロック間でコードを実行します。これは `if` 文ではオプションです。
|
||||
|
||||
```javascript
|
||||
let currentMoney;
|
||||
let laptopPrice;
|
||||
|
||||
if (currentMoney >= laptopPrice){
|
||||
//条件は true でした。このブロック内のコードが実行されます。
|
||||
console.log("新しいノートパソコンを手に入れよう!");
|
||||
}
|
||||
else{
|
||||
//条件は false でした。このブロック内のコードが実行されます。
|
||||
console.log("新しいノートパソコンを買う余裕はまだない!");
|
||||
}
|
||||
```
|
||||
|
||||
✅ ブラウザのコンソールで実行して、このコードと次のコードの理解度をテストしてください。currentMoney 変数と laptopPrice 変数の値を変更して、返される `console.log()` を変更します。
|
||||
|
||||
## 論理演算子とブール値
|
||||
|
||||
意思決定には複数の比較が必要な場合があり、論理演算子を使ってブール値を生成することができます。
|
||||
|
||||
| シンボル | 説明 | 例 |
|
||||
| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
||||
| `&&` | **論理積**: 2つのブール式を逆さにします。両辺が真の場合 **のみ** true を返します。 | `(5 > 6) && (5 < 6 ) //片方が false、もう片方が true です。false を返します。` |
|
||||
| `||` | **論理和**: 2つのブール式を比較します。少なくとも片方が true であれば true を返します。 | `(5 > 6) || (5 < 6) //片方が false、もう片方が true です。true を返します。` |
|
||||
| `!` | **論理否定**: ブール式の反対の値を返します。 | `!(5 > 6) // 5は6より大きくないが、"!" は true を返す` |
|
||||
|
||||
## 論理演算子を用いた条件と決定
|
||||
|
||||
論理演算子は、if...else 文で条件を形成するために使用できます。
|
||||
|
||||
```javascript
|
||||
let currentMoney;
|
||||
let laptopPrice;
|
||||
let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //ノートパソコンの価格が20％オフ
|
||||
|
||||
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
|
||||
//条件は true でした。このブロック内のコードが実行されます。
|
||||
console.log("新しいノートパソコンを手に入れよう!");
|
||||
}
|
||||
else {
|
||||
//条件は false でした。このブロック内のコードが実行されます。
|
||||
console.log("新しいノートパソコンを買う余裕はまだない!");
|
||||
}
|
||||
```
|
||||
|
||||
### 否定演算子
|
||||
|
||||
ここまでで、条件付きロジックを作成するために `if...else` 文を使用する方法を見てきました。`if` に入るものはすべて true/false を評価する必要があります。演算子 `!` を使用すると、式を _否定_ することができます。以下のようになります。
|
||||
|
||||
```javascript
|
||||
if (!condition) {
|
||||
// 条件が false の場合に実行されます。
|
||||
} else {
|
||||
// 条件が true の場合に実行されます。
|
||||
}
|
||||
```
|
||||
|
||||
### 三項式
|
||||
|
||||
意思決定ロジックを表現する方法は `if...else` だけではありません。三項演算子と呼ばれるものを使うこともできます。その構文は次のようになります。
|
||||
|
||||
```javascript
|
||||
let variable = condition ? <true ならばこれを返す> : <false ならばこれを返す>`
|
||||
```
|
||||
|
||||
以下でより具体的な例を挙げてみます。
|
||||
|
||||
```javascript
|
||||
let firstNumber = 20;
|
||||
let secondNumber = 10
|
||||
let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
|
||||
```
|
||||
|
||||
✅ このコードを数回読むのに時間をかけてください。これらの演算子がどのように動作するか理解できましたか？
|
||||
|
||||
上の例では次のようになっています。
|
||||
- `firstNumber` が `secondNumber` よりも大きければ
|
||||
- `biggestNumber` に `firstNumber` を代入し、
|
||||
- そうでなければ `secondNumber` に代入する
|
||||
|
||||
三項式は、以下のコードをコンパクトに書くだけです。
|
||||
|
||||
```javascript
|
||||
let biggestNumber;
|
||||
if (firstNumber > secondNumber) {
|
||||
biggestNumber = firstNumber;
|
||||
} else {
|
||||
biggestNumber = secondNumber;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
最初に論理演算子を使ってプログラムを作成し、それを三項式で書き換えます。お好みの構文は？
|
||||
|
||||
## レクチャー後クイズ
|
||||
|
||||
[レクチャー後クイズ](.github/post-lecture-quiz.md)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
ユーザーが利用できる多くの演算子についての詳細は [mdn](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators) をご覧ください。
|
||||
|
||||
Josh Comeau の素晴らしい [operator lookup](https://joshwcomeau.com/operator-lookup/) をご覧ください!
|
||||
|
||||
## 課題
|
||||
|
||||
[演算子](assignment.ja.md)
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
# Operator
|
||||
|
||||
## Instruksi
|
||||
|
||||
Bermain-main dengan operator. Berikut adalah saran untuk program yang dapat Anda terapkan:
|
||||
|
||||
Anda memiliki satu set siswa dari dua sistem penilaian yang berbeda.
|
||||
|
||||
### Sistem Layanan pertama
|
||||
|
||||
Satu sistem didefinisikan sebagai nilai dari 1-5 di mana 3 ke atas berarti Anda lulus kursus.
|
||||
|
||||
### Sistem Produk kedua
|
||||
|
||||
Sistem nilai lain memiliki nilai berikut `A, A-, B, B-, C, C-` di mana `A` adalah nilai tertinggi dan `C` adalah nilai kelulusan terendah.
|
||||
|
||||
### Tugas
|
||||
|
||||
Diberikan array `semuaPelajar` yang mewakili semua siswa dan nilai, buat array baru `pelajarYangLulus` yang berisi semua siswa yang lulus.
|
||||
|
||||
> TIPS, gunakan for-loop dan if ... else dan operator perbandingan:
|
||||
|
||||
```javascript
|
||||
let semuaPelajar = [
|
||||
'A',
|
||||
'B-'
|
||||
1,
|
||||
4
|
||||
5,
|
||||
2
|
||||
]
|
||||
|
||||
let pelajarYangLulus = [];
|
||||
```
|
||||
|
||||
## Rubrik
|
||||
|
||||
| Kriteria | Contoh | Memenuhi | Perlu Perbaikan |
|
||||
| -------- | ------------------------ | ------------------------------ | --------------------------- |
|
||||
| | Solusi lengkap disajikan | Solusi tidak lengkap disajikan | Solusi dengan bug disajikan |
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
# 演算子
|
||||
|
||||
## 説明書
|
||||
|
||||
演算子で遊んでみる。あなたが実装できるプログラムの提案です。
|
||||
|
||||
あなたは2つの異なる成績評価システムの学生のセットを持っています。
|
||||
|
||||
### ファーストグレーディングシステム
|
||||
|
||||
1つの成績評価システムは、1～5までの成績で、3以上の成績は合格を意味すると定義されています。
|
||||
|
||||
### セカンドグレーディングシステム
|
||||
|
||||
もう一つのグレードシステムは、`A, A-, B, B-, C, C-` というグレードがあり、`A` が最高グレード、`C` が最低合格グレードです。
|
||||
|
||||
### タスク
|
||||
|
||||
すべての学生とその成績を表す以下の配列 `allStudents` が与えられた場合、合格した学生を含む新しい配列 `studentsWhoPass` を作成します。
|
||||
|
||||
> ヒント: for ループと if...else と比較演算子を使用します。
|
||||
|
||||
```javascript
|
||||
let allStudents = [
|
||||
'A',
|
||||
'B-'
|
||||
1,
|
||||
4
|
||||
5,
|
||||
2
|
||||
]
|
||||
|
||||
let studentsWhoPass = [];
|
||||
```
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
|
||||
| | 完全なソリューションを提示 | 部分的な解決策を提示 | バグがある解決策を提示 |
|
||||
|
|
@ -3,9 +3,8 @@
|
|||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
##
|
||||
Pre-Lecture Quiz
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
## Pre-Lecture Quiz
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13)
|
||||
|
||||
This lesson covers the basics of JavaScript, the language that provides interactivity on the web. In this lesson, you'll learn about arrays and loops, which are used to manipulate data.
|
||||
|
||||
|
|
@ -112,9 +111,8 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
|
|||
|
||||
There are other ways of looping over arrays other than for and while loops. There are [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques.
|
||||
|
||||
##
|
||||
Post-Lecture Quiz
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
## Post-Lecture Quiz
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
|
||||
|
||||
|
||||
## Review & Self Study
|
||||
|
|
|
|||
|
|
@ -0,0 +1,141 @@
|
|||
# Dasar-dasar JavaScript: Array dan Loop
|
||||
|
||||
|
||||
|
||||
> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
|
||||
[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13?loc=id)
|
||||
|
||||
Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web. Dalam pelajaran ini, Anda akan belajar tentang array dan loop, yang digunakan untuk memanipulasi data.
|
||||
|
||||
[](https://youtube.com/watch?v=Q_CRM2lXXBg "Array dan Loop")
|
||||
|
||||
## Array
|
||||
|
||||
Bekerja dengan data adalah tugas umum untuk bahasa apa pun, dan ini jauh lebih mudah saat data diatur dalam format struktural, seperti array. Dengan array, data disimpan dalam struktur yang mirip dengan daftar. Salah satu manfaat utama dari array adalah Anda dapat menyimpan berbagai jenis data dalam satu array.
|
||||
|
||||
✅ Array ada di sekitar kita! Dapatkah Anda memikirkan contoh array dalam kehidupan nyata, seperti array panel surya?
|
||||
|
||||
Sintaks untuk array adalah sepasang tanda kurung siku.
|
||||
|
||||
`let arrayKu = [];`
|
||||
|
||||
Ini adalah array kosong, tetapi array dapat dideklarasikan sudah diisi dengan data. Beberapa nilai dalam array dipisahkan dengan koma.
|
||||
|
||||
`let rasaRasaEsKrim = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
|
||||
|
||||
Nilai array diberi nilai unik yang disebut **indeks**, bilangan bulat yang ditetapkan berdasarkan jaraknya dari awal array. Dalam contoh di atas, nilai string "Chocolate" memiliki indeks 0, dan indeks "Rocky Road" adalah 4. Gunakan indeks dengan tanda kurung siku untuk mengambil, mengubah, atau menyisipkan nilai array.
|
||||
|
||||
✅ Apakah Anda terkejut bahwa array mulai dari indeks nol? Dalam beberapa bahasa pemrograman, indeks dimulai dari 1. Ada sejarah menarik seputar ini, yang dapat Anda [baca di Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
|
||||
|
||||
```javascript
|
||||
let rasaRasaEsKrim = [
|
||||
"Chocolate",
|
||||
"Strawberry",
|
||||
"Vanilla",
|
||||
"Pistachio",
|
||||
"Rocky Road",
|
||||
];
|
||||
rasaRasaEsKrim[2]; //"Vanilla"
|
||||
```
|
||||
|
||||
Anda dapat memanfaatkan indeks untuk mengubah nilai, seperti ini:
|
||||
|
||||
```javascript
|
||||
rasaRasaEsKrim[4] = "Butter Pecan"; //Mengubah "Rocky Road" menjadi "Butter Pecan"
|
||||
```
|
||||
|
||||
Dan Anda dapat memasukkan nilai baru pada indeks tertentu seperti ini:
|
||||
|
||||
```javascript
|
||||
rasaRasaEsKrim[5] = "Cookie Dough"; //Ditambahkan "Cookie Dough"
|
||||
```
|
||||
|
||||
✅ Cara yang lebih umum untuk mendorong nilai ke array adalah dengan menggunakan operator array seperti array.push()
|
||||
|
||||
Untuk mengetahui berapa banyak item dalam sebuah array, gunakan properti `length`.
|
||||
|
||||
```javascript
|
||||
let rasaRasaEsKrim = [
|
||||
"Chocolate",
|
||||
"Strawberry",
|
||||
"Vanilla",
|
||||
"Pistachio",
|
||||
"Rocky Road",
|
||||
];
|
||||
rasaRasaEsKrim.length; //5
|
||||
```
|
||||
|
||||
✅ Cobalah sendiri! Gunakan konsol browser Anda untuk membuat dan memanipulasi array kreasi Anda sendiri.
|
||||
|
||||
## Loop
|
||||
|
||||
Pengulangan memungkinkan untuk tugas berulang atau **iterative**, dan dapat menghemat banyak waktu dan kode. Setiap iterasi dapat bervariasi dalam variabel, nilai, dan kondisinya. Ada berbagai jenis loop dalam JavaScript, dan mereka memiliki perbedaan kecil, tetapi pada dasarnya melakukan hal yang sama: loop di atas data.
|
||||
|
||||
### For Loop
|
||||
|
||||
Perulangan `for` membutuhkan 3 bagian untuk melakukan iterasi: - `counter` Variabel yang biasanya diinisialisasi dengan angka yang menghitung jumlah iterasi. - `condition` Expression yang menggunakan operator perbandingan untuk menyebabkan loop berhenti ketika `true`. - `iteration-expression` Berjalan di akhir setiap iterasi, biasanya digunakan untuk mengubah nilai penghitung.
|
||||
|
||||
```javascript
|
||||
//Menghitung hingga 10
|
||||
for (let i = 0; i < 10; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
```
|
||||
|
||||
✅ Jalankan kode ini di konsol browser. Apa yang terjadi jika Anda membuat perubahan kecil pada penghitung, kondisi, atau ekspresi iterasi? Bisakah Anda membuatnya berjalan mundur, membuat hitungan mundur?
|
||||
|
||||
### While loop
|
||||
|
||||
Tidak seperti sintaks untuk pengulangan `for`, pengulangan `while` hanya membutuhkan kondisi yang akan menghentikan pengulangan jika `true`. Kondisi dalam pengulangan biasanya mengandalkan nilai lain seperti penghitung, dan harus dikelola selama pengulangan. Nilai awal untuk pencacah harus dibuat di luar perulangan, dan ekspresi apa pun untuk memenuhi suatu kondisi, termasuk mengubah penghitung harus dipertahankan di dalam perulangan.
|
||||
|
||||
```javascript
|
||||
//Menghitung hingga 10
|
||||
let i = 0;
|
||||
while (i < 10) {
|
||||
console.log(i);
|
||||
i++;
|
||||
}
|
||||
```
|
||||
|
||||
✅ Mengapa Anda memilih for loop vs. a while loop? Sebanyak 17 ribu penonton memiliki pertanyaan yang sama tentang StackOverflow, dan beberapa opini [mungkin menarik bagi Anda](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
|
||||
|
||||
## Loop dan Array
|
||||
|
||||
Array sering digunakan dengan loop karena sebagian besar kondisi memerlukan panjang array untuk menghentikan loop, dan indeks juga bisa menjadi nilai counter.
|
||||
|
||||
```javascript
|
||||
let rasaRasaEsKrim = [
|
||||
"Chocolate",
|
||||
"Strawberry",
|
||||
"Vanilla",
|
||||
"Pistachio",
|
||||
"Rocky Road",
|
||||
];
|
||||
|
||||
for (let i = 0; i < rasaRasaEsKrim.length; i++) {
|
||||
console.log(rasaRasaEsKrim[i]);
|
||||
} //Berakhir saat semua rasa dicetak
|
||||
```
|
||||
|
||||
✅ Bereksperimenlah dengan melakukan perulangan pada array buatan Anda sendiri di konsol browser Anda.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Tantangan
|
||||
|
||||
Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan while. Ada [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis ulang loop array Anda menggunakan salah satu dari teknik ini.
|
||||
|
||||
## Kuis Pasca-Kuliah
|
||||
|
||||
[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=id)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
Array dalam JavaScript memiliki banyak metode yang menyertainya, sangat berguna untuk manipulasi data. [Bacalah tentang metode ini](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) dan coba beberapa di antaranya (seperti push, pop, slice dan splice) pada array kreasi Anda.
|
||||
|
||||
## Tugas
|
||||
|
||||
[Loop sebuah Array](./assignment.id.md)
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
# JavaScript の基本: 配列とループ
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レクチャー前クイズ
|
||||
[レクチャー前クイズ](.github/pre-lecture-quiz.md)
|
||||
|
||||
このレッスンでは、Web 上でインタラクティブな機能を提供する言語である JavaScript の基礎を学びます。このレッスンでは、データを操作するために使用される配列とループについて学びます。
|
||||
|
||||
[](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
|
||||
|
||||
## 配列
|
||||
|
||||
データを扱うのはどの言語でも共通の作業ですが、データが配列のような構造的な形式で整理されている場合は、より簡単な作業となります。配列では、データはリストに似た構造で保存されます。配列の大きな利点の1つは、1つの配列に異なるタイプのデータを格納できることです。
|
||||
|
||||
✅ 配列は身近なところにある!? 太陽光パネルの配列など、実際の配列の例を思い浮かべることができますか？
|
||||
|
||||
配列の構文は角括弧のペアです。
|
||||
|
||||
`let myArray = [];`
|
||||
|
||||
これは空の配列ですが、配列はすでにデータを埋めた状態で宣言することができます。配列内の複数の値はカンマで区切られます。
|
||||
|
||||
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
|
||||
|
||||
配列の値には、**インデックス** と呼ばれる一意の値が割り当てられ、配列の先頭からの距離に基づいて整数が割り当てられます。上の例では、文字列の値 "Chocolate" のインデックスは 0 で、"Rocky Road" のインデックスは 4 です。 配列の値を取得、変更、挿入するには、角括弧付きのインデックスを使用します。
|
||||
|
||||
✅ 配列のインデックスが 0 から始まるのは驚きですか？いくつかのプログラミング言語では、インデックスは1から始まります。これには興味深い歴史があり、[ウィキペディア](https://en.wikipedia.org/wiki/Zero-based_numbering) で読むことができます。
|
||||
|
||||
```javascript
|
||||
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
iceCreamFlavors[2]; //"Vanilla"
|
||||
```
|
||||
|
||||
このように、インデックスにレバレッジをかけて値を変更することができます。
|
||||
|
||||
```javascript
|
||||
iceCreamFlavors[4] = "Butter Pecan"; //"Rocky Road" を "Butter Pecan" に変更
|
||||
```
|
||||
|
||||
そして、このように与えられたインデックスに新しい値を挿入することができます。
|
||||
|
||||
```javascript
|
||||
iceCreamFlavors[5] = "Cookie Dough"; //"Cookie Dough" を追加しました。
|
||||
```
|
||||
|
||||
✅ 値を配列にプッシュするより一般的な方法は、 array.push() のような配列演算子を使用することです。
|
||||
|
||||
配列の中に何個の項目があるかを調べるには、`length` プロパティを使用します。
|
||||
|
||||
```javascript
|
||||
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
iceCreamFlavors.length; //5
|
||||
```
|
||||
|
||||
✅ 自分で試してみましょう。ブラウザのコンソールを使って、自分で作成した配列を作成して操作してみましょう。
|
||||
|
||||
## ループ
|
||||
|
||||
ループは、反復または**イテレーション**のタスクを可能にし、多くの時間とコードを節約することができます。各反復は、その変数、値、条件を変えることができます。JavaScript には異なるタイプのループがあり、小さな違いはありますが、基本的には同じことをします。
|
||||
|
||||
### For ループ
|
||||
|
||||
`for`ループは反復するために3つの部分を必要とする。
|
||||
- `counter` 典型的には反復回数をカウントする数値で初期化される変数
|
||||
- `condition` 比較演算子を用いて、`false` のときにループを停止させる式
|
||||
- `iteration-expression` 各反復の最後に実行され，通常はカウンタの値を変更するために使用されます
|
||||
|
||||
```javascript
|
||||
//10までカウントアップ
|
||||
for (let i = 0; i < 10; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
```
|
||||
|
||||
✅ このコードをブラウザのコンソールで実行してください。カウンタ、条件、反復式に小さな変更を加えるとどうなりますか？カウントダウンを作成して逆走させることはできますか？
|
||||
|
||||
### While ループ
|
||||
|
||||
`for` ループの構文とは異なり、`while` ループは `false` のときにループを停止する条件を必要とするだけです。ループ内の条件は通常、カウンタのような他の値に依存しており、ループ中に管理しなければなりません。カウンタの開始値はループの外で作成しなければならず、カウンタの変更を含めて条件を満たすための式はすべてループ内で維持しなければなりません。
|
||||
|
||||
```javascript
|
||||
//10までカウントアップ
|
||||
let i = 0;
|
||||
while (i < 10) {
|
||||
console.log(i);
|
||||
i++;
|
||||
}
|
||||
```
|
||||
|
||||
✅ for loop と while loop のどちらかを選ぶ理由は何ですか? 17K の視聴者が StackOverflow で同じ質問をしていましたが、その意見の中には[あなたにとって興味深いものもあるかもしれません](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
|
||||
|
||||
## ループと配列
|
||||
|
||||
ほとんどの条件がループを止めるために配列の長さを必要とし、インデックスはカウンタの値になることもあるため、配列はループと一緒によく使われます。
|
||||
|
||||
```javascript
|
||||
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
|
||||
for (let i = 0; i < iceCreamFlavors.length; i++) {
|
||||
console.log(iceCreamFlavors[i]);
|
||||
} //すべてのフレーバーがプリントされた時点で終了
|
||||
```
|
||||
|
||||
✅ ブラウザのコンソールで、自分で作った配列をループさせてみてください。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
配列をループする方法は for ループと while ループ以外にもあります。[forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of)、[map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) があります。これらのテクニックのいずれかを使って、配列のループを書き換えてください。
|
||||
|
||||
## レクチャー後クイズ
|
||||
[レクチャー後クイズ](.github/post-lecture-quiz.md)
|
||||
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
JavaScript の配列には多くのメソッドがあり、データ操作に非常に便利です。[これらのメソッドを読んでください](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)。そして、あなたが作成した配列でそれらのいくつか (push, pop, slice, splice など) を試してみてください。
|
||||
|
||||
## 課題
|
||||
|
||||
[配列のループ](assignment.ja.md)
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# Loop sebuah Array
|
||||
|
||||
## Instruksi
|
||||
|
||||
Buat program yang mencantumkan setiap nomor ke-3 antara 1-20 dan mencetaknya ke konsol.
|
||||
|
||||
> TIPS: gunakan for-loop dan ubah ekspresi iterasi
|
||||
|
||||
## Rubric
|
||||
|
||||
| Kriteria | Contoh | Memenuhi | Perlu Perbaikan |
|
||||
| -------- | ------------------------------------------------- | ----------------------------- | ------------------------------------- |
|
||||
| | Program berjalan dengan benar dan diberi komentar | Program tidak diberi komentar | Program tidak lengkap atau bermasalah |
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# 配列のループ
|
||||
|
||||
## 説明書
|
||||
|
||||
1～20の間の3番目の数字をすべてリストアップしてコンソールに表示するプログラムを作成します。
|
||||
|
||||
> TIP: for-loop を使用して、反復式を変更します。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
|
||||
| | プログラムが正常に動作し、コメントが表示される | プログラムはコメントをしていない | プログラムが不完全であるか、バグがある |
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
# Pengantar JavaScript
|
||||
|
||||
JavaScript adalah bahasa web. Dalam empat pelajaran ini, Anda akan mempelajari dasar-dasarnya.
|
||||
|
||||
### Topik
|
||||
|
||||
1. [Variabel dan Jenis Data](../1-data-types/translations/README.id.md)
|
||||
2. [Fungsi dan Metode](../2-functions-methods/translations/README.id.md)
|
||||
3. [Membuat Keputusan dengan JavaScript](../3-making-decisions/translations/README.id.md)
|
||||
4. [Array dan Loop](../4-arrays-loops/translations/README.id.md)
|
||||
|
||||
### Kredit
|
||||
|
||||
Pelajaran ini ditulis dengan ♥️ ️oleh [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) dan [Chris Noring](https://twitter.com/chris_noring)
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
# JavaScript 入門
|
||||
|
||||
JavaScript は Web の言語です。この4つのレッスンでは、その基本を学びます。
|
||||
|
||||
### トピック
|
||||
|
||||
1. [変数とデータ型](1-data-types/README.md)
|
||||
2. [関数とメソッド](2-functions-methods/README.md)
|
||||
3. [JavaScript での意思決定](3-making-decisions/README.md)
|
||||
4. [配列とループ](4-arrays-loops/README.md)
|
||||
|
||||
### Credits
|
||||
|
||||
These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring)
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
*Complete this quiz after the lesson by checking one answer per question.*
|
||||
|
||||
1. [Spans and Divs are interchangeable]
|
||||
1. Spans and Divs are interchangeable
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
2. [The head of an HTML doc can contain:]
|
||||
2. The head of an HTML doc can contain:
|
||||
|
||||
- [ ] [the title tag]
|
||||
- [ ] [metadata]
|
||||
- [ ] [all the above]
|
||||
- [ ] the title tag
|
||||
- [ ] metadata
|
||||
- [ ] all the above
|
||||
|
||||
3. [You can't use deprecated tags in your markup]
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] [false, but they have been deprecated for good reason]
|
||||
3. You can't use deprecated tags in your markup
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
- [ ] false, but they have been deprecated for good reason
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@ Complete this quiz in class
|
|||
|
||||
1. HTML stands for 'HyperText Mockup Language'
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
2. All HTML tags need both opening and closing tags
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
3. Using semantic markup is most important for
|
||||
|
||||
- [ ] [code readability]
|
||||
- [ ] [screen readers]
|
||||
- [ ] [maintenance]
|
||||
- [ ] code readability
|
||||
- [ ] screen readers
|
||||
- [ ] maintenance
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15)
|
||||
|
||||
### Introduction
|
||||
|
||||
|
|
@ -217,7 +217,7 @@ There are some wild 'older' tags in HTML that are still fun to play with, though
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,231 @@
|
|||
# テラリウムプロジェクト その1: HTML 入門
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レクチャー前クイズ
|
||||
|
||||
[レクチャー前クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15)
|
||||
|
||||
### イントロダクション
|
||||
|
||||
HTML (HyperText Markup Language) は、Web の「骨格」です。CSS が HTML を「ドレスアップ」し、JavaScript が HTML に命を吹き込むとすれば、HTML は Web アプリケーションの本体となります。HTML の構文は、「head」、「body」、「footer」タグを含むため、この考えを反映しています。
|
||||
|
||||
このレッスンでは、HTML を使ってバーチャルテラリウムのインターフェースの「骨格」をレイアウトします。タイトルと3つのカラムがあります。右と左のカラムにはドラッグ可能な植物を配置し、中央のエリアには実際のガラス張りのテラリウムを配置します。このレッスンが終わる頃には、列の中に植物が見えるようになると思いますが、インターフェースが少し変な感じになっているかもしれません。
|
||||
|
||||
### タスク
|
||||
|
||||
コンピュータ上に 'terrarium' というフォルダを作成し、その中に 'index.html' というファイルを作成します。テラリウムのフォルダを作成した後、Visual Studio Code で新しい VS Code ウィンドウを開き、「フォルダを開く」をクリックして新しいフォルダに移動することで、この作業を行うことができます。エクスプローラペインの「ファイル」ボタンをクリックして、新しいファイルを作成してください。
|
||||
|
||||
|
||||
|
||||
もしくは
|
||||
|
||||
git bash 上でこれらのコマンドを使用します。
|
||||
* `mkdir terrarium`
|
||||
* `cd terrarium`
|
||||
* `touch index.html`
|
||||
* `code index.html` または `nano index.html`
|
||||
|
||||
> index.html ファイルはブラウザに対して、それがフォルダ内のデフォルトファイルであることを示します。`https://anysite.com/test` のような URL は、`test` というフォルダを含むフォルダ構造を用いて構築され、その中に `index.html` が含まれているかもしれません。
|
||||
|
||||
---
|
||||
|
||||
## DocType と html タグ
|
||||
|
||||
HTML ファイルの最初の行は、その doctype です。ファイルの一番上にこの行が必要なのは少し意外ですが、これはブラウザが現在の HTML 仕様に従った標準モードでページをレンダリングする必要があることを古いブラウザに伝えています。
|
||||
|
||||
> ヒント: VS Code では、タグの上にカーソルを置くと MDN リファレンスガイドからタグの使用に関する情報を得ることができます。
|
||||
|
||||
2行目は `<html>` タグのオープニングタグであり、それに続くのがクロージングタグ `</html>` です。これらのタグはインターフェイスのルート要素です。
|
||||
|
||||
### タスク
|
||||
|
||||
これらの行を `index.html` ファイルの先頭に追加します。
|
||||
|
||||
```HTML
|
||||
<!DOCTYPE html>
|
||||
<html></html>
|
||||
```
|
||||
|
||||
✅ DocType をクエリ文字列で設定することで決定できるモードがいくつかあります。[Quirks モードと Standards モード](https://developer.mozilla.org/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)です。これらのモードは、現在では通常使用されていない本当に古いブラウザ (Netscape Navigator 4 と Internet Explorer 5) をサポートしていました。標準の doctype 宣言に固執することができます。
|
||||
|
||||
---
|
||||
|
||||
## ドキュメントの 'head'
|
||||
|
||||
HTML ドキュメントの 'head' 領域には、Web ページに関する重要な情報が含まれており、[メタデータ](https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta)としても知られています。私たちの場合、このページがレンダリングされるために送信される Web サーバーに、以下の4つのことを伝えます。
|
||||
|
||||
- ページタイトル
|
||||
- 次を含むページのメタデータ:
|
||||
- 'character set' で、ページで使われている文字エンコーディングを表します
|
||||
- IE=edge ブラウザがサポートされていることを示す `x-ua-compatible` などのブラウザ情報
|
||||
- viewport が読み込まれたときにどのように振る舞うかについての情報を提供します。viewport の初期スケールを 1 に設定すると、ページが最初に読み込まれたときのズームレベルを制御します
|
||||
|
||||
### タスク
|
||||
|
||||
ドキュメントに 'head' ブロックを `<html>` の開始タグと終了タグの間に追加します。
|
||||
|
||||
```html
|
||||
<head>
|
||||
<title>Welcome to my Virtual Terrarium</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
```
|
||||
|
||||
✅ このように viewport の meta タグを設定するとどうなるでしょうか: `<meta name="viewport" content="width=600">`? [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) についてはこちらをご覧ください。
|
||||
|
||||
---
|
||||
|
||||
## ドキュメントの `body`
|
||||
|
||||
### HTML タグ
|
||||
|
||||
HTML では、.html ファイルにタグを追加して Web ページの要素を作成します。それぞれのタグには通常、次のような開閉タグがあります。段落を示す `<p>hello</p>` のように。`<html>` タグペアの中に `<body>` タグのセットを追加して、インターフェイスのボディを作成します。
|
||||
|
||||
### タスク
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Welcome to my Virtual Terrarium</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
これで、ページの構築を始めることができます。通常は `<div>` タグを使ってページ内の個別の要素を作成します。ここでは画像を含む一連の `<div>` 要素を作成します。
|
||||
|
||||
### 画像
|
||||
|
||||
閉じタグを必要としない html タグの一つに `<img>` タグがあります。なぜなら、ページがアイテムをレンダリングするために必要なすべての情報を含む `src` 要素を持っているからです。
|
||||
|
||||
アプリ内に `images` というフォルダを作成し、その中に[ソースコードフォルダ](../solution/images)内のすべての画像を追加します (植物の画像が14枚あります)。
|
||||
|
||||
### タスク
|
||||
|
||||
これらの植物の画像を `<body></body>` タグの間の2つのカラムに追加します。
|
||||
|
||||
```html
|
||||
<div id="page">
|
||||
<div id="left-container" class="container">
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="right-container" class="container">
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
|
||||
</div>
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
> 注: Span と Div。Div は「ブロック」要素とみなされ、Span は「インライン」要素とみなされます。これらの Div を Spans に変換するとどうなるでしょうか。
|
||||
|
||||
このマークアップで、植物が画面に表示されるようになりました。まだ CSS を使ったスタイリングがされていないので、かなり見栄えが悪いのですが、これは次のレッスンで行います。
|
||||
|
||||
それぞれの画像には、画像が見えなくてもレンダリングできなくても表示される alt テキストがあります。これはアクセシビリティのために重要な属性です。アクセシビリティについては、今後のレッスンで詳しく説明します。今のところ、alt 属性は、何らかの理由でユーザーが画像を見ることができない場合 (接続速度が遅い、src 属性のエラー、ユーザーがスクリーンリーダーを使用している場合) に、画像の代替情報を提供することを覚えておいてください。
|
||||
|
||||
✅ それぞれの画像に同じ alt タグが付いていることに気付きましたか？これは良い習慣ですか？なぜですか、それともなぜですか? このコードを改善できますか?
|
||||
|
||||
---
|
||||
|
||||
## セマンティックマークアップ
|
||||
|
||||
一般的に、HTML を書くときには、意味のある「セマンティックス」を使うことが望ましいとされています。これはどういう意味でしょうか? それは、HTML タグを使用して、データやインタラクションの種類を表すために設計されていることを意味します。例えば、ページのメインタイトルテキストには `<h1>` タグを使うべきです。
|
||||
|
||||
`<body>` の開始タグのすぐ下に次の行を追加します。
|
||||
|
||||
```html
|
||||
<h1>My Terrarium</h1>
|
||||
```
|
||||
|
||||
ヘッダーを `<h1>` としたり、順序のないリストを `<ul>` とするなど、セマンティックマークアップを使用することで、スクリーンリーダーがページをナビゲートするのに役立ちます。一般的に、ボタンは `<button>` と書き、リストは `<li>` と書くべきです。特別なスタイルの `<span>` 要素とクリックハンドラを使ってボタンを模擬することは可能ですが、障害のあるユーザにとっては、ボタンがページ上のどこにあるかを判断し、要素がボタンとして表示されている場合にそれと対話するための技術を使った方が良いでしょう。このため、できるだけセマンティックマークアップを使うようにしてください。
|
||||
|
||||
✅ スクリーンリーダーと[それがどのようにウェブページと相互作用するか](https://www.youtube.com/watch?v=OUDV1gqs9GA)を見てみましょう。意味のないマークアップがあると、なぜユーザーをイライラさせてしまうのかわかりますか?
|
||||
|
||||
## テラリウム
|
||||
|
||||
このインターフェイスの最後の部分では、テラリウムを作成するためのマークアップを作成します。
|
||||
|
||||
### タスク
|
||||
|
||||
このマークアップを最後の `</div>` タグの上に追加します。
|
||||
|
||||
```html
|
||||
<div id="terrarium">
|
||||
<div class="jar-top"></div>
|
||||
<div class="jar-walls">
|
||||
<div class="jar-glossy-long"></div>
|
||||
<div class="jar-glossy-short"></div>
|
||||
</div>
|
||||
<div class="dirt"></div>
|
||||
<div class="jar-bottom"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
✅ このマークアップを画面に追加したにもかかわらず、何も表示されません。なぜでしょうか?
|
||||
|
||||
---
|
||||
|
||||
## チャレンジ
|
||||
|
||||
HTMLに はまだ遊んで楽しいワイルドな「古い」タグがいくつかありますが、[これらのタグ](https://developer.mozilla.org/ja/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)のような非推奨のタグをマークアップに使うべきではありません。それでも、古い `<marquee>` タグを使って h1 タイトルを水平方向にスクロールさせることはできますか？(もしそうする場合は、後から削除することを忘れないでください)
|
||||
|
||||
## レクチャー後クイズ
|
||||
|
||||
[レクチャー後クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
HTML は、今日のウェブを構築するのに役立ってきた「試行錯誤された」ビルディングブロックシステムです。古いタグと新しいタグを研究することで、その歴史について少し学びましょう。あるタグが非推奨になり、あるタグが追加された理由がわかりますか？将来的にはどのようなタグが導入されるかもしれませんか？
|
||||
|
||||
Web やモバイル向けのサイト構築については、[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=cxaall-4621-cxall) で詳しく解説しています。
|
||||
|
||||
|
||||
## 課題
|
||||
|
||||
[HTML の練習: ブログのモックアップを構築する](assignment.ja.md)
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# HTML の練習: ブログのモックアップを構築する
|
||||
|
||||
## 説明書
|
||||
|
||||
個人的な Web サイトをデザインしたり、再デザインしたりしていると想像してみてください。サイトのグラフィカルなマークアップを作成し、サイトの様々な要素を構築するために使用する HTML マークアップを書き留めてください。紙に書いてスキャンしてもいいですし、お好みのソフトウェアを使ってもいいですが、HTML マークアップを手でコーディングして確認してください。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
||||
| | ブログのレイアウトは、少なくとも10個のマークアップ要素が表示された状態で視覚的に表現されます。 | ブログのレイアウトは、マークアップの要素を5つほど表示して視覚的に表現する | ブログのレイアウトは、最大でも3つのマークアップ要素が表示された状態で視覚的に表現されます。 |
|
||||
|
|
@ -4,18 +4,18 @@ You will need to reference the following learn module to complete the quiz:
|
|||
|
||||
[Work with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
|
||||
|
||||
1. [You can write CSS directly in the head section of your HTML file]
|
||||
1. You can write CSS directly in the head section of your HTML file
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
1. [It's always necessary to include CSS in your app]
|
||||
1. It's always necessary to include CSS in your app
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] [false, but if you want it to look good you need CSS]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
- [ ] false, but if you want it to look good you need CSS
|
||||
|
||||
1. [Which browser tool can be used to inspect CSS?]
|
||||
- [ ] [Elements]
|
||||
- [ ] [Styles]
|
||||
- [ ] [Network]
|
||||
1. Which browser tool can be used to inspect CSS?
|
||||
- [ ] Elements
|
||||
- [ ] Styles
|
||||
- [ ] Network
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@ Complete this quiz in class
|
|||
|
||||
1. HTML elements must have either a class or an id in order to be styled
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
2. CSS stands for 'Complete Style Sheets'
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
3. CSS can be used to create animations
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/17)
|
||||
|
||||
### Introduction
|
||||
|
||||
|
|
@ -252,7 +252,7 @@ To complete the post-lecture quiz, go through this Learn module: [Style your HTM
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/18)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,264 @@
|
|||
# テラリウムプロジェクト その2: CSS 入門
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レクチャー前クイズ
|
||||
|
||||
[レクチャー前クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/17)
|
||||
|
||||
### イントロダクション
|
||||
|
||||
CSS (カスケードスタイルシート) は、Web 開発の重要な問題である、Web サイトの見栄えを良くする方法を解決します。また、CSS を使用してレスポンシブ ウェブ デザイン (RWD) を作成することもできます。CSS の仕様には、アプリケーションの洗練されたインタラクションを可能にするアニメーションや変換が含まれています。CSS Working Group は現在の CSS 仕様の維持を支援しており、[World Wide Web Consortium のサイト](https://www.w3.org/Style/CSS/members) でその活動を追うことができます。
|
||||
|
||||
> 注: CSS は Web 上のすべてのものと同様に進化する言語であり、すべてのブラウザが仕様の新しい部分をサポートしているわけではありません。常に [CanIUse.com](caniuse.com) に相談して実装を確認してください。
|
||||
|
||||
このレッスンでは、オンラインテラリウムにスタイルを追加し、カスケード、継承、セレクタの使用、配置、CSS を使ったレイアウトの作成など、CSS の概念について学びます。その過程で、テラリウムをレイアウトし、実際のテラリウムを作成していきます。
|
||||
|
||||
### 前提条件
|
||||
|
||||
テラリウムの HTML が完成し、スタイリングの準備が整っています。
|
||||
|
||||
### タスク
|
||||
|
||||
テラリウムのフォルダに `style.css` というファイルを作成します。そのファイルを `<head>` セクションにインポートしてください。
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## カスケード
|
||||
|
||||
カスケーディングスタイルシートは、スタイルの適用がその優先度によって導かれるように、スタイルが「カスケード」するという考えを取り入れています。Web サイトの作者によってセットされたスタイルはブラウザによってセットされたそれらより優先されます。「インライン」にセットされたスタイルは外部スタイルシートにセットされたものより優先されます。
|
||||
|
||||
### タスク
|
||||
|
||||
インラインスタイル "color: red" を `<h1>` タグに追加します。
|
||||
|
||||
```HTML
|
||||
<h1 style="color: red">My Terrarium</h1>
|
||||
```
|
||||
|
||||
次に、以下のコードを `style.css` ファイルに追加します。
|
||||
|
||||
```CSS
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
✅ Web アプリではどの色が表示されますか? なぜですか? スタイルを上書きする方法を見つけることはできますか? いつ、またはなぜそうしたくないのですか？
|
||||
|
||||
---
|
||||
|
||||
## 継承
|
||||
|
||||
スタイルは、先祖のスタイルから子孫へと継承され、入れ子になった要素は親のスタイルを継承するようになっています。
|
||||
|
||||
### タスク
|
||||
|
||||
body のフォントを指定されたフォントに設定し、入れ子になっている要素のフォントを確認します。
|
||||
|
||||
```
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
ブラウザのコンソールから「要素」タブを開き、h1 のフォントを観察してください。ブラウザ内で述べられているように、フォントは body から継承されています。
|
||||
|
||||
|
||||
|
||||
✅ 入れ子になったスタイルを別のプロパティを継承させることはできますか?
|
||||
|
||||
---
|
||||
|
||||
## CSS セレクタ
|
||||
|
||||
### タグ
|
||||
|
||||
これまでのところ、`style.css` ファイルにはいくつかのタグがスタイリングされているだけで、アプリはかなり変な感じになっています。
|
||||
|
||||
```
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #3a241d;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
このようにタグをスタイリングすることで、ユニークな要素をコントロールすることができますが、テラリウム内の多くの植物のスタイルをコントロールする必要があります。そのためには、CSS セレクタを利用する必要があります。
|
||||
|
||||
### Id
|
||||
|
||||
Add some style to layout the left and right containers. Since there is only one left container and only one right container, they are given ids in the markup. To style them, use `#`:
|
||||
左と右のコンテナをレイアウトするためのスタイルを追加します。左のコンテナと右のコンテナは1つしかないので、マークアップでは id が与えられます。スタイルを設定するには、`#` を使用します。
|
||||
|
||||
```
|
||||
#left-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#right-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
ここでは、これらのコンテナを画面の左端と右端に絶対的な位置に配置し、それらが小さなモバイル画面のためにスケーリングできるように、それらの幅にパーセンテージを使用しています。
|
||||
|
||||
✅ このコードはかなり繰り返されているので、"DRY" (Don't Repeat Yourself) ではありません。マークアップを変更し、CSS をリファクタリングする必要があるでしょう。
|
||||
|
||||
```html
|
||||
<div id="left-container" class="container"></div>
|
||||
```
|
||||
|
||||
### クラス
|
||||
|
||||
上の例では、画面上の2つのユニークな要素にスタイルを設定しました。画面上の多くの要素にスタイルを適用したい場合は、CSS クラスを使用することができます。これを実行して、左右のコンテナに植物をレイアウトします。
|
||||
|
||||
HTML マークアップの各植物には、id とクラスの組み合わせがあることに注目してください。ここでの id は、テラリウムの植物の配置を操作するために後で追加する JavaScript によって使用されます。クラスはすべての植物にスタイルを与えています。
|
||||
|
||||
```html
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||
</div>
|
||||
```
|
||||
|
||||
以下を `style.css` ファイルに追加します。
|
||||
|
||||
```css
|
||||
.plant-holder {
|
||||
position: relative;
|
||||
height: 13%;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.plant {
|
||||
position: absolute;
|
||||
max-width: 150%;
|
||||
max-height: 150%;
|
||||
z-index: 2;
|
||||
}
|
||||
```
|
||||
|
||||
このスニペットで注目すべきは、相対位置と絶対位置が混在していることです。高さをパーセンテージで処理する方法を見てみましょう。
|
||||
|
||||
プラントホルダーの高さを 13% に設定します。これは、すべての植物がスクロールせずに各垂直コンテナに表示されるようにするための良い数字です。
|
||||
|
||||
植物ホルダーを左に移動するように設定すると、植物がその容器の中でより中央に位置するようになります。画像は、それらをよりドラッグしやすいように、大量の透明な背景を持っているので、画面上でより良くフィットするように左に押される必要があります。
|
||||
|
||||
次に、植物自体には 150% の最大幅が与えられています。これにより、ブラウザのスケールダウンに合わせて植物を縮小することができます。ブラウザのサイズを変更してみてください。
|
||||
|
||||
また、注目すべきは、(植物が容器の上に座ってテラリウムの中に座っているように見えるように) 要素の相対的な高度を制御する z-index の使用です。
|
||||
|
||||
✅ なぜ、植物のホルダーと植物の CSS セレクターの両方が必要なのでしょうか？
|
||||
|
||||
## CSS ポジショニング
|
||||
|
||||
位置のプロパティ (静的位置、相対位置、固定位置、絶対位置、スティッキー位置があります) を混ぜるのは少し厄介ですが、適切に行うと、ページ上の要素をうまくコントロールすることができます。
|
||||
|
||||
絶対的な位置にある要素は、最も近い位置にある祖先からの相対的な位置に配置され、存在しない場合は、ドキュメントの本文に従って配置されます。
|
||||
|
||||
相対的に配置された要素は、CSS の指示に基づいて初期位置から離れた位置に配置されます。
|
||||
|
||||
今回のサンプルでは、`plant-holder` は相対的に配置された要素であり、絶対的に配置されたコンテナの中に配置されている。その結果、サイドバーのコンテナは左右に固定され、植物ホルダーは入れ子になってサイドバー内で調整され、植物を縦に並べるためのスペースが与えられています。
|
||||
|
||||
> 次のレッスンで説明するように、`plant` 自体も絶対位置を持っており、ドラッグ可能にするために必要です。
|
||||
|
||||
✅ サイドコンテナとプランターホルダーの配置の種類を入れ替えて実験してみてください。どうなるでしょうか?
|
||||
|
||||
## CSS レイアウト
|
||||
|
||||
ここでは、学んだことを活かして、CSS を使ってテラリウムを作っていきます。
|
||||
|
||||
まず、CSS を使って `.terarium` div の子要素を丸みを帯びた四角形にします。
|
||||
|
||||
```css
|
||||
.jar-walls {
|
||||
height: 80%;
|
||||
width: 60%;
|
||||
background: #d1e1df;
|
||||
border-radius: 10%;
|
||||
position: absolute;
|
||||
bottom: 0.5%;
|
||||
left: 20%;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jar-top {
|
||||
width: 50%;
|
||||
height: 5%;
|
||||
background: #d1e1df;
|
||||
position: absolute;
|
||||
bottom: 80.5%;
|
||||
left: 25%;
|
||||
opacity: 0.7;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jar-bottom {
|
||||
width: 50%;
|
||||
height: 1%;
|
||||
background: #d1e1df;
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
left: 25%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dirt {
|
||||
width: 58%;
|
||||
height: 5%;
|
||||
background: #3a241d;
|
||||
position: absolute;
|
||||
border-radius: 0 0 4rem 4rem;
|
||||
bottom: 1%;
|
||||
left: 21%;
|
||||
opacity: 0.7;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
|
||||
ここでは `border-radius` にもパーセンテージを使用していることに注意してください。ブラウザを縮小すると、瓶のコーナーも拡大縮小されているのがわかります。また、ジャー要素の幅と高さのパーセンテージと、各要素がビューポートの下部に固定されていることにも注目してください。
|
||||
|
||||
✅ 瓶の色と不透明度を変えてみてください。どうなりましたか？なぜですか？
|
||||
|
||||
---
|
||||
|
||||
## 🚀チャレンジ
|
||||
|
||||
瓶の左下の部分に「泡」のような輝きを加えて、よりガラスのように見えるようにします。`.jar-glossy-long` と `.jar-glossy-short` は反射光のように見えるようにスタイリングします。このようになります。
|
||||
|
||||
|
||||
|
||||
レクチャー後クイズを完成させるには、この Learn モジュールを通ってください: [HTML アプリを CSS でスタイルを整える](https://docs.microsoft.com/ja-jp/learn/modules/build-simple-website/4-css-basics)
|
||||
|
||||
## レクチャー後クイズ
|
||||
|
||||
[レクチャー後クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/18)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
CSS は一見簡単そうに見えますが、アプリをすべてのブラウザとすべての画面サイズに完全に対応させようとすると、多くの課題があります。CSS グリッド と Flexbox は、この作業をもう少し構造化し、より信頼性の高いものにするために開発されたツールです。[Flexbox Froggy](https://flexboxfroggy.com/) と [Grid Garden](https://codepip.com/games/grid-garden/) をプレイして、これらのツールについて学びましょう。
|
||||
|
||||
## 課題
|
||||
|
||||
[CSS リファクタリング](assignment.ja.md)
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# CSS リファクタリング
|
||||
|
||||
## 説明
|
||||
|
||||
Flexbox または CSS グリッドを使ってテラリウムのスタイルを変更し、いくつかのブラウザでテストしたことを示すためにスクリーンショットを撮影してください。マークアップを変更する必要があるかもしれないので、リファクタリングのためにアートを配置した新しいバージョンのアプリを作成してください。要素をドラッグ可能にすることは気にしないで、今のところは HTML と CSS をリファクタリングするだけです。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||
| | Flexbox や CSS グリッドを使ってテラリウムのスタイルを完全に変更したものを紹介します。 | いくつかの要素のスタイルを変更します。 | テラリウムのリスタイルに失敗します。 |
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
*Complete this quiz after the lesson by checking one answer per question.*
|
||||
|
||||
1. [The DOM is a model to represent a document on the web]
|
||||
1. The DOM is a model to represent a document on the web
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
2. [Use JavaScript closures to perform the following:]
|
||||
2. Use JavaScript closures to perform the following:
|
||||
|
||||
- [ ] [write functions within functions]
|
||||
- [ ] [enclose the DOM]
|
||||
- [ ] [close script blocks]
|
||||
- [ ] write functions within functions
|
||||
- [ ] enclose the DOM
|
||||
- [ ] close script blocks
|
||||
|
||||
3. [Fill in the blank: Closures are useful when one or more functions need to access an outer function's ______]
|
||||
3. Fill in the blank: Closures are useful when one or more functions need to access an outer function's...
|
||||
|
||||
- [ ] [arrays]
|
||||
- [ ] [scope]
|
||||
- [ ] [functions]
|
||||
- [ ] arrays
|
||||
- [ ] scope
|
||||
- [ ] functions
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@ Complete this quiz in class
|
|||
|
||||
1. The DOM stands for 'Document Object Management'
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
2. The DOM can be thought of as a tree
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
3. Using the Web API, you can manipulate the DOM
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/19)
|
||||
|
||||
### Introduction
|
||||
|
||||
|
|
@ -201,7 +201,7 @@ Add new event handler to your closure to do something more to the plants; for ex
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/20)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,217 @@
|
|||
# テラリウムプロジェクト その3: DOM の操作とクロージャ
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レクチャー前クイズ
|
||||
|
||||
[レクチャー前クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/19)
|
||||
|
||||
### イントロダクション
|
||||
|
||||
DOM (Document Object Model) を操作することは、Web 開発の重要な要素です。[MDN](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction) によると、"Document Object Model (DOM) は、Web 上のドキュメントの構造とコンテンツを構成するオブジェクトのデータ表現である" とのことです。Web 上での DOM 操作の難しさから、バニラ JavaScript ではなく、JavaScript のフレームワークを使って DOM を管理することが多くなっていますが、ここでは自分たちで管理していきましょう!
|
||||
|
||||
また、このレッスンでは、[JavaScript クロージャ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures)という考え方を紹介します。これは、関数を別の関数で囲んで、内側の関数が外側の関数のスコープにアクセスできるようにしたものと考えてください。
|
||||
|
||||
> JavaScript のクロージャは広大で複雑なトピックです。このレッスンでは、このテラリウムのコードの中にクロージャがある、すなわち内側の関数と外側の関数は、内側の関数が外側の関数のスコープにアクセスできるように構築されているという最も基本的な考え方に触れます。これがどのように動作するかについての詳細な情報は [詳細なドキュメント](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures) を参照してください。
|
||||
|
||||
クロージャを使って DOM を操作します。
|
||||
|
||||
DOM をツリーと考え、Web ページのドキュメントを操作できるすべての方法を表しています。様々な API (Application Program Interfaces) が書かれており、プログラマーが自分の好きなプログラミング言語を使って DOM にアクセスし、編集、変更、再配置、その他の管理ができるようになっています。
|
||||
|
||||
|
||||
|
||||
> DOM とそれを参照する HTML マークアップの表現。[Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) より
|
||||
|
||||
このレッスンでは、ユーザーがページ上の植物を操作できるようにする JavaScript を作成して、インタラクティブなテラリウムプロジェクトを完成させます。
|
||||
|
||||
### 前提条件
|
||||
|
||||
テラリウムの HTML と CSS が完成しているはずです。このレッスンが終わる頃には、植物をドラッグしてテラリウムの中に入れたり出したりできるようになります。
|
||||
|
||||
### タスク
|
||||
|
||||
terrarium フォルダ内に `script.js` というファイルを作成します。このファイルを `<head>` セクションにインポートします。
|
||||
|
||||
```html
|
||||
<script src="./script.js" defer></script>
|
||||
```
|
||||
|
||||
> 注: HTML ファイルが完全に読み込まれた後にのみ JavaScript を実行できるようにするために、外部の JavaScript ファイルを HTML ファイルにインポートする際には `defer` を使用してください。また、`async` 属性を使用することもできます。これは HTML ファイルのパース中にスクリプトを実行できるようにしますが、私たちの場合は、ドラッグスクリプトを実行する前に HTML 要素を完全に利用できるようにしておくことが重要です。
|
||||
---
|
||||
|
||||
## DOM 要素
|
||||
|
||||
まず最初に必要なのは、DOM で操作したい要素への参照を作成することです。私たちの場合、それらは現在サイドバーで待機している14個の植物です。
|
||||
|
||||
### タスク
|
||||
|
||||
```html
|
||||
dragElement(document.getElementById('plant1'));
|
||||
dragElement(document.getElementById('plant2'));
|
||||
dragElement(document.getElementById('plant3'));
|
||||
dragElement(document.getElementById('plant4'));
|
||||
dragElement(document.getElementById('plant5'));
|
||||
dragElement(document.getElementById('plant6'));
|
||||
dragElement(document.getElementById('plant7'));
|
||||
dragElement(document.getElementById('plant8'));
|
||||
dragElement(document.getElementById('plant9'));
|
||||
dragElement(document.getElementById('plant10'));
|
||||
dragElement(document.getElementById('plant11'));
|
||||
dragElement(document.getElementById('plant12'));
|
||||
dragElement(document.getElementById('plant13'));
|
||||
dragElement(document.getElementById('plant14'));
|
||||
```
|
||||
|
||||
何が起こっているのでしょうか? ドキュメントを参照し、特定の ID を持つ要素を見つけるために DOM を調べています。HTML の最初のレッスンで、各植物画像に個別の ID (`id="plant1"`) を与えたことを覚えていますか? 今度はその努力を利用してみましょう。各要素を識別した後、その項目を `dragElement` という関数に渡します。これで、HTML 内の要素がドラッグ可能になりました。
|
||||
|
||||
✅ なぜ Id で要素を参照するのか? なぜ CSS クラスではなく Id で要素を参照するのでしょうか? この質問に答えるには、前回の CSS のレッスンを参照してください。
|
||||
|
||||
---
|
||||
|
||||
## クロージャ
|
||||
|
||||
これで、内部の関数や関数 (ここでは3つの関数) を囲む外部関数である dragElement クロージャを作成する準備が整いました。
|
||||
|
||||
クロージャは、1つ以上の関数が外部関数のスコープにアクセスする必要がある場合に便利です。以下に例を示します。
|
||||
|
||||
```javascript
|
||||
function displayCandy(){
|
||||
let candy = ['jellybeans'];
|
||||
function addCandy(candyType) {
|
||||
candy.push(candyType)
|
||||
}
|
||||
addCandy('gumdrops');
|
||||
}
|
||||
displayCandy();
|
||||
console.log(candy)
|
||||
```
|
||||
|
||||
この例では、displayCandy 関数は、新しい candy 型を関数内に既に存在する配列にプッシュする関数を囲んでいます。このコードを実行した場合、`candy` 配列はローカル変数 (クロージャのローカル) であるため、未定義になってしまいます。
|
||||
|
||||
✅ 配列 `candy` にアクセスできるようにするにはどうすればよいでしょうか? クロージャの外に移動させてみてください。こうすることで、配列がグローバルになり、クロージャのローカルスコープでのみ利用できるようになります。
|
||||
|
||||
### タスク
|
||||
|
||||
`script.js` の要素宣言の下に、関数を作成します。
|
||||
|
||||
```javascript
|
||||
function dragElement(terrariumElement) {
|
||||
//スクリーン上の位置のための 4 つの位置を置きます
|
||||
let pos1 = 0,
|
||||
pos2 = 0,
|
||||
pos3 = 0,
|
||||
pos4 = 0;
|
||||
terrariumElement.onpointerdown = pointerDrag;
|
||||
}
|
||||
```
|
||||
|
||||
`dragElement` はスクリプトの先頭にある宣言から `terrariumElement` オブジェクトを取得します。そして、関数に渡されたオブジェクトのローカル位置を `0` に設定します。これらは、クロージャ内で各要素にドラッグ＆ドロップ機能を追加する際に、各要素に対して操作されるローカル変数です。テラリウムにはこれらの要素がドラッグされて配置されるので、アプリケーションはこれらの要素がどこに配置されたかを把握しておく必要があります。
|
||||
|
||||
さらに、この関数に渡された terrariumElement には `pointerdown` イベントが割り当てられており、これは DOM の管理を支援するために設計された [Web API](https://developer.mozilla.org/ja/docs/Web/API) の一部です。`onpointerdown` は、ボタンが押されたとき、あるいはドラッグ可能な要素がタッチされたときに発生します。このイベントハンドラは、いくつかの例外を除いて、[Web ブラウザとモバイルブラウザ](https://caniuse.com/?search=onpointerdown)の両方で動作します。
|
||||
|
||||
✅ [イベントハンドラの `onclick`](https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onclick) はクロスブラウザに対応しています。ここで使用する理由は何でしょうか? ここで作成しようとしているスクリーンインタラクションの正確なタイプを考えてみてください。
|
||||
|
||||
---
|
||||
|
||||
## Pointerdrag 関数
|
||||
|
||||
テラリウム要素をドラッグする準備ができました。イベント `onpointerdown` が発生すると、関数 pointerDrag が呼び出されます。この行のすぐ下にこの関数を追加します: `terrariumElement.onpointerdown = pointerDrag;`
|
||||
|
||||
### Task
|
||||
|
||||
```javascript
|
||||
function pointerDrag(e) {
|
||||
e.preventDefault();
|
||||
console.log(e);
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
}
|
||||
```
|
||||
|
||||
いくつかのことが起こります。まず、`e.preventDefault();` を使用してポインタダウン時に通常発生するデフォルトのイベントが発生しないようにします。このようにして、インターフェイスの動作をより制御することができます。
|
||||
|
||||
> スクリプトファイルを完全にビルドした後、この行に戻って `e.preventDefault()` を使わずに試してみてください - どうなりますか？
|
||||
|
||||
次に、ブラウザのウィンドウで `index.html` を開き、インターフェイスを調べる。植物をクリックすると、'e' イベントがどのように捕捉されているかを確認することができます。イベントを掘り下げて、1つのポインタダウンイベントでどれだけの情報が集まっているかを確認してみましょう!
|
||||
|
||||
次に、ローカル変数 `pos3` と `pos4` が e.clientX に設定されていることに注目してください。`e` の値はインスペクションペインで見つけることができます。これらの値は、植物をクリックしたり触ったりした瞬間の x と y の座標を取得します。植物をクリックしたりドラッグしたりしたときの動作を細かく制御する必要があるので、その座標を把握しておく必要があります。
|
||||
|
||||
✅ なぜこのアプリ全体が1つの大きなクロージャで構築されているのかがより明確になってきていますか? そうでないとしたら、どのようにして14個のドラッグ可能な植物のそれぞれのスコープを維持するのでしょうか?
|
||||
|
||||
`pos4 = e.clientY` の下にポインタイベントの操作を2つ追加して、初期関数を完成させます。
|
||||
|
||||
```html
|
||||
document.onpointermove = elementDrag;
|
||||
document.onpointerup = stopElementDrag;
|
||||
```
|
||||
これで、植物を移動させる際にポインタに沿って植物をドラッグし、植物の選択を解除したときにドラッグジェスチャを停止させたいことを示していることになります。`onpointermove` と `onpointerup` はすべて `onpointerdown` と同じ API の一部である。まだ `elementDrag` と `stopElementDrag` 関数が定義されていないので、インターフェイスはエラーをスローします。
|
||||
|
||||
## elementDrag 関数と stopElementDrag 関数
|
||||
|
||||
植物をドラッグしてドラッグを停止したときに何が起こるかを処理する内部関数をさらに 2 つ追加して、クロージャを完成させます。あなたが望む動作は、任意の植物をいつでもドラッグして、画面上のどこにでも配置できるようにすることです。このインターフェイスは、植物を追加、削除、再配置することで、あなたが好きなように正確にあなたのテラリウムをデザインできるようにするために、かなり非オピニオン的です (例えば、ドロップゾーンはありません)。
|
||||
|
||||
### タスク
|
||||
|
||||
関数 `elementDrag` を `pointerDrag` の閉じ括弧の直後に追加する。
|
||||
|
||||
```javascript
|
||||
function elementDrag(e) {
|
||||
pos1 = pos3 - e.clientX;
|
||||
pos2 = pos4 - e.clientY;
|
||||
pos3 = e.clientX;
|
||||
pos4 = e.clientY;
|
||||
console.log(pos1, pos2, pos3, pos4);
|
||||
terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
|
||||
terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
|
||||
}
|
||||
```
|
||||
この関数では、外部関数でローカル変数として設定した初期位置1～4の編集を多く行います。ここで何が起こっているのでしょうか?
|
||||
|
||||
ドラッグしながら `pos1` を `pos3` (先ほど `e.clientX` と設定したもの) から現在の `e.clientX` の値を引いた値に等しくすることで再指定します。同様の操作を `pos2` に行います。次に、`pos3` と `pos4` を要素の新しい X 座標と Y 座標にリセットします。これらの変更は、ドラッグしながらコンソールで見ることができます。次に、植物の css スタイルを操作して `pos1` と `pos2` の新しい位置をもとに植物の新しい位置を設定し、植物のオフセットと新しい位置を比較して植物の上下左右の X 座標を計算します。
|
||||
|
||||
> `offsetTop` と `offsetLeft` は CSS のプロパティで、要素の位置を親の位置に基づいて設定します。親は `static` として配置されていない要素であれば何でも構いません。
|
||||
|
||||
このように位置を再計算することで、テラリウムとその植物の挙動を微調整することができます。
|
||||
|
||||
### タスク
|
||||
|
||||
インターフェースを完成させるための最後のタスクは、`elementDrag` の中括弧を閉じた後に `stopElementDrag` 関数を追加することです。
|
||||
|
||||
```javascript
|
||||
function stopElementDrag() {
|
||||
document.onpointerup = null;
|
||||
document.onpointermove = null;
|
||||
}
|
||||
```
|
||||
|
||||
この小さな関数は `onpointerup` と `onpointermove` イベントをリセットし、植物のドラッグを再開して植物の進行を再開するか、新しい植物のドラッグを開始するようにします。
|
||||
|
||||
✅ これらのイベントを null に設定しないとどうなるのでしょうか?
|
||||
|
||||
これでプロジェクトが完成しました!
|
||||
|
||||
🥇おめでとうございます。素敵なテラリウムが完成しましたね。 
|
||||
|
||||
---
|
||||
|
||||
## チャレンジ
|
||||
|
||||
新しいイベントハンドラをクロージャに追加して、植物にもっと何かをするようにします。例えば、植物をダブルクリックして前の方に持ってきます。創造力を発揮してください。
|
||||
|
||||
## レクチャー後クイズ
|
||||
|
||||
[レクチャー後クイズ](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/20)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
画面の周りに要素をドラッグすることは些細なことのように思えますが、これには多くの方法があり、求める効果に応じて多くの落とし穴があります。実際、試してみることができる[ドラッグ＆ドロップ API](https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API) があります。このモジュールでは使用しませんでしたが、自分のプロジェクトでこの API を試してみて、何ができるか見てみてください。
|
||||
|
||||
ポインタイベントの詳細は [W3C docs](https://www.w3.org/TR/pointerevents1/) や [MDN web docs](https://developer.mozilla.org/ja/docs/Web/API/Pointer_events) を参照してください。
|
||||
|
||||
常に [CanIUse.com](https://caniuse.com/) でブラウザの機能を確認してください。
|
||||
|
||||
## 課題
|
||||
|
||||
[DOM をもう少し使いこなす](assignment.ja.md)
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# DOM をもう少し使いこなす
|
||||
|
||||
## 説明書
|
||||
|
||||
DOM 要素を「採用」することで、もう少し DOM を研究してみましょう。MSDN の [DOM インターフェイス一覧](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model)にアクセスして、一つ選びます。それが Web 上の Web サイトで使われているのを Web 上で見つけて、それがどのように使われているかの説明を書きます。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
|
||||
| | 段落書きを例に挙げて紹介します。 | 例示せずに、段落書きを提示 | 書き込みはありません。 |
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
Una pequeña meditación de código de arrastrar y soltar. Con un poco de HTML, JS y CSS, puede crear una interfaz web, darle estilo y agregar una interacción.
|
||||
|
||||
|
||||
|
||||
|
||||
# Lessons
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
# マイテラリウム: JavaScript を使った HTML・CSS・DOM 操作を学ぶプロジェクト 🌵🌱
|
||||
|
||||
ちょっとしたドラッグ＆ドロップのコードメディテーション。少しの HTML、JS、CSS で、Web インターフェースを構築し、スタイルを設定し、インタラクションを追加することができます。
|
||||
|
||||
|
||||
|
||||
# レッスン
|
||||
|
||||
1. [HTML 入門](./1-intro-to-html/README.md)
|
||||
2. [CSS 入門](./2-intro-to-css/README.md)
|
||||
3. [DOM と JS Closures の紹介](./3-intro-to-DOM-and-closures/README.md)
|
||||
|
||||
## クレジット
|
||||
|
||||
Written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
|
||||
|
||||
CSS で作ったテラリウムは、Jakub Mandra のガラス瓶 [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) にインスパイアされています。
|
||||
|
||||
アートワークは [Jen Looper](http://jenlooper.com) が Procreate を使って手書きで描いたものです。
|
||||
|
||||
## テラリウムのデプロイ
|
||||
|
||||
Azure Static Web Apps を使ってテラリウムをデプロイしたり、ウェブに公開したりすることができます。
|
||||
|
||||
1. このリポジトリをフォークします
|
||||
|
||||
2. このボタンを押します
|
||||
|
||||
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=cxaall-4621-cxall#create/Microsoft.StaticApp)
|
||||
|
||||
3. アプリを作成するウィザードに沿って進みます。アプリのルートを `/solution` またはコードベースのルートに設定してください。このアプリには API はありませんので、追加については心配しないでください。フォークされたレポに .github フォルダが作成され、Azure Static Web Apps のビルドサービスのビルドを支援し、新しい URL にアプリを公開します。
|
||||
|
||||
|
||||
|
|
@ -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)
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](../.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/21)
|
||||
|
||||
## Event driven programming
|
||||
|
||||
|
|
@ -326,7 +326,7 @@ Add more functionality
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](../.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/22)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
# 新しいキーボードゲームを作成する
|
||||
|
||||
## 説明書
|
||||
|
||||
キーボードのイベントを使ってタスクを行う小さなゲームを作りましょう。異なる種類のタイピングゲームや、キー入力で画面にピクセルをペイントするアートタイプのゲームにすることもできます。創造力を発揮してください。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | ------------------------ | ------------------------ | ----------------- |
|
||||
| | フルゲームが発表される。 | ゲームは非常にミニマム。 | ゲームにはバグがある。 |
|
||||
| |
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23)
|
||||
|
||||
### Introduction
|
||||
|
||||
|
|
@ -150,7 +150,7 @@ Take a look at a browser extension store and install one to your browser. You ca
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,167 @@
|
|||
# ブラウザ拡張機能プロジェクト その 1: ブラウザのすべて
|
||||
|
||||
|
||||
> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
|
||||
|
||||
## レッスン前の小テスト
|
||||
|
||||
[レッスン前の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23)
|
||||
|
||||
### イントロダクション
|
||||
|
||||
ブラウザ拡張機能はブラウザに機能を追加するものです。しかし、拡張機能を作る前に、ブラウザがどのように機能するのかを少し学んでおく必要があります。
|
||||
|
||||
### ブラウザについて
|
||||
|
||||
この一連のレッスンでは、Chrome、Firefox、Edge ブラウザで動作するブラウザ拡張機能の構築方法を学びます。このパートでは、ブラウザがどのように動作するのかを理解し、ブラウザ拡張の要素を足場にしていきます。
|
||||
|
||||
しかし、ブラウザとは正確には何でしょうか? それは、エンドユーザーがサーバーからコンテンツにアクセスして Web ページに表示することを可能にするソフトウェアアプリケーションです。
|
||||
|
||||
✅ 少し歴史を紹介します: 最初のブラウザは 'WorldWideWeb' と呼ばれ、1990年にティモシー・バーナーズ・リー卿によって作成されました。
|
||||
|
||||
|
||||
> いくつかの初期のブラウザは、[Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) を経由しています。
|
||||
|
||||
ユーザーが URL (Uniform Resource Locator) アドレスを使用してインターネットに接続すると、通常は Hypertext Transfer Protocol を使用して `http` または `https` アドレスを経由して、ブラウザが Web サーバと通信して Web ページを取得します。
|
||||
|
||||
この時点で、ブラウザのレンダリングエンジンがユーザのデバイス (携帯電話、デスクトップ、ラップトップなど) にページを表示します。
|
||||
|
||||
ブラウザにはコンテンツをキャッシュする機能もあり、毎回サーバから取得する必要がありません。ブラウザは、ユーザーのブラウジング活動の履歴を記録したり、ユーザーの活動を保存するために使用される情報を含む小さなデータである「クッキー」を保存したりすることができます。
|
||||
|
||||
ブラウザについて覚えておくべき重要なことは、ブラウザはすべて同じではないということです。それぞれのブラウザには長所と短所があり、プロの Web 開発者は、Web ページをクロスブラウザでうまく動作させる方法を理解する必要があります。これには、携帯電話のような小さなビューポートやオフラインのユーザーへの対応も含まれます。
|
||||
|
||||
あなたが使いたいブラウザにブックマークしておくべき本当に便利な Web サイトは、[caniuse.com](https://www.caniuse.com) です。Web ページを作成する際には、caniuse のサポートされている技術のリストを利用すると、ユーザーを最大限にサポートすることができるので、非常に便利です。
|
||||
|
||||
✅ どのブラウザがあなたの Web サイトのユーザーに最も人気があるのか、どのようにして知ることができるでしょうか? アナリティクスをチェックする - Web 開発プロセスの一環として様々なアナリティクスパッケージをインストールすることができ、様々な人気のあるブラウザで最も使用されているブラウザを教えてくれます。
|
||||
|
||||
## ブラウザの拡張機能
|
||||
|
||||
なぜブラウザ拡張機能を作ろうと思ったのでしょうか? ブラウザの拡張機能は、何度も繰り返しがちな作業に素早くアクセスしたいときに便利なものです。例えば、対話する様々な Web ページの色をチェックする必要がある場合は、カラーピッカーブラウザ拡張機能をインストールするとよいでしょう。パスワードを覚えるのが面倒な場合は、パスワード管理ブラウザ拡張機能を使うとよいでしょう。
|
||||
|
||||
ブラウザ拡張機能は開発するのも楽しいものです。彼らは、有限のタスクを管理する傾向があり、それがうまく機能しています。
|
||||
|
||||
✅ お気に入りのブラウザ拡張機能は何ですか? どのようなタスクを実行しますか?
|
||||
|
||||
### 拡張機能のインストール
|
||||
|
||||
ビルドを始める前に、ブラウザ拡張機能のビルドとデプロイのプロセスを見てみましょう。ブラウザによってこのタスクを管理する方法は少し異なりますが、Chrome と Firefox では、Edge のこの例とプロセスは似ています。
|
||||
|
||||
|
||||
|
||||
本質的には、このプロセスになります。
|
||||
|
||||
- `npm build` を使って拡張機能をビルドします
|
||||
- ブラウザの右上にある「設定とその他」ボタン (`...` アイコン) を使って、拡張機能ペインに移動します
|
||||
- 新規インストールの場合は、`load unpacked` を選択してビルドフォルダ (私たちの場合は `/dist`) から新しい拡張機能をアップロードします
|
||||
- または、既にインストールされている拡張機能をリロードする場合は `reload` をクリックします
|
||||
|
||||
✅ 各ブラウザに関連付けられたブラウザ拡張機能ストアにリリースされた拡張機能をインストールするには、それらの [ストア](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) に移動して、お好みの拡張機能をインストールしてください。
|
||||
|
||||
### 開始する
|
||||
|
||||
あなたの地域のカーボンフットプリントを表示し、地域のエネルギー使用量とエネルギー源を表示するブラウザ拡張機能を構築します。拡張機能には、CO2 Signal API にアクセスできるように API キーを収集するフォームがあります。
|
||||
|
||||
**必要なもの:**
|
||||
|
||||
- [API キー](https://www.co2signal.com/); このページのボックスにメールアドレスを入力します
|
||||
- [電力地図](https://www.electricitymap.org/map) に対応する地域のコード (例えばボストンでは 'US-NEISO' を使用しています)
|
||||
- [スターターコード](../../start)。`start`フォルダをダウンロードしてください。このフォルダでコードを完成させることになります。
|
||||
- [NPM](https://www.npmjs.com) - NPM はパッケージ管理ツールです。ローカルにインストールすると、`package.json` ファイルに記載されているパッケージがインストールされ、Web アセットで使用されます。
|
||||
|
||||
✅ この[優れた Learn モジュール](https://docs.microsoft.com/ja-jp/learn/modules/create-nodejs-project-dependencies/)では、パッケージ管理の詳細を学ぶことができます。
|
||||
|
||||
コードベースに目を通してみてください。
|
||||
|
||||
dist
|
||||
-|manifest.json (ここに設定されているデフォルト)
|
||||
-|index.html (フロントエンド HTML マークアップはこちら)
|
||||
-|background.js (バックグラウンド JS はこちら)
|
||||
-|main.js (ビルド JS)
|
||||
src
|
||||
-|index.js (あなたのJSコードはここにあります)
|
||||
|
||||
✅ API キーとリージョンコードが手元にあれば、後で使うときのためにノートのどこかに保存しておきましょう。
|
||||
|
||||
### 拡張機能の HTML を構築する
|
||||
|
||||
この拡張機能には2つのビューがあります。1つは API キーとリージョンコードを収集するためのものです。
|
||||
|
||||
|
||||
|
||||
そして2つ目は、地域の炭素使用量を表示するためのものです。
|
||||
|
||||
|
||||
|
||||
まずはフォーム用の HTML を構築し、CSS でスタイリングしてみましょう。
|
||||
|
||||
`/dist` フォルダにフォームと結果領域を作成します。`index.html` ファイルの中には、区切りのついたフォーム領域を作成します。
|
||||
|
||||
```HTML
|
||||
<form class="form-data" autocomplete="on">
|
||||
<div>
|
||||
<h2>New? Add your Information</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label for="region">Region Name</label>
|
||||
<input type="text" id="region" required class="region-name" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="api">Your API Key from tmrow</label>
|
||||
<input type="text" id="api" required class="api-key" />
|
||||
</div>
|
||||
<button class="search-btn">Submit</button>
|
||||
</form>
|
||||
```
|
||||
これは、保存した情報を入力し、ローカルストレージに保存するフォームです。
|
||||
|
||||
次に、結果領域を作成します。最終的なフォームタグの下に、いくつかの div を追加します。
|
||||
|
||||
```HTML
|
||||
<div class="result">
|
||||
<div class="loading">loading...</div>
|
||||
<div class="errors"></div>
|
||||
<div class="data"></div>
|
||||
<div class="result-container">
|
||||
<p><strong>Region: </strong><span class="my-region"></span></p>
|
||||
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
|
||||
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
|
||||
</div>
|
||||
<button class="clear-btn">Change region</button>
|
||||
</div>
|
||||
```
|
||||
この時点で、ビルドを試してみましょう。この拡張モジュールのパッケージの依存関係を必ずインストールしてください。
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
このコマンドは、Node Package Manager である npm を使用して、拡張機能のビルドプロセスに Webpack をインストールします。webpack はコードのコンパイルを処理するバンドルです。この処理の出力は `/dist/main.js` を見ることで見ることができます - コードがバンドルされていることがわかります。
|
||||
|
||||
とりあえず、拡張機能をビルドして、拡張機能として Edge にデプロイすると、フォームがきれいに表示されます。
|
||||
|
||||
これで、ブラウザ拡張機能を構築するための第一歩が踏み出せました。この後のレッスンでは、ブラウザ拡張機能をより機能的で便利なものにしていきます。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
ブラウザの拡張機能ストアを見て、ブラウザにインストールしてください。興味深い方法でそのファイルを調べることができます。あなたは何を発見しましたか？
|
||||
|
||||
## レッスン後の小テスト
|
||||
|
||||
[レッスン後の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
このレッスンでは、Web ブラウザの歴史について少し学びました。この機会に、Web ブラウザの歴史を読むことで、World Wide Web の発明者がどのように Web ブラウザの使用を想定しているかを学びましょう。役に立つサイトをいくつか紹介します。
|
||||
|
||||
[Web ブラウザの歴史](https://www.mozilla.org/en-US/firefox/browsers/browser-history/)
|
||||
|
||||
[Web の歴史](https://webfoundation.org/about/vision/history-of-the-web/)
|
||||
|
||||
[ティム・バーナーズ・リーのインタビュー](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
|
||||
|
||||
## 課題
|
||||
|
||||
[拡張機能のスタイル変更](assignment.ja.md)
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# 拡張機能のスタイル変更
|
||||
|
||||
## 説明書
|
||||
|
||||
この拡張機能のコードベースにはスタイルが完全に含まれていますが、それらを使用する必要はありません。css ファイルを編集してスタイルを変更することで拡張機能を自分のものにしてください。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切 | 改善が必要 |
|
||||
| -------- | -------------------------------------------- | --------------------- | ----------------- |
|
||||
| | コードは機能的な新しいスタイルで提出されます | スタイリングが不完全 | スタイルがバグっている |
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25)
|
||||
|
||||
### Introduction
|
||||
|
||||
|
|
@ -210,7 +210,7 @@ We've discussed several types of API so far in these lessons. Choose a web API a
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,222 @@
|
|||
# ブラウザ拡張機能プロジェクト その 2: API の呼び出し、ローカルストレージの使用
|
||||
|
||||
## レッスン前の小テスト
|
||||
|
||||
[レッスン前の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25)
|
||||
|
||||
### イントロダクション
|
||||
|
||||
このレッスンでは、ブラウザ拡張機能のフォームを送信して API を呼び出し、その結果をブラウザ拡張機能に表示します。また、将来の参照や利用のために、ブラウザのローカルストレージにデータを保存する方法についても学びます。
|
||||
|
||||
✅ コードをどこに配置するかについては、適切なファイル内の番号の付いたセグメントを参照してください。
|
||||
|
||||
### 拡張機能で操作する要素の設定:
|
||||
|
||||
この時点で、フォーム用の HTML とブラウザ拡張機能用の結果 `<div>` が構築されています。これからは、`/src/index.js` ファイルを使って少しずつ拡張機能を構築していく必要があります。プロジェクトのセットアップとビルドのプロセスについては [前のレッスン](.../.../1-about-browsers/translations/README.ja.md) を参照してください。
|
||||
|
||||
`index.js` ファイルの中で作業を行うには、様々なフィールドに関連付けられた値を保持するための `const` 変数を作成することから始めます。
|
||||
|
||||
```JavaScript
|
||||
// フォームフィールド
|
||||
const form = document.querySelector('.form-data');
|
||||
const region = document.querySelector('.region-name');
|
||||
const apiKey = document.querySelector('.api-key');
|
||||
|
||||
// 結果
|
||||
const errors = document.querySelector('.errors');
|
||||
const loading = document.querySelector('.loading');
|
||||
const results = document.querySelector('.result-container');
|
||||
const usage = document.querySelector('.carbon-usage');
|
||||
const fossilfuel = document.querySelector('.fossil-fuel');
|
||||
const myregion = document.querySelector('.my-region');
|
||||
const clearBtn = document.querySelector('.clear-btn');
|
||||
```
|
||||
|
||||
前のレッスンで HTML で設定したように、これらのフィールドはすべてその CSS クラスによって参照されます。
|
||||
|
||||
### リスナーの追加
|
||||
|
||||
次に、フォームにイベントリスナーを追加し、フォームをリセットするクリアボタンを追加します。ユーザーがフォームを送信したり、リセットボタンをクリックしたりした場合に、そのリセットボタンをクリックするようにします。何かが起こるときのため、ファイルの一番下にアプリを初期化するための呼び出しを追加します。
|
||||
|
||||
```JavaScript
|
||||
form.addEventListener('submit', (e) => handleSubmit(e));
|
||||
clearBtn.addEventListener('click', (e) => reset(e));
|
||||
init();
|
||||
```
|
||||
|
||||
✅ 投稿やクリックのイベントをリッスンするために使用される速記法と、そのイベントがどのように handleSubmit や reset 関数に渡されるかに注目してください。この速記法と同等のものを、より長い形式で書くことができますか? どちらがいいですか?
|
||||
|
||||
### init() 関数と reset() 関数のビルド
|
||||
|
||||
今度は拡張機能を初期化する関数を作ります。これは init() と呼ばれています。
|
||||
|
||||
```JavaScript
|
||||
function init() {
|
||||
//何かがローカルストレージにある場合は、それをピックアップします。
|
||||
const storedApiKey = localStorage.getItem('apiKey');
|
||||
const storedRegion = localStorage.getItem('regionName');
|
||||
|
||||
//アイコンを一般的な緑色に設定
|
||||
//todo
|
||||
|
||||
if (storedApiKey === null || storedRegion === null) {
|
||||
//キーを持っていない場合は、フォームを表示します。
|
||||
form.style.display = 'block';
|
||||
results.style.display = 'none';
|
||||
loading.style.display = 'none';
|
||||
clearBtn.style.display = 'none';
|
||||
errors.textContent = '';
|
||||
} else {
|
||||
//ローカルストレージにキー/領域を保存している場合、そのキー/領域がロードされたときに結果を表示します。
|
||||
displayCarbonUsage(storedApiKey, storedRegion);
|
||||
results.style.display = 'none';
|
||||
form.style.display = 'none';
|
||||
clearBtn.style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
function reset(e) {
|
||||
e.preventDefault();
|
||||
//リージョン専用のローカルストレージをクリアします。
|
||||
localStorage.removeItem('regionName');
|
||||
init();
|
||||
}
|
||||
|
||||
```
|
||||
この関数には、面白いロジックがあります。これを読み進めていくと、何が起こるかわかりますか?
|
||||
|
||||
- 2つの `const` は、ユーザが API キーとリージョンコードをローカルストレージに保存しているかどうかをチェックするために設定されます
|
||||
- どちらかが null の場合、フォームのスタイルを 'block' として表示するように変更してフォームを表示します
|
||||
- 結果、読み込み、および clearBtn を非表示にし、エラーテキストを空の文字列に設定します
|
||||
- キーとリージョンが存在する場合は、そのためのルーチンを開始します
|
||||
- API を呼び出して炭素使用量のデータを取得します
|
||||
- 結果領域を非表示にします
|
||||
- フォームを非表示にします
|
||||
- リセットボタンを表示します
|
||||
|
||||
先に進む前に、ブラウザで利用できる非常に重要な概念を知っておくと便利です。それは [ローカルストレージ](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage) です。ローカルストレージは文字列を `key-value` のペアとしてブラウザに保存する便利な方法です。このタイプの Web ストレージは JavaScript で操作することができ、ブラウザでデータを管理することができます。ローカルストレージは有効期限がありませんが、もう一つの種類の Web ストレージであるセッションストレージはブラウザを閉じると消去されます。様々なタイプのストレージには、その使用方法に長所と短所があります。
|
||||
|
||||
> 注意 - ブラウザ拡張機能は独自のローカルストレージを持っています。メインのブラウザウィンドウは別のインスタンスであり、別々に動作します。
|
||||
|
||||
API キーに文字列の値を設定して、例えば Edge では Web ページを「検査」して (ブラウザを右クリックして検査することができます)、「アプリケーション」タブに行ってストレージを確認することで設定されていることがわかります。
|
||||
|
||||
|
||||
|
||||
✅ ローカルストレージにデータを保存したくない状況を考えてみてください。一般的に、API キーをローカルストレージに置くのは悪い考えです! 理由がわかりますか? 私たちの場合、アプリは純粋に学習用であり、アプリストアにはデプロイされないので、このメソッドを使用します。
|
||||
|
||||
ローカルストレージを操作するには、`getItem()`, `setItem()`, `removeItem()` のいずれかの方法で Web API を使用することに注意してください。これはブラウザ全体で広くサポートされています。
|
||||
|
||||
`init()` で呼び出される `displayCarbonUsage()` 関数を構築する前に、フォームの初期投稿を処理する機能を構築しましょう。
|
||||
|
||||
### フォーム送信の処理
|
||||
|
||||
イベント引数 `(e)` を受け取る関数 `handleSubmit` を作成します。イベントの伝播を停止し (この場合、ブラウザの更新を停止したい)、新しい関数 `setUpUser` を呼び出し、引数 `apiKey.value` と `region.value` を渡します。このようにして、適切なフィールドが入力されたときに初期フォームから取得される2つの値を利用します。
|
||||
|
||||
```JavaScript
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setUpUser(apiKey.value, region.value);
|
||||
}
|
||||
```
|
||||
✅ 記憶をリフレッシュしてください - 前回のレッスンで設定した HTML には、ファイルの先頭に設定した `const` で `values` が取得される2つの入力フィールドがあり、両方とも `required` であるため、ブラウザはユーザが null 値を入力しないようにします。
|
||||
|
||||
### ユーザーの設定
|
||||
|
||||
次に `setUpUser` 関数に進み、ここで apiKey と regionName のローカルストレージの値を設定します。新しい関数を追加します。
|
||||
|
||||
```JavaScript
|
||||
function setUpUser(apiKey, regionName) {
|
||||
localStorage.setItem('apiKey', apiKey);
|
||||
localStorage.setItem('regionName', regionName);
|
||||
loading.style.display = 'block';
|
||||
errors.textContent = '';
|
||||
clearBtn.style.display = 'block';
|
||||
//初期化の呼び出し
|
||||
displayCarbonUsage(apiKey, regionName);
|
||||
}
|
||||
```
|
||||
この関数は、API が呼び出されている間に表示するローディングメッセージを設定します。この時点で、このブラウザ拡張機能の最も重要な機能の作成に到達しました!
|
||||
|
||||
### 炭素使用量の表示
|
||||
|
||||
ついに API に問い合わせをする時が来ました!
|
||||
|
||||
先に進む前に、API について説明しましょう。API ([Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html)) は、Web 開発者のツールボックスの重要な要素です。API は、プログラムが相互作用し、相互にインターフェースするための標準的な方法を提供します。例えば、データベースへの問い合わせが必要な Web サイトを構築している場合、誰かが API を作成しているかもしれません。API には多くの種類がありますが、最も人気のあるものの一つが [REST API](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/) です。
|
||||
|
||||
✅ 'REST' とは 'Representational State Transfer' の略で、様々な設定の URL を使ってデータを取得するのが特徴です。開発者が利用できる様々なタイプの API について少し調べてみてください。どのような形式に興味がありますか?
|
||||
|
||||
この関数には注意すべき重要な点があります。まず、[`async` キーワード](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)に注目してください。非同期的に実行されるように関数を書くということは、データが返されるなどのアクションが完了するのを待ってから続行するということです。
|
||||
|
||||
以下は `async` についての簡単なビデオです:
|
||||
|
||||
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
|
||||
|
||||
C02Signal API に問い合わせを行うための新しい関数を作成します:
|
||||
|
||||
```JavaScript
|
||||
import axios from '../node_modules/axios';
|
||||
|
||||
async function displayCarbonUsage(apiKey, region) {
|
||||
try {
|
||||
await axios
|
||||
.get('https://api.co2signal.com/v1/latest', {
|
||||
params: {
|
||||
countryCode: region,
|
||||
},
|
||||
headers: {
|
||||
'auth-token': apiKey,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
let CO2 = Math.floor(response.data.data.carbonIntensity);
|
||||
|
||||
//calculateColor(CO2);
|
||||
|
||||
loading.style.display = 'none';
|
||||
form.style.display = 'none';
|
||||
myregion.textContent = region;
|
||||
usage.textContent =
|
||||
Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
|
||||
fossilfuel.textContent =
|
||||
response.data.data.fossilFuelPercentage.toFixed(2) +
|
||||
'% (percentage of fossil fuels used to generate electricity)';
|
||||
results.style.display = 'block';
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
loading.style.display = 'none';
|
||||
results.style.display = 'none';
|
||||
errors.textContent = 'Sorry, we have no data for the region you have requested.';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
これは大きな機能です。何が起こっているのでしょうか?
|
||||
|
||||
- ベストプラクティスに従って、この関数を非同期的に動作させるために `async` キーワードを使用します。API がデータを返すときにプロミスを返すので、この関数には `try/catch` ブロックが含まれています。API が応答する速度を制御できないので (全く応答しないかもしれません!)、非同期的に呼び出すことでこの不確実性を処理する必要があります
|
||||
- co2signal API に問い合わせをして、API キーを使用してリージョンのデータを取得しています。そのキーを使用するには、ヘッダのパラメータで認証の種類を使用しなければなりません
|
||||
- API が応答したら、その応答データの様々な要素を、このデータを表示するために設定した画面の部分に割り当てます
|
||||
- エラーがあったり、結果が出なかったりすると、エラーメッセージが表示されます
|
||||
|
||||
✅ 非同期プログラミングパターンを使用することも、ツールボックスの中で非常に便利なツールです。このタイプのコードを設定するための[様々な方法について](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function)お読みください。
|
||||
|
||||
おめでとうございます! 拡張機能をビルド (`npm run build`) して、拡張機能ペインで更新すると、拡張機能が動作するようになりました! 動作していないのはアイコンだけで、次のレッスンで修正します。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
これらのレッスンでは、これまでにいくつかの種類の API について説明してきました。Web API を選択して、その API が提供しているものを詳しく調べてみましょう。例えば、[HTML ドラッグ＆ドロップ API](https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API) のようなブラウザ内で利用できる API を見てみましょう。あなたの意見では、何が素晴らしい API を作るのでしょうか?
|
||||
|
||||
## レッスン後の小テスト
|
||||
|
||||
[レッスン後の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
このレッスンではローカルストレージと API について学びましたが、どちらもプロの Web 開発者にとって非常に有用なものです。この2つがどのように連携しているか考えてみましたか? API で使用するアイテムを保存する Web サイトをどのように構築するか考えてみてください。
|
||||
|
||||
## 課題
|
||||
|
||||
[API を採用する](assignment.ja.md)
|
||||
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# API を採用する
|
||||
|
||||
## 説明書
|
||||
|
||||
API はとても楽しく遊べます。ここでは、[多くの無料のもののリスト](https://github.com/public-apis/public-apis)を紹介します。API を選んで、問題を解決するブラウザ拡張機能を構築してください。それは、ペットの写真が十分にないという小さな問題 (だから、[dog CEO API](https://dog.ceo/dog-api/) を試してみてください) であっても、何か大きな問題であっても構いません - 楽しんでください!
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
|
||||
| | 完全なブラウザ拡張機能は、上記のリストの API を使用して送信されます。 | ブラウザの拡張機能の一部を提出 | 投稿にはバグがある |
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27)
|
||||
|
||||
### Introduction
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ Investigate some open source web sites have been around a long time ago, and, ba
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,161 @@
|
|||
# ブラウザ拡張機能プロジェクト その 3: バックグラウンドタスクとパフォーマンスについて学ぶ
|
||||
|
||||
## レッスン前の小テスト
|
||||
|
||||
[レッスン前の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27)
|
||||
|
||||
### イントロダクション
|
||||
|
||||
このモジュールの最後の2つのレッスンでは、API からフェッチしたデータのフォームと表示領域を構築する方法を学びました。これは、Web 上でウェブプレゼンスを作成するための非常に標準的な方法です。非同期的にデータをフェッチする方法も学びました。ブラウザ拡張機能はほぼ完成しています。
|
||||
|
||||
拡張機能のアイコンの色を更新するなどのバックグラウンドタスクが残っているので、この機会にブラウザがこのようなタスクをどのように管理しているのかについて話しましょう。これらのブラウザタスクについて、Web 資産を構築する際のパフォーマンスとの関連で考えてみましょう。
|
||||
|
||||
## Web パフォーマンスの基礎
|
||||
|
||||
> "Web サイトのパフォーマンスには2つのことがあります: ページの読み込み速度と、その上のコードの実行速度です。" -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
どのようにしてあらゆるデバイス、あらゆるユーザー、あらゆる状況で、あなたのウェブサイトを燃えるように高速化するかという話題は、当然のことながら膨大なものになります。ここでは、標準的な Web プロジェクトまたはブラウザ拡張機能を構築する際に留意すべきポイントをいくつか紹介します。
|
||||
|
||||
サイトが効率的に動作していることを確認するために最初に行う必要があることは、そのパフォーマンスに関するデータを収集することです。これを行う最初の場所は、Web ブラウザの開発者ツールにあります。Edge では、「設定とその他」ボタン（ブラウザの右上にある3つの点のアイコン）を選択してから、「その他のツール」→「開発者ツール」に移動し、「パフォーマンス」タブを開きます。Windows ではキーボードショートカット `Ctrl` + `Shift` + `I`、Mac では `Option` + `Command` + `I` を使用して開発者ツールを開くこともできます。
|
||||
|
||||
パフォーマンスタブには、プロファイリングツールが含まれています。Web サイトを開いて (例えば https://www.microsoft.com を試してみてください)、「記録」ボタンをクリックし、サイトを更新します。いつでも録画を停止することができ、サイトを「スクリプト」、「レンダリング」、「ペイント」するために生成されたルーチンを見ることができます。
|
||||
|
||||
|
||||
|
||||
✅ Edge のパフォーマンスパネルの [Microsoft ドキュメント](https://docs.microsoft.com/ja-jp/microsoft-edge/edgehtml/) を参照してください。
|
||||
|
||||
> ヒント: Web サイトの起動時間を正確に把握するには、ブラウザのキャッシュをクリアしてください。
|
||||
|
||||
プロファイルのタイムラインの要素を選択すると、ページの読み込み中に発生するイベントをズームインできます。
|
||||
|
||||
プロファイルのタイムラインの一部を選択してサマリーペインを見ることで、ページのパフォーマンスのスナップショットを得ることができます。
|
||||
|
||||
|
||||
|
||||
イベントログペインをチェックして、15ms 以上かかったイベントがあるかどうかを確認します。
|
||||
|
||||
|
||||
|
||||
✅ プロファイラを知りましょう! このサイトの開発者ツールを開いて、ボトルネックがないか確認してみましょう。最も読み込みが遅いアセットは? 一番速いのは?
|
||||
|
||||
## プロファイリングチェック
|
||||
|
||||
一般的には、本番環境にデプロイする際に厄介な驚きを避けるために、すべての Web 開発者がサイトを構築する際に注意すべき「問題点」がいくつかあります。
|
||||
|
||||
**アセットサイズ**: Web はここ数年で「重く」なり、その結果、遅くなっています。この重さのいくつかは、画像の使用に関係しています。
|
||||
|
||||
✅ ページの重さなどの歴史的な見方については、[Internet Archive](https://httparchive.org/reports/page-weight) を参照してください。
|
||||
|
||||
良い方法は、画像が最適化され、ユーザーにとって適切なサイズと解像度で配信されるようにすることです。
|
||||
|
||||
**DOM トラバーサル**: ブラウザはあなたが書いたコードに基づいて Document Object Model を構築しなければならないので、タグを最小限に抑え、ページが必要とするものだけを使用してスタイリングすることがページパフォーマンスの向上につながります。この点については、ページに関連する余分な CSS を最適化することができます。例えば、1 つのページでのみ使用する必要のあるスタイルは、メインのスタイルシートに含める必要はありません。
|
||||
|
||||
**JavaScript**: すべての JavaScript 開発者は、DOM の残りの部分を走査してブラウザに描画する前にロードしなければならない 'レンダーブロッキング' スクリプトに注意する必要があります。(テラリウムモジュールで行われているように) インラインスクリプトで `defer` を使うことを検討してください。
|
||||
|
||||
✅ [Site Speed Test の Web サイト](https://www.webpagetest.org/)でいくつかのサイトを試してみると、サイトのパフォーマンスを判断するために行われる一般的なチェックについて詳しく知ることができます。
|
||||
|
||||
これで、ブラウザが送信したアセットをどのようにレンダリングするかがわかったので、拡張機能を完成させるために必要な最後のいくつかのことを見てみましょう。
|
||||
|
||||
### 色を計算する関数の作成
|
||||
|
||||
`src/index.js` の中で作業し、`calculateColor()` という関数を、DOM にアクセスするために設定した一連の変数 `const` の後に追加します。
|
||||
|
||||
```JavaScript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
let closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
console.log(value + ' is closest to ' + closestNum);
|
||||
let num = (element) => element > closestNum;
|
||||
let scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
let closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
ここでは何をしているのでしょうか? 前回のレッスンで完了した API コールの値 (炭素強度) を渡して、その値が colors 配列のインデックスにどれだけ近いかを計算します。そして、最も近い色の値を chrome.runtime に送ります。
|
||||
|
||||
chrome.runtime には、あらゆる種類のバックグラウンドタスクを処理する [API](https://developer.chrome.com/extensions/runtime) があり、あなたの拡張機能はそれを利用しています。
|
||||
|
||||
> "chrome.runtime API を使用して、バックグラウンドページを取得したり、マニフェストの詳細を返したり、アプリや拡張機能のライフサイクルでイベントをリッスンして応答したりすることができます。また、この API を使用して URL の相対パスを完全修飾 URL に変換することもできます。"
|
||||
|
||||
✅ このブラウザ拡張を Edge 用に開発していると、chrome の API を使っていることに驚くかもしれません。新しい Edge ブラウザのバージョンは Chromium ブラウザエンジン上で動作しているので、これらのツールを活用することができます。
|
||||
|
||||
> ブラウザ拡張機能をプロファイル化したい場合は、拡張機能自体が独立したブラウザインスタンスであるため、拡張機能自体の中から開発ツールを起動してください。
|
||||
|
||||
### デフォルトのアイコンの色の設定
|
||||
|
||||
ここで、`init()` 関数の中で、アイコンをジェネリックグリーンに設定して、chrome の `updateIcon` アクションを再度呼び出して起動します。
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### 関数の呼び出し、呼び出しの実行
|
||||
|
||||
次に、C02Signal API が返すプロミスに追加して、先ほど作成した関数を呼び出します。
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
最後に、`/dist/background.js` で、これらのバックグラウンドアクションの呼び出し用のリスナーを追加します。
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//エナジーロリポップの拡張機能から借りた、良い機能
|
||||
function drawIcon(value) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
このコードでは、バックエンドのタスクマネージャに来るメッセージのリスナーを追加しています。'updateIcon' と呼ばれる場合、次のコードを実行して、Canvas API を使って適切な色のアイコンを描画しています。
|
||||
|
||||
✅ Canvas API については、[スペースゲームのレッスン](../../../6-space-game/2-drawing-to-canvas/translations/README.ja.md)で詳しく説明しています。
|
||||
|
||||
さて、拡張機能を再構築 (`npm run build`) して、リフレッシュして拡張機能を起動し、色の変化を見てみましょう。用事を済ませるのにも、お皿を洗うのにも良い時間帯でしょうか? これでわかりました!
|
||||
|
||||
おめでとうございます。あなたは便利なブラウザ拡張機能を構築し、ブラウザがどのように動作するのか、そのパフォーマンスをどのようにプロファイルするのかについて、より多くのことを学びました。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
オープンソースの Web サイトの中には、かなり昔からあるものもあり、それらの GitHub の歴史に基づいて、何年にもわたってどのようにパフォーマンスが最適化されてきたのかを調べてみましょう。最も一般的な問題点は何でしょうか?
|
||||
|
||||
## レッスン後の小テスト
|
||||
|
||||
[レッスン後の小テスト](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28)
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
[パフォーマンスニュースレター](https://perf.email/)への登録を検討してみませんか?
|
||||
|
||||
Web ツールのパフォーマンスタブを見て、ブラウザが Web のパフォーマンスを評価する方法のいくつかを調査してください。大きな違いはありますか?
|
||||
|
||||
## 課題
|
||||
|
||||
[パフォーマンスのためにサイトを分析する](assignment.ja.md)
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
# パフォーマンスのためにサイトを分析する
|
||||
|
||||
Web サイトの詳細なレポートを提供し、パフォーマンスに問題がある領域を示します。サイトの速度が遅い理由と、速度を上げるために何ができるかを分析します。ブラウザツールだけに頼るのではなく、レポートに役立つ他のツールについても調査しましょう。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||
| | レポートは、ブラウザツールだけでなく、サードパーティのツールが利用可能な場合は、サードパーティのツールから詳細を引き出して表示されます。 | 基本報告書を掲載しました | 最小限の報告書が提示される |
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
# カーボントリガーブラウザ拡張機能： 完成したコード
|
||||
|
||||
tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。
|
||||
|
||||
|
||||
|
||||
## はじめに
|
||||
|
||||
[npm](https://npmjs.com) がインストールされている必要があります。このコードのコピーをコンピュータ上のフォルダにダウンロードしてください。
|
||||
|
||||
必要なパッケージをすべてインストールします。
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
webpack から拡張機能をビルドします。
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Edge にインストールするには、ブラウザの右上にある「3つのドット」メニューから「拡張機能」パネルを見つけます。そこから「Load Unpacked」を選択して、新しい拡張機能をロードします。プロンプトで「dist」フォルダを開くと、拡張機能が読み込まれます。使用するには、CO2 シグナル API の API キー ([get one here via email](https://www.co2signal.com/) - このページのボックスにメールを入力してください) と、[Electricity Map](https://www.electricitymap.org/map) に対応する [code for your region](http://api.electricitymap.org/v3/zones) が必要です (ボストンでは、例えば、'US-NEISO' を使用しています)。
|
||||
|
||||
|
||||
|
||||
API キーと地域を拡張インターフェイスに入力すると、ブラウザの拡張バーに表示される色付きのドットが変化し、あなたの地域のエネルギー使用量を反映して、どのようなエネルギーを必要とする活動を行うのが適切なのかを示してくれます。この「ドット」システムのコンセプトは、カリフォルニア州の排出量のための [Energy Lollipop extension](https://energylollipop.com/) が私に与えてくれたものです。
|
||||
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
# カーボントリガーブラウザ拡張機能： スターターコード
|
||||
|
||||
tmrow の C02 シグナル API を使用して電力使用量を追跡するために、あなたの地域の電力使用量がどれだけ多いかをブラウザ上でリマインダーとして表示できるようにブラウザ拡張機能を構築します。この拡張機能をアドホックに使用することで、この情報に基づいてあなたの活動を判断することができます。
|
||||
|
||||
|
||||
|
||||
## はじめに
|
||||
|
||||
[npm](https://npmjs.com) がインストールされている必要があります。このコードのコピーをコンピュータ上のフォルダにダウンロードしてください。
|
||||
|
||||
必要なパッケージをすべてインストールします。
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
webpack から拡張機能をビルドします。
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Edge にインストールするには、ブラウザの右上にある「3つのドット」メニューから「拡張機能」パネルを見つけます。そこから「Load Unpacked」を選択して、新しい拡張機能をロードします。プロンプトで「dist」フォルダを開くと、拡張機能が読み込まれます。使用するには、CO2 シグナル API の API キー ([get one here via email](https://www.co2signal.com/) - このページのボックスにメールを入力してください) と、[Electricity Map](https://www.electricitymap.org/map) に対応する [code for your region](http://api.electricitymap.org/v3/zones) が必要です (ボストンでは、例えば、'US-NEISO' を使用しています)。
|
||||
|
||||
|
||||
|
||||
API キーと地域を拡張インターフェイスに入力すると、ブラウザの拡張バーに表示される色付きのドットが変化し、あなたの地域のエネルギー使用量を反映して、どのようなエネルギーを必要とする活動を行うのが適切なのかを示してくれます。この「ドット」システムのコンセプトは、カリフォルニア州の排出量のための [Energy Lollipop extension](https://energylollipop.com/) が私に与えてくれたものです。
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ Esta extensión puede ser llamada ad hoc por un usuario una vez que se ingresa u
|
|||
|
||||
### Créditos
|
||||
|
||||
|
||||
|
||||
|
||||
## Créditos
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
# ブラウザ拡張機能の構築
|
||||
|
||||
ブラウザ拡張機能を構築することは、異なるタイプの Web 資産を構築しながら、アプリのパフォーマンスについて考えることができる、楽しくて興味深い方法です。このモジュールでは、ブラウザの仕組みやブラウザ拡張機能の展開方法、フォームの構築方法、API の呼び出し方、ローカルストレージの使用方法、Web サイトのパフォーマンスを測定して改善する方法などのレッスンが含まれています。
|
||||
|
||||
Edge、Chrome、Firefox で動作するブラウザ拡張機能を構築します。この拡張機能は、非常に特定のタスクに合わせたミニ Web サイトのようなもので、[C02 Signal API](https://www.co2signal.com) を使って、指定された地域の電力使用量と炭素強度をチェックし、その地域のカーボンフットプリントの読み取り値を返します。
|
||||
|
||||
この拡張機能は、API キーと地域コードがフォームに入力されると、ユーザーがアドホックに呼び出すことができ、地域の電力使用量を決定し、それによってユーザーの電力決定に影響を与えるデータを提供することができます。例えば、地域の電力使用量が多い時期には、衣類乾燥機の運転を遅らせることが望ましいかもしれません。
|
||||
|
||||
### トピック
|
||||
|
||||
1. [ブラウザについて](1-about-browsers/translations/README.ja.md)
|
||||
2. [フォームとローカルストレージ](2-forms-browsers-local-storage/translations/README.ja.md)
|
||||
3. [バックグラウンドタスクとパフォーマンス](3-background-tasks-and-performance/translations/README.ja.md)
|
||||
|
||||
### クレジット
|
||||
|
||||
|
||||
|
||||
## クレジット
|
||||
|
||||
この Web カーボントリガーのアイデアは、Microsoft のグリーンクラウドアドボカシーチームのリーダーであり、[グリーンプリンシプル](https://principles.green/) の著者でもある Asim Hussain 氏によって提供されました。もともとは [Web サイトプロジェクト](https://github.com/jlooper/green) でした。
|
||||
|
||||
ブラウザ拡張の構造は [Adebola Adeniran の COVID 拡張機能](https://github.com/onedebos/covtension) の影響を受けています。
|
||||
|
||||
「ドット」アイコンシステムのコンセプトは、カリフォルニア州の排出量のためのブラウザ拡張機能 [Energy Lollipop](https://energylollipop.com/) のアイコン構造によって提案されました。
|
||||
|
||||
These lessons were written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
|
||||
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
2. Composition is a preferred design pattern for game objects
|
||||
2. Composition is the preferred design pattern for game objects
|
||||
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
|
@ -14,4 +14,4 @@
|
|||
|
||||
- [ ] Publish/Subscribe
|
||||
- [ ] Print/Staple
|
||||
- [ ] Publish/Sanitize
|
||||
- [ ] Publish/Sanitize
|
||||
|
|
|
|||
|
|
@ -4,15 +4,15 @@ Complete this quiz in class
|
|||
|
||||
1. JavaScript is an unpopular language for building games
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
2. Pub/Sub is a preferred pattern for managing the game's assets and flow
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
||||
3. Object inheritance can be handled by either using classes or composition
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] true
|
||||
- [ ] false
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/29)
|
||||
|
||||
### Inheritance and Composition in game development
|
||||
|
||||
|
|
@ -213,7 +213,7 @@ Think about how the pub-sub pattern can enhance a game. Which parts should emit
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/30)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/31)
|
||||
|
||||
## The Canvas
|
||||
|
||||
|
|
@ -205,7 +205,7 @@ You've learned about drawing with the 2D-focused Canvas API; take a look at the
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/32)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/33)
|
||||
|
||||
Games aren't much fun until you have aliens running around on screen! In this game, we will make use of two types of movements:
|
||||
|
||||
|
|
@ -377,7 +377,7 @@ As you can see, your code can turn into 'spaghetti code' when you start adding f
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/34)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/35)
|
||||
|
||||
In this lesson you will learn how to shoot lasers with JavaScript! We will add two things to our game:
|
||||
|
||||
|
|
@ -286,7 +286,7 @@ Add an explosion! Take a look at the game assets in [the Space Art repo](../solu
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/36)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/37)
|
||||
|
||||
In this lesson, you'll learn how to add scoring to a game and calculate lives.
|
||||
|
||||
|
|
@ -178,7 +178,7 @@ Your code is almost complete. Can you envision your next steps?
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/38)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/39)
|
||||
|
||||
There are different ways to express and *end condition* in a game. It's up to you as the creator of the game to say why the game has ended. Here are some reasons, if we assume we are talking about the space game you have been building so far:
|
||||
|
||||
|
|
@ -211,7 +211,7 @@ Add a sound! Can you add a sound to enhance your game play, maybe when there's a
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/40)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Un juego espacial para enseñar los fundamentos de JavaScript más avanzados
|
|||
|
||||
En esta lección aprenderás a construir tu propio juego espacial. Si alguna vez has jugado al juego "Space Invaders", este juego tiene la misma idea: dirigir una nave espacial y disparar a los monstruos que vienen desde arriba. Así es como se verá el juego terminado:
|
||||
|
||||
|
||||
|
||||
|
||||
En estas seis lecciones aprenderá lo siguiente:
|
||||
|
||||
|
|
@ -23,4 +23,4 @@ En estas seis lecciones aprenderá lo siguiente:
|
|||
- [Mover elementos por la pantalla](moving-elements-around/README.md)
|
||||
- [Detección de colisiones](collision-detection/README.md)
|
||||
- [Manteniendo la puntuación](keeping-score/README.md)
|
||||
- [Finalizar y reiniciar el juego](end-condition/README.md)
|
||||
- [Finalizar y reiniciar el juego](end-condition/README.md)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/41)
|
||||
|
||||
### Introduction
|
||||
|
||||
|
|
@ -293,7 +293,7 @@ Add a new template and route for a third page that shows the credits for this ap
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/42)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/43)
|
||||
|
||||
### Introduction
|
||||
|
||||
|
|
@ -281,7 +281,7 @@ Here's an example of what the final login page can look like after a bit of styl
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/44)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/45)
|
||||
|
||||
### Introduction
|
||||
|
||||
|
|
@ -325,7 +325,7 @@ Here's an example of a styled dashboard page:
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/46)
|
||||
|
||||
## Assignment
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/47)
|
||||
|
||||
### Introduction
|
||||
|
||||
|
|
@ -270,7 +270,7 @@ Try working together to change what is saved and loaded from `localStorage` to o
|
|||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/48)
|
||||
|
||||
## Assignment
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,8 @@ While we have purposefully avoided introducing JavaScript frameworks so as to co
|
|||
- assignment
|
||||
- post-lesson quiz
|
||||
|
||||
> **A note about quizzes**: All quizzes are contained [in this app](https://nice-beach-0fe9e9d0f.azurestaticapps.net/), for 48 total quizzes of three questions each. They are linked from within the lessons but the quiz app can be run locally; follow the instruction in the `quiz-app` folder. They are gradually being localized.
|
||||
|
||||
## Lessons
|
||||
|
||||
| | Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Written Lesson | Sketchnote | Assignment | Starting Quiz | Ending Quiz | Video | Author |
|
||||
|
|
|
|||
|
|
@ -1087,6 +1087,16 @@
|
|||
"postcss": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"@kazupon/vue-i18n-loader": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@kazupon/vue-i18n-loader/-/vue-i18n-loader-0.5.0.tgz",
|
||||
"integrity": "sha512-Tp2mXKemf9/RBhI9CW14JjR9oKjL2KH7tV6S0eKEjIBuQBAOFNuPJu3ouacmz9hgoXbNp+nusw3MVQmxZWFR9g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"js-yaml": "^3.13.1",
|
||||
"json5": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"@mrmlnc/readdir-enhanced": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
|
||||
|
|
@ -10917,6 +10927,11 @@
|
|||
"integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
|
||||
"dev": true
|
||||
},
|
||||
"vue-i18n": {
|
||||
"version": "8.22.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.22.2.tgz",
|
||||
"integrity": "sha512-rb569fVJInPUgS/bbCxEQ9DrAoFTntuJvYoK4Fpk2VfNbA09WzdTKk57ppjz3S+ps9hW+p9H+2ASgMvojedkow=="
|
||||
},
|
||||
"vue-loader": {
|
||||
"version": "15.9.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.6.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11",
|
||||
"vue-i18n": "^8.22.2",
|
||||
"vue-router": "^3.4.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -2,9 +2,14 @@
|
|||
<div>
|
||||
<nav>
|
||||
<router-link class="navlink" to="/">Home</router-link>
|
||||
<label for="locale">locale</label>
|
||||
<select v-model="locale">
|
||||
<option>en</option>
|
||||
<option>id</option>
|
||||
</select>
|
||||
</nav>
|
||||
<div id="app">
|
||||
<h1>Web Development for Beginners: Quizzes</h1>
|
||||
<h1>{{ $t("title") }}</h1>
|
||||
<router-view>
|
||||
<Quiz />
|
||||
</router-view>
|
||||
|
|
@ -14,12 +19,29 @@
|
|||
|
||||
<script>
|
||||
import Quiz from "@/components/Quiz.vue";
|
||||
import messages from "@/assets/translations";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
i18n: { messages },
|
||||
components: {
|
||||
Quiz,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
locale: "en",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
locale(val) {
|
||||
this.$root.$i18n.locale = val;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.loc) {
|
||||
this.locale = this.$route.query.loc;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -51,6 +73,9 @@ h3,
|
|||
.message {
|
||||
text-align: center;
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
.card {
|
||||
width: 60%;
|
||||
border: #252d4a solid;
|
||||
|
|
|
|||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,14 @@
|
|||
// index.js
|
||||
import en from './en.json';
|
||||
import fr from './fr.json';
|
||||
import id from './id.json';
|
||||
|
||||
//export const defaultLocale = 'en';
|
||||
|
||||
const messages = {
|
||||
en: en[0],
|
||||
fr: fr[0],
|
||||
id: id[0],
|
||||
};
|
||||
|
||||
export default messages;
|
||||
|
|
@ -2,19 +2,24 @@
|
|||
<div class="card">
|
||||
<div v-for="q in questions" :key="q.id">
|
||||
<div v-if="route == q.id">
|
||||
<h2>
|
||||
{{ q.quiz[currentQuestion].questionText }}
|
||||
</h2>
|
||||
<h3 class="message">{{ message }}</h3>
|
||||
<div>
|
||||
<button
|
||||
:key="index"
|
||||
v-for="(option, index) in q.quiz[currentQuestion].answerOptions"
|
||||
@click="handleAnswerClick(option.isCorrect)"
|
||||
class="btn ans-btn"
|
||||
>
|
||||
{{ option.answerText }}
|
||||
</button>
|
||||
<h2>{{ q.title }}</h2>
|
||||
<hr />
|
||||
<h3 v-if="complete" class="message">{{ $t("complete") }}</h3>
|
||||
<div v-else>
|
||||
<h3 v-if="error" class="error">{{ $t("error") }}</h3>
|
||||
<h2>
|
||||
{{ q.quiz[currentQuestion].questionText }}
|
||||
</h2>
|
||||
<div>
|
||||
<button
|
||||
:key="index"
|
||||
v-for="(option, index) in q.quiz[currentQuestion].answerOptions"
|
||||
@click="handleAnswerClick(option.isCorrect)"
|
||||
class="btn ans-btn"
|
||||
>
|
||||
{{ option.answerText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,40 +27,45 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import questions from "@/assets/data/en/quiz.json";
|
||||
import messages from "@/assets/translations";
|
||||
|
||||
export default {
|
||||
name: "Quiz",
|
||||
data() {
|
||||
return {
|
||||
currentQuestion: 0,
|
||||
message: "",
|
||||
startQuiz: false,
|
||||
restart: false,
|
||||
questions: questions,
|
||||
complete: false,
|
||||
error: false,
|
||||
route: "",
|
||||
locale: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
questions() {
|
||||
return this.$t("quizzes");
|
||||
},
|
||||
},
|
||||
|
||||
i18n: { messages },
|
||||
methods: {
|
||||
handleAnswerClick(isCorrect) {
|
||||
this.error = false;
|
||||
let nextQuestion = this.currentQuestion + 1;
|
||||
console.log(nextQuestion);
|
||||
if (isCorrect == "true") {
|
||||
this.message = "";
|
||||
//always 3 questions per quiz
|
||||
if (nextQuestion < 3) {
|
||||
this.currentQuestion = nextQuestion;
|
||||
} else {
|
||||
this.message = "Well done, you've completed the quiz";
|
||||
this.complete = true;
|
||||
}
|
||||
} else {
|
||||
this.message = "sorry, try again";
|
||||
this.error = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log(this.$route.params.id);
|
||||
this.route = this.$route.params.id;
|
||||
this.locale = this.$route.query.loc;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,4 +3,12 @@ import App from './App.vue';
|
|||
Vue.config.productionTip = false;
|
||||
import router from './router';
|
||||
|
||||
new Vue({ router, render: (h) => h(App) }).$mount('#app');
|
||||
import VueI18n from 'vue-i18n';
|
||||
Vue.use(VueI18n);
|
||||
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en',
|
||||
fallbackLocale: 'en',
|
||||
});
|
||||
|
||||
new Vue({ i18n, router, render: (h) => h(App) }).$mount('#app');
|
||||
|
|
|
|||
|
|
@ -1,75 +1,26 @@
|
|||
<template>
|
||||
<div>
|
||||
<router-link class="link" to="quiz/1"
|
||||
>Lesson 1: Pre-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link to="quiz/2">Lesson 1: Post-Lecture Quiz</router-link>
|
||||
<router-link class="link" to="quiz/3"
|
||||
>Lesson 2: Pre-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/4"
|
||||
>Lesson 2: Post-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/5"
|
||||
>Lesson 3: Pre-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/6"
|
||||
>Lesson 3: Post-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/7"
|
||||
>Lesson 4: Pre-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/8"
|
||||
>Lesson 4: Post-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/9"
|
||||
>Lesson 5: Pre-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/10"
|
||||
>Lesson 5: Post-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/11"
|
||||
>Lesson 6: Pre-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/12"
|
||||
>Lesson 6: Post-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/13"
|
||||
>Lesson 7: Pre-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/14"
|
||||
>Lesson 7: Post-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/15"
|
||||
>Lesson 8: Pre-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/16"
|
||||
>Lesson 8: Post-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/17"
|
||||
>Lesson 9: Pre-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/18"
|
||||
>Lesson 9: Post-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/19"
|
||||
>Lesson 10: Pre-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/20"
|
||||
>Lesson 10: Post-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/21"
|
||||
>Lesson 11: Pre-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/22"
|
||||
>Lesson 11: Post-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/23"
|
||||
>Lesson 12: Pre-Lecture Quiz</router-link
|
||||
>
|
||||
<router-link class="link" to="quiz/24"
|
||||
>Lesson 12: Post-Lecture Quiz</router-link
|
||||
<router-link
|
||||
v-for="q in questions"
|
||||
:key="q.id"
|
||||
:to="`quiz/${q.id}`"
|
||||
class="link"
|
||||
>
|
||||
{{ q.title }}
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import messages from "@/assets/translations";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
computed: {
|
||||
questions() {
|
||||
return this.$t("quizzes");
|
||||
},
|
||||
},
|
||||
i18n: { messages },
|
||||
};
|
||||
</script>
|
||||
|
|
@ -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 サイトがサーブされます。
|
||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче