Vue.js 入門

jsというとフレームワークが色々あるので、今回はVue.jsを少しさわってみた。

適当に色々書いてみたもの。

json展開、axiosでpost

フロント開発環境色々

HTML/CSS/JSなどフロントは数年前にちょっと勉強しただけでだいぶ忘れてしまったので復習をする。
まずは環境構築から。

エディタ

使うエディタはVSCodeとした。補完が効くので助かる。
Vim拡張機能を入れてしばらく使ったがやめた。そのままでも不便がないぐらいのショーットカットがあるので、設定は少しだけ。

VSCode設定

ショートカット追加
{“key”: “ctrl+i”,”command”: “editor.action.jumpToBracket”}

ユーザー設定
minimapは1.10から

VSCodeショートカット

Ctrl + Shift + L
選択中の箇所を同時編集(マルチカーソル)

Ctrl + i
対応括弧に移動。

Ctrl + /
コメントトグル

Ctrl + P
ファイル検索して開く

Alt + Up/Down
行を上下移動

Alt + Shift + Up/Down
行を上下コピー

Alt + Shift + ドラッグ
矩形選択

Alt + クリック
マルチカーソル

Ctrl + Shift + k
行の削除

Ctrl + Shift + \
対応する括弧

Ctrl + ]
行にインデントを追加

Ctrl + [
行のインデントを削除

sass(scss)

$で変数。#{}で変数展開。変数には型もある。

組み込みの関数もあり、自作もできる。
@function name($arg) {
@return returnValue
}

ループ処理
@for $i from 0 to 10 {
}

条件分岐
@if $arg == 0 {
}

などなど便利な機能がある。以下適当に記述してみたもの。

VSCodeタスクでsass(scss)コンパイル

Rubyは入っているので、
gem install sass
とする。

バージョン確認。
sass -v

タスク作成は、
Ctrl + Shift + P

でパレットを開き、
Configure Task Runner
と入力し、othersを選ぶ。

そうすると、task.jsonができるので、
“version”: “0.1.0”,
“command”: “sass”,
“isShellCommand”: true,
“args”: [“test.scss”,”test.css”],
“showOutput”: “always”
のように記述する。

タスクランナーの実行は、
Ctrl + Shift + B
と入力する。

tasks.jsonはプロジェクトフォルダの中にある.vscodeの中にできる。
プロジェクトとは、サイドバーで開いているフォルダのこと。

タスクランナーで複数コマンドを渡したい場合

上記はscssコマンドだけだが、他にも色々したい場合。
ここではpowershell。(UTF-8で日本語入ると動かないので注意)

自動でサーバーに転送したい、chromeで開きたい等。
https://github.com/PowerShell/Win32-OpenSSH/releases
からWin版のSSHを落とし、フォルダの中から
ssh.exe, scp.exe
をコピーしておく。
鍵ファイルもコピーして、ps1と同じ場所に置く。

以下のようにすると、sassをコンパイルして、htmlとともにサーバーに転送し、そのURLを開く。
(Chromeのタブは増えてしまうが)

c.ps1

tasks.json

Emmet

VSCodeだと標準で入っている。
Tabキーで展開できる。

マークダウン

マークダウンを使う場合、
Ctrl+Shift+V
でプレビューできる。

Debugger for Chorme

拡張機能でChromeと検索すると出て来るのでインスト。
サイトバーのデバッグを開き、再生すると、launch.jsonができるので接続設定を記述する。

Chrome拡張機能 manifest.jsonメモ

manifest_version, name, versionは必須。

・manifest_version
2, 3を指定。

・name
任意の名前。

・version
任意のバージョン。

***

・content_scripts / background

・content_scripts

特定のページで動作。DOMを操作できる。

content_scripts > matches
スクリプトを動作させたいURL。

content_scripts  > js
動作させるスクリプト。

・background

常にバックグラウンドで動いている。
v3からbackgroundはservice_workerを指定する。

background > scripts
バックグラウンドで動作するスクリプト。

background > persistent
persistent:falseにするとEvent-Pageとなり、必要になったら動く。
バックグラウンドは非推奨。

***

・browser_action  / page_action

browser_action:全てのページでアイコン表示。
page_action:特定のページでアイコン表示。
v3からactionに統合される。

***

・id
IDを指定。

・description
説明。

・icons
アイコンを指定。

・short_name
短縮名。

・default_locale
デフォルト言語を指定。

***

・permissions
ChromeAPIを使う場合指定。

・permissions > contextMenus
右クリックメニューの拡張。

***

・commands
ショートカット定義。

・options_page
オプションページを使う場合指定。

・minimum_chrome_version
Chromeの最低バージョンを指定。

・homepage_url
ホームページを指定。

・author
作成者。

・override pages
新規タブ、ブックマークマネージャ、履歴の差し替え。

・omnibox
検索ボックスの拡張。

Chrome拡張機能 Google検索にfavicon

最新版あり。

Chrome拡張機能 Google検索にfavicon2

即席で作ったけどかなり活躍していて、検索結果にfaviconがないと気持ち悪くなってしまった。

script.js

manifest.json

検索結果の構造が変わった模様。

script.js

jquery-3.1.1.min.js、manifest.json、script.jsの3つのまとめてフォルダに入れ、Chrome拡張へドラッグする。

PHP Javascript 工程管理

以前作っていた工程管理。お蔵入り版。

PHP Javascript 在庫管理

以前作っていた在庫管理。お蔵入り版。
1つのファイルにHTML,CSS,JS,PHPを全て書き込んでいた。

C# VBA 在庫管理

以前作ったプログラムお蔵入り版

Form1.cs

Util.cs

アップロードVBA

AccessVBA テーブル作成、他

VBA 農産物売上集計

mdbに登録する予定で作成していたが、途中でエクセルのみにしようと思い中断。

Excel 標準偏差、相関係数、線形回帰

標準偏差、相関係数、線形回帰の求め方。
手動計算とエクセル関数を使った場合。

分析基礎

・基本

結論は金額換算して分かりやすく。継続観察していくならKPIを設定する。

・サンプルの中で変数に属性を追加。

例)
来店率が下がっている顧客、上がっている顧客、特定の時期に上がる顧客等。
購入金額が高い顧客(Aランク)、低い顧客(Bランク)など。

これにより、顧客のニーズの仮説や、分析から排除の必要性等を検討する。

・次に他のサンプルと比較。

サンプル1(会員等)での特徴(標準偏差や中央値等)がサンプル2(非会員等)と比較してどう違うか。そうすることで、サンプル1はサンプル2と比べてはどのような特徴があるのか分かる。

・複数のサンプルでの比較

会員と商品の関係での特徴は、非会員と商品の関係と比較してどう違うか。
会員は特定商品のリピート率が高い等。

SQLで相関係数(傾き)

標準偏差や分散などは標準の関数であるが、相関係数はない。
集計用に傾きだけ欲しかったので、とりあえずSQLで求めた

テーブル名:t
結果:17.2482570475901

傾きで利用したストアド

SQl Server Management Studioでの結果をそのままエクセルに貼り付けたかったので、
以下のような書き方で解決した。