ハウテレビジョンのサマーインターン2020に参加してきて楽しかった

 

どーもです。前回の記事で書いたChatworkでのオンラインインターンシップに続いて、

株式会社ハウテレビジョンさんでのインターンに参加してきました。土日挟んですぐ次って感じだったので、ハードではありましたが、こちらはこちらですんごい楽しかったのでその記録を残したいと思います。

 

 

インターンの流れ

1. 応募するまで

エンジニアのサマーインターンを色々探していて、Wantedlyでこの募集を見かけました。前回のインターンと同様、魔法のスプレッドシートにも載っていました。ほんとこのスプレッドシート見とけばだいたい募集情報わかります。なんなんだこれは(笑)

 

内容は、実際に運用されている「外資就活ドットコム」に新機能を企画し、実装するというもの。期間は9/7〜9/14の一週間プラス一日で、最終日に発表を行います。参加賞は10万円で、なんと優勝チームには賞金でプラス10万円がもらえるとのこと。すげえ、、🤤

 

正直この期間に企画&実装ってホントにできるんかなあ?とは思いました。ただ、いわゆるチーム開発「体験」ではなく、実際に動いているソースコードに触れそうだと思い、応募してみました。サービスの利用者も中々の数がいて、多くの人が利用するだけあって機能も多く、どうやって保守・運用しているんだろうとかを知ってみたかったんですね。

バックエンドにGoを使ってるそうで、触ってみたいなあとも思ってました。

 

あとなにより、このインターンはオフラインらしいとのこと。多分募集してたのは6〜7月で非常事態宣言が解除された直後だったので、相当攻めてますよね(笑)

でもインターンに行く前から、なんとなくオフラインのほうが得るものが多く良いだろうなとは確信していて、数少ないオフラインのインターンだったので応募しました。

 

2. 面接

結構あっさりめなESを書いてエントリーした気がします。色々応募しすぎて、だいたい書くことが毎回同じになるんですよね(笑)。 

エントリーしたあとはいきなり面接でした。面接は1時間で、30分コーディング面接+30分普通の面接でした。

面接にはエンジニアの方とPMの方が同席して、最初の30分のコーディング面接は問題を出されてリファレンス見ないでエディターに書いてみてーって感じでしたね。

問題自体は一応伏せておきますが、10分くらい考えて思いつくような易しめな問題だったと思います。atcoderみたいな競技プログラミングやったことない僕でもいけたので、競プロやってる人には多分問題なく解けると思います。

そして残り30分は書いたコードの説明と、いわゆる普通の面接ってやつです。

色々インターン応募した&落ちまくったので、研究と長期インターンのことはだいぶ話し慣れたと思います

 

3.受かってからインターン当日まで

 受かった後は、事前1day研修とのことで8月のうちに一度オフィスに集まります。

やっぱり、きれいなオフィスはテンション上がります。

六本木一丁目の駅の目の前にあるでっっかい森ビルの32階にあって、東京中を見下ろせます(笑)

f:id:masamichhhi:20201103184245p:plain

六本木のど真ん中にそびえ立つオフィス(ハウテレビジョンHPから引用)

そしてこの一日で、インターン期間中なにをやってもらうか、 インターン期間までなにをやってもらうかを大まかに説明されます。

 

インターンの説明の後のほとんどの時間は、環境構築に費やされます。フロントエンドはReact+Redux, バックエンドはGoを使っており、どちらもdockerを使って開発環境の管理をしているのですが、なかなか複雑で実はよく理解しきっていません、、

事前に用意されてるシェルスクリプトを実行して、いろんなdockerイメージ持ってきて、docker-compose で色々動いてました(適当)

まあなんとか動かせたところで、バックエンドとフロントエンドのコードの解説的なのを聞きます。

バックエンドはクリーンアーキテクチャを採用しているらしく、責務の分断が細かくされていました。

ginというgoのwebフレームワークを使っていましたが、ginはrailsなんかと比べて軽めなフレームワークで、生のgoを書ければほとんど問題なく書けると思います。なんかこっちの方が自由度高くて僕は好きです笑

 

気になる方はこの辺を参考に。ほんとシンプルで書きやすいです。

qiita.com

とはいえ、goの経験は全くなく、インターン決定後にちょっと自学したくらいだったので、コードリーディングがめちゃしんどかったです。その上クリーンアーキテクチャで、ただのCRUD処理でも5、6層階層をまたいで処理が分けてあって、😐←こんな顔になってました。

 

なんですが、この時点で全てを理解する必要はないようです。というのも、インターン本番までに課題を与えられて、それをやっていくと少しずつ理解できるとのこと。ありがたいです。

 

そしてその日は終了し、事前課題に取り組みます。

外資就活に日記の機能を作ってみようという内容でした。やることは単純なCRUDの処理っすね。

直前までchatworkのサマーインターンに参加したので、そっちではscala書いて、夜には課題でgoを書くという刺激的な毎日でした。

