Zenn
🍊

[DevX]new Gitpodの話をさせてくれ～(Svelte, Vite)

2021/04/09に公開
TypeScript
Gitpod
Svelte
Vite
devx
tech

new Gitpod

数日前からリポジトリにあるGitpodボタンが表示されておらずサーバーの調子が悪いのかな？ と思いながら巡回していたところ、突然ボタンのロゴが変わってびっくりしました。
早速Gitpodのウェブサイトへ行ってみると……。

https://www.gitpod.io/

なんかものすごくさっぱりしたデザインに変わっていました。
そしてヘッダーにはこのような表示が……。

🎁 Gitpod March 2021 Release + $13M Funding Round | Explore

$13M！？
1300万ドルなので日本円（110円換算）にして大体14億3000万円ぐらいですかね。

https://www.gitpod.io/blog/next-chapter-for-gitpod

そんなわけで2021/4/8にGitpodは資金調達を行い今後全力で頑張っていくことが発表されました。

Next Chapter

それではブログを軽く翻訳してみましょう。
以下の引用文はwww.DeepL.com/Translator（無料版）で翻訳しました。

Gitpodでは、開発者の体験（Developer Experience）からあらゆる摩擦を取り除き、開発者がいつでもすぐにコードを作成できるようにすることを常に念頭に置いています。本日、General Catalyst社を中心とした1,300万ドルの資金調達、ビジュアルとブランド・アイデンティティの全面的な刷新、そして現代のソフトウェア開発における新たな製品カテゴリーを定義することを目的としたいくつかの製品のマイルストーンを発表できることを嬉しく思います。

以降資金調達、ブランド、製品、カンファレンスについて記載されています。

私たちは資金調達をする必要はなく、実際にその計画もありませんでした。しかし、昨年11月にSteve Herrodが連絡してきたとき、私たちは考え直しました。最初の電話で彼が言ったことは、前日の夜にPython環境をGitpodで設定して自動化し、その自動化の可能性に圧倒されたということでした。彼の経験と人柄はGitpodに100％マッチしており、私たちは彼を最初の外部役員として迎え入れることができました。

私も昨年11月頃、GitpodがGitLabとネイティブ統合した記事を読んだ後アカウント登録し、PythonのFlaskで作成したアプリを簡単に動かすことができて感動した記憶があります。
トップページのスクリーンショットもJavaのSpring PetClinicからPythonのFlaskr（Flask公式チュートリアル）に変更されていました。

今日発表するのは、複雑で豊富な機能を持つ開発者向けツールを、基本に立ち返ってわかりやすく紹介するアプローチです。途中、キンカンについても学びました🍊

以前のダークブルーデザインが持っている暗く難しいイメージとは真逆の、きんかん色を取り入れることで初心者でも馴染みやすい方針にしたようです。

プロダクトは、私たちが行うすべてのことの核心です。私たちは、2023年までに、エフェメラルなクラウドベースの開発環境が、今日のCI/CDのように一般的になると信じています。今回の製品アップデートでは、このビジョンの実現に向けて大きな一歩を踏み出しました。本日より、Gitpodのデフォルトの編集機能をVS Codeに切り替えます。また、GitpodのワークスペースでDockerイメージの構築やコンテナの実行ができるように、sudo権限とDockerサポートの一般提供を発表します。これは、先進的なネームスペース・レイヤリング技術に基づくもので、Kinvolk社の友人たちとの素晴らしい共同作業によるものです。最後に、開発者のワークフローを高速化するためにダッシュボードのフロントエンドを完全に再構築し、UXとUIを2021年版にしました✨

私自身JavaScriptの出身で、CodePenのようなWeb上で環境構築できる言語を好んで使っていました。[1]
しかしながらNode.jsをはじめとしたバックエンドも一緒にやる必要が出てきたり、TypeScriptから発展していった静的解析、動的解析のエコシステムへ乗っかるためにはローカルで開発せざるを得なくなりました。
ただ並行してDockerによる開発環境をまとめる技術が発展していったり、Dockerイメージを元に作られたクラウド上のCI/CDを行うことでローカル環境に占める環境構築の割合もある程度は減っていったように思えます。

上記翻訳の再掲となりますが

  • Gitpodのデフォルトの編集機能をVS Codeに切り替え
  • sudo権限とDockerサポートの一般提供
  • ダッシュボードのフロントエンドを完全に再構築

が行われたことによって、多くの開発者がローカル環境で作成していた開発環境についてGitpodを使うことで全てクラウド上に置き換えることが可能になったのではないでしょうか。
少し補足をはさみたいと思います。

