静的サイトをリニューアルする機会があったので、 Nuxt.jsを実験的に導入してみることにしました。
導入前
- font, br, pre, table, centerなどで組まれたDOM
- iframeによる2ペイン型ページ
- 1枚CSS
- 忍者ホームページ
ちょっと懐かしくなるような感じで組まれたHPです。担当者が次々変わった痕跡があちこちにあって、HTMLでコメントアウトされてたりする部分もちらほら。
更新は1年前から止まっており、管理する人がいない状態でした。
導入後
- npm, Webpack, Nuxt.jsの導入
- Nuxt.jsのテンプレートで各ページを置き換え
- 既存コンテンツの中身は可能なかぎりDOMには触れずにそのまま移植
- CSSは Sassに置き換え, FLOCSSでフルスクラッチ
- ogなどのヘッダの整備
- レスポンシブデザインによるSP対応
Nuxt.js導入
まずは、サーバーの中身をローカルに全部ダウンロードしてきました。画像ファイルなどの命名を軽く整理しておきます。
Nuxt.jsのZipを公式HPからダウンロードし、中身をさっきダウンロードしたディレクトリにそのままぶちまけます。
次に、ディレクトリの中に入り、必要なものをインストール。 prettierとかもついでに入れます。
$ yarn install $ yarn add --dev node-sass sass-loader prettier eslint-plugin-prettier eslint-config-prettier
.eslintrc.jsのprettier周りを書き換え。
module.exports = { root: true, env: { browser: true, node: true, }, parserOptions: { parser: 'babel-eslint', }, extends: [ 'plugin:vue/essential', 'prettier', ], plugins: ['vue', 'prettier'], }; >
nuxt.config.jsにヘッダなどをつらつらと書いていきます。
module.exports = { /* ** Headers of the page */ head: { title: 'おなまえ', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: '内容', }, { name: 'msapplication-TileImage', content: '/ms-icon-144x144.png', }, { name: 'msapplication-TileColor', content: '#ffffff' }, { name: 'theme-color', content: '#ffffff' }, { name: 'og:title', content: 'タイトル' }, { name: 'og:type', content: 'website' }, { name: 'og:url', content: 'http://example.com' }, { name: 'og:image', content: 'http://example.com/image.png' }, ...
既存ページの移植
まずは既存ページのHTMLをガンガン移植していきます。
$ yarn dev
を叩いてテスト用サーバーを起動。localhostに立つ開発用サーバーで、ブラウザでリアルタイムに確認できます。
pagesディレクトリの下に既存ページと同じようにファイルを切っていきます。拡張子はvueなので、index.htmlはindex.vueになる感じですね。
<template></template>で囲む感じで、既存ページを中にコピペしていきます。
<template> <article> <div>...</div> </article> </template>
共通部分とかはlayoutsのdefault.vueに切り出して記述。
<template> <div> <header> <h1>〇〇公式Webページ</h1> <nav> <ul> <li><nuxt-link to="/">メニュー1</nuxt-link></li> <li><nuxt-link to="/hoge">メニュー2</nuxt-link></li> <li><nuxt-link to="/fuga">メニュー3</nuxt-link></li> </ul> </nav> </header> <main> <nuxt/> </main> </div> </template>
CSSはSassというCSSの拡張でフルスクラッチしていきます。今回はレスポンシブデザインにするので、ブレイクポイントは変数で定義しておきました。ディレクトリ構成とかはたいていFLOCSSを採用してます。命名はBEM。
大体こんな感じで移植完了。いったん分割しちゃえば、あとはそれぞれのページのHTMLキレイにしていくだけです。
リリース
$ yarn generate
を叩くとdist以下に静的ファイルが生成されるので、それをまとめてFTPで上げるだけです。
感想
今回ほぼ初めてVueにも触ったんですがほんと簡単ですねこれ。ただ、Reactと比べるとブラックボックス感はあります。
単なるテンプレートエンジンとしてはReactと比較して導入コストがすごく低いです。HTMLベースなのでコピペでもそのまんま動くので、HTMLベースで抱えてる場合はVueの方が過去のページの書き換えが少なくて済みそう。
今回のケースだと変化する情報が大してないのですが、情報量が増えてくるとReactの方が長期的な管理はしやすそうです。
Reactは「学習コストが高い」という点から見ると、頻繁に管理者変わる系のところでは採用しづらいです。Vueだとコピペでまだ何とかなるから、強い人が来た時にきれいにしてくれるはず……。
コメント
コメントを投稿