PharoJS を使って Pharo から JavaScript を実行してみる

[PharoJS](https://github.com/PharoJS/PharoJS) という Smalltalk のコードを JavaScript にして動かすというツールがあります。とても楽しそうなのですが日本語で書かれている記事がほとんどなかったので、今回はこのツールを使った簡単な遊び方を書いてみようと思います。

## 書いてあること

+ PharoJS のインストール
+ demo を動かす
+ Playground から JavaScript を動かす


## 環境

+ macOS Big Sur 11.1
+ Pharo 8.0.0 64bit
+ PharoJS (commit 2ed6a3d)
+ Safari 14.0.2

## インストール

まず Pharo は既にインストール済みとします[^1]。

[^1]: インストール方法が分からない場合は、[Smalltalk Advent Calendar 2020 5日目](https://qiita.com/kuritar/items/fa97e1cfc0b0afa2205f)に kuritar さんが Pharo の環境構築を書かれているので、そちらを参考にされると良いと思います。

イメージを起動させたら Playground で次を do it します。

```Smalltalk:Playground
Metacello new
  baseline: 'PharoJS';
  repository: 'github://PharoJS/PharoJS';
  load
```

しばらく待つとインストールされます。無事にインストールされればメニューバーとワールドメニューに PharoJS Playground が追加されるはずです。（ちなみに項目は、何故かワールドメニューのモノの方が多いです。）

![PharoJS Playground のメニュー項目](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4967/146b6d26-c803-afe5-6197-286442ffa9a6.png)

## demo （HelloWorldApp）を動かす

さて、早速 demo を動かしてみましょう。やはり最初なので定番の HelloWorldApp が良いでしょうか。[何度も"HelloWorld!"を出力するとスキルが伸びる](https://qiita.com/yuki_works/items/cd14ce472e515063269d)という噂もありますし。
![HelloWorldAppの場所](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4967/dadf623d-d637-188c-5d51-5fb314a3fb64.png)
さて、メニューの項目をクリックすると自動的にブラウザが開き PharoJS のロゴなどが表示され、Pharo の方には PharoJS Playground というものが現れます。ブラウザのテキストボックスに何か文字を入れて Say Hello ボタンを押すと、ボックスの下に文字が表示されます。無事に動作しているようです。
![HelloWorldApp](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4967/197fa42b-8a7d-03a3-5c82-214295632845.png)

## Playground から JavaScript を実行する

自動的に開かれた PharoJS Playground ですが、この中に書いた Smalltalk 風のコードは自動的に javascript へ変換されて実行されるようです[^2]。 本当に Playground から JavaScript が実行できるのでしょうか？ 試しに、自動で開かれた Playground に既に書かれている次のコードを do it します。

[^2]: 正確には PjProxy クラスのオブジェクトへのメッセージが js のコードへ変換されているように見えますが、確認したわけではないです。

```Smalltalk:Playground
document body style backgroundColor: '#fee'.
```

するとブラウザに表示されているページの背景色が変更されます！ 本当に JavaScript が動かせるようですね。
![スクリーンショット 2020-12-22 22.47.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4967/2fcc13c6-97ff-8b42-7fc0-6e238b29bfd4.png)
せっかくなので Playground からも Say Hello してみましょう。まずテキストボックスに入力されている値を取得してみます。（今はテキストボックスに "Playground!!" と入力したとします。）以下のコードを Playground で inspect it します。

```Smalltalk:Playground
document getElementById: 'nameTextInput'.
```

するとインスペクターに色々な情報が表示されます。これがテキストボックスの情報のようです。少しスクロールしてみると、欲しかった文字列がありました！
![テキストボックスのインスペクタ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4967/5847043d-6feb-d0cc-1268-95bc6e8a294c.png)
value のメッセージを先のオブジェクトへ送れば文字が取得できそうです。実際にインスペクターのウインドウで試してみると無事に取得できました。
![スクリーンショット 2020-12-22 23.03.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4967/a01f2715-6901-1e35-b5bd-02f28f9f1567.png)
それでは Playground で次のコードを do it しましょう。

```Smalltalk:Playground
boxText := (document getElementById: 'nameTextInput') value.
messageField := document getElementById: 'greetingMessageContainer'.
messageField innerText: 'Hello ' , boxText.
```

ブラウザの方を見てみると無事に反映されています！
![Playground から Say Hello](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4967/ccbef7bd-31b3-2f81-2034-2fc7afa77999.png)
終わるときは、Playground を閉じるとブラウザも自動的に閉じられます。

## おわりに

Pharo から JavaScript のオブジェクトに触れたり、色々楽しめそうだと感じました。GitHub の方も活動中なので今後にも期待できます。ただ使用するには JavaScript の知識も多少は必要そうです。
さて今回は少し触る程度でしたが、もっとしっかり使えば WebApp を作れたり、またスマホアプリも制作可能なようです。詳しくは[丁寧なチュートリアル](https://richardeng.medium.com/getting-started-with-pharojs-2d9521fe78dc)や [参考文献2] がありますので、気になる方は是非参考にされると良いと思います。

## 参考文献

1. [FAQ | PharoJS](https://pharojs.github.io/faq.html)
2. [今時なウェブ開発をSmalltalkでやってみる?](https://www.slideshare.net/newapplesho/smalltalk-75424036)