![](https://images.logmi.jp/media/article/331400/images/main_image_104958907d2aa387124e5b931e5af9bfeef2a68f.jpg?w=600)
2025.02.18
「売上をスケールする」AIの使い道とは アルペンが挑む、kintone×生成AIの接客データ活用法
リンクをコピー
記事をブックマーク
Taro L. Saito氏:じゃあ今度はクライアントサイドについて見ていきます。Scala.jsというのは基本的にScalaのコードをJavaScriptに変換するものなので、基本的にScalaのコードしか使えない。例えばJavaのコードが紛れ込んでいるとコンパイルがエラーになってしまいます。なので、依存関係にあるライブラリもすべてScalaになるように注意する必要があります。
Airframeでは、Scala以外のコードが紛れ込まないように、dependencyを最小にして、すごく非常に気を遣ってデザインされています。あとアノテーションが使えなかったりとかランタイムリフレクションが使えないなどの制約があります。
一方、コンパイルタイムに行われるもの、例えばScala Macrosによるコード展開などは、実はScala.jsではなにも問題なく使えます。
またRPCの実装では、常に非同期実行になります。Scala Futureベースの非同期実行になっていて。ただ問題なのが、Futureを待つ方法というのがないんですね。というのも、JavaScriptはブラウザ上でシングルスレッドで動いているものなので、バックグラウンドで処理を待つということはありません。だから結局レスポンスを受け取ってFutureのチェインでmap、flatMap、resqueなどを駆使して操作を連結することが必要になってきます。
Scala.jsのコードはブラウザ上で動くのでデバッグがなかなか大変になってくるんですけれども、Chromeなど最近のブラウザにはDeveloper Consoleというのがあって、そこに対してログを表示してあげると、非常にデバッグしやすくなります。
Scalaのコードは1回JSにコンパイルされているんですけれども、airframe-logというモジュールを使うと、デバッグが非常にしやすくなります。例えばdebugというメッセージをここで表示すると、ここのデバッグログのメッセージだけじゃなくて、ソースコードのファイル名や行数までも表示されます。
また、Scala.jsでWeb UIを作るための手法も実はすごくいろいろあるんですね。ただ、基本的にはDOMを生成すればいい。DOMというのは例えば
例えばXMLリテラルのScalaの機能を使ってDOMを表示するなど。monadic-html、Binding.scala、そういうライブラリがありましたけれども、どうしてもこのXMLをScalaの中に書くのは、ちょっと書きにくいところもあります。Dotty(Scala 3.0)ではXMLリテラルが廃止されるので、このアプローチというのはどうも筋がよくない。
現在のベストプラクティスは、Scalaの関数を使ってDOMをどんどん構成していく。例えばScalaTagsでは、このHTMLというのが関数で定義されています。「html」「head」「body」「h1」「div」、これらのタグが全部関数で定義されている。今から紹介するAirframe RxもすべてHTMLのタグに対応するものを関数で定義しています。
この2つの大きな違いは、DOMのelementとattributeを区別するかどうか。例えばScalaTagsでは、ここがattributeで、ここはtext部分なんですけど、この両者を区別するのに括弧を入れています。一方、もっと最近のアプローチだと、この2つを区別しないで、両方とも1つの括弧の中に入れてしまおうという。
実は後者のほうがScalaの関数型のシンタックスに非常にマッチしていて、実際に書いてみると、ScalaTagsはすごく括弧をたくさん書かなくてはいけなくてすごく大変な書いていてつらいライブラリですが、最近のscalajs-reactとかAirframe Rxでは、よりScalaで書きやすい形になっています。
関数をネストさせることでより複雑なDOMの要素も生成できます。Airframe RXではrenderというインターフェイスを提供することで、DOMのエレメントをネストしたりとか、あとからスタイルを設定したりとか、そういうことが可能になるようにデザインされています。
また例えばこういう凝ったテーブルのレイアウトを表示したいときに、Scalaのコレクションを間に埋め込んだり、テーブルの1行1行を表示したり、イベントに応じてDOMを書き換えたり、そういうことができるようになっています。
また、リアクティブにユーザーのクリックなどの動作に反応してUIを書き換えなくてはいけないので、例えばRx.variableというものがありまして……。これは何をするかというと、変数に変更があるとイベントをどんどん後ろのオペレーターに伝播、すなわち影響を伝播させていくという実装になっています。
例えばRx.variableを定義して、実際にマップをして、文字列を作って、subscriberでprintする。そうすると、最初は「World」という値が入っているので「Hello World!」が表示されるんですけれども、このRxの変数の中身を書き換えてあげると、今度は同じコードが実行されて、今度「Hello Rx!」が表示される。そういう仕組みになっています。
こういう仕組みはMonixとかScala.rxなどいろいろなライブラリでも実装されていて、monadic-htmlでも同様な実装になっています。
重要なのは、最終的にsubscriptionをキャンセルしてDOMのリフレッシュができることです。Airframe Rxは、Monixだったりとかmonadic-htmlのいいところを取って、このダイナミックにDOMを書き換えるインターフェイスが定義されています。
また、このRxの実装の背景にあるのがReactiveXというストリームを処理する実装です。これは基本的にはmap、flatMap、filterなどのオペレーションが使えて、ScalaのコレクションのAPIとほぼまったく一緒なんですね。なので、Scalaのコレクションの使い方さえ知っていれば、こういうストリームの情報、すなわちイベントの情報を受け取って、その都度DOMの要素を書き換えていくというのは、実はすごく簡単にできる。
また、このリアクティブのRxの抽象化を使うことで、例えばgRPCではクライアントストリーミング、サーバーストリーミング、あとは双方向での通信を適宜行うようなアドバンスドな通信もサポートされているんですけれども、そういうのもどんどん実装することができます。
では、まとめです。Airframeを使うことでScala中心の開発をすることが可能になっています。このアプローチのメリットは、もうScalaさえ学べばクライアント・サーバーの実装というのを全部済ませてしまう。非常にラーニングコストが下がるんですね。 Protocol Bufferについて学ばなくてもいいし、FinagleとかgRPCのWebサーバー側の技術についても最初は学ばなくてもよくなるというところがすごく大きなところ。 結論です。Scalaは非常に強力なプログラミング言語です。いいところは、最初はすべての技術を蹴散らすような書き方をしたんですけれども、実際にはいろいろな技術のいいところをScalaにどんどん集約することができます。ラーニングコストを最小化してScalaファーストなアプローチを可能にしているのがAirframeのライブラリです。 以上で終わりです。ありがとうございました。
Scalaはラーニングコストが下がる
2025.02.13
“最近の新人は報連相をしない”という、管理職の他責思考 部下に対する「NG指示」から見る、認識のズレを防ぐコツ
2025.02.13
AIを使いこなせない人が直面する本当の課題 元マッキンゼー・赤羽雄二氏が“英語の情報”を追い続ける理由
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
2025.02.12
マネージャーは「プレイング3割」が適切 チームの業績を上げるためのマネジメントと業務の比率
2025.02.14
報連相ができない部下に対するコミュニケーションの取り方 「部下が悪い」で終わらせない、管理職のスキル向上のポイント
2025.02.13
上司からは丸投げ、部下からはハラスメント扱い、業務は増加…プレイングマネジャーを苦しめる「6つの圧力」とは
2025.02.12
何度言っても変わらない人への指示のポイント 相手が主体的に動き出す“お願い”の仕方
2025.02.13
「みんなで決めたから」を言い訳にして仲良しクラブで終わる組織 インパクトも多様性も両立させるソース原理
2025.02.10
32歳で「すかいらーく」を創業、75歳で「高倉町珈琲」で再起業 「失敗したからすかいらーくができた」横川竟氏流の経営哲学
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.13
“最近の新人は報連相をしない”という、管理職の他責思考 部下に対する「NG指示」から見る、認識のズレを防ぐコツ
2025.02.13
AIを使いこなせない人が直面する本当の課題 元マッキンゼー・赤羽雄二氏が“英語の情報”を追い続ける理由
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
2025.02.12
マネージャーは「プレイング3割」が適切 チームの業績を上げるためのマネジメントと業務の比率
2025.02.14
報連相ができない部下に対するコミュニケーションの取り方 「部下が悪い」で終わらせない、管理職のスキル向上のポイント
2025.02.13
上司からは丸投げ、部下からはハラスメント扱い、業務は増加…プレイングマネジャーを苦しめる「6つの圧力」とは
2025.02.12
何度言っても変わらない人への指示のポイント 相手が主体的に動き出す“お願い”の仕方
2025.02.13
「みんなで決めたから」を言い訳にして仲良しクラブで終わる組織 インパクトも多様性も両立させるソース原理
2025.02.10
32歳で「すかいらーく」を創業、75歳で「高倉町珈琲」で再起業 「失敗したからすかいらーくができた」横川竟氏流の経営哲学
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
着想から2か月でローンチ!爆速で新規事業を立ち上げる方法
2025.01.21 - 2025.01.21
新人の報連相スキルはマネージメントで引きあげろ!~管理職の「他責思考」を排除~
2025.01.29 - 2025.01.29
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
第20回エクゼクティブメンターイベント「今、「ひと」と組織が共創する〜働き方の未来へ」
2024.12.07 - 2024.12.07