くろおーかみ*てっく

しがないくろおーかみの勉強記

【シューマイ】Tech Lead Engineerから最新技術を学べ！Vue.js編 に参加しました #shuuumai

Report Report Vue Vuex 勉強会

こんにちは、y-mix( @bwolftech )です。
今日はVueの知識を深めたくこちらの勉強会に参加しました！

shuuu-mai.connpass.com

もくじ

シューマイ？

ではなく

こちらのほうです。

勉強会の趣旨を引用すると、

本イベントは、“世界をテックリードする日本人エンジニアを多く輩出する”をビジョンに、 日本のエンジニアのレベルの底上げを目指すコミュニティです！ 最新技術・ハイレベル技術に特化したエンジニアコミュニティを形成し、勉強会・情報交換を行う機会を多く作る。 それが、『シューマイ』コミュニティ。

とのことで、
ハイレベルで最前線な Vue.js の実例が聴ける。 これに期待して参加しました。

Vue.jsのslotを活用した汎用的コンポーネント設計について

「今あるボタンのコンポーネントにアイコンを付けたものを新しく作りたい」など、共通なものに要素を付け加えたものを作りたいときに、新しくコンポーネントを作らずに再利用する Slot のテクニックについてです。

どこの部分を共通化すべきかわかりづらいので、Vuetifyなど予めコンポーネントができているライブラリを導入するアイデアも良さそうですね✨

Vue/Vuexを限りなくReact/Redux風に書く話

React/Reduxで洗練された書き方をしている typescript-fsa をVue/Vuexでも使えないかと工夫したお話です。
Vue/Vuex内でES6のテンプレート文字列を用いて 任意の名前 + STARTED/DONE/FAILED のアクション？を再現しています。

Vue.js × Atomic Design - コンポーネント分割の指針

Vue.js/Atomic Design未経験のチームにどのようにして導入したかを解説しています。
いかに Atomic Designを導入するか、 実際のパーツを用いて説明されていてわかりやすかったです💖

また、Vue.js × Atomic Designだけではなく、それを浸透させるための 「テックリードとは何か」 まで解説されています💪

懇親会

f:id:y-mix:20190711192737j:plain
シューマイ！

もちろんシューマイが登場！

感想

実際の例を用いた発表となっており、Vueのサンプルプロジェクトで今すぐ実践できそうな気分になりました。
実践したい 実践しないとですね（自戒）

ありがとうございました！