Cookpad Online Spring Internship 2021に参加しました

はい。

色々な事があって参加しました。

techlife.cookpad.com

内容

Next.jsでフロントエンドでCookpadモバイル版のようなレシピサイトを作ってみると言うのが今回の課題でした。 講義は数時間分の動画ぐらいでわからない事はSlackの全体チャンネルで随時メンターの方に聞いていく感じです。 一覧画面と検索機能、ページネーション、個別レシピページをNext.jsで組めばひとまず基本課題はクリアで、 そこからGraphQL endpointを生やしたりスワイプの画面遷移を実装したりと各々好きなタスクを5日間で実装していく形式でした。

Next.jsの開発環境がよく整えられていて特にハマるところも無く開発できたのもあり、あまり無理せず開発できる良い課題の分量だと思いました。 Cookpadさん側で用意して頂いたREST APIがよく出来ていて何も考えずViewを書くだけだったのも大きいです。 個人でフロントエンドを書くとなるとAPI鯖も用意する必要があり面倒なのでこうしてフロントエンドだけ体験出来る機会は嬉しいです。

基本課題に加えて実装したのは

  • GraphQL endpoint
  • ブックマーク機能
  • Poster-view

の3点です。Lighthouseのスコア最適化の課題もありましたが、SSGを使いAccesibilityに関する属性を設定してnext/imageを使うだけでSEO以外かなり点数良くなったのでここは取り組んだという程にはしていませんでした。 メンターの方も仰ってましたがNext.jsは自動でベストプラクティスの殆どに沿うような動作をするので手で最適化をする余地を見つけるのが難しいです。 最初はnext/imageを知らず、パフォーマンス計測してLayoutが遅いからimageにwidthとheightを設定していたりしましたが、 これもnext/imageで全部済みました。凄いですね。

GraphQL endpointはApolloでサーバとクライアントを書き型定義をgraphql-codegenで生成して実装しました。 型定義を自動生成出来るとは言っても、Apollo clientを使う際ジェネリクスでクエリを指定しないとanyが返る(それはそう)だったりとやっぱり漸進的な部分があり、 型を付けていく気持ちがないとすぐエラーを踏むのは若干つらいです。

Poster-viewというのは左右スワイプで別の記事に飛べる機能です。モバイル版のGoogle画像検索で個別の画像をタップし、スワイプするとどういったものか分かると思います。 ページをコンテナ内にそのままdivで並べ、現在見ているページに隣接するページはtransform: translateで左右に100 vwずらし、隣接してないページは非可視化しておきます。 スワイプ操作はReactならonTouchMoveをlistenして移動量だけtranslateを書き換えてずらし、onTouchEndで次のページに遷移するかページを戻すか決め、 CSSのプロパティをいい感じに付けて自然なアニメーションにします。

これだけではスワイプ中に上下にもページが動き使いづらいのでスクロールをpreventDefaultして止めるのですが、 現在のブラウザはデフォルトではtouchmoveイベントはpreventDefault出来ないようになっています(スクロールのたびに可能性があるすべてのリスナーでpreventDefaultしていないか調べていたのではパフォーマンス上大きな問題になってしまうためです)。生のDOMならaddEventListenerの第3引数に{passive: true}と渡せば良いだけなのですが、Reactでは無理なのでuseRefを使い生のDOMにイベントリスナーをひっつけます。 またここで繋げられた生のDOMのイベントリスナはuseStateで作られた変数の更新を知れないのでこれもuseRefで緊急脱出ハッチを開けておきます。

インターンのSlackを見ていた感じではPoster-viewを実装している人は居らず、一番実装進められていたかなと思っていたのですが、 いざ成果発表となるとGraphQL以外のほぼすべての課題をPoser-viewも含め実装した上デザインも詰めた猛者が出てきて驚きました。 この発表を見て正直負けた、やっぱり他を圧倒する実装じゃないとインターンで賞は取れないなとやや意気消沈していたのですが、 蓋を開けてみるとなんと最優秀賞に選んでいただけていました。Poster-viewの実装を最後まで詰めたのが良かったみたいです。 賞品は大きなステーキ肉2切れとお皿とマグカップでした。肉は家族で食べてマグカップは大学の宿舎で使っています。美味しかったです。

また成果発表はインターン生だけでなく、Cookpad社内のHackaradeと合同だったので社員の方の発表も見れました。 出来ているものもそうですがやっぱりプロとなると実装も速かったです。

感想

