Coderを使ってブラウザ上でAngularアプリケーションを開発してみる
先日、こんなブログを見つけました。
CoderというVisual Studio Codeをブラウザ上で使えるサービスがあるそうです！（情報ありがとうございます！）
私はメインPCがデスクトップでサブPCにChromebookを使っているのですが、Chromebookを使って開発ができると便利だなぁと思っていたのでこれは非常に朗報でした。
※一応、USBにUbuntuを入れてChromebookから使えるようにしていますが、Chromebook自体がスペックを抑えめにされているのでローカル開発にはあまり向いていません。
今回はCoder上でAngularのアプリケーションを1から作ってローカルで動作確認まで実施しましたので手順を紹介したいと思います。
プロジェクト作成
sample-angularというプロジェクトを作ってみます。
これでプロジェクトができます。
Node.jsをマウント
デフォルトではNode.jsは入っていなかったので、Node.jsを入れてnpmを使えるようにします。
VS Codeの画面が開いたら、[Ctrl + Shift + P]でコマンドパレットを開き、「mount」と入力しEnterを押します。
すると、マウント可能な言語とバージョンの一覧が表示されるのでNode.jsの最新版を選択します。
Node.jsが使えるようになります。
yarnのインストール
yarnを使いたい方は先ほどのブログにやり方が載っていますので参考にしてみてください。
記載の通りコマンドを打つと問題なくyarnがインストールできます。
Angular CLIのインストール
Angularを開発するならまずはAngular CLIが必要です。
ターミナルを[Ctrl + `]で開き、
npmの場合は
npm install -g @angular/cli
yarnの場合は
yarn global add @angular/cli
Angularプロジェクト作成
（小ネタ）単純にng newコマンドだけでも良いですが、Coder上にプロジェクトフォルダを切ってしまっているので、ここにAngularプロジェクトを展開するようにします。
ng new sample-angular --directory ./ --skipGit true
--directory ./と書くことで、カレントディレクトリ上にAngularプロジェクトが展開されるようになります。
開発サーバー起動
Angularのプロジェクトが作成できたので、開発サーバーを起動してローカルから繋いでみたいと思います。
通常のng serveではさすがにローカルから繋げられないので以下のようにして起動します。
ng serve --host 0.0.0.0 --port 3000 --disableHostCheck true
ホストを0.0.0.0、ポートを3000で起動します。
ポートは他に80や8080などいくつか用意されていますが、おなじみの4200がなさそうだったのでWebpackでよく使う3000にしました。
また、それだけだとページを表示したときに「Invalid Host Header」とエラーが表示されてしまいますので、--disableHostCheck trueをつけています。
起動中など、重い処理が動いてCPUやメモリを多く消費すると右下に「Fast Time」を勧めるメッセージが表示されます。
Fast Timeは一時的にコンテナのスペックを大幅に上げることができる機能で、無料プランであっても5時間までは使えるそうです。
今回はFast Timeを使わずにいこうと思います。
サーバーが起動したら、左側の[CDR.co]アイコンをクリックします。
すると、現在起動中のサーバーが表示されます。
このURLをクリックすると、ブラウザでURLを開きます。
ページが正しく表示されました。
LiveReloadも正しく動くので、Coder側でコード変更するとサーバーが再起動してブラウザがリロードされます。
感想
使ってみた感想をいくつかあげてみます。
【良かった点】
- 導入が非常に簡単
- コンテナベースなので、ミスっても捨てたりするのが簡単
【気になった点】
- 画面の動作1つ1つが少しもっさりしている（Containerへの切り替えやVSCodeでファイルを開いた際）
- プロジェクトを削除してもソースが残っている？ →VSCodeで開いたときのプロジェクトが、削除した方のプロジェクトが選択されている
今回はAngularで試してみましたが、この調子だとReactやVueでも全く問題なく開発ができそうですね。
いくつか気になる点はありますが、Chromebookでもストレスなく開発できるのでこれから作業が捗りそうです。
こういうオンラインのIDEがこれからどんどん増えてくれるとありがたいですね。
