PharoJSで作るWebアプリケーション

PharoJSを使ってWebアプリケーションを開発する方法の紹介です。

第142回Smalltalk勉強会の発表資料です。
https://smalltalk.connpass.com/event/313973/

Transcript

1. PharoJSで作る Webアプリケーション 第142回Smalltalk勉強会 2024 Masashi Umezawa
2. PharoJSとは? • PharoでJavaScriptのアプリケーションを開発できる環境 ◦ Smalltalk → JS へのトランスパイラ ◦ PlaygroundからJSオブジェクトへメッセージ送信 ◦ テストフレームワークも装備 • JavaScriptをほぼ意識せずに、JavaScriptランタイム (WebブラウザやNode.jsなど)で動作するアプリを開発できる
3. PharoJSのインストール Metacello new baseline: 'PharoJS'; repository:'github://PharoJS/PharoJS:pharo11'; load • Playgroundで"do it"
4. サンプルの起動 • インストール後にPharoJSメニューが出現 ◦ ヘルプを参照したり、サンプルのアプリを起動したりできる
5. HelloWorldAppの起動 • PjHelloWorldApp -> playground をメニューから選択 ◦ WebブラウザとPharoのPlaygroundが立ち上がる
6. Playgroundでの操作 • PlaygroundはJSランタイムと接続されている ◦ JSオブジェクトにメッセージ送信が可能
7. Playgroundからメッセージ送信 • Playgroundで console log: 'HelloWorld' と "do it" ◦ 実行結果がJSのコンソールに表示される
8. DOMの要素にアクセス • document, window などにアクセス可能 ◦ テキストインプットに何か入力 ▪ #nameTextInput のidが 振られているので... ◦ Playgroundで (document getElementById: 'nameTextInput') value. を"print it"すると
9. DOMアクセスによるアプリ操作 • テキストインプットを編集した後、ボタンのクリックを させてみる (document getElementById: 'sayHelloButton') click. "こちらでも可" (document getElementById: 'sayHelloButton') dispatchEvent: (window Event new: 'click'). (document getElementById: 'nameTextInput') value: 'HI'. • テキストインプットを直接書き換える
10. bridgeを使う • Playgroundからbridgeを使うことで、PharoJSのアプリ オブジェクトにメッセージを送信できる bridge app inspect. bridge appClass inspect. → PjHelloWorldAppのインスタンスやク ラスのインスペクタが開く
11. その他のメニュー • export ◦ Playgroundを開かず、単にトランスパイルしたJSを書き出す ▪ デバッグが不要な時 ▪ JSがコンパクトになる • browse ◦ Pharo側でアプリのクラスをブラウズ • files, OS files ◦ 生成されたファイルを一覧
12. PjHelloWorldApp の構成要素 • index.html ◦ 基本的にはidを付与した要素が並んでいるだけ ◦ 生成されたindex.js を読み込むようになっている <div style="position:relative;width:100%;max-width:471px;"> <img src="pharoJsLogo.png" alt="PharoJS Logo" style="width:100%;" /> </div> <input type="text" id="nameTextInput"> <button id="sayHelloButton">Say Hello</button> <p><strong><span id="greetingMessageContainer"></span></strong></p> <script language="javascript" type="text/javascript" src="index.js"> </script>
13. PjHelloWorldApp クラスを見る - start メソッド • アプリのエントリポイント ◦ getElementById: でDOM要素を取得 ◦ addEventListener:block: でイベントハンドラを登録 | nameInput sayHelloButton greetingMessageContainer | super start. user := PjUser new. nameInput := document getElementById: #nameTextInput. sayHelloButton := document getElementById: #sayHelloButton. nameInput addEventListener: #change block: [ user name: nameInput value ]. greetingMessageContainer := document getElementById: #greetingMessageContainer. sayHelloButton addEventListener: #click block: [ greetingMessageContainer innerHTML: 'Hello ' , user name ]
14. PjHelloWorldAppクラスを見る - appClasses クラスメソッド • 生成対象となるクラス群を示す ◦ 自身に加え、PJHelloWorldAppが使用しているPjUserクラスも追加 • トランスパイル時に内部的に呼び出されるメソッドのため <pharoJsSkip> プラグマがついている ▪ メソッドが生成対象にならない appClasses <pharoJsSkip> ^ super appClasses, { PjUser }
15. PjHelloWorldAppクラスを見る - PjUserの使用 • インスタンス変数userを定義 • PjUser自身はnameのgetter, setterを持つだけの単純なModelクラス • startメソッド内でnewして普通に使用している PjFileBasedWebApp subclass: #PjHelloWorldApp instanceVariableNames: 'user' classVariableNames: '' package: 'PharoJs-Examples-HelloWorld' user := PjUser new. greetingMessageContainer innerHTML: 'Hello ' , user name
16. Smalltalk から JavaScript への変換ルール • 大体は想像通り • SmalltalkのメソッドはJavaScript側では pj_ の接頭辞がつく ◦ 既存のJavaScriptの関数名と衝突しないようにするため ◦ MNUもシミュレートされる • Smalltalk側で js_ の接頭辞をつけておくと js_ が取れた形でJavaScript の関数になる ◦ MNUにならない
17. キーワードメッセージの変換ルール • セレクタの : 部分が _ になる ◦ add: item → pj_add_(item) ◦ copyFrom: from to: to → pj_copyFrom_to_(from, to)
18. newメッセージの変換ルール • ClassA new → pj_new() となる ◦ 内部でpj_basicNew()を呼び出し、 最終的にコンストラクタを呼び出している • コンストラクタに引数を渡したい場合 ◦ Class new: param ◦ Class new: paramA with: paramB
19. Globalオブジェクト • window, document などは最初から参照できる • グローバルオブジェクト群は PjUniversalGlobals, PjDomGlobals などのプール辞書に格納されている ◦ 直接参照できない場合、メッセージ送信で取得 ▪ window Event ▪ window localStorage など
20. インラインJavaScript • メソッド定義時に javascript: プラグマを指定することでJavaScriptをその まま書ける • 例: log: anObject メソッドの実体を console.dir(anObject) にする log: anObject <javascript: 'console.dir(anObject)'> • これで利用時は self log: someObj と書ける
21. playground / export 再び • Appクラスに playground メッセージを送ると ◦ index.js にbridgeの機能が入る ▪ 内部的にWebSocketを利用 ▪ デバッグ機能なのでデプロイ時には不要 • Appクラスに exportApp メッセージを送ると ◦ index.js にbridge は入らない ▪ Smalltalkの基本クラス群は入ったまま ▪ デプロイ時にはこちらを使う ▪ terserなどでminifyする
22. 簡単なWebアプリを作ってみる • 既存のJavaScriptやCSSのライブラリも利用 • JavaScript ◦ Mithril.js ▪ SPA用の軽量なWebコンポーネント系のライブラリ • CSS ◦ Bulma ▪ レスポンシブ対応の軽量なCSSフレームワーク
23. サンプルコード入手先 • プレゼンで利用するコードは以下で入手可能 ◦ https://github.com/mumez/SmalltalkStudy-PharoJS • 段階ごとにタグ付けしたので、適宜ダウンロード ◦ https://github.com/mumez/SmalltalkStudy-PharoJS/tags
24. ライブラリの指定方法 • index.html にCDNのリンクを書く ◦ index.htmlは自動生成されない ◦ 既存のものをコピーするなどして自作 … <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css" > … <script src="https://unpkg.com/mithril/mithril.js"></script> <script language="javascript" type="text/javascript" src="index.js"></script> </body>
25. アプリのクラスを定義 • SPA用のベースクラス、PjFileBasedWebAppが用意されている ◦ インスタンス変数は counter にする PjFileBasedWebApp subclass: #SsMithrilApp instanceVariableNames: 'counter' classVariableNames: '' package: 'StStudy-Pjs-Mithril'
26. index.jsの生成先を設定 • デフォルトは pharo-local/iceberg/PharoJS/PharoJS/HTML/(package名)/(class名) • 階層が深すぎるのでイメージ直下/(class名)とする defaultAppFolderParent <pharoJsSkip> ^ '.' asFileReference SsMithrilApp class • SsMithrilApp exportApp でindex.jsが生成されることを確認 • 前述のように index.html は別途用意して自分で置く defaults
27. index.html … <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css"> <title>Counter</title> </head> <body> <div id="app" class="hero"> <div class="container"> <p class="title">Counter</p> <button id="resetButton" class="button is-danger">Reset</button> <button id="incrementButton" class="button is-primary">Increment</button> </div> </div> <script src="https://unpkg.com/mithril/mithril.js"></script> <script language="javascript" type="text/javascript" src="index.js"></script> </body>
28. Playground で表示確認 • SsMithrilApp playgroundでブラウザに表示されることを確認 ◦ Bulmaのcssが効いている ◦ ボタンを押しても何も起きない ◦ Playgroundからメッセージだけは送れる
29. htmlのアプリ表示部分 <div id="app" class="hero"> <div class="container"> <p class="title">Counter</p> <button id="resetButton" class="button is-danger">Reset</button> <button id="incrementButton" class="button is-primary">Increment</button> </div> </div>
30. DOM要素アクセス用メソッドの定義 • 各ボタンに簡易にアクセスできるようにメソッドを定義 ◦ elementAt: はスーパークラスで定義されている resetButton ^ self elementAt: 'resetButton' SsMithrilApp incrementButton ^ self elementAt: 'incrementButton' accessing
31. 初期化メソッドの定義 • initialize内で、counterを初期化 ◦ サンプルのPjCounterをそのまま利用 • setupでイベントハンドラを登録 initialize super initialize. counter := PjCounter new. self setup SsMithrilApp initialization
32. イベントハンドラの定義 • addEventListener:block:で、ボタンのclickイベントに対して イベントハンドラを登録 • モデルの状態を変更し、render で表示 setup self resetButton addEventListener: #click block: [ counter reset. self render ]. self incrementButton addEventListener: #click block: [ counter increment. self render ]. self render SsMithrilApp initialization
33. renderメソッド実装の前に... • 基本DOM要素に対してinnerHTML: で書き換えれば良いが... • Mithril.js のAPIを使ってエレガントに済ませたい! ◦ https://mithril.js.org/#live-example var root = document.body m.render(root, m("h1", "My first app"))
34. m("main", [ m("h1", {class: "title"}, "My first app"), m("button", "A button"), ]) <main> <h1 class="title">My first app</h1> <button>A button</button> </main> m(selector, attributes, children) の利用 • m関数の入れ子で仮想DOMのツリーが作られる • HTMLだと...
35. var vnodes = m("main", [ m("h1", {class: "title"}, "My first app"), m("button", "A button"), ]) m.render(document.getElementById("app"), vnodes) render(element, vnodes) によるHTML生成 • render関数でDOMにHTMLが適用される • これで id="app"の子要素が、mainタグによる要素に置きかわる
36. インラインJavaScriptメソッド作成 - m:attrs:children: • mやrenderを楽に使うためPharoJS側にメソッドを用意しておく _m: selector attrs: attrs children: children <javascript: 'return m(selector, attrs, children)'> m: selector attrs: attrs children: children ^ self _m: selector attrs: attrs asDictionary children: children SsMithrilApp Mithril API
37. インラインJavaScriptメソッド作成 - render:vnodes: • 便利な renderAt:vnodes: も定義した render: element vnodes: vnodes <javascript: 'm.render(element, vnodes)'> renderAt: elementId vnodes: vnodes ^ self render: (self elementAt: elementId) vnodes: vnodes SsMithrilApp Mithril API
38. html側にcounter表示箇所を追加 <div id="app" class="hero"> <div class="container"> <p class="title">Counter</p> <p id="counter" class="subtitle">0</p> <button id="resetButton" class="button is-danger">Reset</button> <button id="incrementButton" class="button is-primary">Increment</button> </div> </div>
39. renderメソッド • idが'counter'の要素をレンダリング SsMithrilApp rendering render self renderAt: 'counter' vnodes: (self m: 'div' attrs: { ('class' -> 'is-size-1'). ('style' -> 'color:gray') } children: counter count)
40. renderメソッド • counterの値により色を変えてみる例 SsMithrilApp rendering render | style | style := counter count \\ 3 = 0 ifTrue: [ 'color:red' ] ifFalse: [ 'color:gray' ]. self renderAt: 'counter' vnodes: (self m: 'div' attrs: { ('class' -> 'is-size-1'). ('style' -> style) } children: counter count)
41. SsMithrilAppの完成 • Playgroundで確認後、exportするとindex.htmlを読み込むだけで 単体で動くアプリができあがる • 改良点 ◦ Traitsの使用 ◦ Componentの使用
42. TraitにAPIメソッドをまとめる - SsTMithril作成 • Mithril.js 関係のメソッド群をTraitにまとめておくと便利 Trait named: #SsTMithril instanceVariableNames: '' package: 'StStudy-Pjs-Mithril' ◦ Mithril API のメソッドカテゴリごとSsTMithrilに移動
43. TraitにAPIメソッドをまとめる - SsTMithril利用 • SsMithrilAppでSsTMithrilをuse: ◦ SsMithrilApp がすっきり ◦ TraitsがJavaScriptで使えてハッピー PjFileBasedWebApp subclass: #SsMithrilApp uses: SsTMithril instanceVariableNames: 'counter' classVariableNames: '' package: 'StStudy-Pjs-Mithril'
44. Componentの利用 • mount(root, component)を使うことで、状態変化に応じて 自動的に再描画させることができる • 続きはWebで! ◦ Mithril-Componentブランチ ▪ 追加分
45. Node.js用のWebアプリを作ってみる • サーバサイドで実行されるアプリの開発も可能 • ベースクラスが用意されている ◦ Node.js単体用 (PjNodeApp) ◦ Express.js 用 (PjExpressApp) • 事前に Node.js, npm のインストールが必要 ◦ nvm などで入れる ◦ Pharoからnodeとnpmを呼び出せる必要がある ▪ PATHが通っているかチェック • LibC system: 'node --version' で0が返ればOK
46. Node.js用のWebアプリ作成上の注意点 • index.jsの生成ディレクトリ ◦ パス中にスペースが含まれないようにする ▪ PharoJSがうまくハンドリングしてくれていない • Windowsでのexport ◦ 前段のnpmパッケージインストール処理がそのままでは動作しない ▪ 手動でnpm installする ▪ パッチ当て • あるいは環境変数ComSpecを一時的にPowerShellに設定 • Windowsでのplayground ◦ 動作しない
47. PjApplication class >> inAppFolderRunCommandLine: aBlock のパッチ inAppFolderRunCommandLine: aBlock <pharoJsSkip> | commandLine | commandLine := String streamContents: [ :str | str << 'cd '; << self appFullJsFolderPath pathString; << $;. aBlock value: str ]. OSPlatform current isWindows ifTrue:[ ^ WBWindowsWebBrowser shellExecute: 'Open' file: 'pwsh' parameters:'-Command "',commandLine,'"' directory: '' show: 5. ]. LibC system: commandLine
48. 簡単な Express.js アプリを作ってみる • 既存のJavaScriptやCSSのライブラリも利用 • JavaScript ◦ EJS (サーバ側) ▪ 軽量なテンプレートエンジン ◦ htmx (クライアント側) ▪ HTMLの属性指定でAjaxやDOM置き換えを可能にするライブラリ ◦ hyperscript (クライアント側) ▪ HTMLの属性指定で簡易なスクリプトを書けるライブラリ • CSS ◦ Bulma
49. アプリのクラスを定義 • 今回もCounterにする ◦ PjExpressAppを継承 ◦ APIサーバにする方法もあるが、今回はHTMLをブラウザに返して レンダリングする形式 PjExpressApp subclass: #SsExpressCounterApp instanceVariableNames: 'counter' classVariableNames: '' package: 'StStudy-Pjs-Express'
50. クラスメソッド群の定義 • index.js 生成ディレクトリの指定 defaultAppFolderParent <pharoJsSkip> ^ '.' asFileReference SsExpressCounterApp class defaults • 追加パッケージの指定 npmPackageNames <pharoJsSkip> ^ super npmPackageNames, #( ejs ) accessing SsExpressCounterApp class
51. exportで生成 • メニューからexport、あるいは SsExpressCounterApp exportApp ◦ package.jsonが生成されnpmパッケージのインストールが行われる ◦ index.js が生成される
52. TIPS: nodemonの導入 • export時にアプリのリロードを自動的に行わせるため nodemon を 入れておくと良い $ npm install - D nodemon • package.jsonのscriptsセクションを編集 "scripts": { "start": "nodemon index.js", "debug": "nodemon --inspect index.js" } $ npm run start • 以下でアプリを開始すると、exportの度にリロードが行われる
53. Webブラウザからアクセス • startするとポートの確認ができる ◦ http://localhost:4321 ◦ まだ Cannot GET / になるだけ
54. initializeメソッドを定義 • PjCounterでcounterを初期化してログを出してみる initialize super initialize. counter := PjCounter new. console log: counter count ◦ SsExpressCounterApp exportApp で更新 ▪ 0が表示される initialization SsExpressCounterApp
55. ルーティングの定義 • initRoutes メソッドを定義してinitializeから呼ぶように変更 initRoutes server get: '/' handler: [ :req :res | res send: 'hello' ] initialize super initialize. counter := PjCounter new. self initRoutes • exportApp で更新するとブラウザにhelloと出るようになる
56. EJSの準備 • views ディレクトリを作成し、pages, partials のサブディレクトリを作成 ◦ pages下にindex.ejs ◦ partials下にhead.ejs, main.ejs を置く • pagesが大枠 • partialsがpagesからインクルードされる
57. pages/index.ejs • headとmainのパーシャルをインクルード <!DOCTYPE html> <html lang="en"> <head> <%- include('../partials/head'); %> </head> <body> <%- include('../partials/main'); %> </body> </html>
58. partials/head.ejs • cssとクライアント側JSライブラリを指定 <meta charset="UTF-8"> <title>Express Counter</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css"> <script src="https://unpkg.com/htmx.org@1.9.11"></script> <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
59. partials/main.ejs • MithrilAppのindex.htmlからapp部分を拝借 ◦ 後でhtmxを使うため hx-get, hx-target の指定が入っている <div id="app" class="hero"> <div class="container"> <p class="title">Counter</p> <p id="counter" class="subtitle is-size-1">0</p> <button hx-get="/reset" hx-target="#counter" class="button is-danger"> Reset </button> <button hx-get="/increment" hx-target="#counter" class="button is-primary"> Increment </button> </div> </div>
60. EJSの利用 • initRoutes のhandler: 内をejsを使う形に変更 initRoutes server set: 'view engine' to: 'ejs'. server get: '/' handler: [ :req :res | self renderIndex: res ] initialization SsExpressCounterApp renderIndex: res res render: 'pages/index' rendering SsExpressCounterApp ◦ index.ejs の内容が表示されるようになる
61. Counter部分のレンダリング • ボタンを押すと404になる • htmxの hx-get で/increment, /reset に対してGET は飛ぶようになって いる • hx-targetの指定で、GETの結果のHTMLはid="counter"のタグに反映さ れる ◦ ルーティングを追加し、counter部分のHTMLを返すようにする <button hx-get="/increment" hx-target="#counter" class="button is-primary"> Increment </button>
62. partials/counter.ejs • <%= counter %> でcounterの値を適用してレンダリング ◦ ついでにstyleもcounterの値に応じて変わるようにした <div style="<%= counter % 3 == 0 ? 'color:red' : 'color:gray' %>"> <%= counter %> </div>
63. initRoutesの修正 • increment, reset のルーティングを追加 ◦ GETリクエストがあったらモデルを更新し renderCounter: でレンダリング initRoutes server set: 'view engine' to: 'ejs'. server get: '/' handler: [ :req :res | self renderIndex: res ]. server get: '/increment' handler: [ :req :res | counter increment. self renderCounter: res ]. server get: '/reset' handler: [ :req :res | counter reset. self renderCounter: res ] initialization SsExpressCounterApp
64. renderCounter:の追加 • render:with: によりEJS側にcounter countの値を渡すように renderCounter: res res render: 'partials/counter' with: {'counter' -> counter count} asDictionary rendering SsExpressCounterApp
65. hyperscriptで連打対策 • ちょっとしたロジックをクライアント側に入れたい時 ◦ Incrementボタン連打の間隔をhyperscriptで調整 <div id="app" class="hero"> <div class="container"> <p class="title">Counter</p> <p id="counter" class="subtitle is-size-1">0</p> <button hx-get="/reset" hx-target="#counter" class="button is-danger"> Reset </button> <button hx-get="/increment" hx-target="#counter" class="button is-primary" _="on click toggle [@disabled='true'] for 0.1s"> Increment </button> </div> </div>
66. まとめ • PharoJSを使えばJavaScriptを意識せずにJavaScriptのアプリを開発で きる • 慣れ親しんだPharoの開発環境が使える • Playgroundも完備 • TraitやメソッドカテゴリなどJSにない機能も利用可能 どこまでPharoJSでできるかチャレンジしてみるのも良いかも