はてなリモートインターン2023に参加しました
https://hatena.co.jp/images/intern2023/entry/ogimage.png
はじめに
はてなリモートインターン2023に参加しました
https://hatena.co.jp/recruit/intern/2023
業務パートでははてなブログチームに配属されて開発をしていました
はてなブログの記事にMastodonとMisskeyのシェアボタンを追加できるようにしました - はてなブログ開発ブログを実装しました
https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20230907/20230907175153.gif
みんなも使ってみてくださいね♪
これはその振り返り記事です
じゃあこの記事もはてなブログに書けよという問題については,まあ私はROM専だから.許してくれたまえ
他の人の記事
https://blog.fujishan.jp/entry/2023/09/08/200000
動機
発端
5月初旬,書類ミスで院試を受けられないことが発覚したため,どう考えても1年間の空白が開くことが確定してしまった
仕方ないので働くか!と思い,そういえばインターンとかって行ったこと無いなと思い,とりあえずはてなに応募した
記憶が無いですが,これのエントリーのやつはサッと書いて終わらせた気がします
「6月前半に面談をします」という連絡が来ました
なおこの辺りで制度が変わって今年院試を受けることが出来ることがわかった
しかし,スケジュールがドンピシャで被るということが発覚
面談
当時作っていたOTOMADBの話をメインにした記憶があります
自分で言うのもなんですが結構デカいプロジェクトになっており,アピールポイントになるかな〜と思ったので
これの話やリポジトリを見せたら「すごいな〜」という感想をもらえて良かったです.
何も考えてなかったが,OtoMADBのトップページが終わっているという可能性を考慮し忘れていたので,本当に危なかった
皆さんも個人開発とかを見せるときは外面とかを気にしたほうが良いですよ♪
個人的にはてなブログで終わっているオタクの記事ばかり読んでいるので,はてなブログには思い入れがあり,第一志望はそこですという話もした
院試と被るかもしれないんですけど大丈夫ですかね?と訊いたら融通はある程度ききますという返答を貰えて良かったです.
インターン採用 
面接の当日か翌日に採用!という連絡をいただきました
早すぎる!と思い逆に不安になっていた
今年は人事の人がメチャクチャ頑張ったらしいです
日程
1週目
2023.08.21: 講義パート1日目 & 歓迎会
2023.08.22: 講義パート2日目
2023.08.23: 講義パート3日目 & 自主課題
2023.08.24: 自主課題
2023.08.25: 東京へ…
2週目
2023.08.28: この辺で精神が崩壊する
2023.08.29: この辺で精神が崩壊する(2)
2023.08.30: 業務パート1日目
2023.08.31: 業務パート2日目
2023.09.01: 業務パート3日目
3週目
2023.09.04: 業務パート4日目
2023.09.05: 業務パート5日目
2023.09.06: 業務パート6日目
2023.09.07: 業務パート7日目
機能リリース!
2023.09.08: 成果発表 & 振り返り ← 今ココ
講義パート: 2023.08.21 ~ 2023.08.23
次の講義を3日間で流し込まれました
Web/HTTP
Web API
インフラ
コンテナ
k8s(コンテナオーケストレーション)
ソフトウェアアーキテクチャ
RDBMSブートキャンプ
フロントエンドブートキャンプ
はてなのビジネス
Perlブートキャンプ
しばらく講義がなかったのですが,大学のリモート講義みたいでずっと気を張っていて大変ではありました
知っていた分野でも意外と漏れがあったりしたことの確認となったり,忘れていた知識を思い出すのによかったと思います.
意外にも(?)面白かった講義ははてなのビジネス講義だった.
今年から実験的に導入された講義だそうです.
はてなのビジネスモデルやはてなブログの収益ってこうなってるんだ〜みたいなことを知れたりして,新鮮でした.
なんだかんだPerlはこの講義で初めて記法を見たので,変すぎる!と心から思っていました.
自主課題について: 2023.08.23 ~ 2023.08.24
例年毎年恒例の,マイクロサービス化されたブログアプリケーションと対峙する課題をやりました.
具体的には
アカウント管理
ブログ記法のHTMLへの変換サービス(renderer)
タイトルの自動取得サービス(fetcher)
などがk8s上で立っており,gRPCでサービス間が通信し合ってブログアプリケーションとして成立しているという世界観です.
やったこと
ここは気になる人だけが読めばいいです.
1. まず,Markdown文字列を受け取ってHTMLを吐き出すサービスrendererを作ることが直近の目標
GolangかTypeScriptを使える(もちろん他の言語でも構いませんが).
慣れているのでTypeScriptを使うことにします
が,開発環境の都合上ESMを使うことが出来ないので,remark 系列のあるバージョン以降は利用できない
https://github.com/remarkjs/remark-rehype/releases/tag/9.0.0
そのバージョンをいちいち調べるのも面倒なので,markdown-itを使ってサクッと終わらせました.
これは2時間ぐらいで終わった気がします.
このとき一応ちゃんとテスト駆動開発でテストを書いて開発していました.
2. その他,開発環境のeslintやprettierの設定が微妙だったので細々とはしているが少し修正して開発体験を上げました
3. Markdownに独自記法を導入するのをサクっとやりたいなと思い,$T \vdash G$の様に書くと$ T \vdash GといったものがKaTeXで表示される,すなわち数式を表示したいなと思い導入しました
Markdown-itではこれを導入するとサクッと出来て良かったです.
https://github.com/goessner/markdown-it-texmath
https://gyazo.com/0baa66946f71cd28349f5189b7c0850a
4. スタイルが当たってなくて終わっているのでスタイルを当てる
TailwindCSSを使いたかったが,バンドラというものはないので素朴にCDNから引っ張って当てるぐらいしか方法がなかった
デカいファイルが降ってきて終わるので,TailwindCSSを使うのは諦めた
しょうがないので自力でCSSを書いて誤魔化した
色とかはCSS変数として定義して,prefers-color-schemeを使ってダークモード/ライトモードに対応するなど少し凝ったことをしていた
GolangのEchoというフレームワークで静的ファイルを配布する方法がよくわからなくて微妙に詰まった
https://echo.labstack.com/docs/static-files#using-echofile
原因としてはDockerfileでCOPYを忘れていたみたいな微妙なミスだったが…
5. リンクからタイトルを引っ張って自動挿入する
[](https://scrapbox.io/sno2wman)と書いたら[Internet Explorer 2.0](https://scrapbox.io/sno2wman)みたいに自動でタイトルを引っ張ってきて欲しいという課題に取り組む
これはfetcherというサービスとして切り出して実装する
TypeScriptでサービスを書こうとした
実際,機能自体はサクッと簡単に実装できた
大雑把にはfetchしてきたhtmlファイルをjsdomなどで読ませて<title>だけを持ってくる
もっとマシな方法はあるハズ
が,Protocol Buffersでエラーハンドリングまで考慮したprotoファイルを書いて生成するコードが全然ハチャメチャなコードを吐きだしたりするなど,gRPC周りでグニャグニャに消耗してしまった
要するに失敗した.
しょうがないので全く慣れていないGolangでサービスを書くことに…
本当に慣れておらずメンターの方に全部訊いていると大変なことになりかねないので,ChatGPTにこれどうしたら良い!助けてー!と訊きまくるといったことに
Golangでテストまで書いたコード初めてだったので,なんだこのテストの書き方?!とは少し思いました.
httpmockというGolang用のHTTP mockライブラリを使ってモックしたりしました
https://github.com/jarcoal/httpmock
なんとかfetcher-tsが完成
が,ここでmarkdown-itを使っており,プラグインを書くのが破滅的に大変であることがわかったので,結局remarkに移行することに
数式描画の機能のテストで正規表現を使って/.*/みたいにしていたらテストをすり抜けるなど全然テストとして役に立ってくれていなくて惨憺たる結果になってしまった
これの結果無駄な時間を食ってしまった
更に問題があり,renderer-ts側のremarkのプラグインでgRPCのclientを取り回す必要があるが,これをするためには甚大なコードの改修がいることが発覚し,仮に書いても細々とした修正を入れていたらどう考えても間に合わないことがわかってしまった
結果,この辺りで時間切れに.
反省点
要らない再設計が多すぎ!
TypeScriptでfetcherを書いたものが全部おじゃんになった
markdown-itをremarkに置き換えた
所感
とはいえ楽しかったです!
Codespaces上でやっていたのでk8s(minikube)の導入が全く要らなかったというのもデカい.
東京へ: 2023.08.25
久々に新幹線に乗った
はてなの本社がある表参道へ
オシャレな街だな〜と思いました
本社では前半課題の講評や,はてなの社員さんとの昼を食べたり,所属されるチームの顔合わせ,ほたてなどがありました.
ほたてというのははてな社の中での業務の見せあいみたいなイベントで,略は以下らしいです.
『Hot』な『Task』を『手がけた』従業員を表彰するから、その頭文字を取って『ほたて』と呼んでいます」
https://cybozushiki.cybozu.co.jp/?p=12213
ジュース飲み放題なのでドデカミンを3本飲んでたら完全に異常者みたいな目で見られた.
夜は社長会ということで社長の栗栖さんやmotemen氏らとインターン生で食事処に行きました,が…
私が好き嫌いが多すぎ(生野菜や魚など)
新幹線に乗るため早朝に起きて眠い
院試のことで頭が完全に支配されいた
などの様々な事情で体調を崩し,早抜けしました.
申し訳ありません.
精神が崩壊: 2023.08.28 ~ 2023.08.29
本来ここから業務パートですが,私は院試があるので休みを頂きました.
院試については体調不良もありグチャグチャになり,精神が終わった.
業務パート: 2023.08.30 ~ 2023.09.07
気を取り直して業務パートへ.
実装した機能
冒頭でも述べましたが,これを実装しました.
はてなブログの記事にMastodonとMisskeyのシェアボタンを追加できるようにしました
https://cdn-ak.f.st-hatena.com/images/fotolife/h/hatenablog/20230907/20230907175153.gif
所感
あまり詳しいことはどこまで言っていいのかよくわかりませんので,所感だけを述べておきます.
背景として,残念ながらTwitterが終わってきているというのはなんとなく肌感であり,代替SNSであるMastodonやMisskeyに移住していく人が増えています.
はてなブログとしては,それらSNSへのシェアボタンをお膳立てすることで.ブログ記事の共有をもっと手軽に行って拡散出来ると良いのではといったことを企画しました.
どういう機能を実装するかはある程度2023.08.25に方向性を決めたので,後はそれに向かって開発していくという形です.
基本的にインターン生2人で同じタスクに取り組むので,VSCode LiveShareでペアプロするという形式になりました.
LiveShareでの開発はフォーマッタが効かなかったり,ローカルでは何も動いていないので現在のコードをこちらでは試すことが出来ない(当然)といった,微妙に不便なところもあって少し大変だったです.
個人的には,同じチームでインターンをしているfujishanさんのスピード感が異常に早かった!
自分は慎重というかあまり勇み足になれませんでしたが,そういるうちにfujishanさんはどんどんPRとか調査をガンガンしていくのでずっとウォーとなっていました.
一方私は支給されたMacBookの操作に戸惑っていたり,あまり開発速度を最後まで上げることが出来ませんでした…
https://gyazo.com/1f0c2da8f31edb6d11326f69f5730312
基本的にfujishanさんのLiveShareに入っていたのでCo-Authorとなっており,メチャクチャ何もしてない人みたいになってる図
実際には2500行ぐらいのコード追加/削除があります.
実装に関してははてなブックマークの実装を参考にしました.
WebFingerというものがあり,それをどうにかする,みたいなことをやっています.
remark:なんでそんなことをしているかはfujishan氏の参加ブログを読むといいかもしれない
Perl絶対無理だな〜と思っていたのですが, 
メンターの皆さんの手厚いサポート,及び,既存のコードの資産から適当に検索することで大体やりたい実装やテストコードがあったりするので,それを参考にすることでなんとかやっていくことが出来ました.
Reactならなんとかと思いましたが,
意外と期間が空いたのもあったり,レビュアーさんから「これって別にこうでよくないですか?」といったレビューを貰ったりして「確かにそうですね…」みたいなことが結構あったので,トホホ…という感じがあります.
2023.09.07にとりあえずリリース出来る段階になったのでリリースしました!
とはいえ,当初のスケジュールではもっと機能があったハズなのですが,残念ながらそれらの機能はオミットしてリリースせざるを得なかったのが歯痒かったです.
楽観的にスケジュールを立てたつもりはなかったのですが,リリース前の確認などを丁寧にやっているとやっぱり時間がどんどん溶けていくんだなあと思いました.
その日の夜や翌日いろいろフィードバックを貰えたのですが,全体的に好意的な評価で良かったです.
作ってよかった〜
メンターとしてfurutsukiさん,nakatakiさん,その他ブログチームの皆さん,2週間弱ありがとうございました!ここでお礼申し上げます.
成果発表 & 振り返り: 2023.09.08
fujishanさんがメチャクチャ場馴れしててスラスラ発表してたにも関わらず自分はモタモタしてて申し訳なかった
ほたてではほたて賞(投票数1位)をもらえました
やったー!
個人開発でこういう表彰貰えることは無いので良かったです
全体的な感想
このインターンでは,Perlを除けば何かウォーとなる具体的な新しい技術が何か身についた,というわけではないです.
しかしながら,膨大なコードと対峙する方法や,チームで開発していくことの楽しさや難しさを体験することが出来ました.
これらの体験はやっぱり個人開発ではあまり得られる体験では無いと思うので,そうした体験が出来ただけでも自分としては新鮮な気持ちがありました.
レビューなどでしっかり対話をしないといけないというのは大変ですが,自分が理解してなかったり誤解していたところが確認できるというのは良かったですね.
個人開発では究極的にはリリースがいつになってもいいですが,業務ではそういうわけにもいかないので,しっかりスケジュールを立てたり,また余計なところに時間をかけないようにリリースがかなりシステマティックになっていたりといったところも面白かったです.
他のチームではリリースが残念ながら上手く行かなかったチームもあるそうなので,今回我々のチームではとりあえずリリースにまで漕ぎ着けたのは幸運だったと思います.
はてなブログはユーザ数も多いので,リリースした直後によい感想を貰えたり,機能を有効化して頂けたのは嬉しかったです.
自分が携わった機能がリリースされて良い反響を頂けるとやっぱり嬉しいですね.
末筆ですが,インターン運営やメンター,講義パートで講義を行っていただいた皆さん,3週間という短い期間ではありますが,ありがとうございました!
余談
ここからは余談です
はてなではScrapboxをムチャクチャ活用しているというのは入ってから知った
チームごとにProjectがあり,私が入ったブログチームでは5000個ぐらいページがあった.
「これってなんでこうなってるんですか?」みたいな歴史的経緯とかはScrapboxを調べると出てくるのが面白かった
はてなIDはケースセンシティブで,sno2wmanではダメでSnO2WMaNとしないとダメだということに結構後から気付きました.
皆さんは,スケジュールをちゃんと立てて行動しましょうね♪