📚

個人的に2023年下半期に触りたいフロントエンド技術まとめ

Takagishi

2023/08/18に公開

フロントエンドは次々と新しい技術が増えていきますが、実務でそれら全てを触る機会はありません。ここでは、あくまで個人的な趣味の領域の話として年内に触ってみたいフロントエンド技術をまとめてみました。

広く技術に触れたとしても実務で役立つことは多くないです。仕事に役立てるのであれば、業務の延長にある技術を中心に学んでいくのが良いかと思います。

フレームワーク

★★★★★　Next.jsのappディレクトリ

v13直後にappディレクトリで開発始めてみようと思いましたが、少し癖があると思い、ひよって通常のディレクトリ構成で開発しています。

ー

もう始めるには十分な情報が揃っているので、次にNext.jsを触る時はappディレクトリで開発を進めます。実務でも年内の開発でappルーティングを使う可能性が高まってきています。

ー

ドキュメント：https://nextjs.org/docs/app
解説記事：https://zenn.dev/azukiazusa/articles/next-js-app-dir-tutorial

★★★★★　Astro

Astroは静的サイトを構築するためのフレームワークです。コンポーネントを楽に切り出せたり、Reactも普通に使えるので静的なページを作る際は開発体験もよく非常に好感触です。

ー

LP制作の案件で軽く触ってみましたが、まだ情報が少なく環境構築に若干苦労したものの、lintまわりも整備できて良い環境が整いました。

ー

静的サイトを生成するのでWebGLが使いやすいのではと思っていて、合わせてthree.js等を使ったリッチなサイトのテストをしてみます。

ー

Astro公式：https://astro.build/

★★★★　fresh / deno

freshは簡単にいうとNode.jsの改良版であるdenoベースで開発できるNext.jsです。ビルドを必要とせず、設定不要でTypescriptの環境で開発できるといった利点があります。（まだ正確に理解できてない）

ー

単純に興味あって少し動かしてみたところ、スムーズに構築できて良い感じでした。Next.jsにあるSSRなどの機能をfreshで補うことができるのかが気になっています。この点に問題なければ個人開発はfreshベースで考えていくかもしれません。

ー

deno公式：https://deno.land/
fresh公式：https://fresh.deno.dev/
参考：10 Things I Regret About Node.js

★★★　Svelte / SvelteKit

よくReactやVue.jsの代替として話題にあがるSvelteです。一昨年あたりから注目度が上がってきていて、今はSvelteKitでSSRも実装できたりと環境がだいぶ整ってきています。

ー

特徴として、仮想DOMがなくコンポーネントを効果的にレンダリングしてバンドルサイズの圧縮やパフォーマンスの向上があるようですが、実際に試してみないと何が良いのか実感できなそうです。
ー

フレームワーク系は切り替える際の学習コストとか多少あるので踏み切るまで時間がかかるものの、そろそろ触っておきたい。

ー

Svelte公式：https://svelte.dev/
SvelteKit公式：https://kit.svelte.dev/

認証・ストレージ

★★　auth0

next-auth.js（auth.js）などNext.jsで扱う認証まわりを少しずつ試していて、次はauth0を使ったアプリ開発をしてみる予定です。

ー

auth0は、シングルサインオンや多段階認証を備えているようですが、実際の開発のしやすさや使い心地を確認したいなと。認証系のライブラリは簡単に見えてセッション管理やDBと繋いだ時のリクエストのセキュリティどうなってるのとか無闇に使えない部分もあります。

ー

公式サイト：https://auth0.com/
ドキュメント：https://auth0.com/docs

★　Vercelの新サービス

Vercel Postgres / Vercel KV / Vercel Blob /は言わずと知れた2023年5月に発表されたVercelのストレージサービス。これらによって開発体験にどういった影響があるかを確認していきたいです。

ー

Vercel側でログイン認証までは用意されてないのでauth0と合わせて試してみたいですが、従量課金だったので一旦様子見で良いかなと思っています。（個人開発で開発停止した状態で課金が継続するのを防止したいため）

ー

参考：Introducing storage on Vercel

★★★★　supabase

supabaseは手軽に認証・DB（Postgres）・ストレージをこなせる便利なBaaSです。認証まわりのライブラリをいくつか触る中で、正直セッションの管理とサーバー側での確認が面倒だなと感じていて、認証とDB/ストレージはセットであった方が思考停止できて開発効率が上がると考えています。

ー

既に使ってはみてますが、改めて次はprismaに繋いだりときちんと運用しやすい形を模索していきたいです。

ー

公式サイト：https://supabase.com/

開発技術・ライブラリ

★★★　WebGl

そろそろWebGlにも取り組みたいです。three.jsなどを触るのは簡単ですが沼が深そうなので、実際のクライアントワークで扱えそうなテンプレートまわりを整理してあって、後は実際にいくつか試してみようと思います。

ー

Web上での3D表現は、ノーコードで対応しづらそうな領域なので、フロント表現として覚えておくと価値が高い技術だと考えていて、多少課金することも検討中。

★★★★　Jest / React Testing Library

