<p>この記事は、<a href="https://adventar.org/calendars/6823">Cybozu Advent Calendar 2021</a>の9日目の記事です。</p>
<hr>
<p>フロントエンドエキスパートチームでは、社内向けフロントエンド勉強会の「Frontend Weekly」と、社外向けフロントエンド情報発信イベントの「Cybozu Frontend Monthly」を運営しています。</p>
<p>この度、Frontend Weeklyが5周年、Cybozu Frontend Monthlyが1周年を迎えました🎉</p>
<p>今回はそれぞれの各勉強会の内容と継続して開催してきた所感について紹介します。</p>
<h2>Frontend Weeklyとは？</h2>
<p>Frontend Weeklyは社内の有志が週ごとにフロントエンドの情報を持ち寄り、共有し合う会です。</p>
<p>次のように社内の<a href="https://kintone.cybozu.co.jp/">kintone</a>上で情報が共有されています。</p>
<p><img src="/frontend-expert/image/frontendWeekly-And-Monthly/frontendWeekly.png" alt="kintone上で情報が共有されている様子" width="718" height="640.4116638078901" ></p>
<p>各々が持ち寄った記事の他に、<a href="https://twitter.com/azu_re">azuさん</a>が運営している<a href="https://jser.info/">JSer.info</a>を読む時間を設けています。</p>
<p>Frontend Weeklyは、2016年3月にFrontend Weekly Lunchとしてスタートしました。その後、ランチの時間では社内メンバーの予定が合わなくなり、Frontend Weeklyとして毎週火曜日の夕方に開催されるようになりました。</p>
<p>上記のように開催形態が変わりつつも、2021年まで約5年間継続しています。</p>
<p>稀にゲスト招待も行っています。</p>
<h2>社内勉強会を継続開催してみた感想とメリット</h2>
<p>Frontend Weeklyは所属する組織・チームに関わらず、フロントエンドに興味ある社内メンバーが情報をキャッチアップできるきっかけの場になっています。ときには、社内の事情や歴史的経緯にも触れられ、情報に対する理解度が深まることもありました。</p>
<p>フロントエンドエキスパートチームは社内のフロントエンドを横断的に支援することが1つの役割になっています。この会を通して、チームと社内メンバーが繋がり、横断的な支援へのきっかけづくりになっています。</p>
<h2>Cybozu Frontend Monthlyとは？</h2>
<p><img src="/frontend-expert/image/frontendWeekly-And-Monthly/cybozuFrontendMonthly-ogp.png" alt="Cybozu Frontend Monthlyのアイキャッチ画像" width="659" height="229" ></p>
<p>Cybozu Frontend Monthlyは、フロントエンドエキスパートチームが月末にフロントエンド情報を発信するオンラインイベントです。</p>
<p>*YouTubeの<a href="https://www.youtube.com/watch?v=gujWyAmtzys&#x26;list=PLPTndynQK4dxLZFEZgOZjt_zKG-0JWoWy">アーカイブ一覧</a></p>
<p>コロナ禍によりフロントエンドエキスパートチームの社外発信が激減したことが、Cybozu Frontend Monthlyを開催するきっかけでした。</p>
<p>2020年7月に第1回目を開催し、2021年まで約1年間毎月開催することができています。</p>
<h3>社外勉強会を継続開催してみた感想とメリット</h3>
<p>Cybozu Frontend Monthlyはオンライン開催なので、オフラインでは獲得できないフロントエンドエキスパートチームの認知を得ることができました。実際に、コロナ禍の影響でオフラインでの関わりを作ることが難しかったインターン応募者の方達から「Cybozu Frontend Monthlyがきっかけでチームを知った」と声を聞くこともありました
また、フロントエンドエキスパートチームに中途入社するきっかけがCybozu Frontend Monthlyだったこともあります。</p>
<p>*<a href="https://nus3.com/fee-team/">サイボウズのフロントエンドエキスパートチームに入った話</a></p>
<p>2021年の途中からは他社のゲストの方を招いて開催もしました。
社外のフロントエンドエンジニアと交流のきっかけになり、オンライン放送後の雑談会では、情報交換を行うことができました。</p>
<p>これまでに公開した動画の再生回数は平均約500回程度と、多くの方に観ていただくことができました。</p>
<h2>勉強会を継続開催していくために工夫してきたこと</h2>
<p>勉強会を開催してきた中で一番大事だったことは、「継続すること」でした。
社内勉強会の参加人数が少ないときは3人だったこともありますが、会を閉じずに開催することで、興味ある人が戻ってきました。継続していなければ、社内の場がなくなってしまい、機会がなくなるところでした。</p>
<p>継続開催するために、定期的に振り返りを行い、運営のコストを下げ、継続しやすい環境にする工夫をしてきました。
具体的には次のような改善がありました。</p>
<ul>
<li>司会を運営メンバーでローテーションする</li>
<li>準備を運営メンバーで分担する</li>
<li>開催時間を参加者しやすい時間にする</li>
</ul>
<p>また、サイボウズには社外発信などのイベントをサポートしてくれる<a href="https://blog.cybozu.io/entry/2020/12/24/110000">コネクト支援</a>チームがいます。このチームがCybozu Frontend Monthlyの配信周りをサポートしてくれたので、フロントエンドエキスパートチームはコンテンツ準備と当日オンライン上で話すことに集中することができました。</p>
<h2>おわりに</h2>
<p><a href="https://jser.info/">JSer.info</a>、技術記事をアウトプットしてくれている方、Frontend WeeklyとCybozu Frontend Monthlyのゲストに参加してくれた方、視聴者の方、多くの方達のおかげで継続ができています。ありがとうございます！</p>
<p>これからも継続的に情報発信を続けていきます。</p>


