Yjs と聞いて、何を思い浮かべるでしょうか？
検索すると、〇〇先輩とか出てきますが、先輩ではありません。
↓これです。
A CRDT framework with a powerful abstraction of shared data
https://github.com/yjs/yjs/tree/master
CRDTできるフレームワークと書いてありますが、CRDTとは何かと言い出すと、Conflict-free replicated data typeの略で結構難しい話になります。
そこで、CRDTをすごく平たく言うと、Google Docsとか、MicrosoftのOffice365のExcelとか、AさんとBさんが同じExcelのシートを開いていても、共同で編集できますよね。あれがCRDTです。
そんな機能を実現させるためのライブラリです。
ベルリン在住のケビン・ヤーン（？）さんが作っているようです。
ありがとう、ケビンさん！
さて、まずはめっちゃ簡単に動作させてみます。
しかし、「Yjs sample」 とかググってみても、Reactを使ったりマイクラを使ったり、TODOアプリとかちょっと複雑なアプリが多く出てきます。
そういうのじゃなくって、「Hello World」的なことがまずは最初にしたい！という人いませんか？→はい、私です。
他にもそういう方がいるのではないかと思いまして、この記事を書きました。
灯台元暗しでYjsの公式サイトに「Hello World」的なサンプルがありました！
import * as Y from 'yjs'
// Yjs documents are collections of
// shared objects that sync automatically.
const ydoc = new Y.Doc()
// Define a shared Y.Map instance
const ymap = ydoc.getMap()
ymap.set('keyA', 'valueA')
// Create another Yjs document (simulating a remote user)
// and create some conflicting changes
const ydocRemote = new Y.Doc()
const ymapRemote = ydocRemote.getMap()
ymapRemote.set('keyB', 'valueB')
// Merge changes from remote
const update = Y.encodeStateAsUpdate(ydocRemote)
Y.applyUpdate(ydoc, update)
// Observe that the changes have merged
console.log(ymap.toJSON()) // => { keyA: 'valueA', keyB: 'valueB' }これを、index.mjs という名前で保存します。
PCにNode.jsはインストールされていますか？されていなければ、まずはNode.jsをインストールしてください。
Node.jsがインストールされていれば、次はYjsをインストールします。
私の開発環境はWindowsです。なのでコマンドプロンプトを開いて次のコマンドを実行します。
npm i yjs y-websocket
厳密にいうと、後半のy-websocketは今は必要なさそうですが、いずれ必要になりそうなので入れておきます。
インストールできましたね！
そしたら、さっき保存したindex.mjs をnodeコマンドで動作させます。
node index.mjs
すると、上記のスクショのように、サンプルコードの下記の部分が表示されます。
console.log(ymap.toJSON())
('keyA', 'valueA')
だったymap が
('keyB', 'valueB')
という ymapRemote と統合されて
{ keyA: 'valueA', keyB: 'valueB' }
になったんですね~。
すごい！
もちろん、これだけではすごさは全く伝わらないと思うので、Yjsについては今後記事を書いていきたいと思います。