iconshinyaigeek.dev
🌍 English
🇯🇵日本語🇺🇸🇬🇧English
Blog
Profile
Activity
Table of Contentsはじめに2020年の振り返りやっていくこと終わりに

2020年の振り返りと次やりたいこと

2020/12/24
Blog
Poem

はじめに

こんにちは, しにゃいです.

!tweet

さんぽし君がこんな記事を書いていて, 触発されて僕も今年の振り返り兼抱負を書いていこうと思い筆をとりました.

!tweet

いつものように, 「書いてる(publishするとは言ってない)」芸をやっていたのですが, 今回はちゃんとpublishすることができそうです, 偉い.

2020年の振り返り

インターン

絶賛就活中で, 色々なところに顔を出していました.

  • 大手町にある謎の企業(長期インターン)
  • CyberAgent(2days)
  • VOYAGE GROUP(2weeks)
  • Recruit (1 month)
  • Cybozu (1 week)
  • wantedly (3 weeks)

長期インターン以外は全て夏に行っていました. 夏にこれだけのインターンを詰め込むとなると当然夏休みは休みなしでインターンでした(いうたらリクルートでのインターンは夏休み終わりに行っていたので学業と並行して, って感じでした). ですがそこまで大変だったという印象もなく, 寧ろインターンで多くの方々と交流できてめちゃくちゃ楽しかったです. 普段の大学の授業がまあまあ詰まっていてサマーインターン中よりも忙しかったというのもありそうですが.

正直エンジニアになることは特殊なケースというか大学の周りのみんなとは全く別の道を選ぶことになっていたのである種の不安感, 将来の不透明感は覚えていたのですが, インターンもありこの1年間でプロ として働いているエンジニアの方と喋ることも増え,最前線で道を切り拓いていっているような人たちを目の当たりにして俺もやっていくぞと勇気が出ました, ここが何よりもの収穫かなとは思っています.

インターンでお世話になった方々, 本当にありがとうございました.

開発

ここ一年で作ってたやつです, starしてくれると嬉しい...💓

Shinyapack

https://github.com/Shinyaigeek/Shinyapack

