StackBlitz Codeflow をつかってみる
- 投稿した日
- 更新した日
- 書いたひと
- ひらたけ
StackBlitz Codeflow というサービスが気になったので、つかってみました。オンライン IDE を提供している StackBlitz が開発している WebContainer という仕組みをつかってつくられているとのこと。
普段、GitHub にある他のひとのリポジトリや OSS のリポジトリでどのようなツールが使われているのかを見るのがすきでよく見ているのですが、Vite のリポジトリ を見ているときに使っているのを見つけて「良さそうだなあ」ということでつかってみました。
どんなサービスなのか
StackBlitz Codeflow は「Codeflow IDE」「Web Publisher」「pr.new」「CodeflowApp」というサービスで構成されており、これらを通じて 開発体験を向上させることができる ようです。
ブラウザ上で動作する開発環境 「Codeflow IDE」をつかってプログラムの実装 をしたり、 「Web Publisher」でドキュメントやブログを作成 したりして、同じブラウザ上で GitHub を開いてプルリクエストを作成し、 GitHub 上で「CodeflowApp」が自動的にプルリクエストに投稿したコメント にある 「pr.new」という短い URL から開発環境を開いてレビューする というような流れで開発を進めることができます。
全てがブラウザだけで行うことができるので便利そう。実際の流れは以下のカンファレンスの動画を見ると分かりやすいです。
オープンソースのリポジトリであれば、無料で使い続けられるとのこと。
つかってみる
面白そうなので、さっそくつかってみることにします。
GitHub 上のリポジトリを「Codeflow IDE」で開くには、 アドレスバーで URL の「github.com」を「pr.new」に置き換えるだけ 。覚えやすいし短くて入力も簡単なのがいいですね。
開発環境を開くと自動的に Node.js のパッケージのインストールと、リポジトリに設定されていた「dev」スクリプトが実行されるようです。
ローカルサーバが起動すると、そのまま同じ画面上でプレビューの表示ができました。ローカル環境で開発するときと同様に、コードを書き換えるとプレビュー表示にすぐ反映されます。別のタブやウィンドウでプレビューを表示することも可能です。
このブログ記事も StackBlitz Codeflow を使用して書きました。パソコンにインストールした VSCode を起動してローカル環境で作業するのとほとんど変わらない快適さで、驚きました。
ブラウザ上の開発環境でコードを書き換えて「Commit & Push」を押してコミットし、「Open New PR」ボタンを押すと、GitHub でプルリクエストを作成する画面に移動します。そのままプルリクエストを作成すると、 自動的に CodeflowApp がレビュー用のリンク付きのコメントを投稿 してくれます。
このリンクをクリックすると、作成されたプルリクエストのコードを「Codeflow IDE」で開くことができます。
今回は私が個人で運営しているウェブサイトのリポジトリで試したのでレビューするとかはないですが、実際の動作を確認するためにパソコンを起動して VSCode を開いてプルリクエストのブランチをチェックアウトして…というのは結構手間がかかると思います。
プルリクエストに投稿されたコメントのリンクをクリックするだけで表示を確認することができるというのは、かなり便利そうだなと思いました。
StackBlitz Codeflow を実際につかってみましたが、 全てがブラウザ上で完結できるのが便利だなと感じました 。開発環境を構築しようとするとそれなりに手間がかかるので、ときどきしか帰らない実家に置いてあるパソコンでコード書きたいときとかに使えそう。WSL の設定とか Node.js のインストールとかやるのめんどいので。
不特定多数のひとが開発に参加するような場合でも、CodeflowApp が Issue やプルリクエストにコメントをしてくれるので迷わなくていいなあと思いました。
まだベータ版とのことで、うまく動作しないことがあったり、使用できない VSCode の拡張機能があったりはしますが、これから改善されていくと思うので、積極的に活用していきたいです。