😎
トップ/ブログ記事一覧/😎この一年で触った技術（と、ちゃんと触りたいと思ってるやつ）

この一年で触った技術（と、ちゃんと触りたいと思ってるやつ）

全然書けてなかった振り返り記事の技術トピックのみの記事です。
2020年のフロントエンドエンジニアの技術スタックの一例
年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。 とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。 以下常体。 追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScript/Flowtype はほぼゼロ NPM パッケージ開発も基本的には TypeScript Node.js ブラウザというよりは Node.js を意識する OSSも自作する/最優先で意識する JavaScript Framework Nuxt.js (後ほど詳細を解説) 2017年から言っているがこれより優れたフロントエンド技術は存在しない気がする SSR/SSG/SPA で利用し、通常の Vue.js はほぼ利用しなかった Next.js (後ほど詳細を解説) React.js Parcel との組み合わせで書き捨てのコーディング時のみ利用 UI Library Build Environment Developer Experience Code Formatter Package Maintenance Scripts Testing SEO
https://d.potato4d.me/entry/20201129-frontend-2020/
以前potato4dさんの記事を読んだときにpotato4dさんに「書いたら見せて」って言われてたのをmogaさんの記事を読んで思い出したのと、
 
Anotion作っててブログはめっちゃ気軽に書ける環境整ったのに全然書いてないな〜ってつぶやいたらダンさんからプレッシャーがかかったので書いてみます。
 
あと乗り気じゃなかったのは、イケイケの皆さんに比べると、あんまり新しいの触ってないんですよね。mizchiさんとかの見ると「2020はこれだった」みたいなのも無い。
2020年やったこと、考えたこと、触った技術のまとめ - mizchi's blog
今年の本業は、 3rd party script で、そこから呼ぶ ウィジェットを最適化する コンパイラを書く、その仕様を考えて、実装するという感じだった。要は Google Analytics と、最適化 コンパイラ 付き GTM みたいなものを作っていた。その内容は以下に書いた。 今年は、 パフォーマンスのエンジニアをやっていた、と思う。 サードパーティ スクリプトの配信を生業にする会社のエンジニアとしては、来年の Core WebVitals というパフォーマンス関連の大きな変化で、波にのってやりたいことがやれたと思う。 Core WebVitals の導入で実際にどれぐらいの影響がでるか不明だが、パフォーマンスが SEO に影響する、というのは、 若干やりすぎと思いつつも、 Google の目指す Web の世界観と、モバイルがメインとなったエンドユーザーの体験にとって両方大事なもので、とくにフロントエンド周りで 富豪的 なプログラミングを常態化しつつあったエンジニアコミュニティの開発スタイルに一石を投じるものではあった。 大義名分として利用はしているが、 SEO最適化そのものを目的にするのではなく、コンテンツしかり、ユーザーの体験を最適化すると、それが評価される、というのは正しい世界観であると思い、同調している。 Chrome に組み込まれている Lighthouse は Idiomatic な計測ツールだが、他のツールが有意義な指標を出せてない以上、まずこれに従うべきだと思っている。そのための根拠は一応提示されている。 Web の最適化を考えることで、自分は Next.js を再び強く評価するようになった。 Core WebVitalsの指標は、フロントエンドの改善に目がいきがちだが、ある程度やるとサーバーサイド込みで改善が必要で、その最適化をある程度以上すすめるには、現状 Next.js のようなクラサバまたがる最適化が必要、という認識を持った。 Lighthouse
https://mizchi.hatenablog.com/entry/2020/12/28/140530
 
とか言い訳ばかりしててもしょうがないので、とりあえずでざーっと書いてみますね。
 

フロントエンド

React Native

なんだかんだ一番触ってたのこれですね。メインの請負案件と、技術顧問的なのが2件あったのと、個人で出してるプロダクトもあったりして。普通にアプリ作る実装と別で、更に踏み込んだ所だけピックアップします。
  • Expoからeject
ejectは色々実装全体のコストが上がってくるので、基本やらなくて済むならやらない方向で進めるんですが、ビジネス要件的に外せなくなったのでやりました。
Xcodeとか周りの設定とかGradleとか、、、失ってから気づく「Expoはマジで神」。いやしかしejectするととれる選択肢が増えてくるのでこれはこれで面白い。
  • 課金
    • App Store
    • Google Play
    • Stripe
課金があったのでejectしたんですが、この辺はどっちかというとフロントよりバックエンドのがやることが多いですね！フロントは普通にFirebaseから商品データとってきて流す感じ。Stripe周りだけちょっとごにょごにょした。
  • React Native Web
こちらちょいちょい前から触って本書いたりしてた↓んですが、仕事でもガッツリ使うことになるとは。。。！
「こうやってプライベートで触っていたから、仕事でメリット・デメリットしっかり判断出来るので採用出来た」というやつ。
あとRNWebは純粋なSPAになりOG画像問題とかがあるので、Cloudflare Workersを使って設定するやつ、素振りだけやってそのネタで登壇した↓
これ使って本番運用とか出来たら楽だろな〜と思いながらCloudflare PagesのAlphaユーザー招待を指を加えながら待っています👶

