Heap Technology

<h2>CloudIDEのススメ</h2>
<p>CloudIDEを使う際は開発環境を作る必要がないためとても便利です。<br>
手取り早く開発を始めたいときや世界中の人たちのコードを参考にしたい場合は見てみると勉強になります。<br>
今回はそんな便利なCloudIDEのサービスをいくつか紹介していきます。</p>
<h2>codesandbox</h2>
<p><a href="https://codesandbox.io/">codesandbox</a>はWeb上で利用するブラウザIDEの一つで、サイトにアクセスするだけでjavascript関連のフレームワークの開発環境を作ることができます。<br>
codesandboxでは以下のようなライブラリ・フレームワークに対応しています。<br>
※2022年6月30日時点の情報です。<br>
※codesandboxのホームに書いてあるものを載せているので実際には他のものも動くかもしれません</p>
<p>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<br>
Server,Ember,SaraVieira/gridsome-starter-codesandbox,@mdx-deck/basic-template,<br>
MarkoJSnestjs/typescript-starter,quasarframework/quasar-codesandbox,codesandbox-app/sapper-template,styleguidist/example,universal,VuePress,fastify-starter,p5.js</p>
<p><strong>下がcodesandboxです</strong></p>
<iframe src="https://codesandbox.io/s/gallant-pascal-03qr32" title="Plotly All Graph Types" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<h2>StackBlitz</h2>
<p><a href="https://stackblitz.com/">StackBlitz</a>は、Webアプリケーション用のVisualStudioCodeを利用したオンラインIDEです。<br>
プラットフォームは、デスクトップバージョンと同じように応答性と適応性があります。</p>
<p>StackBlitzでは以下のようなライブラリ・フレームワークに対応しています。<br>
※2022年6月30日時点の情報です。<br>
※StackBlitzのホームに書いてあるものを載せているので実際には他のものも動くかもしれません</p>
<p>Next.js,Node.js,Nuxt3,JavaScript,TypeScript,React,Angular,Vue,RxJS,Solid.js,<br>
NestJS,Express,Koa,Egg.js,Feathers,GraphQL,jsonserver,JSONGraphQLServer,Remix,SvelteKit,preact,lit,Eleventy,Docusaurus,Slidev,Astro Blog,Astro,Docs,Nodeman,Vitest,Vite,Webpack</p>
<p><strong>下がstackblitzです</strong></p>
<iframe src="https://stackblitz.com/edit/react-ts-sravds?file=App.tsx" title="Plotly All Graph Types" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<p><br/><br/></p>
<p>個人的にはstackblitzはJS界期待の新人の<strong>Solid.js</strong>に対応しているのが大きいですね。</p>
<p>codesandboxもstackblitzもフロントエンドフレームワークだけではなく、<strong>nest.js</strong>などのバックエンドのJSフレームワークも試せるのがかなりの魅了的だと思います。　<br>
バックエンドとフロントエンドの知識を両方つければ一人でアプリケーションの開発ができるようになるので開発ツールとしてだけでなく勉強ツールとしてもCloudIDEはかなり優秀だと思います。</p>
<p>逆にrailsやdjangoなどのフルスタックフレームワークを学びたい人は<a href="https://paiza.cloud/ja/">paiza.cloud</a>を使えば初学者でもつまづかずに勉強を継続できます。</p>


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

<p>新しい技術を試せる場が欲しかったのと個人のブログを運用したいと考え開設しました。<br>
主にWEBの技術について記していきたいと思います。</p>


#Community

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

テックブログ始めました