DMM GUILD インターン に参加しました

dmm_guild_img

これは何ですか?

合同会社DMM.comの DMM GUILD というインターンがつい先日終わったので、その振り返りをしています

文章が苦手なのであたたかい目で見守ってください

参加した経緯

いわゆる僕は大学生らしいので8月から2ヶ月夏休みをやっています

せっかくの長い休みなので何かやっていきをしたいな〜と思い、DMMのインターンに申し込みました。

何故DMM.comのインターンに?

僕は一応フロントエンド付近に生息しているタイプのエンジニアをやっており、日頃はVue.js/Nuxt.jsを書くなどしてお金を貰っています。 ただ、Vueから離れて(Reactとかで)フロント開発したかったのとTypeScriptをガシガシ仕事で書きたいなどの思いがあったので、それらの技術を採用しているらしいDMM.comにいっちょ行ってみるか!となりました

↑こういう感じです

インターンまで

  1. 書類選考

まずはじめにエントリーシートを書きます。

色々今までやってきたことをウォーと書きました。

DMM GUILD はエンジニア職のインターンなので、持っているGitHubのアカウントとかも提出しました

あれこれカタカタ書いて(キーボードを叩く行為)、メールのやり取りをした記憶があります

普段メールとか全然確認しない人間なので、ちゃんと見ようね になりました

  1. 面接

書類選考が無事終わると面接です。

僕はオフィスから遠いのでリモートで面接でした。

エントリーシートの内容中心にあれこれお話しをします。頑張って話しましょう

  1. 参加

参加が決まります

こういうインターンです

👇以下の画像のとおりです

about_dmm_guild

期間は2週間です。課題解決型のインターンシップです。

課題解決型というと、「インターン生向けに作られた架空の設定があって...」 みたいなアレが想像できます(僕も始まるまではそれを想像してました)が、 このインターンは 実際の自社サービスや社内ツールに生えているissueを解決する と言った形になっています。

またissueごとにポイントがあって、そのissueをclosedまで持っていけるとポイントをゲットできます

ポイントは最終日に集計があって、上位に入った人には色々贈呈があります。たのしみ〜

勤務地は六本木グランドタワーのオフィスです。

office

👆ジャングルがあったり

tower

👆東京タワーが見えたり

トイレの個室が少なかったりカオスですが、とてもきれいで良かったです。

開発環境(物理)はやっぱり大事だなぁになりました。

また、交通費も宿泊費もすべて会社持ちだったのでDMM.comさんありがとうございます(会社の方角に向かってお辞儀しています)

内容

日付感覚が死んでいたので、アバウトに時系列順でお話していきます

出社

ヤバい(朝弱い + 電車がovercrowded のため)です

社員証を駅の改札にかざしたりオフィスのゲートにICOCAかざしたり大変だった

東京ってこえぇ (天気の子)

気合いを入れて毎日 池袋 ~ 六本木一丁目 を全力通勤していました

day1 ~ day5 (9/2 ~ 9/6)

day1

オリエンテーションがあって、社内用PCの支給がありました。

僕はAppleのエコシステムとよろしくやってるのでMacBookProが支給されました

ちょっと古めでバタフライキーボードじゃなくてよかった〜

初期設定中、すかさずvscodeやzshをインストールして環境をタタタタタと整えていきました。

あまりに整えすぎてほぼ自分のPCと区別がつかなくなって大変でした

そうこうしていると、CTOの松本さんが激励の言葉をかけにきてくださったりして ウォ〜始まるぞ〜 という感じになりました

まだissueにはアサインできないのでここで終わり

day2 ~ day5

ここからは issueの奪い合い 各々がやりたいissueにアサインして、やっていきをします

1人1つしかアサインできない + ポイントが付与されているので、慎重に選んでいきます。

僕は日頃やらない領域に手を伸ばしたらたのしいだろうな、と思い

