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

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

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

<html><head></head><body><h1 id="はじめに">はじめに</h1>
<p>こんにちは！５月初旬から７月末までの３ヶ月間、ソフトウェア開発のインターンとして株式会社PLAIDで働いていた西村悠です。私はカナダにあるUBC (The University of British Columbia) の2年生です。専攻はコンピュータサイエンスで、以前にソフトウェアエンジニアとして働いた経験がありましたが、学生としてやる個人プロジェクトや他のインターンで扱うシステムには限りがあり、どことなく自分のスキルや経験に自信が持てずにいました。そこで私は、ソフトウェアエンジニアリングのスキルを加速させる素晴らしい機会を期待して、SaaSのプロダクトを持つPLAIDのインターンシップに応募しました。</p>
<p>実際、今回のインターンシップは、私のスキルを向上させ、伸ばすことができたと確信していますし、この経験は私の財産になると思っています。今日は、どのようにインターンが進んでいったのか、私が所属するチームで行ったこと、PLAIDのカルチャーについてお話します。</p>
<h1 id="PLAIDのプロダクト">PLAIDのプロダクト</h1>
<h4 id="KARTEについて">KARTEについて</h4>
<p>PLAIDのメインプロダクトはKARTEと呼ばれる、CX（顧客体験）プラットフォームを提供するSaaSです。KARTEは、実店舗と同じように人間が実際に接客しているかのようなCS（顧客サービス）をwebsite上で実現します。ユーザーの行動データをリアルタイムに可視化し、ウェブサイトを管理する人が自分たちのサービスをより良く更新できるようにします。</p>
<h4 id="KARTEのミッション">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 id="KARTE Messageチームにジョイン">KARTE Messageチームにジョイン</h1>
<h4 id="ジョインしたチーム">ジョインしたチーム</h4>
<p>PLAIDでのインターンシップでは、KARTEの機能を開発するチームにジョインします。私はKARTE Message チームにジョインしました。私たちのチームでは、KARTEのメッセージプラットフォームを開発しています。このプラットフォームでは、クライアントが独自のメールマーケティングのコンテンツやユーザーリストを作成し、多くの顧客にメッセージを送信することができます。この製品のおかげで、企業のマーケティング担当者はKARTEのデータを活用して、独自のマーケティング戦略を立てることができます。私たちのプロジェクトは、KARTEのユーザーにこのようなエンド・ツー・エンドの体験を提供することを目的としています。</p>
<h4 id="チーム内技術スタック">チーム内技術スタック</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 id="インターン初日 ~ 1ヶ月">インターン初日 ~ 1ヶ月</h1>
<h4 id="最初の1週間">最初の1週間</h4>
<p>チームにジョインしてすぐはPLAIDの開発環境、開発サイクルやチームで扱うシステムに慣れるために細かいバグを修正するタスクが与えられ、それに従事していました。なるべく早くKARTE全体のシステム設計や技術スタック、チームの課題などをキャッチアップするためにレコードされていた解説動画やメンターの方とのコミニュケーションを積極的に行いました。２週間ほど経ち、基本的な開発フローに慣れてきたところで徐々にタスクの難易度が高くなっていきました。</p>
<h4 id="テスト配信">テスト配信</h4>
<p>最初の1ヶ月で印象的だったタスクは、テスト送信機能です。会社のマーケターは、施策を作った後、最初にエンドユーザーにマーケティング広告を送るわけではありません。その代わりに、テスト送信を行い、メッセージ内容についてのフィードバックをテスト送信先から得るのです。メッセージサービスを利用したことのある方は、テスト送信ボタンがあることをご存知だと思います。私はこの仕事を任されました。難易度が上がった初めての課題で、自分の技術力とKARTEの理解度が試されているようでした。</p>
<h4 id="解決アプローチ">解決アプローチ</h4>
<p>ページのバグを修正するような単純な作業とは異なり、コーディングだけでなく、問題を解決するための論理的な道筋を立てる能力が求められました。例えば、どんなデータが必要なのか、そのデータはどこから来るのか、どうやってデータを入手するのか、データにアクセスするためにはどんな情報やトークンが必要なのか、といったことを考える必要がありました。そして、この問題の要件を見つけ出した後、実装の方針を決めます。このようなプロセスは、問題を解決する上であらゆる状況に応用できると思いました。</p>
<h4 id="使用したスキル">使用したスキル</h4>
<p>具体的なテクノロジースタックとしては、Vue.jsでUIを作り、Node.jsでAPIリクエスト用のエンドポイントを作りました。また、メールはAmazon SES、ネイティブプッシュはFirebase Cloud Messagingといった外部サービスとの連携も必要で、それぞれのサービスのAPIを理解し活用できるようになりました。このタスクでは、KARTE Messageのページがどのように構成されているのか、KARTE Messageのシステムがどのように送信機能を得ているのかを理解することができました。また、これまでの経験で培ってきたWeb開発のスキル（フロントエンド・バックエンド）が活かすことができ、自分のスキルがある程度通じると思える自信を持つことができました。</p>
<h1 id="２ヶ月 ~ ３ヶ月">２ヶ月 ~ ３ヶ月</h1>
<h4 id="残り1ヶ月">残り1ヶ月</h4>
<p>インターンシッププログラムが進むにつれて、扱う課題は難しく、挑戦的なものになっていきました。これらの課題はすべて、ソフトウェアエンジニアリングの理論を包括的に理解し、複数のスキルを組み合わせて適用することが求められます。特にインターンが残り１ヶ月となってからは抽象度の高いタスクを扱いました。その１つとして、送信のためのエンド・ツー・エンド・テスト（E2Eテスト）を実装するという課題をやりました。</p>
<h4 id="E2Eテスト">E2Eテスト</h4>
<p>ペースの速い開発では、コードの一部が何度も変更され、それがシステムの正常な動作を脅かします。この観点から、E2Eテストは、KARTEメッセージの機能を保証するために、私たちの製品にとってとても重要でした。このテストを作成するためには、KARTE上のシステムの多くの相互作用を考慮しなければなりませんでした。また、調査、設計、技術の選択、コーディング、テスト、パイプラインの構築など、総合的なソフトウェアエンジニアリングが必要となりました。私は実際に様々な技術やツールを使いました。UIテストにはCypress、分散システム間のやりとりには内部APIサービス、サーバーの設定にはTerraform、CI/CDパイプラインにはArgoCD、Kubernetes、Cloud Buildを使用しました。</p>
<h4 id="苦労した点">苦労した点</h4>
<p>課題の中で特に難しかったのは、E2Eテストのジョブをどのように実行するかでした。メッセージ配信プラットフォームのシステムは、ユーザーデータや管理ページを保存するプログラムとは異なる環境で動作しています。しかし、E2Eテストのプログラムはユーザーデータを扱う必要があるため、管理画面上で実行する必要があります。２つの別々のネットワーク内で動いているプログラム間で通信する必要があったため、この問題を解決するには、ネットワークやKubernetesの知識が必要でした。</p>
<p>私はそこまでKubernetesを使った開発をした経験がなかったため、その環境に慣れるためにかなり苦労しました。配信基盤で動かしているKubernetesクラスターのmanifestを読んでどのように各リソースが動いているのか、KubernetesのリソースをGCPのアカウントと紐づけるためにどのようにTerraformを書かないといけないのか、など新しく学んだことはたくさんありました。そうすることで、初めてKubernetesクラスター内でのネットワークを理解できるようになり、上記の問題が理解できるようになりました。</p>
<h4 id="最終解決案">最終解決案</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 id="PLAIDインターンシップの文化">PLAIDインターンシップの文化</h1>
<h4 id="PLAIDエンジニアのレベル">PLAIDエンジニアのレベル</h4>
<p>PLAIDでのインターンシップは、私のこれまでの経験の中でも最高に素晴らしいものだったと強く言いたいです。この素晴らしい機会は、PLAIDの職場環境が生み出しているのだと思います。その一つがエンジニアの質です。PLAIDは急成長しているスタートアップで、フルタイムのポジションに就くのはとても難しいです。そのため、PLAIDにいるほとんどのエンジニアは他のソフトウェア会社でリードエンジニアとして活躍できるくらいの技術力があり、PLAIDではどの分野でも最低1人はスペシャリストがいるような環境になります。このような高いレベルの人材は、インターンシップの学生にとっては、スペシャリストとのコミュニケーションが可能になり、彼らから大きな学びの機会を得ることができるため、貴重な存在となるでしょう。</p>
<h4 id="PLAIDインターンの価値">PLAIDインターンの価値</h4>
<p>また、PLAIDが素晴らしい職場環境であるもう一つの理由として、学生が会社の実際の製品の実装を担当するというインターンシップは他に代えがたいものでした。KARTEには何百万人ものエンドユーザーがいて、システムは何先万ものリアルタイムのユーザーデータを扱っています。この膨大なデータはPLAIDの財産であり、学生がこの本物の顧客データに触れることは他の会社ではめったにありません。私の場合は、何百万人ものユーザーに使われることを想定して実装を考えなければならないので、スケーリングを考慮したコーディングを行う貴重な機会となりました。</p>
<h1 id="インターンを振り返って">インターンを振り返って</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 id="最後に">最後に</h1>
<p>CX（顧客体験）プラットフォーム「<a href="https://karte.io/" target="_blank" rel="noreferrer">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。<br>
詳しくは<a href="https://meet.plaid.co.jp/" target="_blank" rel="noreferrer">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects" target="_blank" rel="noreferrer">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>
</body></html>

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

