よちよちpython

独習 python/Qpython/Pydroid3/termux/Linux

トップ > Android > 【Android】TermuxでTypeScript環境構築

【Android】TermuxでTypeScript環境構築

Android termux コマンド 環境構築 TypeScript Node.js

AndroidとTermuxでTypeScriptというプログラミング言語の実行環境を作ります。
インストールから動作確認までのメモ。



実行環境

GoogleプレイからTermuxをダウンロード・インストール済みの状態からスタートします。



参考リンク



1. TermuxにNode.jsをインストールする

Node.jsは、JavaScriptの実行環境だとか。Pythonで言うところのpython.exe。

Node.jsをインストールします。

$ pkg install nodejs

ダウンロードで17MBほど。展開して100MBぐらいになるがOKか？と訊かれる。
難なくインストールできた。
【追記】
グローバル環境(どのディレクトリでも)使えるようにするには-gオプションをつけて、

$ pkg install -g nodejs

とすべし、とある。インストール後にこのコマンドでやり直しても特に変わりは無かった。
【追記おわり】



2. TermuxでTypeScriptをインストールする

Pythonのライブラリ管理ツールはpipですが、Node.jsのライブラリはnpmというものだそうです。
Node.jsをインストールしたらnpmが使えるようになる。

npmでTypeScriptをインストールします。

$ npm install typescript

以下の表示がでました。

npm WARN saveError ENOENT: no such file or directory, open '/data/data/com.termux/files/home/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.            npm WARN enoent ENOENT: no such file or directory, open '/data/data/com.termux/files/home/package.json'                                   npm WARN home No description
npm WARN home No repository field.            npm WARN home No README data
npm WARN home No license field.               
+ typescript@4.2.2                            added 1 package from 1 contributor and audited 1 package in 28.895s                         found 0 vulnerabilities

たぶんこれでTypeScriptがインストールできた。
【追記】
グローバル環境(どのディレクトリからでも)で動くようにするには、-gオプションをつけて、

$ npm install -g typescript

とすべし、とある。
【追記おわり】



ホームディレクトリに作られたもの

ここまでで下記の物が作られた。

  1. package-lock.json(ファイル)
  2. node_modules/(フォルダ)
  3. .npm/(隠しフォルダ)



以上で、TypeScript言語を実行する環境が整った。特に問題なくできた。



3. 実行確認

3.1 TypeScript言語でファイルを書く

書けませんので、写経で済まします。
適当なフォルダにVimエディタでファイルを作りました。



first.ts

const message:string = 'Hello! TypeScript!';
console.log(message);

JavaScriptの勉強もやっていないので違いが分からない(-_-;)

TypeScript言語で書いたtsファイルは、一旦JavaScriptにコンパイルしてjsファイルに翻訳するのだと。では次。



3.2 TypeScriptをJavaScriptにコンパイル

Termuxで次のコマンドを実行し、翻訳します。新たにjsファイルが作られます。

$ tsc first.ts

first.tsから翻訳されたfirst.jsが同フォルダに作られた。

できたfirst.jsの中身は、

var message = 'Hello! TypeScript!';
console.log(message);

曖昧な自然言語の翻訳より、コンピュータ言語間の翻訳はだいぶん簡単にできるんじゃないか。ピシャッと規格が決まってる分だけ。



3.3 JavaScriptをターミナルで実行

nodeコマンドで、できたjsファイルを実行します。実行結果はTermuxに出力されます。

$ node first.js



Hello! TypeScript!

JavaScriptはhtml内に書いてブラウザで動くものなのでしょう、
グラフィカルなものを動作させるプログラムはどうなるのかな？
【追記】
ターミナルに$ pythonと入力すると、REPLと呼ばれ一行ずつ実行する対話型のPythonインタープリタが起動します。
Node.jsの場合も同じように、$ nodeとだけ入力するとJavaScriptを一行ずつ実行する対話型インタープリタが起動する。

$ node
Welcome to Node.js v14.15.4.
Type ".help" for more information.
>

ここにJavaScriptを書く。「Hello World!」と表示させるには

>console.log("Hello World!")
Hello World!
undefined  ←灰色の文字で「未定義」の説明がついた
>

抜けるには.exitと入力実行するか、Ctrl+dを入力する。
【追記おわり】



TypeScriptファイルをnodeコマンドで実行するとエラーになる

コンパイルする前のtsファイルを nodeコマンドで実行するとどうなるか。

$ node first.ts
const message:string = 'Hello! TypeScript!';
      ^^^^^^^                                 
SyntaxError: Missing initializer in const declaration
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)         at internal/main/run_main_module.js:17:47

エラーがでました。



まとめ

TermuxでTypeScript実行環境を構築する手順

  1. $ pkg install nodejs
  2. $ npm install typescript



【追記】
グローバル環境(どのディレクトリからでも実行可能)でインストールするには-gオプションをつけて

  1. $ pkg install -g nodejs
  2. $ npm install -g typescript

【追記おわり】


TermuxでTypeScriptファイルをコンパイルする手順

  1. $ tsc ファイル名.ts


JavaScriptファイルをターミナル上で実行する手順

  1. $ node ファイル名.js



以上、AndroidのTermuxでTypeScriptの実行環境構築から動作確認まで。