こんにちは！
2022年4月、チームラボにWebエンジニアとして新卒入社した安藤拓人です！この記事では2022年4月から1~2ヶ月間に渡り実施された研修の概要と、課題から何が学べたのかを、新卒エンジニア5人で分担してご紹介していきます。
こちらの記事は課題内容の前半部分を紹介する前篇になっています。
後編はこちらからご覧ください。

※希望者は入社前から課題に取り組んで頂くことが可能で、今回記事を書いているメンバーの中にも入社前の空き時間を使って取り組んでいた者がいるため、所要期間は4月入社後に取り組んだメンバーとは異なります。

はじめに

チームラボでは新しく入社するWebエンジニアメンバー向けに、開発者として最低限必要だとチームラボが考える技術・知識を効率的にインプットして頂く為に、課題を設計して用意しています。
具体的には以下の技術を使えるようになることを目的とし、3STEPに分かれた課題に取り組みます。

課題の進め方としては、各課題ごとに用意されたドキュメントを元に、自己学習していく形式ですが、課題のサポートを担当する技術メンターが近くに座っているので直接質問しにいったり、Slackなどで質問できたりと、質問したい時にはすぐに聞ける環境が用意されています。

それでは、各STEPごとの概要をご紹介していきます。
※大変長い記事になっているので、目次を利用してお読み下さい！

STEP1. 「ハンズオン・環境構築」 〜 「STEP2.TODOリストの作成」

新卒エンジニアのヤン ジヒョンです！
僕のパートでは、STEP1の「ハンズオン・環境構築」からSTEP2の課題1「TODOリストの作成」までをご紹介します。

STEP1. ハンズオン・環境構築

■課題概要
STEP1では、課題に取り組むために必要な環境を構築し、STEP2以降の課題まで繋がる簡単な実装を行っていきます。

主に構築する環境としては、

1. Java11

2. MySQL5.7

3. SpringBoot（最新版）

等があり、開発ツールは、IntelliJ IDEAを使用します。

流れとしては、用意された課題ドキュメントに従って進めていくと迷うことなく完了できるので、気楽に読みながら進んで問題ありません！が、こちらで構築する環境にて、サーバーサイドの課題も進めていきますので、書いてあることを理解した上で、次のSTEPへ進んで行く必要がありました。

STEP2. TODOリスト作成課題

■課題概要
STEP1で構築した環境下でTODOリスト作成課題用に用意された画面仕様書に書いてある要件に合わせて機能を実装し、TODOリストを完成することが目標になっています。

■学べること
主にJava言語でバックエンドを実装し、Thymeleafでviewの実装を行なっていき、GitHubを通してメンターからレビューを受けたり、質問をしながら進めていきますのでGitHubの使用方法に関しても勉強になりました。

そして、TODOリスト課題のドキュメントでは、URL設計やDB設計、そしてエラーハンドリング等をどう考えていくのが良いのかも簡単に学べました。

追加する機能は、編集、エラーハンドリング、そしてバリデーション等です。
特にバリデーションを実装する際にはThymeleafに関して勉強になり、当時は難易度が高くかんじたのですが、良い勉強になったと思っています。

■所要期間
入社前に取り組んでいたので、日常の生活やプログラミングを学ぶ塾にも別途通っていた
こともあり、私は大体２ヶ月ぐらいかかりました。
そして、初めてのThymeleafを少しでも理解しようとしていて所要時間が通常よりかかっていたと思います。

■自分が取り組んだ感想（難しかった点、良かった点）
特に、難しかった点はSpring Data JPA（Java Persistence API）とThymeleafを初めて使ったこととバリデーション処理をサーバー側で行う部分でした。この課題に取り組む前まではJavaScriptを使って実装した経験しかなかった為です。
また、TODOリスト課題に取り組む前にはちゃんとしたエラーハンドリングを実装したことがなかった為、通常よりも時間もかかり、大変でした。
難易度が高く感じる部分もありましたが、メンターからレビューを受けながらこの課題に取り組んだことで、通っていた塾とは別の技術について学ぶことができ、いい経験になりました。

STEP2. 「RESTfulなAPIアプリケーション」

新卒エンジニアの増田莉奈です！
私のパートでは、STEP1の課題2「RESTfulなAPIアプリケーション」についてご紹介します。

■課題概要 
RESTful APIを理解し、実装する課題です。
こちらの課題2もTODOリストの作成課題と同様にレビューを受けながら進めていきます！

RESTful APIを利用すると、URIに規律が生まれ、シンプルで一貫性のあるリクエストができます。そのため、汎用性があり、開発しやすくなります。

実際にチームラボの案件でも、「画面に表示する情報をデータベース等から取得し、フロントエンド側に渡す」「会員登録の時にユーザが入力した情報をデータベースに保存」「ログイン・ログアウトの認証処理」などの時に使用しています。

