チームスピリットデベロッパーブログ

チームスピリット開発者のブログ

【フロントエンドランチ #27 】潜入レポート!

こんにちは。プロダクト開発チームの松田(id:a-matsuda)です。

今回は、プロダクト開発チームで行っている「フロントエンドランチ #27」に潜入した様子をレポートします!!

フロントエンドランチとは

そもそも、チームスピリットのフロントエンドランチは、フロントエンド領域の気になる話題や、チームとして解決したいフロントエンド課題をネタに、和気藹々とランチしながら、侃々諤々盛り上がろうぜ、という取り組みです。フロントエンド領域に興味があれば、サーバサイドエンジニアでも、QAエンジニアでも、プロダクトマネージャーでも、誰でも参加が可能です。

2017年4月からスタートしたフロントエンドランチ、今回でなんと27回目、平均すると2週間に1回くらいのペースで続いていて、プロダクト開発チームの文化の一つとなっています!

過去のフロントエンドランチ

1年以上続いているフロントエンドランチですが、これまではどんなことを話してきたのでしょうか???興味のある方も多いと思いますので、少し覗き見してみましょう。

f:id:a-matsuda:20180705155444p:plain
過去のフロントエンドランチの様子

  • React Fiberってなに?
  • React.js Meetup に行った話
  • React v16でいろいろ嬉しい変更が入るのでさっと共有してみる
  • フロントDDDの記事シェア
  • reactのコンポーネントのテストはEnzymeでやってみたいなぁ

など、次期プロダクト開発で利用しているReactに関連するネタや、フロントエンド設計を考えたり、気になる勉強会情報をシェアしたり・・・守備範囲はかなり幅広いです。そして、

  • 湊さんのお悩み相談

フロントエンドテックリードである湊のお悩みを聞くなんていう会もありました。暖かいメンバーの集まりであることも伝わってきますね!!

フロントエンドランチ #27

2018年7月4日(水)13:00より「フロントエンドランチ #27」が行われました。

お弁当を持って集合!

メンバーがお弁当を持って集まってきました。フロントエンドランチもだいぶメンバーが増えて、今回は全部で6名が参加です。 まず、気になるのは皆どんなお弁当を食べてるか?ですよね??中華風、インドカレー、和風、サンドイッチなど、ここからも、メンバーの多様な嗜好性が感じ取れますね。とりあえず、それぞれがお腹を満たしていきます。

f:id:a-matsuda:20180705190451p:plain

おもむろにスタート

そして、過去はお悩みを相談していたテックリード湊が、爽やかに、おもむろに進行を始めていきました。

f:id:a-matsuda:20180705190841p:plain

こんなテーマで話が展開していきます

フロントエンドランチ、少し久しぶりなこともあって、重要な話と気になるネタが混ざりながら話が展開していきました。

  • コーディング規約のアップデート
  • 開発で利用しているモジュールの定期バージョンアップの話
  • ダイナミックインポート やってみたいなぁ
  • (業務の話に脱線)TeamSpiritの勤怠承認のこと(おっといけない・・)
  • ES2018 追加される機能には何があるの?
  • 最近気になったサービス(JSUIって知ってる?やっぱGitHubトレンドみないと!等)

その中でも、議論が白熱した2つのテーマについて少しご紹介です

ダイナミックインポート やってみたいなぁ

テックリード湊が、切り出しました。 「次期プロダクト開発で、モバイル画面開発に取り組み始めたこともあり、PCと比べて1画面に表示できる情報が少ないモバイルだからこそ、ダイナミックインポートをうまく使って、表示速度を早め、UX向上に取り組みたい。調べてみようと思っています!」

フロントエンドエンジニアの方であれば、ご存知だと思いますが、ダイナミックインポートは、必要な時、必要なJSのモジュールだけを読み込ませる技術です。全てのページをJSで描画するSPAなどでは、1つのJSが大きくなってしまうので、分割させることで表示の初動を早くできるのがメリット。これまでは特に利用するシーンがなかったんですが、モバイルの開発を機に検討したいというわけです。

湊からの問いかけに、メンバーからいろいろな反応が。

  • ダイナミックインポートが発生した瞬間は画面がみえず、インポートが終わった瞬間にボコッと表示されるよねぇ。あれってどうなの?
  • ローディング画面を出しとけばいいじゃない?
  • 実際に次期プロダクトのどの部分で使えるの??そういうシーンでどれくらいある?
  • 一覧画面は、基本はページングする仕様だから、スクロールで読み込みたいニーズはないよね?
  • スマホは初動が大切だから、必要なところだけ読み込むっていうのは理にかなってるよね。

などなど、、脱線がありながらも、各々の視点で意見を出し合いました。みんな楽しそうなのが最高です。今後に向けて、調べてみようとなりました。

ES2018 追加される機能には何があるの?

正規表現に多くの機能が追加され、細かいところが強化されている印象のES2018。フロントエンドランチ内でも、今回の変更をちゃんと理解して、どんなシーンで使えるの?というところをみていきました。 特に盛り上がったのは、以下の2つでしょうか。

  1. Promiseにfinally()が追加
  2. 正規表現のキャプチャグループに名前がつけられるように変更

一つ目は、6月にジョインした内藤が、どんな時に使えるのか、楽になるのかを力説!! 二つ目は、全員から感動のため息!! 特に、後方参照が追加になったり、replace()で使用できるなど、これまでは冗長な処理を書いて実現していたところが、一発で実現できる! やっと他のプログラム言語と近づいてきたね、みんな喜びの表情です。 f:id:a-matsuda:20180705203439p:plain

まとめ

このように、仕事とは違ってゆる〜く楽しみながら取り組んでいるフロントエンドランチ。今回はちょっとかための内容が多かったですが、開催のタイミングによって色が違うのも、これまた楽しいですよね。

フロントエンドエンジニア募集♪

チームスピリットでは、フロントエンドエンジニアを募集しています。フロントエンドランチの文化を始め、モダンなフレームワークや環境へのチャレンジができる面白い環境だと思います。 今回ご紹介した、フロントエンドランチに飛び入り参加いただくことも可能ですので、少しでも興味を持っていただいた方、ご連絡ください!(直接メッセージでも、下記の応募フォームからでも構いません)

エンジニア募集