Opt Technologies Magazine

オプトテクノロジーズ 公式Webマガジン

イベントレポート「俺得フロントエンド (2) LT会」を開催しました

alt

2019年10月24日に開催された「俺得フロントエンド (2) LT会」のレポートをお届けします。

あいさつ

こんにちは!オプトで主にフロントエンドエンジニアをしている中村です。
お仕事は成熟したプロダクトのJavaScriptをTypeScriptに変換するなどして、フロントエンドの治安維持をしています。
今回は2019年10月24日に弊社で開催された俺得フロントエンド (2) LT会の様子をレポートします。

「俺得フロントエンド」とは

俺得フロントエンドとは、2018年まで様々な技術系イベントを開催してきた「市ヶ谷Geek★Night」の後継として新たにOpt Technologiesとして始まった4種類のイベント企画のうち、フロントエンドweb開発に特化したものです。

フロントエンドであればテーマの制限は特になく、

  • 明日から使える知見
  • みんなの役に立つこと
  • 俺が得したこと
  • 俺も得しなかったこと

などであれば大歓迎のLT会です。
また、イベント開催中にハッシュタグ#oretoku_frontを使ってツイートをすると発表中のスライド上にコメントが流れるというユニークなLT会でもあります。

俺得フロントエンド (2) LT会

1: Redux を typeless へリプレイスするためのハウツー

f:id:opttechnologies2015:20191028122810j:plain 株式会社オプトのシニアエンジニアの伏見(@_sisisin)によるRedux を typeless へリプレイスするためのハウツーでした。
typelessは「type annotation less」にアプリケーションが書けることを標榜しているFluxライブラリです。型アノテーションなしに型安全を実現できることから、オプト社内の業務補助プロダクトでもすでに導入実績があります。
今回の発表ではReduxからtypelessへの以降手順を詳細に記し、15分枠でスライド60枚の充実した資料でお送りしました。

2: Vue.js + デザインパターンによるコンポーネント実装

f:id:opttechnologies2015:20191028122756j:plain

@PhilomagiさんによるVue.js + デザインパターンによるコンポーネント実装でした。
Vue.jsのSingle File Componentに何かとベタ書きしてしまうという問題に対して、3種類のデザインパターン(State, Strategy, First Class Collectionパターン)を用いてそれぞれの効果を比較するという、"俺"のみならず、みんなが得する発表でした。

3: 地味に嬉しい設定ファイル管理テクニック

f:id:opttechnologies2015:20191028122657j:plain @euxn23さんによる地味に嬉しい設定ファイル管理テクニックでした。
@euxn23さんからは以下の3つのフロントエンド開発をアシストする俺得ツールをご紹介頂きました。

  • npmignore-aggregate
    npmignore を publish 時に .gitignore から動的生成できるようにするシンプルなツール
  • json-stringify-cli
    module.exports を json にするツール
  • gist-fetch
    gist からファイルを持ってくるツール

俺得ツールという触れ込みの紹介でしたが、3つとも遭遇しがちな問題を解決してくれる素晴らしいツールでした。

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

f:id:opttechnologies2015:20191028122850j:plain

@StewEucenさんによるMa_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>でした。
Ma_gicianは少ない記述量で様々なことができるとのことで、概要説明と併せてライブコーディングによるデモを行っていただきました。
本記事公開時点ではソースコードは非公開とのことなので、公開に期待がかかるフレームワークです。

5: Atomic Designの ディレクトリ構成を工夫したらDXが向上した話

f:id:opttechnologies2015:20191028122715j:plain @ishizukihさんによる Atomic Designの ディレクトリ構成を工夫したらDXが向上した話 でした。

Atomic Design の単位でディレクトリ切ると、複数ディレクトリ横断することが辛かった経験を踏まえ、Lv1, Lv2と言ったナンバリングでディレクトリを分類することでDXを向上したという発表をしていただきました。
フロントエンドの扱うファイル数が多くなってきた昨今、このようなディレクトリ整理もDXに関わる重要な要素の1つですね。

6: TypeSafeなAPIモックサーバーをオープンソースで作った話

f:id:opttechnologies2015:20191028122622j:plain @m_mitsuhideさんによるTypeSafeなAPIモックサーバーをオープンソースで作った話でした。
HTTPリクエストがanyだらけであるという問題を解決すべく、aspidaという型安全なHTTPクライアントを制作したお話とデモを行っていただきました。
デモは内閣府のまち・ひと・しごと創生本部が運営するRESAS (地域経済分析システム) API@aspida/resasを使って型安全にするというもので、充実した内容と熱量のある話術で大盛り上がりでした。

最後に

登壇者・参加者の皆様のおかげで第2回目の俺得フロントエンドも盛況のうちに幕を閉じました。
今後も引き続き、俺得なことを披露できる稀有な技術交流の場としてイベントを開催していく予定です。
ご参加頂いたみなさま、ありがとうございました!


株式会社オプトでは、フロントエンドエンジニアを絶賛大募集中です。
もし興味をお持ちいただけましたら、こちらよりお声がけください!