■学んだこと
APIの種類は、一般的な取得、登録、更新、削除の4種類と、画像ファイルの取得や更新のファイル操作も実装しました。画像ファイルは拡張子や偽装のチェック、容量制限などのルールに従い、バリデーションも実装しました。
APIの仕様書(Swagger)はSwagger Editorで確認しつつ、作成しました。
APIの動作確認は、PostmanかInsomniaで行いました。私は、アキレス腱をピンと伸ばしている人の方が可愛いなと思い、Postmanを使っていましたが、同期の中でもPostmanを使っている人が比較的多かったと思います。後々知りましたが、Postmanのロゴは空飛ぶ宇宙のヒーローだそうです。

■所要期間
私は３ヶ月ほどかかりました。入社する前年の11月頃にこの課題に取り組み始めたので、卒業研究でバタバタしていました。そのため、フィードバック面談は自分のスケジュールに合わせて調整していただいたりしながらとてもゆっくりとやらせていただき、他のどの課題よりも時間がかかりました、、、。
 
■ヒント集
課題1からヒント集があるのですが、今回は主に拡張子の制限や容量制限などの画像ファイルの処理方法が記載してありました。このヒント集のおかげで、何を使ってどう実装していけばいいのか全くわからないということはありませんでした。
 
■感想
APIの実装は初めてで、Data Transfer Object（DTO）を使うように勧められていたので、「DTOって何？」「そもそも何でAPIって必要なの？」から始まり、わからないことだらけでしたが、メンターさんが丁寧にレビューをくださり、説明してもらえたので、何とか終えることができました。
私は案件でAPI実装の担当ではないので、「とても役立った！」という実感はまだありませんが、APIを担当している同期は課題を通して「使用言語は違うけれど、APIがどんなものか理解でき、バリデーションチェックやメソッドの使い方などが役立っている」「設計をし、Swaggerを元にコードを書くため、Swaggerを書く経験ができてよかった」「処理の流れが掴めた」などと言っていました。
課題全体を通して、普段から綺麗なコードを書くように心がけていましたが、レビューを頂くことによって、「綺麗なコードはこういうものだ」ということを正しく理解することができました。
また、課題ごとに記載してある課題の目的やポイントが、進めていく上でのモチベーションになりました！
課題とはまた別の話にはなりますが、GitHubは業務で当たり前のように使うので、学生のうちから使い方を勉強することができてよかったです！

STEP2. 「OAuthを使ったソーシャルログイン」 〜 「認証つきのRESTfulなAPI」

改めまして、新卒エンジニアの安藤拓人です！
僕のパートでは、STEP2の課題3「OAuthを使ったソーシャルログイン」から課題4「認証つきのRESTfulなAPI」までをご紹介します。

「OAuthを使ったソーシャルログイン」

■課題概要
課題3では、課題2で作成したRESTful APIに管理画面ライクな画面を追加し、GitHubが提供するOAuthを用いてログイン機能を実装することが目標になります。
OAuthとは、簡単に言うとエンドユーザーがあるアプリケーションで承認を行うことで、他のアプリケーション内で承認したアプリケーションが保持するリソースを利用することができるようになる認可のプロセスです。

これまでの課題同様、用意されたドキュメントを自分で読み進めながらわからないところを調べたり質問したりしながら進めていきました。

■学んだこと
課題3とこの後の課題4は、比較的ボリュームが少ない課題になっていますが、この課題ではInterceptorを使って全体の処理の流れにログイン認証を割り込ませる必要があったため軽い理解では処理の流れなどが把握しにくかったです。ややこしい部分は課題ドキュメントを何度も読み込んだり、仕様書に従った実装が完成した後にも「ここのコード変えたらどうなるんだろう」とかを試したりと、時間をかけてしっかりと理解することを意識して進めていきました。
OAuthについてもそれまで正確には把握できていなかったため、仕組みについても詳しく調べて理解を深めるようにしていました。
また、画面は課題1でも使用したThymeleafを使って実装していくため、良い復習の機会になります。管理画面のデザインや細かい仕様は決まっていなかったため、TODOリスト実装の時を思い出しつつ、Thymeleafのドキュメントを読んだりCSSを気が済むまで書いたりしてリッチにしてやろうとかも考えながら課題に取り組みました

■所要期間
課題終了までの時間は目安ですが、レビューと修正含め4日程度かかりました。

■ヒント集
課題3のヒント集には環境変数の作り方やOAuth・Interceptorの実装のヒント、ログインセッションの管理方法が記載されていました。丁度、実装でつまづきやすいポイントのヒントになっていることが多くドキュメント内で疑問が解消するのでとても助かりました。

中締め

ここまでが、課題前半の内容になります。
続きは後編で紹介していますので、是非お読みくださいませ！
後編はこちらからご覧ください。

採用に関する情報はTwitterでも発信中！
フォローよろしくお願いします！