Zenn
📌

TermuxでJavaScript(node.js)

に公開
Android
JavaScript
Node.js
Vue.js
Termux
tech

上記の記事の詳細記事です。

典型的なJavasScript

JavaScriptというとHTMLの中のスクリプト要素でもよく使用されます。典型的なのだとこんなのですね。

counter.html
<span id="counter">0</span>
<script>
addEventListener("DOMContentLoaded", (event) => {
    const counter_span = document.querySelector('#counter');
    function countup(e) {
        e.textContent = Number(e.textContent)+1;
    }
    setInterval(countup, 1000, counter_span);
});
</script>

ここでスクリプト要素とは、<script>〜</script>で囲まれた部分のことで、この中身がJavaScriptだということです。

このファイルのあるディレクトリ上でpythonの簡易HTTPサーバーを動かして公開し

~ $ python -m http.server

ブラウザで http://localhost:8000/counter.html を開くと…

counter.htmlの閲覧

※左上に豆粒大の数字が出ていると思います。拡大してみてください。

こんな感じに動きます(jsfiddleのようなサイトでも簡単に試せます)。ここでJavaScriptはここで数字を1秒ごとに書き換える役割を担っています。

起動したサーバーはCtrl+Cで止めることが出来ます。

上はWebブラウザ上で動くJavaScriptの例でしたが、JavaScriptもPythonなどのようにCLIで動く環境がいくつかあります。以降ではそのうちの1つ、node.jsを使っていきます。

node.js

いわゆるサーバーサイドスクリプトと言われる類のJavaScriptの実行環境です。

node.jsのインストール

~ $ pkg install nodejs-lts

何か聞かれたらいつものとおり⏎です。

簡単なインストール確認

まずはディレクトリを掘って移動し、

~ $ mkdir -p node/test
~ $ cd node/test
~/node/test $ npm init -y

JavaScriptファイルをテキストエディタで作成し、

index.js
Array(10).fill(0)
    .map((_, i)=>i)
    .forEach(e=>console.log(`${e+1}回目`));

nodeコマンド(node.js本体)で実行します。

~/node/test $ node index.js
1回目
2回目
3回目
4回目
5回目
6回目
7回目
8回目
9回目
10回目
~/node/test $

なんかpythonみたいですよね。

JavaScriptの学習

この記事ではJavaScriptの書き方自体の説明はしません。

https://jsprimer.net/

まずはこの辺でJavaScriptの初歩を学びましょう。後半にはnode.jsも扱うので、どんなことができるのか分かると思います。

vueを使った開発

次はnode.jsを使い、Vueを使った簡単なSPAを雰囲気だけ作ります(API呼び出しなし)。2025年5月現在、同じようなライブラリとしてはVueよりReactの方がはるかに有名ですが、私はReactを知らないので、Vueで説明しています。

npm create vue@latestを実行すると、いろいろな質問に答えた後、Vueの開発環境が構築されます。

~ $ mkdir -p node
~ $ cd node
~/node $ npm create vue@latest

> npx
> create-vue

┌  Vue.js - The Progressive JavaScript Framework
│
◇  Project name (target directory):
│  vue-example
│
◇  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all,
enter to confirm)
│  none

Scaffolding project in /data/data/com.termux/files/home/node/vue-example...
│
└  Done. Now run:

   cd vue-example
   npm install
   npm run dev

| Optional: Initialize Git in your project directory with:

   git init && git add -A && git commit -m "initial commit"

~/node $ cd vue-example
~/node/vue-example $ npm install
...
~/node/vue-example $

ここまででアプリの雛形が出来ました。npm run devすると開発用サーバが起動して、初期状態のアプリを見ることが出来ます。続けて(英語で)言われてた作業を実施します。

~/node/vue-example $ npm run dev

起動したらo + enterでブラウザが開いて見ることが出来ます(enterとは⏎のこと)。

開発用サーバーにブラウザからアクセス

これが初期状態のアプリです。別に見るところもないので閉じてtermuxの画面に戻り、次はq + enterで終了します。普通の状態に戻ったら、今度はgitの作業をやってみます(やらなくてもいいです)。

~/node/vue-example $ git config --local user.email "you@example.com"
~/node/vue-example $ git config --local user.name "Your Name"
~/node/vue-example $ git init && git add -A && git commit -m "initial commit"