<p>こんにちは、サイボウズフロントエンドエキスパートチームの<a href="https://twitter.com/__sosukesuzuki">@__sosukesuzuki</a>です。</p>
<p>サイボウズには<a href="https://blog.cybozu.io/">Cybozu Inside Out</a>という技術ブログがあります。
それとは別に、この度フロントエンドエキスパートチームとしてウェブサイトを開設することにしました。</p>
<p>この記事では、このウェブサイトを開設することになった経緯と目的、使用した技術について説明します。</p>
<h2>経緯</h2>
<p>フロントエンドエキスパートチームでは、チームでのコミュニケーションの促進を主な目的としてハッカソンを開催することがあります。
(チームでのハッカソンについては<a href="https://blog.cybozu.io/entry/2021/02/25/133039">Cybozu Inside Out に投稿されている記事</a>をご覧ください)</p>
<p>そのようなハッカソンで、フリーテーマの回がありました。
そこで、<a href="https://twitter.com/__sakito__">Sakito</a>さんと<a href="https://twitter.com/b4h0_c4t">BaHo</a>さんと<a href="https://twitter.com/__sosukesuzuki">sosukesuzuki</a>(私)のチームでは、フロントエンドエキスパートチームのウェブサイトを作ってみることにしました。</p>
<p>ハッカソンの期間内に完成することはありませんでしたが、チームとしてウェブサイトを持っていた方が良いということで合意が得られたので、ハッカソン終了後も開発を継続することにしました。</p>
<h2>目的</h2>
<p>フロントエンドエキスパートチームの活動を多くの人に知ってもらうためです。</p>
<p>フロントエンドエキスパートチームでは、日頃から様々なフロントエンド技術の啓蒙活動を行っています。
それらの多くはクローズドな場所で行われています。しかし基本的にその内容はサイボウズ特有のものではなく、一般的に有用な情報です。</p>
<p>そこで、フロントエンドエキスパートチームとしてウェブサイトを開設し、公開できる有用な情報は公開することにしました。</p>
<p>このウェブサイトを通して、フロントエンドエキスパートチームに興味を持ってくれたら嬉しいです。</p>
<h2>技術</h2>
<p>次の要件を満たす技術として、<a href="https://github.com/vercel/next.js">Next.js</a> を採用しました。</p>
<ul>
<li>環境構築が簡単である
<ul>
<li>もともとハッカソンで開発していたので、環境構築に多くの時間を割けないという事情がありました。</li>
</ul>
</li>
<li>SSG の機能を備えている
<ul>
<li>すべてのコンテンツは静的なものと決まっていたので、SSG ができると嬉しい</li>
</ul>
</li>
<li>TypeScript との相性が良い</li>
</ul>
<p>記事は Markdown として管理して Next.js の <code>getStaticProps</code> のタイミングで <a href="https://github.com/remarkjs/remark">remark</a> を使って HTML に変換しています。</p>
<p>また、ブログの機能を持つので、feed の生成と記事ごとの OGP 画像の生成をのためのスクリプトをそれぞれ用意しました。feed 生成スクリプトは、記事データの Markdown からメタデータを取得し、XML ファイルを書き出します。
OGP 画像生成スクリプトは、記事データの Markdown からタイトルを取得し、<a href="https://github.com/puppeteer/puppeteer">Puppeteer</a> で画像を生成します。</p>
<p>ホスティングには GitHub Pages を使っています。GitHub で管理している HTML をホストする先としてはやはり楽です。</p>
<p>実装はすべて <a href="https://github.com/cybozu/frontend-expert">https://github.com/cybozu/frontend-expert</a> で公開しています。</p>
<h2>おわりに</h2>
<p>これから、不定期ではありますが、当サイトにてフロントエンドに関連する情報を発信していく予定です。ぜひ読んでみてくださいね。</p>


Announcement