Vue.js でカスタムフォーム部品をつくる

Vue.js で <input> などのフォーム部品を v-model を用いて 2-way data binding するのは簡単だし、コンポーネントを作って v-model で 2-way data binding するのも比較的簡単ですが、<select> やチェックボックス、ラジオボタンのカスタムコンポーネントを作って v-model するのは苦労します。

Vue.js の公式ドキュメントでも <input type="text"> の場合しか説明しておらず、それを素直に <select> 等に転用すると、画面上の表示に反映されないとか、更新が保存されないなど、期待した通りに動きません。原理を理解しようとしても、公式ドキュメントにわかりやすい記述はありません。

僕が見た中で、一番良い解説は、こちらでした。 https://www.smashingmagazine.com/2017/08/creating-custom-inputs-vue-js/

以下では、公式ドキュメントとこの記事を参照しながら、Vue.js でカスタムフォーム部品を作る場合の動作原理とサンプルコードを解説します。

ベトナム語と中国語と日本語:漢字文化圏の相似

中国を中心として、日本、朝鮮、ベトナムは漢字文化圏に属します。それぞれ独自の言語を基盤としながら、外交や貿易に漢文を使うことで文字、文化を取り入れたため、言語に占める漢字由来の単語が多いのが特徴です。

漢字文化圏

辞書を調べると、日本語も韓国語もベトナム語も、語彙の60%は漢語です。これらの国々では、つい100年ほど前まで、みな漢字を利用していました。しかし、識字率向上やナショナリズムによって漢字が廃止され、中国と台湾を除けば、漢字を使っている国は日本だけになりました。東南アジアの国々は、ベトナムを除くとインド文明の影響を強く受けています。

量子コンピューターのプログラミング

2016年に IBM が IBM Q Experience として 5量子ビットの量子コンピュータをクラウド上に無料で開放して数年、Microsoft の Azure Quantum と Amazon の Amazon Bracket が、限定公開ながら相次いで発表されました。量子コンピュータが誰でも使える環境が整いつつあります。

動作原理が現行コンピュータとは根本から異なる上に、現時点ではアセンブラレベルのプログラミング言語しか用意されておらず、しかも実用的なアプリケーションへの適用がまだできないと、3重苦のような環境ですが、20年後は日常的に使われているのではないかと夢想します。

といっても、今の機械学習がアルゴリズムの詳細を理解しなくても使えるように、量子プログラミングもライブラリを呼ぶだけになるのだと思います。論理回路を知らなくてもウェブサイトは作れるし、イーサネットケーブルを流れる信号について知らなくても HTTP で通信できます。

知らなくても使える。でも知らないで使うのは嫌なので、20年後を目指して、量子プログラミングの勉強をすることにしました。

量子コンピュータのプログラム

アセンブラまたは論理回路で作る感覚です。IBM Q Experience では、以下のような図でプログラムを表現します。

Python や JavaScript のライブラリとして実装されているものもありますし、Microsoft が専用に開発した Q# 言語というものもあります。一見高級言語が使えるようでいて、実際はアセンブラのように量子ビット(Qubit、キュービット)の操作をします。論理回路が AND、OR、NOT の基本ゲートの組み合わせで何でも作れるように、量子コンピュータのプログラムもゲートの組み合わせで作ります。

いまご飯を食べるスキルと、10年後も生きるためのスキル

2018年の初頭、語学と数学の能力を上げようという目標を立てた。60歳で引退すると仮定した場合、僕の社会人人生の、ちょうど真ん中だったこともあって、人生に大きな方針を立てたかったのだ。年末になって振り返ると、自分が希望するよりは能力が上がらなかったなと、残念に思う。

それでも最近、英語面接にも少しは慣れてきたし、ほんの少しだけ、中国語で聞こえる音が増えてきたし、ベトナム語教室では発音がいいと褒められるので、進歩はしているようだ。ベトナム語の発音がいいといっても、あくまでも他の日本人と比べて、だが。

数学は、高校数学の微分積分を半分くらいしか復習できなかったものの、log x を微分すると 1/x になる、という程度は思い出せた。ちなみに、いまお世話になっている数学の教科書は、これだ。

