JSフレームワークの勉強はcodesandboxやstackblitzで学べば挫折しない

Share this post

CloudIDEのススメ

CloudIDEを使う際は開発環境を作る必要がないためとても便利です。
手取り早く開発を始めたいときや世界中の人たちのコードを参考にしたい場合は見てみると勉強になります。
今回はそんな便利なCloudIDEのサービスをいくつか紹介していきます。

codesandbox

codesandboxはWeb上で利用するブラウザIDEの一つで、サイトにアクセスするだけでjavascript関連のフレームワークの開発環境を作ることができます。
codesandboxでは以下のようなライブラリ・フレームワークに対応しています。
※2022年6月30日時点の情報です。
※codesandboxのホームに書いてあるものを載せているので実際には他のものも動くかもしれません

Vanilla,Typescript,React,Vue3,Angular,static,Node HTTP Server,remix-starter,Preact,Next.js,codesandbox-nuxt,Svelte,gatsby-starter-default,GSAP + Bonus Plugins Starter,blitz-js,docusaurus,CxJS.dojo-codesandbox-template,Reason,Adonis,Apollo
Server,Ember,SaraVieira/gridsome-starter-codesandbox,@mdx-deck/basic-template,
MarkoJSnestjs/typescript-starter,quasarframework/quasar-codesandbox,codesandbox-app/sapper-template,styleguidist/example,universal,VuePress,fastify-starter,p5.js

下がcodesandboxです

StackBlitz

StackBlitzは、Webアプリケーション用のVisualStudioCodeを利用したオンラインIDEです。
プラットフォームは、デスクトップバージョンと同じように応答性と適応性があります。

StackBlitzでは以下のようなライブラリ・フレームワークに対応しています。
※2022年6月30日時点の情報です。
※StackBlitzのホームに書いてあるものを載せているので実際には他のものも動くかもしれません

Next.js,Node.js,Nuxt3,JavaScript,TypeScript,React,Angular,Vue,RxJS,Solid.js,
NestJS,Express,Koa,Egg.js,Feathers,GraphQL,jsonserver,JSONGraphQLServer,Remix,SvelteKit,preact,lit,Eleventy,Docusaurus,Slidev,Astro Blog,Astro,Docs,Nodeman,Vitest,Vite,Webpack

下がstackblitzです



個人的にはstackblitzはJS界期待の新人のSolid.jsに対応しているのが大きいですね。

codesandboxもstackblitzもフロントエンドフレームワークだけではなく、nest.jsなどのバックエンドのJSフレームワークも試せるのがかなりの魅了的だと思います。 
バックエンドとフロントエンドの知識を両方つければ一人でアプリケーションの開発ができるようになるので開発ツールとしてだけでなく勉強ツールとしてもCloudIDEはかなり優秀だと思います。

逆にrailsやdjangoなどのフルスタックフレームワークを学びたい人はpaiza.cloudを使えば初学者でもつまづかずに勉強を継続できます。

Share this post