アプリ屋になりたいブログ

アプリ屋になりたいブログ

アプリの開発と仕事の効率化について紹介するブログ

「Stackblitz」ブラウザで簡単にAngularやReactをコーディング!ブログへの埋め込みも可能

f:id:bocbocmm6:20191227221226p:plain

皆さんAngularやReact、またIonicなどでアプリやweb画面を作成していると思います。

そんな時に簡単にデモを表示したり、紹介するような場面が多くあると思います。

そんなときわざわざPCにAngularやIonicの環境を入れたりするのがめんどくさいですよね。

「StackBlitz」なら、ログイン不要+ブラウザだけでAngularのコーディングやプレビューが表示できます!
簡単に紹介していきます。


StackBlitzとは

簡単にいうとWebアプリケーションのオンラインIDEです。
Visual Studio Codeの画面とほぼ同様のUIとなっていて非常に使いやすいです。

特徴としては以下があります。

  • 1クリックで簡単に開発を開始できる
  • ユーザー登録不要
  • npm install などがかなり高速で行える
  • GitHubと連携可能
  • リアルタイムでプレビューが可能

使い方

まず以下のStackBlizにアクセスします。

stackblitz.com

「START A NEW APP 」をクリックします。

f:id:bocbocmm6:20191227214047p:plain

今回はAngularを選択します。

f:id:bocbocmm6:20191227214214p:plain

VS codeのような画面が表示されるので、いつものようにコーディングを行うだけです!!

f:id:bocbocmm6:20191227214312p:plain

リアルタイムのプレビューもついていますし、かなり優秀です。


以下はiframeタグに埋め込み用URLを指定して、ブログに埋め込んでいます。
ちょっとしたサンプルコードをブログなどで紹介したいときにも、かなり役立ちます!!




まとめ

StackBlitzは環境構築やユーザー登録さえも不要で、AngularやReactなどのWebアプリケーションのフレームワークを使用したプロジェクトを立ち上げられます。

またURLを共有することで、簡単に共有も可能です。
大きなプロジェクトなどでは少し厳しいかもしれませんが、デモや勉強会などにはちょうど良いのではないでしょうか。