Build@Mercari第5〜7週目のテーマ：ソフトウェアエンジニア（バックエンド・フロントエンド）への道のり #BuildAtMercari

みなさんこんにちは！メルカリBackend EngineeringチームのMark（@TangoEnSkai）です。

Build@Mercariの参加者とスタッフは、5月27日から7月8日にかけて、毎週水曜日の夜に短期集中型のソフトウェア開発研修を実施しました。研修では、データ構造やフロントエンド・バックエンド開発など、ソフトウェア開発の基礎的な内容を取り扱いました。第7週が研修の最後の週だったため、社内のエンジニアによるプレゼンを含めた送別会も行いました！

今日は、第5〜7週目に実施した内容をご紹介します。

＜実施した内容はこちら＞
第5週目：フロントエンドの基本
第6週目：バックエンドの基本
第7週目：送別会＋エンジニアによるプレゼン

第5週目：フロントエンドの基本

以前の研修では、開発フロー、データ構造、アルゴリズムに関する説明を行い、プログラミング知識だけでなく、理論的な問題や実世界における問題の解決方法について学んでもらいました。この週からは、ハンズオン形式で実際のウェブ開発に取り組みました。

6月23日には、CRMフロントエンドチームでソフトウェアエンジニアを務めるMyttがメイン講師として、フロントエンド開発の基本と関連する技術について講義を実施し、以下のトピックについて説明しました。

・ HTML
・ CSS
・ JavaScript
・ Web関連技術：React、Vue、Webpack

これまでの講義とは異なり、Myttはライブコーディングを取り入れた講義を実施し、フロントエンド開発の基本であるHTMLとCSSについても解説しました。

Myttによるライブコーディング講義

HTMLの簡単な機能を使いながら、ウェブページの見出し、ハイパーリンク、リスト、画像の作成方法を実演してくれました。その後、CSSコードがHTMLで作成されたウェブページのスタイルに与える影響について説明してくれました。

CSSを使ったシンプルスタイル

HTMLおよびCSSの基本的な技術を学んだ後、レスポンシブウェブページとその作り方について説明。次のトピックであるドキュメントオブジェクトモデル（DOM）に移り、下記の質問に答えながらJavaScriptを使ったシンプルなウェブページの作成方法について話してくれました。

・ DOMとは？
・ エレメントのクエリを実行する方法は？
・ イベントリスナーを追加するには？
・ DOMのノードのプロパティを変更するには？

JavaScriptに関するトピックとして、JavaScriptの性質、同期・非同期コードについても解説。

・ JavaScriptの得意分野は？
・ JavaScriptの不得意分野は？
・ 同期呼び出しと非同期呼び出しの違いは？
・ APIエンドポイントを非同期呼び出しするには？
・ JavaScrioptでエラー処理を実施するには？

講義の最後には、下記の2つの課題を出しました

パート1：カード作成

・ HTMLおよびCSSの基本的な知識
・ 既存のCSSファイルを使うのではなく、クリエイティブなデザインを作成する
・ デザインに制限はなく、光るボタンや面白いエフェクトなど何でも可
・ 任意：JavaScriptを使ってカードに特別アクションを追加する

パート2：ブログ型のウェブサイト作成

・ JavaScriptコードでインタラクティブなウェブサイトを作成する
・ JavaScriptのフレームワークの使用も可（以前使用したもの、もしくは新しいもの）（VueもしくはReact）
・ 好きな種類のUIフレームワークの使用も可（ant.design、bootstrap、material-ui、もしくはCSSを使わなくてもいい）
・ 完了基準
・・ ユーザーが新規ブログを作成できること
・・ ユーザーが既存のブログを削除できること
・・ ユーザーが既存のブログを編集できること
・・ ユーザーがブログの詳細を確認できること
・・ ユーザーがブログのリストを確認できること
・ モックサーバーもしくはサーバーレスサービス（Firebaseなど）を使用してデータを保存する

Webpackなどを使った開発環境の整備、CSSのデザインや構築（ckanのコーディング標準など）、状態管理ライブラリ（例：reduxとReactはセット、もしくはvuexとVlueのセット）の使用を推奨しました。

第6週目：バックエンドの基本

