JavaScript30
JavaScript30という初学者向けの有名なサイトがあります。
このサイトはとても評判がよく、Qiitaの記事でも多くのいいねを集めた記事にも掲載されていました。
そんな有名なサイトの教材をTypeScriptで書いてみたら、TypeScriptの勉強にもなるのでは？と思ってセットアップしてみました。
セットアップ
JavaScript30のGitHubリポジトリをフォークしてクローンします（フォークする理由は後述します）
git clone git@github.com:GitHubのユーザーネーム/JavaScript30.git
クローンしたリポジトリに移動
cd JavaScript30
移動したら
npm init -y
npm install --save-dev typescript
ここからtsconfig.jsonを作成。
{
"compilerOptions": {
"target": "ES2020",
"lib": ["DOM", "ES2020"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"include": ["src/**/*"]
}
これで設定は完了しました。
JavaScript30のルートにsrcディレクトリを作り、その配下にTypeScriptを作成していきます。
.
└── JavaScript30/
└── src/
└── 01-drum-kit/
└── index.ts
作成したら以下のコマンドを実行。
npm run dev
するとdistディレクトリに01-drum-kit/index.jsが作成されます。
実際に書いてみる
今回のJavaScript30の最初の教材「JavaScript Drum Kit」のTypeScriptを書いてきます。
function removeTransition(e: Event): void {
const transitionEvent = e as TransitionEvent;
if (transitionEvent.propertyName !== "transform") return;
(e.target as HTMLElement).classList.remove("playing");
}
function playSound(e: KeyboardEvent): void {
const audio = document.querySelector(
`audio[data-key="${e.code}"]` // KeyCodeではなくcodeを使用
) as HTMLAudioElement;
const key = document.querySelector(
`div[data-key="${e.code}"]`
) as HTMLElement;
if (!audio) return;
key.classList.add("playing");
audio.currentTime = 0;
audio.play();
}
const keys: HTMLElement[] = Array.from(document.querySelectorAll(".key"));
keys.forEach((key) => key.addEventListener("transitionend", removeTransition));
window.addEventListener("keydown", playSound);
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>
<div class="keys">
<div data-key="KeyA" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div data-key="KeyS" class="key">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="KeyD" class="key">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div data-key="KeyF" class="key">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div data-key="KeyG" class="key">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div data-key="KeyH" class="key">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div data-key="KeyJ" class="key">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div data-key="KeyK" class="key">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div data-key="KeyL" class="key">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>
<audio data-key="KeyA" src="sounds/clap.wav"></audio>
<audio data-key="KeyS" src="sounds/hihat.wav"></audio>
<audio data-key="KeyD" src="sounds/kick.wav"></audio>
<audio data-key="KeyF" src="sounds/openhat.wav"></audio>
<audio data-key="KeyG" src="sounds/boom.wav"></audio>
<audio data-key="KeyH" src="sounds/ride.wav"></audio>
<audio data-key="KeyJ" src="sounds/snare.wav"></audio>
<audio data-key="KeyK" src="sounds/tom.wav"></audio>
<audio data-key="KeyL" src="sounds/tink.wav"></audio>
<!-- distに作られたindex.jsを読み込んでいる -->
<script src="../dist/01-drum-kit/index.js" defer></script>
</body>
</html>
オリジナルのJavaScript30との差分
JavaScript30の教材ではJavaScriptのKeyCodeが使われています。
KeyCodeは現在、非推奨ですのでcodeを使用しています。
それに伴ってdata-keyもキー番号ではなく、どのキーを押すかに変更しました。
とりあえずはこれで一旦は完成しました。
せっかく勉強しているのでレビューしてもらいたい（動いた！だけでは満足できない人向け）
TypeScriptで書いてみて、型エラーも出さず、動くものが完成しました。
とはいえ、果たして良い書き方ができているのかは分かりません。
なので、Geminiにコードレビューしてもらうようにします（JavaScript30をフォークした理由はここにあります）
実際に自分のリポジトリでGeminiにレビューしてもらうには、以下の記事が分かりやすかったし、簡単でした。
実際にGeminiにレビューしてもらった画像が以下になります。
（ここだけではなく、他にいくつかレビューをしてもらってます）
最後に
Geminiのコードレビューが出た当初は正直微妙だな、と思っていましたが最近ではとても精度が上がっているように思えます。
チームで使うのはもちろんですが、こうやって自分の学習にも無料で使えるのはとてもありがたいですね。
新しいプログラミング言語のチャレンジにも使えると思います。
つくづく良い時代になったな〜…