Chromebook で VS Code を使って学習する

2020年12月3日 Alessandro Segala (@ItalyPaleAle) 著

ここ数年、Google Chrome OS を搭載した Chromebook は、「従来の」ラップトップの代替手段を提供してきました。非常に手頃な価格のモデルからハイエンドモデルまで、多くの選択肢のおかげで、Chromebook は、学習、課題の完了、仮想クラスへの参加に利用できる学生の間で特に人気があります。

Chromebook と Chrome OS は通常、Web ブラウザーを中心にしていますが、Visual Studio Code を含むネイティブデスクトップアプリケーションのインストールを可能にする Linux 環境を有効にすることもできます!

Chromebook 上で VS Code を実行することで、Python、JavaScript、Node.js、Java、C# など、さまざまな言語やフレームワークで簡単かつ迅速にコーディングを開始できます!

この記事（全2回）では、Chromebook に Visual Studio Code をインストールする方法と、Python または JavaScript/Node.js でコーディングを開始するための環境をセットアップする方法について説明します。後の記事では、より強力な開発環境に接続するために、VS Code 用のRemote Development拡張機能を活用する方法についても説明します。

必要なもの

VS Code は、Crostini を介して Linux アプリケーションを有効にできる限り、最近の Chromebook であればどれでも実行できます。Crostini の有効化方法については、すぐに説明します。

Visual Studio Code は軽量なエディターであるため、最小 1 GB の RAM を搭載した低電力 Chromebook でも実行できます。さらに、VS Code は ARMv7 および ARM64 上の Linux で利用できるようになりました。つまり、ARM チップを搭載した Chromebook でも実行できるということです!

このチュートリアルでは、ARM64 CPU、4 GB の RAM、および 32 GB ディスクを備えたエントリーレベルの Chromebook を使用します。控えめなスペックにもかかわらず、VS Code はこのマシンで問題なく動作します!

Chromebook で Linux を有効にする

Chrome OS に VS Code をインストールする前に、Crostini を使用してネイティブ Linux アプリのサポートを有効にする必要があります。

まず、システムの [設定] を開き、サイドバーの [Linux (ベータ版)] を探します。そこから、Linux サポートをオンにします。

画面の指示に従って Linux 環境を構成します (ほとんどの場合、デフォルト値を受け入れるだけで十分です)。Chromebook は、Linux 環境を作成して構成するためのツールをダウンロードします。舞台裏では、これは実際には Debian 10 を実行するコンテナーを作成しているため、完全な Linux ディストリビューションを試すことができます!

Linux 環境がセットアップされると、新しいターミナルウィンドウがポップアップ表示されます。

VS Code をインストールする前に、Linux ターミナルでいくつかのコマンドを実行する必要があります。Linux パッケージのリストを更新し、オプション (ただし強く推奨) の依存関係である gnome-keyring をインストールする必要があります。ターミナルで、次の 2 つのコマンドを入力します (各コマンドの最後に Enter キーを押して実行します)

sudo apt-get update
sudo apt-get install -y gnome-keyring

出力は次のようになります

2 番目のコマンドが終了したらすぐに、次のステップに進むことができます。

VS Code をインストールする

これで VS Code をインストールする準備が整いました!

Visual Studio Code のダウンロードページに移動します。そこから、Chromebook に適したパッケージを選択する必要があります

• Intel または AMD チップを搭載した Chromebook の場合は、.deb (64 ビット) バリアントを選択します。
• Chromebook が ARM64 チップ (私がテストしているものなど) で実行されている場合は、代わりに ARM64 バリアントの .deb パッケージを選択します。

Chromebook が使用している CPU の種類が不明な場合は、Linux ターミナルで dpkg --print-architecture コマンドを実行して確認してください。amd64 (Intel および AMD チップの場合: VS Code の 64 ビット バリアントを選択) または arm64 (ARM64 を選択) のいずれかが表示されます。

VS Code をダウンロードしたら、[ダウンロード] フォルダーにパッケージがあります。パッケージをダブルクリックしてインストーラーを起動します

Chromebook は、VS Code と他のすべての依存関係をインストールします。

インストールが完了すると、アプリの一覧の [Linux アプリ] というフォルダー (Linux ターミナルとともに) 内に Visual Studio Code が表示されます。これで VS Code を起動できます。

VS Code が実行されているのが確認できるはずです。この時点で、コーディングを開始する準備ができました!

VS Code を初めて使用し、エディターの使用方法を知りたい場合は、参考になるリソースをいくつかご紹介します

• VS Code 入門ビデオ: これらのビデオでは、VS Code を使用してファイルとフォルダーを開き、テーマと拡張機能をインストールし、エディターを構成する方法などについて説明します。
• VS Code でコーディングを学ぶ: 「Learn」セクションには、コーディング初心者で、これから始めたい人向けの記事、チュートリアル、ビデオが含まれています。

JavaScript と Node.js でコーディングする

