旅好きの気ままなお話

旅のこと映画、統計、会計、プログラミングなど、気の向くままに語ります

vscodeでgitlensが急に使えなくなったときの対応

他のプラグインでも同様の方法で解決できる可能性があります。

いったんvscode上でアンインストールをして、 下記の操作をして対象ファイルを削除するだけです。

環境はmacで行っています。(特に環境が問題になるような問題でもなさそう)

$ cd .vscode/extensions/
$ ls | grep gitlens
eamodio.gitlens-8.5.6
$ rm -R eamodio.gitlens-8.5.6

bottleでファイルダウンロード機能を追加する

bottleでファイルダウンロード機能を追加するのは結構簡単です

とりあえず下記のような感じでダウンロード出来るようになります・

ファイル構成

  app
  ├── controller
  │     └── static.py
  │
  └── static
         ├── csv
         │   └── sample.csv
         └── img
             └── samle.jpg

htmlタグ

<a href="/download/csv/sample.csv" download="sample.csv">sample.imgをダウンロード</a>

controller/static.py

from bottle import route, static_file

@route('/download/:path#(csv|img)\/.+#')
def download_static(path):
    return static_file(path, root='app/static', download=True)

rubyでヒープソートを書いてみました

ヒープソートの説明はwikiを見てください。 ヒープソート - Wikipedia

計算量は必ず、O(n log n)で並び替えるデータの質に関係なく、高速にソート出来る点です。

ヒープソートのクラス
class HeapSort
  class << self
    def call(list)
      build_heap(list)
      (list.size - 1).downto(1) do |i|
        list[0], list[i] = list[i], list[0]
        heapify(list, 0, i)
      end
    end

    private
    def build_heap(list)
      n = list.size / 2
      n.downto(0) do |i|
        heapify(list, i, list.size)
      end
    end

    def heapify(list, idx, max)
      largest = idx
      left = idx * 2 + 1
      right = idx * 2 + 2

      largest = left if (left < max) && (list[left] > list[idx])
      largest = right if (right < max) && (list[right] > list[largest])
      if largest != idx
        list[idx], list[largest] = list[largest], list[idx]
        heapify(list, largest, max)
      end
    end
  end
end
使用してみる
pry(main)> list = [34, 6, 99, 43, 67, 37, 87, 5, 25, 85, 19, 63, 9, 35]
=> [34, 6, 99, 43, 67, 37, 87, 5, 25, 85, 19, 63, 9, 35]
pry(main)> HeapSort.call(list)
=> 13
pry(main)> list
=> [5, 6, 9, 19, 25, 34, 35, 37, 43, 63, 67, 85, 87, 99]

スクレイピングで文字化けを防ぐ方法

下記が使用するライブラリ(chardet)です。

pypi.org

chardetは文字コードを検出するライブラリで検出して取得したデータにdecodeをすると文字化けを解消できます。

sampleは日経のページです。

import urllib3
import chardet

url = "http://www.nikkei.com/"
http = urllib3.PoolManager()
r = http.request('GET', 'http://www.nikkei.com/')
r.data
guess = chardet.detect(r.data)

unicode_data = r.data.decode(guess['encoding'])

node.jsのバージョン管理をnvmでしてみる

環境はmacで行っています

node.jsのインストール

brew install node

nvmのインストール

nvmはrbenvのようなnode.jsのバージョン管理ツールです。

  • nvmをインストールする
    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

nvm公式

  • 設定を読み込む
    echo "source ~/.nvm/nvm.sh" >> ~/.bash_profile && source ~/.bash_profile
# nvmのバージョン確認
nvm --version

# install可能なnode.js確認
nvm ls-remote

# v10.5.0のインストール
nvm install v10.5.0

# インストールされたバージョンか確認
node -v

# npmのバージョンを確認
npm -v

バージョンを切り替える

# テストのため他のバージョンも読み込んでみる
$ nvm install v10.4.1

# バージョンを確かめる
$ node -v
v10.4.1

# バージョンをv10.5.0に変更する
$ nvm use v10.5.0

railsにvue-test-utilsを入れてみる

前提

  • webpackは使わない。
  • node.jsを入れている。
  • npmを使用出来る

※ webpackを使わない理由は対象をrails5だけに絞っていないからです。

必要なものをinstall

