新しいクロームブックがやって来た【エンジニア向け：Node.js/Vite/Svelte 編】

本記事の概要

『新しいクロームブックがやって来た』シリーズ
第３回【エンジニア向け：Node.js/Vite/Svelte 編】となります。

【一般人向け：英字キーボードの洗礼 編】← 第１回
【Linuxユーザー向け：Gimp/VSCode インストール 編】 ← 第２回
【エンジニア向け：Node.js/Vite/Svelte 編】 ← いまココ

今回は、クロームブックのLinuxコンテナにて「Node.js」と「Vite」をインストールし、Svelteにも少し触れたいと思います。

本当は第３回目だけにして、
今回は【エンジニア向け：Node.js/Vite インストール 編】というタイトルでしめをしようかなと思ったのですが、
折角なので、もう少しつづけるかもねって事にしました💪

今回のテーマは、Web系フロントエンド側のフレームワークの開発環境です。
話題になっている『 Svelte 』を扱いたいと思います。

●なぜ『 Svelte 』なのか？
当初、無難なところで「React」にでもしようかと思ったのですが、もう技術的な情報が多くあるんですよね。
それで書くのなら、まだ情報量が少なく、かつ最近話題になりつつある「Svelte」にしようと思いました。

結局、スキルの価値は「希少性」が全てなんですよね(IT系に限らず)

いい機会なので「Svelte」の電子書籍を執筆もする予定です📚
「Vite」や「Svelte」等の細かい説明については、その電子書籍に書くので、ご興味のある方は是非とも、そちらをお読みください💡

※ 本記事はWeb系（フロントエンド側）の知識がある事を前提としております

Node.jsをイントールする

Node.jsをイントールしましょう。

２年ちょっと前に書いた記事があるので、これを参考にやっていこうと思います。

Node.jsのダウンロードページに行きます

ダウンロード

ふむ、ページのデザイン自体は２年前とあまり変わらない。

推奨バージョンは18.12.1 (同梱 npm 8.19.2)

ちなみに 2022年12月5日（本記事執筆）時点での最新バージョンは19.2.0 (同梱 npm 8.19.3)となる。

とはいえ、Node.jsはメジャーバージョンが偶数のものがLTS(長期サポート)対象
つまりセキュリティを考えれば、18の方となるので、そっちにする。

今回は「C425TA」でアーキテクチャーが「x86_64」なので Linux Binaries (x64) - 64-bit をダウンロードします。

マイファイル > ダウンロード
という場所にダウンロードされるので、 node-v18.12.1-linux-x64.tar.xz を
マイファイル > Linux ファイル に移動させる

なお「launcher.png」と「test.txt」は前回の記事のもの、今回は関係ない。

ターミナルを開き、ホームディレクトリにあるか確認

ls node-v18*

node-v18 で始まるファイル/ディレクトリの表示

解凍します（tar.xz形式 なのでオプションは Jxfv ）

tar Jxfv node-v18.12.1-linux-x64.tar.xz

ちゃんと解凍されている模様

bin include lib share を /usr/local にコピペ

sudo cp -a node-v18.12.1-linux-x64/bin /usr/local
sudo cp -a node-v18.12.1-linux-x64/include /usr/local
sudo cp -a node-v18.12.1-linux-x64/lib /usr/local
sudo cp -a node-v18.12.1-linux-x64/share /usr/local

node -v

Node.js のバージョンを確認

REPL いってみよう❗

1 + 2

ちなみに REPL は Ctrl + D で抜けれる

npm -v

npmコマンドの のバージョンを確認

完璧っすね👍

Vite

●学習用ディレクトリを作成

mkdir ~/study_work
mkdir ~/study_work/svelte
cd ~/study_work/svelte

※ ~/study_work/svelte 内で作業するものとする
（ディレクトリ名やプロジェクト名などは一例です。 ）

●プロジェクト雛形を作成
プロジェクト雛形を作成しましょう。

npm create vite@latest

※ もし「 OK to proceed? (y) 」と出た場合は「 y 」と入力しEnter

プロジェクト名は svelte-sample を例とします

「 Svelte 」を選択します(フレームワーク)

ああ、何か「 Lit 」の本も書きたくなってきた

「 JavaScript 」を選択します

あっ、Viteからでも「 SvelteKit 」が出来るんだ💡

で、Svelte用のプロジェクトが作成される

