　ラズパイ4（4GB, 32bit）にて、WEBアプリやサイトを開発するために。

Deno/Node.js

　DenoはJavaScriptの実行環境である。Node.jsの後継でありさまざまな改善がされている。

　残念ながら私の環境ではインストールできなかった。

ラズパイ4にDenoをインストールする（失敗）

　なので仕方なくNode.jsで我慢する。こちらのほうが普及しており情報も豊富なはず。使えるパッケージも多いはず。

ラズパイ4に最新Node.jsをインストールする

　上記手順でインストールしたときのバージョンを確認すると以下のとおりだった。

$ node -v
v16.14.2
$ npm -v
8.5.0

フロントエンド開発環境

　HTML,CSS,JSでWEBサイトやアプリを開発する環境を構築する。WEBアプリ開発に必要な作業はとてつもなく膨大である。少しでも楽にするために、さまざまなツールがある。それらのツールは実行する仕事の種類によってグループ分けされている。そのグループ名だけでもたくさんある。

ツール種別	概要	目的	例
HTMLテンプレートエンジン	中間言語からHTMLファイルを出力する	HTMLをDRYに書く	pug, EJS
CSSプリプロセッサ	中間言語からCSSファイルを出力する	CSSをDRYに書く	Sass, SCSS, Less、Stylus、PostCSS
JSトランスパイラ	新しい構文から古い構文に書き直したJSファイルを出力する	JSを最新構文で書きつつ、それが未実装なブラウザで動作するコードを出力する。JSをタイプセーフに書く。	TypeScript, CoffeeScript, PureScript
WASMコンパイラ	プログラミング言語からwasmバイナリコードを出力する	ネイティブに近い処理速度を実現する	AssemblyScript

　上記はalt言語とも呼ばれている。たとえはalt HTMLとしてpugがある。alt CSSとしてSCSSがある。alt JSとしてTypeScriptがある。

ツール種別	概要	目的
モジュールバンドラ	複数あるJSファイルをひとつにまとめる。ファイルサイズを縮小する（minify）	通信量を減らして高速実行する
フォーマッタ	ソースコードを整形する	コードを読みやすくする。保守性を高める
リント	ソースコードの構文を静的チェックする	バグを減らす（実行時エラーを可視化）

　ほかにも自動化したい開発中の処理はある。

画像ファイルを圧縮する
コードを変更したら自動的にローカルサーバを起動する
コードを変更したら自動的にビルドし、デプロイ（HTTPサーバにアップロード）する

　コードを書いたらテストもしたい。

ツール種別	概要	目的
単体テスト用フレームワーク	単体テストコードを書いて実行しカバレッジを表示する	バグを減らしコードの品質を保つ

　これら全部を一発で実行したい。状況に応じて分岐したいときはタスクランナーを使う。

ツール種別	概要	目的
タスクランナー	上記処理を制御し一括実行する	開発の手間を減らす

　バカじゃないの？　ってくらいのボリューム。

　HTML,CSS,JSがあまりに冗長かつ貧弱なせいで余計な労力をかけねばならない。

　ちょっと待って。まだあるよ。実際に開発するときはブレームワークやライブラリを使うことにもなる。とくに動的だったり規模の大きなアプリやサイトをつくるなら必須。

フレームワーク

　WEBサイトやアプリは動的HTMLである。HTML,CSS,JSが複雑に入り乱れ、どのコードが何を表しているのかわかりにくくなってしまう。それを回避すべく、コードをMVCに分離して書けるようなフレームワークがある。たとえば以下のようなものだ。

Anglar
React
Vue
Next.js
Nuxt.js
Svelte

　特定のフレームワークを使うと、その変遷によってコードも大きく書き換えねばならなくなる。ただでさえJavaScript(ECMAScript)の変遷がはげしいのに、さらにフレームワークまで組み合わさったら、それはもう1年単位でコードを変更せねばならないような事態になるのでは？　あと、そのフレームワークについて学習する必要もあるから大変。

　本来フレームワークは便利なもののはずだが、基礎となるJavaScriptのAPIから学習したほうが応用も効くはず。よってフレームワークは後回し。

ライブラリ

　JavaScriptライブラリ。基本的なものは以下。

jQuery
Bootstrap

　ほかにも山のようにある。たとえば3D表示するライブラリは以下。

three.js

　あるいはIndexed DB APIを使いやすくしたライブラリが以下。

dexie.js

　挙げたらキリがないので適時ググって探すこと。

所感

　まだNode.jsをインストールしただけなんだよなぁ。

　さて、これから先述の環境を用意することになるわけだが、すごく面倒くさそう。もう読んだだけでおなかいっぱいですわ。そもそも、HTML,CSS,JSの基礎を知らないと、それらのツールのありがたみさえわからない。だったらまずはそれらの基礎を学習するのが先じゃないのか？　とも思ったのだが、触りだけでもやっておきたい。なので、環境構築とHelloWorldのコードだけはどうにか書きたい。

　フレームワークとライブラリについては後回しにしよう。そこまで手を延ばすと一生かかっても終わらない。あくまでHTML,CSS,JSの基礎学習をベースにする。つぎにWASM。そこから少しずつ手を伸ばしていくつもり。

　まずは開発環境とHelloWorld。つぎはHTML, CSS, JS, WASMの基礎とAPI学習。それができたらフレームワークやライブラリへ。

開発環境の構築予定

HTMLテンプレートエンジン pug
CSS プリプロセッサ PostCSS
JSトランスパイラ TypeScript
WASMコンパイラ AssemblyScript
モジュールバンドラ（未調査。たぶんwebpack）
フォーマッタ（未調査）
リント（未調査）
単体テスト用フレームワーク（未調査）
タスクランナー（未調査。webpackでもイケるらしい）

　まずはこれを順に終わらせよう。大変そうだなぁ。

　ちょっとググったら、ノーバンドラというのがあるらしい。こいつがモジュールバンドラの後継っぽい。

対象環境

2022-04-04
Raspbierry pi 4 Model B
Raspberry Pi OS buster 10.0 2020-08-20 ※
bash 5.0.3(1)-release
Node.js 16.14.2
npm 8.5.0

$ uname -a
Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux

やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

フロントエンド開発環境を構築する（Node.js、テンプレートエンジン、プリプロセッサ、トランスパイラ、モジュールバンドラ、フォーマッタ、リント、タスクランナー）