概要

先日、社外での勉強会に初めて参加した際に出てきた技術・用語で知らなかったものを調査し、まとめてみます。

参加したのは、株式会社Another worksさん、株式会社HRBrainさんが共催するFront-end Meetup 2023に参加しました。
オンラインで参加したため、私は発表してないですが、色々と身になることがありました。

参加して良かった点

知らなかったorあやふやだった技術・用語が見つかる
他社の開発への取り組みや考え方を知れる
モチベアップ

Vertical Saas

Verticalは「垂直」という意味を持っており、Vertical Saasは特定業界に対して垂直方向に深い価値を持つSaaSを指します。
その業界特有の問題を解決することを目的としており、それに向けた機能が開発・提供されます。

業界の例としては、「教育」「医療」「EC」などが挙げられます。
バーティカルSaaS カオスマップ2022

一方で、さまざまな業界で水平方向に広く利用できるSaasという意味のHorizontal SaaSも存在しており
例として「メール」「Web会議」「会計」などが挙げられ、業界ではなく特定の「業務」に特化しています。

DnD

Drag And Dropのこと。
実装することで、要素をDrag And Dropで移動させることができるようになります。

DnDの実装に利用できる代表的なライブラリとして、以下のものがあります。

react-beautiful-dnd

atlassian社製のDnDライブラリ。現在は、他の優先事項に集中しており、さらなる機能開発や改良の予定はないようです。

この記事によると、React18では--legacy-peer-depsしないとインストールできないようです。

react-dnd

React DnDは、コンポーネントの結合を解除したまま複雑なドラッグ＆ドロップインターフェースを構築するためのReactユーティリティのセットです。TrelloやStorifyのように、ドラッグ操作によってアプリケーションの異なる部分間でデータを転送し、コンポーネントがドラッグ＆ドロップのイベントに応じて外観やアプリケーションの状態を変化させるようなアプリケーションに最適なものです。

dnd-kit

初回のリリースが2021/1/2であり、３つの中で最も歴史の新しいライブラリです。
直近では2023/2に更新されており、メンテナンスの不安もなさそうです。

フックを使って、数行のコードでコンポーネントをドラッグ可能な要素やドロップ可能な領域にすることができる。ドラッグ＆ドロップ可能なコンポーネントの動作を、あらゆる角度からコントロールできます。

npm trendsにで調べてみると、react-beautiful-dndとreact-dndが優勢のようですね。
react-beautiful-dndのメンテナンスが停止していることを考慮すると、今後はreact-dndを使用するのがよさそうです。

Tokenize

文章を何らかののルールに従ってtoken単位に分割すること。

簡単な例を挙げると、

1+1=2
を
["1", "+", "1", "=", "2"]
に分割したり

I am a student.
を
["I", "am", "a", "student", "."]
に分割することです。

以下の記事ではBERTというGoogleが2018年末に発表した自然言語処理モデルによるtokenizeについて書かれています。

Chromatic

Chromaticは、Storybookのクラウドベースのツールチェーンで、チームがUIコンポーネントをより速く出荷できるようにするものです。Storybookの開発チームによって作られました。

Chromaticを使用することにより以下のような利点があります。

共有ワークスペースの提供
コンポーネントの視覚的なリグレッションをテストする
プルリクエストにより影響を受けるコンポーネントのUI上の変更を比較できる
CIとバージョン管理でコンポーネントライブラリを自動化できる

詳しくはこちら。

まとめ

一度の参加（しかも見るだけ）でこれだけ知らなかった技術・用語を発見できました。
参加→調査を繰り返すことで、「業務でこういう機能を実現したいが、前に聞いたあの技術がつかえるかも」といった足がかりになります。
また、勉強会の雰囲気も知れるので、「勉強会って自分が参加していいんだろうか・・・なんか怖そう・・・」
と思う方はまずはオンライン参加してみるといいかもしれません！