仏発エンジニア養成機関「42 Tokyo」のCommomCore最終課題について

hiroin

はじめに

この文書はComommCoreの最終課題はどんなことをするのかを示すものです。
最終課題以外の課題については仏発エンジニア養成機関「42 Tokyo」ってどんなところ?を参照ください。

先日、42のComommCoreの最終課題を終えました。
※Common Coreとは
42のカリキュラムは2部に分かれており、第1部のことを「Common Core」と呼んでいます。「Common Core」はコンピュータサイエンスに関するあらゆるトピックを幅広くカバーする内容です。CommonCoreカリキュラムは最大1年半で修了しなければなりません。

ComommCoreの最終課題より前の課題はComputer Scienceを学習するための課題です。その内容は、ささる人にはささるけど、多くの人にとっては「やってることはすごそうだけど、実務にはどうなのかな…」と感じるのではないかなあ…と思っています。
また、課題をこなしている本人達も「この課題をやってるだけで本当に就職できるのだろうか…」思っている感があります。実際、自分もそうでした。

この文書は最終課題でどんなことをするのかを示すことによって、42のCommonCoreの課題を一通りこなせば十分実務に耐えられることを示すことを目標にしています。

最終課題の概要

最終課題で作成する成果物の概要は以下の通りです。

技術的なこと

  • 言語はTypeScriptを使用する

  • SPAで作る

  • バックエンドはNestJSを使用する

  • フロントエンドは自由(Next.jsを使うことが多いと思います)

  • データベースにはPostgreSQLを使用する

  • Docker Composeを使ってアプリを起動できるようにする

作るもの

  • 2人でオンラインでPongができる

  • 第三者がそのPongを観戦できる

  • 対戦相手を見つけたり歓談するためにChatができる

  • DMを送ることもできる

  • BANやブロックもできる

  • ユーザーの状態(online / offline / game中など)を表示できる

  • なんらかの二段階認証ができるようにする

  • 42のintra systemのOAuthを使ってログインする

成果物

docker-compose up --buildでゲームを立ち上げられるようにする

docker-compose.yaml

version: '3'

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    env_file:
      - .env
    ports:
      - 4000:4000
      - 4100:4100
    depends_on:
      - db

  db:
    image: postgres:14-alpine
    env_file:
      - .env
    ports:
      - 6432:5432

Dockerfile

FROM node:19.4.0 AS build-front

RUN yarn global add react-scripts

COPY ./front /front

WORKDIR /front
RUN yarn install
RUN yarn build

FROM node:19.4.0

COPY ./server /server

WORKDIR /server
RUN yarn install
RUN yarn build

COPY --from=build-front /front/build /server/client

CMD [ "yarn", "start:prod" ]

42のintra systemのOAuthを使ってログインする

42のintraにもGoogleでログインとかTwitteでログインと同じ仕組みがあります。

Google Authenticatorによる2段階認証を設定できるようにする

2段階認証を設定し、一度ログアウトしてからログインしようとすると6桁のコードを入力する必要があるようにします。
実装はAPI with NestJS #31. Two-factor authenticationそのままでいけます。ありがたいです。

アバターの設定

アバターを設定できるようにします。アップロードされた画像をBase64エンコードしてDBに保存しました。

emailによるユーザーの作成

emailでユーザーを作成できるようにします。user1とuser2というユーザーを作っておきます。
※以下は42生向けのコメントです。課題では42のintra systemのOAuthによるログインだけ作成すればOKですが、それだと自分でテストするとき1人でしかログインできないので他のログイン手段も作成して1人で複数アカウントでログインできるようにしておきます。

チャットを作る

WebSocketを使ってチャットを作ります。

チャットの管理者はユーザーをBANできるようにする

BANを解除できるようにする

チャットの管理者はユーザーをmuteできるようにする

チャットの管理者はユーザーをkick(チャンネルから追い出す)できるようにする

チャットのチャンネルにパスワードをかける

チャンネルにパスワードをかけてパスワードを入力しないと入れないようにします。

DMができるようにする

チャットの他にDMも実装します。

ユーザーがオンラインかオフラインかゲーム中かを表示する

WebSocketを使ってユーザーがオンラインかオフラインかゲーム中かを取得して表示します。
NestJSは以下のようにクライアントの接続が繋がったり切れたりをhandleConnection()、handleDisconectで検知できます。

@WebSocketGateway(4100, { namespace: "notify", cors: true })
export class NotifyGateway implements OnGatewayConnection, OnGatewayDisconnect {
  @WebSocketServer() wss: Server;

  handleConnection(client: Socket) {
    // クライアントがオンラインになった場合の処理を書く
  }

  handleDisconnect(client: Socket) {
    // クライアントがオフラインになった処理を書く
  }
}

ブラウザの更新ボタンを押さないとonline/offlineが更新されませんが、本当はここもチャットと同じでリアルタイムに反映させるべきだなあ…と思いました。ちなみにこの部分の実装は全部dnakanoさんにして頂いたので大きなことは一切言えません！

ゲームのマッチング機能を作成する

CREATE MATCHでゲームを作成することができます。誰かがJOIN MATCHすると、そのCREATE MATCHされたゲームに参加し対戦することができます。

複数ゲームが作られた場合の処理

複数のゲームが作られた場合、誰かがJOIN MATCHすると作られた複数のゲームのうち1つとマッチしてゲームが開始されます。もう1つのゲームがそのままJOIN MATCH待ちとなります。

ユーザーをお気に入り(FRIEND)に追加しておくと、FRIENDの画面からそのユーザーを指定してゲームをすることができる。

ユーザー指定でゲームを作成した場合、そのゲームに入れるのは指定されたユーザーのみです。

ゲーム中に回線が切れた場合、切れた方を負けとする

ゲームによって扱い方が異なりますが、コネクションが切れて10秒たっても回復しない場合、切れた方が負けにしました。

成果物の作成の流れ

まず最終課題の概要をもう少し詳しく書いた3ページほどの英語で書かれたpdfが与えられるのでそれを読みます。
この課題は3人から5人でこなす課題なので仲間を集めます。
これまでの課題ではCとC++しかでてきていないので、まずJavaScriptとTypeScriptを把握します。
次にNestJS、React、Nest.js等を把握します。
PostgreSQLの扱い方も知らないといけないのでER図の書き方から把握していきます。
OpenAPIを使って、フロントとバックエンドで分業できるようにします。
先生はいないので、自分たちでマニュアルを読んだり、本を読んだり、Udemyを見たり、ぐぐったり、あーだこーだ議論しながら実装していきます。

企業の採用担当者様へ

以上が42の最終課題なのですが、この課題をこなすことでインターンをへて採用されるレベルに達しているでしょうか。

おわりに

42 Tokyoは最近公式HPの内容が充実しましたが、まだまだ解像度が低いと思っています。この文書が解像度を高める助けになることを期待しております。


いいなと思ったら応援しよう！