Walk around functional web frontend programming

https://opt.connpass.com/event/222709/

Transcript

1. 「関数型Webフロントエンド プログラミング」 ひとめぐり @choplin 奥野 晃裕 1 2021/10/01 第一回関数型プログラミング（仮）の会
2. 自己紹介 • 奥野 晃裕 @choplin • CTO @ Splink Inc, • 専門はデータベース工学 • よく使う関数型言語はScala 2 2021/10/01 第一回関数型プログラミング（仮）の会 - We’re hiring!
3. はじめに 目的 スコープ 「関数型プログラミング」によって、Webフロントエンドシステムを 記述可能な言語にどんな選択肢があるのかを紹介する • 発表者が恣意的に選択した言語を紹介する • 使ったことのある言語、気になっている言語 • 紹介する言語の数を目的としない • 言語の体系的な整理を目的としない • 発表者による主観的な「よさ」を中心に紹介する • 言語の正確な説明を目的としない • 言語の正しい？評価を目的としない • 言語間の比較を目的としない 3 2021/10/01 第一回関数型プログラミング（仮）の会
4. ご紹介する言語 • ReasonML, ReScript • Elm • F# + Fable • Scala.js • PureScript • Rust + wasm • Mint • Gleam • TypeScript + fp-ts 4 2021/10/01 第一回関数型プログラミング（仮）の会 それなりの規模のプロダクト （ > 10K LOC）で使ったことがある ちょっとしたプロダクトで使ったことがある 趣味で少しさわったことがある 最近twitterで見て気になってる 言語としては最も普及してる
5. ReasonML, ReScript 2021/10/01 第一回関数型プログラミング（仮）の会 5 • ReasonMLとReScriptの関係が分かりにくい • 抽象化はそこそこ。特にMonadicな記述はandThenで 繋げないといけないので見づらい。 気になるところ • JSとの連携がめちゃくちゃやりやすい • Interopが充実している • JSとファイルが1:1でコンパイルされる • Transpile 後のJSが読める！ • OCamlの言語機能を大体そのまま使える • React, JSXを強力にサポートしている • JS/TSからの文法などの差が比較的小さい https://rescript-lang.org/ • OCamlのAlt Syntax • JSへtranspileするのはBuckleScript • 見た目も書き味もOCamlっぽい • ReasonMLはFacebookのReact作者の方が 作った • 少し前にBuckleScriptがAlt Syntaxも取り込 んでReScriptになった 気に入ってるところ 概要
6. Elm 2021/10/01 第一回関数型プログラミング（仮）の会 6 • 抽象化機能は意図的に低くされているため、冗長な記 述をせざるを得ないことが多い • 逆に言うとアプリケーションのコアに集中できるという面もある • JSとの連携が結構めんどう 気になるところ • 開発体験がすごくいい • 速いコンパイル、分かりやすいエラー、etc. • コンパイルが通った後の安心感がすごい • ランタイムでのエラーはほぼ0 • The Elm Architectureによって よいプラクティスを自然に実践できる • 言語がコンパクトで学習コストがかなり低い • TEAと強力に連携するTime Travelling Debugger • Webアプリケーション記述のために スクラッチから設計された言語 • 初期はFRPをベースにしていたが、大きく方 針転換してかなりシンプルな言語に • https://elm-lang.org/news/farewell-to-frp • 見た目はHaskellっぽいが、↑の方針の一環 で抽象化機能は低くデザインされている • The Elm Architectureというフロントエンド でのデータフローのモデルが優秀で、 他の言語にも広く影響を与えている https://guide.elm-lang.org/ 気に入ってるところ 概要
7. F# + Fable 2021/10/01 第一回関数型プログラミング（仮）の会 7 • .Net周りの知識は結局ある程度必要になる • コンパイルはちょっと時間がかかる 気になるところ • F#の言語基盤が強力 • 特にCompute Expressionによる抽象化 • ライブラリが充実してる。ReactのDSL（Feliz）や、 TEAっぽいことをするやつ（Elmish）が活発に開発さ れており、UIの記述についてこれらと概ね同じ書き味 で書ける • BabelのASTを経由するので、Babel周りのエコシステ ムに乗っかりやすい • 吐かれたJSがまぁまぁ読める • F#をJSに変換する（Fable） • F#の言語機能はほぼ全て（多分）、標準ラ イブラリも結構使える • コンパイルのインターフェースとして、 dotnet-cliとwebpackの両方から選択できる https://fable.io/ 気に入ってるところ 概要
8. Scala.js 2021/10/01 第一回関数型プログラミング（仮）の会 8 • UI構築のフレームワークが色々あってスタンダードな ものがない • Scalaっぽく書けるようにしているものが多く、JSerには馴染み にくそう • JSとの連携はちょっとめんどう • コンパイルはちょっと時間がかかる 気になるところ • Scalaの言語基盤が強力 • コミュニティがScala.jsサポートに協力的な雰囲気が あり、jvm/jsの両対応してるライブラリがおおい • Scalaの一般的なワークフロー（sbt）でそのままフロ ントエンドを書ける • バックエンドとの協調した開発もサポートしている • UI構築のライブラリはSlinkyが好き 気に入ってるところ • ScalaからJSへ変換する • Scalaの言語機能はほぼ全て（多分）、標準 ライブラリも結構使える • Scalaの標準的なビルドツールsbtのプラグイ ンとして提供されている 概要 https://slinky.dev/docs/writing-components/
9. PureScript 2021/10/01 第一回関数型プログラミング（仮）の会 9 • 抽象化に頭が追いつかない… 気になるところ • とにかく高い抽象化能力 • 一通りの環境の構築がnpmからできて簡単 • コンパイラ、ビルドツール、エディタ連携 etc. • 関数型の設計が自然に身につく（感じがする） • UI構築のフレームワークであるHalogenが優秀 • TEAっぽいAPIで書ける 気に入ってるところ • “A strongly-typed functional programming language that compiles to JavaScript” • Haskell-inspiredで、文法だけでなく、 Haskellで培われた純粋関数型の抽象化手法 を惜しみなく取り入れている • Haskellのセマンティクスでなく、JSのセマン ティクスをもとにして上手く行くかに興味が あり、PureScriptを作ったとのこと • https://leanpub.com/purescript/read#leanpub-auto- about-the-author 概要 https://book.purescript.org/index.html
10. Rust + wasm 2021/10/01 第一回関数型プログラミング（仮）の会 10 • WebAssemblyの開発環境へのキャッチアップが必要 • WebAssemblyの使いどころが今一分かってない 気になるところ • Rustの言語基盤が強力 • 実用的にWebAssemblyを使うための数少ない選択肢 • UI構築フレームワークのYewはよくできている • TEA風 気に入ってるところ • RustからWebAssemblyへコンパイル • wasm-packがビルドツールとして提供され ている • wasm-bindgenによって、JSとのiteropが実 現されている 概要 https://yew.rs/getting- started/build-a-sample-app
11. Mint 2021/10/01 第一回関数型プログラミング（仮）の会 11 • まだコミュニティの規模は大きくない（ように見える） • レールが広範囲に用意されているのでそれに乗っかる覚 悟は必要 • JSとのinteropはあまり用意されてない？ 気になるところ • Webアプリケーションの構築に必要なほとんどの要素 が言語として提供されている • 迷うことが少ない。特にStyleの辺り。 • ReactやElmの経験者だと、ほぼすぐに書き始め られるくらい学習コストが低い • 開発体験がすごくいい • 開発サーバー、エディタ連携、 気に入ってるところ • “Mint is a language specifically created for writing single-page applications” • ロジックやデータフローだけでなく、スタイ ルやルーティング、非同期処理までSPAに必 要な全てのものを言語レベルでサポートする • Elm-inspired • シンタックスは独特 概要 https://www.mint-lang.com/
12. Gleam 2021/10/01 第一回関数型プログラミング（仮）の会 12 • JSのサポートは少し前に入ったばかりなので、UIライ ブラリなどはこれから 気になるところ • 一つの言語でErlan VMのバックエンドと、Webフロ ントエンドを書けるのは夢がある • ゴリゴリの抽象化機能はないが、ADT、パターンマッ チなどひとまず欲しい機能は揃っている 気に入ってるところ • Erlang VM（BEAM)用のコードにコンパイル する性的型付き言語 • 少し前にJSへのコンパイルをサポートした • シンタックスはRustっぽい 概要 https://gleam.run/news/v0.16-gleam-compiles-to-javascript/
13. TypeScript + fp-ts 2021/10/01 第一回関数型プログラミング（仮）の会 13 • まとまった量を書いたことがないので、どこまで痒い ところに手が届くか知らない 気になるところ • 既にTypeScriptで書かれているところでも使い始めら れる • Optionなどの簡単なデータ型だけでなく、型クラスや HKT、Effectなどかなり突っ込んだところまでサポー トしている • fp-tsを中心にしたライブラリが複数あるなど エコシステムがある 気に入ってるところ • TypeScriptで純粋関数型の設計でアプリケー ションを書けるようにするライブラリ 概要 https://dev.to/gcanti/getting-started-with-fp-ts-io-36p6
14. おわりに • 「関数型プログラミング」でWebフロントエンドシステムを書く選択肢は豊富にある • それぞれの言語で目指しているところ、いいところは様々 • Webフロントエンドシステムを書く機会があったら是非自分にあった言語を探して みてください 14 2021/10/01 第一回関数型プログラミング（仮）の会