Misskey連載第6回: MisskeyにおけるVueのComposition APIの活用

概要

「Misskey連載第5回: Misskeyのパフォーマンス改善の取り組み⁠⁠・2023年7月 | GNU social JP」に続いて、gihyo.jpのMisskey連載が公開されたので紹介します。

2023-09-11 Monに「MisskeyにおけるVueのComposition APIの活用 | gihyo.jp」と以下の投稿で発表されていました。

2023-09-11T00:38:52.809Z

:peroro_sama:しゅいろ:peroro_sama:|syuilo@misskey.io

Misskey連載9月分の記事が出た

MisskeyにおけるVueのComposition APIの活用 | gihyo.jp

MisskeyはフロントエンドのUIフレームワークとしてVue 3を採用しており、そのVueの新しい機能であるComposition APIも活用しています。今回はそのComposition APIについて解説します。

gihyo.jp

MisskeyのフロントエンドでVue 3のAPIについての解説のようです。なお、2月からだいたい毎月更新されていた連載でしたが、8月はお休みでした。

内容

VueのコンポーネントにはOptions APIとComposition APIの2種類の書き方があり、Composition APIは新しい記述方法です。

Composition APIでは、関連する処理を一か所にまとめて記述でき、読みやすく再利用可能な形の柔軟なコンポーネントを作成できます。Misskeyでは従来のOptions APIからComposition APIに移行が完了しています。

Options APIを用いると、mounted/unmountedのイベントが全体共通で、生成時と破棄時の処理がごちゃごちゃします。

Composition APIだと、onMounted/onUnmountedの関数を何回も定義でき、一連の処理をまとめて記述でき、さらにこのブロックを関数にすることもできます。

Vueに限らずこのスタイルの設計が最近のトレンドになっているそうです。

MisskeyではOptions APIからComposition APIに移行が完了しており、Composition APIがコンポーネント外でも利用できることから、状態管理にも使っています。

結論

Misskeyで採用しているVue 3のComposition APIの紹介でした。

私はVue 2を使ったことがあります。Options APIという名前があったことを知りませんでした。たぶんVue 3で名前が付いたのだと思います。また、状態管理はVuexを使うのが一般的だと思っていましたけど、使わないで自前で実装しているそうです。

このあたりのフロントエンドの書き方はころころ変わる感じがあります。必要な時に学ぶのが良いだろうと思いました。