コワくないComposition API

コワくないComposition API @corrupt952

コワくないComposition API ⾃⼰紹介 ● 長谷川 和樹 / Kazuki Hasegawa / @corrupt952 ● 株式会社スタディスト プロダクト技術責任者 & 茨谷企画（個人事業） ● 趣味 … 読書・ゲーム ○ ● 落ち着いたらエルデンリングやるんだ ... ひとこと ○ エンジニア・学生がゆるく集まって 交流できるような物理空間を作りたい ○ confidential 最近会社作ったのはいいけど進める時間がない！ Copyright © 2023 Studist Corporation. all rights reserved.

• https://twitter.com/corrupt952

コワくないComposition API オススメの店 ゑびす本店 confidential Copyright © 2023 Studist Corporation. all rights reserved.

スタディストのサービス紹介 ビジュアルベースの⼿順書で”伝えるを”もっと簡単に マニュアル作成‧共有システム 導⼊社数 confidential 2,000 社 海外100社 国内 Copyright © 2023 Studist Corporation. all rights reserved. 4

コワくないComposition API ⽬次 1. Options APIとComposition APIとの違い 2. <script setup>のメリット・デメリット 3. まとめ confidential Copyright © 2023 Studist Corporation. all rights reserved.

コワくないComposition API 話すこと‧話さないこと ● 話すこと ○ 開発者体験に焦点をあてたComposition API ● 話さないこと ○ Options APIやComposition APIの詳しい話 ○ パフォーマンス観点での話 confidential Copyright © 2023 Studist Corporation. all rights reserved.

Options APIとComposition APIとの違い

コワくないComposition API Options APIとは Vueの従来の記法。 コンポーネントのロジックを、 Vueが定義した構造に従ってグループ化を行う。 ● 昔からあるVueの記法 ● data,methods,computedといった粒度での処理のグループ化 ● thisを使用してコンポーネント内のプロパティやメソッドへの容易なアクセス ● ドキュメントやサンプルが豊富 confidential Copyright © 2023 Studist Corporation. all rights reserved.

コワくないComposition API Composition APIとは Vue 3で導入された新しい記法。 コンポーネントのロジックを開発者が任意の構造でグループ化しやすく、コンポーネントから処理を別ファイルに 切り出しやすい。 ● Vue 3で導入された新しい記法 ● 開発者が任意の構造で処理をグループ化できる ● thisを使わず、スコープ内の変数や関数を直接参照 ● ドキュメントやサンプルが Options APIと比べて少ない confidential Copyright © 2023 Studist Corporation. all rights reserved.

Teachme Bizでの利⽤割合 スタディストでは、 Vue 2時代からある Webアプリケーションのため、どちらも併用されています。 ● 総コンポーネント数 … 570 ● Options API … 333 ● Options API & setup() … 188 ● script setup … 44 ● Unknown … 5 ※ 雑な集計 confidential Copyright © 2023 Studist Corporation. all rights reserved.

<script setup>

コワくないComposition API <script setup>とは SFC内でComposition APIを利用する場合の糖衣構文（ Syntax Sugar）。 SFCとComposition APIを両方を使う場合に Vue公式が推奨している。 ● Options APIと比べてコードが短くなりやすい ● エディタやIDEがOptions APIと比べてサポートが強い ● ○ 未使用の変数・関数の検知のしやすさ ○ 型推論の柔軟さ より純粋なTypeScriptに近い機能 ※ 出典 … https://vuejs.org/api/sfc-script-setup confidential Copyright © 2023 Studist Corporation. all rights reserved.

• https://vuejs.org/api/sfc-script-setup

コワくないComposition API Pros/Cons ● Options APIと比べてコードが短くなりやすい ● エディタやIDEがOptions APIと比べてサポート が強い ○ 未使用の変数・関数の検知のしやすさ ○ 型推論の柔軟さ ● より純粋なTypeScriptに近い機能 ● ネストが浅く定義できるため視認しやすい ● templateも含めてコードジャンプが正しく機能す ● Options APIと比べてよりサンプルが少ない ○ ● 学習コストが高い（ともいえそう） 標準の構造がないため、処理のグループ化が 難しい場合があり分かりづらい場合もある ● ref,reactiveの使い分けが難しい る confidential Copyright © 2023 Studist Corporation. all rights reserved.