Next.js

Anotionを作るのにガッツリ使った。それまでも小さくなにかを作ってたりはした。
  • VercelとISR
「インフラはもうNext.js使ってISRするならVercel一択」という頭しかないのでとりあえずでこれを使ってますが、移行出来るなら他のも試したいな〜。Cloud runに入れてみたりはした。
catnoseさんがZennのフロントを載せ替えるようなことをTwitterで言ってたので速報を待ちます！ｗ,
↓これとかもそのうち触ってみようと思ってる。そのうちね。。。

CSSとか

  • Musubii
  • Tailwind
↓この辺でコンポーネント作ってうりゃおいってしたい気持ちはあるけど特に触れてない。
あとTailwind-UIとかChakraUIとかね。
Anotionがユーザーがページ作る系サービスなので、全体適用のやつは普通に生CSS書いてるんですよね😂ｗ
管理画面だけMusubiiを当てています。

Webでもスマホアプリでもないやつ

  • Chrome Extention
  • Electron
ちょいちょい小さいツールとかを作った。クソアプリとかね。（そういえばこないだ突然ストアからクソアプリがリジェクトされたけど、面倒なのでスルーしています、、、ｗ）

なんとかaaS的なやつ

  • Firebase
      • 常用しています。
    • Stripe Firebase extention
        • Anotionはこれ使ってます。導入は楽だけど、結局データ同期とか色々追加しようとしてくると、最初からでも変わらんかもってなってきている。とりあえずのゼロイチには良いぞ！
    • Webにもアプリだけだった機能が入ってきたり、新しいfirestoreクエリが来たりしたのを触った
    • Algoliaも並行して使った。しかし乗り換えたい気持ちもある。
  • Vercel
      • 前述
  • Netlify
      • VercelやFirebase HostingのPreview登場によってちょっとしか触らなくなってしまった。好きなんだけど、日本からではCDNが遅すぎる、、、😢
    • Edge Worker
        • これもAlphaユーザー登録してるけどアナウンスなし😭個人的にはISRもSSRも結局めんどくさいので、JAMStackがまた返り咲く可能性は全然あると思っていて、そのためにはやっぱりEdge Workerなんじゃないのと思っているのでNetlifyと組み合わせてごにょごにょしてみたいのよね。
  • Cloudflare
    • Workers
      • 前述
  • Skyway
      • 使ったサービス作り始めて、Anotionに注力することになったから終わった。ほんのり触りました。

NoCode

NoCode系ももしガッツリ触ったのあったら良かったけどAdaloとかAppSheetとかホント触っただけで、、、Glideとかはまぁちゃんと触ったかなレベル。Bubbleとか進化してそうだから久しぶりになんか作ってみるか〜（やらないやつ）

ツール周り

デザイン周りはFigmaに全面的に移行。この本の表紙とかもFigmaで自前で作った。
 
まとめると結構触ってはいる。しかしこれといって新しい技術を会得した感がないのです。
新しい技術を会得した感は「これまででは作れなかったものが作れるようになった」というものに基づいています。それが明確にわかるといいんだけど、2020年はあんまりそういった意味での成長がなかったような気がする。そういう焦りが記事を書く妨げになっていたんじゃないかと振り返りを書いてて気づきました。

2021年これやりたい

しかし特定の技術に関してこれだ！ってのがあんまりないかも？Anotionに関しては技術的に解決したいポイントが山積みになっているので、それを解決出来る技術を手に入れたい感じですね。
そういった意味ではインフラとか全然わからんのでインフラパゥワーを付けていきたい所存。
あとはNoCodeのiPaaS系サービスつなげまくりピタゴラスイッチスキルも付けていきたい。（NotionAPIがそろそろオープンになると思うので、その辺で便利ツール作りたいな〜）
とはいえ、それらを手に入れたからといって「これまででは作れなかったものが作れるようになった」ということにはならない気がする。（Webフロントエンドに飽きが来ているのかもしれない。）

課題感

今まで職業エンジニアとして「これまででは作れなかったものが作れるようになる」というのを積み上げてきたんですが、それが2020年いまいち積み上がらなかった気がするのは、
  • 最低限なにか思いついたものを作れるスキルセットが集まってきたこと
ももちろんあるんですが、
  • 今までにやってない新しい分野にあまり挑戦していない
ことが大きい気がします。ほとんどJavaScript(TypeScript)しか書いてないのと、JSでだいたい作れるんすよね、、、笑
ということでAnotionでは今までやれてなかったことにも色々挑戦できる余地があるので、時間を使っていきたいと思っています。GUIとか、インフラ周りとかね。
 
以上です。長々と書きなぐった記事を読んでくださりありがとうございます！2021年も作っていきます！
 
Xでポスト