【用語】お砂糖の話　シンタックスシュガー

執筆に至った経緯

Vue.jsやjavascriptを使っていると良く耳にする用語だなと感じたからです。
また、特に調べたりしなくてもVue.jsを学ぶうえであまり支障がなく、文脈でなんとなく理解できるとは思いますが、頭に無駄なリソースを使わせない為にもメモしておくことにします。

シンタックスとは

そもそも ”シンタックス” とは何かですが、

シンタックスとは、統語論、構文（論）という意味の英単語で、ITの分野ではプログラミング言語などの人工言語の仕様として定められた文法や表記法、構文規則などのルールを指す。

引用：IT用語辞典
プログラミング言語の文法や表記法、構文規則のことです。

シンタックスシュガーとは

本題の ”シンタックスシュガー” についてですが、難しい話ではなく、文法や表記法、構文規則の省略系という事です。

Vue.js　シンタックスシュガー

Vue3から搭載された機能 Composition API のsetup関数のシンタックスシュガーについて紹介します。
Composition API　とは？と思う人もいると思いますが、この記事では説明を省きます。
【WEB開発】Vue.js開発環境を作ろう 導入編
上記記事通りにViteでプロジェクトを作成するとsrc/components/HelloWorld.vueというコンポーネントが自動で生成されます。

HelloWorld.vue

<script setup>
import { defineProps, reactive } from 'vue'

defineProps({
  msg: String
})

const state = reactive({ count: 0 })
</script>

この書き方がComposition API のsetup関数のシンタックスシュガーになります。
<script>タグにsetupと記述する事で本来下記のような構文になる部分を省略しています。

HelloWorld.vue'

<script>
import { defineProps, reactive } from 'vue'

export default {
  props: {
    msg: String
  },
  setup(props) {
    const state = reactive({ count: 0 })
    return {
      state
    }
  }
}
</script>

通常の構文は階層も深くなり可読性が少し悪いように感じます。
しかし、元の構文を覚えていないと解決できないバグに直面したり、プロジェクトによってはシンタックスシュガーを使ってない事もあると思いますので、元の構文もしっかりと理解したうえでシンタックスシュガーを使いましょう。