コワくないComposition API

Pros - 未使⽤の変数‧関数を検知しやすい

// Options API
<script>
export default {
methods: {
hoge: () => {},
fuga: () => {} // 未使用
であることが検知されない
}
}
</script>
<template>
<button
@click="hoge">Click</butto

confidential

// <script setup>
<script setup>
const hoge = () => {}
const fuga = () => {} // 未使
用であることを検知
</script>
<template>
<button
@click="hoge">Click</butto
n>
</template>
Copyright © 2023 Studist Corporation. all rights reserved.

コワくないComposition API

Pros - ネストが浅く定義できるため視認しやすい

// Options API
export default {
data: {
hoge: 1
},
methods: {
fuga: () => {

// <script setup>
const hoge = ref(1)
const fuga = () => {
}

}
}
}
confidential

Copyright © 2023 Studist Corporation. all rights reserved.

コワくないComposition API

Cons - 標準の構造がない

// Options API
export default {
data: {
hoge: 1
},
methods: {
fuga: () => {

// <script setup>
const hoge = ref(1)
const fuga = () => {
}

}
}
}
confidential

Copyright © 2023 Studist Corporation. all rights reserved.

書き換えパターン

スタディストにおけるOSSガイドラインの策定 this.$refs.hoge refで定義しておけば OK // Options API // <div ref="hoge" /> this.$refs.hoge // Composition API // <div ref="hogeRef" /> const hogeRef = ref(null) confidential Copyright © 2023 Studist Corporation. all rights reserved.

コワくないComposition API this.$teachme createTeachmeModulesを実行しておけば、 同一のものが利用できるので OK。 // Options API this.$teachme.fuga() // Composition API const $teachme = createTeachmeModules() $teachme.fuga() confidential Copyright © 2023 Studist Corporation. all rights reserved.

コワくないComposition API this.$t vueI18nをimportして、直接使えば OK // Options API this.$t('errors.hoge') // Composition API import vueI18n from '@/language' vueI18n.t('errors.hoge') confidential Copyright © 2023 Studist Corporation. all rights reserved.

で、ぶっちゃけscript setupどうなの？

コワくないComposition API 個⼈の所感 ● 標準で用意されている構造がないのが、 Vueの謳っている容易さから離れている可能性がある ● 無理にでも移行する必要はないと思うが、 VSCodeの拡張との親和性を考えると script setupに移行して おきたい ○ （エディタやIDEだけで）Options APIだと未使用の変数や関数を検知しづらい ○ 概ね移行しづらいパターンに関しては Teachme AIの開発で網羅できている ● Options API（&setup）が根強い文化の組織で、いきなり script setupに移行するのは大変そう ● thisでのアクセスがなくなるので、非常に嬉しい ○ ● thisがどこまで参照できるのかが分かりづらい 小さいコンポーネントなら Options APIでもいいのだが、小さいコンポーネントの方が Composition APIで 書きやすいというジレンマ confidential Copyright © 2023 Studist Corporation. all rights reserved.

コワくないComposition API script setupのサンプルは作ってあるので Teachme AI周りを参考にしてみてください confidential Copyright © 2023 Studist Corporation. all rights reserved.

コワくないComposition API プロダクト技術責任者としてscript setupを推進する？ 推進はしない が、徐々に移⾏できるものは移⾏していく confidential Copyright © 2023 Studist Corporation. all rights reserved.

まとめ

コワくないComposition API まとめ ● Composition APIは敬遠するほど難しいことはない ○ thisを使ったアクセスを前提としているコードが多い場合は難しい ● まずはOptions API&setup()から始めてみるのがオススメ ● Compositon APIを使う前提なら script setupが公式から推奨されている ● script setupで書いた方がエディタや IDEの機能の恩恵を受けやすい ○ ● 比較的純粋な TypeScriptに近い ある程度の移行パターンは網羅済み ○ confidential Teachme AI関連のコンポーネントはほぼ script setup Copyright © 2023 Studist Corporation. all rights reserved.

コワくないComposition API Composition APIでもscript setupでも 気軽に聞いて下さい 👍 confidential Copyright © 2023 Studist Corporation. all rights reserved.

https://studist.jp/

• https://studist.jp/