1,100 超えコンポーネントの Jade / Pug テンプレートを移行した話 | PLAID engineer blog

1,100 超えコンポーネントの Jade / Pug テンプレートを移行した話

<html><head></head><body><p>こんにちは！プレイドのエンジニア採用/技術広報を担当しているmattyです。今回、2019/6/27(木)に完全招待制の技術イベント『#PlaidTechLounge』を開催しました。</p>
<p>プレイド主催での技術イベントは半年前の<a href="https://blog-plaid.com/event/5285/" target="_blank" rel="noreferrer">#PlaidTechMeetup</a>以来です。</p>
<p>今回は、前回の反省を踏まえ、『ゲストの方が自由にLTを選べて、話したい人と話せる』ように意識しました！<br>
この記事では、イベントの様子をお伝えしていきます。</p>
<h1 id="オープニング">オープニング</h1>
<p>今回の司会は、ポッドキャスト『しがないラジオ』パーソナリティであり、『完全SIer脱出マニュアル』の著者でもあるgamiさん。もはやプレイドの技術イベントではお馴染みです笑<br>
そのgamiさんからPlaid、リアルタイムユーザー解析プラットフォーム「<a href="https://karte.io/" target="_blank" rel="noreferrer">KARTE</a>」、当日のLTについて紹介！<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/bddc740e-ff8d-4b28-bba7-c6f5d45809d1/iOS------6-.jpg" alt="iOS------6-"></p>
<p>今回のLTは5つのテーマを用意。各登壇者からも一言ずつコメントをもらいました！</p>
<div class="TableScroll"><table>
<thead>
<tr>
<th>登壇者</th>
<th>タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://twitter.com/tarr1124" target="_blank" rel="noreferrer">@tarr1124</a></td>
<td>KARTEの解析部分のアーキテクチャ</td>
</tr>
<tr>
<td><a href="https://twitter.com/otoan52" target="_blank" rel="noreferrer">@otoan52</a></td>
<td>2016年からサービスインしているPush APIサービスのノウハウ</td>
</tr>
<tr>
<td><a href="https://twitter.com/kadoppe" target="_blank" rel="noreferrer">@kadoppe</a></td>
<td>フラット型組織におけるエンジニアリングマネージメント</td>
</tr>
<tr>
<td><a href="https://github.com/komukomo" target="_blank" rel="noreferrer">@komukomo</a></td>
<td>大規模なモノリシック・サービスを分割する理由と方針</td>
</tr>
<tr>
<td><a href="https://twitter.com/yohei_meguro" target="_blank" rel="noreferrer">@yohei_meguro</a></td>
<td>はじめて1人チームで開発をするあなたへ</td>
</tr>
</tbody>
</table></div>
<h1 id="LT&amp;懇親会">LT&amp;懇親会</h1>
<p>早速、LT&amp;懇親会スタートです。</p>
<p>今回、『ゲストの方が自由にLTを選べて、話したい人と話せる』を意識したので、タイムスケジュールや会場を工夫しました。</p>
<ol>
<li>LTと懇親会の時間はあえて分けず、LT中も懇親会エリアを解放したことで、好きな時間にLTを聞き、好きなタイミングでプレイド社員と話せるように！</li>
<li>LTのテーマ数を絞り、LT間の休憩時間を設け、自由に動けて話せる時間を多めに確保！</li>
<li>LTエリアと懇親会エリアの物理的な距離を取り、話に集中できるように会場設営！</li>
</ol>
<p>イベントによって会場を工夫できるのもプレイドの『<a href="https://blog.plaid.co.jp/n/n9e2a3faf72d7" target="_blank" rel="noreferrer">完成しないオフィス</a>』ならでは！</p>
<h2 id="食事">食事</h2>
<p>今回は、<a href="https://tomo-foodsense.com/profile/" target="_blank" rel="noreferrer">FOOD SENSE</a>さんにケータリングをお願いしました。<br>
味はもちろん、見た目もとてもおしゃれで素敵です！<br>
串がついていて手が汚れない配慮までされていて、満足度がかなり高かったです。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/ef4a02b2-fe46-4bd3-8637-fbc47ae4f242/iOS------1-.jpg" alt="iOS------1-"><br>
余談ですが、あっという間になくなってしまったので、お寿司を30人前追加発注しました…笑</p>
<h2 id="LT">LT</h2>
<p>プレイドのエンジニアからテーマ別に発表！<br>
それぞれ簡単にどのようなことを話したのかコメントを記載しています。</p>
<h3 id="KARTEの解析部分のアーキテクチャ">KARTEの解析部分のアーキテクチャ</h3>
<pre><code class="hljs">SREチームのtarrさん
KARTEによって解析されたデータがどのように格納されるのか、という流れで
トラッキングと解析部分のアーキテクチャを話しました。
</code></pre>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/f9ecefdb-30ee-434b-9eff-33e6c8ccd5aa/iOS------5-.jpg" alt="iOS------5-"></p>
<h3 id="2016年からサービスインしているPush APIサービスのノウハウ">2016年からサービスインしているPush APIサービスのノウハウ</h3>
<pre><code class="hljs">i18nチームのotoanさん
Push APIとその前提となるService Workerについて、
機能やその背景などを解説し、Push通知機能をサービスインするにあたり難しかった点について簡単に解説しました。
Service Workerについて知っている方も思ったより多かったようなので、
もう少し突っ込んだ話もいずれできるといいですね。
</code></pre>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/d7675ccc-c0f6-4b7c-bae7-395d0bb449fc/iOS------2-.jpg" alt="iOS------2-"></p>
<h3 id="フラット型組織におけるエンジニアリングマネージメント">フラット型組織におけるエンジニアリングマネージメント</h3>
<pre><code class="hljs">Head of Engineeringのkadoppeさん
世界に通用する強いプロダクトを作るために、プレイドのエンジニアチームで大事だと考えている
考え方やスタンスについてお話ししました。
</code></pre>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/13aa3416-172f-451c-9d65-fc8a4f8d9318/iOS------4-.jpg" alt="iOS------4-"></p>
<h3 id="大規模なモノリシック・サービスを分割する理由と方針">大規模なモノリシック・サービスを分割する理由と方針</h3>
<pre><code class="hljs">Performanceチームのkomaさん
１つのリポジトリで大きく成長したモノリシックなアプリケーションを分割し運用基盤を移行している話をベースに、
その分割の方針や、悩んだポイントとその対応策などについてお話しました。
</code></pre>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/4464fd94-c2bb-4f8a-aec1-c7dd4febb830/MVIMG_20190627_210432.jpg" alt="MVIMG_20190627_210432"></p>
<h3 id="はじめて1人チームで開発をするあなたへ">はじめて1人チームで開発をするあなたへ</h3>
<pre><code class="hljs">1人チームを卒業したguroさん笑
2ヶ月間1人チームで開発していたので、その時に感じた落とし穴やその乗り越え方についてお話させていただきました。
「ヒトとコトの分離が難しい」というスライドに多くの共感をいただけました。
</code></pre>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/296bbb0d-ef27-4632-9754-eb6c531e79c8/iOS------3-.jpg" alt="iOS------3-"><br>
ゲストの方で1人チームを経験している方も多かったので、このスライドがこの日一番の笑いと共感を得ていましたね笑</p>
<p>今回、LTと懇親会を並行して行ってみて、多くの方がLTに集まってくれました。<br>
懇親会エリアと距離があったので、みなさん真剣に話を聞いてくれていた印象です。<br>
LT枠はそれぞれ10分でしたが、質問も多く飛び交い、枠をはみ出るほど、どのテーマも盛り上がりを見せていたのは素直に良かったです。</p>
<h2 id="懇親会">懇親会</h2>
<p>懇親会エリアでは、それぞれのLTテーマについて話したり、そこから更に深い技術の話へ発展したり、ボードゲームをやるグループまで様々!<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/04a7878c-5d0e-44e7-8269-cfd4a71629cc/iOS------7-.jpg" alt="iOS------7-"><br>
懇親会後、元々知り合いではなかったプレイドメンバーとゲストで「今度別でご飯行きましょー！」という声も上がっていたのは嬉しかったですね。</p>
<h1 id="最後に">最後に</h1>
<p>参加された皆さんの声や一部資料が#PlaidTechLoungeで、<a href="https://twitter.com/search?f=tweets&amp;q=%23PlaidTechLounge&amp;src=typd" target="_blank" rel="noreferrer">Twitter</a>から見ることができます。ぜひご覧ください！</p>
<p>今回、来ていただいたゲストのみなさま、ありがとうございました！<br>
今後も定期的にプレイドの技術発信の場を作っていきたいと思っています。</p>
<p>内容もどんどん濃くして、より良い場にしていければと思っていますので、引き続きよろしくお願い致します。</p>
<hr>
<p>リアルタイムユーザー解析プラットフォームの「<a href="https://karte.io/" target="_blank" rel="noreferrer">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。</p>
<p>詳しくは弊社<a href="https://plaid.co.jp/recruit.html" target="_blank" rel="noreferrer">採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects" target="_blank" rel="noreferrer">Wantedly</a>をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！</p>
</body></html>

