Vue.js:componentでpropsを使って属性を受け取る

Vue.jsでは、componentを使用して独自タグを定義することができます。
これは部品化に役立ちます。

独自タグではslotタグにより値を受け取ることができますが、propsプロパティを用いて属性値を受け取ることもできます。
属性値はテンプレート構文で使用できるため、dataプロパティ等と組み合わせて柔軟なDOM操作が可能になるメリットがあります。
また、今回は紹介しませんが、propsプロパティでは必須チェックやデフォルト値設定やバリデーションも実装できるので、それらの機能を実装してより便利に使うこともできます。

以下、サンプルコードです。
propsプロパティを用いることで、テンプレート構文での使用が可能になっていること({{ }}で囲った箇所への埋め込みが可能になっていること)に注目してください。

【サンプルコード】

・sample1.html(propsプロパティを使わない例)

・sample2.html(propsプロパティを使う例)

【実行結果】

sample1.html、sample2.html共に、以下のように表示されます。


いかがでしたでしょうか。

componentについては前回の記事で触れましたが、実務でcomponentを使うのであればpropsもほぼセットで覚える必要があります。
前回の記事ではcomponentを使わない場合と使う場合、今回の記事ではpropsを使わない場合と使う場合をなるべく簡単な例で比較していますので、理解の助けになれば幸いです。

Vue.js:componentで独自タグを定義する

Vue.jsの重要な機能の一つとして、componentという機能が存在します。
これは部品化に役立ちます。

この機能を利用することで、独自にタグを定義できるようになり、冗長な記述を減らすことができます。
例えば、今回はサンプルコードとしてsample1.htmlとsample2.htmlを用意していますが、sample1.htmlでは同じようなdivタグの記述が続くのに対し、sample2.htmlはdivタグの記述を独自のmy-componentタグにまとめることで同じような記述が続くのを防ぐことができています。

【サンプルコード】

・sample1.html

・sample2.html

【実行結果】

実行結果はsample1.htmlとsample2.htmlで同じです。
以下のように2つの部品が出てきます。

部品をクリックするとポップアップが表示されます。


この記事では紹介しませんが、componentの記述を外部ファイルに切り出すことも可能です。
外部ファイルに切り出すことで、同じ部品(component)を複数ファイルで利用することができるようになります。

なお、現在はhtmlファイルをChromeで開いて実行していますが、外部ファイルのimportを行う場合はこの方法での実行は困難です。
(セキュリティ対策のため)
外部ファイルのimportの実行を試すには、Vue CLIでサーバを立てる等の対応が必要になります。


いかがでしたでしょうか。

componentの機能は冗長性を排除するために必要であり、実務での使用頻度も高いです。
Vue.jsを実務で使用するのであれば、早めに覚えておきたい機能の一つです。

Excel:ピボットテーブルの使い道と作り方(テストデータ付き)

ピボットテーブルとは、集計作業を行う機能のことです。
自力で集計用の表を作成して関数を書くことでも集計作業は可能ですが、ピボットテーブルを用いればマウス操作だけで簡単に集計作業を行うことができます。

今回の記事では、架空の体力測定結果を集計する例を挙げて、ピボットテーブルの使い方を説明します。
この例では、握力について、男女で差があるのか、測定月で差があるのかを、平均値を出すことで確認します。

なお、使用するデータは以下からダウンロードできます。手を動かしながら覚えたい方はダウンロードしてみてください。
https://cyzennt.co.jp/blog/wp-content/uploads/2021/10/f0baae9405ab2b4cf966538a631c041e.xlsx


【手順】

1.集計作業を行う表をドラッグで選択し、挿入>ピボットテーブルを選択する。

2.ドラッグした範囲が自動的に選択されているので、OKボタンを押下する。

3.ピボットテーブルのシートが生成されるので、列に測定月、行に性別、値に握力(kg)をドラッグして選択する。

4.「合計 / 握力(kg)」の右にある矢印を選択し、値フィールドの設定を選択する。

5.デフォルトでは合計が選択されているので、平均を選択し、OKボタンを押下する。

6.性別ごと、また測定月ごとで、握力(kg)の平均値が算出される。

これで、男女では大きな差があるが、測定月では大きな差がないことが一目でわかるようになりました。


いかがでしたでしょうか。

実務でも集計作業を行うことはあり、例えば性能試験の結果の分析で集計作業が必要になります。
そのような場合に、ピボットテーブルで作業を効率化することができるので、覚えておいて損はない機能だと思います。

ExcelでINSERT文を作成

Excelの機能を使うことで、簡単な手順で大量のSQLのINSERT文を作成することができます。
臨時の運用対応ではデータが公表されてから30分以内にDBに反映させなければならない等、限られた時間でのデータ補正が必要になるため、プログラムを事前に用意できない場合はExcelでの対応が有効になります。
運用対応だけでなく、開発時のテストデータ作成も効率的に行うことができます。

以下で、例を挙げて説明していきます。

【INSERT対象のテーブル定義】

【INSERT文の作成】

①下記のように入力する。

G2セルについては、下記の式を入力する。

=A$2&”000000″

この式によりA2セルと文字列”000000″を結合する。

参照時には$マークをつけて絶対参照とする。

(後の手順でコピーする時に参照先がずれないようにするため)

②B2~H2セルを3~6行目にコピーする。

③C3セルに2を入力してから、C2~C3セルを選択し、4~6行目までオートフィルする。

④B2~H6セルをコピーし、サクラエディタ等のテキストエディタに張り付ける。

⑤セルを区切るtabを削除する。

サクラエディタの場合は、”\t”を””に置換することで削除できる。

【完成したINSERT文】


なお、UPDATE文やDELETE文等も、同じ要領で作成することができます。
また、今回は紹介していませんが、区切り位置、重複の排除、フィルタ等も使用頻度が高い機能であり、これらの機能を使えばフォーマット変換やデータ抽出等も可能になります。


いかがでしたでしょうか。

今回紹介したようなテクニックは技術的には難しいことはしていませんが、実務で良く使う便利なテクニックです。
このようなテクニックはまた紹介していきたいと思います!