Skip to content

Latest commit

 

History

History
106 lines (71 loc) · 3.32 KB

README.md

File metadata and controls

106 lines (71 loc) · 3.32 KB

TypeScript 事前課題

この事前課題は、以下のことを目的としています。

  • TypeScript の言語機能の習得
  • ブラウザの DOM API に触れる

課題 1: TypeScript の習得

TypeScript Handbook を一通り読みましょう。

課題 2: FizzBuzz

TypeScript を使って、ブラウザ上で FizzBuzz が動作するようにしましょう。src/fizzbuzz.ts を編集して、以下の要件が満たされるようにしてください。

FizzBuzz ボタンを押したら、ol要素に次々とli要素が追加され、FizzBuzz が表示されるようにしてください。

N 番目のli要素は、N が 3 で割り切れるとき“Fizz”、5 で割り切れるとき“Buzz”、3 でも 5 で割り切れるとき“FizzBuzz”、それ以外のときは N の数字をテキストノードとして持ちます。

はじめは以下のように空のol要素があります。

<ol></ol>

一度ボタンを押したら以下のように、ひとつli要素が追加されます。

<ol>
  <li>1</li>
</ol>

何度もボタンを押すと、以下のように FizzBuzz のルールに従ってli要素が追加されていきます。

<ol>
  <li>1</li>
  <li>2</li>
  <li>Fizz</li>
  <li>4</li>
  <li>Buzz</li>
  <li>6</li>
  ...
</ol>

DOM と呼ばれる API を利用するとよいでしょう。

取り組み方

リポジトリのルートで、以下のようにローカルサーバーを起動できます。

$ make ts-dev

この状態で http://localhost:9000 にアクセスすると、FizzBuzz のページを見ることができます。

期待通りに動作しているかどうかは、リポジトリのルートで、以下のようにテストを実行することで確認できます。

$ make ts-test

ヒント

FizzBuzz を実装するには何通りもの方法があります。

例えば以下の interface を満たすようなFizzBuzz class を作る方法があるでしょう。

interface FizzBuzz {
  next(): string;
}

あるいは以下のようにGenerator にすることもできるでしょう。

function* fizzbuzz(): IterableIterator<string> {}

自由な発想で FizzBuzz を実現してください。

参考資料

  • TypeScript Handbook
    • TypeScript について一通り学べる
  • MDN Web Docs
    • Web ページを構成する技術について網羅的にまとまっている

ツール

Developer Tools

ブラウザの Developer Tools でログを確認したり、デバッガーを使ったりできます。