皆さんAngularやReact、またIonicなどでアプリやweb画面を作成していると思います。
そんな時に簡単にデモを表示したり、紹介するような場面が多くあると思います。
そんなときわざわざPCにAngularやIonicの環境を入れたりするのがめんどくさいですよね。
「StackBlitz」なら、ログイン不要+ブラウザだけでAngularのコーディングやプレビューが表示できます！
簡単に紹介していきます。
StackBlitzとは
簡単にいうとWebアプリケーションのオンラインIDEです。
Visual Studio Codeの画面とほぼ同様のUIとなっていて非常に使いやすいです。
特徴としては以下があります。
- 1クリックで簡単に開発を開始できる
- ユーザー登録不要
- npm install などがかなり高速で行える
- GitHubと連携可能
- リアルタイムでプレビューが可能
使い方
まず以下のStackBlizにアクセスします。
「START A NEW APP 」をクリックします。
今回はAngularを選択します。
VS codeのような画面が表示されるので、いつものようにコーディングを行うだけです！！
リアルタイムのプレビューもついていますし、かなり優秀です。
以下はiframeタグに埋め込み用URLを指定して、ブログに埋め込んでいます。
ちょっとしたサンプルコードをブログなどで紹介したいときにも、かなり役立ちます！！
まとめ
StackBlitzは環境構築やユーザー登録さえも不要で、AngularやReactなどのWebアプリケーションのフレームワークを使用したプロジェクトを立ち上げられます。
またURLを共有することで、簡単に共有も可能です。
大きなプロジェクトなどでは少し厳しいかもしれませんが、デモや勉強会などにはちょうど良いのではないでしょうか。
リンク