ただchatworkのインターンの中で、ドメイン駆動設計とクリーンアーキテクチャをガッツリ教えてもらい、外資就活にもそれらが取り入れられてたので、「これあの時言ってたやつだ!」と進研ゼミ状態が続いておりました笑

 

4. ついにインターン初日

なんとか課題を終わらせ、インターン本番です。

初日は、やってきた課題の発表と作る機能の企画をします。

まずは課題の成果発表です。バックエンドコースの参加者と社員の方に、やってきたことを見せ合います。他の人は「Goとかクリーンアーキテクチャとかようわからんかった」と喋りながら、みんなちゃんと仕上げてきてレベルの高さを感じます。

 

そしてお昼をはさみ(くそうまい弁当だった)、いよいよチームに分かれて企画が始まります。

僕のチームは3人で、バックエンド2人とフロントエンド1人。

1人は小学校からPHPとかを触ってたような人で、もう1人は海外の大学でCSを専攻していてベンチャーとかでガンガンフロント書いてるような人。すごい人たちと一緒になってしまった(笑)。

作る機能は特に制約はなく、とにかく「ユーザーファースト」にこだわること、と伝えられます。

企画は、最初に時間とってみんなで付箋にアイディアを書きまくって、ホワイトボードに貼ってて似たものを集約していきました。発散→収束の流れですね。

やはり優秀な方達と一緒にやるとなんでもスピード感持ってできて、超楽しいです。

 

だいぶ色々なアイディアが出た中で、結構多めかつ良さげだったのが、「就活生同士の横の繋がり」に着目したものでした。

f:id:masamichhhi:20201123144845j:plain

みんなでホワイトボードにアイディアを書きなぐりました

既存の機能で、外資就活コミュニティというものがあります。これは要は就活生の2ちゃんみたいなもので、不特定多数の就活生と会話できるというものです。

これはこれですごく面白くて、就活生同士でつらいことや嬉しいことなどを気軽に共有できるものです。(色んな機能の中でこれのアクセスが結構な割合を占めてるらしい)

しかし、あくまでこれはオープンな繋がりができるもので、その場限りの会話で終わってしまいます。そこで僕らは、就活生同士のクローズドでかつ深い繋がりを作れる機能が欲しいと考えました。

そして僕らは、グループを作成して承認制でグループに入ってチャットできる機能、「外資就活クローズドコミュニティ」(そのまま)という機能を作ることにしました。

例えば、ある企業のサマーインターンの決定者同士でグループを作って、インターンの前に仲良くなってご飯とか行けたら、インターン当日も楽しくなりそうじゃないですか?

そんな未来を描いて、一日目の企画を終了します。

 

2〜5日目(開発)

企画が終わり、いよいよ開発です。

といってもまずはDBと画面の設計ですね。

これまたドメイン駆動設計的な知識が少し活きて、まずどんな登場人物(ドメイン)があるかな?というところを考えました。進研ゼミより進研ゼミしてました。

細かいところは長くなるので割愛しますが、画面、テーブル構造は全員で話し合って大まかに決めたあと、APIのインタフェースをバックエンドで、画面の詳細をフロントエンドで作りました。(フロントエンドの人が初めてのfigmaだったのに爆速で作ってくれて神すぎた)

 

大体の仕様が固まったらもう、ひたすらに開発。

バックエンドの2人はgoが初めてだったので、最初はペアプロしてなんとなく一緒にコツを掴んでいきました。

今回そこまで複雑なDB操作を実装するわけでもなかったので、責務を何層かに分けるクリーンアーキテクチャの恩恵をあまり感じられなかったというのが正直な感想です笑

単一リソースのCRUDとかだと、いわゆる変数のバケツリレー的なことが起こり、「こんな色んなとこに値渡して何の意味があるん?」とか2人で愚痴りながらやってました笑

 

とはいえ、開発するにつれて、何の処理がどこに書いているか、という見通しが立てやすいと感じます。(APIリクエストのバリデーションをするなら、一番外側の層に書けばいいよね、的な)

これを分かっていると、自分以外の人が書いたコード、自分で書いたけど昔すぎて覚えてないコードに付け足していく際に開発しやすいですね。とてもクリーンですね。

クリーンアーキテクチャお馴染みのあの図の中で、今どこの層を書いているかを意識するとやりやすい気がします。

 

f:id:masamichhhi:20201123151539p:plain

おなじみのコイツ(詳しくはこの辺を参考に→

図解クリーンアーキテクチャ - Qiita)

 

そんなこんなで、あっという間に金曜日(発表は次の月曜日)になります。

ぜんっぜん、終わってません。笑

APIは一通り作ったんですが、フロントがなかなかしんどそうです。単純に1人しかいないし、react+redux sagaとか使っていて相当作業量多そう、、

 

僕も割とreact触ってたし、バックエンドのもう1人も結構やってるらしい。

もうこうなったら、3人でフロントやるしかないっしょ!ということで、3人がかりで片付けにかかります。

 

