## はじめての大きなTypeScript課題！
1週間は**7日間**。
- **金曜日**や週末はみんな大好きで、**月曜日**は誰も好きではない；
- 特定の条件で実行されるコードブロックを用意しています；
- あなたの課題は、**今日が何曜日かを判定するコード**を書くことです。もし今日が`Monday`なら最初の条件付きコードブロックが実行されます。`Friday`なら2番目のブロックが実行される、というように続きます。空欄（`___`）をあなたのコードで埋めて、この処理を実装してください；
- コードの理解に困った場合は、**ヒント**や**解答**ボタンを使ってください；
- 解答を見て分析することもためらわずに行いましょう。それによって自分のコードの正しさを理解できます。

let today: string = 'Friday'
if (___) {
    ___("Oh, it's Monday.. again");
} else if (___) {
    ___("It's Friday my dudes!");
} else if (___) {
    ___("I can sleep all day!");
} else if (___) {
    ___("The last day of weekends");
} else {
    ___("Waiting for the weekends..")
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/theme/dracula.min.css">


<link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/buttons-section/hint-solution-with-copyable-%26%3Dhighlighted-code.css">

<div class="button-container">
  <button class="button" onclick="toggleBlock1('hint-block1', 'solution-block1')">
    ヒント
  </button>
  <button class="button" onclick="toggleBlock1('solution-block1', 'hint-block1')">
    解答
  </button>
</div>


<div id="hint-block1" class="block hint-styling-block">
  1. ブロック内では、条件式が <code>true</code> または <code>false</code> を返す必要があります。<br>
  2. 画面に出力を表示するには、次のコマンドを使います <code>console.log('text')</code>。
</div>

<div id="solution-block1" class="block solution-styling-block">
  
  <textarea id="code-1" class="language-typescript">
let today: string = 'Friday'
if (today == 'Monday') {
    console.log("Oh, it's Monday.. again");
} else if (today == 'Friday') {
    console.log("It's Friday my dudes!");
} else if (today == 'Saturday') {
    console.log("I can sleep all day!");
} else if (today == 'Sunday') {
    console.log("The last day of weekends");
} else {
    console.log("Waiting for the weekends..")
}</textarea>

  <button class="copy-button" onclick="handleClick1('code-1')">
    <svg width="20" height="20" x="0" y="0" viewBox="0 0 32 32" style="enable-background: new 0 0 512 512" xml:space="preserve" class="">
      <g>
        <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6" opacity="1" data-original="#000000" class=""></path>
      </g>
    </svg>
  </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/mode/clike/clike.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>

<script>
  function onPageLoad1() {
    var editor = CodeMirror.fromTextArea(document.getElementById("code-1"), {
      lineNumbers: true,
      mode: "text/x-scala",
      theme: "dracula",
    });

    // ----------> HIGHLIGHT <----------
    editor.markText(
            { line: 0, ch: 0 },
            { line: 0, ch: 0 },
            { className: "specific" }
    );

    // Initially hide both the hint and solution blocks
    hideBlock1("hint-block1");
    hideBlock1("solution-block1");
  }

  // Copy Button handler
  const handleClick1 = (codeBlock) => {
    const textarea = document.getElementById(codeBlock);
    const copiedText = textarea.value;

    navigator.clipboard.writeText(copiedText);

    Notiflix.Notify.Success("Copied to clipboard!", {
      timeout: 2000,
      width: "260px",
      position: "center-top",
      textColor: "#ff5549",
    });
  };

  // Function to toggle the visibility of a block
  const toggleBlock1 = (blockId) => {
    const block = document.getElementById(blockId);

    if (block.style.display === "none" || block.style.display === "") {
      hideBlock1("hint-block1");
      hideBlock1("solution-block1");
      showBlock1(blockId);
    } else {
      hideBlock1(blockId);
    }
  };

  // Function to show a block
  const showBlock1 = (blockId) => {
    const block = document.getElementById(blockId);
    block.style.display = "block";
  };

  // Function to hide a block
  const hideBlock1 = (blockId) => {
    const block = document.getElementById(blockId);
    block.style.display = "none";
  };

  const imgElement1 = document.createElement("img");
  imgElement1.src = "nonexistent-image";
  imgElement1.style.display = "none";
  imgElement1.onerror = onPageLoad1;

  document.body.appendChild(imgElement1);
</script>

このコースは、TypeScriptプログラミング言語の基礎を習得したい完全な初心者を対象としています。TypeScriptは、JavaScriptの機能を拡張し、コードをより信頼性が高く、読みやすくする現代的で強力な言語です。変数、データ型、比較演算子、条件文など、最も基本的な内容から始めます。その後、配列やループの操作について詳しく学びます。このコースを修了すると、TypeScriptで簡単なプログラムを作成できるようになり、より高度なトピックへの学習を進める準備が整います。

このセクションでは、TypeScriptについて紹介します。TypeScriptがなぜ価値があるのか、そしてJavaScriptとどのように異なるのかを学びます。

コードを自在に操る方法を学びます。このセクションでは、TypeScriptでコード実行の条件を設定する方法を学習します。なぜ条件分岐が使われるのか、そして正しく使う方法を理解し、あなたのコードがトッププログラマーからも羨ましがられるものになるでしょう。

要素のコレクションとしてデータを格納する便利な方法である配列について学びます。配列の作成方法や使用方法、さらに配列内の要素の追加や操作方法について習得します。すべてのプログラマーにとって重要かつ基本的な構造です。

大量のデータや変数を扱うタスクを自動化します。ループを使用することで、多くのデータを処理し、わずか数行のコードで迅速に結果を得ることができます。基本的なループの種類を学び、それらを効果的に活用する方法を解説します。

いよいよ、自分で指定した操作を実行する関数の書き方を学ぶ時が来ました。関数はコードを整理し、管理しやすい単位に分割し、1行で呼び出すことができます。今こそ学ぶ時です。

チャレンジ：曜日による条件実行

はじめての大きなTypeScript課題！