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だとコピペでまだ何とかなるから、強い人が来た時にきれいにしてくれるはず……。

コメント

  1. Slots by Betway Casino Resort, New Orleans - Mapyro
    Find 의왕 출장마사지 the best 광명 출장샵 deals on Slots 용인 출장샵 by Betway Casino Resort, New Orleans. Mapyro 전라북도 출장안마 users 부산광역 출장안마 are in control and you can't miss a bang.

    返信削除

コメントを投稿