Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

StackBlitz で Angular のオンラインデモ環境を爆速で用意する

More than 1 year has passed since last update.

この記事は Angular Advent Calendar 2017 の14日目の記事です。

StackBlitz とは

StackBlitz とは、簡単に言うと、オンラインの VS Code です。少し前に Medium で紹介されて注目を集めています。
image.png

Angular と React 用のプロジェクトを作れるとのことで、早速使ってみました(もちろん Angular で)。良い点、悪い点を挙げてみたいと思います。

良い点

Angular CLI ベースのプロジェクトを速攻で開始できる

上記の画像で Angular をクリックすれば、ものの数秒で開始できます。
image.png

Angular CLI の generate 系コマンドを GUI 操作できる

左ペインの app フォルダで右クリックすると、下図のように、コンポーネントやモジュールなどの生成コマンドがコンテキストメニューに表示されます。
image.png

パッケージのインストールが速い!

作者曰く、5x 速いと言っています。そこまでの差があるかどうかは分かりませんが、試してみた感じ確かに速いことは間違いありません。

依存パッケージもインストールしてくれる

下の画像は @angular/material をインストール中の状態です。@angular/material が依存している @angular/cdk も一緒にインストールするか聞いてくれます。
image.png

共有が簡単

SHARE メニューをクリックすると、共有用のリンクが表示されます。Anglar CLI のプロジェクト構成のまま共有できるので、Plunker よりもいい感じです。
image.png

エクスポートもできる

EXPORT メニューをクリックずれば、Angular CLI プロジェクトとしてそのまま ZIP ダウンロードできます。ダウンロード後は解凍して npm install すればすぐに使えるようになります。

悪い点

Angular CLI サポートがまだまだ

Angular CLI のコンフィギュレーション系が全然弱いです。

Intellisense がいまいち

本家 VS Code ほどの快適さはありません。例えば import {} from と入力して Ctrl+Enter を押しても No suggestion と表示されてしまい、インストール済みのパッケージ名が一覧表示されません。他にも、テンプレートの入力でタグ候補が表示されなかったりします。

Emmet が効かない

全く効きません。まだサポートされていないようです。

まとめ

現状では、デモとか用には使えるものの、実際の開発では厳しいという印象です。Intellisense や Emmet が効かないのは致命的です。ただ、非常に面白い試みで、Issue を見ていると今後が大いに楽しみです。

明日は @mstssk さんです。よろしくお願いします。

caddi
製造業の受発注プラットフォーム「CADDi」を提供しています。 モノづくりに携わるすべての人が、本来持っている力を最大限に発揮できる社会を実現する。産業の常識を変える「新たな仕組み」をつくります。 「CADDi」は金属加工品のCAD・設計図の解析から複雑な物流を表現するUIまで幅広い開発をしており、常に開発環境に最新の技術をとり入れて、より良いプロダクトを作るように心がけております。
https://corp.caddi.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away