カナダから海を渡って辿り着いたPLAIDインターン | PLAID engineer blog

カナダから海を渡って辿り着いたPLAIDインターン

<p>この度、PLAIDは<a href="https://github.com/sponsors">GitHub Sponsors</a>を利用してOSS(オープンソースソフトウェア)にスポンサーしました！</p>
<figure><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/8be40299-62fb-48e6-ae0c-8268a94414d2/image-2.png" /><figcaption><a href="https://github.com/sponsors">GitHub Sponsors</a></figcaption></figure>
<h2>OSSにスポンサーするモチベーション</h2>
<h3>利用しているOSSの持続</h3>
<p>OSSに対して金銭的な支援をすることは、OSSの作者やOSSの開発をリードする人、そしてOSSで活動するチームに対して継続的な活動を支援できることを意味します。</p>
<p>私達が利用しているOSSは様々な規模なものがあります。個人で開発した特定の問題解決にフォーカスしたライブラリやツールのような小さい規模のもの、そして、フレームワーク、SDK、ToolKit、データベース、そしてプログラミング言語といった大きい問題を解決するために提供されている大規模なものまで。</p>
<p>OSSは使うユーザーが増えてくるとOSSの成長とともに、機能追加、改善、バグ修正などの開発の他に、ドキュメントの整備やissues のトリアージュといったメンテナンスに関する活動、そしてカンファレンスイベント登壇やワークショップなどの啓蒙活動等に関わる時間が増えてきます。</p>
<p>OSSの開発やメンテナンスに関わる時間は、会社で業務時間を使って活動できているところもありますが、ほとんどはOSSに関わる人たちのボランタリーベースによって活動が続けられています。</p>
<p>OSSの規模が小さい場合は、OSS作者一人や、ボランタリーなチームメンバーやコントリビューターによって何とかなりますが、OSSが成長するに従い誰かしらフルタイムで対応する時間が必要になってきます。</p>
<p>そうしたOSSにフルタイム活動できる支援がないと、OSSは持続が厳しくなり徐々に衰退していきます。これは利用しているOSSユーザーにとって不幸なことです。</p>
<h3>価値あるプロダクトの提供を持続させる</h3>
<p>昨今、プレイドを含めた私達IT業界が提供しているプロダクトは、OSSを利用してエンドユーザーに価値を提供されていることが一般的になりつつあります。</p>
<p>つまり、私達はOSSに支えられながらプロダクトを提供して事業をしているといっても過言ではありません。</p>
<p>利用しているOSSが持続できなくなることは、私達が提供しているプロダクトにも影響を及ぼします。</p>
<p>私達エンジニアにおいては開発の時間的な損失が発生します。利用しているOSSを代替となるOSSへの切り替え、持続できなくなったOSSをフォークして独自パッチによる対応、そして独自開発といったり。</p>
<p>その開発の対応による予期せぬ時間的損失は、会社の事業ロードマップへも影響を与えることにもなります。</p>
<p>プロダクトの新しい機能を待ちわびているエンドユーザーにとっても、OSSが持続できなくなることは良いことではありません。</p>
<h2>Vue.jsとViteのOSS作者にスポンサー</h2>
<p>PLAIDではまずはじめにVue.jsとViteの作者である<a href="https://github.com/sponsors/yyx990803">Evan You氏</a>にスポンサーしました。</p>
<figure><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/8fbf5c4e-307b-4733-9142-f8794f1e8c4e/image-3.png" /><figcaption><a href="https://github.com/sponsors/yyx990803">Evan You氏</a></figcaption></figure>
<p>PLAIDのプロダクトKARTEの管理コンソール周りはVue.jsを使って作られており、Vue.jsがリリースされた初期の頃 (v0.12) から利用しています。</p>
<p><a href="/self-contained-systems">弊社CPO柴山のブログ記事</a>においても紹介しましたが、PLAIDのシステムはMicroservicesなアーキテクチャで構築されています。</p>
<figure><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/63ceee08-d660-4203-9111-c33f9a274649/image-4.png" /><figcaption><a href="/self-contained-systems">Self Contained Systems の紹介</a></figcaption></figure>
<p>その結果、service単位でプロダクトの要件に合わせる形で、Webフロントエンドも最適化が始まっています。あるsystemではReact、別のあるsystemではSvelteが使われており、そこではWebフロントエンドのビルドにViteが使われています。</p>
<p>Viteが提供する高速な開発サーバーの立ち上がり、特定のフレームワークにとらわれない、そして高速なビルドスピードを提供するDX(Developer Experience)は、PLAIDの新しいプロダクト開発において恩恵を受けています。</p>
<p>このように、PLAIDのプロダクトでWebフロントエンドのアプリケーションに関わる部分は、ほぼEvan You氏によって作られたOSSによって提供されているといっても過言ではありません。</p>
<p>PLAIDの事業の成長を支えたVue.js、そしてこれから未来にPLAIDが提供していくプロダクトの支えになるVite、これらの2つのOSSに支援するために、これらの開発者Evan You 氏にスポンサーさせて頂いた次第です。</p>
<h2>企業でGitHub Sponsorsするのは難しくない</h2>
<p>GitHub Sponsorsは企業向けOrganizationアカウントにも提供していますが、PayPal またはクレジットカード払いのみしか現時点で対応していません。PLAIDではGitHub Enterprise Cloudを利用しておりOrganizationアカウントは請求書払いです。</p>
<p>企業のOrganizationアカウントでGitHub Sponsorsしたかったので、サイボウズさんのブログ記事方法と同じく、GitHub Sponsors用の専用Organizationアカウントを作ってGitHub Sponsorsしました。</p>
<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.cybozu.io%2Fentry%2F2021%2F03%2F19%2F110000" title="GitHub Sponsorsを使って「企業」として寄付をした話 - Cybozu Inside Out | サイボウズエンジニアのブログ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe>
<p>ブログ記事は丁寧にチュートリアル的に書いてあったので、GitHub Sponsors自体は特に途中詰まらずにGitHub Sponsorsすることができました。(サイボウズさんの前例の記事には大変感謝しています！)</p>
<p>ブログ記事にも書いていますが、別OrganizationアカウントでGitHub Sponsorsしても、請求書払いのOrganizationアカウントに紐付けることがきるので、メインOrganizationアカウントにもきちんとスポンサーしているOSSのアカウントがリストアップされます。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/5dad4334-9610-48f4-ae03-4e433e976b66/image.png" alt=""></p>
<h2>最後に</h2>
<p>PLAIDでは今回のGitHub Sponsorsを機に、Vue.js、Viteだけでなく、他のOSSにもスポンサーしていく予定です。</p>
<p>GitHub Sponsorsの登場を機に、企業もOSSに対してスポンサーしやすくなっています。今回紹介したVue.js、Vite以外にも、成長して支援を必要としているOSSはいくつもあります。今回のこのブログ記事は、支援を必要としているOSSにもっとスポンサーが増えればと思い書きました。</p>
<p>このブログ記事が、OSSの支援のきっかけになれば幸いです。</p>
<p>プレイドではここで紹介したようなWebフロントエンドの技術を使って面白いProductを開発していきたいエンジニア（インターンも！）を募集しています。<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>


PLAIDはGitHub Sponsorsを利用してOSSのスポンサーになりました