初めから学べると評判の大学基礎数学微分積分キャンパス・ゼミ https://www.amazon.co.jp/dp/4866150319/

書名も表紙も怪しいが、中身はいい。と思う。

陳腐化しないスキル

なぜ語学と数学なのか。それは、どちらも変化が少ないし、10年、20年という時間が経っても価値が低減しないからだ。物覚えが悪くても、ウサギとカメの物語のカメのごとく、一歩一歩前に進めばいい。数年後に振り返れば、もといた場所から、はるか高いところに登れているはずだ。

語学と数学を選んだのは単なる僕の趣味だが、1、2年の短期間で流行が移り変わらず、5年、10年という時間の流れの中で価値が減衰しにくく、積み上げが鍵となるものであればなんでもいい。

とはいえ、語学と数学ではメシが食えない。これらの分野で充分な生活費を稼ぐのは難しい。だから目の前の仕事をこなす即物的な能力も必要だ。どの分野、どの職種で働くにせよ、いますぐ役に立つスキルと、10年後、20年後にも役に立つスキルの両方をバランス良く積み上げていく必要がある。

即物スキルから長期スキルへの転化

Webエンジニアとして Rails でコードを書いている場合、モデルやビューのコードをきれいに書く能力は、いま報酬をもらって、生活をしていくには欠かせない。でもそれに充分に習熟したからといって、10年後も第一線のエンジニアとして活躍できる保証はない。10年後は Rails が廃れて仕事がないかもしれない。

10年後も生き残るためには、即物的なスキルを積み上げ型の長期スキルに一般化しなくてはならない。例えば Rails のモデルを作る能力を、データベース設計能力へと一般化する必要がある。この転化ができれば、フレームワークが入れ替わってもやっていける。

また、日常の業務では触れることの少ない、OS やネットワークなどの低レイヤの動きを学んだり、ソフトウェアエンジニアリングを学んで、自分の頭で考えて実践することも大事だ。僕がまだ新人だったとき、パーソナルソフトウェアプロセスという、実に地味で、恐ろしく手間暇のかかるソフトウェアエンジニアリング講座を社内で教えてくれていた上司がいた。彼には今でも感謝している。

パーソナルソフトウェアプロセス技法 https://www.amazon.co.jp/dp/4320029291/

これらの基礎力は、Webエンジニアの日常業務でわかりやすく役に立つことはあまりないものの、10年、20年経っても陳腐化しない。

未来への投資

僕はいま、即物的なスキルの習得にあまり時間を割いていない。過去の貯金があるから、何とかなっている。周りの優秀な若者たちにおびやかされながら、35歳くらいまでのスキル貯金で細々と食いつなぎ、時間を捻出し、陳腐化しない長期スキルに投資している。

この貯金がいつまで持つかはわからない。数年で言語、ライブラリ、フレームワークのトレンドが変わっていくIT業界で、あと20年も第一線で働けるのかはわからないが、今日よりもいい明日を目指して、手元の時間とお金を未来に向かって投げ続けている。

国勢調査のデータと R を使って結婚について考える

まず、「国勢調査の配偶関係データを R で取得する」で作成した、都道府県別の婚姻状況データを読み込みます。このデータは、15歳以上の日本の居住者を、都道府県毎、年齢毎、性別毎に、「未婚」「離別」「死別」「配偶関係不詳」「有配偶」に分けて記載しています。一般的には未婚、既婚の2分類を使いますが、国勢調査では婚姻関係を結んだ後の離別(離婚)と死別(配偶者の死亡)も区別しています。

census <- read.csv('prefs.csv')
attach(census)
census$age <- as.integer(sub('歳.*', '', age))
census$area_code <- as.factor(area_code)
census$area <- ordered(area, levels=unique(area))
census$marital_status <- ordered(
  marital_status,
  levels=rev(c('未婚', '離別', '死別', '配偶関係「不詳」', '有配偶'))
)
detach()

このデータは、全人口と、日本人の人口の両方を持っているので、外国人比率も参考までに押さえておきましょう。