主なソートアルゴリズムにかかる時間を計算するプログラムをJavaScriptで作成しました。

今回は時間の結果や配列の状態についてリアクティブ（反応的）な表示をするために、簡単な vue.js を用いて作成しました。

作成したプログラム : https://masa-dev.github.io/sort-time-js/

ソースコード : https://github.com/masa-dev/sort-time-js

使ったもの

• vue.js
• bootstrap

vue.js について

vue.js の基本的な使い方は、vue.jsの公式サイトのガイドに日本語で書いてあるのでそのサイトを見てもらうとわかりやすいと思います。

基本的な書き方は、以下の通りになっています。

let app = new Vue({
    el: '#app',     //id と関連づけ
    data: {
        message: 'Hello Vue!'   //id 内の {{ message }}に表示
    }
})

この vue.js を用いて以下のような簡単にリアクティブな表示ができます。

bootstrap について

bootstrapについては知っている人は多いとは思いますが、知らない人に対して簡単に説明すると、きれいに整ったテンプレートのデザインなどを簡単に導入できるフレームワークのことです。

bootstrap は個人的にスタイルを整えるのが面倒な時は本当に便利です。

今回は以上のフレームワークやライブラリを用いて作成してみました。