📑
Androidでネイティブにフロントエンド開発環境構築
Android単体で以下のソフトウェアを実行し開発できるようにセットアップしました。その方法を要点のみ記載していきます。(Vimの設定や細かい開設はしません。)
Ubuntu (proot)
NeoVim
nvm
nodejs
Next.js
git
GUIエディターは諦めて下さい。UserLAndとかで頑張ればGUIも使用できるかもしれないです。
開発環境構築
Termuxのインストール
今回は環境構築にTermuxというアプリを使用します。
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