これであなたの名前と電子メールは適当ですが、このgitリポジトリでのあなたの設定は完了し、作業記録が保管されました。保管先は.git/の下であり、他の人が見れるわけではないので、安心してください。

後は雛形の最上位のファイルを1つ変更し、

src/App.vue
<script setup>
import Example from './components/Example.vue'
</script>

<template>
  <main>
    <Example/>
  </main>
</template>

もう1つファイルを作成して…

src/components/Example.vue
<script setup>
  import { ref, computed } from 'vue'
  const counter1 = ref(0)
  const counter2 = ref(0)
  const counter3 = computed(()=>{
    return counter1.value + Number(counter2.value);
  });
  setInterval(()=>{counter1.value++;}, 1000);
</script>
<template>
  <span>{{ counter1 }}</span> + <input type="number" v-model="counter2"> = <span>{{ counter3 }}</span>
</template>

開発用サーバーで試します

~/node/vue-example $ npm run dev # -- --host 0.0.0.0 を付けるとPCとかからも見えます

さっきと同様にブラウザで開いた結果が以下のとおりです。

開発用サーバーにブラウザからアクセス

それなりにリアクティブに動いているのが分かるかと思います。ただこれはサーバーへの問い合わせをした結果がリアクティブに反映されているわけではなく、ブラウザの内部だけで動いているので、雰囲気だけですね。

そして、さきほどgitの操作をした人はここで、

~/node/vue-example $ git diff

とすると、雛形から何がどう変わっているのか確認することが出来ます。1画面分ずつしか見れないので、矢印キーでスクロールして見る感じになっています。スペースで1画面分先に、pで1画面分戻ります。終了するにはqです。他にもvimと似たような検索を行ったりいくつか機能がありますが、その辺は自分で調べてください(lessコマンドのキー操作)。

ここまでで、動くのが確認できたので、リリースビルド(トランスパイル)をします。

~/node/vue-example $ npm run build
...
~/node/vue-example $

distディレクトリの下に出来たのが成果物で、これをWebサーバーに設置すれば開発サーバーで試したアプリを運用できます。試しに簡易httpサーバーで確認してみると…

~/node/vue-example $ cd dist
~/node/vue-example/dist $ npx http-server
...

表示されたURLにブラウザからアクセスすると、さっきと同じ画面が出てきます。つまり、node.jsがなくてもWebサーバーがあれば動く形になったということです。VueやReactならいつもそうなるのか？と言われればそうでもないのですが、今回のコードはそうなります。また、さっきはPCのブラウザの開発ツールで見ると、ソースコードなどが見えていたのですが(Androidのブラウザには開発ツールがありません)、リリースビルドではトランスパイルされていて、やや解析しにくい形になっています。

その先の学習

Webの開発はフロントエンドとバックエンド(ざっくりそれ以外のこと)の両方が必要になり、それぞれにそれなりの知見が必要になり、ややハードルが高めです。その割にJavaScriptで無料でWebサーバーを立てられるサービスは制限が厳しすぎたり、遅すぎて使い物にならないものがほとんどだったりして、お金のない子供がやろうとすると、割とストレスフルな気がします。

そこで一旦JavaScriptへの依存をこの辺までで断ち切り、無料でもそれなりにリソースが豊富に使えるPHPへのシフトを選択します。あくまで本番環境でサーバーサイドのJavaScriptは原則使わないという選択です。

正直に言ってPHPはあまり未来のある言語ではありません。しかし、今CMSとして稼働しているほとんどのサーバーはWordPressであり、緩やかに減っているものの、まだしばらくは稼働するでしょう。するとWordPressを構成するPHPとMySQLはそれなりのリソースを確保したまましばらく稼働し続けるということになります。多くは広告を付けるものの無料で使えます。容量もそれなりで、何よりデータベースがセットなのです。node.jsを使うことはできませんし、誰かと共有するサーバーになりますが、サーバーのスペック自体は安価なVPSよりもずっと高くなります。あまり稼働していないWordPressサーバーを共有できれば快適に使えるし、新規参入もそれほど多くないでしょう。生涯に渡って育てたいドメインでは考えてしまいますが、子供時代に使う一時的な勉強用のサーバーとしては悪くありません。

というわけで、中途半端ですが、JavaScriptは以上で終わります。

なおJavaScriptは最近では直接使わず、ソースコードとしてはTypeScriptが普通です。JavaScriptを使えるようになったら、片言でいいので、話せるようになっておきましょう。

GitHubで編集を提案

Discussion