2021年9月14日に正式リリースしたKARTE Blocksの裏側を紹介する連載の第一弾です。
KARTE Blocksを支える技術とその技術を選んだ理由について紹介します。

KARTE Blocksを支える技術

プレイドの dev インターンに参加した記録をまとめました！

PLAIDのインターンでやったこと ~ KARTE接客の施策の基盤改善の試み | PLAID engineer blog

PLAIDのインターンでやったこと ~ KARTE接客の施策の基盤改善の試み

<h1>はじめに</h1>
<p>こんにちは！５月初旬から７月末までの３ヶ月間、ソフトウェア開発のインターンとして株式会社PLAIDで働いていた西村悠です。私はカナダにあるUBC (The University of British Columbia) の2年生です。専攻はコンピュータサイエンスで、以前にソフトウェアエンジニアとして働いた経験がありましたが、学生としてやる個人プロジェクトや他のインターンで扱うシステムには限りがあり、どことなく自分のスキルや経験に自信が持てずにいました。そこで私は、ソフトウェアエンジニアリングのスキルを加速させる素晴らしい機会を期待して、SaaSのプロダクトを持つPLAIDのインターンシップに応募しました。</p>
<p>実際、今回のインターンシップは、私のスキルを向上させ、伸ばすことができたと確信していますし、この経験は私の財産になると思っています。今日は、どのようにインターンが進んでいったのか、私が所属するチームで行ったこと、PLAIDのカルチャーについてお話します。</p>
<h1>PLAIDのプロダクト</h1>
<h4>KARTEについて</h4>
<p>PLAIDのメインプロダクトはKARTEと呼ばれる、CX（顧客体験）プラットフォームを提供するSaaSです。KARTEは、実店舗と同じように人間が実際に接客しているかのようなCS（顧客サービス）をwebsite上で実現します。ユーザーの行動データをリアルタイムに可視化し、ウェブサイトを管理する人が自分たちのサービスをより良く更新できるようにします。</p>
<h4>KARTEのミッション</h4>
<p>この製品は、顧客サービスを必要とするすべてのビジネスに使用できると考えています。ある企業では既存のWebサイトのCXを向上させるためにKARTEを使うかもしれませんし、ある企業は実店舗ではなくWebサイトで新しいビジネスを始めるためにKARTEを使うかもしれません。KARTEは、インターネットを利用したあらゆる顧客サービスをサポートしてくれます。このように、KARTEには壮大なミッションとスケールの可能性があります。<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/d386e02f-ced1-4dfd-a77d-227751ad7471/----------2021-07-30-12.08.25.png" alt="----------2021-07-30-12.08.25"><br>
KARTE</p>
<h1>KARTE Messageチームにジョイン</h1>
<h4>ジョインしたチーム</h4>
<p>PLAIDでのインターンシップでは、KARTEの機能を開発するチームにジョインします。私はKARTE Message チームにジョインしました。私たちのチームでは、KARTEのメッセージプラットフォームを開発しています。このプラットフォームでは、クライアントが独自のメールマーケティングのコンテンツやユーザーリストを作成し、多くの顧客にメッセージを送信することができます。この製品のおかげで、企業のマーケティング担当者はKARTEのデータを活用して、独自のマーケティング戦略を立てることができます。私たちのプロジェクトは、KARTEのユーザーにこのようなエンド・ツー・エンドの体験を提供することを目的としています。</p>
<h4>チーム内技術スタック</h4>
<p>Messageチームで扱っていた主な技術スタックとして、Vue.jsとNode.jsがフロントエンド、バックエンドそれぞれにTypescriptで書かれていて、インフラはKubernetesやTerraformを使って管理していました。また、多くのCloud Serviceも使用していて、AWSのSES, S３や、GCPのGKE, Big Query, Spanner, Pubsub, Cloud Function, Cloud Run, Cloud Buildなどを扱っています。</p>
<p>特にMessageチームが他のチームと違うところは、KARTEの管理画面を動かしているKubernetesクラスターとは別の配信基盤用のクラスターを用意していて、スケーリングやCI/CDが独自に設定されているところです。</p>
<p>このような環境のため、私はフロントエンドやバックエンドのような典型的な開発から始まり、インフラ側（CI/CDのためのオペレーション）やいくつかの分散システムに至るまで、様々な種類の仕事を任せてもらうことができました。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/674d8570-6c45-4b4c-9b7f-fc669179d3e9/IMG_2483.JPG.jpg" alt="IMG_2483"><br>
Message チームの島</p>
<h1>インターン初日 ~ 1ヶ月</h1>
<h4>最初の1週間</h4>
<p>チームにジョインしてすぐはPLAIDの開発環境、開発サイクルやチームで扱うシステムに慣れるために細かいバグを修正するタスクが与えられ、それに従事していました。なるべく早くKARTE全体のシステム設計や技術スタック、チームの課題などをキャッチアップするためにレコードされていた解説動画やメンターの方とのコミニュケーションを積極的に行いました。２週間ほど経ち、基本的な開発フローに慣れてきたところで徐々にタスクの難易度が高くなっていきました。</p>
<h4>テスト配信</h4>
<p>最初の1ヶ月で印象的だったタスクは、テスト送信機能です。会社のマーケターは、施策を作った後、最初にエンドユーザーにマーケティング広告を送るわけではありません。その代わりに、テスト送信を行い、メッセージ内容についてのフィードバックをテスト送信先から得るのです。メッセージサービスを利用したことのある方は、テスト送信ボタンがあることをご存知だと思います。私はこの仕事を任されました。難易度が上がった初めての課題で、自分の技術力とKARTEの理解度が試されているようでした。</p>
<h4>解決アプローチ</h4>
<p>ページのバグを修正するような単純な作業とは異なり、コーディングだけでなく、問題を解決するための論理的な道筋を立てる能力が求められました。例えば、どんなデータが必要なのか、そのデータはどこから来るのか、どうやってデータを入手するのか、データにアクセスするためにはどんな情報やトークンが必要なのか、といったことを考える必要がありました。そして、この問題の要件を見つけ出した後、実装の方針を決めます。このようなプロセスは、問題を解決する上であらゆる状況に応用できると思いました。</p>
<h4>使用したスキル</h4>
<p>具体的なテクノロジースタックとしては、Vue.jsでUIを作り、Node.jsでAPIリクエスト用のエンドポイントを作りました。また、メールはAmazon SES、ネイティブプッシュはFirebase Cloud Messagingといった外部サービスとの連携も必要で、それぞれのサービスのAPIを理解し活用できるようになりました。このタスクでは、KARTE Messageのページがどのように構成されているのか、KARTE Messageのシステムがどのように送信機能を得ているのかを理解することができました。また、これまでの経験で培ってきたWeb開発のスキル（フロントエンド・バックエンド）が活かすことができ、自分のスキルがある程度通じると思える自信を持つことができました。</p>
<h1>２ヶ月 ~ ３ヶ月</h1>
<h4>残り1ヶ月</h4>
<p>インターンシッププログラムが進むにつれて、扱う課題は難しく、挑戦的なものになっていきました。これらの課題はすべて、ソフトウェアエンジニアリングの理論を包括的に理解し、複数のスキルを組み合わせて適用することが求められます。特にインターンが残り１ヶ月となってからは抽象度の高いタスクを扱いました。その１つとして、送信のためのエンド・ツー・エンド・テスト（E2Eテスト）を実装するという課題をやりました。</p>
<h4>E2Eテスト</h4>
<p>ペースの速い開発では、コードの一部が何度も変更され、それがシステムの正常な動作を脅かします。この観点から、E2Eテストは、KARTEメッセージの機能を保証するために、私たちの製品にとってとても重要でした。このテストを作成するためには、KARTE上のシステムの多くの相互作用を考慮しなければなりませんでした。また、調査、設計、技術の選択、コーディング、テスト、パイプラインの構築など、総合的なソフトウェアエンジニアリングが必要となりました。私は実際に様々な技術やツールを使いました。UIテストにはCypress、分散システム間のやりとりには内部APIサービス、サーバーの設定にはTerraform、CI/CDパイプラインにはArgoCD、Kubernetes、Cloud Buildを使用しました。</p>
<h4>苦労した点</h4>
<p>課題の中で特に難しかったのは、E2Eテストのジョブをどのように実行するかでした。メッセージ配信プラットフォームのシステムは、ユーザーデータや管理ページを保存するプログラムとは異なる環境で動作しています。しかし、E2Eテストのプログラムはユーザーデータを扱う必要があるため、管理画面上で実行する必要があります。２つの別々のネットワーク内で動いているプログラム間で通信する必要があったため、この問題を解決するには、ネットワークやKubernetesの知識が必要でした。</p>
<p>私はそこまでKubernetesを使った開発をした経験がなかったため、その環境に慣れるためにかなり苦労しました。配信基盤で動かしているKubernetesクラスターのmanifestを読んでどのように各リソースが動いているのか、KubernetesのリソースをGCPのアカウントと紐づけるためにどのようにTerraformを書かないといけないのか、など新しく学んだことはたくさんありました。そうすることで、初めてKubernetesクラスター内でのネットワークを理解できるようになり、上記の問題が理解できるようになりました。</p>
<h4>最終解決案</h4>
<p>解決策として異なるクラスター間の通信は権限的に難しいということが分かり、問題をシンプルにするために管理画面を通したE2Eを実行できるようにしました。E2Eテスト実行用のページを用意してあげれば、HTTPによる通信で実行できるようになり、クラスター間の権限を考慮しなくて良くなりました。この時に改めてシンプルな設計をすることの重要性に気付かされました。</p>
<p>このタスクは、もちろん1人ではなく、多くの社員さんの協力を得ることで実装できました。彼らの助けがなければ、この課題を解決することはできませんでした。逆に言えば、どのようにして他の人を巻き込んで協力を得るべきかということの大切さを知り、それを実践する良い機会になりました。E2Eテストの実装を通してKARTEの複合的で複雑なシステムと、PLAIDのクラウド運用技術に精通する良い機会となりました。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/afc835f3-074f-41e0-8407-c9b52b64d4b2/----------2021-07-30-18.04.16.png" alt="----------2021-07-30-18.04.16"><br>
実際のディスカッションボード</p>
<h1>PLAIDインターンシップの文化</h1>
<h4>PLAIDエンジニアのレベル</h4>
<p>PLAIDでのインターンシップは、私のこれまでの経験の中でも最高に素晴らしいものだったと強く言いたいです。この素晴らしい機会は、PLAIDの職場環境が生み出しているのだと思います。その一つがエンジニアの質です。PLAIDは急成長しているスタートアップで、フルタイムのポジションに就くのはとても難しいです。そのため、PLAIDにいるほとんどのエンジニアは他のソフトウェア会社でリードエンジニアとして活躍できるくらいの技術力があり、PLAIDではどの分野でも最低1人はスペシャリストがいるような環境になります。このような高いレベルの人材は、インターンシップの学生にとっては、スペシャリストとのコミュニケーションが可能になり、彼らから大きな学びの機会を得ることができるため、貴重な存在となるでしょう。</p>
<h4>PLAIDインターンの価値</h4>
<p>また、PLAIDが素晴らしい職場環境であるもう一つの理由として、学生が会社の実際の製品の実装を担当するというインターンシップは他に代えがたいものでした。KARTEには何百万人ものエンドユーザーがいて、システムは何先万ものリアルタイムのユーザーデータを扱っています。この膨大なデータはPLAIDの財産であり、学生がこの本物の顧客データに触れることは他の会社ではめったにありません。私の場合は、何百万人ものユーザーに使われることを想定して実装を考えなければならないので、スケーリングを考慮したコーディングを行う貴重な機会となりました。</p>
<h1>インターンを振り返って</h1>
<p>ご存知のように、PLAIDのインターンでは、エンジニアリングの質とスピードの面で高いレベルが要求されます。このような目標を達成するのは難しいと思うかもしれませんが、PLAIDでのインターンシップを終えた後には、自分のエンジニアとしてのスキルやキャリアに自信を持てるようになることを絶対に約束します。実際、私はこの経験によって、自分の開発力が次の段階に進み、今後どのようなシステムを扱うことになっても心配する必要がないという自信を持つことができました。</p>
<p>チームメンバーの大逸さんや山本さん、塩澤さんをはじめとする社員の皆さん、同僚インターン生の皆さんには感謝の言葉しかありません。3ヶ月間のインターンは短く感じましたが、充実した時間を過ごすことができました。これからのPLAIDの成長がとても楽しみです！<br>
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/a43df00d-d8a3-4a66-b43e-5a266bdc37ad/DSC04309.jpg" alt="DSC04309"><br>
チームの写真</p>
<h1>最後に</h1>
<p>CX（顧客体験）プラットフォーム「<a href="https://karte.io/">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。<br>
詳しくは<a href="https://meet.plaid.co.jp/">弊社採用ページ</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>


こんにちは！５月初旬から8月までの３ヶ月間、ソフトウェア開発のインターンとして株式会社PLAIDで働いていた西村悠です。PLAIDでのインターンの模様をブログにしました！