こんにちは、ギフティの飯野です。
弊社では定期的に一般参加可能な技術イベントを開催しております。
今回は初めて Vue.js に関するイベント【Vue.js Night】を開催しましたので当日の様子をレポートいたします。
ハッシュタグ #gifteevuenight でTwitterから当日の様子も追うことができるので是非そちらもご覧ください。

登壇者

ギフティ枠
- もちすな (@mochi_suna) / Vueでポートフォリオサイトを作ろうとした話
- egurinko (@egurinko) / Vue 3.0 Composition API に触ってみた
- やし (@yashi) / Svelteで作るWebComponents
一般参加枠
- ryutabi さん (@ryutabi) / Nuxt.js × Firebase × VuexFire で苦労したこと
- m_mitsuhide さん (@m_mitsuhide) / TypeScript x Axiosで型安全なAPIリクエストを実現する方法

ギフティ枠

ギフティ枠の三人

Vueでポートフォリオサイトを作ろうとした話

登壇者：もちすな

概要

Vue.js の経験が殆ど無いもちすなさんが Vue.js を使ってポートフォリオを作った話をしてくれました。
LTに間に合わなかった！と言っていましたがアニメーションもリッチな動きで素敵なサイトが出来上がっていて驚き。

CSSではなくjsライブラリである TweenMax を利用したアニメーションであったり、Vue CLI + Vuex + Typescript でマウスホバーなどのステート変更の監視など、少ない時間、コード量で最大限のパフォーマンスを出す方法を語ってくれました。
(もちすなさんのかっぱはいつ見ても可愛いです。)

当日の様子

カッパが可愛い🥰#gifteevuenight
— やまっぴ (@Yamappy4) October 30, 2019

かっぱ可愛い、自分のキャラみたいなのいいな #gifteevuenight
— やまけん (@djfeosnl) October 30, 2019

tweenMaxを使うことで、CSSの管理が驚くほど楽に#gifteevuenight
— giftee_engineer (@giftee_dev) October 30, 2019

Vue 3.0 Composition API に触ってみた

登壇者：egurinko

概要

2019年10月10日、ついに Vue 3.0 がリリース！
リリース1ヶ月に満たないほやほやの機能を「今日の晩御飯は？」という自作アプリを作成した経験から語ってもらいました。
Vue 2系の制約と比較した Vue 3.0 のモジュール化の容易さや TypeScript サポート等、新しいものにも関わらず非常に分かりやすくまとめられていて Vue 3.0 の明るい未来が見えてくるLTでした。

どんどんモジュール化されていってコードがスッキリしていく様を見るのは見ていて気持ちが良かったです。
制作したアプリケーションも公開されているので、「是非使ってみてください！」とのことでした。

今日の晩御飯は？ - https://what-is-todays-dinner.herokuapp.com/

当日の様子

vue3.0のsetup内で定義するのは、refよりreactiveの方が違和感ないかも！? #gifteevuenight
— koichi@器用貧乏エンジニア (@tukivirtualcoin) October 30, 2019

Vue 3.0 はコンポーネント内で、型推論が効く#gifteevuenight
— giftee_engineer (@giftee_dev) October 30, 2019

Svelteで作るWebComponents

登壇者：やし

概要

やしさんは Svelte を使って WebComponents を作成した事例をデモを交えて紹介してくれました。
パフォーマンスの良さ（DOMを直接操作するのでVue, Reactと比べて早い）、記述するコード量の少なさ、SyntaxがVueと似ている点…等、興味をそそられる要素満点。
私自身 Svelte は初耳だったのですが早速使ってみたくなりました。
TypeScriptのサポートも予定されているとのなので、今後さらに利用者数が増えていきそうです。

当日の様子

仮想DOMを使わない...だと... #gifteevuenight pic.twitter.com/WEl7DECOnD
— シロ (@shiroemons) October 30, 2019

svelte知らなかった…コード量少なくなるのよいな #gifteevuenight
— ぶなしめじ (@buna4meg1) October 30, 2019

svelte、Typescriptサポートしてくれたら絶対使ってみよう #gifteevuenight
— もちすな (@mochi_suna) October 30, 2019

一般参加枠

一般参加者枠のお二人

Nuxt.js × Firebase × VuexFire で苦労したこと

登壇者：ryutabi さん

概要

たくさんの旅の経験から旅人同士のコミュニケーションを活発にすることを目的とした StayOnAir というアプリを製作中のryutabiさん。
npmで提供されている VuexFire を紹介していただきました。
VuexFireとはFirebaseの更新を見てStoreにも自動でコミットしてくれるライブラリ。
非常に便利ですが、ドキュメントIDの発行タイミングを考慮しないと余計な通信を行わざるを得なくなったり、色々と苦戦をすることも多かったようです。
質疑応答では沢山の質問があり、会場の関心の高さも窺えました。

なんと、本日外部LT初登壇だというryutabiさん。
初の外部LTの場に弊社を選んで頂きありがとうございました！

当日の様子

Vuexfire、良さそう #gifteevuenight
— もちすな (@mochi_suna) October 30, 2019

Stay On Air というサービスを開発中だそうです！#gifteevuenight pic.twitter.com/qnj1YH8TeS
— giftee_engineer (@giftee_dev) October 30, 2019

https://t.co/iQJJRN0524
マジでよさそう #gifteevuenight
— もちすな (@mochi_suna) October 30, 2019

TypeScript x Axiosで型安全なAPIリクエストを実現する方法

登壇者：m_mitsuhide さん

概要

m_misuhideさんは自作のHTTPクライアントである aspida を紹介していただきました。
TypeScriptは型安全！といいながらもHTTPリクエストのany型だらけの現状を改善できないか？というモチベーションで制作されたらしく、APIも型安全に行えて大変魅力的なHTTPクラアントです。
ライブコーディングも交えての紹介だったのでVSCodeでの補完ができたり、リアルタイムにエラーが吐かれたりするシーンに会場も興味津々といった感じでした。
これから広く使われるように Twiiter や Google など外部公開されているAPIの型定義もどんどん増やしていくらしいです。

(ちなみに aspida はギリシャ語で「シールド」という意味らしいです。)

当日の様子

JavaScriptカースト！？ #gifteevuenight
— ぶなしめじ (@buna4meg1) October 30, 2019

aspidaすごいのでは！？ #gifteevuenight
— シロ (@shiroemons) October 30, 2019

aspida、完全に理解した #gifteevuenight
— かきのたね (@DuckSeed717) October 30, 2019

懇親会

イベントの後は同会場内でピザとお寿司を囲みながらお酒を片手に懇親会

懇親会は遅い時間であったにも関わらずほとんどの方が参加してくれており、LTの質疑応答では質問でききれなかったことを質問していたり。
エンジニアとしての実績の話からプライベートのお話までざっくばらんな会話が飛び交っており、交流会として非常に楽しい時間でした！

まとめ

今回は #フロントエンドNight から更にフォーカスを絞って Vue.js オンリーのイベント。
前回に引き続きたくさんの方が参加して頂きVue.jsコミュニティの力強さを感じた一日でした！
ちなみに弊社サービスである giftee でもVue.jsを利用してのリニューアルプロジェクトが進行中です！
今回のイベントでの交流を活かして、よりよいサービスを提供していけるように頑張っていけたら、と思います。

また、ギフティでは定期的にイベントを開催しています。
カジュアルな雰囲気の勉強会なので是非気軽に足を運んでいただきたいです！
イベントの開催告知などはギフティのエンジニア向けTwitter公式アカウント(@giftee_dev)にて発信していきますのでフォローお願い致します！

以上 Vue.js Night レポートでした。