私が技術力を高めようと思った理由は、エンジニアとしての価値を高める、技術力を高める、そんなつまらない理由じゃなかったはずだ。誰にも否定することはできない、私の信念と情熱があったはずだ。その信念と情熱を思い出してから、私の前にあった霧は、消えてなくなった。何のために技術力を高めるのか。それは自分の作るものと、自分の周りの人の価値を高めるためだ。自分や、周りの人が抱えているたくさんの課題を鮮やかに解決していくためだ。生まれるより高度な課題を、解決し続けていくためだ。自分の作るものと、自分の周りの人と、何よりも自分を愛するためだ。私のプロダクトを私が愛し、その価値を高めるためだ。私のチームの価値を高めるためだ。私のプロジェクトマネージャーの価値を高めるためだ。私のプロダクトを受注してきた営業の価値を高めるためだ。私たちのプロダクトの価値を高めるためだ。私の会社の価値を高めるためだ。私たちの会社を選んでくれたクライアントの価値を高めるためだ。周りの価値を高められるそういう人間だからこそ、そういうエンジニアだからこそ、人はその人に価値を見出し、信頼し、尊敬し、称賛し、対価を支払ってくれる。あなたの技術はすごい。あなたがいなければこの課題は解決できなかった。一緒に働けてよかった。言ってもらえなかったとしても、そうである事実は誰の目にも明らかであり、その事実は、自分に確かな自信をもたらしてくれる。理解し、応援してくれる人が増えていくはずだ。愛するプロダクトと、信頼できる仲間ができる。それこそが、エンジニアとして幸せを感じながら成長し続けていくモチベーションになりえる唯一のものであると、今の私は、そう思っている。誰かと比べるものじゃない。誰かと張り合うものじゃない。幻想のような理想にすがるものじゃない。私は、チームのミッションを鮮やかに成功させ、周りの価値を高め、自分の作るものを愛し、自分の仕事を愛する、そのために必要とされる最低限の能力である、技術力を高める。私は、けして一人ではない。これまでもずっとそうだったように、これから先もそうであるように。その過程で、きっと鮮やかに解決できずに、もがき苦しむこともあるだろう。思い通りにいかないこともあるだろう。新しい技術を理解できずに苦しむこともあるだろう。思想の違いでチームメンバーと口論になることもあるだろう。自分の妥協を軽蔑したくなるときだってあるだろう。自分の才能に、絶望することだってあるだろう。少なくとも私は、打算やエゴ、自分のことだけを考えて苦しんだわけじゃない。誰かを幸せにするために、もがき苦しんだ。そのことは、きっと誰も否定できるものじゃない。私は、そうやって幸せを感じながら、エンジニアとして成長し続けていきたいと思う。この仕事を選んだ私を、受け入れてくれた人たちのためにも、そうであるべきだと思っている。Designについて書いてあるスライドがあり、コンポーネント設計であったもやもやが解決しそう!と思ってほんのり調べてみた。Designを考案した人のブログbradfrost.comそして、みんなで認識合わせる時には、発音しないといけないので読み方と意味を調べてみた。これが正しいかどうかは分からないので参考程度にお願いします。考案した人のブログにあるPageという概念はデザイナーから見た個別のページとデザインされるべきテンプレートを呼び分けるということなのでVueのコンポーネント設計では存在しない、はず。UIコンポーネントお久しぶりです。Vue.jsのUIフレームワークについてのまとめ記事(英語)を見つけてツイートしたところ、それなりにいいねがついたので「みんな、UIフレームワークをめっちゃ探してるな」と感じとり人気のあるフレームワークを日本語でまとめてみることにしました。人気のあるフレームワークは以下のブログ記事などを参考にしています。2018海外のVue.js用UIフレームワーク紹介記事を読み漁り、どの記事にもだいたい出てきているフレームワークを女の勘でチョイスしました。Historyを皆さんご存知ですか。ちなみに私は知りませんでした。githubのスター獲得の歴史をグラフで確認できるサービスです。丁寧な解説記事はこちら。女の勘で選んだベストフレームワークのスター獲得曲線を確認してみます。history見ておわかりのとおり、Elementは先発のVueのUIフレームワークで、スター数も飛び抜けて多いです。どのフレームワークも右肩上がりでスターが増えていますね。見てお分かりのようにVueのフレームワーク自体の人気が急激に出てきているのがお分かりいただけると思います。実は先発のフレームワークであるvue-materialも人気があったのですが、こちらの曲線を見てお分かりのように後発のマテリアルデザインフレームワークであるVuetifyが人気をかっさらっていってしまったようです。Historyも確認してみましょう。historyご覧になってお分かりのように、ついにVue.jsがReactを抜きました。(めでたいぜ!)私がVueを初めた数年前はフロント界隈のイベントにおいてVue勢はややマニアック勢だったのですが、もはや巷ではReactおじさんからVueおじさんへ変身しているおじさん勢も出てきています。twitter.comごらん。使ってみて判断する派です。当時最も人気と思われたElementとVuetifyを使ってみました。2018年6月時点で、Elementはレスポンシブレイアウトに対応していない状態でコンポーネントの詰め合わせという様相が強く統合的なフレームワークという感じではありませんでした。そのため、レイアウトされたページの見本がなく、綺麗にレイアウトするのがかなり大変でした。いうことで、当時は結果的に楽で綺麗にレスポンシブ対応のレイアウトができるVuetifyを選択しました。現在のElementのドキュメントを見る限りでは、レスポンシブ対応されていて統合的なフレームワークとして使えそうに見えます。アプリケーションに必要そうなコンポーネントもほぼ揃っているのでマテリアルデザインに抵抗がある人は使ってみてもよさそうだと思います。github.comリリースノートを見てみても活発に更新されてメンテナンスされているのが分かります。一点、注意としては中国の方が開発されているので、突然中国語がドキュメントなどに登場したりします。目立った致命的なバグやレイアウト崩れなどはほとんどないように思います。リリースノートを見てお分かりのとおり尋常じゃなく活発にリリースが行われています。github.com先日も新しいコンポーネントがリリースされました。現在まで定期的にアップデートしていますが、radioコンポーネントのイベントがinputからchangeになってしまったということ以外では書き換えが発生するようなことはありませんでした。一点注意点としてはVuetifyが採用しているcssプリプロセッサがstylusなのでstylusのloaderなどを入れたりファイルの分割などで少し工夫が必要かもしれません。Vue.jsのUIフレームワークのデザイン分類UIといえばデザインも非常に大事です。できれば綺麗で好みのデザインに近いフレームワークを使いたいところです。いうことでデザインに着目して分類してみました。MaterialBootstrap系BootstrapVueBuefy独自デザイン系Elementマテリアルデザインはレスポンシブ時の操作感まで考え抜かれていると感じることが多いです。大きな時計が出てくるTimePickerは当初は正直「え、なにこれ。」と思ったのですが使い慣れてくるとスマホからでもPCからでも驚くほど素早く気持ちよく時間の入力ができます。見慣れていないクライアントに「え、なにこれ。」と言われてしまうかもしれないのでお好みで使っていただければと思います。全体的にマテリアルデザインは洗練されている印象で、Bootstrap系は少しカジュアルな印象を与えます。Elementについては、色が全体的に薄いのでオシャレ感はかなりありますが、オシャレじゃなくていいからハッキリ見えるほうがいいというクライアント向けではなさそうです。マテリアルデザインはよくアニメーションがついてくるので、それが煩わしいと感じる人もいるかもしれません。フレームワーク選定についてここで紹介したフレームワークはコンポーネントがかなり充実しているものばかりなのでどれを採用しても良さそうな印象を受けます。あとは、Vue.jsの場合はコンポーネントがいかにカスタマイズして使えるかということが重要になってくるのでその辺の使い勝手は多少、自分で使ってみて検討してみるのがいいです。フレームワーク選定の時は、まずは人気があるものをリストアップし当たりをつけて、ドキュメントなどを読み込んで絞り込み、あとは実際に動かしてみて決めるというプロセスがいいように思います。ドキュメントの出来がいいというのはフレームワークを選ぶ上でかなり大事です。以下のポイントを重視するといいかなと思います。