こういったイベントで賞を頂くのは初めてなので嬉しかったです。

白いマグカップ
頂いたマグカップです

X520-SR2を買った

動かんと思ってたけどip link set enp11s0f1 upしたら動いた。パソコン初心者です。

機材

  • x520-SR2
  • DAC Twinax cable (fs.comのIntel互換品)

ドライバ

Intel x520-SR2のドライバが公式からダウロード出来る。Linuxにも入っているが古いのか動かなかった。わからん。 そのままだとビルド出来ないのでsrc/ixgbe_main.cにパッチを当てる。

7531c7531
<                rx_ring->queue_index) < 0)
---
>                 rx_ring->queue_index, rx_ring->q_vector->napi.napi_id) < 0)

ethtools

Settings for enp11s0f0:
    Supported ports: [ FIBRE ]
    Supported link modes:   10000baseT/Full
    Supported pause frame use: Symmetric
    Supports auto-negotiation: No
    Supported FEC modes: Not reported
    Advertised link modes:  10000baseT/Full
    Advertised pause frame use: Symmetric
    Advertised auto-negotiation: No
    Advertised FEC modes: Not reported
    Speed: Unknown!
    Duplex: Unknown! (255)
    Auto-negotiation: off
    Port: Other
    PHYAD: 0
    Transceiver: internal
netlink error: Operation not permitted
        Current message level: 0x00000007 (7)
                               drv probe link
    Link detected: no
Settings for enp11s0f1:
    Supported ports: [ FIBRE ]
    Supported link modes:   10000baseT/Full
    Supported pause frame use: Symmetric
    Supports auto-negotiation: No
    Supported FEC modes: Not reported
    Advertised link modes:  10000baseT/Full
    Advertised pause frame use: Symmetric
    Advertised auto-negotiation: No
    Advertised FEC modes: Not reported
    Speed: Unknown!
    Duplex: Unknown! (255)
    Auto-negotiation: off
    Port: Direct Attach Copper
    PHYAD: 0
    Transceiver: internal
netlink error: Operation not permitted
        Current message level: 0x00000007 (7)
                               drv probe link
    Link detected: no

dmesg

[    3.133764] ixgbe: loading out-of-tree module taints kernel.
[    3.133907] ixgbe: module verification failed: signature and/or required key missing - tainting kernel
[    3.138141] ixgbe 0000:0b:00.0: enabling device (0000 -> 0002)
[    3.138287] ixgbe 0000:0b:00.0 0000:0b:00.0 (uninitialized): ixgbe_check_options: FCoE Offload feature enabled
[    4.422761] ixgbe 0000:0b:00.0: Multiqueue Enabled: Rx Queue count = 16, Tx Queue count = 16 XDP Queue count = 0
[    4.424758] ixgbe 0000:0b:00.0: 32.000 Gb/s available PCIe bandwidth (5.0 GT/s PCIe x8 link)
[    4.424857] ixgbe 0000:0b:00.0 eth0: MAC: 2, PHY: 1, PBA No: E68785-002
[    4.424862] ixgbe 0000:0b:00.0: 00:1b:21:57:f0:14
[    4.424866] ixgbe 0000:0b:00.0 eth0: Enabled Features: RxQ: 16 TxQ: 16 FdirHash
[    4.424966] ixgbe 0000:0b:00.0 eth0: Intel(R) 10 Gigabit Network Connection
[    4.425057] ixgbe 0000:0b:00.1: enabling device (0000 -> 0002)
[    4.425199] ixgbe 0000:0b:00.1 0000:0b:00.1 (uninitialized): ixgbe_check_options: FCoE Offload feature enabled
[    4.596421] ixgbe 0000:0b:00.1: Multiqueue Enabled: Rx Queue count = 16, Tx Queue count = 16 XDP Queue count = 0
[    4.598532] ixgbe 0000:0b:00.1: 32.000 Gb/s available PCIe bandwidth (5.0 GT/s PCIe x8 link)
[    4.598621] ixgbe 0000:0b:00.1 eth1: MAC: 2, PHY: 14, SFP+: 4, PBA No: E68785-002
[    4.598624] ixgbe 0000:0b:00.1: 00:1b:21:57:f0:15
[    4.598628] ixgbe 0000:0b:00.1 eth1: Enabled Features: RxQ: 16 TxQ: 16 FdirHash
[    4.598698] ixgbe 0000:0b:00.1 eth1: Intel(R) 10 Gigabit Network Connection
[    4.600490] ixgbe 0000:0b:00.0 enp11s0f0: renamed from eth0
[    4.624710] ixgbe 0000:0b:00.1 enp11s0f1: renamed from eth1

