こんにちは、現在フリーのマークアップエンジニアとして活動しているしょーごと申します。
最近はYouTubeなどでも発信しています。
普段はWordPress構築や静的サイトコーディングをメインとしているのですが、
最近機会に恵まれまして、Nuxt.jsのマークアップ部分（ロジック以外）を担当しております。
結果的に大苦戦してベテランの方に大迷惑をかけてしまったので、
マークアップエンジニアやデザイナーがNuxt.jsのマークアップ部分をアサインされた場合に必要な知識をまとめました。
Nuxt.jsはweb制作業界にも少しづつ浸透してきているので、マークアップエンジニアやデザイナーさんもいずれ触る期間があるかもしれない点で、同業の方々に参考にして頂けたらと思います。
俺の屍を超えていけ
Nuxtってなんなの？
Vue.js単体では開発に不足している機能が多いです。なので従来はプラグインやライブラリを導入していましたが、Nuxtは色んな機能が最初から盛り込まれているフレームワークになります。
Vue.js+ライブラリの集まりみたいなものです。
Nuxt.jsのマークアップ部分とは？
Nuxt,jsはご存知の通り、単一ファイルコンポーネントと呼ばれています。
HTML,CSS,JSが一つのファイルにまとまっています。
以下コードは超適当なので、scriptにロジックがかいてあるんだとだけ認識頂けたら🙏
<template>
<div>
<div class="posts overflow-scroll mb-24">
<post v-for="(post,index) in posts" :key="index" :post="post" />
</div>
<el-upload v-if="!imageUrl" action :show-file-list="false" :http-request="uploadFile">
<el-button size="small" type="primary">Click to upload</el-button>
</el-upload>
<el-input type="textarea" :rows="8" placeholder="Please input" class="mt-8" v-model="text"></el-input>
</div>
</template>
<script>
import Post from "~/components/Post.vue";
import { db, firebase } from "~/plugins/firebase";
export default {
components: {
Post,
},
data() {
return {
posts: [],
imageUrl: null,
text: null,
};
},
methods: {
async post() {
await db.collection("posts").add({
text: this.text,
image: this.imageUrl,
createdAt: new Date().getTime(),
});
this.text = null;
this.imageUrl = null;
window.alert("保存されました");
},
},
mounted() {
db.collection("posts").onSnapshot((snapshot) => {
snapshot.docChanges().forEach((change) => {
const doc = change.doc;
if (change.type === "added") {
this.posts.unshift({ id: doc.id, ...doc.data() });
}
});
});
},
};
</script>
<style lang="scss" scoped>
input {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.posts {
text-align: center;
}
ここのscript以外が作業範囲になります。
つまり、チーム開発が前提です。
厳密に言えば、
1.HTML部分のコーディング
2.Scoped CSS、グローバルCSSの記述と設計(Sassが標準)
3.コンポーネント分け（ここだけscript部分）
4.状態管理でのclass出し分け（v-forやv-bind,propsあたり）
5.CSSフレームワークの利用と共存（Tailwindやbulma、Element-uiやBuefyなど）
このあたりが業務範囲になります。
その他はプログラマーさんに担当していただきます。
プログラマー→フロントエンド、フルスタックエンジニア
マークアップエンジニア→コーダー、デザイナー
では、これらをふまえてNuxt.jsのマークアップ部分を担当する上で何を知っておくといいのか解説します。
①Nuxtのコンポーネント、レイアウト、ページルーティング
やはりここが一番重要になるかと思います。
以下公式の画像になります。
Nuxtでは一般的にビューの表示は
1.レイアウト（全ページ読み込まれる）
2.ページ
3.コンポーネント
の3つに別れます。
レイアウトの役割
レイアウトは各ページでの共通要素を書きます。
大抵はheaderとfooterコンポーネントを呼びこむぐらいだと思います。
<template>
<div>
<app-header />
<nuxt />
<app-footer />
</div>
</template>
<nuxt />という部分に、各ページの内容が入ってきます。
ページの役割
そのページ専用の内容を書いていきます、
直接HTMLを書いたり、コンポーネントを呼び込んで構築していきます。
レイアウトでheaderとfooterは呼び込み済みなので、それ以外の部分になります。
またNuxtではルーティングがすでに設定してあるため。例えばusersページを作る際には、
これでlocalhost:3000/usersでその配下のindex.vueを表示させることができます。
pagesディレクトリ以下がそのままページのディレクトリ構成を示しています。
コンポーネントの役割
header,footer,sidebar,navigationなどダントツでファイル数が多くなります。
基本的に共通化できそうな塊はだいたいコンポーネント化していきます。
レイアウトやページで読み込んで表示させていきます。
大きめのコンポーネントの場合、コンポーネントの中でコンポーネントを読み込むなどの状況もよくあります。
私のブログを例にしてみます。
赤枠：レイアウト
緑枠：ページ
青枠：コンポーネント
コンポーネントの読み込みはimportとexport defaultをセットで使います。
userコンポーネントを読み込む場合
<template>
<div class="users">
<user />
<user />
</div>
</template>
<script>
import User from "~/components/User.vue";
export default {
components: {
User,
},
};
</script>
コンポーネント間でのメソッドや状態の受け渡しなどもあるので、プログラマーと相談しつつコンポーネント分けの粒度を決めるといいかなと思います。
②Scoped CSSとグローバルCSS設計
Scoped CSSについて
Scoped CSSは、scopedを記入するだけで使えます。その単一ファイル内にしかCSSのスコープが及ばないため、グローバル汚染がなくよく
「CSS is too fragileからの脱却だ！」的に叫ばれますが、しかしやはり銀の弾丸はなく、h2やsectipnなどのセレクタに直接指定すると普通に子コンポーネントを汚染します。
このようにカスタムデータ属性により影響範囲を限定的にしています
まあ普通にBEMとか使っていれば問題ないです。
Scoped CSSにおけるクラス設計
詳しくは以下の記事に譲りますが、Scoped CSSでも暴虐無人プレイができるわけではないです。
ただ、普通にBEM的にクラス名を書いていけば、バッティングの可能性は相当低くなるので、
Web制作にNuxt.jsが有用である理由の一つとなっております。
グローバルCSS
全体に適用したいCSSはassets以下にcssファイルを置いて、それをnuxt.config.jsで読み込むのですが、とりあえず「Scoped CSS」と「グローバルCSS」に分かれているらしいぐらいの認識で大丈夫です。
reset.scssとか_variables.scss,_mixin.scssなど全体で使いそうなものを定義していきます。
③状態変化でクラスの出し分け
v-bind,props
意外にここも知っておいたほうがいいです。
例えばよく「トップページのみヘッダーのデザインが違う🙀」ということはよくあります。
しかしレイアウトでheaderコンポーネントを読み込んでいるため、トップページのみ変更するのは難しく感じます。
そこでpropsとv-bindが出てきます。
手順としては
1.トップページ専用のレイアウトを準備し、利用
2.topであることをBooleanで管理し、trueのときにheaderにクラス付与
となります。
トップページ専用のレイアウトをtop.vue、trueを渡す先のheaderコンポーネントははheader.vueとし、トップページの表示はindex.vueが行います。
まずはtop.vueで:is-top="true"とすることでトップであることをheaderコンポーネントに伝えます。
<template>
<div>
<header :is-top="true" />
<Nuxt />
<footer />
</div>
</template>
<script>
import Header from '~/components/header-nav'
import Footer from '~/components/footer-nav'
export default {
components: {
Header,
Footer
}
}
</script>
その後、index.vueではレイアウトとしてtop.vueを使うと宣言します。
layout: 'top',
headerコンポーネントでpropsによりtrueを受け取り、v-vindでtrueのときにclassを付与します。
<template>
<header :class="{ 'top-header' : isTop === true }">
</header>
</template>
<script>
props: {
isTop: {
type: Boolean
}
}
</script>
これにより、トップページにのみtop-headerというクラスが付与できるようになります。
他にもv-onやv-forについても知っておいたほうがいいです。
v-onはモーダルの表示、v-forは<li v-for="(item, index) in items">などでindexを取り出しループ内で動的にクラス名を付与したいときに、役立ちます。
ここでは詳しくは割愛します。
④npm関連
直接Nuxtとは関係しませんが、npmを普段より利用しているかも重要です。
マークアップ側が自分でパッケージを入れることはほとんどないと思いますが、必須知識です。
npm install
チーム開発ではよくパーケージが新しくインストールされていたりします。
その際に、「package.jsonが更新されてる！！ということはnpm iすればいいんだ！！」と知っていればいいのですが、知らないとエラー画面に飛ばされます笑
npm run dev
Nuxtのサーバーを起動するnpm scriptsです。
ファイルを保存したら、画面を自動リロードしてコンパイルしてくれます。
nvm
Node.jsのバージョン管理ツールです。
開発開始前にnode.jsのバージョンはチームメンバーで合わせておくべきです
npmで入れるモジュールが、Nodeのバージョンに依存するため、チームメンバーのグローバルNodeのバージョンが違うと、地獄と化します。
⑤Git
これもNuxtから離れますが、チーム開発ではかなり重要です。
Nuxtを扱うような案件では十中八九必要でしょう。
いやテーム開発でGit運用とか常識やろと声が聞こえそうですが、1人Gitしか経験なく、マークアップ案件でGithub flowでのチーム開発とかほとんどないので自分は大苦戦しました...
diffが見やすいsourcetreeで大丈夫だと思います。
最低限抑えておくべきこと
- github flow（機能やページ毎にfeatureブランチを切って運用するぐらい）
- プル→ステージング→コミット→プッシュ→プルリクの流れがわかる
- コンフリクト対応
- スタッシュを知っておく（割と変更内容を退避させるため）
ぐらいかなと思います。コンフリクトの解消など自分はパニクってしまいレビュアー先輩エンジニアの方によしなにしていただきマージしてもらいましたが、これは迷惑かけたのであまりよくないと思いました。
Gitでの開発流れ
1.最新origin/masterからローカルmasterにpull（この際にpackage.jsonが更新されていたら、npm iしてパッケージを入れておく）
2.masterからfeatureブランチを切り作業開始
3.作業が完了したらコミットしプッシュする
4.プルリクを出し、レビュアーにレビューを受ける、問題なければマージされる、問題あれば修正し再度コミットプッシュする
5.マージされたらmasterにチャックアウトし、必ずプルし最新のmasterにする。
6.そして次のfeatureブランチを切り、作業開始
少人数の開発&トラブルがなければこんな感じだと思います。
Nuxt.jsでのマークアップ案件は増えるのか
NuxtはfirebaseやヘッドレスCMSと組み合わせてJamstackで利用されているイメージですが、ロジック部分に集中したい人は一定層いると考えています。
その際に、Nuxtの構造を理解しているマークアップエンジニアにスタイリングを外注できたら楽そうなので、
需要としてはポツポツ発生していそうだと思います。
Nuxtオンリーでの静的サイト制作については、未知数です。
Web制作で使われるならVueでのアニメーションの知識が必要になるのと、枯れているjQueryの資産が偉大なので、すぐに広まるのは考えにくいです。
しかし保守性の面でコンポーネントやScoped CSSが大変魅力的なので、大規模サイト制作で真価を発揮するかなと思っています。