--- title: vue.jsでcsvファイルのデータ抽出表示とオセロ tags: HTML5 JavaScript Vue.js author: tantai slide: false --- エクセルなどで使われるCSVファイルをブラウザで表示して見るツール デモ:http://pie.karou.jp/zf.html ![index.png](https://qiita-image-store.s3.amazonaws.com/0/54926/b6c2d791-581c-37c3-a931-f7bd54f52b1e.png) サンプルとして郵便番号と住所の書いてあるcsvファイルが ちょうどよいので”郵便番号 csv”で検索してダウンロードする 全国のデータ KEN_ALL_ROME.CSV 10.5MB "0640941","北海道","札幌市 中央区","旭ケ丘","HOKKAIDO","SAPPORO SHI CHUO KU","ASAHIGAOKA" 1行がこんな感じで 12万行 *** 1. csvファイルをinput fileで選択する 2. csvファイルはshiftJISが多くて文字化けするのでライブラリencoding.jsを使って対策する 3. 12万行も表示できないので30行だけ表示する(ファイルを開くのに5秒くらい) 4. and検索をするために ``` Array.filter(function(v){ return v.join("").indexOf("東京")>-1); }).filter(function(v){ return v.join("").indexOf("新宿")>-1); }); ``` これでデータ抽出すると1秒以下で697件見つけて表示される *** ``` csvファイル検索ツール

csvファイル 検索ツール(簡易オートフィルタ)

列幅調整はセル内でBackspace,←,→キー


検索文字:and 行: ページ: /{{ (pageLength==100)?"over": pageLength}} 一致数:{{ matchNum }}
``` *** *** vue.jsで書いたオセロ https://jsfiddle.net/af9b4bq3/ ```

オセロ

白:{{ w }}, 黒:{{ b }}

{{ ["白","黒"][wb] }}の手番

``` ``` p { text-align: center; } div { min-width: 35px; min-height: 35px; } .container { display: flex; justify-content: center; } .waku { border: 1px solid black; background-color: green; } .white { border-radius: 35px; background-color: white; } .black { border-radius: 35px; background-color: black; } ``` ``` var vm = new Vue({ el: '#app', data: { wb: 1, xy: [ [3, 3, 3, 3, 3, 3, 3, 3, 3, 3], [3, 2, 2, 2, 2, 2, 2, 2, 2, 3], [3, 2, 2, 2, 2, 2, 2, 2, 2, 3], [3, 2, 2, 2, 2, 2, 2, 2, 2, 3], [3, 2, 2, 2, 0, 1, 2, 2, 2, 3], [3, 2, 2, 2, 1, 0, 2, 2, 2, 3], [3, 2, 2, 2, 2, 2, 2, 2, 2, 3], [3, 2, 2, 2, 2, 2, 2, 2, 2, 3], [3, 2, 2, 2, 2, 2, 2, 2, 2, 3], [3, 3, 3, 3, 3, 3, 3, 3, 3, 3], ], }, computed: { w: function() { return (this.xy.join('').match(/0/g) || []).length; }, b: function() { return (this.xy.join('').match(/1/g) || []).length; }, }, methods: { oku: function(x, y) { if (this.xy[x][y] != 2) return; var flag = false; for (var dx = -1; dx <= 1; dx++) { for (var dy = -1; dy <= 1; dy++) { if (dx == 0 && dy == 0) continue; var k = 1; while (this.xy[x + k * dx][y + k * dy] <= 1) { if (this.xy[x + k * dx][y + k * dy] == this.wb) { k = 1; while (this.xy[x + k * dx][y + k * dy] == 1 - this.wb) { flag = true; this.xy[x + k * dx][y + k * dy] = this.wb; k++; } break; } k++; } } } if (flag == false) return; this.xy[x][y] = this.wb; this.wb = 1 - this.wb; this.xy.push(); }, pass: function() { this.wb = 1 - this.wb; }, }, }); ```