「DMMオンラインサロン ( https://lounge.dmm.com/ ) の、チャット機能のUIデザイン案を作ってプレゼンする」

のようなissueにアサインしました

ここからはissue別に切り分けてお話ししていきます


UI案作成 & プレゼン issue

日頃は前述のとおりフロントエンドで開発をしているのですが、デザインは趣味以外で取り組んだことがなく 業務レベルのデザインは今回が初めてだったので非常に :yatteiki: という感じになりました。

打ち合わせ -> Figmaで実装 -> プレゼン作り -> 営業やエンジニアの方々を交えてプレゼン

という感じで進んでいきます

  1. 打ち合わせ

打ち合わせでは、現状や何故こういったissueがあるのかをチームのエンジニアの方から説明を受けました

とにかく使ってみないとわからないので、実際にアプリをインストールしてあれこれ試してみたりしていました

デザイナー自体は前々からやりたいな〜と思っていたりして、 今回のインターンにも ノンデザイナーズ・デザインブック を持ってきていた(持ってきていただけ)のでモチベでとにかく殴る感じでいました

ただインターンが2週間だけなのと、ポイント獲得数で競うというゲーム要素があるので予定工数を2日に見積もってアレコレ駆使していく感じになりました (ちょっと短くてワアアアとなりました、もうちょっとゆっくりやりたかった気もしなくもないです...)

  1. Figmaで実装

Figmaというデザインツールがあります。開発チームがこれを採用していたので、使用しました

詳しい機能説明とかは割愛しますが、共有が簡単に出来たりマークアップで書き出せたり基本的には無料で使える感じです。便利なのに無料で心配になります

ただ日本語でのドキュメントとかが無い(多分)ので英語のdocsを読みをしたり、noteを這い回って記事を集めたりして試行錯誤進めていきました。

開発チームのFigmaに招待してもらえたので、そこから複製して社内用アカウントで編集していきました。開発中のデモUIに大学でお世話になった先輩の名前が使われていて面白かった

エンジニア思考の頭をデザイナー思考に切り替え、ねじねじひねってUIを繰り出すのに必死でした

  1. プレゼン作り

~ 2日後 ~

うおおおと作業した甲斐があって、なんとか発表できるクオリティのUI案が完成しました。

ただ完成させるだけではこのissueは終わりではないのでプレゼンの制作をはじめました

よぉ〜し、keynote起動しちゃうぞ と思ってアプリケーションを開いたのですが、社内用PCには入ってない && 入れようとしてもAppleのアカウント、なし でオシマイになりました

なのでいい感じにデザインできそうなプレゼンツールを探し、beautiful.aiを使用することにしました

ブラウザでヌルヌル動いてて、実装がめっちゃ気になったのですがその気持ちを抑えてプレゼンを作りました。

日頃サークルでライトニングトークをしたりでプレゼンは嫌いじゃないという感じなので楽しく資料を作ることができました

  1. プレゼン

始まってみるとプロダクトオーナの方がいらっしゃったりゴリゴリの強そうなエンジニアの方がいらっしゃったりで、緊張して窓から飛び降りそうになりました(なりません)

プレゼンは滞りなく進み、様々な講評を頂きました。

概ね良い感じの意見をいただけたので良かったです。デザイナー大変だけど楽しい

とりあえずレビュー段階に入ったので、次の新しいタスクにアサインします

ここまでで大体3〜4日経過

次はエンジニアっぽいゴリゴリコードの書くタスクをしたいと思ったので、そういうタスクにアサインしました

実は前のデザインのタスクの打ち合わせをする前にちょっと暇だったのでこのタスクをやっていました。

が、他の方がアサインしたので手をサッと引いて様子見をしていたところ、デザインのissueが終わった頃には誰もアサインしていなかったので僕が担当する感じの運びになりました

内容は「APIを叩くフロント部分のTypeScript化」のissueです。

現状vanillaのjsで書かれている大きめのフロント部分のts化+テストの改修で やってやるぜ! という感じになりました

ただgithubでプロダクトを見てみるとjs -> tsをする対象のファイルが60〜70ファイルぐらいあって うーん ^ ^ となりましたが、なんとかなるやろ精神で突っ込んでいきました。1人だけスポ根エンジニアをやっています

(後からわかったのですが、別に全部の型付けをしなくてもよかったみたい(any許容)です、でも楽しかったのでなんでもいいです)

なんか区切り悪いので後半に回します(ガバガバ時間経過でごめんなさい)

day8 ~ day14 (9/9 ~ 9/13)

ちゃんと土日はお休みなので東京中をはしりまわっていました、うれしいので

あとちょっとイレギュラーだったんですが台風が関東をかすめて行ったので月曜が午後出社になりました

せっかくの台風なので午前中は池袋の映画館で「天気の子」を見て100%の晴れ女になりました。

ここからはひたすらts化のissueをやっていきです

js -> ts化 issue

このタスクは大体2段階という感じで

ts化予定のディレクトリに対してテストを行うように修正 -> ts化

みたいなアレです

  1. テストの修正

これは参考の資料があったので それを元に tsconfig.json を修正しました

テスト自体はちょっとカスタマイズされたmochaが使用されていましたが、テストを書くこと自体はしませんでした

パスの解決で若干苦労しましたが割とサラっといけてよかった

  1. ts化

これがissueの本体です。

zshの適当なコマンドですべてのjsファイルをtsファイルに置き換えて始めました

ひたすら仕様書のデータ型とにらめっこして型パズルをするのですが、おそるおそるPRを出すと丁寧にレビューしていただけたおかげでts力(ぢから)の高まりを感じました

APIがものすごい量のパラメータ受け取る部分や、めちゃ条件付きのパラメータ受け取る部分の型付けとかウゴゴゴという感じでしたが 頂いた丁寧なレビューと気合いでなんとかこなせました。良かった

マージまでちゃんと行ったのでこのコードがDMMのサービスの中で動いていると思うとなかななアツい感じでうれしい感情になりました


結構ts化のissueが重かったので大体これで最終日になりました。

最終日の前日に社員の方にご飯(次郎系)に連れてってもらい温泉までおごっていただきホクホクの気分になりいい感じで終わりを迎えることができました、人生楽しかったです。悔いはありません

こんな感じで社員の方も積極的にインターン生に絡んでくれたのでかなり良かったです。

僕のサークルの先輩方がいらっしゃったのも大きかったと思います、色々お世話になりました。ワクワク

総括

総ポイント自体は 13 で真ん中ちょいしたぐらいでした(76ポイントとか取ってる人がいて怖かった)

でも自分がやりたかった デザイン と TypeScript のタスクをこなせたのはよかったです

あと飯のバリエーションが無さすぎてほぼ毎日ラーメン食うのはやめようと思いました(色々体にガタが来そうなので)

DMM GUILDは来年も開催されるかわかりませんが、非常に良い体験を積めるインターンなので是非みなさん参加をおすすめします。

締め方がよくわからないので、インターン中に食べた美味しいごはんの画像を載せて終わりたいと思います。様々な方、ありがとうございました(ごちそうさまでした)

meal1 meal2 meal3 meal4 meal5 meal6