ChromebookにNode.js開発環境を構築する

概要

最近出先でプログラミングをする機会が増えてきたのですが、
持ち運びのできるまともな開発環境がMac mini(持ち運び？)くらいしかありませんでした。
そこそこ安価でそこそこ動作してくれるノートPCで簡単な開発環境を構築しようと考えて実行した、その備忘録です。

続き
chromebookへのphp開発環境構築(Xampp)
ChromebookにDockerを導入

完成形

この記事の通りに作業すれば、以下の環境が整います

• Visual Studio Code
• Node.js
• crostini日本語対応
• Docker（別記事に切り分けました。こちら）

chromebookである理由

モノはいいようではありますが・・・

• 安価
• Linuxベースであるため同価格帯で他OSより動作が軽い
• Chrome・Android・Linuxのアプリが標準で使用でき、汎用性が高い
• サンドボックス環境でアプリが動作するためセキュリティが強固

目次

1. Linux（Crostini）コンテナを作成
2. Visual Studio Codeをインストール
3. Node.jsをインストール
4. 日本語入力を可能にする

Linux（Crostini）コンテナを作成

とっても簡単

1. [⚙設定] > [詳細設定] > [デベロッパー] を選択
2. [Linux開発環境] の[オンにする]を選択する
3. 案内に従ってlinuxコンテナを作成
4. linuxコンテナのターミナルが起動する

• 設定画面のデベロッパー（画像はlinux開発環境をオンにした後）
  
• ターミナル
  

Visual Studio Codeをインストール

• 基本的に公式に従って操作すればOK

gnome-keyring をインストールする

bash.

$ sudo apt update
$ sudo apt upgrade -y
$ sudo apt install -y gnome-keyring

Linux用パッケージ(.deb 64bit)をダウンロード

debian系で自分のPCのcpuに合ったものを選択
cpu のアーキテクチャが不明な場合は、以下のコマンドで調べられる(amd64: 64bit, arm64: arm64)

bash.

$ dpkg --print-architecture
amd64

ダウンロードページ

linuxコンテナにインストール

• ダウンロードしたファイル（code_***_amd64.deb）をダブルクリック
  

Node.jsをインストール

• こちらも公式の通りにやれば問題なし

nvmをインストール

• バージョン管理したいので、nvmを導入

bash.

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

• .bashrcに以下が追加される

.bashrc

export NVM_DIR="$HOME/.config/nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

• .bashrcを再読み込み

bash.

$ source .bashrc

Node.jsをインストール

2022.5現在、v18がインストールされる

bash.

$ nvm install node

verを指定してインストールする場合や使用するverを変更する場合

bash.

$ nvm install 16
$ nvm use 16

Mozcをインストール（日本語対応）

Mozc

google日本語入力のオープンソース版

• 一応 apt update

bash.

$ sudo apt update
$ sudo apt upgrade -y

インストール前の準備

• タイムゾーンを東京に設定（デフォルトで東京だが、念の為）

bash.

sudo timedatectl set-timezone Asia/Tokyo

• 日本語フォントをインストール

sudo apt install task-japanese locales-all fonts-noto-cjk -y

• ロケールを日本に設定

sudo localectl set-locale LANG=ja_JP.UTF-8 LANGUAGE="ja_JP:ja"

• 設定を再読み込み

source /etc/default/locale

Mozcをインストール

$ sudo apt install fcitx-mozc

環境変数を追加

• 環境変数を追加

/etc/systemd/user/cros-garcon.service.d/cros-garcon-override.confに環境変数を記述するのは非推奨になった（削除予定）ため、/etc/environment.d内に任意のconfファイルを作成し、環境変数を設定する。（こちらのwebサイトから引用 2022年7月には既に非推奨だった模様）

今回は引用元に倣ってファイル名を99-fcitx.confとする。

bash.

sudo vim /etc/environment.d/99-fcitx.conf

• 開いたファイルに以下の４行を追記（最後の行は不要かも）

/etc/environment.d/99-fcitx.conf

Environment="GTK_IM_MODULE=fcitx"
Environment="QT_IM_MODULE=fcitx"
Environment="XMODIFIERS=@im=fcitx"
Environment="GDK_BACKEND=x11"

(@excelsior091224 さんに元ファイルが非推奨であるご指摘と新しい方法の追記をしていただきました。ありがとうございます。)

ちなみに、環境変数設定に関する公式情報が気になる方はこちらをご参照ください

Can I set environment variables for my container?
Sure! There are a few ways to do this.

- environment.d lets you set environment variables for your systemd --user session, which includes the Terminal and all GUI apps.
- If you just want environment variables in your Terminal, set those in your shell's config file, such as ~/.bashrc or ~/.zshrc.

• 自動起動の設定
  ~/.sommelierrcを作成し、fcitxの自動起動を記述
  （sommelierはコンテナ内で実行される Chromebookとの入出力のプロキシ、らしい）

echo "/usr/bin/fcitx-autostart" >> ~/.sommelierrc

linuxコンテナを再起動

• crosh（crostiniのシェル）を起動
  chromeを開き、ctrl + alt + t を同時押し
• croshからlinuxコンテナを一度停止（設定を反映するため）

crosh.

crosh> vmc stop termina

Mozcの設定

• ターミナルを起動し、fcitxの設定を開く

bash.

$ fcitx-configtool

• 入力メソッドを確認
  Mozcが表示されていればOK
  表示されていなければ、linuxを再起動するか、ウィンドウ右下の+から追加
  

• ホットキーの変更
  デフォルトではctrl + spaceで日本語入力のオン/オフ切り替えとなっているが、以下のように変更（好みなので好きにイジる）

　英数ボタン：ローマ字入力（入力メソッドをオフに）
　かなボタン：日本語入力（入力メソッドをオンに）
　かな⇔英数：切替え（入力メソッドのオンオフ）

まとめ

linux上でVSCode、Node.js、日本語入力を導入
簡単なweb開発ならchromebookで十分可能なので、モバイル環境を安価に構築したい方は試してみても良いかもしれません。
chrome OS Flex で少し古くなったPCを復活させるのも楽しそうですね。

続き
chromebookへのphp開発環境構築(Xampp)
ChromebookにDockerを導入