📑

Androidでネイティブにフロントエンド開発環境構築

2024/10/06に公開

Android単体で以下のソフトウェアを実行し開発できるようにセットアップしました。その方法を要点のみ記載していきます。(Vimの設定や細かい開設はしません。)

Ubuntu (proot)
NeoVim
nvm
nodejs
Next.js
git

GUIエディターは諦めて下さい。UserLAndとかで頑張ればGUIも使用できるかもしれないです。

開発環境構築

Termuxのインストール

今回は環境構築にTermuxというアプリを使用します。
https://play.google.com/store/apps/details?id=com.termux&hl=ja

Ubuntuのインストール

termux-bash
$ pkg install proot-distro
$ proot-distro install ubuntu

これでproot環境でubuntuがインストールされました。
以降prootのUbuntu環境で作業します
proot環境で作業しないとNext.jsが動作しません

termux-bash
$ proot-distro login ubuntu

環境構築

  • パッケージのインストール
    • gitのセットアップは省略します
    • build-essential, make, gccは無いとnvim-treessiterが動作しません
bash
$ apt install git neovim build-essential make gcc -y
  • nvm
bash
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
$ . ~/.bashrc
$ nvm install 20.14.0 # 使用するバージョンは適宜変更して下さい
  • NeoVimセットアップ

vim plug

bash
sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \
       https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'

Vimのライブラリインストール方法やその他セットアップは省略します。

注意点としてNvimTreesitterはCコンパイラが無いとコンパイルできません。またその環境もproot環境でインストールしたnvimを使用する必要があります
つまり、termuxのbashでpkg install neovimした方をubuntuで使用してもtreesitterは動作しません。(動作はするけどコンパイルに失敗する可能性が高い)
また、使うコンパイラを指定すると安全です。

init.lua
require("nvim-treesitter.install").compiler = "gcc"
  • Next.js
bash
$ npm i -g pnpm
$ pnpm i && pnpm dev
  • login

  • NeoVimで編集 (coc, treesitter)

  • Next.js

ブラウザでlocalhost:3000にアクセスすればちゃんとページを見ることもできます。

Discussion