GitHubのスター数によるランキング(以下のサイト)より、フロントエンドにおける流行の技術やライブラリを見てみたいと思います！
結論
TypeScript, React, TailwindCSSは確固たる地位を築いてるなと思います。言わずもがな、TypeScriptはJavaScriptのtype(型)強化版、ReactはJavaScript(TypeScript)のフレームワークの１つです。TailwindCSSはbootstrapなどと同カテゴリーのCSS実装を簡単にしてくれるライブラリです。フロントエンドに限りませんが、確固たる地位を築いたライブラリやフレームワークは、それに関連するライブラリ等が作成され、その中で人気を博するものが出てきます。Rubyにおける Ruby on Rails、PHPにおけるLaravelのようなものです。TailWindCSSでは、DaisyUIなんかはTailwindCSSのコンポーネントクラスですし、MantineはTailwindCSSと相性のよいReact UIライブラリ(ChakuraUIやMUI)であり、これら関連する技術が GitHubスター数の上位に来ています。
stateの状態管理ではjotaiとzustandの2択になってきています。かつてはReduxが首位を占め、Recoilがatomベースの管理を始めて人気を博しましたが、随分と時代が変わったなと思います。jotaiはatomベース、zustandはstoreベースです。jotaiの方がコードになりやすく個人的には好きですが、人気を博したReduxの切替先としてはzustandの方が馴染みやすいためか、ユーザーはzustandの方が伸びています。zustandはドイツの会社がやっていることもあって、首位を築くのはzustandかなと思います。
ビルドツールではViteが圧倒的です。かつてはwebpackが首位を占め、追ってesbuildが伸びてきた状況がありましたが、もう完全に落ち目ですね。viteはフランス語で「素早い」という意味であり、文字通りwebpackやesbuildより高速で動作できることが特徴です。初リリースが2020年ということもあって以前は日本語記事なんてググっても全く出てきませんでしたが、2023年末時点ではググれば日本語記事はそれなりの数ヒットしてきてるなと思います。
Reactフレームワークでは Next.jsが相変わらず人気です。これはデプロイツール vercelを開発した会社が作っているフレームワークです。Next.jsでは事前にページ単位でレンダリングするので、Reactよりダウンロードファイルサイズを削減できます。またURLごとに個別のHTMLが生成されるのでSEOに便利です。ルーティングライブラリ無しでページ遷移を実現できるのも便利です。かつてはSSRでしたが今はSSG(Static Site Generation)がNext.jsでは採用されています。静的サイト生成ツールです。
RPC(Remote Procedure Call)では tRPCが人気です。RPCは 遠隔(Remote)にあるコンピュータでプログラムを呼び出して(Procedure Call)実行するための手法のことです。ネットワーク経由で遠隔のコンピュータに処理をさせるにはTCP/IPやUDPなどを利用する必要がありますが、機能ごとにプロトコルを設計するのは非効率なので、関数による呼び出しを抽象化し共通規格にしたのがRPCです。tRPCはスキーマなどを必要とせず、APIエンドポイントを静的に型付けし、クライアント(フロントエンド)とサーバー(バックエンド)間でそれを共有できるRPCフレームワークです。tRPCは TypeScriptの関連技術の１つです。APIの型情報をフロントエンドとバックエンドで簡単に共有できるメリットがあります。
Reactの関連技術には Remix や react-use も有用です。Remixはよく Next.jsとの対比で語られます。Next.jsではSSG(Static Site Generation)の機能を有するのに対し、RemixではSSGの機能を有しません。SSGは前述の通り、ユーザーの表示したいページを即座に表示でき、SEO対策としても有用です。一方で認証に必要なサービスには使用できません。Remixでは毎回SSR(Server Side Rendering)しますが、エッジコンピュータ(ユーザーの近くでコードを実行する, Cloudflare)を利用することでSSGに劣らないパフォーマンスを発揮します。react-useはreact hooksのライブラリであり、頑張ってhookを作ったけどそれreact-useにもうあるよ、みたいなことがあるので、先にチェックしておくと開発スピードを上げることができるかもしれません。
フロントのテストツールではPlaywrightが圧倒的に人気です。PlaywrightはMicrosoftが開発したツールであり、chromeやsafariなどをコマンドライン上で実行できるnodeライブラリです。webアプリを開発する際のテストを自動で行ってくれるツールであり、ユーザーの操作に従って最初から最後まで正しく動作するかテストする(＝E2Eテスト)ことができます。すべてのアプリが連携して正しく動作しているかが確認できます。node.jsを実行できる環境を整え、npmコードで実行します。
SSH接続にはTabbyが人気あります。Tabbyを使えばSFTPや多段SSH(PCからサーバー１を経由してサーバー２に接続する)やSSH接続もぜんぶ簡単にできる。PCからサーバーにアクセスするにはSSH接続を行う。SSH接続先情報の保存やGUIカスタマイズ等を１つのアプリで管理することができる。TeraTermなどと類似の機能を持っている。SSH接続せずPC内で作業する場合にはGitBashなどでできるが、SSH接続するなら Tabbyが選択肢に入る。
TypeScriptのValidation(入力情報のチェック)には zodが人気です。zodを使えば、入力文字数が一定以下だったり型違いだったりしたときにエラーを出して弾くことができます。axiousではHTTPリクエストを手軽に行えます。TanStack Queryはデータフェッチライブラリであり、APIからデータを取得したい時や更新したい時に使うことができます。ローコードではStrapiとかMedusaも活用してみても良いかもしれません。
勉強の順番
JavaScript → TypeScript → React → Tailwind CSS → jotai → Vite → Next.js → tRPC → Playwright → Remix → Tabby → DaisyUI → react-use → zod → axious → TanStack Query
楽しんで取り組むことが継続の秘訣です。心に余裕のあるときに次の技術に手を伸ばしましょう。
そのほかの技術についての解説
1. フロントエンドフレームワーク
- Qwik：Hydrationを使用せずにパフォーマンスを追求したもの。Githubスター数ではReactに次いで2位。フロントエンド全体でも14位で注目度は高い。
- solid.js：Reactから大きく影響を受けたライブラリ。基本的な書き方はReactと同じ。追加のライブラリを入れなくてもstateの値をグローバルで持てるなどの改良がある。Reactではpropsのバケツリレーになったり、それを解決するためにReduxやRecoilを使っていた。全体で24位。
- Svelte：Reactと同じ分野にあるフレームワーク。仮想DOM がない。正確に分類するなら、UIライブラリではなくコンパイラ。コンパイル時にライブラリコードがほぼ無い状態のJavaScriptを生成する。Reactとかより複雑ではないので初心者におすすめらしい。著者はReactばかりでSvelteは使ったことがない。全体で29位。
- Vue.js：Vue.js2とVue.js3がある。”足せばそれなりの人気になる”とは上記サイト著者のコメント。ただ両方ともユーザー層が被ってるだろうから足すのは問題ありそう。全体で31位。
- (Angular：ちょっと落ち気味か。)
Reactエコシステム
- Excalidraw：オンライン図形描画ツール。
- create-t3-app：next.js, typescript, tRPGなどを前提とする雛形。
- Docusaurus：ドキュメントサイト(静的サイト)を作れるツール。Markdownでドキュメントを書く → Docusaurusで静的HTMLを生成 → ホスティングという流れで使う。FaceBook社が作成。
- MUI：React用のコンポーネントライブラリ。Material UIが前身。デザインや動作カスタマイズがしやすい。入力フォームとか凝り易い。
- Chakra UI：UIコンポーネントライブラリの1つ。1からCSSを記述することなくスタイルに一貫性を持たせたUIを楽に実装することができる。React用のCSSライブラリ。
サーバーサイド
- Astro：静的サイトビルダー。ビルド時に可能な限りjavascriptを排除してHTMLとCSSを生成する。
- Nest：Node.jsで書かれたサーバーサイド(バックエンド)用のフレームワーク。TpeScriptで釣っ繰られており、Expressをコアとして作られているのでExpressの機能やライブラリを使える。
- nvm：Node Version Manager。ひとつのシステム内に、複数のバージョンのNode.jsをインストールしておき、必要に応じてバージョンを切り替えて使えるようになる。
- Fresh：Denoのwebフレームワーク。シンプルで使いやすい。TypeScriptをデフォルトでサポート。DenoはサーバーサイドでJavaScript(TypeScript)を使用するもの。
- Strapi： Headless CMSの1つ。Headless CMSはコンテンツ管理などバックエンド機能のみを提供するCMSのこと。2015年から開発され、コーディングなしでも簡単にAPI開発が可能。Node.jsベースで作られている。完全無料で基本設定はコマンド1行のみ。SQLiteが推奨されている。
- Prisma：Node.js用の次世代ORM(Object-Relational mapping)。プログラミング言語のオブジェクトで定義したメソッドで、SQLを書かずにデータベースの操作が可能なツール。Node上のアプリケーションで直接DBに接続してクエリ―発行が可能。Next.hsアプリでDBを扱う際に特に有用。RDB周りの処理をより簡単に行える。
- Deno：v1.0がリリースされたのが2020年。node.js製作者が作った。node.jsの改良品。Denoの文字を入れ替えるとnodeになる。つまりサーバー側でJavaScriptを実行できる実行環境。
ビルドツール
- Vite – フロントエンドのツール。webpackの上位互換。
- Turborepo：JS/TSのmonorepo(git)のための高速ビルドシステム。変更された部分だけを再ビルドすることで、ビルド時間を大幅に短縮する。
- (swc, esbuild, webpack) – この辺はもう落ち目っぽい。
テスト
- Playwright – webブラウザの自動化テストを実行するためのライブラリ。一強状態。
- Storybook：UIカタログ。UIコンポーネントをブラウザで手軽にチェックできる。UIがおかしくならないか予め検証することができる。簡素なデモデータを用いてUIチェックできるので、サーバー側の準備を待たずにUI開発ができる。
CSSツール
- tailwindcss：bootstrapと同じ感じ。tailwindcssの方が自由度がやや高い感じ。
- DaisyUI：TailwindCSSのコンポーネントクラス。npm installだけでTailwingCSSのプラグインとして使用できる。TailwindCSSを使うと多くなりがちな記述を減らせる。
ローコードツール
- Mermaid：テキストでグラフやチャートが描ける。フローチャートやシーケンス図、ガンスチャートなどを表示できる。作図したものはPNG/JPEGで書きだすこともできる。
- Mark Text：Markdownの編集に特化したエディタ。Markdown形式のテキストを入力しながら、即座にそのプレビューを確認できるのが大きな特徴。
- zx：JavaScriptでシェルスクリプトがお手軽に書ける。googleから2021年に公開。
- NocoDB：ノーコードアプリAirtableの代替として使えるツール。excelみたいなもの
- Three.js：手軽に3Dコンテンツを制作できる商用利用可能なJavaScriptライブラリ。ブラウザで3Dゲームを作るときなどに使われる。
- Medusa：Shopifyの代替を宣言しているオープンソースのヘッドレスコマース。JavaScript開発者向けに設計されている。shopifyはスケールするほどサイト速度が息詰まる。テンプレートから脱却し、ページスピードとSEOパフォーマンスに最適化された独自のコマース開発ができる。
- n8n：Node.jsベースのワークフロー自動化ツール。n8nでワークフローを作ることで、webサービスで行っていた作業をほぼノーコードで自動化できる。特定のメールが届いたらSlackに通知する、Google Driveのファイルが更新されたらLineに通知する、などが実現できる。ローコードのRPAツール。
- Tabler：きれいでレスポンシブな管理画面ダッシュボードを簡単に作成することができる。webアプリの管理画面(ダッシュボード)を手軽に作れるというもの。Open-Sourceなので無料。
- PartyTown：サードパーティスクリプトの処理をサービスワーカーに任せることで読み込み速度を爆速にしてくれるツール。
デスクトップ
- Tauri：人気が凄い。Rustを使ってデスクトップアプリを作る。
- (Electron) : Tauri一強状態。
GraphQL
- TanStack Query：データフェッチライブラリ。APIからデータを取得したい時や更新したい時に使うことができる。Reactエコシステムと被り。
- (Directus, Gatsby) – Gatsbyも落ち目っぽい。
一時期話題になったライブラリ
- Faker：JSでダミーデータを作成するためのライブラリ。開発者が2020年11月に意図的にバグを仕込んでたことで物議を醸した。
コメント