前週は、シンプルかつインタラクティブなブログ型のウェブページの作成を目標として、フロントエンドの基本について説明しました。この週は最後の技術研修が行われ、講師を努めたVeysonD（Masterと呼ばれるバックエンドチーム所属）とDomi（バックエンドリスティングドメインチーム所属）の二人が、バックエンド開発の基本概念を説明してくれました。講義では以下の7つのトピックを取り扱いました。

・ HTTP（ハイパーテキスト転送プロトコル）
・ サーバー
・ データベース
・ ホスティング
・ テスト
・ 認証＆認可
・ アーキテクチャパターン

最初にHTTPの定義に触れた後、HTTPリクエスト、簡単なHTTPリクエストの作成方法、そしてHTTPステータスコードについて説明。また、メッセージを送信しながら実際のHTTPメッセージを見せ、リクエストとレスポンスにおける、HTTPメッセージのフォーマットの見た目について軽く触れ、HTTPステータスコードの基本的な概念や、その他のよく知られているコードについても解説しました。その後のハンズオン演習では、参加者はPostmanを使いながらHTTPリクエストの送信と、インターネットからのレスポンスの受信を実践しました。

次のトピックはサーバー。まず最初にサーバーの定義を説明し、リクエストの送信、サーバーレスポンス、サーバーのスケーリングといった内容に移りました。サーバーの基本的な概念を説明し、You Tubeを使って、リクエストの送信およびレスポンスの受け取りを実践。また、スケーリングについても軽く触れ、垂直・水平スケーリングの基本的な考え方を紹介してくれました。

もう一つの主題であるデータベースに関しては、いつ、そしてなぜデータベースを使用するのか、リレーショナル・非リレーショナルデータベースの概念とそのメリット・デメリットについて話しました。

この講義では、下記のようなハンズオン演習を実施しました。

・ SQLデータベースハンズオン I：シンプルなクエリの実行　※例
・ SQLデータベースハンズオン II：お客さまの出身地として「ドイツ」を選択　※ヒント
・ SQLデータベースハンズオン III：「ID = 1」の製品を含む注文を全て見つける　※ヒント1、ヒント2

クエリの課題に取り組んだ後は、インフラの構築および管理に触れながら、ホスティングについて説明。最近では、GCP、AWS、Herokuなどのクラウドサービスを使うのが一般的ですが、代わりに自分のコンピューターを使用することも可能です。また、ホワイトボックステスト、ブラックボックステスト、ユニットテスト、統合テスト、E2Eテストなど、バックエンドに関わるさまざな種類のテストについても話しました。

この週は他にも、認証認可とアーキテクチャパターンについての講義を実施し、重要な用語や関連技術について簡単に触れました。最後のトピックであるアーキテクチャパターンに関しては、複数のパターンとボーナストピックが、それぞれの利点および制約と共に紹介しました。

・ パブリッシャー／サブスクライバー
・ クライアント／サーバー
・ マスター／スレーバー：ブローカー
・ gRPC、Docker、Kubernetes

Build@Mercari研修の最後の週ということもあり、前週のフロントエンド課題であるブログ作成の延長として、新しい課題を出しました。タスク要件は以下の通りです。参加者は互いに質問したり、アイディアを共有しながら課題に取り組んでいました。

・ 下記の動作を行うエンドポイントの作成
・・ 全てのブログページに応答する（GETリクエスト）
・・ ブログページのデータに応答する（GETリクエスト）
・・ ブログページを作成する（POSTリクエスト）
・・ ブログページを編集する（POSTもしくはPUTリクエスト）
・・ ブログページを削除する（DELETEリクエスト）
・・ 上記のリクエスト全てのHTTP Status Codesに正しく応答する
・ データ格納
・・ Basic: sessions
・・ ストレッチ：好きなデータベースをセットアップする（SQLもしくはNoSQL）
・ ブログシステムに認証を提供（ユーザー名＋パスワードログイン）
・・ 基本：セッション
・・ ストレッチ：トークンベース（ヒント：Auth0もしくはファイアベース認証）
・ コードを適切にテスト
・・ 基本：ユニットテスト
・・ ストレッチ：統合／E2Eテスト
・ ストレッチ目標
・・ クラウドプロバイダー（AWS、GCP、Heroku、Azureなど）にアプリケーションをデプロイする
・・ Dockerを使用したアプリのコンテナ化
・・ Kubernetesのセットアップ（サービス+デプロイメント）（コストを最小限にするためにMinikubeを推奨）

