giftee Tech Blog

ギフティの開発を支えるメンバーの技術やデザイン、プロダクトマネジメントの情報を発信しています。

フロントエンドNight#1 を開催しました

meetup Vue.js

こんにちは、ギフティの中屋(@nakaryo79）です。
弊社では定期的にエンジニア向けの勉強会を主催しており、 9 月 4 日には、フロントエンド Night というイベントを開催しました。
本記事では、当日の様子をレポートをしたいと思います！

会場の様子

LT 登壇者

  • ギフティ枠
    • egurinko / このタイミングで Vue.js アプリに TypeScript を導入するには？
    • kato1628 / Redux middleware でフォームバリデーションを実装する
    • kikunantoka / Gatsby.js と Cloud Functions で毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話
  • 一般枠
    • StewEucen さん / Ma_gician （世界中のフロントエンダーの残業時間を減らす、新しい JavaScript フロントエンドフレームワーク）
    • rikuson298 さん / はじめての GraphQL スキーマ設計
    • mottox2 さん / JSX で作る DSL

egurinko (ギフティ枠)

このタイミングで Vue.js アプリに TypeScript を導入するには？

概要

オフィス環境を監視する IoT アプリの実装に Vue を使用しており、
Vue.js と TypeScript を組み合わせて使うときの Tips を発表してくれた egurinko さん。
Vue × TypeScript における ClassStyle と ObjectStyle の二つのスタイルの比較を比較しながら、
来るべき Vue3.0 にどう備えたら良いかを語ってくれました。

当日の様子

kato1628 (ギフティ枠)

Redux middleware でフォームバリデーションを実装する

概要

フロントでバリデーションを行うときに、どのレイヤーも汚したくないので、ミドルウェアで実装しちゃいましょうという話。
ちなみに関数を返す関数を返す関数を定義するという？？？な話もありました。
散らかりがちなバリデーションロジックを単一のレイヤーにまとめられるというのはメリットがありそうですね。

当日の様子

kikunantoka (ギフティ枠)

Gatsby.js と Cloud Functions で毎週自動でコンテンツが更新され続けるフレームワーク比較サイトを作った話

概要

静的サイトジェネレータである Gatsby.js と Google の Cloud Functions とを組み合わせて
自動更新されるサイトの仕組みを構築した話をしてくれました。
どれもほとんど課金せずに運用できるので、開発モチベーションが保たれるとのことでした。
トライアルで早速触ってみたくなる発表でした!!

当日の様子

StewEucen さん(一般枠)

Ma_gician （世界中のフロントエンダーの残業時間を減らす、新しい JavaScript フロントエンドフレームワーク）

https://qiita.com/StewEucen/items/a320e1abc655283c3d53

概要

なんともキャッチャーな題名の LT でした。
新しいフレームワーク？Vue に取って代わる？
LT でライブコーディング交えて発表が行われたのですが、最初は速すぎて何が起こっているのか分かりませんでした。
他のライブラリには依存していないピュアなフレームワークで、script 構文を書かなくてよくなるとのこと。(きっと裏でとてつもなく頑張っているんだろう...)
Ma_gician を使うと、フロント開発者とデザイナーの両方がハッピーになれる仕組みとなっているらしい。責務の分離 is 大事!!

ちなみに開発協力者とスポンサーを絶賛募集中とのことです。興味のある方はぜひ話を聞いてみてください。

当日の様子

rikuson298 さん(一般枠)

はじめての GraphQL スキーマ設計

概要

B2B をワンランクアップさせるという意味が込められた素敵な社名の A1A から参加してくれた rikuson298 さんは、
GraphQL スキーマ設計に置ける Tips を語ってくれました！
スキーマ設計の際に、サーバーサイドの影響を受けづらい手法を具体例を交えて説明してくれて、非常に参考になりました。
データ構造をそのままスキーマに落とさないというのは非常に大事ですね。

(また、React js にかけた NIKE のシューズを履いて来たのも、なんともユニークでした笑)

当日の様子

mottox2 さん(一般枠)

JSX で作る DSL

概要

私の知らないところでパワポはもう既にコード管理する時代になっていたようです。

フロントエンド中心に活動しているフリーランスエンジニアの mottox2 さんは JSX で作る DSL について発表してくれました!
JSX から Re:VIEW 形式変換！という話なんですが、単なる DSL ではなくて、TS や Jsdoc の補完が効くらしい。
ワンソースから PDF や EPUB に変換できるというのは強いですね。
パワーポイントがコードから生成されるくだりは会場がざわついていました。

当日の様子

懇親会

LT 後は軽食を取りながらの懇親会。
LT が終わっても多くの人が残ってくれ、LT には収まりきらなかったデモの続きが行われたりと、みなさん盛り上がっていました！

まとめ

今回、フロントエンドというテーマでイベントを開催しましたが、たくさんの人に来ていただき、LT、懇親会共に大変実りのある会になりました。
ギフティでは今後も定期的にイベントを開催していく予定ですので、是非参加していただければと思います！
また、ギフティのエンジニア向けTwitter 公式アカウントができましたので、ポチッとフォローお願いします！！

以上、フロントエンド Night レポートでした！ お読みいただきありがとうございました！