今年はフロントエンドのテストをきちんと書けるようになれたらと思っていて、『フロントエンド開発のためのテスト入門今からでも知っておきたい自動テスト戦略の必須知識』を一通り読みました。社内でもフロントテストの勉強会が開かれたりもしてエンジニア全体で理解が広まっています。

ー

単体テスト、結合テスト、E2Eと簡単に見えて奥が深そうな領域ですね。フロントテストを正確に理解できれば開発チーム全体で役に立っていく自信に繋がりそうです。

★★★★★　tRPC

tRPCは型安全な状態でAPIを使用できるのが特徴で今年に入ってからしばしば耳にするようになりましたね。個人開発に導入してみていますが、データ取得・リクエストの呼び出しがシンプルになって型安全なのでめちゃくちゃ良い感じです。

ー

次のサンプルコードを見るだけでは分かりづらいかもですが、APIルートに個別のエンドポイントを作成せずtrpc.greeting.useQuery({ name: 'client' });でデータを呼び出せます。

// [trpc].ts
/**
 * This is the API-handler of your app that contains all your API routes.
 * On a bigger app, you will probably want to split this file up into multiple files.
 */
import * as trpcNext from '@trpc/server/adapters/next';
import { publicProcedure, router } from '~/server/trpc';
import { z } from 'zod';

const appRouter = router({
  greeting: publicProcedure
    // This is the input schema of your procedure
    // 💡 Tip: Try changing this and see type errors on the client straight away
    .input(
      z.object({
        name: z.string().nullish(),
      }),
    )
    .query(({ input }) => {
      // This is what you're returning to your client
      return {
        text: `hello ${input?.name ?? 'world'}`,
        // 💡 Tip: Try adding a new property here and see it propagate to the client straight-away
      };
    }),
  // 💡 Tip: Try adding a new procedure here and see if you can use it in the client!
  // getUser: publicProcedure.query(() => {
  //   return { id: '1', name: 'bob' };
  // }),
});

// export only the type definition of the API
// None of the actual implementation is exposed to the client
export type AppRouter = typeof appRouter;

// export API handler
export default trpcNext.createNextApiHandler({
  router: appRouter,
  createContext: () => ({}),
});

// index.tsx
/**
 * This is a Next.js page.
 */
import { trpc } from '../utils/trpc';

export default function IndexPage() {
  // 💡 Tip: CMD+Click (or CTRL+Click) on `greeting` to go to the server definition
  const result = trpc.greeting.useQuery({ name: 'client' });

  if (!result.data) {
    return (
      <div style={styles}>
        <h1>Loading...</h1>
      </div>
    );
  }
  return (
    <div style={styles}>
      {/**
       * The type is defined and can be autocompleted
       * 💡 Tip: Hover over `data` to see the result type
       * 💡 Tip: CMD+Click (or CTRL+Click) on `text` to go to the server definition
       * 💡 Tip: Secondary click on `text` and "Rename Symbol" to rename it both on the client & server
       */}
      <h1>{result.data.text}</h1>
    </div>
  );
}

const styles = {
  width: '100vw',
  height: '100vh',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
};

ー

tRPC公式：https://trpc.io/
参考：tRPCを導入したら爆速でWebサービスをリリースできた

★★★★　Zod / yup

用途は把握しているものの、普段はreact-hook-formでのみのバリデーションでワークしているのと、プラスアルファでChakraUIと合わせた時に設計が複雑になるといった話を聞いていて避けていました。

ー

tRPCとZodは公式でもセットで使っているのでZodは入れてみていますが、年内にはきちんと扱えるようになりたいです。

Zodドキュメント：https://zod.dev/

★★★　Resend

SendGridなどのメール配信ツールはサイトや開発体験がいまいちであることがほとんどですが、Resendは開発者に寄り添ったサービスな印象です。

ー

テストしてはみましたが、開発体験は非常に軽くて良い感じでした。アプリ内で組み込む形でResendを扱っていけたらと思っています。

ー

Resend公式：https://resend.com/

★★　Recoil

状態管理はローカルストレージの管理や関数化しやすいzustandに落ち着いています。触ったことがあるのはReduxToolkit、useContext、jotaiといった感じなので、次はRecoilも触ってみようか程度です。xStateも気になってはいます。

ー

今状態管理ライブラリに求めるていることは、レンダリングに悪影響を与えないこと、使いやすいこと、LocalStorageに容易にアクセスできることです。正直、ReduxやuseContext以外は大差ない気はしているものの、興味本位として。

ー

Recoil公式：https://recoiljs.org/

★★　Framer Motion

Framer Motionは良い感じにアニメーションを実装できるライブラリです。アニメーションが多様されたサイトは個人的にはあまり好きではないですが、良いアニメーションはシームレスなWeb体験をユーザーに提供し、UXを向上してくれます。

ー

Framer Motion公式：https://www.framer.com/motion/

API

★★★★★　GPT API / LangChain

Next.jsでLangChainも良い感じに扱えることを知って少しずつ開発進めてます。

ー

GPT-3から毎回非同期/stream取得のコードを確認してテストしていたりしますが頻繁に破壊的なAPIのアップデートがあるのがきついです。