JavaScript は非常に柔軟なプログラミング言語であり、Web ブラウザー内および Node.js を使用した Web サーバー上で実行されるアプリを構築するために使用できます。今日では、JavaScript は、ネイティブデスクトップアプリ (Electron) やモバイルアプリ (Apache Cordoba、React Native など) の構築、モノのインターネット (IoT) デバイスのプログラミングなど、さらに多くの用途に使用されています。

ヒント: JavaScript を学習したい場合は、同僚が作成した無料のビデオシリーズがあります:

Visual Studio Code は、JavaScript および Node.js でのコーディングに非常に人気のあるエディターであり (State of JS survey)、JavaScript をネイティブにサポートしています。

ただし、Chromebook で Node.js (および一般的な JavaScript) を使用するには、Node.js ランタイムをインストールする必要があります。これを行うために、Node.js のインストールと更新を容易にする小さなオープンソースユーティリティである nvm を使用します。

nvm をインストールするには、Linux ターミナル内で次のコマンドを実行します

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
source .bashrc

nvm をインストールしたら、次のコマンドで Node.js の最新バージョンをインストールできます

nvm install node

ヒント: VS Code に統合ターミナルが含まれていることをご存知ですか? [ターミナル] メニューから [新しいターミナル] を選択して起動できます。VS Code は Linux 環境のコンテキストで実行されているため、統合ターミナルも Linux で実行されています。

nvm は、Node.js をセットアップ、更新、管理するための多くのオプションを提供しています。興味がある場合は、公式の nvm ドキュメントで詳細を読むことができます。

Node.js がインストールされたら、ターミナルで node コマンドを使用できます (node --version の実行は Node.js のインストールを確認するのに適した方法です)。また、Node.js および JavaScript 用の統合タスクランナーやデバッガーなど、VS Code のすべての組み込み機能も使用できます。VS Code で JavaScript と Node.js を使用する方法の詳細については、VS Code ドキュメントを確認してください!

Python でコーディングする

Python はもう 1 つの人気のある プログラミング言語であり、特に初心者にとっては最適です。Python を使用すると、Web、デスクトップ、およびコマンドライン用のアプリを構築できます。Python は、データサイエンスおよび人工知能 (AI) を扱うのに最適な言語の 1 つであり、IoT デバイス、マイクロコントローラーなどのプログラミングにも使用されています!

VS Code は、Python のコーディングと言語の学習に最適なエディターです。VS Code で Python を使用して、あらゆる種類のアプリを構築したり、データサイエンティストが使用するノートブックなどのノートブックを操作したりできます。

ヒント: Python を始めたい場合は、無料のビデオシリーズもあります:

Chrome OS には Python 3 インタープリターがプリインストールされていますが、最高の Python コーディングエクスペリエンスを得るには、さらにいくつかのパッケージをインストールする必要があります。これには、pip (Python 用の依存関係マネージャー)、venv (Python 仮想環境の管理用)、およびネイティブパッケージを操作するためのいくつかのビルドツールが含まれます。ターミナルで、次を実行します

sudo apt-get install -y python3-pip python3-dev python3-venv build-essential libssl-dev libffi-dev

VS Code の Python サポートは、Microsoft Python 拡張機能によって提供されます。Python 拡張機能をインストールするには、VS Code 内から左側のアクティビティバーを使用して [拡張機能] ビューを開き (⇧⌘X (Windows、Linux Ctrl+Shift+X))、次に「python」を検索し、Microsoft が提供する拡張機能をインストールします

この時点で、VS Code で Python を使用した開発を開始する準備ができました! コードの実行、統合デバッガーの使用、lint など、VS Code での Python の使用方法の詳細については、VS Code の Python ドキュメントを確認してください。

次回: リモート開発の使用

今日はここまでです! この記事では、Chromebook に VS Code をインストールする方法と、JavaScript/Node.js および Python でのコーディングを開始する方法について説明しました。

しかし、待ってください、まだあります。Chromebook は VS Code を問題なく実行できますが、私がテストしているような低電力バージョンでも、開発にはより高速なマシン (より多くのメモリやより高速な CPU を搭載) を使用する必要がある場合があります。たとえば、ARM 搭載の Chromebook を使用しているが、Intel/AMD チップでコードを実行する必要がある場合などです。または、人工知能を扱っていて、強力な GPU を搭載したマシンにアクセスする必要がある場合もあります。

VS Code と Remote Development 拡張機能 (SSH および Container)、および GitHub Codespaces を使用すると、上記のすべての問題を解決できます。それ以上のことも可能です。

このチュートリアルの次のパートでは、VS Code Remote 拡張機能と GitHub Codespaces が Chromebook を開発の強力なツールに変える方法について説明します!

それまでの間、ハッピーコーディング… そしてハッピーラーニング!

Alessandro Segala (VS Code プロダクトマネージャー) @ItalyPaleAle