Gitpodのデフォルトの編集機能をVS Codeに切り替え

まずGitpodはドイツのTypefox社が提供しているサービスのひとつで、このTypefox社が一番最初に提供していたクラウドIDEがEclipse Theiaでした。
GitpodはこのEclipse Theiaを発展させたもの（Kubernetesで分散提供しているもの）だったため、長らくVS Codeそのものに置き換えることはなかったのですが、
去年の12月頃に試験的にVS Codeとして提供され、今回正式に置き換わることになりました。
これにより.theiaディレクトリではなく.vscodeを使用できるローカル環境のVS Codeをそのままクラウド上で使用できるため、Eclipse Theiaを知らずVS Codeに慣れている人がそのままGitpodへ移行できるようになるでしょう。

https://www.gitpod.io/blog/root-docker-and-vscode

sudo権限とDockerサポートの一般提供

こちらも去年の12月頃に試験的に提供されたものが、今回正式に置き換わることになりました。
以前はapt-getコマンドなどはあらかじめ.gitpod.Dockerfileに記載し別途読み込む手続きを行う必要があったのですが、これが不要になったため
.gitpod.ymlファイルやGitpodコンソール上で多くのコマンド、パッケージを使用することが出来るようになりました。

ダッシュボードのフロントエンドを完全に再構築

きんかん色を取り入れ、デザインが2021年最新版となりました。
TailwindとReactを使用しており表示速度が非常に早い。
トップページではReactではなくSvelteが使用されています。

それでは早速ですが新たに追加されたExampleのSvelteKitを新たなGitpodで試してみましょう。

SvelteKit

https://github.com/gitpod-io/template-sveltekit

2021/4/7に追加されたこのExampleを使用します。
GitpodはSvelte推しなんですかね。
TypeScript、Svelte、Viteを使用しています。

https://github.com/gitpod-io/template-sveltekit/blob/main/package.json

SvelteKitの解説はこちら。

https://kit.svelte.dev/

👇👇👇👇👇👇👇👇👇

Open in Gitpod

👆👆👆👆👆👆👆👆👆

Markdownでこのように記載しています。

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/gitpod-io/template-sveltekit)

gitpod

ボタンをクリック、タップするだけで簡単に環境構築ができるGitpod。
新しいデザインとVS Codeの採用で開発体験がより良いものになりましたね！
また長いことGitpodを使用していますがDockerイメージをキャッシュしているのか2つ目のワークスペースを作成する速度が以前と比べて恐ろしく早くなっていることがわかります。

DevX

私たちがGitpodを作ったのは、開発者が日々の仕事をこなす上での経験を向上させるためです。開発者は、本当に重要なこと、つまり創造性を発揮してコードを書くことに集中すべきです。その代わりに、本来の仕事から離れて、自動化できることを手作業で行ったり、偶発的な複雑さと戦ったり、設計の悪いツールやAPI、プログラミング言語に驚かされたりしています。本日、私たちはDevX Conf（4月28-29日）を公に発表しました。このイベントは、第一原理から出発し、コラボレーションし、耳を傾け、議論し、ワークフロー、ツールチェーン、そして心を断捨離することを目的としています。私たちは、ソフトウェアのコーディング、テスト、構築、デプロイ、共同作業、運用などの分野で対話を行いたいと考えています。

皆様のご参加をお待ちしております。

DevX Confが開催されるそうです。
資金調達してカンファレンスやるぞ！ といった流れを聞くと思い出すのがNetlifyのJamstack Confで、Jamstackのようにカンファレンスを行ったことで注目が集まり、そのままトレンドが定着することを期待したいところです。
Gitpodをはじめとした企業が最近取り組んでいるトレンドとしてDeveloper Experience（DX? DevX!）があり、例えばMicrosoftのGitHub CodespacesやAmazon EC2を直接触ることができるAWS Cloud9がDevX関連サービスになると思います。
JavaScriptに限らず開発においていかに「積み減らし」を行うかといった部分をどう実現するか？ 我々が行う作業内容や学習内容は何か？ といった点につきましては引き続きトレンドを追いかけていきたいと思っていることを記し、ひとまず筆を置きたいと思います。

勢いで書いた熱量しかない技術要素が少なめな記事となってしまいましたが、少しでもGitpodに興味を持っていただけると嬉しいです。

脚注

  1. JS Binとかjsdo.it（2019年10月31日にサービスを終了）とか。 ↩︎

Discussion