夏休みの自由研究のテーマが, Webのエコシステムの再発明で, その一環でやっていました. ちょうどhiroppyさんの書かれた 『module bundlerの作り方(準備編)』(https://blog.hiroppy.me/entry/create-module-bundler-preparation) を読んで, タイミングの良さに運命を感じおいらもmodule bundlerを作ろう！！と思い至り作ってみました.

中身は, どうせなら気になったdenoを触ってみようと思いTSで書いて, parserやgeneratorはbabelのものを利用していました. moduleはskypackからimportしていた気がします. 確か当時query paramでtypes={型定義のURL}を付ければいい感じに型定義がつくと聞いていたのにうまくいかなくてイライラして完全趣味且つ勉強目的の開発だしいいだろ！！とか言いながら型をぶっ壊しながらコードを書いていったのはいい(?)思い出です.

これを作るにあたりwebpackのコードもちょこちょこ読んで書き方とかそういう面での学びがあったり, webpackのinterfaceにちょっと詳しくなったりもしました. また中身を知ることで, 複雑怪奇なJSのエコシステムへの解像度がちょっと上がった気もしています.

前述の通り, 夏はインターンで忙しかったのがあり最低限の実装しかできなかったのですが, terserを実装してその気持ちになってコードを書けるようになりたいとは考えています.

Shinyact

これは未完成のためprivate repositoryです...

これも夏休みの自由研究の一環でReactを再発明しようとして作ったものです. これは記事などは一切参照せずReactをコードリーディングしつつ頑張っていました.

mountできるところまでは持っていったのですが, Reactがどのようにして状態を持っているかや, どうやって状態の初期化が複数回起きないようにしているかなど, 結局コード読んでも解読しきれずそこで止まってしまっています.

VDOMの構造などは結構学べた気がしていて, そこは良かったです.

これまたタイミングよくsaddnessOjisanがちょうどpreactを再実装したoreactを作っていたので, preactのコードリーティングを進めつつまた再チャレンジしたいと考えています. 宿題ですね.

Next.js 非公式日本語翻訳プロジェクト

https://github.com/Nextjs-ja-translation/Nextjs-ja-translation-docs

もともと非公式のNext.jsの日本語翻訳サイト自体はあってOSSとして運用されていたのですが, ドキュメントの中身やデザインが古いもののまま更新が止まっていたので, 「更新せえへん?(意訳)」という旨のissueを作った結果作り直そうとなりました.

当時よく話していた かみむらさん にやってみませんかと相談してみたところ, 快諾していただき, そのあとNext.jsを作っているVercelの中のShu Uesugiさんにnext-siteをfolkして日本語翻訳していって良いか確認を取りスタートしました.

僕は翻訳のレビューやCI,linterの整備, 移行作業やトップページの翻訳などを行っていました.

最近Next.jsが大盛り上がりしているような印象を持っていますが, それに一役買えたのであれば幸いです.

https://nextjs-ja-translation-docs.vercel.app/

余談ですが, 本家のドキュメントサイトであるnext-siteのリポジトリは今見えない状況になっています. このリポジトリはNext.js confあたり, つまりNext.jsのv10が発表されたタイミングで見えなくなっていました. これは邪推ですが, i18n routingにNext.jsが対応したことを受けて, vercel側で「これが18nのベストプラクティスや！！」とドキュメントサイトを翻訳もするのではとは思っています.

babel-plugin-lit-jsx

https://github.com/Shinyaigeek/babel-plugin-lit-jsx

これはJSXで書かれている, hooks(というよりReact)に依存しないFunctional Componentをlit-htmlで動くようにしてくれるbabel-pluginです.

僕の技術ブログはJSXでコンポーネントを書いて, SSRして生成されたhtmlをCDNにキャッシュして, client-sideでhydrationはしないという構成になっています. これは僕の技術ブログの場合clientにおける状態変化は少なく, Reactを使うとしたらtemplate engineとしての利用がメインとなってしまいますが, そのためにReactをclient-sideで使うのはI/Oコストを無駄に増やすだけではないかという考えのもとフロントエンドではhydrationしないという実装にしました.

ですがNext.jsなどにあるようなprefetch僕も欲しい！となり, htmlのbodyの部分をprefetchしてページ遷移のタイミングでinnerHTMLを置き換えるだとか, あらかじめリソースをfetchしておいてそれをブラウザにcacheさせるとか色々方法は思いついていたのですが, 最終的にviewに必要なJSONをprefetchして, それをclinet-sideのJSでレンダリングしようとなりました.

レンダリングはlit-htmlで行おうとなったのですが, 正直型などの面で書き味がよろしくなく, やっぱり @types/react のJSXの型定義の恩恵は受けたいという話になり「でもhooksに依存しないFunctional Componentだったらlit-htmlに自動で置き換えられるんじゃね」という発想の元それを実現するためのbabel-pluginを作っていました.

原理的には babel/traverse でASTをみてゴリゴリ変換しています.

具体的にはこのようなjsxを

import Header from "./Header";
import Footer from "./Footer";
import BlogPost from "./BlogPOst";

const Layout = (props: { content: string }) => {
  return (
    <div className="blog">
      <Header />
      <BlogPost content={content} />
      <Footer />
    </div>
  )
}

import Header from "./Header";
import Footer from "./Footer";
import BlogPost from "./BlogPost";
import { html } from "lit-html";

const Layout = (props: { content: string }) => {
  return (
    html`<div class="blog">
      ${Header({})}
      ${BlogPost({
        content,
      })}
      ${Footer({})}
    </div>`
  )
}

こういう感じに変換してくれます.

ある程度できたんじゃないかとは感じていて, テスト書きつつこのブログでこれを使いつつprefetchを実装しているのですが, うまくいったらreleaseしようとは考えています.

もともと shinyapack でASTは触っていたのですが, これの開発でゴリゴリ触ることになり知見がたまりました.

JSはECMAScript, TypeScript, module bundlerなどの存在のおかげか他の言語に比べ(個人的な素人感想です)ASTを触りやすいようライブラリが整っていることもありやりやすかったですし, 自分の開発者体験を自分で守っていくぞという意識が高まったなとは考えています.

深層学習

大学の研究の関係で12月くらいから深層学習の勉強をスタートしていました. 僕が触れていたのは画像処理の分野で, 主にSemantic Segmentationなどを扱っていました. TAに聞いたり論文を読んだりまとめを読んだりしつつ悪戦苦闘していました.

なんだかんだ短時間である程度のものを作れてエンジニアとしての基礎体力の伸びを感じていました.

根本的な理論などは正直まだ理解できていなくて, モデルにこのレイヤを足したからこうなるといったことも理解があやふやで, モデルの改善などはでたらめに行なっているのでちゃんと理解したいですね.

WriteCodeEveryDay

リクルートでサマーインターンをしていた時, メンターの方に勧められ良いタイミングだしということでやってみました.

https://github.com/Shinyaigeek/WriteCodeEveryDay

↑のリポジトリでWriteCodeEveryDayをやっていくぞという誓いを立て, 毎日何らかのコードを書くようにしました. やってみると意外と楽というか, もともとコーディング自体好きで基本的に余裕があるときには毎日書いていたのであとはそれを0時までにコミットするよう意識するということを心がけるくらいでした.

どちらかというと, 課題などに追われ余裕がないときや疲れている時などは意識的に机に向かいコードを書く必要がありかなりしんどいですが, これは「クソみたいな日に良いもの作る」ための訓練だと思って頑張っています.

kusa

二日ほどベロンベロンに酔っ払ってしまい結局コミットできずじまいだった日もありましたが, 10月中旬くらいからある程度順調に進んでいるかなという感じです.

LeetCode

WriteCodeEverydayをやっていたわけですがまあまあ余裕があったので, それに加えSolveLeetCodeEveryDayもやってみることにしました.

(といってもまだ8日間ですが...)

newkusa

実はこのLeetCodeを毎日やろうという取り組み自体は人生なんども挑戦しては失敗しています.

なぜ続かなかったか考えてみた結果

  • 無理して習熟度の低いRustで解こうとしていた
  • 解いた問題をGitHubで管理しており, 問題を解くためにいちいちcheckoutしてcommitしてとやる必要がありめんどくさい

というのが考えられたため, 今回は書き慣れたTypeScriptで問題を解き解いた問題をgithubで管理なども特にしない方針で進めています.

OSS

東京都 新型コロナウイルス感染症対策サイト, blitz.js にかなり小さくではありますがcommitしていました.

geist-ui(旧zeit-ui)など仕事, プライベートでお世話になっていたライブラリにもライブラリにもバグを見つけ次第修正してPRを出したりissueを出したりしていました. あとは前述のNext.jsのドキュメント翻訳くらいでしょうか. 学生らしく可愛らしいOSS活動ですね.

同世代との交流

今年で同世代の仲良いエンジニアが一気に増えたなと感じています(仲良いと思っているのは僕だけかもしれませんが)

コロナによって就活はオンライン前提になることは予想できていたので, こんな中で同世代のエンジニア友達とかできるんだろうかと大学に友達がいない僕は不安になっていましたが, むしろオンライン前提だからこそ大学も地域も超えて色々な人と仲良くなれたなとは感じています.

3月の逆求人のタイミングからポツポツと交流が始まり,

僕が勢いで22卒交流slackを作ってみたらそこから一気に交流の輪が広がり交流も増え楽しかったです.

オンラインで飲んだりもしていましたし, ましくんが主催してくれた22卒サマーインターン前にツヨツヨになっちゃおうLTなど, イベントも結構あってかなり楽しかったです.

とある会社の人事さんと飲んでいた時に, 今年のエンジニア学生は大学とか地域を超えて仲良くなっている感じがあると仰っていて, おお〜〜〜〜ってなっていました.

やっていくこと

就活

はい, 考えないといけませんね.

めちゃくちゃスローペースで進めています. とはいっても受ける会社とかはある程度決まっていてあとはやっていくだけという感じです. 就活終了できるタイミングが結構遅くなりそうでドキドキしています. ちゃんと満足のいく結果を出したいですね.

技術ブログの改善

これはやり残しちゃったタスクですね. さっき言及したbabel-plugin-lit-jsxを用いてprefetchを実装するとかもできていませんし, Algoriaを用いて全文検索を実装するとか, OGPを動的に生成するとか, Fieldデータを収集するとかやるべきこと/やりたいことがまだまだあります. これもちゃんとやってその上でやったことの詳細を技術ブログに書きたいですね.

OSS

今年こそはもっとOSS活動をがっつりやっていきたいなというお気持ちです(多分毎年言ってる). 誰かのブログでnode.jsのcode & learnが紹介されてたんですが, まだやってないかなぁ。。。

卒業

多分これが一番難しい. 頑張ります

ブラウザ作り

これは来年やりたいことというよりも, 次の春休みの自由研究の課題です.

Webフロントエンドエンジニアを名乗っているのにブラウザのことを知り尽くしてはいないし作ったこともないことにちょっとした引っ掛かりを感じていて, それを解消しようという意図があります.

春休みの自由研究のテーマを考えていた時にちょうど keiya sasaki さんがTLでブラウザを作っているのが目に入った, 12月24日(今日ですね！！)発売のWeb + DB Pressに自作ブラウザ特集がある, 『Go言語でつくるインタプリタ』をちょうど勧められていた, など諸々タイミングがよくて運命を感じブラウザ作りを春休みの自由研究のテーマにしました.

終わりに

ノリで書き始めましたが, 意外と書く内容が多くてびっくりしました. 充実した一年間だったのかもしれません.

今年の一年を一言で表すと「深化」の一年でした, 去年なあなあで理解していた部分など,　細かく突き詰めて理解できそれを元にわかる領域の問題に対して自分なりの意見考察をもって考えられるようになったような気がします.

こういう話をするということは来年は何の年にしたいかという話をするということなのですが, 来年何の年にしたいかということよりも, 2年後何の年にしたいかということの方が明確に決まっているためそこから逆算した目標を来年何の年にしたいかとして掲げたいと思います.

僕はUX, DX周りを改善していくことが大好きなのですが, ここら辺はトレードオフや人的リソース, 開発者の意識など様々な問題が絡み合う多目的問題だと考えています. こうした開発現場における多目的問題の全体最適化を目指していきたいのですが, そのためには「こうすればこうなる」だけではなく, 「こうすればこうなるはずだけどそれによってどれくらい改善されたのか」まで, 仮説に対して検証を行いそれを元に次の意思決定を下して...ということが求められると考えています.. こうしたことは実際に企業に入って動かないと実践できない(特に僕は大学関係で何らかの組織に属しているといったこともないので...)ことだと思っているので, これを2年後の目標に掲げています. つまり2年後は「進化」の年にしたいです.

2年後は「進化」の年にしたいんですが, そこから逆算して来年は「レベリング」の年にしたいです(「深化」, 「進化」といい感じに踏みたかったけどいいのが思いつかなかった...) 僕はまだまだWebについて理解できないことがたくさんあると思っていて, Web Developerとして深さも広さも足りていないと感じています. (深さで言えばブラウザそのものへの理解など, 広さで言えばUIデザイン, サーバーサイドなど...) これらの足りてないところを補い2年後の「進化」のための土台づくりとなる, 「レベリング」をしていきたいなと考えています.

来年もこう思えるような一年間にしたいですね, やっていきましょう！！！！！良いお年を！！！！！！！

monkey-icon
earth
Hi 👋 I'm Shinobu Hayashi a.k.a Shinyaigeek(しにゃい).
Web Developer 🕸 / Reliable Web Enthusiast 🔥
Faster, Lighter, More accessible, More secure, More productive Web for anyone, anytime , anywhere.
twitter
github
linkedin
Contact Me on Email 📧
Copyright. 2022 Shinyaigeek