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

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

全然書けてなかった振り返り記事の技術トピックのみの記事です。

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 SEOd.potato4d.me

以前potato4dさんの記事を読んだときにpotato4dさんに「書いたら見せて」って言われてたのをmogaさんの記事を読んで思い出したのと、

この1年で触った技術この1年間でいろんなものを作って、いろんなことを経験してきたのでまとめてみようかと思います（おおむね2020年にやったことです）。 ...zenn.dev

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 のようなクラサバまたがる最適化が必要、という認識を持った。 Lighthousemizchi.hatenablog.com

とか言い訳ばかりしててもしょうがないので、とりあえずでざーっと書いてみますね。

フロントエンド

React Native

なんだかんだ一番触ってたのこれですね。メインの請負案件と、技術顧問的なのが2件あったのと、個人で出してるプロダクトもあったりして。普通にアプリ作る実装と別で、更に踏み込んだ所だけピックアップします。

  • Expoからeject ejectは色々実装全体のコストが上がってくるので、基本やらなくて済むならやらない方向で進めるんですが、ビジネス要件的に外せなくなったのでやりました。

Xcodeとか周りの設定とかGradleとか、、、失ってから気づく「Expoはマジで神」。いやしかしejectするととれる選択肢が増えてくるのでこれはこれで面白い。

  • 課金

    • App Store
    • Google Play
    • Stripe 課金があったのでejectしたんですが、この辺はどっちかというとフロントよりバックエンドのがやることが多いですね！フロントは普通にFirebaseから商品データとってきて流す感じ。Stripe周りだけちょっとごにょごにょした。

  • React Native Web こちらちょいちょい前から触って本書いたりしてた↓んですが、仕事でもガッツリ使うことになるとは。。。！

  • https://nabettu.booth.pm/items/1569367

「こうやってプライベートで触っていたから、仕事でメリット・デメリットしっかり判断出来るので採用出来た」というやつ。

あとRNWebは純粋なSPAになりOG画像問題とかがあるので、Cloudflare Workersを使って設定するやつ、素振りだけやってそのネタで登壇した↓

React Native for WebでもOGP対応がしたい！ ~ TECH STAND #2 React Native 2020/12/18 ~自己紹介と最近作っているもの - React Native for Webの仕組み - Expoを使ったセットアップ - SPAでの課題 - Cloudflare Workersの紹介 - Workersを使ったSPAでのOG画像差し替え - デモspeakerdeck.com

これ使って本番運用とか出来たら楽だろな〜と思いながらCloudflare PagesのAlphaユーザー招待を指を加えながら待っています👶

Cloudflare PagesCloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. Developer-focused with effortless Git integration. Advanced collaboration built-in with unlimited seats. Unmatched performance on Cloudflare's edge network. Install Cloudflare Pages Where do you want to install Cloudflare Pages?pages.cloudflare.com

Next.js

Anotionを作るのにガッツリ使った。それまでも小さくなにかを作ってたりはした。

  • Notionに書くだけでWebサイトが作れるAnotion — Notionに書くだけ 誰でも簡単にWebサイトが作れる 30日間の無料トライアルを試す Notionで書いたページを、そのままWebサイトに Anotionはコンテンツの管理をNotionで行うことで簡単にページの管理・更新ができ、 カスタマイズも自由にWebサイト制作ができるサービスです。 このページもNotionでコンテンツを管理しています! AnotionトップのNotionページを

  • VercelとISR 「インフラはもうNext.js使ってISRするならVercel一択」という頭しかないのでとりあえずでこれを使ってますが、移行出来るなら他のも試したいな〜。Cloud runに入れてみたりはした。

catnoseさんがZennのフロントを載せ替えるようなことをTwitterで言ってたので速報を待ちます！ｗ,

↓これとかもそのうち触ってみようと思ってる。そのうちね。。。

flareact/flareactFlareact is an edge-rendered React framework powered by Cloudflare Workers. It's inspired by Next.js. That means it supports nice API patterns like: File-based routing Dynamic page paths Data fetching for page props using getEdgeProps API routes Universal application rendering (worker and client) However, it's brand new!github.com

CSSとか

  • Musubii

  • Tailwind ↓この辺でコンポーネント作ってうりゃおいってしたい気持ちはあるけど特に触れてない。

  • Tailwind Builder — Save time with the online editor for Tailwind CSS that has a simple, intuitive drag & drop interface and 240+ ready-made UI components.

あと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で自前で作った。

#個人Webサービスシステム構成事典 v2：ザ・シメサバズ「あのサービスの中身はこうなっていたのか！」 総勢29人の個人開発者が送る、34個のWebサービス・アプリの中身がどんな風に作られているのかわかるシステム構成事典がなんと無料で読める！ - テレビで取り上げられたサービスや、Twitterトレンドに載るなど話題になったサービス - 広告収入や有料課金で収入を得ているサービス - リアルタイムなデータのやり取りやAIを活用など尖った技術を利用したサービス - シンプルな構成で高速開発に特化したサービス などなど、さまざまな種類のサービス・アプリについて、概要や使用技術を図&文章にして1枚にまとめています。 ・個人開発を始めてみたい方 ・フルスタックな構成を学びたい方 ・駆け出しエンジニアの方 色々な方におすすめの書籍となっております！無料ですのでぜひご一読ください！techbookfest.org

まとめると結構触ってはいる。しかしこれといって新しい技術を会得した感がないのです。

新しい技術を会得した感は「これまででは作れなかったものが作れるようになった」というものに基づいています。それが明確にわかるといいんだけど、2020年はあんまりそういった意味での成長がなかったような気がする。そういう焦りが記事を書く妨げになっていたんじゃないかと振り返りを書いてて気づきました。

2021年これやりたい

しかし特定の技術に関してこれだ！ってのがあんまりないかも？Anotionに関しては技術的に解決したいポイントが山積みになっているので、それを解決出来る技術を手に入れたい感じですね。

そういった意味ではインフラとか全然わからんのでインフラパゥワーを付けていきたい所存。

あとはNoCodeのiPaaS系サービスつなげまくりピタゴラスイッチスキルも付けていきたい。（NotionAPIがそろそろオープンになると思うので、その辺で便利ツール作りたいな〜）

とはいえ、それらを手に入れたからといって「これまででは作れなかったものが作れるようになった」ということにはならない気がする。（Webフロントエンドに飽きが来ているのかもしれない。）

課題感

今まで職業エンジニアとして「これまででは作れなかったものが作れるようになる」というのを積み上げてきたんですが、それが2020年いまいち積み上がらなかった気がするのは、

  • 最低限なにか思いついたものを作れるスキルセットが集まってきたこと ももちろんあるんですが、

  • 今までにやってない新しい分野にあまり挑戦していない ことが大きい気がします。ほとんどJavaScript(TypeScript)しか書いてないのと、JSでだいたい作れるんすよね、、、笑

ということでAnotionでは今までやれてなかったことにも色々挑戦できる余地があるので、時間を使っていきたいと思っています。GUIとか、インフラ周りとかね。

以上です。長々と書きなぐった記事を読んでくださりありがとうございます！2021年も作っていきます！

Share