コンポーネントを書くときの関数の順番
コンポーネントを書くときに、例えば Next.js だったら getStaticProps とか getServerSideProps とか getStaticPaths みたいな関数を書くし return で JSX/TSX を書くし場合によってはスタイルを CSS in JS で定義する。
その際にどの順番に書くのがいいのか？というのを考えたい。
Nuxt.js を Vue の SFC で書いていたときは template/script/style の順番で書いていた。
たぶんこれが普通だと思うんだけど、個人的になんとなく見にくかった記憶がある。
理由としては template に埋め込まれている変数や関数にどんな値や処理が入っているのかの情報が命名からの推測しかないからだと思う。
なので個人的人は script/template/style のような順番だといいなと思っていた。
ところで、これって React で副作用やライフサイクルフックの処理を書いたあとにコンポーネントを redner するのと同じ順番では？と思った。シンプルに上から下に定義したものを使ってくやつ。
Next.js はフレームワークの内部でいろんな処理をしてくれるので getStaticProps などの関数は命名さえ正しければ順番は関係ない(はず)
ただ、流れとしては処理を最初に書いたあとに UI を宣言するという流れがよさそうかなと思った。スタイルに関しては使うライブラリによってだいぶ異なりそうだけど、それでも CSS in JS なライブラリだったら UI の宣言より上に定義する必要がありそう。
前に Vue の SFC の template/script/style を並び替えるツールがあったような……と思って検索してみたらあった。
Vue.jsのコンポーネントの<script>タグと<template>タグの順番をただ並び替えるだけのCLIコマンドを作って公開した。
— Kawamata Ryo (@KawamataRyo) August 18, 2021
<script>が先頭の方がコード読みやすい気がする。https://t.co/RYKqeOkSar pic.twitter.com/LwswfoA19n