npmコマンドのバージョン更新しろと出てるけど気にしない(笑)

Svelte

Svelteの特徴

『 Svelte 』の特徴は、大きく３つあります。

「Write less code」：コード量を少なく
「No virtual DOM」：仮想DOMを使わない
「Truly reactive」：真にリアクティブ

特に「No virtual DOM」はReactやVue.jsには無い特徴で、これによりブラウザの負荷が軽減されます。

VSCodeに拡張機能をインストールする

VSCodeに拡張機能をインストールしましょう（前回 を参照）。
拡張機能をインストールすると「コード補完」など開発に役立つ機能が付きます。

上段メニューから「File」-「Preferences」-「Extensions」をクリック（ または「Shift + Ctrl + x 」 ）

「 svelte 」と検索欄に入力

「 Svelte for VS Code 」を選択しインストール

開発サーバー立ち上げ

準備も整ったところで、開発サーバーを立ち上げて見ましょう。
開発サーバーといっても、 Svelteに組み込まれているビルトインサーバーなのでコマンド一つで立ち上がります。

先程のプロジェクト作成時に、以下のメッセージが出力されているかと思います。

Done. Now run:

cd svelte-sample
npm install
npm run dev

１．プロジェクトディレクトリ内に移動
２．package.jsonに基づき、パッケージの導入
３．開発サーバー立ち上げ

となります。
この手順はViteを使ったことがあれば、おなじみかと。

「npm run dev」まで進めると

となるので http://localhost:5173/ ブラウザでアクセス

「count is: 0」ボタン押下 →「count is: 1」となる。

src/App.svelte を編集してみましょう。

<h1>Vite + Svelte</h1> の下に <h1>テスト</h1> を追記して、保存します。

ブラウザを見てみましょう。

ブラウザ側ではリロードしなくても、コードの変更が反映されています。
これを「ホットリロード」と言い、Viteではデフォルトで有効になっています。

●開発サーバー終了
開発サーバーは「 Ctrlキー + C 」で終了します
（※ブラウザの該当タブを閉じてから終了させます）

●package.jsonのscripts
package.jsonのscriptsを見てみましょう

"dev"（ npm run dev ）開発サーバー起動
"build"（ npm run build ）ビルドする
"preview"（ npm run preview ）ビルドされたdist内をローカルでプレビュー

SvelteってバニラJSにコンパイルするので、"preview"とその関連も追々確認しておきたいですね〜。

src/main.js を見てみましょう。

やはり main.js がエントリポイント。
ただし、これは「Vite」ではの話。「SvelteKit」だと違うファイル名( index.js など)かも知れない。
この辺りは、追々確認といったところでしょうか。

「on:」「bind:」ディレクティブ

src/App.svelte を編集します。

Svelteでは、変数宣言の時点で、既にリアクティブな状態なので、カウントアップは{count}にも反映。
「on:」ディレクティブでイベントの紐づけをします。
サンプルなので、アロー関数を使用してコードを究極に短くしてますが、公式ではfunction宣言で書いているので、そっちの方が良いかも知れません。

ブラウザで確認（開発サーバーは起動の起動の状態）

クリックでカウントアップ

src/App.svelte を編集します。

「bind:」ディレクティブは、HTML要素の属性値（ inputタグのvalue属性 など ）のバインドで使用します。

ブラウザで確認

入力がバインドにて反映

驚くほど簡潔に書け、ここまででしたらプログラミング経験の無い方でも何となく分かるのではないでしょうか。

他にもトランジション効果、「$:」のリアクティブステートメント、ストアでの「subscribe」や「unsubscribe」
などなど、説明したいことは山ほどあるが、如何せん記事を書く時間が無い。

先述のとおり、Svelteの電子書籍を書くので、それをお読みいただければと思います✨

おまけ

Svelteは、かなりの駆け足で、ほんの入り口だけですが、とりあえずクロームブックへの導入の記事にしてみました。
長々とした記事をお読みいただき、お腹も空いてきているのではないでしょうか❓

最近、めっきり冷え込んできたので、ラーメンにしようかなと思いましたが、餃子定食にしました。
たまに食べたくなるんですよね〜🥟

次回は、何を書くか考え中です。乞うご期待❗

【辛島信芳の著書】
IT技術などに興味のある方は、是非ご覧になってください。

辛島信芳: books, biography, latest update