TECH
Vol.144
Y.F.
Nuxt3 リファクタリングプロジェクト
リファクタリングに至る経緯
BOELのコーポレートサイトは、2020年にフルリニューアルを実施しています。
旧サイトはTIPSやNEWSなどの動的部分はWordPressをベースとし、静的部分はHTMLで構成されていましたが、フルリニューアルに合わせて、Nuxt.jsを用いたJAMスタック構成に変更しました。
Nuxt.jsについては以前、TIPS Vol.107「Nuxt.jsを使ってTodoリストを作ってみる」にて簡単に説明していますので、興味がありましたらご覧ください。
フルリニューアル以降、UI改善やコンテンツの拡充と並行して、パフォーマンスの改善に取り組んでいました。
そんな中、Vue3に対応したバージョンとして、Nuxt3のベータ版が2021年12月に、リリース候補（RC）版が2022年4月にリリースされたのを受け、Nuxt3を用いたリファクタリングプロジェクトが立ち上がりました。
改修の方向性を決める
リファクタリングの際に重視したこと
今回のリファクタリングにあたって重視したのは以下の項目です
- パフォーマンスの改善
- 最新技術の採用
- コード整理
リファクタリング開始
主な変更点
- scriptタグとページ内容の記述の順番が逆になる
- リアクティブな値はdataではなく、ref関数を使用して記述する
- mountedがonMounted()に変化するなど、ライフサイクルフックの書き直し
- createdで記述していた箇所はscript setup内に直接記述
その他、時流に合わせて以下のタスクも対応しています。
- WebPフォーマットに対応するモダンブラウザの普及に合わせて、サイト内で使用するリソースのWebP画像への完全切り替え
- Internet Explorerのサポート終了に伴い、動作確認環境からIE11を外し、IE対策のコードを削除
プロジェクトの遅延・衝突
import { useState } from '#app'
export const useBreadcrumb = () => useState('breadcrumb', ()=> [])
export const setBreadcrumb = (_breadcrumb:any) => {
const breadcrumb = useState('breadcrumb', () => _breadcrumb)
breadcrumb.value = _breadcrumb
}
export const useRouteState = () => useState('route', ()=> '')
export const setRouteState = (_route:any) => {
const routeState = useState('route', () => _route.path)
routeState.value = _route.path
}
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData:
'@import "~/assets/scss/_include/responsive.scss"; @import "~/assets/scss/_include/mixins.scss"; '
}
}
}
},
今後の対応について
サイト切り替えと同じ頃、Nuxt3のマイナーバージョンアップを続け、現在はメジャーアップデートの3.3.1がリリースされています。（2023年3月現在）
リリースノート
Webサイトへの影響を抑えるため、別途アップデート用のブランチを切り、検証した上でプロダクション環境へ適用しています。
今後もリリースされるであろう最新版へのアップデートは随時対応を進める予定です。
RECENT POSTS
Vol.198
From parent–child bonds to community: The future of education that nurtures diversity and designs relationships
Vol.197
Exploring the future of environmental design integrating vision, diversity, and a future-oriented perspective
Vol.196
Vision-making for diverse and future-oriented education: Interpreting the future of learning through environmental design
Vol.195
“One Health” and Japan — Toward an Era of Integrating Humans, Animals, and the Environment
Vol.194
The benefits and challenges of digital education in the AI era, and the future of learning
Vol.193
Vision-Making in the age of AI — How artificial intelligence is transforming the meaning of work and the nature of organizations