ー

LangChain公式：https://python.langchain.com/docs/get_started/introduction.html

★★★　Stripe API

決済まわりを扱う機能を作りたく、改めてStripe APIを使った開発がしたいです。

ー

AIで実装をアシストするサイトが公式的にできましたし、AIベースで今まで以上に楽に実装できるようになってるはずです。

ー

参考：Stripe と OpenAI が戦略的協業：OpenAI の主力製品を収益化し、GPT-4 で Stripe を強化

ブロックチェーン

★★★★　thirdweb

thirdwebは無料で使えるブロックチェーンの開発フレームワークです。一通りの基本的なコントラクトの実装を簡単に扱えます。NFTのミントサイトなどはやってみましたが、できれば継続的に追っておきたいです。

ー

ブロックチェーンまわりはオンチェーン上に公開される上にコントラクトのバリエーション自体はさほど多くなくAIが得意な領域と思い、Solidityを書くのは諦めると決めたので、やるとしたらthirdwebでの学習を進めていくのをメインとする予定です。

ー

定期的に何かWeb3的な開発できないか考えてみるものの、ウォレットまわりの良い仕組みがイメージできないのがずっと悩みどころです。（できればメールアドレスに紐づけてアプリ内でシームレスにウォレット管理したい）

ー

thirdweb公式：https://thirdweb.com/

★★★★　Astar

日本発のブロックチェーンのハブとするブロックチェーンです。マルチチェーンをどうコントロールできるのは良く分かってないですが、気になっています。国内企業の中では1番応援したい感。（暗号資産買っておけばよかった）

ー

Astar公式：https://astar.network/

★★★★★ ノーコード開発

サクッと作ってみたいアプリアイデアがあって、ノーコードで実現できないか頭の片隅に置いてます。ノーコード系のサービス増えてしまってクオリティの高そうなアプリを開発できそうであっても、実際のところどうなのかとか確認するの面倒になってきてしまってます。

ー

ノーコード系のプロダクトは乱立していてBubbleやGlideなどはもう古い印象なので、ここはツールの選定から検討しています。

ー

Webアプリはフロントで特に構築に困らないので、ノーコードツールにはネイティブアプリに対応していて欲しいですが、ネイティブ対応で効果的に使えそうなのはAdaloあたりですかね。

ー

ノーコードはなんだか下火になってる感ありますが、どんどん活用していきたいですし、フロントエンド開発との相性も良いなと感じていて色々と試してみたいです。

技術選定に悩んでいる方向け

引用：https://2022.stateofjs.com/en-US/libraries/

新しい技術を試していきたいけど、何をするか悩んでいる方もいると思います。トレンドを抑えつつ客観的な評価に基づいた判断を行うには、State of javascriptといった海外の評価サイトを参考にするのも一つです。

他、個人的にはTwitterやZennで流れてきた内容を保存して試してみるといったことも多いです。開発に対する問題意識は誰しもが持っていると思うので、後は興味本意で触れていくスタイル。

参考：https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/

やってみたいこと

WebGLとastroでサービスサイト構築
fresh、auth0、Vercel Postgres / Blobs, zod, tRPC, stripeでアプリ開発
Next.js appディレクトリ、thirdweb, Recoil, Framer Motionでブロックチェーンアプリ開発
Jest / React Testing Libraryは実務で実装
ノーコードで簡単なアイデアアプリ作成
ブロックチェーンまわりも触れたら触る

個人開発では技術ファースト、100%プロダクトアウトで開発をしてましたが、熱意がないと「作って公開して改善を重ねる」といったフローが成立しないので、どこかのタイミングで一つのプロダクトに専念する形で事業化とその拡大を目指していきたいなと思っています。

その他

新しい技術やその発見は次々と出てくるので都度触ってみたい技術は増えていきます。たまにReactやNext.jsに対するネガティブキャンペーンも見かけるのにも一喜一憂したり。

ドキュメントを読んでさくっと理解できる頭はないので地道に書いて試行錯誤しながら触ってます。個人開発はなんだかんだ一つの開発に数ヶ月かかったりするので、なかなか思うように進まないのは改善したい。

React NativeもUdemy学習と個人開発でそのちょっとした応用アプリを作ってみた程度なのでガッツリ使いたいですが、流石にちょっと厳しそう。

まとめ

気になってるものまとめたら、案外多いことに気がつきました。（結構領域を絞っているつもりではある）リストアップした技術はサンプルコードを触るだけでなく、簡易的でも良いので何かしらの実装の中で触るのが理想です。

全部触るのは無理かもですが、趣味なのでマイペースに進めていこうと思います。ほぼお金をかけず遊べるという点は経済性に優れていて良いですね笑。

フロントエンド領域は過去に学んだ知識が無駄になることがかなりあって、こんなにもアンラーニングが求められる領域はあまりないのではと最近思ってますがどうなんでしょう。

フロントエンド通信Publication

アウトプットを通じたフロントエンド領域の認知向上と技術深化を目的としたパブリケーションです。現役エンジニアおよびフロントエンドエンジニアを目指す方の役に立つ記事を書いていきます。（テスト運用中）