【Chromebookでプログラミング】開発環境の準備

この記事は Chromebook を使い倒したい、かつプログラミング初心者のあなたに残す覚書です。

  • プログラミング学習を再開
  • Chromebookでシステム開発
  • Windows が無くても仕事できます
  • Chromebook に開発環境を準備する
    1. Linux のセットアップ【共通】
    2. Visual Studio Code (コードエディタ) のセットアップ
  •    ※Android Studio のセットアップはこちら
  •    ※No-code アプリ開発環境についてはこちら
  • Chrome でデバッグ
    1. 拡張機能 のインストール

プログラミング学習を再開

「IT系フリーランス」とプロフに書いておきながら、実はここ 10 年ほどエンジニアらしきことはしていませんでした。

せいぜい VBA をいじって業務改善ツールを作ったり、最近ならプライベートで CMS を利用した Website 作成くらいしか。全然違う業界で、全然違うことをしていました・・・。

ただ作りたいものも溜まって来たし、趣味としてプログラミング学習を再開することに。

Chromebookでシステム開発

ただ私のメインマシン、Chromebook なんですよね( Acer Chromebookを個人輸入 )。ブラウザ上でできることしかできません。

これでどうやってシステム開発しようかな?

Windows が無くても仕事できます

付き合う取引先や仕事の内容次第ですが、Windows が無くても仕事はできます。

せっかく新しい環境を手に入れたので、この機会に

  • Windowsでしていたことが、Chromebook でどこまでできるか?
  • スマホとブラウザだけで、どこまで仕事ができるか?

そんなことを試しています。まぁ会社に所属しなくなったこともあり、その結果ここ 2 年ほど Windows をほぼ使っていません。→ こうやってフルリモートで仕事しています

Windows を使ったのは一度だけ。10 年前に組んだ VBA の改修を頼まれた時だけです。Excel も Google Spread SheetOffice Live で閲覧・編集できますが、VBA で組んだマクロだけは Windows で開かなければ編集できませんでした。

Chromebook に開発環境を準備する

以下は敢えて英語環境で作業しようとする人向けの説明ですが、日本語環境でも基本的は流れは同じかと思います。

ちなみにAndroidアプリ開発がしたい人は、以下「1.Linux のセットアップ【共通】」をした後、こちら の手順で Android Studio を入れることもできます。

1.Linux のセットアップ 【共通】

Linux は Chromebook に元々ついています(古いものにはついていない)。まずは “Settings” 画面を開きます。ブラウザじゃなくて、PC の。すると一番下に “Linux (Beta)” とあります。“Turn on” を押下。

インストーラーが開きます。“OK” を押下。

“Install” を押下。インストールが完了すると、コンソール画面が立ち上がります。例の黒い画面です。

※ この後 Android Studio を入れる場合は、「2」を飛ばして以下をご覧ください。

2.Visual Studio Code (コードエディタ) のセットアップ

メモ帳やブログ編集画面でもコーディングはできるけど、エディタがあった方が、見やすいし便利です。

以下は Microsoft の無料エディタですが、Chromebook でも使えます。“.deb” からダウンロードします。

Chromebook に Linux を入れると、”Linux files” というディレクトリが現れます。ダウンロードしたファイルは “Downloads” にあります。ファイルを “Linux files” に移動し、Wクリック。

Visual Studio Code のセットアップが完了しました。デスクトップにアイコンが登場します。嬉しい。

アイコンをクリックすると、app が立ち上がって来る。立ち上げ時とログアウト時に少し重くなりましたが、Chromebook で開発ができるなんて嬉しい。

Chrome でデバッグ

この後 Visual Studio Code エディタ上で Javascript コードをデバッグしようとしたら、デバッグ環境が整っていないことに気付きました。[Run] → [Start Debugging] から環境を選ぶと、「無い」と言われてしまいます。

Windows と違って、セットアップがそんなに簡単じゃないのか笑。「コマンド叩かなくてもできるよ〜誰にでも使えるよ〜 Chromebookいいよ〜皆 Chromebook で開発しよ〜 」と言いたかったのに。Linux 系のサイトって、素人には「???」ってものばかりだよね。

※この後色々試し、結局コマンド叩いたりする必要は無かったのですが。

1.拡張機能 のインストール

このページの「ローカルにWebサーバーを起動して実行する」という方法で、Chrome上でデバッグできました。

[Qiita] Visual Studio Code でフロントエンドの開発環境を構築してデバッグする – @C3REVE

コメント欄などが無かったので、ここでお礼を言わせてください!!本当にありがとう!!!!

私これで国内外のサイトを調べまくって、でも皆と同じ方法だと上手く行かなくて、ここ数日気持ちが落ち込んでいました。だから、とにかく一つでも方法が見つかってホッとしている所。

VS Code 上で、サイドバーの Extensions より以下をインストール。

  • Debugger for Chrome
  • Live Server

Qiitaにある手順通り VS Code上の対象ファイルからデバッグを実行すると、自分が立ち上げている Chrome に新しいタブでファイルが開かれます。あとは [Ctrl + Shift + I] で Developer Tool を立ち上げて検証。

ということで。

コマンドを叩いたり、Jsonファイルを編集したり、色々とやっていました。だけど結局はそんなの使わずに Visual Studio Code から Chromeデバッグを行うことができました!マジでマジでありがとう!!これで楽しく快適な開発ライフが再開できました。

まずは ドットインストール を見てみます。Web アプリが作りたいです。ちなみにドットインストールには Visual Studio Code 入門もありましたよ。

関連記事

Chromebook を個人輸入

Chromebook にアプリ開発環境の準備:Android Studio

No-Codeアプリ開発プラットフォーム

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA