ラズパイ4(4GB, 32bit)にて、WEBアプリやサイトを開発するために。
Deno/Node.js
DenoはJavaScriptの実行環境である。Node.jsの後継でありさまざまな改善がされている。
残念ながら私の環境ではインストールできなかった。
なので仕方なく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でもイケるらしい)
まずはこれを順に終わらせよう。大変そうだなぁ。
ちょっとググったら、ノーバンドラというのがあるらしい。こいつがモジュールバンドラの後継っぽい。
対象環境
- 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