React使いがNuxt.jsをいきなり触ってみた

静的サイトをリニューアルする機会があったので、 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だとコピペでまだ何とかなるから、強い人が来た時にきれいにしてくれるはず……。