systemd-networkd

enp9s11f1にSFPが繋がっているので/etc/systemd/network/enp11s0f1.networkを以下の内容で作る

[Match]
Name=enp11s0f1

[Network]
DHCP=yes

CircleCIのSSH公開鍵を間違ってGitHubから消してしまった時

git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

などと出る。

適当なjobをRerun Job with SSHしてSSHを繋ぐ。このときのSSH鍵はGitHubに自分が登録している鍵なので繋げるはず。 ~/.ssh/id_rsa秘密鍵があるのでssh-keygen -y -f ~/.ssh/id_rsaして結果をGitHubにコピペして登録すれば治る。 そもそも間違えて削除しないようにしましょう。

2020-10-28

水曜日です。曜日書かないと抜けがあっても気づけない気がしたので今回から書く。あと日付は起床した日基準で付けることにする。でもこれ書いているの29日です。多分火曜日と混じっているが、日記には真実しか書いてはいけない訳じゃない。まあいいや。

14時とかに起きた。久しぶりの出勤を行いました。わりと虚無を生やしてしまい完全に時給泥棒だったので次はゴリゴリ実装して取り戻したいですね。虚無生やしてもタイムカードは正確に記入する。

29日は早朝から体育なので友人に起こしてもらうため友人宅に避難。いつもお世話になっております。

この日もギリギリで課題を終わらせたり、大浴場にギリギリに駆け込んだりといつもの生活をした。友人へ来客が発生していたのでうどん(?)ともち(?)を食べた。コストコの牛肉率の高いミンチと細いうどん使えばラグマン作れそうと思った。自分はラグマンにはそれほど思いれは無いのでやるかどうかは微妙。

2020-10-27

1150起床。即カレーを食べ教室へ。3分の遅刻で済みました。 月曜日は対面からの体育、オンラインリアルタイムとあるので基本何も出来ないが、今日は更に研究室面談にも行ったので本当に何もしてない。

大学の用が済んだら平カスで買い出しして風呂に入り気がついたら2330。なんで。 片栗粉忘れたのでオァーと言いながらトライアルで買ってきたら友人が来たのでカレーと謎煮を出しワインを貰いました。 一日おわり。明日から本気出す。

天津飯、鶏肉と白菜の中華煮
中華あんに酢を入れすぎたし煮物はとろみを付け忘れた

2020-10-26

朝起きたら16時。オァ、オァー。ここから一時間記憶が飛びます。第一麺に行った。 最近は昔ほど第一麺をうまいと感じないのだが、これは基準が上がってきたのか、それともそもそも第一麺を過大評価していたのか議論の分かれるところ。 Google Mapのレビューは非常に高い(4.7)なので多分基準が上がってるのだと思う。

帰ってからは無を30分してシューマートでランニングシューズを買った。 やはり餅は餅屋と言うべきで足の測定を行い試着した靴が一発で完全にフィットした。入店から購入まで15分で済んでしまったのだけど、なぜ済んだかと言うと閉店20分前に入店したため。もっと余裕持って行こうね。

後は人の家で肉焼いて少しだけ飲んだ。キーボードもわずかに進捗した。課題と仕事と仕事2とタスクは何もしてません。大変申し訳ありません。土曜から精神の調子が良くなったので、月曜日に午前から起きれば今週は人間として振る舞える。この時間にこんなの書いてる時点でもう先は見えてる気もする。

2020-10-25

15時に起きたあと17時に第一麺行ったけど閉まっていたので松屋に行った。この間記憶無し。

その後借り物のキーボードの調子が悪くなってたので分解清掃したら反応しなくなった。ウォー。 色々やる気が出なかったのでカレーを作りました。そこそこうまくてよかった。

煮込みながらしばらく無をしていたら労働1の電話がかかってきたので人生終わりやになってTwitterがあの惨状になりました。 風呂には入れた。労働が終わると大分元気になった。

総括

今日は労働2をやるつもりだったけど結局してない。明日はもっとちゃんと生きます。

あと昨日1割くらい干してそのまま忘れた(なんで?)洗濯物があるので再び洗濯機に入れてこのあと干します。 洗濯したあと洗濯機内でうっかり一日放置も経ているので300円と3日をかけ行われるめちゃくちゃ丁寧な洗濯。