プロジェクト：ソートアルゴリズムのビジュアライゼーション

This was created during my time as a Code Chrysalis Student

これがあなたの最初のソロプロジェクトになります！このプロジェクトでは、ソートアルゴリズムを実装し、ソートアルゴリズムに関するフロントエンドのビジュアライゼーションを作成して、クラス内でプレゼンテーションを行います。

このソロプロジェクトは3つのパートに分かれています：

1. ソートアルゴリズム
2. ビジュアライゼーション
3. プレゼンテーション

達成目標

• DOM を操作するために、標準の Web API（document にあるもの）を使用する。
  • もちろん、サードパーティのパッケージを使用しても大丈夫です。
• ソートアルゴリズムについて、基本的な単体テストを作成する。
• ソートアルゴリズムの仕組み、実装、およびビジュアライゼーションを説明し、洗練されたインタラクティブなプレゼンテーションを（クラスメートに対して）行う。
• なじみのないテクノロジーを含むリポジトリを見つける。
• ビジュアライゼーションを動作させる。

開発環境

はじめに

このリポジトリはあなた自身のものです！始める前に、package.json と app.js からファイルの確認を行い、各ファイルのつながりをチェックしてください。

必要なもの

• node
• npm
• yarn

依存パッケージのインストールとセットアップ

依存パッケージをインストールするには：

$ yarn

テストを実行するには：

$ yarn test

とても基本的な index.html ファイルを提供するシンプルな Express サーバー（app.js にコードが記述されています）があります。 webpack を使用して、src/ フォルダ内のすべてのコードを1つの大きなファイルにコンパイルします。

index.html を調べて、すべてのコードをコンパイルした、1つの .js ファイルを確認してください。

サーバーを起動するには：

$ yarn serve

コンパイルのプロセスを開始するには：

$ yarn dev

yarn serve と yarn dev を別々のコマンドラインウィンドウ/タブで実行する必要があります。iTerm または Terminal に 3 つのタブを用意するか、VSCode で追加のターミナルを作成することをお勧めします。

変更を行った後は、必ずブラウザウィンドウを更新してください。

プロジェクトの要件

ソートアルゴリズム

ソートアルゴリズムを調査して、選びましょう。

• ソートアルゴリズムを調査しましょう。
• test/_sort.js にソートアルゴリズムに対する適切な単体テストを記述しましょう。
• テストをパスし、src/Sort.js にソートアルゴリズムを実装しましょう。

リソース

• ソートアルゴリズム - Toptal
• ソートアルゴリズム - Brilliant

ビジュアライゼーション

• あなたの選択したソートアルゴリズムをビジュアライズ化しましょう!

いくつかのヒント:

• コードが行うさまざまなアクション（たとえば、特定の要素の作成、非表示、値の変更など）について考えましょう。これらのアクションは、おそらく、さまざまな関数を書く上で、よいスタート地点となります。
• クラスはこの場合、どのような役割を果たすことができますか？
• シンプルに考えましょう。この課題に取り組める時間は、たった 2 日間しかありません。最低限の内容を実装することに集中し、改善してください。アジャイルを意識しましょう。

プレゼンテーション

ビジュアライゼーションのプレゼンテーションを作成します。

• Google ドライブにスライドを作成します。

スライドは以下の内容をカバーする必要があります。

• ソートアルゴリズムの紹介

• 実装方法

• 時間計算量について

• ビジュアライゼーションのデモ

• 課題

• あなたが学んだこと

• （オプション）アルゴリズムの長所と短所

• プレゼンテーションが規定の時間を超えないようにしてください（当番のインストラクターに確認してください）。