サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<p>こんにちは。Think ! FrontEnd 運営の千葉(<a href="https://twitter.com/ur_uha" target="_blank">@ur_uha</a>)です。普段はテクノロジー本部CTO室にてWebフロントエンドの技術支援・教育支援、評価制度やガイドラインの作成を担当しています。</p>

<p>今回は、10/01(木)に開催した「<a href="https://dmm.connpass.com/event/187168/" target="_blank">Think! FrontEnd by DMM #02</a>」について、オンラインでの開催における工夫や登壇内容を紹介していきます。</p>

<h2>Think ! FrontEnd とは？</h2>

<p>「Think ! FrontEnd by DMM」は、DMM Group のフロントエンドおよび JavaScript における開発現場の【今】を話しながら、皆で改めてフロントエンドや JavaScript のことを考えようというコミュニティです。</p>

<h2>第二回開催において工夫してみたこと</h2>

<p><a href="https://dmm.connpass.com/event/177895/" target="_blank">前回</a> はとりあえずオンライン開催してみようということで始まった Think ! FrontEnd ですが、今回は当日配信の負担を下げられないかという検討の結果以下の対応をしてみました。</p>

<ol>
	<li>登壇を事前に録画して録画再生を配信</li>
	<li>質疑に関しては Sli.do や Twitter からピックアップしてリアルタイムで回答</li>
	<li>オンラインでの懇親会はなかなか難しいので、登壇者とパネルディスカッションをしてDMMのことをより知ってもらう</li>
</ol>

<h2>録画に関して</h2>

<p>録画は事前に Zoom にて登壇者に撮影してもらい、録画データをつなぎ合わせて配信に使いました。セッションとセッションの間も録画にしてつなぎ合わせることでリアルタイムとほぼ遜色ない形に持っていくことができたかと思います。</p>

<p>当日は私の PC にて Quick Time Player で再生したものを Zoom =&gt; YouTube Live にて配信しました。</p>

<p>配信の様子についてはYouTube Liveのアーカイブがありますので、リアルタイムで見れなかった方はぜひそちらをご覧ください！</p>

<div class="youtube-embed-wrapper" style="position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden"><iframe allowfullscreen="" frameborder="0" height="480" src="https://www.youtube-nocookie.com/embed/LdXDf8BiaZM?rel=0" style="position:absolute;top:0;left:0;width:100%;height:100%" width="640"></iframe></div>

<hr />
<h2>新卒研修でReact RecoilをProductionリリースした話</h2>

<p>１つ目のセッションでは、新卒研修のプロダクト開発における Recoil の導入に関するお話を、今年新卒で入社された毛利くん(<a href="https://twitter.com/tetty_dev" target="_blank">@tetty_dev</a>)にしてもらいました。</p>

<p>このセッションは、企画立案からプロダクト開発までを新卒メンバーだけで行うという、新卒研修のカリキュラムの概要についても知っていただける機会になると思います。</p>

<div data-oembed-url="https://speakerdeck.com/tetty0217/xin-zu-yan-xiu-derecoildao-ru-apuriworirisusitemita-dmm-dot-com">
<div>
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;"><iframe allowfullscreen="" scrolling="no" src="//if-cdn.com/nXMf92J" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>
</div>

<hr />
<h2>TypeScriptとAWS CDKでクラウドアプリケーション開発</h2>

<p>続いて二つめのセッションは、昨年新卒で入社した小林くん(<a href="https://twitter.com/Ryuk236" target="_blank">@Ryuk236</a>)による、負債脱却の移行手段として TypeScript, AWS を導入しているお話。</p>

<p>こちらのセッションでは実際の移行時のアーキテクチャの紹介だけではなく、VScode を利用したリモートでのモブプログラミングの工夫なども触れられており、非常にタイムリーな内容となっています。</p>

<div data-oembed-url="https://speakerdeck.com/ryu236/typescripttoaws-cdkdekuraudoapurikesiyonkai-fa">
<div>
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;"><iframe allowfullscreen="" scrolling="no" src="//if-cdn.com/mZ9LdVV" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>
</div>

<hr />
<h2>WebRTCによるビデオチャットでもステレオ配信したい！</h2>

<p>最後のセッションは、LC事業部でスクラムマスター兼エンジニアとして活躍されている伊藤さんによる WebRTC のお話。</p>

