はてなリモートインターンシップ2021 体験記
夏！ということで今年の夏は、はてなリモートインターンシップ2021に参加し、マンガチームでGigaViewerに新機能を実装してきたりしたので、それについて記します。
9/3のうちに出せればよかったのですが、ボケーッとしてたら終わってました。次の週までダラダラと書いていましたが気づけば1万字超えの大作です。とりあえず目次をおいておくので結論まで飛べます。
はてなリモートインターンシップとは
株式会社はてなが毎年実施していた、京都オフィスでの合宿形式のインターンシップを、コロナ禍に合わせリモート形式に切り替えたインターンシップです。
今回は3週間で、最初の1週間は、社員さんからはてなで利用している主な技術に関する講義が実施され、残り2週間は、ブックマーク・マンガ・ノベル*1・システムプラットフォームの4部門に2人ずつ配置され、実際のプロダクトの開発作業を行います。
私はマンガチームに配置され、GigaViewerというマンガサイトプラットフォームの開発を行いました。
応募から参加まで
今までインターンに参加したことはなかったのですが、今年こそは参加するか〜と思い立ち、魔法のスプレッドシートを眺めていたのですが、2020年度のインターンに参加したid:SlashNephyからはてな良かったよ〜みたいな話を聞いた気がして、応募することにしました。
コースのやりたい順のフォームを埋めて提出するのですが、なかなか決まらず応募自体は6/13と締め切りギリギリでした。第1回の締め切りのときにはインターンのことが頭になくスルーしていました。
メール内では1週間以内に返信をするとのことでしたが、2日後の6/15にぜひお話と返信をいただき、面談をすることになりました。
面談では最初に人事の方から軽く流れを説明いただき、その後エンジニアの方にバトンタッチして1時間程度話しました。エンジニアの方とは、自分がどうしてプログラミングに興味を持つようになったのかということや、これまでの経歴、作ったもの、やってきたことなどを話した記憶がうっすら残っています。
また応募時に記入していたGitHubやScrapboxを見ていただけたようで、制作物や興味分野などはスムーズに伝わった印象がありました。
季節柄気温が上がってきていたので、エアコンを掛け忘れていた私は面談がを終わるころにはすっかり汗だくでしたが、自分について話し尽くしたことで経歴を棚卸しできたような感覚があったのを覚えています。
最後には確か1週間かそこら以内には結果を連絡すると言われましたが、面談が終わってシャワーを浴び上がってきたら合格を知らせるメールが届いていたので、スピード感あるなあと思っていました。
その後はIDなど参加に必要な情報を返信し、参加の手続きを進めていきました。インターン応募の連絡にはOutlookのメールアドレスを使っていたのですが、参加決定後の連絡に指定したGMailは普段遣いのアカウントでなかったためあまりチェックしておらず、インターンで使用するScrapboxテナントやSlackテナントへの参加が遅れてしまった、というミスエピソードがあります。
開始の前に余裕を持ってBig Surが入ったMacBook Pro (15-in, 2017)と、はてなTシャツ、はてなステッカーが届きました。MacBookにはなぜかポケモンシールが貼ってありました。
1週間目：講義・演習課題
最初の1週間（8/15〜6/20）は講義・実習パートで、社員さんに変わり代わり講義していただいたあと、得た知識を用いて実習を行うという期間でした。
【お知らせ】
— hatenatech (@hatenatech) 2021年8月16日
はてなリモートインターンシップ2021、本日より開始致しました！🍉
今年もオンラインで熱い夏を過ごしていただけたらと思っておりますので、3週間どうぞよろしくお願い致します🌞
尚、インターンの様子は #hatenaintern2021 のハッシュタグで呟いていきますのでご活用くださいませ🌻 pic.twitter.com/OZK3G1PcCl
初日は「WebAPI」「デザイン」「インフラ」「コンテナ」と全部合わせてみっちり6時間の講義がありました。飛ばすなあ〜と思いながら受けていましたが、今思えば1週間で必要知識を詰め込むにはこのペースじゃないと間に合わなそうです。
その後の日程でも「Kubernetes」「マイクロサービス」「RDBMSブートキャンプ」「フロントエンドブートキャンプ」などの講義があり、みっちりで疲弊はするものの、手を動かすだけだった自分にとっては体系的に技術を学べたのはとてもよかったです。
この講義で使用された教材（スライドなど）については後日公開予定とか公開予定じゃないとか聞いています。おそらく@hatenatechで言及があるはずなので気になる方はCheck it out!!
演習課題
水曜日（8/18）には、マルチテナントなブログサービスの雛形としてhatena/Hatena-Intern-2021-Templateが用意され、それをもとに実装していく演習課題に取り組みました。
課せられた課題（docs/exercise.md）には必須のものとして「記法変換サービス」、任意のものとして「タイトルの自動取得サービス」が設定されていました。
「記法変換サービス」はブログエントリとして入力されたプレーンテキストに、マークアップ処理を施すように書き換えるというものでした。テンプレートの時点でレンダラーサービスは受け取ったプレーンテキストをそのままオウム返しするようになっており、デフォルトでGoで実装されたrenderer-goが使用されていて、任意でTypeScriptで実装されたrenderer-tsを使用するように切り替えても良いというものでした。
私はTypeScriptのほうが得意だったので、レンダラーサービスをrenderer-tsに切り替え（PR）、Scrapbox記法を解釈するような実装を入れました（PR）。Scrapbox記法の導入にあたっては生のフォームを経由してきたテキストの改行コードの問題で少し悩まされましたが、メンターの方に相談して割とすんなり解決しました。
デフォルトではスタイルが一切適用されておらず見てくれが悪いので、Tailwindの導入を目論んだのですが、エントリを受け取ってhtmlをレンダリングする部分は素朴なhtmlテンプレートとGoといった組み合わせになっていました。置換している暇もないので、最初はstyleタグでTailwindのすべてを読み込み、レンダラー層でクラスによるスタイル当てを行い、素朴なhtmlテンプレートを書き換えていくという実装をしたのですが、これが思ったより苦痛でした。
どうしたものか、Bulmaでも入れようかと思っていたら、メンターの方の1人がno class cssという概念を教えてくださり、事なきを得ることができました。今回はnew.cssを使用しました。Tailwindは剥がしました。
応用課題としてScrapbox記法のパースライブラリを触り、Twitter記法（[🐣 https://twitter.com/ci7lus/status/1428191855129219077]）を追加したものを参照するようにし、ブログサービスで使用できる記法を追加しました（ブランチ）。
レビューでは、mizdraさん、YaaMaaさんに対応していただきました。
AWS 講義
木曜日（8/19）には、AWS Japan Solution Architectの方が（Zoomに）いらっしゃり、EKSハンズオンということで上記演習課題で開発したサービスをEKSへデプロイする手順を講義していただけました。
講義自体がAWSとEKS周りの学びになったのはもちろん、実施後の質問時間でAWSで個人的に気になっていた事柄について質問できたのも嬉しかったです。
Solution Architectに無料で相談できるオンラインの何かしらもあるらしいので宣伝しておきます。
配属
1週目の最終日（8/20）にはついに配属の発表があり、ここでid:toutounodeさんと私の2人のマンガチームへの配属が発表されました。
第1希望をマンガチームで出していたので、希望通りの配属になり嬉しかったです。
2〜3週間目：サービス開発
後半の2週間（8/15〜6/20）は、配属されたチームで実際のプロダクトのコードを触りながらサービス開発をする期間でした。 マンガチームでは、現時点で10とちょっとぐらいの漫画サイトに展開されているGigaプラットフォーム、通称GigaViewerを開発していて、今回のインターンではGigaに新機能を入れ、インターン最終日の最終成果発表会でそれについて成果発表をするというのが最終目標でした。
当然ですが、考えついた機能を片っ端から実装するわけにはいきません。企画を立て、それを実現できるか・どうしたらいいかを話し合い、実装に落とし込んでいく必要があります。
今回はインターン開始時点で、既にチームメンバーの方が「ファンレター機能」を企画として完成させ、実装を残すのみという状態にしてくださっていたので、まずはその実装から取り掛かることになりました。
ファンレター機能
ファンレター機能とは、簡単に言うと作家さんに対してプライベートに長文メッセージが送れる機能です。
画像の通り画面的にはGoogle Formへのボタンなので実装工数としてはそんなに多くない上に、Gigaの大きな特徴であるFeature Toggle（くわしくはこちら）を使用するので概念がつかみやすく、良い課題を設定してもらったなあと思いました。Gigaはそのほぼ全てがPerlなのですが、Perlを書いたことがない私でも割とすんなりかけるような枠組みとテストと使用例が揃っていて、あまり苦労しませんでした。
このフォームからメッセージを送ると編集部に届き、編集部チェックを通ったものだけが作家さんに届きます。あんしんです。
リリース
機能ができたらすることといえば…そうです。リリースです。
ブランチ周りのリリースはある程度自動化されており、開発用ブランチをプロダクションにマージするPRが生えてきます。もしかしたらトリガーは人力かもしれないです。
そこでSlackのリマインちゃんというのを動かすと、そのマージに巻き込まれているPRすべてのAuthorに動作確認のタスクリストが生え、それらすべての確認が取れるとマージしてよい、というフローになっていました。
プロダクションへのデプロイに関しては結構手動な部分がありましたが、CIで自動化するには少し無理のあるタスクなども散見されたので仕方なさそうです。
そして無事リリースが終わるとみんなでくす玉を割ります。オフィスの頃は物理的なくす玉を割って祝っていたそうなのですが、オンラインではインターネットくす玉を割りました。
最初のリリース先はコミックトレイルさんでした。
アイデア出し
次に入れる新機能を決めるため、チームでスプレッドシートに需要と対応する機能をひたすら書きました。今見たら42個ありました。しかし、この中で投票して1番票数が集まったものを実装する…とはいきません。
なぜなら、GigaはいわゆるBtoBtoCのプロダクトなので、機能やデザインなどすべての要件においてBの編集部・出版社さん側の意向を十分に汲む必要があるからです。
詳細は省くのですが、上記のスプレッドシートでこれが良いのではないか、これで進めようとなったアイデアがあり、プランナー・デザイナー・メンターさんからも良さそうですね〜これでいきますかといった反応をもらい、進めようとしていたアイデアがあったのですが、1時間かそこら後にポシャったという出来事がありました。
これは直接アイデアを相手側に伝えて拒否されたというわけではなく、マンガチーム内での議論の結果、提案も難しいとの結論が出たとのことでした。関わっている人が多いプロダクトには、様々な難しさがあることを強く意識させられる出来事でした。
その後アイデア決めをやり直し、結果「エピソードコメント機能」で行くことになりました。
エピソードコメント機能
Gigaでは、コメントは作品毎に共通しており、どのエピソードを閲覧しても同一のコメント欄が表示されていました。
しかし、最新話が有料、その1つ前の有料としているような作品では、最新話を購入してみている人が感想を共有しようとコメント欄に書き込むだけで、無料話を閲覧している人へのネタバレになってしまう可能性があったり、そもそも1話から読み始めた人がうっかりコメント欄を見てしまい、ネタバレを食らってしまうこともないとは言えません。
そこで、エピソード別にコメントができる機能が重要だと考え、課題として採用しました。
またコードが大きく、テストが膨大に記述されているプロダクトでは、破壊的変更を行うとテストの修正/追加・挙動の維持・プロダクションへの反映/マイグレーションなどで、工数が非常に大きくなってしまいます。限られたインターン期間中で機能を実装してリリースするには、いかに互換性を保ちながら新機能を追加するのかがカギでした。
なのでこの機能は、テーブルの追加や必須引数の追加をできる限り回避することで、大きな書き直しを回避しながら実装しました。
しかしこれがなかなか難しく、マンガチームの基本的なリリースルールとして、事故を回避するために木曜の午後のリリースを最後としてマージブロッカーを動かし、それ以降の開発用ブランチを触るのを禁止するというものがあるのですが、最終週の木曜午前に完成させるつもりでいたら突然間に合わなそうなことがわかり、祭りが始まりました。
とにかく最終成果発表会にリリースを間に合わせるべく、まずはマージブロッカーを特例で解除、他の手の空いている社員さんたち*2を呼び寄せ大急ぎで実装、落ちたテストをひーこら言いながら直し、しかも発表会用のスライドも作らなければなりませんでした。ここらへんにもちょっとした出来事があったのですが、既にかなり長くなっているので今回は省略します。
最終的にはスライドは問題なく出来上がり、ちょうど成果発表会の前後にリリースが出たのですが、これはかなりいい体験になりました。
というわけでエピソードコメント機能はゼノン編集部さんの1作品のみの限定リリースで、様子を見て拡大となったのでした。専用の画像までついた、いい告知を書いてもらえました。
同時期にくらげバンチさんへのファンレター全面リリースも進めており、たしか同じリリースで行われた気がします。これもかなりいい告知を書いてもらえました。
発表会
少し前後しますが、発表会についても軽く記します。
大急ぎでid:toutounodeさんと発表資料を作り、準備不足で挑んだ自覚はありましたが、どうにか成果を発表することができました。
自分は発表時の記憶が薄れてしまっているのですが、なんかいい感じいい感じと言われていたので、いい感じだったみたいです。
ほたて的順位で言えば2位を頂きました。優勝できなかったのは悔しいですが、優勝したノベルチームは優勝も納得の成果でした。
あと最終日に（ほぼ）サプライズで物理「はてなダイアリー」とはてなタンブラーを頂きました。あとから聞くところによると、どうやらこれははてな文学賞の景品で、レア品らしいです。そうとは知らずタンブラーは速攻開封して普通に使っちゃいました。
はてなダイアリーだ pic.twitter.com/Zku3xo4QSd
— しーな (@ci7lus) 2021年9月3日
こうして、2週間のGiga開発体験は幕を閉じたのでした。
マンガチーム
マンガチームでインターン生として一緒に開発したid:toutounodeさんは、壊れまくったテスト周りをスパスパ高速で修正してくださったのもありますが、何よりチームでアイデア出しをやっているときに出てくるアイデアの数だったり、アイデアを企画に落とし込むときのリスク周りの考慮だったり、所々にエンジニアリングだけでなく企画もバシバシできるぜという凄さがありました。
また、メンターを担当してくださったmizdraさんは2018年のインターン生で、過去の羨ましいインターン話（悔しい）を聞くことができたのはもちろん、期間中はほぼつきっきりで対応していただきました。
そして、デザイナーのtymikiiさんには今回実装した2つの機能のどちらのデザインも手掛けていただき、プランナーのbyororiさんには実装方針/要件でわからないことが発生するたびに爆速で来ていただき、そしてマンガチームのエンジニアさんたちには大変よくしていただきました。最後らへんすごいことになって苦労をかけました。
発表会ではスライドの最後にマンガチームのエンジニア全員に感謝申し上げたのですが、ここでそれをやるといかつすぎるので控えておきます。
全体を通して感じたこと
まず私は、対外的に発信されている「はてな」のイメージと、社内Slackや様々な会話から感じた「はてな」の差というのは、具体的に説明できないぐらい非常に小さなものに感じました。
サービスを通じてネットを体現する企業の風土はとてもネットっぽく、そして全社をあげて「インターン生」をとても手厚く歓迎してくださっているのがひしひしと感じられました。
具体的には上記で散々書いていますが、それ以外の部分でも手厚くしていただきました。
nonpi
遠隔飯サービスnonpiを歓迎会、懇談会、チーム歓迎会、送別会で多分4回召喚して会をやってもらいました。
ビールが全体的にあまり得意でないことがわかったのですが、最後の送別会で適当なチューハイと普通のご飯食べてたほうが満足度が普通に高まることがわかりました。気づくのが遅い。
部活動
Among us部やDJ部などの社員さんたちの共通趣味領域をカバーする独特の部活動にも体験入部させてもらえました。
Among us部ではしばきしばかれ、殺し殺され、陥れられ…久しぶりすぎて知らないステージでしたが、新鮮で楽しかったです。
DJ部ではmasawadaさんがDJVJやってみんかと声掛けをしていたので、前からやってみたかったVJに初挑戦しました。
結局準備不足でOBSとVLCとWebベースのVJツールで映像をガチャガチャしましたが、楽しかったです。
ランチ会
社長（chris4403）と本部長（onishi）が昼に2回ぐらいランチ会というのを開催してくださっていて、20年を迎えたはてなの社外に出せない面白い話が聞けました。
時々しれっと冗談を放たれるので、嘘か本当か判別できないという事態もありました。取締役をじゃんけんで決めたのは本当ですよね？*3
勉強会・賞
技術勉強会やほたて*4も体験参加させてもらえました。
マンガチーム外でのやっていきも知れて面白かったです。
最後に
この3週間のインターンは、身近に触れていたサービスの技術的な面を見れたことや、その超巨大サービスにリリースできたという部分も経験として大きいものの、はてなが20周年を迎えたその記念すべき年に、おもしろネット企業の文化の片鱗を存分に体験できたという部分が非常に大きく感じました。はてなとほぼ同い年です。
下の特設サイトは前述のランチ会で紹介があってそれから読みましたが、とてもノスタルジックでいい気持ちになりました。
このページのはてブにいい言葉の引用の引用があったのでそれをまた引用しておきます*5。
社会はたまたま対面でのコミュ力がある人間が有利になってる。でも、テキストでのほうが上手だって人間は世の中にはたくさんいる。そういう人のためのサービスをおれたちは作ってるんだ - bronson69のブックマーク / 2021年7月15日 - はてなブックマーク
