2022年夏jigインターン2週目（オフライン）を振り返って
こんにちは、無事インターンの1週間を終えることが出来たAチームのよーいちです！
もしかしたら初めて派手に髪を染めて参加したインターン生ではないでしょうか。ヤンキーです。
この髪色、すぐ覚えてもらえるんで別に初印象が気にならないときには便利なんですよ。どこで迷子になっても見つけてもらえます。
この記事では、僕のこのインターンで分かったこと出来たことなど、全部伝えられたらなと思います。次回以降のJigインターンへの参加を考えている方のためになれば幸いです。
参加したきっかけ
この春、2022年3月26日に福井県鯖江市でCyberSakuraというセキュリティ系の大会の決勝戦がありました。僕もその大会に参加したのですが、そこでjig.jp会長の福野さんにお会いし、Jigインターンのお話を聞きました。ちなみにCyberSakuraでは特に僕はお菓子を食べているばかりでまともな働きはしていなかったのですが優秀すぎるチームメンバーに恵まれ、優勝しました。（福野さんはひたすらセグウェイに乗ってる大学生の方だと思っていました。見た目が……若すぎる）cybersakura.jp
その後、2022年5月29日からのゴールデンウィークに開催されたGMO主催のDevSecOpsThonに参加します。インフラハッカソンという形式で、サーバーラックの組み立てからWebサーバの構築まで様々なセキュリティ対策やパフォーマンスなどの課題点を配慮しながら点数を競うイベントでした。僕の髪は明るいので非常に見つけやすいですね。このときは茶髪でした。ここでハックツのドリーさんと出会います。ドリーさんはJigインターン出身者のようで、Jigインターンの素晴らしさをひたすら語ってくれました。prtimes.jp
こういった経緯から、Jigインターンへの参加を決めたのです。
選考課題
Jigインターンに応募すると、まずメールで選考課題を受け取ることになりました。
選考課題は、聞いたこともないdenoというJavaScriptやTypeScript、WebAssemblyのランタイムを用いてしりとりアプリを作成し、Deno Deployにアップロードせよという物でした。
チュートリアルの後に出来うる限りカスタマイズをと書いてあって、ずっるぅと思ったのは記憶に新しいですね。僕はこういうカスタマイズ好きなだけできるものには無限に時間を費やしてしまう性格なのです。かといってせっかく作ったのに落ちてしまっては元も子もありません。
フロントエンドもバックエンドもインフラも僕は基本器用貧乏で特化したものがなく、他の人より優れた何かを作るアイデアもなく、困り果てたのでそこをプロダクトではなく時間と根性と技術で解決しようとしました。基本的にバックエンドをできる人は少ないはず、ならバックエンドで攻めてみようという試みからバックエンドが重要になってくるしりとり、オンライン対戦を選びました。
作成物を決めてデザイン案をAffinity Designerで清書したのはよかったのですが、バックエンドのフレームワークで良いのがありませんでそもそもdenoのバックエンドフレームワーク自体希少で情報量が少ないです。いざとなったらソースコードを見て理解できるものがいいです。しかし、アノテーションが多いフレームワークはソースコードを読んで理解するのは難しく、他のフレームワークもドキュメントに乏しかったりと難のあるものばかりでした。
唯一気に入ったフレームワーク、mandarinemandarineというものがあったのですが、更新が1年以上前で、実際に動かしてみると依存パッケージが削除されてしまっているのか動かなくなっていました。ORMとして唯一見つかったdenodbも依存パッケージがなく、動かなくなっていました。悲しいです。
ここで、諦めて普通にフレームワークを使わずに書こうという考えは、フレームワークを使わずにサーバーサイドを開発したことがなかったお坊ちゃんな僕には思いつきません。
なんと、サーバーサイドフレームワークを自作しました。実用には耐えませんが、自分一人しりとりを作るくらいであればギリギリ使える程度のものです。頑張って作ったのでよかったら見てみてください。Laporgithub.com
機能的には、REST APIのルーティングとWebSocketのルーティング、MiddlewareやController、Sessionなどの基本的なよくあるMVCフレームワークの機能が備わっています。
僕の大好きなサーバーサイドフレームワーク、Server-Side Swift Vaporを参考に作成しました。いやぁ全ての機能をLaporに入れたかったんですが、TypeScriptとSwiftじゃ言語の格が違いますね。extensionやpropertywrapper、keypath、演算子オーバーロードなどの素晴らしすぎる機能が備わったSwiftじゃないと出来ないような表現がありますから。CodableのようなJSONとオブジェクトの詰め替え機能を実装しようとしたのですが、JSの機能をどんどん掘り下げて調べていっても階層構造が1段階までのCodableを作るのがやっとでしたね。vapor.codes
サーバーサイドフレームワークを自作するのが楽しくて時間を忘れてしまい、メインのしりとりを作成する時間がなく、だいぶ適当なものになってしまいました。どうしても使いやすさ的にここは関数のオーバーロードをTypeScriptで実現したい（JavaScriptにはない機能）とかやってると型パズルの罠にハマってだいぶ時間を食ったりしましたし。
そんなこんなで適当に作った僕の選考課題のしりとりがこちらになります。全然凝れなかったですね。フロントエンドはバックエンドよりは得意なんですが、バックエンドがやっぱり楽しくて好きなのでこっちに全然時間かけられなかったです。よかったら是非遊んで見てください。セッションで個々のユーザーを識別するので一台で遊ぶときにはブラウザを2種類使って遊んで見てください。
ログイン画面の花はBLEACHの大紅蓮氷輪丸の後ろの氷の花をイメージして作成しました。あれかっこいいですよね。tanaka-shiritori.deno.dev
インターンまでの予習
とりあえず、denoについて色々調べたりして過ごしていました。使えるフレームワークはないかとか、そんな感じですね。Freshという課題を提出して以降に正式にリリースされたバックエンドフレームワークが見つかりました。ネット上の記事もある程度多く、ドキュメントがしっかりしていたのでそちらの方でちょっと遊んでみたり、技術書が好きなのでチーム開発系の本を読み返してみたりですね。「事業をエンジニアリングする技術者たち」とか「チーム開発実践入門」とか、「エクストリームプログラミング」とか、「良いコード/悪いコードで学ぶ設計入門」「間違いだらけの設計レビュー」「Joel on Software」「テスト駆動開発」「レガシーコード改善ガイド」とかです。流石に辞書すぎる分厚さを誇る「エリック・エヴァンスのドメイン駆動開発」は読み切ったこともないし読めませんでした。
僕は設計系の本を読むのが好きで、チーム開発系の本も読んでいたのでインターンがすごく楽しみでしたね。開発自体はそんなに好きじゃなくて、コード書くのもそんなに好きなわけじゃないです。四六時中コード書くとかはちょっと出来ないです。綺麗な設計のコードとテストコードを見るのが何よりも好きです。
あ、一押しの本は「Clean Architecture」です。前までは「現場で役立つシステム設計の原則」だったのですが、Clean Architectureで読んだ驚きの連続に圧倒され、乗り換えました。
意味わからんくらい分厚いし読みやすいわけでもないですが機会があれば読んで見てください。安定度と不安定度あたりの話が面白くて僕は好きです。（技術書オタク）
あとは、CI/CD組む趣味もあるのでdeno系のCI/CDの組み方とかを予習してたりしましたね。GitHub Actionsでオートコミットの使い方とかやったりしました。denoをVPSで動かすのはServer-Side Vaporと同じ感じでsupervisorを使うと簡単に出来ました。
ただ才能がないのかCI/CDを組むのは結構苦戦しますし、一度書いたYAMLは同じものは二度と書きたくないですね。失くさないように気をつけないと。
インターンシップ初日
CyberSakuraで来たとき以来、5ヶ月ぶりの鯖江でした。
この5ヶ月間、長かったなぁとしんみりしました。（学校で100枚レポートが2枚あったりとかこの5ヶ月で300枚くらいレポート書いたのでかなり辛かった。これだけレポート書くとそっとやちょっとの長文書くくらいじゃなんとも思わなくなりますね。）
電車を降りたとき、似たような年頃の子たちも降りて駅の前で止まりました。まだ集合時間には2時間ほどあり、お昼ご飯の時間だったので一緒に食べに行けるなら行きたい、けどもしインターン生じゃなかったらどうしよう。そんな葛藤の中、話しかけるとインターン生でした。本当によかったです。なんのことですか？とか言われたら立ち直れませんでした。
右は同じAチームのリュウ、真ん中はBチームのそらたです。
2人とも赤髪を見てうーわみたいな顔をせずに接してくれたすごく良い人たちです。高専生なんて半分くらいの人数は髪染めてますもんね。（知らんけど）
実はこの時、周辺にまえかわみちゃこさんやくらっけという同インターン生もいたのですが、家族で旅行しに来た人だと勘違いして話しかけませんでした。もう恥も外聞も捨ててインターン生の人〜！って叫べばよかったです。
3人で蕎麦屋さんに行きました。お腹いっぱいでした。あとこの2人マジ食べるの早い。
インターン開始
13時からはJig.jpでインターン開始です。説明を受けたり、自己紹介をしたりといったことをしました。自己紹介プレゼン、作っていかないと行けなかったんですね。（作らずに行きました）後でくらっちからメールで案内が来ていたという話を聞きメールボックスを探したのですがなく、多分間違えて捨てでもしてしまったのでしょうかね（ゴミ箱にもなかった……）。このようなことがないようメールはしっかり捨てる前に確認していきたいです。
適当に1分くらいで作成したプレゼン資料で、スライドなんて僕には要りませんが何か？みたいな心持ちで挑みました。多分大丈夫だったでしょう。
チームわけ
Aチームに配属され、チームメンバーとアイスブレイク！
メンバーを紹介していきたいと思います。
リュウ
山口県の徳山高専4年生です。フロントエンドが出来て、VueやReact、TypeScript、SCSSなどの応用系を使いこなしながらも、JavaScriptやCSSの基本を堅実に抑えた優秀なプログラマーです。
くらっけ
北九州高専3年生です。1年年下でハッカソン常連、つよつよになりたいと夢を語っていました。Nextを使ったReactとTypeScriptが得意で、CSS in JSのEmotionライブラリをなぜかすごく推しています。あまり使わなかったので良さが分かりませんでしたが、どのあたりがグッと刺さるのかは気になるところです。分かりませんでした。
けい
鳥羽商船
鳥羽商船高専4年生です。C言語などが得意で、Web系はあまり得意ではないそう。でも飲み込みはすごく早く、頭が柔らかいです。
自己紹介（技術スタック紹介）
先頭でしましたが、技術スタックについて書いていなかったので、書いておこうと。
触ったことのあるプログラミング言語やフレームワークの数だけなら自信があるどうしようもない器用貧乏です。触ったことのあるプログラミング言語数は12を超えます。
一番好きな言語はSwiftです。一番得意であり、嫌いな言語はJavaScriptとTypeScriptです。
Webフレームワークは、Vue、React、Laravel、Vapor、Spark、Gin、Freshなど。大体いつもVueとTypeScriptとServer-Side SwiftのVaporで遊んでます。CI/CDをGitHub Actionsで書くことはあります。Dockerは全然使えず、元々動くのがあったら多少いじって変更できる程度です。これだけでこのどうしようもない器用貧乏さはヒシヒシと伝わってきたのではないでしょうか。友人からはインフラの人間、フロントの人間などと言われたこともあります。自分ではバックエンドが最も好きなのですが。
+αでAチームのメンターのスタイルと雰囲気が大人かっこいい「にゅ」さんと開発していきます。
何を作るか
一応全員が持ち寄った案をかき集めましたが、ピンと来ません。そしてあろうことか、このインターンで勉強したいこと、使いたい技術を言って、そこからお題を決めてビジョンを決めました。やっちゃってますね。
そして決まった双方向通信とバックエンドを用いた福井すごろくアプリ。ロクでもない決め方です。開発欲が高まっちゃって決まらない長時間の疲れからさっさと決めてしまいたい思いを抑えきれなかったんだと思います。
歓迎会の晩御飯!
釜飯丼でした。思ったよりもボリュームがあって味も美味しかったです。お肉が柔らかくて美味しいし、照り焼きっぽい味と鳥の出汁がが染みたご飯は美味しい。
遊びタイム!
ご飯を食べたあとは、ハンダゴテを借りてIchigoJamの組み立てを行いました。他の人は電子情報科とかでハンダゴテなんて基本中の基本かもしれませんが、僕は情報工学科でその中でも最も電気が苦手な子という自覚があります。（電気の実験があったときに苦手すぎて一人だけ合計15時間くらい残業して実験を終わらせたのが懐かしい……）
なかなか理解できずに、そらた（Bチーム）やまえかわさん (Bチームくらっけの先輩）に教えを請いながらなんとか出来ました。無理。苦手。
動いた後なら、BASICだろうが電気よりマシです。楽しく遊ぶことができました。
2日目の朝の筋トレ
少し、いやだいぶ、もう頭がおかしいのかというくらいハードな筋トレを行いました。僕は筋トレ、大っ嫌いです。筋肉の筋っぽい感じが自分の体にあるのが生理的に嫌なタイプです。にゅさんみたいな細いスタイルに憧れますね。
聞くとどうやら1週目のオンライン勢は最初はラジオ体操だったそうじゃないですか。解せません。
初開発（スプリント ゼロ）
確か、チームの中で僕含め3人がReact使えるのでReact！ Next使いたい！ってくらっけが言ってたけどどう考えてもサーバーサイドレンダリングがDeno Deployに対応してないなって思ったので僕がViteっていう高速ビルドツールのReactを押し切り、バックエンドはFreshにしました。
環境構築は面倒なので僕がパパッとちょっと待っててと言ってリポジトリに/frontendディレクトリにviteのReactを、/backendにdeno Freshを配置してCIでVitestとDeno Testを、CDでReactのコンパイルとAuto Commitを。成功か失敗かの結果をSlackのWebhookで送信するように設定しました。ReactのCI/CDは作ったことがなかったのですが、大体普段使ってるVueと同じだったので助かりました。僕はVueなら1年以上使っていますが、Reactはちょっと触ったことがあるくらいです。なんも分かりません。ここまで開始30分以内に終わらせました。ちょっと有能じゃありませんか？
ただ、ちょっと失敗があって、VPSにバックエンドをデプロイしてNginxをプロキシにしていたのですがこの日の夜にTLSを有効化していないせいでフロントからアクセスできないことがわかって急遽このVPSに持ち合わせていたドメインをネームサーバー設定し直して貼り付けて、ドメイン設定が反映された次の朝に慌ててNginxのTLSをLetsencryptで有効化しました。初めてやったのですが運よく20分ほどで出来てラッキーでした。追い込まれると才能が芽生える人間なようです。（自画自賛）
ペアプロ開始
XPを机上で学んで実践で使いたすぎた僕はそれとなく、フレームワーク知らない人いるし、お互い実力もわからんからペアでやらない？みたいなノリでペアプロを導入しました。（やりました）
バックエンドをできるのが僕だけだったので、初めはバックエンドを担当し、ペアの子がバックエンドを覚えたので僕はフロントに行ってReactの設定とかをペアでやっていたりしました。くらっけがEmotionというライブラリをReactに導入するのに3時間くらい苦戦していた記憶だけはあります。
バックエンドは特に苦戦しませんでしたね。WebSocketのエンドポイントを作ればよかったのですが、denoの公式ドキュメントに書いてあるコードをそのままコピペでできてしまいました。WebSocketのコツは、以下に仕組みを知っているかです。やってみたことがない人はMDNのWebSocketのプロトコル自体の仕組み（どういうヘッダが渡されてどういうふうにコネクションが確立されるのか）とかをしっかりと読んでからやってみるのがおすすめです。あとHTTP系のプロトコルに関しては「Real World HTTP」という本がおすすめです。僕は1版しか読んだことはありませんが、GolangでのHTTPプロトコルの実装と説明が書かれていてコーディングしながら理解ができるので分かりやすいです。
この日は社員さんの自作キーボードを見せてもらいました。かちゃかちゃと派手な見た目で派手な音がなるキーボードです。dvorak配列という順番で並んでいる配列で、詳しくは僕が昨日書いた記事でもどうぞ。jigjp-diary.hatenablog.com
お弁当
このオレンジ色のパイみたいなやつが美味しかったです。グラタンみたいでした。
その後もペアプロは続きます
緑の付箋が、機能などの最低限やらないといけないところ。ピンクは主にUIのスタイル系のボーナスです。結局緑の付箋を全てやるのが精一杯でしたね。
福野さんが差し入れしてくれたサバエドッグ。ご飯を棒に練り固めたものをトンカツの皮で包んでソースをかけたような感じです。お米の部分がモッチモチで、美味しいです。
なぜかライブでキーボード握ってライブコーディングをするアイドルプログラマーという職業が生まれました。
（自分以外の）誰かやってほしいものです。
水曜日の中間発表
確かこの時点では……すごろくのマス目ができて、コマを表示させるところまではできていたんでしたっけ。バックエンドがもう特につまづくことなく滞りなく進んで順調でした。ペアプロのおかげでしょうか。特にすごく悩んだ人はいなかったように見受けられます。（見ていないだけかもしれません。）フロントエンドは、バックエンドに追いつけるようバックエンドから送られてくるデータを画面にちょっとずつ表示できるようにしていきました。
発表後の振り返りでは、進捗具合から計画の見直しやサーバーから受け渡されるデータのinterfaceを定義したりしました。また、次はペアプロではなくモブプロにも挑戦しようということにもなりました。ペアプロではペアによってはコミュニケーションが減ってしまうことがあったので。
木曜日
木曜日の感じに関してはこちらの僕が書いた当日記事をご覧ください
木曜日の記事jigjp-diary.hatenablog.com
最終日
大っっっ変苦戦しました。先日もReactで苦戦しましたが本日もです。確か先日はWebSocketのインスタンスが頻繁に再レンダリングされることによって再接続されてしまうという問題でしたね。
今回はなんと、Reactで保持していた過去の値が未来の値に書き変わってしまいます。回した人が誰かを算出するためにフロント側で一つ前のデータを保持していたのですが、それがなぜかいつの間にか書き変わってしまう。大変苦戦しました。
モブプロでも解決策が見つかりません。
そんな時には……ひたすらセグウェイに乗ってボーっとします。10分くらいすると名案が思い浮かびました。Reactで躓くのならサーバーサイドにやらしたらいいじゃんと。僕らはサーバーサイドつよつよです。つまづいたことすらありません。サーバーサイドで演算してフロントに送るようにすると簡単に実装することができました。素敵ですね。
成果発表
そんなこんなでCSSが当てられぬまま、機能だけ実装して成果発表となりました。
途中で扱い方を間違えてWebSocketを切断してしまうなどのハプニングはありましたが、無事終えることはできました。
質問的にはCI/CDが結構関心を引いていたように思いました。CI/CD、便利ですよね。一度使い出すとやめられませんね。（中毒性）できれば他人に組んでもらいたいものです。自分では組みたくない。
振り返り
成果発表の後は、いつものダラダラ振り返りです。えぇっと、うちのチームは非常に成果物の決め方が雑かったのでビジョンが曖昧で、さらにUIも最初に定義せず……などと上げればキリがないほど欠点が出てきますが、楽しく勉強できたのでよかったです。成果を作ることを成功と考えるのであれば失敗も同然ですが、成長を第一に考えるのであれば大成功だと思います。
1週間という短いインターンにしてはたくさんの経験が積めたのではないでしょうか。
最後に
セグウェイに乗れるのが最後だと思うと本当に悲しくなります。
このインターンでは本でしか知らない知識をたくさん試せて本当に楽しかったです。
jig.jpの皆さん、チームのみんな、メンターのにゅさん、そのほかの支援いただいた皆さん、あと誕生日をめっちゃ祝ってくださった人事の高橋さん、ありがとうございました！！！
またお会いできる日を楽しみにしています。
後日追記
5日目終わってすぐ書いたのですが、結構終わってからの1週間も面白かったなと思い、書き足しました。
最終日（5日目）の夜
5日間のインターンが終わったあと。もちろん遊びます。とりあえずAチームのLINEグループを作っていたのでここに頑張って全インターン生を誘いました。そしてトランプやUNOに誘い、夜な夜な遊びました。大富豪のくらっけに、大貧民の僕が大逆転を果たしたり、（最終結果は僕が大富豪、くらかけが大貧民）、トランプのスピードでボロ負けしたり、ワードウルフを楽しみ、とりあえず勢いで恋バナを聞き出したり、とても楽しかったです。つい勢い余って徹夜してしまいました。Bチームの本インターン紅一点のまえかわさんなどはなんとなく自分とは合わないだろうなという認識があったのですが、話してみると意外なほど気が合いました。インターンに行かれる方は、ぜひ僕を見習ってどんな人だろうと積極的に遊びに誘って話をしてみてください。意外と話が合う人が見つかるかもしれません。
帰る日
5ヶ月前に福井を訪れた際にも西山公園のレッサーパンダを見に行きましたが、それが忘れられず、みんなを誘って西山公園に行きました。福井に行ったら西山公園に行く、は僕の中で鉄則です。徹夜だろうと関係ありません。西山公園に行ったり、展望台に登ったり、まるで小学生かのように真剣にパンダランドで遊んだり。さすが高専生です。
最後にメンターさんにお薦めされたアイス（素人向けではない）をまえかわさんが食べようと言い出して、ソースカツ味やおろし蕎麦味などアイスを5つ買いました。2つがハズレのくじ引きです。最初にくじを引いたくらっけが見事ソースカツ味を、最後から2番目にくじを引いたまえかわさんには、おろし蕎麦味を押し付けました。（僕が最後でありこのくじの支配者です）言い出しっぺが食べるべきですよね。少し食べましたが、絶望的に素人には向かない味でした。あれを完食し切った二人には尊敬の念でいっぱいです。
帰りの電車までの時間をまたもやワードウルフで過ごしたりしました。MVPはニンジンには栄養がないと言い張ったトヤマ君です。トヤマ君のせいで大根のウルフに負けました。
帰りの電車は元々自由席を取っていたのですが、寝たい。どうしても寝たかった。徹夜ですから。しかし無事目的の駅で降りる自信もありません。まえかわさんやくらっけの近くの指定席を取りました。爆睡です。くらっけ、起こしてくれて本当にありがとう。そのまま睡眠を邪魔したことをまえかわさんに殴られておいてください。その人も徹夜です（かわいそう）。
