この記事は ウェブクルー Advent Calendar 2020 14日目の記事です。
昨日は @hiro_mori さんの「 bubbleで共通パスワード付き会員登録サービスを作る 」でした。
はじめに
今年も弊社アドカレに参加させていただきます(・o・)
去年も参加したので、私がどんな人間かは以下の記事で、どうぞ。
わたし定時で帰ります(仮)
今回はNuxt.jsでサイト制作したので、その際に悩んだこと(現在進行形含む)を記事にしたいと思います。
制作したサイトの前提条件
- デザインがPCとSPで別れている(ダイナミックサービング)
レスポンシブデザインのサイトではありません(・_・)
ディレクトリもPCとSPで分けました。(スタイルも同様)
components
├── pc
└── sp
layouts
├── pc
└── sp
pages
├── pc
└── sp
前提条件を踏まえて、悩んだポイントごとに早速まとめていきたいと思います。
悩んだこと
Nuxt.jsでダイナミックサービングの事例が少ない
一番の詰みポイントですね、今も(笑)(泣)
SP用のスタイルがPCでも読み込まれてしまう
SPのテンプレでimportしているcommonのスタイルがなぜかPCにも読み込まれます。
幸いcommonの記述少ないし、PC記述でオーバーライドできてるからそんなに問題じゃないのですが、
ダイナミックサービングでテンプレ自体の読み込み分けてるのに、なんでだろう…という感じ。
importで読み込まなくてもコンポーネントが展開されてる
SPのテンプレでコンポーネントが読み込まれてると、PCでimportし忘れてもSPのコンポーネントが展開されました。
例えばSPのテンプレで以下のように読み込んでおくと
<template>
<Button />
</template>
<script>
import Button from '@/components/sp/Button.vue'
export default {
components: {
Button
}
}
</script>
PCテンプレでimportせずともSPのコンポーネント読み込まれるんですよね。
<template>
<Button />
</template>
本来PCのコンポーネント呼びたいのに、SP読み込まれてるの気付かず進んでしまったり、
importにPCのコンポーネント読み込みし忘れてしまうことが何回かありました。
同じ名前でもSPとPCで全く見た目の違うコンポーネントだとすぐ気づきますが、ボタンとかだと気づけず…意外と罠(゜-゜)
同一のコンポーネント名にしなければいいんですかね？
<PcButton />
<SpButton />
とか？そしたらディレクトリで分けてる意味なくなるし…うーん、という感じ。
コンポーネント名の重複WARNNING
ですよね感がすごいのですが、ディレクトリ分けてても同一の名前だけど大丈夫？という警告が。
WARN Two component files resolving to the same name Button:
- hoge/app/components/pc/Button.vue
- hoge/app/components/sp/Button.vue
先ほどと同様にファイル名冒頭にPCなのかSPなのかつける(PcButton.vue)とかにするしかないのかな？
出来ればディレクトリ管理にしたいですが(´・ω・)
コンポーネント粒度
今回は管理画面とサイトを作成しました。
管理画面は共通パーツも多くAtomic Designもどき(？)でいけたのですが、
サイトとなるとユニークなコンポーネントが多くなるので、全部をコンポーネントに分けなかったです。
同じ要素が2つページ跨いで出てきたものだけをコンポーネント化する感じにしたのですが、見極めがまだまだ…。
またコンポーネントの入れ子って最大の階層決まってるものなのでしょうか？
デザイン的にコンポーネントの入れ子が続いて孫の孫の孫みたいなコンポーネント出来上がったときに、
これでいいのか感がすごかったので階層の限度が気になるところですｗ
他のNuxt.js製のサイトのコードをもっとみないとですね( ..)φ
IEでカルーセル動かないの結構多い問題
今回のサイトは対象ブラウザにIE11が含まれていたのですが、カルーセル系が特に動かない！
(私の導入方法がミスしていただけかもですけどｗ)
いろいろ模索して、今回採用したのは
Vueで動作するように最適化されたVue.jsカルーセルコンポーネント Hooper
結構扱いやすかったので、お勧めです。スタイルもそこまでオーバーライドするのに苦戦しませんでした。
カルーセル含むプラグイン系は、まずIEで動くかどうかという選定基準があるのがネックでした。とほほ。。。
vue-scrolltoがモジュール読み込み推奨
vue-scrolltoで検索すると結構plugins配下に入れて使ってみよう系の記事が多く、実際に私もそうしていました。
Nuxt.js plugins プロパティ
が、うまいことスクロールできない時もあり…。
弊社開発さんが見つけてくれたのですが、Nuxt.jsではモジュール読み込みしてね、と公式が。
vue-scrollto#nuxtjs
Add vue-scrollto/nuxt to modules section of nuxt.config.js
{
modules: [
'vue-scrollto/nuxt',
// Or if you have custom options...
['vue-scrollto/nuxt', { duration: 300 }],
]
}
ということなので、vue-scrolltoをNuxt.jsで利用する際はモジュール読み込みが良さげです！
公式読めやって話ですね(´;ω;｀)
localhostのタブを沢山開くと表示されなくなる
大規模系の案件の時って、結構作ったページを複数開いて比較したりしながら作業するのですが、
localhostで、3つ以上タブを開くとフリーズしてしまう現象になりました。
例えばTOPページ、コンテンツページ、お問い合わせページを順々に開こうとすると
お問い合わせページで、ずっとぐるぐる…フリーズというか読み込まれないというか…
これってあるあるなんですかね？気になる(゜-゜)
layout/error.vueにviewportの上書きが効かない
タブレット表示の時にNuxt.js head プロパティでviewportの指定を変更しようとしたのですが、反映されず…いまだに謎ですw
まとめ
Nuxt.jsの小規模レスポンシブサイトならプライベート作ってて問題なかったのですが、大規模のダイナミックサービングの事例が少なく結構悩みながら作ってしまいました。。。
ので、ぜひこの記事に辿り着いた方で「うちではこんな風なディレクトリ構成だよ」とか「命名はこんなルールだよ」とかありましたらコメントお待ちしております！！！泣いて喜びます！！！！！
明日のウェブクルーAdvent Calendar 2020の担当は？
@yuko-tsutsui さんです！よろしくお願いします( ｀ー´)ﾉｼ