Chromebook で VS Code を使って学習する
2020 年 12 月 3 日 アレッサンドロ・セガラ (@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 のリモート開発拡張機能を活用して、より強力な開発環境に接続する方法についても説明します。
必要なもの
VS Code は、Crostini を介して Linux アプリケーションを有効にできる限り、最近のすべての Chromebook で実行できます。これについては、すぐに説明します。
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 の場合、バリアント64 ビットの.debを選択します。
- 使用している 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 でコーディングを学ぶ: 私たちの「学習」セクションには、コーディングを初めて始める人向けの記事、チュートリアル、ビデオが含まれています。
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 調査)、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 も人気のプログラミング言語であり、特に初心者向けに優れています。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 を使って開発を開始する準備が整いました。コードの実行、統合デバッガーの使用、リンティングなど、VS Code で Python を使用する方法の詳細については、VS Code での Pythonに関するドキュメントを参照してください。
次回: リモート開発の使用
本日はここまでです。この投稿では、Chromebook に VS Code をインストールする方法と、JavaScript/Node.js および Python でコーディングを開始する方法について説明しました。
しかし、まだ続きがあります。Chromebook は、私がテストしているような低電力バージョンでも VS Code を問題なく実行できますが、開発には、より多くのメモリやより高速な CPU を備えた、より高速なマシンを使用する必要がある場合があります。たとえば、ARM ベースの Chromebook を使用しているが、Intel/AMD チップでコードを実行する必要がある場合などです。あるいは、人工知能を扱いたいが、強力な GPU を備えたマシンにアクセスする必要がある場合もあります。
VS Code とリモート開発拡張機能 (SSH とコンテナ)、およびGitHub Codespacesを使用すると、上記のすべての問題などを解決できます。
このチュートリアルの次のパートでは、VS Code のリモート拡張機能と GitHub Codespaces が Chromebook を開発の強力なツールに変える方法を学びます。
それまでは、ハッピーコーディング…そしてハッピーラーニング！
Alessandro Segala、VS Code プロダクトマネージャー @ItalyPaleAle