しかしこれを始めたのは、金曜の夕方あたり笑

満場一致で、土日もやることになりましたとさ。

 

そして迎える最終日

 

土日必死にやって、最終日を迎えました。

発表はお昼頃なので、それまでに発表準備を終わらようという算段。

なのですが、

フロントまだまだバグだらけ!!!

 

特に、APIとの結合が上手くいかない笑

一番大事なところがうまくいかずこれじゃデモも見せれない、、

 

しかし、時間だけはどんどん過ぎていきます。

チャット機能だけ辛うじて動くのですが、それ以外はほんとに動きません。redux sagaでうまくstateの更新ができないのです。(原因は今もわからないまま、、)

発表の1、2時間前になっても解決せず、結局APIと結合できなかったんです 😢

 

ですが発表は動いてるものが見せたいので、APIを全部モックに置き換えます(笑)

実は、フロントが開発しやすいように、API Blueprintというツールでモックを作っていました。ドキュメントを書くと勝手にモックサーバーになってくれる便利な代物です。

要は、毎回書いた通りに決まった値を返してくれるだけのハリボテです。DBは一切いじりません。

発表までの残り一時間ほどをつかって、作った8割以上のAPIは、モックに置き換わりました。(笑)

 

発表内容に関しては、僕とバックエンドの人もうひとりがバグ潰しとかしてる間に、フロントの人が大体準備してくれてました。神すぎる。ありがとう。

その人がプレゼンを作るときに使ってたCanvaというサービスがめっちゃイカしてました。テンプレートを選んで変えてくだけで、超カッケースライドが作れます。

 

そして発表。ここに関しても、フロントの人がだいぶ引っ張ってくれて、作った機能、なぜ作ったか、どういうところがユーザーファーストか、将来はこうしたい、などを伝えました。

動作デモも動くかドキドキでしたが、なんとかチャット機能とかは動いてくれました。モックで実装しているところは、あたかもデータが作られている体でゴリ押しました。笑

 

他のチームの発表も見たのですが、どこもめちゃすごかったです。特に、企業の雰囲気や給与などのデータを、グラフで見せてその企業の傾向などをひと目で見れる機能を作っているチームがいて、強すぎました。一週間でなんでそんなできるんや。

 

濃厚な1週間の成果を全チーム発表し終わり、役員の方々による審査で優勝チームが決まります。

 

結果は、、、、

優勝!!!!!!!!!

 

f:id:masamichhhi:20201123020445j:plain

賞状と賞金もらいました

 

たとえ実装が終わってなくても、見せ方次第では上手くいくもんですね。(笑)

やはり、ユーザーファーストを意識している点を評価していただけました。

 

終わりよければ全てよしということで、無事にこのインターンを締めくくる事ができました。 

 

感想

ベンチャーはやることが多そうだけど楽しそう

今回のハウテレビジョンという会社は、サービス自体はすごい勢いで成長しているものの、エンジニアの数はまだそこまで多くなさそうでした。おそらくこれからエンジニアの採用は増えていくものの、ある領域に特化していればいい、というより、やらなきゃいけないことなら得手不得手関係なくやる、という雰囲気でした(個人の意見です)。

結構僕はそっちのほうが楽しそうだなと思います。全員がいろんな箇所を知っていた方が、チームとしてはまとまって開発出来るような気がしています。しかも僕のようなまだ自分の得意不得意がわかっていない人なら、それを見極めたりエンジニアの総合力を上げたりするいいきっかけにもなりそうですしね。

チームメンバーがすごすぎた

ほんとにすごい二人と一緒にチームになれました。なんというか、二人とも思考のスピードがすごくて、何事も機敏にこなしていけました。開発に入ってからもすごいスピードで進めていけて、めっちゃ楽しかったです。

こういう優秀な方と一緒になると、すごいモチベーションになります。オフラインで実際あって色々喋るとなおさらです。このような刺激的な経験が出来るのは、サマーインターン特有のものですね。

 

オフラインで開発するほうが楽しい

このインターンの前の週までに行っていたChatworkさんのインターンはオンライン開催でチーム開発をしました。2つを比べると、やっぱり実際にチームメンバーと顔を合わせてやる方が断然刺激的で、楽しかったです。

オンラインだとどうしても、必要な時以外はコミュニケーションを取らなくなっちゃうんですよね。実際集まって一緒にお昼食べたり、雑談しながら開発したりする重要性を痛感しました。

 

 

お昼ごはんおいしかった

お昼は基本的にお弁当が出たのですが、どれもめちゃんこ高そうな弁当でした。

特に初日の叙々苑の焼肉弁当は、最高でした☺️

f:id:masamichhhi:20201123034943j:plain

じょじょえん

 

おまけ

チャット機能を作ってる時に生まれた、激ダサデザインがおもろかったので置いときます。

f:id:masamichhhi:20201123154542j:plain

激ダサチャット画面