第7週目：送別会＋エンジニアによるプレゼン

最後の二週間は、フロントエンド・バックエンド開発に取り組んでもらいました。最後の6週間はタイトなスケジュールだったにもかかわらず、全員一生懸命ソフトウェア開発の基礎を学び、難しい課題を無事パス。未来のソフトウェア業界のリーダーになるという目標を掲げ、新しい知識習得のために熱意を持ってBuild@Mercariに参加してくれたみなさんに感謝しています。

最後の週には、第一弾となるBuild@Mercari研修プログラムの終了を、参加者、講師陣、スタッフ全員で祝いました。実を言うと、プログラムを無事完了できたことがまだ信じられません。プログラムを実施できたのも、参加してくれたメンバーのおかげです。また、プログラムを開始したときは数人のコアメンバーしかいませんでしたが、今ではエンジニア、通訳者、デザイナー、プロジェクトマネージャー、テクニカルプロジェクトマネージャー、エンジニアリングマネージャー、執行役員など、多くのスタッフがサポートしてくれています。

イベントでは、いろいろな方からコメントをいただいたり、メルカリのエンジニアがプレゼンを行いました。講義の振り返りを行う人もいれば、一番楽しかったことや研修での学び、更には、研修後の目標や今後挑戦したいことについて話してくれた参加者もいました。

CTOのSuguruさんからも、プログラムに対してポジティブなコメントをいただきました。メルカリのエンジニアリング組織おける、多様性の向上に関するコメントはとても興味深く刺激的でした。また、ソフトウェアエンジニアとしてこれからもより多くの面白いチャレンジをしていくよう参加者を励ましていました。参加メンバーが今後もソフトウェア開発を学び、社会の助けとなるようなソフトウェアを開発してくれることを期待しています。

また、イベントでは3つのプレゼンを行いました。まず最初に、僕がソフトウェアエンジニアになるまでの道のりや、学生時代のさまざまな経験について話しました。SonnyはiOS開発とモバイルアプリ開発の経験について、Tuttiはこれまでのキャリアと、テック業界におけるコミュニティの重要性について話してくれました。

第1〜6週目の講師陣も招いて、それぞれ担当した講義とプログラムの感想をシェア。講師陣は有意義なメッセージだけでなく、ソフトウェアエンジニアになるためのアドバイスもしていました。

機械学習チームでEMを務めるShibuiさんは、メルカリのエンジニアリング組織や、各チーム／エンジニアの役割についても語っていました。

・ モバイルエンジニア
・ フロントエンドエンジニア
・ バックエンドエンジニア
・ インフラエンジニア
・ セキュリティエンジニア
・ サイトリライアビリティエンジニア
・ QAエンジニア
・ サーチエンジニア
・ データサイエンティスト
・ 機械学習エンジニア
・ コーポレートITエンジニア
・ エンジニアリングマネージャー

メルカリにおける各エンジニアの役割に関する説明は、参加者が今後どのようなエンジニアになりたいか考える上で役立つ内容だったと思います。また、複数の役割を担うエンジニアを招いて参加者とミニラウンドテーブルセッションをオンラインで実施。各ミーティング部屋には異なる専門分野のエンジニアがおり、参加者は好きな部屋に入って自分が知りたいことについて何でも質問できるようにしました。例えば、バックエンドエンジニアのなり方／なるために必要な知識、ソフトウェアエンジニアとしての生き方や機械学習チームが取り組んでいる内容についての質問がありました。

閉会の前に、今後の同窓会活動など、いくつか重要なアナウンスメントを行いました。キャリア形成においてネットワークは重要になるため、参加者には今後も情報・知識共有を行ってほしいという思いから実施することにしたのです。また、今後予定しているテックイベントに関する情報共有も行いました。最後に、プログラムの修了証明書をLinkedlnのプロフィールに追加する方法を説明しました。

Build@Mercariは2019年の夏、少人数のメンバーによるブレストから始まりました。今でも信じられませんがとても多くの申込みがあり、その後面接を実施し、選ばれた参加者とこうして無事にプログラムを完了することができました。プログラムが参加メンバーの今後の挑戦を後押しすることを願っています。将来、ソフトウェアエンジニアになったBuild@Mercariの卒業生と再開することを楽しみにしています！