クライアント側(ブラウザ上)でデータ分析が可能なJavaScriptライブラリ
「danfojs@1.1.2」の試用を行うために作成したWebアプリです。
https://www.npmjs.com/package/danfojs/v/1.1.2
CSVかTSVのファイルを読み込み、簡易的なデータ分析を行うことができます。
・ブラウザの開発者ツールのコンソールから、色々操作することができます。
・ファイル読み込み時に、カラム一覧とユニークな要素の個数を表示します。
アプリの画面上に説明が埋め込んであるため、実際に使用しつつ読んでみてください。
★このアプリを今すぐ使用する方法
| 技術項目 | 使用しているもの |
|---|---|
| 言語 | html・JavaScript・css |
| 開発とビルド | webpack/webpack-dev-server(MITライセンス) |
| JavaScriptの機能 | 使用しているライブラリ |
|---|---|
| データ分析全般 | Danfo.js(MITライセンス) |
| モーダルウィンドウ | Micromodal.js(MITライセンス) |
npmとWebpackを使ってビルドしたものがGitHub Pagesにあります！
https://tweeteafox223.github.io/mini-csv-analyzer-on-client/
このリポジトリの./distをダウンロードし、
ブラウザでindex.htmlを開くことで使用可能です。
ローカルかつオフライン環境でも動作可能です。
下記のリンクに入り、右上の「・・・」→「Download」を押す、
又は、中央付近にある「↓」のボタンを押すとダウンロードできます。
https://github.com/TweeTeaFOX223/mini-csv-analyzer-on-client/tree/main/dist
「Webpack」でビルドする仕様です。
node.js v22.2.0とnpm v10.7.0で動作確認しました。
このリポジトリをCloneし、ターミナルを開きます。
npmのコマンドを実行し必要パッケージをローカルにインストールします。
npm install
dev-serverを起動後、ローカルホストにアクセス。
main.mjsを編集してアプリを書き換える事ができます。
npm run dev-server
書き換えが終了したら、本番用ビルドを実行します。
distディレクトリにあるファイルをアップロードするなどして使用できます。
ローカル環境のブラウザからfileプロトコルでアクセスしても使用できます。
npm run build
作成時での最新版の「danfojs@1.1.2」が依存するパッケージの
「xlsx(SheetJS)」が、ReDoSの脆弱性がある古いverなので手動解決が必要でした。
npmのDanfo.jsの「danfojs@1.1.2(最新版)」に、
脆弱性のある「xlsx@0.17.2」が入ってたので対処法メモ
https://zenn.dev/tweeteafox300/scraps/af81fd6891e4c5
作成時での最新版の「danfojs@1.1.2」には不具合があり、
Viteでの使用ができなかったため、Webpackを使用しました。
npmのDanfo.jsの「danfojs@1.1.2(最新版)」に、
Viteで使用できない不具合あったので対処法メモ(webpackで使うのが楽)
https://zenn.dev/tweeteafox300/scraps/bf1b9ae41ad20d