vue.js の loop
HTML
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
<p v-for="color in colors">{{ color }}</p>
</div>
JS
const app = Vue.createApp({
data: () => ({
colors: ['black', 'white', 'orange']
})
})
app.mount('#app')
結果は以下の通り、loop して値を取得できる
表示非表示を切り替える
HTML
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
<p v-if="toggle">hello</p>
</div>
JS
const app = Vue.createApp({
data: () => ({
toggle: true
})
})
app.mount('#app')
HTML
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
<input type="text" v-bind:value="message">
</div>
JS
const app = Vue.createApp({
data: () => ({
message: 'hello'
})
})
app.mount('#app')
vue.js のデータバインディングの仕組みを紹介。
HTML
<script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
<p>
<input type="text" v-model="message">
</p>
<p>
{{ message }}
</p>
</div>
js
console.log(Vue.version)
const app = Vue.createApp({
data: () => ({
message: "hello"
})
})
app.mount('#app')
テキストボックスを変更すると、js の message が変更され、html に反映される
最新 version ではなく、指定の version を読み込む際の設定
https://v3.ja.vuejs.org/guide/installation.html#vue-devtools
では、
<script src="https://unpkg.com/vue@next"></script>
を使うように記載されているが、これだと常に最新になる。
@next の部分を version に変更することで指定した version を読み込ませる事ができる
<script src="https://unpkg.com/vue@3.1.5"></script>
codepen で確認すると、3.1.5 が読み込まれたことを確認。
pandas を使う事で容易に結合できる。
例えば以下のような csv ファイルがあったとする
a.csv
NO,CODE
1,987
2,111
3,222
b.csv
ID1,ID2,CODE
1,111111111111111111,111111111111111111
2,222222222222222222,222222222222222222
pandas を使うことで容易に結合する事ができる
import pandas as pd
# まず２つのCSVを読み込む
a = pd.read_csv('./a.csv', encoding='utf-8')
b = pd.read_csv('./b.csv', encoding='utf-8')
# b の ID1 を NO に置換する
b_ = b.rename(columns={'ID1': 'NO'})
# a とb ２つのCSVを結合する。結合する際のキーは NO とする
df_merged = pd.merge(a, b_, on='NO')
# 確認
print(df_merged)
# CSV ファイルとして出力する
df_merged.to_csv("merged.csv", index=False)
結果
% python3 main.py
NO CODE_x ID2 CODE_y
0 1 987 111111111111111111 111111111111111111
1 2 111 222222222222222222 222222222222222222
今回、結合した csv ファイルそれぞれに CODE というカラムがそれぞれに存在している。
pd.merge の第一引数になったファイルは _x という suffix がつき、
第二引数になったファイルには _y という suffix が付く。
python で開発をする場合、requirements.txt に install したいパッケージを書く事が多いが、その際 install するパッケージの version を知りたい場合がある。
(さらに…)mysql コマンドで接続しようとした際このエラーに陥った。
原因はおそらく TLS の問題。
mysql command の場合 --ssl-mode=DISABLED オプションをつけることで回避可能
mysql -h10.10.0.1 -uuser -p --ssl-mode=DISABLED
python 経由で s3 にファイルをアップロードしたくなる場合がある。
本記事はその際のメモ。
import boto3
# 書き込み先バケット
BUCKET = 'output-bucket'
INPUT= 'hoge.csv'
OUTPUT = 'hoge.csv'
# OUTPUT = 'DIR/DIR/hoge.csv'
s3 = boto3.resource('s3')
s3.Bucket(BUCKET).upload_file(Filename=INPUT, Key=OUTPUT)
ポイントとして、書き込み先の s3 のディレクトリに対し書き込むとき、存在しないディレクトリを対象にすると、存在しないディレクトリは一緒に作られる。これは、そもそも s3 にディレクトリという考えがないためである。
それについては以下の記事を参照
以下のように Makefile のあるディレクトリに ファイルもしくはディレクトリが存在する場合がある。
% tree
.
├── Makefile
└── test
このような環境の場合、同名のコマンドが Makefile に記載がある場合は `test’ is up to date. というエラーが表示され Make ファイルが実行されない。
test:
echo hogehoge
これを対処するには、.PHONY を宣言することにより回避可能となる
.PHONY: test
test:
echo hogehoge
以上。