出落ちで済みませんが、Proton Nativeとか言うのを見つけて試した、というお話です。

React Nativeでモバイルアプリを書くようなノリでデスクトップアプリを書けるよ、っていうProton Nativeというフレームワークがありました。

GitHub - kusti8/proton-native: A React environment for cross platform desktop apps
A React environment for cross platform desktop apps - kusti8/proton-native
github.com

裏ではlibui、そしてそのJSバインディングであるlibui-nodeが使われているらしい。libui、なに？って感じなので今度調べます。

インストールからひな形アプリの生成、そして起動までざっとやってみます。これはquick startに書いてある通りです。

Proton Native - React Native for the desktop, cross compatible
proton-native.js.org
1% npm install -g create-proton-app
2% create-proton-app my-app
3% cd my-app
4% npm run start

で、これをすると簡単なアプリが起動します。

 1class Example extends Component {
 2  render() { // all Components must have a render method
 3    return (
 4      <App> // you must always include App around everything
 5        <Window title="Proton Native Rocks!" size={{w: 300, h: 300}} menuBar={false}>
 6            {/* all your other components go here*/}
 7        </Window>
 8      </App>
 9    );
10  }
11}

コードはほぼReactです。サンプルとしてこれじゃあまりにアレなので、ボタンを置いて動かしてみました。

コードを↓のように変更して、ボタンを押したらダイアログを表示してみます。

 1class Example extends Component {
 2  render() { // all Components must have a render method
 3    return (
 4      <App> // you must always include App around everything
 5        <Window title="Proton Native Rocks!" size={{w: 300, h: 300}} menuBar={false}>
 6          <Button onClick={() => {
 7            Dialog('Message', {title: "ダイアログを開きましたね？"})
 8          }}>
 9            Open the Dialog!
10          </Button>
11        </Window>
12      </App>
13    );
14  }
15}

なんか小さくなった

ダイアログが出た

↑の例ではWindowサイズが無視されてボタンのサイズにフィットしてしまいました。余白をいれたり中央に配置したりできないかと色々試しましたが、どうやらレイアウトを微調整するのがかなり難しいことがわかりました。そもそもlibuiの癖なのか、ProtonNativeにAPIが足りないのか、そこまではまだわかっていません。実用にはもう少し成熟が必要そうです。

とはいえ、デスクトップアプリをサクッと作りたいと常日頃思っていたので、React Nativeに慣れている僕にとっては、似たような考え方で書けるProton Nativeの存在は期待しています。