npm install --save-dev jest @vue/test-utils vue-jest babel-jest jest-serializer-vue vue-cli babel-preset-es2015

各設定ファイルを編集する

./package.json

{
  "name": "new_minkabu_pc",
  "version": "1.0.0",
  "description": "[![Build Status](https://travis-ci.com/minkabu/minkabu_pc.svg?token=A1r56DPr9tpa3qzgAWM1&branch=master)](https://travis-ci.com/minkabu/minkabu_pc) [![Maintainability](https://api.codeclimate.com/v1/badges/643434d3559be5ad03e3/maintainability)](https://codeclimate.com/repos/599d159c257148029c000746/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/643434d3559be5ad03e3/test_coverage)](https://codeclimate.com/repos/599d159c257148029c000746/test_coverage)",
  "main": "index.js",
  "directories": {
    "doc": "doc",
    "lib": "lib",
    "test": "test"
  },
  "scripts": {
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "test": "npm run unit"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/minkabu/minkabu_pc.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/minkabu/minkabu_pc/issues"
  },
  "homepage": "https://github.com/minkabu/minkabu_pc#readme",
  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.19",
    "babel-jest": "^23.0.1",
    "babel-preset-es2015": "^6.24.1",
    "jest": "^23.1.0",
    "jest-serializer-vue": "^2.0.2",
    "vue": "^2.5.16",
    "vue-cli": "^2.9.6",
    "vue-jest": "^2.6.0"
  }
}

./test/unit/jest.conf.js

const path = require('path');

module.exports = {
  rootDir: path.resolve(__dirname, '../../'),
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
  },
  testPathIgnorePatterns: [
    '<rootDir>/test/e2e'
  ],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
  setupFiles: ['<rootDir>/test/unit/setup'],
  mapCoverage: true,
  coverageDirectory: '<rootDir>/test/unit/coverage',
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ]
};

./.babelrc

{
  "presets": ["es2015"]
}

sampleのテストファイルを用意する

./app/assets/javascripts/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

./app/assets/javascripts/lib.js

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

./app/assets/javascripts/tests/App.test.js

import * as lib from '../lib';
describe('Counter', () => {

  it('run test !!!!!!!!!', () => {
    expect(1).toBe(1)
  })

  it('hoge_test', () =>  {
    expect(lib.square(11)).toBe(121)
  })
})

流してみる

npm test もしくは jest で流れます。

npm testで流れる理由はpackage.jsonに記載しているからです。

vue.jsにeslintを設定した話(vscode使っています)

eslintとvue.js用のeslintプラグインをinstallする

今回はグローバルにインストールします。
npm i -g eslint eslint-plugin-vue
※上記はnpmですが、yarnでも大丈夫です。

vscodeに読み込ませるnode_moduleを設定

vscodeの"基本設定=>設定"のUser Settingsのjsonファイルを開いてください。 次に、自分の好きなパスのnode_moduleを設定してください。(今回はglobalのを読み込ませています。)

"eslint.nodePath": "/Users/[ユーザー名]/node_modules",
"eslint.enable": true,

.eslintrc.jsonを設置する

.eslintrcをプロジェクト直下に配置します。

.
├── .git
├── .gitignore
├── .eslintrc.json # <=ここに入れる 
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── app
├── bin
├── config
├── config.ru
├── db
├── lib
├── log
├── node_modules
├── package.json
├── public
├── storage
├── test
├── tmp
├── vendor
└── yarn.lock

内容はとりあえず下記で大丈夫です。(カスタマイズは各々が行ってください)
.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ]
}

上記で設定は完了です。

補足

下記プラグインについての補足です。
https://github.com/vuejs/eslint-plugin-vue

それぞれ、vue style guidの規約でどこまで反映するかを表しています。
"plugin:vue/recommended"を設定しておけばとりあえず、全て反映してくれるので、特にこだわりがなければ"plugin:vue/recommended"でよいかと思います。

  • plugin:vue/base - Settings and rules to enable correct ESLint parsing
  • plugin:vue/essential - Above, plus rules to prevent errors or unintended behavior
  • plugin:vue/strongly-recommended - Above, plus rules to considerably improve code readability and/or dev experience
  • plugin:vue/recommended - Above, plus rules to enforce subjective community defaults to ensure consistency