技術イベント 『#PlaidTechLounge』を開催しました！

<p>こんにちは、PLAIDのエンジニアの<a href="https://twitter.com/jumpei_ikegami">gami</a>です。<a href="https://twitter.com/search?vertical=default&amp;q=%23%E3%81%97%E3%81%8C%E3%81%AA%E3%81%84%E3%83%A9%E3%82%B8%E3%82%AA&amp;src=tyah">趣味はポッドキャスト配信</a>です。</p>
<p>さて、先日2019/6/10(月)に、縁あってDeNAさん、Google Cloud Japanさんと共同でクローズドなGCP勉強会を開催しました。</p>
<p>PLAIDではリアルタイムユーザー解析サービス「<a href="https://karte.io/">KARTE</a>」の開発や提供に、GCPの各種サービスをヘビーに使っています。今回の勉強会では、同じく様々な事業でGCPを早くから採用してきたDeNAさんと、有意義なディスカッションをすることができました。</p>
<p>この記事では、そんなGCP勉強会の様子をご紹介します。</p>
<h1>乾杯から始まる勉強会</h1>
<p>クローズドでカジュアルな勉強会ということで、集まっていきなり乾杯をしました。PLAIDの人工芝での開催なので、野外フェス感があります。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/a1961b43-1563-4eea-8ebe-83577f196e46/001-1.jpg" alt="001-1"></p>
<p>司会は、PLAIDのエンジニア採用担当のmattyが務めました。笑顔が渋い。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/68508977-32c3-4b3e-b836-0d54cebab974/002.jpg" alt="002"></p>
<h1>各社からのLT</h1>
<p>次に、PLAID、DeNA、Googleの3社それぞれから、LTがありました。</p>
<h2>PLAID</h2>
<p>PLAIDからは、CTOの牧野からKARTEの紹介やGCPを使うことで得られるメリットなどについて話しました。</p>
<ul>
<li>KARTEでは、BigtableやBigQueryを中心にGCPの導入が進み、最近はDataflow、Cloud Spannerなど使うサービスの種類も増えている</li>
<li>扱うデータ量が膨大になっており、BigQueryでのStreaming Insertで1PB/monthほど</li>
<li>解析数やデータ量が増えてもコストはそこまで増えていないという点で、GCPの恩恵を受けている</li>
</ul>
<h4>参考記事:</h4>
<ul>
<li><a href="https://codezine.jp/article/corner/711">大規模解析サービスを支えるGCP活用事例連載一覧：CodeZine（コードジン）</a></li>
<li><a href="https://www.youtube.com/watch?v=8UuiJjTW12Y">Plaid's Journey to Global Large-Scale Real-Time Analytics With Google BigQuery (Cloud Next '19) - YouTube</a></li>
</ul>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/00a4a01c-0f6e-4dec-8933-c65fbdb6b7e4/003.jpg" alt="003"></p>
<h2>DeNA</h2>
<p>DeNAの菅原さんからは、DeNA San FranciscoでGCPに出会ってから、DeNA内でGCPの利用が広がっていった歴史についてお話しいただきました。</p>
<ul>
<li>Mobage WestでGoogle App Engine Javaを利用し、Auto Scaleによる安定運用を実現できた</li>
<li>2016年頃から、日本のDeNAでも<a href="https://www.andapp.jp/">AndApp</a>などでGCPの利用を本格的に開始</li>
<li>現在では様々な事業で GCP は活用されており、『逆転オセロニア』や自社のAI学習基盤などのAI分野でもGCP活用の幅が広がっている</li>
</ul>
<h4>参考記事:</h4>
<ul>
<li><a href="https://cloudplatform-jp.googleblog.com/2019/03/DeNA-Advanced-Solutions-Lab-GCP.html">Advanced Solutions Lab で培った知見を踏まえ Google Cloud Platform 上に AI 基盤を構築。『逆転オセロニア』のプレイヤー体験を向上</a></li>
</ul>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/b241d38d-6179-4f5c-a8bc-d0ae4c9b64be/004.jpg" alt="004"></p>
<h2>Google Cloud Japan</h2>
<p>Google Cloud Japanの白川さんは、以前AWSでも働いていたことがあるとのことで、Amazon(AWS)とGoogle(GCP)を比較するというエッジの効いたトークをしていただきました。</p>
<ul>
<li>AWSは2006年にリリースされたS3から、GCPは2008年にリリースされたGAEから始まっている</li>
<li>Amazonの組織は一般にメンバーがセクションで明確に分かれているが、Googleはチームを超えて色々な人がつながっている</li>
</ul>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/24a49dce-9052-4cab-82e7-8b860679497b/005-1.jpg" alt="005-1"></p>
<h1>懇親会</h1>
<p>LTの後は、セミナースペースでお酒や食事を囲んで技術の話に花を咲かせました。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/018f0952-7ca3-498c-b1a8-50f7adca0b14/006.jpg" alt="006"></p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/2bf88d92-b961-4a80-a06f-45c8faed93bf/007.jpg" alt="007"></p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/a2d7555d-fcf0-40b2-9c5c-4bfc2a079663/008.jpg" alt="008"></p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/56a67f6a-8829-4c8c-966c-c99999b5d152/009.jpg" alt="009"></p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/d9c660df-0b30-4c88-b244-2f84dc09993d/010.jpg" alt="010"></p>
<h1>最後は集合写真！</h1>
<p>懇親会の最後は、参加者みんなで集合写真を撮りました。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/fbc3ed8b-7b40-4da7-9a24-62e9195efd77/011.jpg" alt="011"></p>
<p>普段、PLAIDのエンジニア同士で話すときはKARTEのアーキテクチャなどを暗黙の前提にしていることが多いです。今回は、全く違うサービスやアプリケーションを開発しているDeNAのエンジニアのみなさんと話すことで、かなり刺激を得ることができました。</p>
<p>このような技術交流の機会を定期的に持つことで、凝り固まった頭をほぐすことができてとても良いと思うので、ぜひまた開催したいです！</p>
<p>以上、GCP勉強会のイベントレポートでした。</p>
<p>なお、DeNAさん側でもこちらのイベントのレポートが公開されていました。あわせてご覧ください！</p>
<p><a href="https://engineer.dena.jp/2019/06/dena-plaid-googlecloud.html">DeNA x PLAID x Google Cloud 交流会を実施しました！ - Technology of DeNA</a></p>
<hr>
<p>リアルタイムユーザー解析プラットフォームの「<a href="https://karte.io/">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。</p>
<p>詳しくは<a href="https://plaid.co.jp/recruit/engineer.html">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects">Wantedly</a>をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://platform.wantedly.com/visit_buttons/script.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "wantedly-visit-buttons-wjs"));
</script>


2019/6/10(月)に、縁あってDeNAさん、Google Cloud Japanさんと共同でクローズドなGCP勉強会を開催しました。様々な事業でGCPを早くから採用してきたDeNAさんと、有意義なディスカッションをすることができました。

技術イベント 『#PlaidTechLounge』を開催しました！

技術イベント『#PlaidTechLounge』を開催しました！