フルスタックフレームワーク？のNext.js、Remix、Astro、Hono（HonoX）検索用メモ

2024年3月31日 11:33

Webのフロントエンド開発のフルスタックフレームワークと言われているものについて調べてみました。　Next.js、Remix、Astro、Hono（HonoX）といったものが該当するように自分には見受けられたので調べてみましたが、調べれば調べるほどわけが分からなくなってきてしまったのでｗ、あきらめて、せめてそのときに使った検索メモ（Googleによる検索のリンク）などを残しておこうかと記録しておきます。　Next.js13の記事を読んでいる間に、Next.jsさん（とその他のフルスタックフレームワークさん）はさらに遠くのどこかに行ってしまわれた感ｗ、です。　後で見返す気分になればまた見るかもですｗ。

フルスタックフレームワーク調査については、このあたりで3D表示用に使用したReact Three Fiberを載せて公開するには何がよいのか調べる作業でしたが、とりあえずそれも一時中断です。　フロントエンド技術広大すぎワロエナイ。　自分がやろうとしていることぐらいならシンプルにViteでSPAにしてアップロードとかでいいんかな？

で、以下検索リンクになります。　Google検索で毎回「xxxx　site:yyyy 」と書くのがめんどくさくなり作成したものですｗ。

Next.js のサイト指定検索

StackBlitz、CodeSandbox、ReplIt、Glitch、でサンプルコードがないか検索

StackBlitz
Next.js site:https://stackblitz.com/

CodeSandbox
Next.js site:https://codesandbox.io/

ReplIt
Next.js site:https://replit.com/

Glitch
Next.js site:https://glitch.com/

Zenn、Qiita、はてなブックマーク、より関連記事があるか検索

Zenn
Next.js site:https://zenn.dev/

Qiita
Next.js site:https://qiita.com/

はてなブックマーク
Next.js site:https://b.hatena.ne.jp

Remix のサイト指定検索

StackBlitz、CodeSandbox、ReplIt、Glitch、でサンプルコードがないか検索

StackBlitz
Remix site:https://stackblitz.com/

CodeSandbox
Remix site:https://codesandbox.io/

ReplIt
Remix site:https://replit.com/

Glitch
Remix site:https://glitch.com/

Zenn、Qiita、はてなブックマーク、より関連記事があるか検索

Zenn
Remix site:https://zenn.dev/

Qiita
Remix site:https://qiita.com/

はてなブックマーク
Remix site:https://b.hatena.ne.jp

Astro のサイト指定検索

StackBlitz、CodeSandbox、ReplIt、Glitch、でサンプルコードがないか検索

StackBlitz
Astro site:https://stackblitz.com/

CodeSandbox
Astro site:https://codesandbox.io/

ReplIt
Astro site:https://replit.com/

Glitch
Astro site:https://glitch.com/

Zenn、Qiita、はてなブックマーク、より関連記事があるか検索

Zenn
Astro site:https://zenn.dev/

Qiita
Astro site:https://qiita.com/

はてなブックマーク
Astro site:https://b.hatena.ne.jp

Hono のサイト指定検索

StackBlitz、CodeSandbox、ReplIt、Glitch、でサンプルコードがないか検索

StackBlitz
Hono site:https://stackblitz.com/

CodeSandbox
Hono site:https://codesandbox.io/

ReplIt
Hono site:https://replit.com/

Glitch
Hono site:https://glitch.com/

Zenn、Qiita、はてなブックマーク、より関連記事があるか検索

Zenn
Hono site:https://zenn.dev/

Qiita
Hono site:https://qiita.com/

はてなブックマーク
Hono site:https://b.hatena.ne.jp

HonoX のサイト指定検索

StackBlitz、CodeSandbox、ReplIt、Glitch、でサンプルコードがないか検索

StackBlitz
HonoX site:https://stackblitz.com/

CodeSandbox
HonoX site:https://codesandbox.io/

ReplIt
HonoX site:https://replit.com/

Glitch
HonoX site:https://glitch.com/

Zenn、Qiita、はてなブックマーク、より関連記事があるか検索

Zenn
HonoX site:https://zenn.dev/

Qiita
HonoX site:https://qiita.com/

はてなブックマーク
HonoX site:https://b.hatena.ne.jp

その他、検索キーワード構築用の名前いろいろ

道を拓く方々とお見受け致しました
azukiazusa
yusukebe
catnose
razokulover(YuheiNakasaka)
mizchi
uhyo
chimame
laiso
ics media
REFECT

このnoteのタイトルにもある、たぶん自分の理解ではフルスタックフレームワークと呼ばれているもの達
Next.js
Remix
Astro
Hono（HonoX）

そのフルスタックフレームワークの元となるフレームワーク（この表現あっている？）もともとはWebの高機能なSPA用？
React
Vue
Svelte

Reactの状態管理の機能
Redux
Recoil
Jotai
Zustand

これらはReactの標準のuseStateやContextの機能で状態管理しきれない場合に使用？　このあたり特に自分の理解が微妙なので、全文「？」ついてますｗ。
・Redux→高機能だがムズい？　
・Recoil→Reduxから適度な機能、適度なムズさになったもの？
　　　　　（Recoil開発者が退職で開発継続性に不安あり？）　
・Jotai→Recoilからの乗り換え先の第一候補？
　　　　　（日本人の方が開発に参加？）
・Zustand→Jotai開発会社によるもうひとつの状態管理の機能？
　　　　　（Jotaiより機能うｐ？）

個人的に、Zennを見ていて、投稿者の方々による状態管理の知見が共有されていって、投稿者の方々によりモデルケースがだんだん練り上げられていくような感じがして、熱いな、と思いました（←勝手な思い違いだったらすいません）。
　

サーバーにアクセスしてデータとってきたいぜ？
fetch
axios

サーバーにアクセスして、データとってきて、キャッシュとかいろいろ便利なこともしたいぜ？
TanStack Query（旧 React Query)
SWR

DBの機能を楽しく使いたいぜ？
Prisma
Drizzle

グラフ構造をつかって、上記の、データ取得、キャッシュ、DBアクセスすべてうまくやりたいぜ？
GraphQL

作成したものをクラウド上のサーバーに展開するぜ
Cloud Run
Netlify
Vercel
Cloudflare

・Cloud Run
　→有料　Googleのサービス　サービスをコンテナに載せてサクッと起動
・Netlify
　→無料部分あり　商用利用できず？　
　　下記サイトのはしりのようなサービスか？
Vercel
　→無料部分あり　商用利用できず？　
　　Next.js開発（Reactの開発もかなり含む？）
　　最近はAstroのスポンサーにも　フレームワークの開拓者？
Cloudflare (pages、worker)
　→無料部分（かなり？）あり　商用利用できる？　
　　現状の個人Web開発用の最強環境かも？