<p>WebRTC は現在 Web API として策定されているものの、各ベンダーのブラウザ側の実装に依存してしまっている関係上、実現したい案件への対応が難しく試行錯誤している様子が伺えると思います。全てのブラウザに同じ品質を届けるのは中々骨が折れますね。</p>

<div data-oembed-url="https://speakerdeck.com/oshinko90yen/webrtcniyorubideotiyatutodemosutereopei-xin-sitai">
<div>
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;"><iframe allowfullscreen="" scrolling="no" src="//if-cdn.com/EvGdEqO" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>
</div>

<hr />
<h2>質疑応答・パネルディスカッション</h2>

<p>ここからは実際に登壇をしてもらった方々と私、千葉がファシリテーターとなって質疑応答とパネルディスカッションを行いました。</p>

<p>パネルディスカッションは、今回の登壇内容以外にDMMの現在のリモート環境や、配信を見てくれていた方からリアルタイムで寄せられたお題などにも触れて進められ、かなり有意義なものになりました（気になる方はぜひアーカイブを御覧ください）。</p>

<h2>おわりに</h2>

<p>前回配信時に通信環境の不安定さなどで配信が中断した経緯もあって、運営の配信コストを抑えた形で臨んだ今回の第二回開催。結果的には、そこそこスムーズに行えたかと思います。</p>

<p>オンラインイベントでの知見が徐々に集まるなか、もっと多くの方に楽しんでもらう配信方法を継続的に考えていきたいですね。</p>

<p>最後にDMM Groupではフロントエンドを含め様々な職種で一緒に働いてくれる仲間を募集しています！ ご興味のある方は、ぜひ募集ページをご確認ください！</p>

<div data-oembed-url="https://dmm-corp.com/recruit/">
<div>
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 52.5%; padding-top: 120px;"><iframe allowfullscreen="" src="//if-cdn.com/lYoH0j6?app=1" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>
<script async="" charset="utf-8" src="//if-cdn.com/embed.js"></script></div>

<div data-oembed-url="https://dmmgames.co.jp/recruit/">
<div>
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 52.5%; padding-top: 120px;"><iframe allowfullscreen="" src="//if-cdn.com/njiCDKP?app=1" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>
<script async="" charset="utf-8" src="//if-cdn.com/embed.js"></script></div>

<p>&nbsp;</p>


Think! FrontEnd #2 を開催しました！

プラットフォーム開発本部

facebook

twitter

DMM TV

DMMブックス

DMM pictures

DMM GAMES

DMMオンクレ

DMMスクラッチ

DMMくじ

DMM Factory

DMM FILMS

ぷらさぷ ～＋SURPRISE～

DMMオンラインサロン

DMMいろいろレンタル

DMM DVD／CDレンタル

DMM通販

DMMオンラインクリニック

デジタルコミック事業

DMMチャットブースト

DMM英会話

DMM FX

DMMかりゆし水族館

ベルリング

ハッシャダイソーシャル

ヤンキーインターン

シント=トロイデンVV

DMM 地方創生

DMM.make 3Dプリント

DMM.make PRODUCTS

Seamoon Protcol by DMM Crypto

DMMバヌーシー

DMM EV ON

DMM WEBCAMP

DMMぱちタウン

DMM競輪

Waitinglist

Algoage

DMMポイントクラブ

社会課題

エンターテインメント

動画

電子書籍

アニメ

ゲーム

アプリゲーム

コミュニティ

オンラインサロン

PCゲーム

通販

オンラインイベント

ビジネスソリューション

教育

英会話

水族館

ハードウェア・プロダクト

救急車両

消防車両

モノづくり施設

サッカー

スポーツ

地方創生

VR体験

Web3

生成AI

研究開発

アプリ

ブロックチェーン

プラットフォーム

横断開発

社会インフラ

アミューズメント

ダイバーシティ

同人

サーバサイド

バックエンド

フロントエンド

ネットワーク

セキュリティ

ITインフラ

配信基盤

ペイメント

Android

データベース

ビッグデータ

データ分析

機械学習（ML）

MLOps

VR開発

フルスタック

プロトタイピング

グラフィックデザイン

イラスト作成

3DCG

モーショングラフィック

Think! FrontEnd #2 を開催しました！

シェア